DEV Community: Hleb Kryshyn

Everything you have to know about React 19 ⚛️

Hleb Kryshyn — Sat, 29 Jun 2024 17:57:59 +0000

🤓 I want to equip you with the needed knowledge for before the new update will hit your production.

Why this updated was created?

The idea of the udpate is to make the UI more Optimistic less struggle, less code, and less external libraries.

What is Optimistic UI?

The Optimistic UI is the way to show user a change in the UI before the response from the server reaches the client.

5 features that will help you implement a better UI with React 19

1. useOptimistic

New hook useOptimistic will help us to calculate the optimistic value within a single hook.

import { useOptimistic, useState } from 'react';
function AppContainer() {
  const [state, setState] = useState()
  const optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) →> {
   // merge and return new state
   // with optimistic value   
   }
}

2. useTransition

hook useTransition which was added previously, right now the async transitions are supported

function UpdateName() {
    const [name, setName] = useState("");
    const [error, setError] = useState(null);
    const [isPending, startTransition] = useTransition();

    const handleSubmit = () => {
        startTransition(async () => {
            const error = await updateName(name);
            if (error) {
                setError(error);
                return;
            }
            redirect("/path");
        });
    };

    return (
        <div>
            <input 
                value={name} 
                onChange={(event) => setName(event.target.value)} 
            />
            <button onClick={handleSubmit} disabled={isPending}>
                Update
            </button>
            {error && <p>{error}</p>}
        </div>
    );
}

useTransition is helping us to update state without blocking the UI and providing the pending state by default.

3. New API `use`

New function use will help us to resolve async actions.

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

We can also resolve the Context with the use function

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading() {

  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

4. Ref as a prop

Best feature of the new update 🚀

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

No need for the forwardRef since React 19 👏

5. React Compiler

React Compiler is a tool to automatically optimize your code at a build time.

What we expect from the compiler?

Skipping cascading re-rendering of components Re-rendering <Parent /> causes many components in its component tree to re-render, even though only <Parent /> has changed.
Skipping expensive calculations from outside of React For example, calling expensivelyProcessAReallyLargeArrayOfObjects() inside of your component or hook that needs that data
Memoizing deps to effects To ensure that a dependency of a hook is still === on re-rendering so as to prevent an infinite loop in a hook such as useEffect()

🤰 When do we expect Compiler?

My assumption is late 2024, the info I got from the Andrew's Clark post on X.

🏁 Finish

Share in comments your thoughts regarding how React codebase will be similar to any other JS framework after the Compiler being integrated in the codebases 😁

Have a good React 19 🚀

How to implement Typescript Function overload

Hleb Kryshyn — Mon, 16 Oct 2023 15:00:00 +0000

👋 Hey folks! In this post, I want to cover the topic of function overloading and explain why it's essential to understand this concept, and why you shouldn't be afraid to use it!

📃 Wiki Definition

Function overloading or method overloading is the ability to create multiple functions of the same name with different implementations. Calls to an overloaded function will run a specific version of that function appropriate to the context of the call.

🧐 Wiki Definition Explanation

In short function overloading is a function with multiple call signatures. This means there are multiple ways to call a function.

Example:
Let's take a look at the example of a function which might be called in a few ways with different arguments

type ProductParams = {
    promo?: boolean
    isArchived?: boolean;
};

function getProducts(params: ProductParams) {
    const url = new URL('/api/v1/products');
    const urlParams = new URLSearchParams();

    if ('promo' in params) {
        urlParams.append('promo', params.promo.toString());
    }

    if ('isArchived' in params) {
        urlParams.append('isArchived', params.isArchived.toString());
    }

    url.search = urlParams.toString();

    return fetch(url.toString()).then(res => res.json());
}

You can call this function in 2 different ways, with 2 different params. Our function will return from the API products that might be promo or archived, or both promo and archived.

🔍 Multiple Function Signatures

Typescript's approach to function overloading is quite distinct from some other languages. Instead of having multiple function definitions, TypeScript uses multiple function signatures followed by a single function body.

The type-checker evaluates these signatures from top to bottom. This order matters because TypeScript will use the first signature that matches the function call. For instance, if a function call can match two overloaded signatures, TypeScript will choose the one that's listed first. Therefore, it's advisable to list more specific signatures higher and keep broader ones below.

💻 Let's implement the overloading for the example function

// Product Interfaces
interface PromoProducts {
    //... some properties specific to promo products
}

interface ArchivedProducts {
    //... some properties specific to archived products
}

interface PromoAndArchivedProducts {
    //... some properties combining both promo and archived products
}

type ProductParams = {
    promo?: boolean
    isArchived?: boolean;
};

// Function overloading signatures
function getProducts(params: { promo: true }): Promise<PromoProducts>;
function getProducts(params: { isArchived: true }): Promise<ArchivedProducts>;
function getProducts(params: { promo: true, isArchived: true }): Promise<PromoAndArchivedProducts>;

function getProducts(params: ProductParams) {
    const url = new URL('/api/v1/products');
    const urlParams = new URLSearchParams();

    if ('promo' in params) {
        urlParams.append('promo', params.maxPrice.toString());
    }

    if ('isArchived' in params) {
        urlParams.append('isArchived', params.isArchived.toString());
    }

    url.search = urlParams.toString();

    return fetch(url.toString()).then(res => res.json());
}

After the implementation, we will be able to use our function in different ways and have a type of safety in place.

🏁 Finish

I recommend not being afraid to use function overloading. It's so helpful when you're providing type-rich interfaces and aiming for better code readability and safety.

Singleton pattern in react application

Hleb Kryshyn — Thu, 15 Jun 2023 22:39:27 +0000

💭 Intro

In this article, I want to share my experience using the singleton pattern as a service inside a production React application.

🌧️ Problem

We had many places to handle the localisation logic. Our application is a multi-language web app that supports three languages. This results in constant interaction with localisation. However, the issue is that functions are spread across the application for all utilities connected to localisation. Sometimes, even one function was using a set of two languages and the other three languages. Such a mess was creating bugs and misunderstandings.

⚡️ Pattern solution

Such a task can be solved by implementing a singleton pattern because it's shared across the whole application and provides strict access control. It helped our team to centralize the localisation helpers in one place, and it also helps us to reduce the risk of bugs and misunderstanding by providing clear documentation for the methods and usage of the service.

🤔 What is the Singleton pattern?

"Singleton is a creational design pattern that lets you ensure that a class has only one instance while providing a global access point to this instance." - Refactoring Guru.

💡 According to the statement it's exactly what we need!

First, we should have only one instance throughout the whole application, which should be the source of truth.

Second, the instance should be accessed globally and be protected from overwriting from another part of the application because the whole application should use the same number of languages.

💻 Implementation

1) Singleton Class Definition

