DEV Community: Hosein Pouyanmehr

My Traffic Drop After Google’s Spam Update

Hosein Pouyanmehr — Mon, 14 Sep 2026 10:16:36 +0000

This is about how unreviewed translations and repetitive pages hurt my Minecraft website, and what I changed.

TL;DR: My Minecraft website (MineEnchants) lost significant Google visibility around the August 2026 spam update. I found hundreds of weak URL variations caused by unreviewed translations and material pages with nearly identical content. I reduced my sitemap to 276 URLs, limited material pages to 15 useful English pages, and applied noindex to the remaining repetitive variants. I have not seen a significant recovery yet.

What happened
Where AI entered the project
Mistake 1: Unreviewed translations
Mistake 2: One page for every material
What I changed
The actual numbers
What I recommend checking
What I would not recommend
Did it recover?
Final thoughts

What happened

This post is about what happened to my recent project, MineEnchants, during the August 2026 Google spam update.

Google recorded the update as starting on August 18, 2026, and lasting around two days and sixteen hours on its Search Status Dashboard.

My traffic dropped dramatically around the same period.

I cannot prove that this update was the only cause. Search performance can change for many reasons, and Search Console does not tell you exactly why an algorithm reduced your rankings.

There was also no manual action in Search Console.

Still, the timing pushed me to perform a much deeper review of the website. That review uncovered several real problems that I should have caught earlier.

