Forem: sectasy

Crafting a Seamless UX: Custom Confirmation Dialogs with Turbo 🚀✨

sectasy — Fri, 19 Jan 2024 21:33:33 +0000

Introduction 👋

In the intricate landscape of user experience (UX) design, confirmation dialogs stand as guardians against inadvertent data loss.
This article explores the significance of confirmation dialogs and their indispensable role in refining user interface (UI) design.

The UX Power of Confirmation Dialogs 💡

Confirmation dialogs, ubiquitous in digital interfaces, act as a crucial defense mechanism, preventing unintended actions that could jeopardize critical user data. Their primary purpose is to add an extra layer of security, compelling users to confirm their intent before embarking on potentially irreversible actions.

Guarding Against Accidental Deletion

Consider a scenario where a user, navigating an application, accidentally clicks the "Delete" button. Without a confirmation dialog,
this innocent mistake could result in the loss of valuable data. Confirmation dialogs offer users a moment of pause, minimizing the risk of unintended consequences.

Empowering User Control

Confirmation dialogs not only shield against data loss but also empower users, providing greater control over their actions within a platform. Well-designed confirmation dialogs align with user-centric design principles, prioritizing user safety and satisfaction.

Best Practices for Confirmation Dialogs 🌟

To maximize the effectiveness of confirmation dialogs, adherence to best practices is crucial. Clear, concise, and easily understandable language is paramount. Ambiguous wording can lead to user frustration, defeating the purpose of the dialog.

Strategic placement and design ensure that dialogs are noticeable without being intrusive. Intuitive icons and consistent visual cues help users quickly grasp the significance of the dialog, fostering a seamless and efficient user experience.

When to use

Important system events requiring prompt user intervention.
Actions with destructive consequences, like deletion or impactful transactions.
Especially for actions that are irreversible.

When not to use

Avoid implementing confirmation dialogs for actions that lack serious consequences, such as changing user preferences. Utilize them exclusively for actions with substantial implications.

Implementing Custom Dialogs in Rails 7 with Turbo 🛠️

Assuming you're using Rails 7 with Turbo, integrating a custom dialog box is a breeze. Design your dialog box, create a partial, and render it from your application layout. My personal touch? Crafted the dialog using Tailwind CSS for a sleek look and feel. Any questions? Feel free to ask!