export class LocalisationService {
    private static instance: LocalisationService
}

This is the basic structure of our Singleton class, LocalisationService. We declare a private static variable instance of the same class. This variable will hold the single instance of our class.

2) Private Constructor and Static Creation Method

private constructor() {
    this.languages = {
      [LanguageCode.EN]: {
        shortName: LanguageCode.EN,
        longName: LanguageName.ENGLISH,
      },
      [LanguageCode.DE]: {
        shortName: LanguageCode.DE,
        longName: LanguageName.DEUTSCH,
      },
      [LanguageCode.FR]: {
        shortName: LanguageCode.FR,
        longName: LanguageName.FRANCAIS,
      },
    }
}

public static getInstance(): LocalizationService {
  if (!LocalizationService.instance) {
    LocalizationService.instance = new LocalizationService()
  }

  return LocalizationService.instance
}

Here, we have a private constructor that initializes the languages object. The constructor is private to prevent creating new instances of the class from outside. The getInstance method is a public static method that returns the single instance of the LocalizationService class. If the instance does not exist, it creates a new one.

3) Public Methods

export enum LanguageCode {
  EN = "en",
  DE = "de",
  FR = "fr",
}

export enum LanguageName {
  ENGLISH = "English",
  DEUTSCH = "Deutsch",
  FRANCAIS = "Français",
}
export interface Language {
  shortName: LanguageCode
  longName: LanguageName
}

These are the public methods of our Singleton class. getAllLanguages returns all available languages. getLanguageByShortName returns a specific language by its short name. getLanguagesExcept returns all languages except the one specified by the key.

4) Using the Singleton Service

import { LanguageCode, LocalizationService } from "services"

const localizationService = LocalizationService.getInstance()

This is how we use our Singleton service in our code. We import the LocalizationService and call the getInstance method to get the single instance of the service.

The code of the whole Service

export enum LanguageCode {
  EN = "en",
  DE = "de",
  FR = "fr",
}

export enum LanguageName {
  ENGLISH = "English",
  DEUTSCH = "Deutsch",
  FRANCAIS = "Français",
}
export interface Language {
  shortName: LanguageCode
  longName: LanguageName
}

/**
 * Represents the localization service, responsible for managing language-related tasks.
 * This class follows the Singleton pattern to ensure only one instance is used throughout the application.
 */
export class LocalizationService {
  private static instance: LocalizationService
  private readonly languages: { [key: string]: Language }

  /**
   * Initializes a new instance of the LocalizationService class.
   * The constructor is private to prevent instantiation from outside the class.
   */
  private constructor() {
    this.languages = {
      [LanguageCode.EN]: {
        shortName: LanguageCode.EN,
        longName: LanguageName.ENGLISH,
      },
      [LanguageCode.DE]: {
        shortName: LanguageCode.DE,
        longName: LanguageName.DEUTSCH,
      },
      [LanguageCode.FR]: {
        shortName: LanguageCode.FR,
        longName: LanguageName.FRANCAIS,
      },
    }
  }

  /**
   * Retrieves the single instance of the LocalizationService class.
   * If an instance does not exist, it creates a new one.
   * @returns {LocalizationService} The single instance of the LocalizationService class.
   */
  public static getInstance(): LocalizationService {
    if (!LocalizationService.instance) {
      LocalizationService.instance = new LocalizationService()
    }

    return LocalizationService.instance
  }

  /**
   * Retrieves an array of all available languages.
   * @returns {Language[]} An array containing all available languages.
   */
  public getAllLanguages(): Language[] {
    return Object.values(this.languages)
  }

  /**
   * Retrieves a language by its short name.
   * @param {LanguageCode} shortName - The short name of the language to retrieve.
   * @returns {Language | undefined} The language with the specified short name, or undefined if not found.
   */
  public getLanguageByShortName(shortName: LanguageCode): Language | undefined {
    return this.languages[shortName]
  }

  /**
   * Retrieves an array of all languages except the one specified by the key.
   * @param {LanguageCode} key - The key of the language to exclude from the result.
   * @returns {Language[]} An array containing all languages except the one specified by the key.
   */
  public getLanguagesExcept(key: LanguageCode): Language[] {
    return this.getAllLanguages().filter((language) => language.shortName !== key)
  }
}

🏁 Result

I have a good feeling about how this pattern fits into the React application development ecosystem. We already saw its success of it through popular libraries such as Redux. Implementing this pattern in a production application brought us development benefits in terms of consistency and development speed.

If you have any questions regarding this or other patterns, let's discuss them in the comments!

🧐 Do you have any other examples of design pattern implementation in your React codebase? Share it!

Chat GPT 🆚 Notion AI (Blog post)

Hleb Kryshyn — Sun, 02 Apr 2023 15:20:02 +0000

Let's check how ChatGPT and Notion AI will deal with the task of writing a "Blog Post about the advantages of AI usage".

That should be a pretty easy task for the AI because it doesn't require powerful historical plugins or programming skills, and the AI should be able to write about its own advantage 😉

Overview 🔭

Notion AI article - The Advantages of AI Usage
ChatGPT article - Embracing the Future: The Advantages of AI Usage
Summary
Comparison table