The observations, measurements, mistakes, and decisions in this post come from my actual project (This isn't an AI post:)).

Where AI entered the project

Honestly, MineEnchants was originally a dead project.

Before using AI tools, I had completed roughly 80% of it myself. I had many .txt files containing information about enchantments, items, and categories, but the images were disorganized and I did not have enough time or motivation to finish everything.

AI helped me complete some content, review the categorization, and align the remaining data.

I was also updating the Minecraft XP calculator and adding small Minecraft games to help players remember different enchantment use cases.

The problem was not simply that AI was involved. The problem was that I allowed the website to expand faster than I could personally review it.

Mistake 1: Unreviewed translations

MineEnchants originally supported English and Spanish.

When I noticed traffic arriving from more countries, adding more locales seemed like a good idea. Technically, it was easy: add translation files, generate localized routes, and include them in the sitemap.

Eventually, I had many localized pages indexed even though I could not confidently review their translation quality.

That was my first major mistake.

A translated page is not automatically useful just because it exists. If I cannot verify its accuracy, terminology, or readability, I should not ask Google to recommend it.

I returned the indexable site to the English and Spanish versions that had received proper review.

I kept only the Japanese version of the XP calculator because that specific page already had relevant Japanese traffic and provided real functionality.

The remaining Japanese pages still work for users, but they now use noindex, follow.

Mistake 2: One page for every material

This was the larger problem.

The website generated a separate URL for every combination of item and material:

/items/by-category/weapon/sword/wooden
/items/by-category/weapon/sword/stone
/items/by-category/weapon/sword/iron
/items/by-category/weapon/sword/diamond
/items/by-category/weapon/sword/netherite

This structure looks reasonable in code. Unfortunately, most enchantment rules depend on the item type, not its material.

A wooden sword and a diamond sword differ in durability, damage, and upgrade options, but their compatible enchantments are mostly the same.

Many generated pages therefore contained almost identical text with only the material name changed.

The same pattern existed across tools and armor.

I had created many URLs without creating equally distinct reasons for those URLs to exist.

Google defines scaled content abuse as producing many pages primarily to manipulate rankings rather than help users. Its examples include generated or translated pages that add little value.

I do not know whether Google classified my website this way. I only know that my architecture created the kind of low-value repetition that the policy warns about.

What I changed

First, I consolidated duplicate default URLs.

For example, an item could previously exist at both:

/items/by-category/weapon/mace
/items/by-category/weapon/mace/default

The /default version now permanently redirects to the shorter canonical URL.

Second, I removed repetitive material variants from the XML and visual sitemaps.

Removing a URL from a sitemap does not prevent indexing by itself. Because these pages can still be reached through internal navigation, I also return noindex, follow for material variants that have not been editorially approved.

I did not block them in robots.txt, because Google must be able to crawl a page to see its noindex instruction.

Third, I kept only 15 English material pages that had evidence of specific demand and enough unique information to justify a separate page.

Examples include:

For each retained page, I added information that actually changes with the material or answers a material-specific question:

Durability and equipment statistics
Java and Bedrock differences
Conflicting enchantments
Practical enchantment combinations
Netherite upgrade behavior
Material-specific combat or mining decisions
Links to supporting Minecraft documentation

I also gave these pages unique titles and descriptions instead of inserting a material name into a shared template.

Finally, I tested the result as Googlebot. Approved pages return index, follow; excluded variants return noindex, follow.

The actual numbers

Before the cleanup, Search Console reported approximately:

1,100 indexed pages
639 URLs discovered through the submitted sitemap

After the cleanup, the generated sitemap contained 276 URLs:

146 English URLs
129 Spanish URLs
1 Japanese URL
15 approved English material-detail pages

The difference between 639 discovered URLs and the new 276-URL sitemap is 363 URLs, or approximately 56.8%.

This is not a perfect before-and-after comparison. Search Console’s discovered-page count is historical and may lag behind the current sitemap.

The important part is that the website now deliberately recommends 276 URLs instead of exposing every generated variation.

What I recommend checking

If your traffic dropped around a spam update, these checks helped me most:

Review every locale independently.

Do not index translations merely because your framework can generate them.
Look for pages created from combinations.

Products, locations, categories, tags, filters, and materials can generate thousands of repetitive pages.
Ask why each page deserves to exist.

Changing a title, keyword, city, or material name is not enough.
Review your sitemap.

It should contain the canonical URLs you genuinely want indexed.
Use noindex where appropriate.

Removing a page from the sitemap alone does not guarantee removal from Search.
Consolidate duplicate URLs.

Redirect exact duplicates and use consistent canonical URLs.
Check for manual actions.

I had none, so there was no reconsideration request for me to submit.
Record your changes.

Keep the dates, sitemap counts, indexing rules, and affected page groups.

What I would not recommend

Do not delete hundreds of pages blindly.

If repetitive pages still help users navigate your website, you can keep them accessible without asking search engines to index them. Using noindex may be safer than deleting useful pages or breaking existing links.

Do not use Google’s temporary removal tool as a general recovery method either. Use it only when a page must disappear from Search urgently.

If you are going to generate 100 pages per day, make sure every page has a real purpose and provides distinct value. Publishing quickly is not automatically spam, but publishing hundreds of nearly identical pages can become a serious quality problem.

Finally, do not treat your sitemap as a Google trust score. Reducing its size will not directly restore rankings. Your sitemap should simply provide a clean list of the canonical pages you genuinely believe deserve to appear in Search.

Did it recover?

Not yet.

I have not seen a significant improvement in traffic or Search Console performance since making these changes.

That is frustrating, but it is still too early to call the work unsuccessful. Google’s spam update documentation says its automated systems may need months to learn that a website complies with its policies.

There is also no guarantee that rankings will return to their previous level. Some pages may never recover, especially if their earlier visibility depended on weak or repetitive content.

For now, I am monitoring:

Indexed-page counts
Crawled-but-not-indexed URLs
Impressions by page group
Queries for the 15 retained material pages
Whether old repetitive URLs disappear from Search
Whether the English and Spanish core pages regain visibility

Final thoughts

My biggest lesson is simple:

Being able to generate a page is not the same as having a reason to index it.

AI was useful for finishing the project, organizing information, and reviewing code. But automation made it too easy to expand the website beyond what I had personally validated.

The fix was not to remove everything created with AI. Google’s policy focuses on purpose and value, regardless of how the content was produced. The fix was to become much stricter about which URLs deserve search visibility.

If you have recovered from a similar Google update, I would genuinely like to hear what you changed and how long the recovery took. And if you play Minecraft, feedback about MineEnchants would be especially helpful.

Saved From Death by AI🤖💀

Hosein Pouyanmehr — Mon, 22 Jun 2026 12:15:36 +0000

MineEnchants is a clean, SEO‑friendly reference for Minecraft items and enchantments. If you play Minecraft, it helps you quickly make the most out of your XP — whether you’re deciding what to enchant, checking compatibility, or figuring out max levels. It’s now available in English and Spanish.

The story

I started this project back when AI wasn’t that common in developers’ workflows. My approach was simple: create categories for items and enchantments, add one example in each, then build pages one by one with a heavy focus on usability, UI, and UX. I also forced myself to use SEO keywords instead of my usual preferred titles.

Then I did the math — about 70+ items and 40+ enchantments to add and verify.

Yes, the pages are dynamically generated in Next.js, but the real work was still there: adding each item, checking every enchantment, and validating all the relationships one by one. It was exhausting. And then the perfectionism hit.

Fast forward

I started playing Minecraft again with a friend, and the need for this tool came back. This time I decided to use AI to finish and ship it. I tried both Claude and Codex (and I’m probably moving fully to Codex), and I’ll share more about that soon.

Most importantly: it’s live now.
Not another dead GitHub repo.

Link

https://mineenchants.com

Images

Set key-value on JS Object!

Hosein Pouyanmehr — Thu, 17 Jul 2025 17:09:43 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

View source on GitHub.

About this post

In this post, we’ll build a utility to handle adding or updating key-value pairs on an object — cleanly and flexibly! It’s a powerful, reusable tool to include in your projects. We'll also address common edge cases to ensure the final result is robust and production-ready.

JavaScript Limitations When Setting Key-Value Pairs on an Object
Utility: setKeyValueOnObject()

JavaScript Limitations When Setting Key-Value Pairs on an Object

By default, when you set a key-value pair on an object in JavaScript, it first checks if the key exists. If it doesn't, the key is added and the value is assigned. If the key does exist, the old value is simply replaced.

However, in real-world scenarios, you might want more control — such as extending the existing value, appending to it, or ignoring the update entirely. Handling these kinds of cases manually can become repetitive and error-prone, especially when dealing with complex or non-primitive values.

That’s where a reusable utility comes in handy. Let’s explore the utility and its capabilities in the next section.

Utility: setKeyValueOnObject()

Note: I’m going to import the isPlainObject utility we discussed in this post.

Here’s the isPlainObject code:

export const isPlainObject = (value: unknown): value is Record<string, unknown> => 
  typeof value === 'object' && value !== null && !Array.isArray(value);

And here’s the JavaScript utility to properly handle both add and update operations!

import { isPlainObject } from './isPlainObject';

type UpdateMode = 'append' | 'replace' | 'extend' | 'ignore';

interface Options {
  decodeURI?: boolean;
  onConflict?: UpdateMode;
  flatArraysOnAppend?: boolean;
  removeArrayDuplicatedValues?: boolean;
}

export const setKeyValueOnObject = <
  T extends object,
  K extends keyof T,
  V = unknown
>(
  obj: T,
  key: K,
  value: V,
  options: Options = {}
): T & Record<K, V> => {
  const {
    decodeURI = false,
    onConflict = 'replace',
    flatArraysOnAppend = false,
    removeArrayDuplicatedValues = false,
  } = options;

  const newValue =
    decodeURI && typeof value === 'string'
      ? decodeURIComponentSafe(value)
      : value;

  const hasKey = key in obj;
  const current = obj[key as keyof T] as V | undefined;

  if (hasKey) {
    if (onConflict === 'ignore') return obj as T & Record<K, V>;

    if (current !== newValue) {
      if (onConflict === 'append' && Array.isArray(current)) {
        let appended = [...current, newValue];
        if (flatArraysOnAppend) appended = appended.flat();
        if (removeArrayDuplicatedValues)
          appended = Array.from(new Set(appended));

        return { ...obj, [key]: appended } as T & Record<K, V>;
      }

      if (
        onConflict === 'extend' &&
        isPlainObject(current) &&
        isPlainObject(newValue)
      ) {
        return { ...obj, [key]: { ...current, ...newValue } } as T &
          Record<K, V>;
      }

      if (onConflict === 'replace') {
        return { ...obj, [key]: newValue } as T & Record<K, V>;
      }
    }

    return obj as T & Record<K, V>;
  }

  return { ...obj, [key]: newValue } as T & Record<K, V>;
};

const decodeURIComponentSafe = (v: string): string => {
  try {
    return decodeURIComponent(v);
  } catch {
    return v;
  }
};

Explanation:

decodeURI is useful when working with URL search parameters.
onConflict lets you control what happens if the key already exists. Options include:
- 'replace' (default): overwrite the existing value.
- 'append': merge values into an array.
- 'extend': shallow-merge plain objects.
- 'ignore': skip the update if the key exists.
flatArraysOnAppend is helpful when the new value is an array and you want to flatten the result. For example: if arr: [1] is updated with [2, 3], the result will be arr: [1, 2, 3].
removeArrayDuplicatedValues ensures that appended arrays don’t contain duplicate values.

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Javascript plain object!

Hosein Pouyanmehr — Sat, 12 Jul 2025 08:21:23 +0000

You can read about code-pool concepts on this link.

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

About this post

In this post, we’ll create a utility to ensure a given value is an actual object—not null or an array. This will prevent unexpected behavior.

What is a plain object in JavaScript?
Utility: isPlainObject()

What is a plain object in JavaScript?

JS is somewhat weird in its nature. As you may know, not only objects but also null and arrays have the type object. If you don’t believe me, try running the following code:

console.log(typeof null);

console.log(typeof []);

This behavior can lead to unpredictable issues. For example, when you create a function to merge two objects, if you don’t ensure the inputs are actually objects, you may encounter errors or unexpected results. The following function helps you verify that your input is a real object.

Utility: isPlainObject()

Here it is, simple and straightforward.

export const isPlainObject = (value: unknown): value is Record<string, unknown> => 
  typeof value === 'object' && value !== null && !Array.isArray(value);

You can find the code and useful JSDoc at this GitHub link.

React hook to get device details!

Hosein Pouyanmehr — Mon, 07 Jul 2025 07:40:38 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

View source on GitHub.

About this post

In this post, we'll create a custom hook to retrieve device-related information in a React or Next.js project. While it will be minimal, it will provide you with the essential data needed to manage your application's functionality and UI effectively.

About code pool
When to use?
Device Details Hook

About code pool

I decided to create a reusable collection of bare UI components and generic functions that I believe can be more useful—if not better—than a standard starter kit. While a starter kit may fit all your needs in every aspect, this is often rare. In most cases, you will encounter many unnecessary modules, and over time, you might find the structure too rigid to implement your desired changes and patterns.

With the SOC (Separation of Concerns) convention in mind, we will enhance our assets and confidently create a starter for our project in no time by selecting only the usable components and utilities!

I definitely believe that re-inventing the wheel isn't wise, but relying solely on an all-in-one solution can limit your ability to identify and solve problems. I think it's important to strike a balance between using ready-to-use assets and creating your own solutions, as this approach can help you improve your skills over time. Consider each module in the "code pool" series as a wheel that is functional and open to improvements and customizations!

When to use?

You can use this hook in both React and Next.js projects. However, keep in mind that in Next.js, you'll need to add the use client directive at the beginning of the module. This utility is especially useful if you need to render different UI elements or run specific functions based on the device type and its attributes.

Device Details Hook

Here’s a hook to retrieve device information in React or Next.js. You can customize it by adding, removing, or modifying methods to suit your needs!

import { useState, useEffect, useMemo, useCallback } from 'react';

const getDeviceInfo = () => {
  const ua = navigator.userAgent;
  const isAndroid = /Android/i.test(ua);
  const isIOS = /iPad|iPhone|iPod/.test(ua);
  const isIpad = /iPad/.test(ua);
  const isMobile = isAndroid || isIOS;
  const isTablet = isIpad || (isAndroid && !/Mobile/.test(ua));

  return { isAndroid, isIOS, isIpad, isMobile, isTablet };
};

export const useDeviceDetails = () => {
  const [dimensions, setDimensions] = useState(() => ({
    width: window.innerWidth,
    height: window.innerHeight
  }));

  const handleResize = useCallback(() => {
    setDimensions({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize, { passive: true });
    return () => window.removeEventListener('resize', handleResize);
  }, [handleResize]);

  const deviceInfo = useMemo(() => {
    const { width, height } = dimensions;
    const { isAndroid, isIOS, isIpad, isMobile, isTablet } = getDeviceInfo();

    return {
      isMobile,
      isAndroid,
      isIOS,
      isIpad,
      isTablet,
      isDesktop: !isMobile && !isTablet,
      orientation: width > height ? 'landscape' : 'portrait',
      isLandscape: width > height,
      isPortrait: height > width,
      aspectRatio: width / height,
      pixelRatio: window.devicePixelRatio || 1,
      touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
      screenWidth: window.screen.width,
      screenHeight: window.screen.height,
      width,
      height
    };
  }, [dimensions]);

  return deviceInfo;
};

This hook will return various details about the device. To use it, simply call the useDeviceDetails() hook and destructure the returned values.

Here’s a breakdown of the output:

isMobile: Indicates whether the device is a mobile device.
isAndroid: Indicates whether the mobile device runs on Android.
isIOS: Indicates whether the mobile device runs on iOS.
isIpad: Indicates whether the device is an iPad.
isTablet: Indicates whether the device is a tablet.
isDesktop: Indicates whether the device is a desktop.
orientation: Returns 'landscape' or 'portrait' based on width vs. height.
isLandscape: A boolean indicating if the width is greater than the height.
isPortrait: A boolean indicating if the height is greater than the width.
aspectRatio: The ratio of width to height.
pixelRatio: The device’s pixel density (window.devicePixelRatio).
touchSupport: A boolean indicating if the device supports touch input.
screenWidth: The physical screen width in pixels.
screenHeight: The physical screen height in pixels.
width: The current viewport width.
height: The current viewport height.

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Minimal alternative to `clsx`!

Hosein Pouyanmehr — Wed, 02 Jul 2025 13:24:43 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

About this post

In this post, we'll create a custom function for handling conditional classNames in your projects! It'll be minimal and let you forget about installing additional packages in most cases, as you can tailor it to your project needs.

About code pool
Why to use?
CX Utility

About code pool

With the SOC (Separation of Concerns) convention in mind, we will enhance our assets and confidently create a starter for our project in no time by selecting only the usable components and utilities!

Why to use?

Here are the main reasons to use this instead of clsx, classnames, and other similar npm packages:

It reduces at least one dependency!
It's customizable, allowing for interception or modifications if needed!

CX Utility

This function is a single module that handles all your multi-className concerns!

type ClassValue = string | boolean | null | undefined;
type ClassArgument = ClassValue | ClassValue[] | Record<string, any>;

export const cx = (...classes: ClassArgument[]): string => {
 const processedClasses: string[] = [];

 for (let i = 0; i < classes.length; i++) {
   const item = classes[i];

   if (!item) continue;

   if (typeof item === 'string' && item !== '') {
       processedClasses.push(item);
   } else if (Array.isArray(item)) {
     for (let j = 0; j < item.length; j++) {
       const nestedResult = cx(item[j]);
       if (nestedResult) {
         processedClasses.push(nestedResult);
       }
     }
   } else if (typeof item === 'object') {
     const keys = Object.keys(item);
     for (let k = 0; k < keys.length; k++) {
       const key = keys[k];
       if (item[key]) {
         processedClasses.push(key);
       }
     }
   }
 }

 return processedClasses.join(' ');
};

This will accept classes just as clsx or classnames do and return a single string at the end!

And here is a usage example:

...
  <div 
    className={cx(
      'bg-slate-50',
      'rounded-3xl',
      'overflow-hidden',
      'border-2 border-black-body',
      'my-2'
    )}
  />
...

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Hoisting in JavaScript

Hosein Pouyanmehr — Tue, 01 Apr 2025 14:12:08 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

This article is also available in Persian here.

About this post

In this post, we will learn what JavaScript Hoisting is and how it works behind the scenes. We'll also cover its behavior in different cases.

Defenition of Hoisting in JavaScript
Types in Js Hoisting
- ‌Variable Hoisting
- Function Hoisting
- Class Hoisting
Why does hoisting exist in js?
References
Conclusion

Definition of Hoisting in JavaScript

Based on MDN Web Docs,

"JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code."

Source: MDN Hoisting

In simple terms, before code execution, the JavaScript engine will check your code in each scope and move the declaration to the beginning (by the beginning of a scope, you can think of the first lines of a module, a script, or the current function).

Based on this definition, and with the power of hoisting in JavaScript, you can declare a variable after it has been used or initialized!

This behavior makes us able to write something like this:

a = 1; // Assignment

console.log(a); // console: 1

var a; // Declaration

And before execution, it became something like this:

var a; // Declaration moved to the top!
a = 1; // Assignment

console.log(a); // console: 1

You're now familiar with the general definition of hoisting. Let's dig deep into that!

Type

Before checking different aspects of types, it is important to note again that Hoisting only happens on declarations and not initializations. This means that variable declarations are hoisted, but the initialization happens where the assignment occurs.

To understand this better, pay attention to the following examples:

var a = 1;
var b = 2;

console.log(`a=${a} and b=${b}`); // result is: a=1 and b=2

var a = 1;

console.log(`a=${a} and b=${b}`); // result is: a=1 and b=null

var b = 2;

In the second example, hoisting happens as the console log result is not undefined. However the assignment to the variable b happens after logging the statement to the console. So, in this case b is hoisted to the top but has no value or is null at the logging line because the variable assignment is on line 5 and after using the variable.

As we have different methods of variable declaration in JS, knowing about edge cases and hoisting behavior in different circumstances is crucial.

Variable Hoisting

In JavaScript, we can define variables with different keywords, such as var, let, or const. All three get hoisted to the top. The difference is in the initialization process.

Hoisting of var

If you declare a variable, JS will hoist that to the beginning of the current scope. Up to this point, all examples are written using the var keyword. If you need a fresher, check the #defenition section example again.

Using the var declaration gets hoisted to the top and any usage of that variable before initialization, leads to the null value.

console.log(a); // console: null

a = 1;
var a;

Hoisting of let

A variable declared with the let keyword gets hoisted as well. But if you use the variable before declaration, the result will be a ReferenceError at the runtime.

console.log('hi');

a = 1;
let a;

This is the result after execution:

hi

ReferenceError: Cannot access 'a' before initialization

Hoisting of const

A variable declared with the const keyword gets hoisted like previous ones. If you use the variable before the declaration it results in a syntax error and the code won't be executed at all.

console.log('hi');

a = 1;
const a;

You get the following error immediately after running the above piece of code:

SyntaxError: Missing initializer in const declaration

There is a phrase for this in official documents and it is "Temporal Dead Zone". They say that when you use a let or const variable before its initialization, it is in a temporal dead zone.

In simple terms, the "temporal dead zone" is the time between when a variable is created (hoisted) and when it is declared. Hoisting for let and const doesn't lead to instant memory allocation, so if you declare something on line 5 as an example, the memory allocation will happen when the execution reaches line 5. This gap is a "temporal dead zone". For the var keyword, however, the allocation happens at the hoisting time and there will be no gap.

Function Hoisting

Functions can get hoisted in JS. This is one of the hoisting benefits, where you can call your functions before defining them.

Function Declartion

A function declaration is fully hoisted. When you define a function independently using the function keyword in JS, you can call that before its declaration. Here's an example:

logOne(); // console: 1

function logOne() {
  console.log(1);
}

Function Expression

Function expressions also get hoisted as well, but you cannot call that before the assignment. If you do so, you'll face a TypeError at the runtime.

logOne(); // console: ReferenceError: Cannot access 'logOne' before initialization

const logOne = function() {
  console.log(1);
};

This rule will be the same for both named functions or arrow functions.

Class Hoisting

Classes are also hoisted, but you cannot use a class before declaration because of the "temporal dead zone". If you use a class before its declaration, you'll face a ReferenceError.

const myObj = new MyNumberClass(); // console: ReferenceError: Cannot access 'MyNumberClass' before initialization

class MyNumberClass {
  constructor() {
    this.value = 1;
  }
}

Why does Hoisting exist in JS?

JavaScript parses the code before execution, and with hoisting, it can let the interpreter know about the existence of variables and functions. This can help the interpreter to:

Use functions before the declaration and be sure about their existence.
Make the code more flexible to write as declaration order doesn't matter. (Improve DX or Developer Experience in my book)

References

The provided article is a try to make the following resources' contents easier to understand and unified, an all-in-one hoisting learning resource. Check them out if you want!

Conclusion

Although hoisting is the default behavior of JavaScript, it actually is a weird way of interpreting the scripts. If a developer doesn't know hoisting or doesn't understand that completely, it may lead to issues and bugs in the application.
So to avoid headaches and issues, Always declare all variables at the top of the scope!

Hope you've enjoyed this article and extended your knowledge.

Split your translations in `next-intl` in a nice way!

Hosein Pouyanmehr — Mon, 26 Aug 2024 10:45:34 +0000

TL;DR
You can install next-intl-split instead of reading this article, it is a tiny package that can save you some time.

What is this post about?

In a Next.js application, translating your content into different languages can be easily done using next-intl. However, after a while, you may find the translation files too long and hard to maintain and update. In this post, we'll look at an approach to keep the translation files modular and clean and put them into multiple JSON files. You can also start reading from this section if you know how to install and set up next-intl.

Prerequisite
How the solution is going to work?
Implementation
Conclusion

Prerequisite

You need to understand next.js and i18n concepts such as app router and locale before reading this article. Also, having experience with next-intl is necessary, if you don't know how it works, please check its documentation first. I will use TypeScript in this project, but you can follow the steps for a JavaScript project, just ignore the types.

How the solution is going to work?

If you have tried next-intl before, as your application grows, you can find it difficult to keep your translation JSON files clean. Although the next-intl provides a built-in solution for splitting and separating your translations, I found that a bit hard to work with as you may end up with duplicated names or long prefixes for simple keys. So here are some downsides of the next-intl splitting approach:

You may not be able to use namespace as before.
You may need to prefix simple keys like title in a way like homePageHeroTitle to keep it unique
You have to import each translation file individually in the messages loader which can be tedious.

We're going to create some utilities and I'll explain them to you. Using these utilities (or the next-intl-split package) helps you to keep the main functionality and benefits of next-intl as well as separate your translation files properly into multiple smaller and cleaner files.

Using this approach, we're going to create folders that end with an index.json translation file in them (like /src/i18n/dictionaries/en/home/hero/index.json). The loadI18nTranslations function will load them all in one go and merge them so you can use namespace and also use the benefits of dot notation.

Implementation

We're going to create a next.js and next-inlt app first and then implement the utility in the last steps.

Step One: Creating a Next.js app

Run npx create-next-app command in your desired path to create a new next.js app.

here is my config for installation:

After installation, I'll clean useless files and try to keep the app as short as possible.

I've deleted the public folder
Fav Icon in /src/app/
All css styles in /src/app/globals.css except for @ imports of tailwind.
I've also changed the /src/app/page.tsx file to

export default function Home() {
  return (
    <main>
      <h1>Hello!</h1>
    </main>
  )
}

Now we're done with the Next.js setup.

Step Two: Adding `next-intl` and Config it

To add next-int run the following command:

npm i next-intl

Note: I'm goin to follow the with-i18n-routing approach of next-intl. Feel free to follow your preferred one. The solution provided in this for article splitting will work with all approaches.

Then, create at least two locale translation files. In this step, we'll follow the next-intl structure to properly set it up. So, I'm gonna create an i18n folder and another dictionaries folder in it. After that, I'll add en.json and fa.json for English and Persian translations.

So this is the path: /src/i18n/dictionaries/ and this is the content for en.json:

{
  "home": {
    "hero": {
      "title": "Hello!"
    }
  }
}

and this is for the fa.json:

{
  "home": {
    "hero": {
      "title": "سلام!"
    }
  }
}

We're done with the translations, now we need to update the next.config.mjs file (or next.config.js file) to use next-intl plugin. This is the updated content for next.config.mjs:

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin(
  './src/i18n/i18n.ts'
);

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Note: I've changed the default path for the i18n.ts file and for that, I did add the new path in the createNextIntlPlugin function. Next, I'm going to add an i18n.ts file in the /src/i18n/ path. You can follow the next-intl documentation for changing or keeping the default paths.

After updating the next config file, Add the following utility to the /src/i18n/i18n.ts module. (You can put this file in /src/app as well, If you did, please keep it in mind to remove the path in the next.config.mjs file)

This will be the content for i18n.ts module:

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

export const locales = ['en', 'fa'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`./dictionaries/${locale}.json`)).default,
  };
});