dialog#turbo-confirm.backdrop:bg-gray-900.backdrop:bg-opacity-80.h-modal.rounded-lg.shadow-xl
  form[method="dialog"]
    .relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all

      .bg-white.px-4.pb-4.pt-5.sm:p-6.sm:pb-4.mb-5
        .sm:flex.sm:items-start
          .mx-auto.flex.h-12.w-12.flex-shrink-0.items-center.justify-center.rounded-full.bg-red-100.sm:mx-0.sm:h-10.sm:w-10
            svg.w-6.h-6.text-red-600[aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 20"]
              path[stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h2v5m-2 0h4M9.408 5.5h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"]

          .mt-3.text-center.sm:ml-4.sm:mt-0.sm:text-left
            h3#dialog-title.text-base.font-semibold.leading-6.text-gray-900
              = t('dialog.title')

            .mt-2
              p#dialog-body.text-sm.text-gray-500
                = t('dialog.default_body')

      .bg-gray-50.px-4.py-3.flex.flex-row-reverse.sm:px-6
        div
          button#dialog-cancel.py-2.5.px-5.me-2.mb-2.text-sm.font-medium.text-gray-900.focus:outline-none.bg-white.rounded-lg.border.border-gray-200.hover:bg-gray-100.focus:z-10.focus:ring-4.focus:ring-gray-200[value="cancel"]
            = t('dialog.cancel')

          button#dialog-confirm.px-5.py-2.5.me-2.text-sm.font-medium.text-white.bg-red-700.hover:bg-red-800.focus:ring-4.focus:outline-none.focus:ring-red-300.rounded-lg.text-center[value="confirm"]
            = t('dialog.apply')

In case you're not using slim templates you can easily convert this piece of template to erb using a tool such a https://tools.gizipp.com/slim-to-html-erb



// app/javascript/application.js

Turbo.setConfirmMethod((message, element) => {
  let dialog = document.getElementById("turbo-confirm")
  const body = document.body;

  // dynamic body, we could do similar thing with title or buttons and even with colors!
  // By adding more data attributes to our element and handle here after that
  dialog.querySelector("[id='dialog-body']").innerHTML = window.DOMPurify.sanitize(message);

  // prevent background from scrolling
  body.classList.add('overflow-hidden');
  dialog.showModal()

  return new Promise((resolve, reject) => {
    dialog.addEventListener("close", () => {
        dialog.returnValue == "confirm" ? resolve(true) : body.classList.remove('overflow-hidden');
    }, { once: true })
  })
})

Here's how you can easily use this feature in your template:



- confirm_body = 'Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.'
= link_to(deactivate_account_path, data: { turbo_method: :patch, turbo_confirm: confirm_body })

So, as you embark on your coding endeavors, remember that the is not just about lines of code — it's about crafting experiences that resonate with users, ensuring they navigate your Rails 7 application with confidence and satisfaction. Happy coding, and may your user experience always be Turbo-charged! 🚀✨

PyI18n v1.2.0: The Ultimate Solution for Python Internationalization

sectasy — Thu, 16 Mar 2023 15:18:57 +0000

I'm very excited to announce the release of PyI18n v1.2.0, the latest version of open-source Python library for internationalization. PyI18n is designed to provide an easy and efficient way to manage translations and support multiple languages in your Python applications. With this latest release, PyI18n is now even more powerful and flexible, making it the ultimate solution for Python internationalization.

Key Features of PyI18n v1.2.0:

Namespaced Translations: PyI18n now supports namespaced translations, which allows you to organize your translations into logical groups. Namespaces make it easier to manage your translations and prevent naming conflicts.
Improved Translation File Handling: PyI18n now supports nested translations and improved file handling, making it easier to manage and organize your translations.
Dynamic Translation Loading: PyI18n can now dynamically load translations based on user preferences, making it easy to switch between languages at runtime.
Improved Documentation: We have improved the PyI18n documentation, making it easier to get started and use PyI18n in your projects.

How to Get Started with PyI18n:

Getting started with PyI18n is easy. Simply install the PyI18n package using pip and import it in your Python project.

pip install pyi18n-v2

To use PyI18n, you need to create a translation file in eg. YAML format. The translation file should contain a dictionary with translations for each language you want to support.

en.yml

en: 
    hello: "Hello, World!
    welcome: "Welcome to PyI18n!"

fr.yml

fr: 
    hello: "Bonjour, le monde!" 
    welcome: "Bienvenue à PyI18n!"

Once you have your translation file, you can load it in your Python code using PyI18n.

from pyi18n import PyI18n


i18n = PyI18n(('en', 'fr'))
_: callable = i18n.gettext

You can then use _ method to get translations for your application.

print(_('en', 'hello.welcome'))

Conclusion:

PyI18n v1.2.0 is the ultimate solution for Python internationalization, offering powerful features and flexibility for managing translations and supporting multiple languages in your Python applications. With PyI18n, you can easily create and manage translation files, dynamically load translations, and support pluralization in translations. We hope you will find PyI18n v1.2.0 useful in your projects.

How to Implement Login with Discord feature in Rails 7 using Devise

sectasy — Sun, 05 Feb 2023 12:03:58 +0000

Discord is a widely used communication platform among gamers and communities around the world. Integrating the Discord login feature into your Ruby on Rails application can provide a more streamlined and secure way for users to sign up and log in.

Step 1: Set up the Discord Application

To integrate with Discord OAuth, you first need to set up a Discord Application. To do this, follow these steps:

Log in to the Discord Developer Portal (https://discord.com/developers/applications)
Click on the New Application button
Give your application a name and click on the Create button
From the OAuth2 section, copy CLIENT ID and CLIENT SECRET
Paste your redirection URL, typically it will be https://<your-domain>/user/auth/discord/callback

NOTE: For the integration to work correctly, the server must be running with secure HTTPS, which is best done on a VPS using a domain. If you don't have a VPS, you can get one for free from Oracle, and a free domain from https://free-for.dev/#/?id=domain.

Step 2: Add the required Gems to your `Gemfile`

gem 'devise', '~> 4.8.1'
gem 'omniauth', '~> 1.3.1'
gem 'omniauth-discord', '~> 1.0.0'

Step 3: Configure the `omniauth-discord` gem

Enter the saved data from Step 1 into your credentials.yml file

EDITOR=vim rails credentials:edit

discord:
    client_id: 1068564434567456784
    secret: BCf6heHXdcCc5Lwy5YL5R5BJ6SDm6QK2

Next, set the appropriate configuration for the Discord provider in the config/initializers/devise.rb file by adding the following two lines:

discord_oauth = Rails.application.credentials.discord
config.omniauth :discord, discord_oauth[:client_id], discord_oauth[:secret], scope: 'email identify'

Step 4: Add a method that creates a user with `omniauth` to the model.

def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.username = auth.info.name
      user.email = auth.info.email
      user.password = Devise.friendly_token[0, 20]
    end
end

If you want to download user profile pictures from discord, it's best if you use the carrierwave gem

gem 'carrierwave', '~> 2.2.3'
gem 'carrierwave-i18n', '~> 0.2.0'

And create a propier uploader app/uploaders/avatar_uploader.rb

class AvatarUploader < CarrierWave::Uploader::Base
    include CarrierWave::MiniMagick

    storage :file
    process :resize_to_fit => [ 150, 150 ]

    def store_dir
        "uploads/#{model.class.to_s.underscore}"
    end

    def size_range
        0..1.megabytes
    end

    def extension_allowlist
        %w(jpg jpeg png)
    end

    def filename
        "#{model.id}.#{file&.extension}" if file
    end
end

Next, mount uploader to your model.

mount_uploader :avatar, AvatarUploader

NOTE: Gem carrierwave uses the MiniMagick library to work with photos. Don't forget to install this library on your system (sudo apt-get install libmagickwand-dev).

After that, let's go back to our self.from_omniauth method for a moment to add support for downloading avatars.

def self.from_omniauth(auth)
    image_available = Faraday.get(auth.info.image).status == 200

    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.username = auth.info.name
      user.email = auth.info.email
      user.password = Devise.friendly_token[0, 20]
      user.remote_image_url = auth.info.image if image_available
    end
 end

image_available = Faraday.get(auth.info.image).status == 200

if the user does not have an avatar on discord, then under auth.info.image we will get the value nil (similarly in the case if for some reason the avatar on cdn discord is unavailable) and our uploader will return an error, to prevent this you need to first check if the avatar is correct.

account.remote_image_url = auth.info.image if image_available

The remote_image_url method comes from our uploader. This method is to download the avatar from the Discord CDN and save it locally on the user.

Step 5: Implement the Omniauth Callback Controller

To handle the login from the Discord provider, you need to implement a callback controller. To do this, create a new file in your application's app/controllers directory named omniauth_callbacks_controller.rb with the following code:

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
    skip_before_action :authenticate_account!

    def discord
        @user = User.from_omniauth(request.env["omniauth.auth"])

        sign_in(:account, @user)

        # in my case response was incorrect, so I made it by myself.
        redirect_to after_sign_in_path_for(@user),
                  notice: t('devise.omniauth_callbacks.success', kind: @user.provider)
    end
end

Step 6: Add a discord login button to view

Now that you have completed the setup and configuration, it's time to implement the "Login with Discord" button in your application. You can do this by adding the following code to your view file:

= button_to("Log in with Discord", user_discord_omniauth_authorize_path)

Step 7: Test the integration

Finally, test the integration by running your Rails application and clicking on the "Login with Discord" button. If everything has been set up correctly, you should be redirected to Discord for authentication and then back to your application where you will be logged in as the corresponding user.

And you can optionally write a tests for that:

class Users::OmniauthCallbacksControllerTest < ActionController::TestCase
    include Devise::Test::ControllerHelpers

    setup do
        @request.env["devise.mapping"] = Devise.mappings[:account]
        @request.env["omniauth.auth"] = discord_oauth2_mock
        OmniAuth.config.test_mode = true
    end

    teardown do
        OmniAuth.config.test_mode = false
    end

    test 'authorize user from discord' do
        assert_not @controller.current_user
        post :discord, params: { code: 'H7buenBzdnlKavjCdG6TWzNLgjrF5p' }
        assert_redirected_to <your_app_main_path>
        assert_not_nil @controller.current_user
        assert @controller.current_user.provider == 'discord'
    end

    ... more cases below

    private
        def discord_oauth2_mock
            OmniAuth.config.mock_auth[:discord] = OmniAuth::AuthHash.new({
                provider: 'discord',
                uid: '940987618345254912',
                info: {
                    email: 'fakeemail@gmail-fake.com',
                    username: "David",
                    image: 'https://cdn.discordapp.com/avatars/940987618345254912/c62c9b46dc9e877fff993bbe56ee7452'
                },
                credentials: {
                    token: 'abcdefgh12345',
                    refresh_token: '12345abcdefgh',
                    expires_at: DateTime.now
                }
            })
        end
end

Integrating Discord OAuth into your Ruby on Rails application can provide a more seamless and secure way for users to sign up and log in. By following the steps outlined in this tutorial, you can have your own "Login with Discord" button up and running in no time.

JetBrains Fleet One Dark Pro theme

sectasy — Wed, 11 Jan 2023 10:25:25 +0000

Hello everyone!

I am excited to announce the release of my new (and first) custom color scheme for JetBrains Fleet, called "One Dark Pro" based on theme with same name for vsc.

This scheme is based on the popular One Dark Pro theme, and it features a dark background with contrasting colors, making your code easy to read and visually appealing. It's perfect for those who want to give their JetBrains Fleet experience a fresh look and improve their productivity.

The color scheme is available in the form of a .json
file and it's very easy to install. Simply download the file and import it into JetBrains Fleet. You'll find instructions in the file on how to do this.

If you're interested in giving that theme a try, you can find the file on my GitHub repository.

I hope you enjoy using my new custom color scheme, and I would love to hear your feedback! If you have any issues or suggestions for improvements, please let me know!

repository: https://github.com/sectasy0/fleet_one_dark

Thanks!

Easy way to internationalize your apps with PyI18n

sectasy — Tue, 23 Aug 2022 12:36:00 +0000

Introduction

PyI18n is a simple and easy to use internationalization library written for python projects, to help you handle multiple languages in your applications.

How start use PyI18n

First, you have to create your locale files, in my example this will be in locale directory (default PyI18n locales path). In my example I use only two languages polish (pl.yml) and english (en.yml).

Let's write simple FastAPI app.

Project structure for this example



.
├── app.py
└── locales
    ├── en.yml
    └── pl.yml

en.yml



en:
  greetings:
    hello_name: "Hello there {name}! nice to meet you"

pl.yml



pl:
  greetings:
    hello_name: "Witaj {name}! miło mi cię poznać"

Assume we're logged in user and we have stored locales in database, otherwise we will just return default locale.



from pyi18n import PyI18n
from fastapi import FastAPI
from typing import Callable, Dict

app: FastAPI = FastAPI()
i18n: PyI18n = PyI18n(('pl', 'en'))

DEFAULT_LOCALE: str = 'en'

_: Callable = i18n.gettext

fake_db: Dict[str, str] = {
    "logged_users": {
        "Piotrek": {
            "locale": "pl"
        },
        "John": {
            "locale": "en",
        },
    }

}

def get_user_locale(name) -> str:
    current_user_locale: str = fake_db["logged_users"].get(name)
    return current_user_locale['locale'] if current_user_locale else DEFAULT_LOCALE


@app.get("/hello/{name}")
def hello_name(name: str):
    locale: str = get_user_locale(name)
    return {"greeting": _(locale, "greetings.hello_name", name=name)}

Now it's time to run our app and check what happens, for testing I used RapidAPI vscode extension (It's something like postman in visual studio code)

A full documentation for this module is available at: https://sectasy0.github.io/pyi18n.

If you had some questions or if you see any inaccuracies please let me know in the comments below! Thanks for reading <3

Talking to python with rust

sectasy — Mon, 15 Aug 2022 05:46:00 +0000

A few words about Rust

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

Why write Python modules in Rust?

Python is undoubtedly one of the more powerful programming languages, but there are situations when a faster and more low-level tool is required. For example, calculations in which we care about the fastest possible code execution

Getting started

1. Install Rust and Cargo

On Linux and macOS systems, this is done as follows:

$ curl https://sh.rustup.rs -sSf | sh

On Windows, download and run rustup-init.exe. It will start the installation in a console and present the above message on success.

2. Create new project and edit Cargo.toml

$ cargo new pyrustlib --lib

To your Cargo.toml file you should add cpython dependency, this file should looks like

[package]
name = "pyrustlib"
version = "0.1.0"
edition = "2021"

[lib]
name = "pyrust"
crate-type = ["dylib"]

[dependencies.cpython]
version = "0.7"
features = ["extension-module"]

Let's talk to Python

Next, we’re going to open src/lib.rs and begin editing; this is where the actual code of our library lives.


#[macro_use]
extern crate cpython;

use cpython::{Python, PyResult, PyString};

fn hello_from_rust(_py: Python) -> PyResult<PyString> {
    Ok(PyString::new(_py, "Hello from Rust!"))
}

py_module_initializer!(libpyrust, libpyrust, PyInit_libpyrust, |py, m | {
    m.add(py, "__doc__", "This module is implemented in Rust")?;
    m.add(py, "hello_world", py_fn!(py, hello_from_rust()))?;
    Ok(())
});

py_module_initializer is a macro defined by the cpython crate we imported at the top of our library. The first parameter (‘status’) is the name of our module, the second parameter is the Python2 naming for our module, while the third parameter is for Python3. The last segment of code on the first line (py, m) allows the modification of received module objects.

We then add a docstring and use the py_fn! macro to build the Python version of our function. That’s all there is to it! Save and exit.

Compile the code

Make sure you are in the root directory of the project (where the Cargo.toml file is).
Run the following command to compile the code:

cargo build --release

If the compilation went successfully you will see a new target directory in the main project directory. You can find the library in target/release, it's named pyrustlib.so.

Test in python interpreter

The name for import this module in python is name given in py_module_initializer which in my case is libpyrust

As you can see, our module works properly.

Additional Information

For more advanced usage of cpython I recommend looking through the rust-cpython repo

Conclusion

I really hope you found this tutorial helpful in some way! If you notice any errors or inaccuracies, please drop me a message. I want to invite you to my github, maybe you found something interesting. Thanks for reading!

Python simple and easy to use internationalization library.

sectasy — Sun, 14 Aug 2022 12:47:00 +0000

I created a library that internationalizes python applications and decided to share with you, maybe someone will need it :D

Opinions about the code and the library itself are welcome.

https://github.com/sectasy0/pyi18n

Forem: sectasy

Crafting a Seamless UX: Custom Confirmation Dialogs with Turbo 🚀✨

Introduction 👋

The UX Power of Confirmation Dialogs 💡

Guarding Against Accidental Deletion

Empowering User Control

Best Practices for Confirmation Dialogs 🌟

When to use

When not to use

Implementing Custom Dialogs in Rails 7 with Turbo 🛠️

PyI18n v1.2.0: The Ultimate Solution for Python Internationalization

Key Features of PyI18n v1.2.0:

Conclusion:

How to Implement Login with Discord feature in Rails 7 using Devise

Step 1: Set up the Discord Application

Step 2: Add the required Gems to your Gemfile

Step 3: Configure the omniauth-discord gem

Step 4: Add a method that creates a user with omniauth to the model.

Step 5: Implement the Omniauth Callback Controller

Step 6: Add a discord login button to view

Step 7: Test the integration

JetBrains Fleet One Dark Pro theme

Easy way to internationalize your apps with PyI18n

Introduction

How start use PyI18n

Let's write simple FastAPI app.

en.yml

pl.yml

Talking to python with rust

A few words about Rust

Why write Python modules in Rust?

Getting started

Let's talk to Python

Compile the code

Test in python interpreter

Additional Information

Conclusion

Python simple and easy to use internationalization library.

Step 2: Add the required Gems to your `Gemfile`

Step 3: Configure the `omniauth-discord` gem

Step 4: Add a method that creates a user with `omniauth` to the model.