You can read this articles here or in Notion, because there I can split the articles in two column so it will be easier for you to read and compare face to face:
https://www.notion.so/Blog-Post-about-the-advantages-of-AI-usage-ChatGPT-vs-Notion-AI-c15e8eb65f81462f9a29ed69dfdab7e2?pvs=4

Notion AI article

The Advantages of AI Usage

Artificial Intelligence (AI) has revolutionized the world we live in. From personal assistants to self-driving cars, AI has made our lives easier and more convenient. The advantages of AI usage are numerous and far-reaching, and in this article, we will discuss some of the key benefits.

Increased Efficiency (Notion AI)

One of the most significant advantages of AI is that it can perform tasks at a much faster pace than humans. AI systems can process vast amounts of data in a matter of seconds, which is impossible for humans to do. This speed leads to increased efficiency in various sectors, such as healthcare, finance, and logistics. AI-powered machines and robots can work around the clock with little or no breaks, which significantly increases work output and production.

Improved Accuracy (Notion AI)

AI systems are highly accurate, and they can perform repetitive tasks without getting tired or making mistakes. This accuracy is critical in fields such as finance and healthcare, where a small error can have severe consequences. AI systems can also analyze vast amounts of data to identify patterns and trends that humans may not be able to detect. In the healthcare industry, AI-powered machines can detect diseases and symptoms that humans may miss, leading to more accurate diagnoses and better treatment options.

Cost Savings (Notion AI)

Implementing AI systems can lead to significant cost savings for businesses. AI can automate many tasks that would otherwise require human labor, such as data entry, customer service, and quality control. This automation can reduce labor costs, increase productivity, and improve the bottom line. AI-powered machines can also operate more efficiently than humans, which reduces energy consumption and maintenance costs.

Personalization (Notion AI)

AI can be used to personalize the user experience in various industries, such as e-commerce and marketing. By analyzing customer data, AI can recommend products and services that are tailored to each customer's needs and preferences. This personalization can lead to increased customer satisfaction and loyalty. With the help of AI-powered chatbots, businesses can provide personalized customer service and support to their clients, leading to more sales and customer retention.

Predictive Maintenance (Notion AI)

AI can also be used to monitor and maintain machinery and equipment. By analyzing data from sensors and other sources, AI systems can predict when equipment will need maintenance or repairs. This proactive approach can reduce downtime and maintenance costs and improve overall efficiency. AI-powered machines can also detect and diagnose problems before they occur, leading to fewer breakdowns and longer equipment lifespan.

Improved Decision Making by Notion AI

AI can help decision-makers make better decisions by providing them with accurate and relevant information. AI systems can analyze vast amounts of data and provide insights and recommendations that humans may not be able to identify. This information can help businesses make more informed decisions and improve their overall performance. In the finance industry, AI-powered algorithms can analyze market trends and make investment decisions based on the data collected, leading to more significant returns on investments.

In conclusion, the advantages of AI usage are many, and its potential for future growth is enormous. As AI technology continues to advance, we can expect to see even more benefits in various sectors. However, it is essential to consider the ethical and social implications of AI, such as privacy concerns and job displacement, and work to address these issues. With proper regulations and guidelines, AI can become a powerful tool that enhances our lives and transforms the way we work and interact with the world around us.

ChatGPT article

Embracing the Future: The Advantages of AI Usage

Introduction by ChatGPT

Artificial intelligence (AI) has become a vital part of our daily lives. From smartphones to medical diagnostics, AI has revolutionized the way we interact with technology and the world around us. As AI continues to advance and becomes more integrated into our society, we must consider the various advantages it brings. In this blog post, we will delve into the numerous benefits of AI usage, including increased efficiency, improved decision-making, and enhanced personalization.

Increased Efficiency by ChatGPT

One of the most significant advantages of AI usage is the increased efficiency it offers in various sectors. AI-powered systems can process and analyze vast amounts of data at incredible speeds, far surpassing human capabilities. This enhanced processing power allows businesses and organizations to streamline operations, reduce costs, and increase productivity.

For example, AI algorithms can optimize supply chain management, ensuring that products are delivered on time and with minimal waste. Additionally, AI-powered chatbots can handle customer inquiries, freeing up human workers to focus on more complex tasks. This improved efficiency benefits both businesses and consumers, leading to increased innovation and economic growth.

Improved Decision-Making (ChatGPT)

AI systems can analyze vast amounts of data and identify patterns that would otherwise go unnoticed by human analysts. This ability allows AI to support improved decision-making in various fields, such as finance, healthcare, and even politics.

In finance, AI algorithms can identify trends and make predictions that help investors make informed decisions. In healthcare, AI-powered diagnostic tools can analyze medical images and patient data, assisting doctors in making accurate diagnoses and recommending personalized treatment plans. By enhancing our ability to make informed decisions, AI can lead to better outcomes and improved quality of life.

Enhanced Personalization (ChatGPT)

AI has the potential to revolutionize the way we experience personalized products and services. By analyzing user preferences and behavior, AI-powered systems can create tailor-made experiences that cater to individual needs and desires.

For instance, AI-driven recommendation engines can suggest products, content, or experiences that align with a user's interests, making it easier for consumers to discover new products and services. In education, AI can create personalized learning plans that adapt to a student's unique learning style, leading to improved academic performance and engagement.

Advancements in Research and Innovation (ChatGPT)

AI has the potential to accelerate scientific research and innovation by automating time-consuming tasks and processing large datasets. In the field of drug discovery, AI algorithms can quickly analyze millions of chemical compounds, helping researchers identify promising candidates for new medications. Additionally, AI can aid in the development of new materials, energy solutions, and environmental conservation strategies, contributing to a more sustainable and prosperous future.

Democratization of Technology (ChatGPT)

As AI becomes more accessible and affordable, it has the potential to democratize technology, making advanced tools and services available to a broader range of people. Small businesses and individuals can leverage AI-powered solutions to compete with larger corporations, fostering innovation and promoting economic growth. Additionally, AI can help bridge the digital divide by making essential services, such as healthcare and education, more accessible to underserved communities.

Conclusion by ChatGPT