Here, we read the content of the JSON files based on the user locale and return the proper messages object. Also, I've exported the locales for further use.

After adding i18n.ts, We'll add a middleware to catch and redirect user properly in routes. Add this file in /src/middleware.ts. It should be in this path and you cannot customize the path for this one.

import createMiddleware from 'next-intl/middleware';

import { locales } from '@/i18n/i18n';

export default createMiddleware({
  locales,
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/', '/(en|fa)/:path*']
};

I imported the previously defined locales array to have a single source of truth for that.

Now we just need to change the app router structure from /src/app/... to /src/app/[locale]/.... This help us to have control over the app locale from the very top level. You can see the difference in this picture:

Then, add the Provider to the /src/app/[locale]/layout.tsx. This will provide the messages all over the application. So the layout module will change to something like this:

import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

import './globals.css';

export const metadata = {
  title: 'Next Intl Split',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();

  return (
    <html dir={locale === 'en' ? 'ltr' : 'rtl'} lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

And finally, we can use our dictionaries in /src/app/[locale]/page.tsx like this:

import { getLocale, getTranslations } from 'next-intl/server';

export default async function Home() {
  const currentLocale = await getLocale();
  const translate = await getTranslations({
    locale: currentLocale,
    namespace: 'home.hero',
  });

  return (
    <main>
      <h1>{translate('title')}</h1>
    </main>
  );
}

Step Three: Adding navigation

To navigate properly between routes of your application, add the following utility in the /src/i18n/navigation.ts.

import { createSharedPathnamesNavigation } from 'next-intl/navigation';

import { locales } from '@/i18n/i18n';

export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation({ locales });

Now lets add some buttons to the home page to be able to change the locale. This is the updated page.tsx component content:

import { getLocale, getTranslations } from 'next-intl/server';

import { locales } from '@/i18n/i18n';
import { Link } from '@/i18n/navigation';

export default async function Home() {
  const currentLocale = await getLocale();
  const translate = await getTranslations({
    locale: currentLocale,
    namespace: 'home.hero',
  });

  return (
    <main>
      <h1>{translate('title')}</h1>
      <div className='flex gap-2'>
        {locales.map((locale) => (
          <Link
            className={`px-2 py-1 ${
              locale === currentLocale ? 'bg-slate-300' : 'border-2'
            }`}
            key={locale}
            href='/'
            locale={locale}
          >
            {locale}
          </Link>
        ))}
      </div>
    </main>
  );
}

Step Four: Split translations

First update the dictionaries file to something like this image:

Please keep this in mind that you can separate your translations in your preferred way. Just be sure each folder end up with an index.json file.

Then add the following utility in /src/i18n/loader.ts or you can install its package by npm i next-intl-split

import fs from 'fs';
import path from 'path';

const addNestedProperty = (obj: { [key: string]: any }, keys: string[]) => {
  let current = obj;

  for (const key of keys) {
    if (!current[key]) {
      current[key] = {};
    }
    current = current[key];
  }

  return { obj, lastKey: current };
};

export const loadI18nTranslations = (
  dictionariesPath: string,
  locale: string
) => {
  const relativePath = dictionariesPath + locale;
  const absolutePath = path.join(process.cwd(), relativePath);

  let translations = {};

  try {
    const files = fs.readdirSync(absolutePath, { recursive: true });
    files.forEach((file) => {
      if (typeof file === 'string' && file.endsWith('.json')) {
        const fileParents = file
          .split(path.sep)
          .filter((parent) => parent !== 'index.json');
        const filePath = path.join(absolutePath, file);
        const fileTranslations = JSON.parse(fs.readFileSync(filePath, 'utf-8'));

        // Object {}
        translations = {
          ...translations,
        };

        const { lastKey } = addNestedProperty(translations, fileParents);

        Object.assign(lastKey, fileTranslations);
      }
    });
  } catch (error) {
    console.error(
      'The following error occured in loader in next-intl-split.',
      error
    );
  }

  return translations;
};

Explanation: The above code look for the index.json files in the provided path based on app locale. At the end, it'll merge the json translation files and provide a single JSON file.

After creating this loader (or installing the package using next-intl-split command) in the /src/i18n/i18n.ts utility, implement this changes:

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

// import { loadI18nTranslations } from 'next-intl-split'; // Use this if you've installed the package
import { loadI18nTranslations } from '@/i18n/loader';

export const locales = ['en', 'fa'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  const messages = loadI18nTranslations('/src/i18n/dictionaries/', locale);

  return {
    messages,
  };
});

NOTE: The path provided to the loadI18nTranslations utility must be absolute path to the dictionaries folder so pay attention to that if you have issues in detecting the translations. (Also you can use relative path but keep in mind to start from the source folder ./src/i18n/dictionaries/ in my case)

Conclusion

Congrats! You're now able to separate your translations as you want. The above utility help you to have translation split ability in addition to all next-intl benefits.
Also, if you use translations frequently, you can install next-intl-split to avoid repetition and save time.

☕ Coffee Time Reads - Ideal Folder Structure for React Projects

Hosein Pouyanmehr — Sun, 25 Feb 2024 19:24:24 +0000

What is this post about?

In this post, we're going to see what are the best practices to have a clean, maintainable and also scalable react project. Rather than make a list and some diagrams, I'm going to share the methodology over a project, tips and tricks about how to think about your project structure.

Why folder structure matters?

You can't have a clean overview of your project when everything is messy. In the programming world, being organized helps you to keep your speed at a high and acceptable level, make the overall project map clean and understandable so you can make faster decisions, and have your ideal quality simultaneously. Briefly, you will be able to:

Have a good overview of your project.
Avoid duplication as you can see your previous works better and cleaner.
Onboard another developer to your project much faster.
Predict and provide yourself for scaling.
Refactor and maintain your project at ease.

Keep these things in mind before your decisions

😵 Don't overthink about folder structure.

In the past, when I was about to start my first project, I can remember a lot of overthinking about the structure, about the folder and file names. After all, the truth is, do not think about your project for more than a couple of minutes. Even if you know there will be many things in your app, there is no need to waste your time creating a folder as a placeholder for future stuff. Nothing will happen if you put the files in the wrong place or name them incorrectly, you can always change them later.

💡 Inspire from similar open source projects

If your mind is locked up and you can't have a clear overview of your project, try to search for similar projects. Most of the time, you can find some GitHub repositories containing a template or a similar project. Look at different folders and file names and think for a moment if you'll have something like that(or not). Keep it in mind that you are looking at those projects to inspire and make your mind map of your project cleaner, So don't copy!

🤸‍♀️🤸‍♂️ Be flexible to the changes

You can create a tight structure and development methodology. First, it may seem perfect, but there is no guarantee that you won't change that anytime later. This is another good reason to remember "not waste your time overthinking about a tight project structure".
Good structures are flexible ones, and flexible project structures shape as you proceed. Two different projects can have two different structures that suit them.

⚪ Think GENERIC

Don't label everything specifically at the beginning. Of course, this could sound too obvious but for now, think about a button for a form confirmation, you can call that the "user sign up button" or "user sign in button" and create two buttons at the end of the day, but in general, it is a "submit button".

🏁 Start Your Project

That's all you need to keep in mind before starting your projects. As I mentioned, your project structure grows as you proceed. Creating a lot of placeholder folders and files at the beginning just makes it hard for you to change your approaches (if needed) and also isn't that useful.
It's important to start and use your energy toward your goals. These kinds of issues will fade out after a while.

React Markdown + JOY UI

Hosein Pouyanmehr — Sat, 27 Jan 2024 17:14:46 +0000

About this post
Using Markdown in your project
Using Joy UI in your project
About "jui-markdown" package
Some of "jui-markdown" features
Package usage
Documentations

About This Post

This post will give you an overview of Joy UI and also Markdown. Also, it'll help you render the markdown fast and nicely in your React and Joy UI projects.

Using Markdown in your project

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. (Wikipedia)

Using MD or MDX you can write rich formatted content real quick, and it's pretty readable even before you convert it to HTML. There are also some other benefits that you can read about them as well.

Using Joy UI in your project

Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box. (MUI)

Joy UI is a less complicated alternative to the MUI. It's highly customizable, easy to learn, and developer-friendly.

About "jui-markdown" package

"jui-markdown" uses "markdown-to-jsx" and "Joy UI". I found these two working together really simple and nice. This package will be great for you if you use Joy UI (From MUI). Also it is really lightweight, about just 10.00Kb (Unpacked size is 58.1Kb).

Some of "jui-markdown" features

Headings
Code highlight and language detection
Inline code highlight
Blockquote component
Joy UI button component support
Nice Links
Flexible and Overridable

Package usage

The package is available on npm (and yarn).

To install it, simply run:

# with npm
npm i jui-markdown

# with yarn
yarn add jui-markdown

Then pass the markdown as children:

import React from 'react';
import { JuiMarkdown } from 'jui-markdown';
// You can also use
// import JuiMarkdown from 'jui-markdown';
// But the first approach is recommended.

const App = () => {
  return <JuiMarkdown>{`# Hello markdown!`}</JuiMarkdown>;
};

export default App;

Docs

To get more familiar with this package you can read the documentation on GitHub or NPM.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Add image to draft-js editor (no plugin)

Hosein Pouyanmehr — Wed, 12 Jul 2023 14:51:05 +0000

What is this post about?

If you are implementing an editor, you probably need to add different sorts of media to your content, like images, audio, or video. The process of adding a non-text block (atomic block) to the draft-js is similar for all sorts of media. We'll learn how to work with atomic blocks and how to add image support to the editor.

Requirements
Installation
Create Editor Component
Add Placeholder
Steps Overview
Add Toolbar
Handle Adding Image
Create Image Component
Create The Decorator
Add Decorator to the State
Result and Demo

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use
draft-js and contenido packages in this tutorial.

Draft JS and Contenido

Draft-js is a rich text editor framework for React. (Read More)

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes. Read this post to get familiar with contenido.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).

# typescript
npx create-react-app draft-text-alignment --template typescript

# javascript
npx create-react-app draft-text-alignment

After the installation is done, install draft-js and contenido with this command:

# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

Javascript:

// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const MediaEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

To make the editor much more visible add the border styles to the div:

...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...

To have the styles work properly import contenido styles into your App.tsx (or _app.tsx in next.js).

...
// Styles
import 'contenido/dist/styles.css';
...

Add Placeholder

Also adding a placeholder can be useful, so:

...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
         placeholder='Write here...'
        />
...

Steps Overview

Before implementing the image support, I like to clarify each step of adding the media to the editor.

In draft-js, the non-text block will be an atomic block. By default, the editor core only knows about the text and has no idea about the non-text blocks. When we add an atomic block to the editor, it'll ignore it until we say how to render that. To show the editor to render an atomic block, we need to decorate that block. Decorating in draft js is the process of finding and clarifying the final shape of an atomic block.

For example, to add an image block to the editor:

We add an atomic block with the 'image' type (or whatever keyword you like).
Then we define a function to find entities with 'image' type.
Finally we'll use our custom Image component to render that.

Add Toolbar

Now, it's time to add the button to the toolbar.

Added lines are the same for both Javascript and Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Using contenido, we can easily have the necessary utilities for the process. addImage utility helps us to add an atomic block to the editor with the type of 'image' and then using createDecorator in combination to the image component and the findEntitiesOf('image') leads to rendering images properly and in the way we like.

// src > components > Editor.tsx
....
import {
  Editor,
  addImage, // Import this utility
  createDecorator, // Import this utility
  findEntitiesOf, // Import this utility
} from 'contenido';
...

So the editor component will be like this:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Handle Adding Image

Let's update the button event handlers to add an image to the editor.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // Utilities
  const handleAddImage = () => {
    const imageProps = {
      src: 'https://picsum.photos/200/200',
      alt: 'Random image',
      style: { width: 200, height: 200 },
    };

    addImage(editorState, setEditorState, imageProps);
  };

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
          onMouseDown={(e) => {
            e.preventDefault();

            handleAddImage();
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Note: In this example, we'll use hardcoded details for our image. In a real-world scenario, You can show a pop-up where the user enter the data, and then you can pass those to the handler.

If there is an upload phase in your application, you need to upload the image to the server first and then pass the link to that to the editor.

Create Image Component

Up to this point, The added image to the editor won't be visible as there is no decorator. To decorate the added media, we'll create the image component first.

JavaScript:

// src > components > Image.jsx
const Image = (props) => {
  if (blockType.blockType === 'image') {
    const { alt, src, style } = props;

    return <img alt={alt} src={src} />;
  }

  return <p>The atomic type is not supported in this demo!</p>;
};

export default Image;

TypeScript:

// src > components > Image.tsx
// Types
import type { FC } from 'react';
import type { DecoratorComponentProps, ImageAttributes } from 'contenido';

const Image: FC<DecoratorComponentProps> = (props) => {
  if (props.blockType === 'image') {
    const { src, alt, style } = props as ImageAttributes;
    if (src && alt)
      return (
        <img alt={alt} src={src} width={style.width} height={style.height} />
      );
  }
  return <p>The atomic type is not supported in this demo!</p>;
};

export default Image;

Create the Decorator

As we mentioned earlier, Decorating in draft js is the process of finding and clarifying the final shape of an atomic block.

This is how the decorator will look like (For both TS and JS):

// src > components > Editor.tsx
// Custom Components
import Image from './Image.tsx';

...
const decorators = createDecorator([
    {
      component: Image,
      strategy: findEntitiesOf('image');,
    },
  ]);
...

It's an array an you can have multiple decorators for different types of atomic blocks.

Add Decorator to the State

We have all and it's time to put them together to see the result.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Components
import Image from './Image.tsx'

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // Decorator
const decorators = createDecorator([
    {
      component: Image,
      strategy: findEntitiesOf('image');,
    },
  ]);

  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty(decorators));

  // Utilities
  const handleAddImage = () => {
    const imageProps = {
      src: 'https://picsum.photos/200/200',
      alt: 'Random image',
      style: { width: 200, height: 200 },
    };

    addImage(editorState, setEditorState, imageProps);
  };

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
          onMouseDown={(e) => {
            e.preventDefault();

            handleAddImage();
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Result

This is the result:

You can also check the live demo!

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Draft-js text alignment in less than 5 minutes

Hosein Pouyanmehr — Fri, 23 Jun 2023 17:23:40 +0000

What is this post about?

Text alignment is one of the essential functionalities of an editor. Using the text alignment, the user can easily set the horizontal position of the context. If you did experience implementing alignment in draft-js you know that it can be time-consuming. In this tutorial, We'll implement text alignment utility in draft-js with the help of contenido.

Requirements
Installation
Create Editor Component
Add Placeholder
Add Toolbar Buttons
Result and Demo

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use
draft-js and contenido packages in this tutorial.

Draft JS

Draft-js is a rich text editor framework for React.

React More: A brief introduction to draft-js

Contenido

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes. Read this post to get familiar with contenido.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).

# typescript
npx create-react-app draft-text-alignment --template typescript

# javascript
npx create-react-app draft-text-alignment

After the installation is done, install draft-js and contenido with this command:

# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

Javascript:

// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const TextAlignmentEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

To make the editor more visible add the border styles to the div:

...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...

Add Placeholder

Also adding a placeholder can be useful, so:

...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
...

Add Toolbar Buttons

Now, it's time to add the buttons to the toolbar. First we will create an array of buttons to map them in the toolbar. After that,
we use JS map to render the buttons.

Added lines are the same for both JavaScript and TypeScript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

To toggle between text alignments, we'll use the toggleTextAlign utility of contentio and pass the alignment key to that..

// src > components > Editor.tsx
....
import {
  Editor,
  toggleTextAlign // Import this utility
} from 'contenido';
...

The editor needs a function to properly style the alignment. To do so, import the blockStyleFn from contenido and pass it as an
attribute to the editor component. Also the default keys for alignment starts with text-align- in contenido.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, blockStyleFn, toggleTextAlign } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              toggleTextAlign(
                editorState,
                setEditorState,
                `text-align-${button.title}`
              );
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
          blockStyleFn={blockStyleFn}
        />
      </div>
    </div>
  );
};