The advantages of AI usage are vast and far-reaching, potentially tran various aspects of our lives. By harnessing the power of AI, we can unlock increased efficiency, improved decision-making, enhanced personalization, advancements in research and innovation, and the democratization of technology. As we continue to develop and refine AI technologies, it is crucial to consider the ethical implications and strive for responsible implementation to ensure that the benefits of AI are felt by all.

Summary

Notion AI split the article into six parts. Every part explains well what we need - "advantages."

Notion AI touch on several topics:

How AI can increase speed in various fields of our day-to-day life. I would agree, but speed doesn't mean quality😉. Here I agree with Marques Brownlee in the video "The Biggest Problem with AI", the AI is giving convincing answers until you are not a professional in the topic, and when you're are a professional you're starting to see the mistakes. From my experience, in most of the problems I faced with debugging, the AI didn't help much there.
The decision-making improvement. I agree in some way. On the other side, I see a lot of guys in the coffee who are trying to solve every problem with AI without and not trying to gain expertise in any topic. So here, I agree 50/50 that this is an advantage. Because, again, AI cannot check the facts right now.
Cost savings and Personalization part is an absolutely true thing.
Predictive Maintenance is useless because people already have valuable tools, and I don't see a big room for AI here.
The last is Improved Decision Making and the summary, which puts an end to history and is quite well filled with information for data analysis; I'm in love with this part.

ChatGPT, on the Other side for me, did the same job but a bit better in some points.

For some reason, Cost Saving wasn't described in the ChatGPT article, which is a crucial topic for the business and users.
The overall style is good in both blogs, but ChatGPT tried to use more not common English words, which is an advantage for me as a non-English speaker.
Most of the topics were similar, that's is good, but ChatGPT make a fascinating point, which NotionAI didn't mention it is the Democratization of Technology. I agree with this topic and say that this one was in my heart, but the thing is that our technologies are limited by the governments, so If you're not friendly to some other government, they can block you from the technologies they own.

Comparison table

	ChatGPT	NotionAI
Introduction	🥇	🥇
Efficiency	🥇	🥈
Cost Savings	-	🥇
Personalization	🥇	🥇
Maintenance	-	🥇
Improved Decision Making	🥇	🥇
Advancements in Research and Innovation	🥇	🥈
Democratization of Technology	🥇	-
Conclusion	🥇	🥇

With a small margin, ChatGPT won this battle 🏆

See you in the next chapter of our battle ChatGPT vs Notion AI 🤹‍♀️

Chat GPT 🆚 Notion AI (Introduction)

Hleb Kryshyn — Sun, 26 Mar 2023 08:00:00 +0000

🤼 Today, I will start a new series of articles comparing two AI models in both functional and usability ways, ChatGPT-4 and Notion AI, in the day-to-day task to understand how they perform in different tasks.

At the end of each article, we will have a score and, at the end of the series, a summary table for all tasks provided.

The "Introduction article" will compare usage, prices, and limitations.

Overview 📋:

Usage 🎒
Language support 👅
Prices and limitations 🏷️
Summary 🏁

Usage

Regarding usage, you can use Notion AI on whatever device you have the notion application, is desktop, web, or mobile, while Chat GPT is a web-based solution. Chat GPT is the solution to go and ask, while in Notion AI, we have a list of predefined things and suggestions to work with the text and page you already have in your working space.

Language support

💬 ChatGPT supports a wide variety of languages which is 25 languages:
English, Spanish, French, German, Italian, Portuguese, Dutch, Russian, Chinese (Simplified and Traditional), Japanese, Korean, Arabic, Turkish, Danish, Swedish, Norwegian, Finnish, Polish, Czech, Hungarian, Greek, Hebrew, Thai, Indonesian, and Vietnamese.

It's really helpful when it comes to the usage for translating something, especially if you're doing a multilanguage website, which is easy with current machine translations and can bring more customers to your website.

🤖 Notion AI supports 13 languages:
English, Korean, Chinese, Japanese, Spanish, Russian, French, Portuguese, German, Italian, Dutch, Indonesian, Filipino, and Vietnamese.

This is also not a bad result, I would say, because I guess Notion AI have less experience and data to support more languages, but 13 is still a good amount!

Prices and limitations

ChatGPT is 20 dollars per month, while Notion AI is 8 dollars per month, paid annually. What is a big plus is that Notion AI is already included in your favourite tool and seamlessly integrated into your system, but if you're not so much into Notion, it can become one more; to use instead of just jumping and using the responses of the chat.

If you're located in Belarus, Russia, or some other countries under sanctions, it can be easier to use Notion AI because it doesn't require a VPN to use the AI.

Summary

At the end of this article, I can say that both tools got the same score so this fight wouldn't be easy!

	ChatGPT	Notion AI
Usage	🥇	🥇
Language support	🥇	🥈
Prices and limitations	🥈	🥇

Cover design by Julia Mazur

Tools used:

Compound components pattern for creating reusable Rating component

Hleb Kryshyn — Mon, 13 Feb 2023 15:00:00 +0000

👋 Hey folks

This article will give you an explanation of a "Compound components" pattern.

🤔 Why should I know about the "Compound components"?

"Compound components" is a pattern that helps to create reusable components dependent on each other. Such a pattern helps to achieve better isolation. This approach allows developers to easily create dynamic and interactive user interfaces while keeping the code clean and organized. This is just one of the many benefits of using React and compound components in web development.

👨‍🔬 Could you show me an image explanation?

Rating - component should contain logic for enormous stars and be easily scalable and reusable.

The RatingItem - component should consume the logic from the Rating component and don't contain any styling, to reuse across different projects or designs. Because the UI design can be changed in the future, and your star will become a smile or something else.

👨‍🔬 Ok, before implementing, let me explain the `Rating` components deeper!

What should we store in the Rating component?

Rating state, in our case, ranges from 1 to 5.
Hovered boolean to know if our user hovers over our rating component?
Hovered state, from 1 to 5, to create a good UI experience.

What will be inside the RatingItem component?

No styling because the design can be different in projects, and it will be a pain to change the RatingItem each time we have a new design.
Different handlers, like handleClick or handleMouseLeave, depending on your needs.

👨‍💻 Let's code it!

folder structure

contexts/RatingContext.ts
providers/RatingProvider.ts
components/Rating.tsx
components/RatingItem.tsx
components/Feedback.tsx

1) Creating `Context` and `Provider` for a `Rating` component.

contexts/RatingContext.ts

export const RatingContext = createContext({
  rating: 0,
  setRating: (_rating: number) => {},
  hoverRating: 0,
  setHoverRating: (_rating: number) => {},
  isHovering: false,
  setIsHovering: (_isHovering: boolean) => {},
});

providers/RatingProvider.ts

export const RatingProvider = RatingContext.Provider

We're creating Context because we need to pass information from Rating to RatingItem, whatever nesting it will be.

2) Creating a `Rating` component with the basic state needed.

components/Rating/Rating.tsx

type Props = {
  children: ReactNode
}

export const Rating: FC<Props> = ({ children }) => {
  const [rating, setRating] = useState(0) // used to store the current rating
  const [hoverRating, setHoverRating] = useState(0) // store information about the current hovered state
  const [isHovering, setIsHovering] = useState(false) // information about is the rating hovered right now or not

  const contextValue = useMemo(
    () => ({
      rating,
      hoverRating,
      isHovering,
      setRating,
      setHoverRating,
      setIsHovering,
    }),
    [rating, hoverRating, isHovering],
  )

  return <RatingProvider value={contextValue}>{children}</RatingProvider>
}

3) Let's create a hook to consume the `RatingContext`

import { useContext } from "react"

import { RatingContext } from "../../contexts/RatingContext"

export const useRatingContext = () => {
  const context = useContext(RatingContext)

  if (!context) {
    throw new Error("useRatingContext must be used within a RatingContext")
  }

  return context
}

📝 Note: Here, we have a "Compound components" logic. The idea is that this hook will throw an error wherever we try to use the component with this hook outside of the Rating.

4) Creating `<RatingItem />` component.

components/RatingItem.tsx

type Props = {
  value: number
  children: JSX.Element
}

export const RatingItem = ({ value, children }: Props) => {
  const { setRating, rating, hoverRating, setHoverRating, setIsHovering } = useRatingContext()

  return (
    <span className="cursor-pointer">
      {cloneElement(children, { needed_props_here })}
    </span>
  )
}

Prop value is used to pass information about what value of the rating will represent your RatingItem like 1, 2, or 0.5, depending on your needs.
useRatingContext gives access to provider values.
{cloneElement(children, { neededPropsHere })} will provide to your icon all props that are needed in the future to control this icon UI state. We're using here the cloneElement API.

5) Improving `<RatingItem />` component by adding additional handlers.

export const RatingItem = ({ value, children }: Props) => {
  const { setRating, rating, hoverRating, setHoverRating, setIsHovering } = useRatingContext()

  // new code
  const handleMouseEnter = () => {
    setHoverRating(value)
    setIsHovering(true)
  }

  const handleMouseLeave = () => {
    setHoverRating(0)
    setIsHovering(false)
  }

  const handleClick = () => {
    if (rating === value) {
      setRating(0)

      return;
    }

    setRating(value)
  }

  const isCurrentRating = rating === value
  const isHoveredRating = hoverRating === value
  const isRatingNotSet = rating === 0
  const isFilled = isRatingNotSet || isCurrentRating || isHoveredRating

  return (
    <span
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
      className="cursor-pointer"
    >
// end of new code
      {cloneElement(children, { isFilled, isChoose: isCurrentRating })}
    </span>
  )
}

We added code to handle the mouse events handleClick, handleMouseLeave, and handleMouseEnter.
We added constants isCurrentRating, isHoveredRating, isRatingNotSet, and isFilled, which will be used to implement the needed UI pattern. This part can vary depending on your design!

6) We created almost all the needed logic to display our rating.

components/Feedback/feedback.tsx

export const Feedback = () => {
    return (
        <Rating>
            <div className={styles.rating}>
              <RatingItem value={1}>
                <IconVeryBad />
              </RatingItem>
              <RatingItem value={2}>
                <IconBad />
              </RatingItem>
              <RatingItem value={3}>
                <IconNeutral />
              </RatingItem>
              <RatingItem value={4}>
                <IconGood />
              </RatingItem>
              <RatingItem value={5}>
                <IconVeryGood />
              </RatingItem>
            </div>
        </Rating>
    )
}

7) But what if we need to know in the `Feedback` component what is the rating right now?

components/Rating.tsx

type Props = {
  children: ReactNode
  onRatingChange?: (rating: number) => void // new prop onRatingChange
}

export const Rating: FC<Props> = ({ children, onRatingChange }) => {
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [isHovering, setIsHovering] = useState(false)

  const contextValue = useMemo(
    () => ({
      rating,
      hoverRating,
      isHovering,
      setRating,
      setHoverRating,
      setIsHovering,
    }),
    [rating, hoverRating, isHovering],
  )

  useEffect(() => { 
    onRatingChange?.(rating) // a prop function be called each time rating is changing
  }, [rating])

  return <RatingProvider value={contextValue}>{children}</RatingProvider>
}

onRatingChange - a function that will be called when the user changes the rating.

8) Usage of the `Rating` component

component/RatingFeedback.tsx

export const RatingFeedback = () => {
  const [isShowText, setShowText] = useState(false)

  const handleRatingChange = (rating: number) => {
    if (rating > 0) {
      setShowText(true)
      setRating(rating)
    } else {
      setShowText(false)
      setRating(0)
    }
  }

  return (
    <>
      <Rating onRatingChange={handleRatingChange}>
        <div className="flex justify-between w-full pointer-events-auto background-color-300 mt-4 max-w-[300px]">
          <RatingItem value={1}>
            <IconVeryBad />
          </RatingItem>
          <RatingItem value={2}>
            <IconBad />
          </RatingItem>
          <RatingItem value={3}>
            <IconNeutral />
          </RatingItem>
          <RatingItem value={4}>
            <IconGood />
          </RatingItem>
          <RatingItem value={5}>
            <IconVeryGood />
          </RatingItem>
        </div>
      </Rating>
      {isShowText && (
        <label>
            Please write to us
            <textarea/>
        </label>
      )}
    </>
  )
}