To have the alignment work properly import contenido styles into your App.tsx (or _app.tsx in next.js).

...
// Styles
import 'contenido/dist/styles.css';
...

The editor basic alignment should work properly up to this point, but as an improvement we can change the style of selected
button to illustrate the difference. There is also a function for each of these alignments to find out if it is the selected
alignment or not.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import {
  Editor,
  blockStyleFn,
  toggleTextAlign,
  isTextRightAligned,
  isTextCenterAligned,
  isTextLeftAligned,
  isTextJustifyAligned,
} from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left', checker: isTextLeftAligned },
  { title: 'center', checker: isTextCenterAligned },
  { title: 'right', checker: isTextRightAligned },
  { title: 'justify', checker: isTextJustifyAligned },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              backgroundColor: button.checker(editorState)
                ? '#4cb5f5'
                : 'rgba(125, 125, 125, 0.25)',
              color: button.checker(editorState) ? '#fff' : 'inherit',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              toggleTextAlign(
                editorState,
                setEditorState,
                `text-align-${button.title}`
              );
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
          blockStyleFn={blockStyleFn}
        />
      </div>
    </div>
  );
};

Result

This is the result:

You can also check the live demo.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

DEV Community: Hosein Pouyanmehr

My Traffic Drop After Google’s Spam Update