handleRatingChange is responsible for showing a text field when the user chooses a rating

🏁 Summary

In this article, we demonstrated the use of "Compound components" for creating a rating system using React. Compound components allow you to create complex UI components by combining simple and reusable components. This approach improves code organization, making it easier to maintain and extend. The example we used showed how to create a rating system that is both user-friendly and customizable.

To test the code and see the example in action, you can follow the link: https://codesandbox.io/p/sandbox/compound-components-for-rating-y6getu.

Advanced enterprise localisation process with Lingui, Locize, GitHub Actions, Docker, React

Hleb Kryshyn — Thu, 22 Dec 2022 07:13:04 +0000

I have experience in integrating localisation into three applications of different sizes. In this article, I will share my experience only with the enterprise localisation process. If you are interested in localisation for other project sizes, please share your thoughts in the comments 💭

General idea 🚀

The main idea was to have a process allowing developers to do fewer actions and have everything automated in the CI, from uploading to downloading the translations.
We want a source of truth for keys in the code and a source of truth for translations - a 3rd party translation platform (in our case - locize).

Choosing front-end library 📚

Quick Summary:

We choose lingui.

Comparison table for front-end libs

First, we should check out the libs for the front end, which will work with our localisation.

Name	Size (minified + gzipped)	Dependecies	Typescript	Open/Closed issues	Last publish
react-i18next	6.7kB	2	8%	8/1044	a month ago
lingui	7.8kB	3	89%	20/693	4 months ago
react-intl	17.8kB	10	77%	12/1686	4 days ago
react-translated	7.8kB	2	0%	3/6	3 years ago

Also, a big plus was a minimal amount of issues for lingui/react. Previously I tried react-i18next, which was good, but we didn't go with it because the feedback from the other organisation members was good. Our application already has system modules that were integrated with lingui.

Here is a detailed article about how to choose the proper library.

How to choose the right NPM package in 4 steps 📦

Hleb Kryshyn ・ Oct 17 '22

#npm #productivity #opensource

Choosing 3rd party localisation service 🗺️

Quick Summary:

We choose locize.

Localisation platforms comparison

service	integration	pricing for 10k/m	experience for translator	developer features	summary
locize.com	good doc, easy	fluid pricing depends on the usage	bad UX, hard to collaborate	versioning, plurals, reach API & CLI	Unlimited Contributors, Unlimited projects
poeditor.com	GitHub app	$38.24	comments, good UI, machine translations	plurals, versioning, multiple projects	Unlimited Contributors, Unlimited Projects
lokalise.com	GitHub app	$230 (only 10 seats included)	discussions, good UI	plurals, work with multiple branches	Really high price with no machine translations, limited seats
translation.com	sync cli/platform	$0.01/ key active projects $100 $0.005/key archive project $50	discussions, machine translations, good UI	plurals	Promoted by lingui, easy to use, cheap
smartling	-	-	-	-	Push you to buy annual, high price for a small number of features
Сrowdin	GitHub, Gitlab	0.01$/key with no available integrations, basic subscription is so limited, you also need additional payments for translation managers	-	-	good UI, not so hard to use
phrase	-	70usd per month for 3 users (100api/request per user monthly)	-	-	too expensive, most of the features are the same or less as everywhere else

Minus sign in the table has the meaning of not having a feature or doesn't have enough info about features in the specific service.

At first glance, I realised there would be little difference in localisation platforms. For our team, the crucial point was to have a good amount of features for a reasonable price and a robust API which would allow us to deeply integrate our CI with a translation platform.

Platform locize was chosen for:

Fluid pricing systems that depend on the actual usage of the platform
Good versioning system, which allows you to use a semver versioning system
Reach API and CLI for a better low-level integration
Unlimited Contributors and Unlimited projects
Easy way to integrate with client library - lingui.
Fast support from the creator

Upload new keys process 📑

Here is a sequence diagram which explains the whole process of uploading. Your detailed implementation can be different according to your project tools.
If you don't know what is sequence diagram you can check out this documentation in mermaid

Implementation details

This section will describe some implementation details inside our project. If you're using another tech stack, feel free to skip it and go on.

Step 1

We only trigger the upload process in the origin/main branch when merging the PR.

Step 2

Our project is a monorepo containing several front-ends which need localisation.

Rush provides an excellent way to understand what project is changed by running rush change.

After that, we pick these projects inside the CI step and analyse the package.json of this project for the localisation: true flag. We put a flag inside our front-end project for a faster localisation check. This config section is rarely used, but so cool to know about.

package.json

{
  ...,
  devDependencies: {...},
  config: {
    localisation: true
  }
}

Step 3

To extract the translations keys from the code, we used lingui extract

lingui extract --clean

This tool works as we need it - developers do nothing, and everything is automated. He/she is just putting translation keys into the code, and this command will automatically search for the keys and put them into all translation files if the key doesn't exist there yet.

Version calculation

We're calculating a future version and returning a major or minor version.

Steps 4-9

We upgrade a minor version when developers add new keys to the translations.

These steps are done by manipulating the Locize API

Steps 10-14

When a developer removes translation keys, we're upgrading a major version.

These steps are done by manipulating the Locize API

Download new keys process 📲

Implementation details

This section will describe some implementation details inside our project. If you're using another tech stack, feel free to skip it and go further.

Most steps are part of the download-localisation.sh script.

Step 1

The developer pushes code to the remote repository.

Step 2

Inside Github CI, we're building a docker image of the application.

Step 3

We run the image with environment variables.

Useful env variables were:

Translation version. For the different dev environments, we used different translation versions.
Project id from locize. As I wrote, we had several projects inside one repository, so we need several in locize. Also, we need our script to be reusable across the organisation.
Namespace.

Step 4

This part of the download-localisation script is responsible for pulling languages for the project.

LANGUAGES="$(
  curl -s "https://api.locize.app/languages/$LOCIZE_PROJECT_ID" \
  | jq -r 'keys | join(" ")'
)"

Step 5

Code piece which helps us to download translations

for language in $LANGUAGES
do
    printf "Downloading translation for $language..."

    if [ -d "$TRANSLATIONS_DIR/$language" ]
    then
        rm -fr "$TRANSLATIONS_DIR/$language"
    fi

    mkdir -p "$TRANSLATIONS_DIR/$language"

    curl -s -o "$TRANSLATIONS_DIR/$language/$LOCIZE_NAMESPACE.json" "$LOCIZE_API_BASE/$LOCIZE_PROJECT_ID/$LOCIZE_VERSION/$language/$LOCIZE_NAMESPACE"

    echo "Done"
done

Step 6

Loading the translations is happening with the help of @lingui/remote-loader. This remote loader wasn't listed in the lingui documentation but exists in npm and the codebase. Finding this module took some time, so right now, you can use that time wisely!

Finish 🏁

I hope you enjoyed reading this article. Please leave your thoughts about such localisation design architecture.

Cover design by: Julia Mazur

How to choose the right NPM package in 4 steps 📦

Hleb Kryshyn — Mon, 17 Oct 2022 00:11:28 +0000

Hey, maybe you have been searching for the right library for your needs several times. In this article, I will present my algorithm to find suitable and share appropriate resources. For example, I will try to find a good library for front-end localisation.

Let's find and create a list of libraries 📋

I post some of them here, but it's good to have more options.

react-i18next
lingui
react-intl
react-translated

Resources: bestofjs, openbase, articles on the topic.

Check the documentation 📑

It's an obvious tip, but not everybody understands what to check. You should understand your business requirements and then go to the doc to see if the libs contain all of the features you need and support a translation format for your project.

Take a look at the project source code 🏢

Try to understand who maintains the project. If even one repo is less popular, it will have a founder who understands the problems of other frameworks in the industry and solves them more efficiently.
Check for the issues, how they are reviewed, and are the community actively collaborates to improve the package.
Check the project insights page. It's a place where you will find more statistical data.
If you cannot find a needed feature in the documentation, it's possible that authors forgot to add it, or didn't have enough time for it, so it's definitely best to go to the source files and check them.

Create a comparison table ⛳️

It's an excellent way to structure all information into one table.

Name	Size (minified + gzipped)	Dependecies	Typescript	Open/Closed issues	Last publish
react-i18next	6.7kB	2	8%	8/1044	a month ago
lingui	7.8kB	3	89%	20/693	4 months ago
react-intl	17.8kB	10	77%	12/1686	4 days ago
react-translated	7.8kB	2	0%	3/6	3 years ago

To create this table I used bundlephobia, npmtrends, snyk, github projects page.

Is it easy to integrate? 🤓

In our case, for the front-end localisation lib, we will check several points:

Is it easy to integrate into your project? Maybe your monorepo already has some localisation dependencies
Does it support your front-end framework
After the integration, it's good to measure performance changes

Finally 🎉

You will have a bigger picture of what is going on with your npm packages. Have fun!

Debug controllers and debug flow in VSCode

Hleb Kryshyn — Fri, 12 Aug 2022 16:18:00 +0000

Hey, hey 👋 After we have learned about how to configure our debugger, let's talk more about the actual debugging controllers 🕹

Breakpoints

We will put some breakpoints

As you see, we put a breakpoint on line 12, so we will be able to receive a context of our props.
After that, you restart the page and see in the run & debug section of the VSCode the following structure. We will talk more about this section later.

On your screen, near the breakpoint will appear a yellow outline, which means that your code stopped its execution at this line

We will also get controllers:

Continue – An action to take in the debugger that will continue execution until the next breakpoint is reached or the program exits.
Step over – An action to take in the debugger that will step over a given line. The function will be executed if the string contains a function, and the result is returned without debugging each line.
Step In – An action to take in the debugger. If the line does not contain a function, it behaves the same as "step over" but if it does, the debugger will enter the called function and continue line-by-line debugging there.
Step out – An action in the debugger that returns to the line where the current function was called.
Restart
Stop

Controller demo

Continue

With "Continue", we can resume debugging to the next breakpoint you put previously.

Step over

"Step over" functionality helps us to go to the following execution line without putting a new breakpoint.

Step in

"Step in" gives us a superpower to traverse up&down in a function execution and see the function's return values in a variables section.

Step out

I'm happy that we're now familiar with essential debugging tools and ready for a new journey to something more advanced! 🚀🚀🚀

Front-end Developer roadmap

Hleb Kryshyn — Sun, 15 May 2022 17:11:31 +0000

Hey folks 👋

This article will take an eye on one of the exciting topics suitable for every developer level. In addition, I will share a valuable resource for each step of a roadmap that I used before to learn the Front-end.

I've shared some books here, but everybody knows that books become outdated too fast in a developing world, so to buy them or not is your decision.

HTML, CSS 👨‍🎨

The basic level, which sometimes newbies miss 😉
The real foundation I've got in a book CSS3: The Missing Manual, and most of the time, my recommendation is to search for a beautiful and challenging design frames on the internet and try to do them, or a lot of them you can find for free in Figma community

Resources:

JavaScript ❤️

The foundation of the Web.

React ⚛️

Really in love with this framework, but wanna try Svelte and WebComponents.
Resources:

Documentation - all learning materials you can find here
Egghead You can find a lot of good courses here for free, but if you reach, you can even buy a PRO version🤴)
Learning React Functional Development - can be outdated right now, but still, you can find here some good techniques.

Typescript 🏢

For several years I didn't say a project without TS 🫡

Documentation is always the best resource 😄
React + TS cheatsheet - this great cheatsheet I recommend almost to everyone who is doing React+TS

Docker

It is an essential technology in the middle-size project and enterprise development.