Table of contents

What happened

Where AI entered the project

Mistake 1: Unreviewed translations

Mistake 2: One page for every material

What I changed

The actual numbers

What I recommend checking

What I would not recommend

Did it recover?

Final thoughts

Saved From Death by AI🤖💀

The story

Fast forward

Link

Images

Set key-value on JS Object!

About this post

Table of Contents

JavaScript Limitations When Setting Key-Value Pairs on an Object

Utility: setKeyValueOnObject()

Javascript plain object!

About this post

Table of Contents

What is a plain object in JavaScript?

Utility: isPlainObject()

React hook to get device details!

About this post

Table of Contents

About code pool

When to use?

Device Details Hook

Minimal alternative to `clsx`!

About this post

Table of Contents

About code pool

Why to use?

CX Utility

Hoisting in JavaScript

About this post

Table of Contents

Definition of Hoisting in JavaScript

Type

Variable Hoisting

Hoisting of var

Hoisting of let

Hoisting of const

Function Hoisting

Function Declartion

Function Expression

Class Hoisting

Why does Hoisting exist in JS?

References

Conclusion

Split your translations in `next-intl` in a nice way!

What is this post about?

Table of Contents

Prerequisite

How the solution is going to work?

Implementation

Step One: Creating a Next.js app

Step Two: Adding next-intl and Config it

Step Three: Adding navigation

Step Four: Split translations

Conclusion

☕ Coffee Time Reads - Ideal Folder Structure for React Projects

What is this post about?

Why folder structure matters?

Keep these things in mind before your decisions

😵 Don't overthink about folder structure.

💡 Inspire from similar open source projects

🤸‍♀️🤸‍♂️ Be flexible to the changes

⚪ Think GENERIC

🏁 Start Your Project

React Markdown + JOY UI

Table of Contents

About This Post

Using Markdown in your project

Step Two: Adding `next-intl` and Config it