These three resources gave me a basic understanding. For further information, I recommend you to learn through a docker website.

Algorithms

In Front-end development, you don't need to know all algorithms, but it's good to learn some basics.

Grokking Algorithms can give you good fundamentals
Free course from Princeton

Testing

A valuable part of the development process, which is good to know.

If you don't have a computer right now, it seems like you share my first steps because I started to learn programming without a laptop, so I would recommend starting with a mobile app called SoloLearn.

And of course, one of the most excellent places to learn something new is YouTube 🎥

Share your best resources for Front-end developers in the comments 🥇

Cover design by Julia Mazur

React debugging in VSCode

Hleb Kryshyn — Sun, 08 May 2022 11:52:27 +0000

Welcome to the second article about debugging if you're struggling with debugging, you're in the right place 😉

📚 Minute of theory.

There are 2 basic types of debugging:

Attach (means you're attaching to an already running process)
Launch - means you're launching a new process and attaching to it. It can be a headless chrome or anything else)

After some basic understanding, let's jump to the actual configuration.

1) Add a configuration object inside your array of configurations in .vscode/launch.json in the project's root.

{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080", // localhost where we will launch our front-end
      "webRoot": "${workspaceFolder}"
    },
  ]
}

💡 Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.

After clicking the button, you will see a context menu where you should choose Chrome launch.

And here we go! You will get the same config as in step #1 😎

2) After that, choose in the left top corner your option to launch the configuration inside the Run and debug menu in VSCode

3) As a result, you will see the lifted application on a specified port!

See you in the following article about controllers in a VSCode debugger 🥳

Debugging Nodejs in VSCode

Hleb Kryshyn — Tue, 03 May 2022 08:18:06 +0000

👨‍💻 I want you to become a better software engineer through debugging in this series of articles.

Debugging is the process of detecting and removing existing and potential errors (also called 'bugs') in a software code that can cause it to behave unexpectedly or crash.

⚙️ To configure debugging of Node in a VSCode, you should follow these steps:

Create a folder .vscode at the root of your project.
Put a file launch.json inside .vscode folder. This file will be a config file for debugging.
Inside launch.json, you should put this code

{
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": [
      "<node_internals>/**"
      ],
      "type": "node"
    }
  ]
}

💡 Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.

After clicking the button, you will see a context menu where you should choose Node.js Attach to process.

Node.js Attach to process will bring you the same configuration as in step #3

After that, go to the run and debug section in VSCode

Choose your configuration, and press start

You should pick the node process you want to attach. Your running node application inside VSCode will be in the first place.

But if you didn't find the right PID (process id) of your Node, I recommend you run a command that will show you the id of a running process on the exact localhost.

For macOS

sudo lsof -i :PORT

After getting the right PID, you should put it in a context menu, and here you go!

See you in the following articles 🥳

DEV Community: Hleb Kryshyn

Everything you have to know about React 19 ⚛️

Why this updated was created?

What is Optimistic UI?

5 features that will help you implement a better UI with React 19

1. useOptimistic

2. useTransition

3. New API use

4. Ref as a prop

5. React Compiler

What we expect from the compiler?

🤰 When do we expect Compiler?

🏁 Finish

How to implement Typescript Function overload

📃 Wiki Definition

🧐 Wiki Definition Explanation

🔍 Multiple Function Signatures

💻 Let's implement the overloading for the example function

🏁 Finish

Singleton pattern in react application

💭 Intro

🌧️ Problem

⚡️ Pattern solution

🤔 What is the Singleton pattern?

💡 According to the statement it's exactly what we need!

💻 Implementation

The code of the whole Service

🏁 Result

Chat GPT 🆚 Notion AI (Blog post)

Overview 🔭

Notion AI article

The Advantages of AI Usage

Increased Efficiency (Notion AI)

Improved Accuracy (Notion AI)

Cost Savings (Notion AI)

Personalization (Notion AI)

Predictive Maintenance (Notion AI)

Improved Decision Making by Notion AI

ChatGPT article

Embracing the Future: The Advantages of AI Usage

Introduction by ChatGPT

Increased Efficiency by ChatGPT

Improved Decision-Making (ChatGPT)

Enhanced Personalization (ChatGPT)

Advancements in Research and Innovation (ChatGPT)

Democratization of Technology (ChatGPT)

Conclusion by ChatGPT

Summary

Comparison table

Chat GPT 🆚 Notion AI (Introduction)

Overview 📋:

Usage

Language support

Prices and limitations

Summary

Compound components pattern for creating reusable Rating component

👋 Hey folks

🤔 Why should I know about the "Compound components"?

👨‍🔬 Could you show me an image explanation?

👨‍🔬 Ok, before implementing, let me explain the Rating components deeper!

👨‍💻 Let's code it!

1) Creating Context and Provider for a Rating component.

2) Creating a Rating component with the basic state needed.

3) Let's create a hook to consume the RatingContext

4) Creating <RatingItem /> component.

5) Improving <RatingItem /> component by adding additional handlers.

6) We created almost all the needed logic to display our rating.

7) But what if we need to know in the Feedback component what is the rating right now?

8) Usage of the Rating component

🏁 Summary

Advanced enterprise localisation process with Lingui, Locize, GitHub Actions, Docker, React

General idea 🚀

Choosing front-end library 📚

Quick Summary:

Comparison table for front-end libs

How to choose the right NPM package in 4 steps 📦

Hleb Kryshyn ・ Oct 17 '22

Choosing 3rd party localisation service 🗺️

Quick Summary:

Localisation platforms comparison

3. New API `use`

👨‍🔬 Ok, before implementing, let me explain the `Rating` components deeper!

1) Creating `Context` and `Provider` for a `Rating` component.

2) Creating a `Rating` component with the basic state needed.

3) Let's create a hook to consume the `RatingContext`

4) Creating `<RatingItem />` component.

5) Improving `<RatingItem />` component by adding additional handlers.

7) But what if we need to know in the `Feedback` component what is the rating right now?

8) Usage of the `Rating` component