Forem: RG Global x htmllessons

Mistakes That Destroy Your Codebase!

RG Global x htmllessons — Wed, 14 May 2025 08:38:34 +0000

Tip/Mistake 1: Use `export const` Instead of `export default`

Many developers use export default because it seems obvious, but it has drawbacks:

The function name is fixed and hard to rename during import.
In large codebases, this can lead to errors.

Advantage of export const:

Each component has a clear, unique name, which makes it easier to find and debug.

Example with `export default`:

export default function getData() {
  return fetch('/api/data');
}

Problem:

You must use the exact name when importing:

import getData from './getData'; // Cannot rename without extra work

Example with `export const`:

export const getData = () => fetch('/api/data');

Advantage:

You can import it by name and even rename it if needed:

import { getData } from './getData';

Tip/Mistake 2: Using `useFormStatus` to Improve UX for Post Creation

Manually handling form submission state with useState can add extra work. React’s useFormStatus hook simplifies tracking form submission without extra code.

Example:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Publish'}
    </button>
  );
}

function CreatePostForm() {
  return (
    <form action="/create-post" method="POST">
      <label>
        Title:
        <input type="text" name="title" required />
      </label>
      <label>
        Content:
        <textarea name="content" required />
      </label>
      <SubmitButton />
    </form>
  );
}

Benefits:

Simplifies form submission state management
Integrates automatically with React form actions
Keeps your code clean without extra local state

Tip/Mistake 3: Tailwind CSS Classes You Didn’t Know (sr-only and Others)

Many developers overlook useful Tailwind CSS classes that improve accessibility and UI ease.

Example: Using `sr-only` to Hide Content from the UI but Keep It for Screen Readers

export default function AccessibleInfo() {
  return (
    <div className="relative p-4">
      <div className="sr-only">
        This button opens a modal with detailed information.
      </div>
      <button
        onClick={() => alert('Modal opened')}
        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"
      >
        Open Modal
      </button>
    </div>
  );
}

If you want the element to be visible on larger screens, use not-sr-only:

export default function AccessibleInfo() {
  return (
    <div className="relative p-4">
      <div className="sr-only sm:not-sr-only">
        This button opens a modal with detailed information.
      </div>
      <button
        onClick={() => alert('Modal opened')}
        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"
      >
        Open Modal
      </button>
    </div>
  );
}

Text Selection Control

select-none: Prevents text selection.
select-text: Allows text selection.
select-all: Selects all text on click.
select-auto: Uses the browser's default behavior.

<div class="select-none">This text cannot be selected.</div>
<div class="select-text">This text can be selected.</div>
<div class="select-all">Click to select all text.</div>
<div class="select-auto">Default text selection behavior.</div>

Scrolling Settings

scroll-auto: Normal scrolling.
scroll-smooth: Smooth scrolling.

<div class="scroll-smooth h-40 overflow-y-scroll">
  <!-- Content here -->
</div>

Hiding the Default File Input

<label class="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer">
  Choose a file
  <input type="file" class="file:hidden" />
</label>

Tip/Mistake 4: Using Component Libraries vs. Native Code

Many developers start projects by using ready-made UI components from popular libraries. This is convenient because these libraries offer many features "out of the box." However, as your app grows, importing an entire library like react-select can add about 95 kB to your final bundle, which slows down your app.

Rule: Use ready-made libraries for a quick start, but switch to native solutions when your project scales.

Example Using `react-select`:

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const App = () => (
  <Select options={options} />
);

export default App;

Example Using Native `<select>`:

import React, { useState } from 'react';
import './App.css'; // Animation styles

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const App = () => {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <div>
      <select
        className="custom-select"
        value={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        <option disabled value="">
          Choose an option
        </option>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

Tip/Mistake 5: The Depcheck Tool

Depcheck is a tool that checks your code to find dependencies listed in your package.json that are not actually used in your project. This helps reduce your app’s size by removing unnecessary packages.

How to Use Depcheck:

Install depcheck:
```
yarn global add depcheck
```

Imagine you have this package.json:

{
  "dependencies": {
    "react": "^18.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4"
  }
}

Run depcheck:
```
yarn depcheck
```

Expected Output (if lodash and moment are unused):

Unused dependencies:
* lodash
* moment

Unused devDependencies:
* none

Missing dependencies:
* none

Full video (please like and subscribe) - https://youtu.be/KCh6ztZBJoY

Tip/Mistake 6: Optimizing Enums

TypeScript’s enum is useful for grouping values, but it has drawbacks:

It increases the bundle size due to extra reverse mapping code.
It can cause issues with tree shaking.
It may introduce bugs with reverse mapping.

Solution: Replace enum with an object using the as const modifier.

Example with `enum`:

export enum EnumSTATUSES {
  SUCCESS = 'SUCCESS',
  ERROR = 'ERROR',
  PENDING = 'PENDING'
}

Example with `as const`:

export const EnumSTATUSES = {
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
  PENDING: 'PENDING'
} as const;

type EnumStatusesType = (typeof EnumSTATUSES)[keyof typeof EnumSTATUSES];

Using as const makes the object immutable and lets TypeScript infer exact types (e.g., 'SUCCESS' | 'ERROR' | 'PENDING').

Tip/Mistake 7: Choosing Between `useEffect` and `useLayoutEffect`

Using the wrong hook can cause visual glitches and performance issues.

The Difference:

useEffect: Runs after the component renders; changes are visible.
useLayoutEffect: Runs synchronously after rendering but before the browser updates the screen.

Example with `useEffect`:

import React, { useState, useEffect, useRef } from 'react';

function ResizableBox() {
  const [width, setWidth] = useState(200);
  const boxRef = useRef(null);

  useEffect(() => {
    if (boxRef.current) {
      const newWidth = boxRef.current.offsetWidth;
      setWidth(newWidth);
    }
  }, []);

  return (
    <div>
      <div
        ref={boxRef}
        style={{ width: '100%', border: '1px solid black', height: '50px' }}
      >
        I change my width!
      </div>
      <p>Current width: {width}px</p>
    </div>
  );
}

export default ResizableBox;

Example with `useLayoutEffect`:

import React, { useState, useLayoutEffect, useRef } from 'react';

function ResizableBox() {
  const [width, setWidth] = useState(200);
  const boxRef = useRef(null);

  useLayoutEffect(() => {
    if (boxRef.current) {
      const newWidth = boxRef.current.offsetWidth;
      setWidth(newWidth);
    }
  }, []);

  return (
    <div>
      <div
        ref={boxRef}
        style={{ width: '100%', border: '1px solid black', height: '50px' }}
      >
        I change my width!
      </div>
      <p>Current width: {width}px</p>
    </div>
  );
}

export default ResizableBox;

Using useLayoutEffect ensures changes occur before the user sees the update, avoiding visual glitches.

Tip/Mistake 8: The Knip Tool

Knip is an advanced static analysis tool that checks not only your dependencies but also unused CSS classes, functions, variables, and files.

How to Use Knip:

Install Knip:
```
yarn add knip
```

Example CSS file:

/* App.css */
.used-class {
  color: blue;
}

.unused-class {
  font-size: 20px; /* This class is not used */
}

Example JavaScript file:

// src/App.js
import React from 'react';
import _ from 'lodash';

// Unused function
const unusedFunction = () => {
  console.log('This function is never called');
};

const App = () => {
  return (
    <div className="used-class">
      {_.join(['Hello', 'World'], ' ')}
    </div>
  );
};

export default App;

Example of an unused file:

// src/oldFile.js
export const oldVariable = 'This variable is never used';

Run Knip:
```
yarn knip
```

Knip will analyze your project and list unused CSS classes, exports, and files. Use it regularly to keep your code clean.

Tip/Mistake 9: Missing `key` When Rendering Lists

Forgetting the key attribute when rendering lists can lead to performance issues and unpredictable component behavior.

Why `key` is Important:

Stability: If the order of items changes, using indexes can cause loss of state.
Performance: React updates only the changed elements when unique keys are provided.

Bad Example (No `key`):

const items = ['Apple', 'Banana', 'Cherry'];

function BadList() {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li> // Missing key
      ))}
    </ul>
  );
}

Good Example (Using Unique `key`):

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

function BetterList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Using unique IDs instead of indexes ensures stable and efficient list rendering.

Tip/Mistake 10: Use a Seeder on the Back-End

Using a Seeder is an efficient way to populate your database with initial or test data. This speeds up development and testing.

Example Seeder for an Online Store:

const products = [
  {
    name: 'Laptop',
    description: 'A powerful laptop',
    price: 899.99,
    stock: 50
  },
  {
    name: 'Smartphone',
    description: 'A top-tier smartphone',
    price: 799.99,
    stock: 30
  },
  {
    name: 'Headphones',
    description: 'Premium wireless headphones',
    price: 349.99,
    stock: 20
  }
];

async function seedDatabase() {
  try {
    // Make sure to use the correct model and method for creating entries
    await Product.bulkCreate(products);
    console.log('Database seeded successfully');
  } catch (error) {
    console.error('Error seeding the database:', error);
  }
}

seedDatabase();

Explanation:

Products Array: Contains objects with product details (name, description, price, stock).
seedDatabase Function: Populates the database using the bulkCreate method. On success, it logs a message; on error, it logs the error.

Full video (please like and subscribe) - https://youtu.be/KCh6ztZBJoY

Tailwind CSS v4 Crash Course – Build from Scratch!

RG Global x htmllessons — Thu, 24 Apr 2025 22:36:34 +0000

In this post we will look at:

Typography/Styling
Animation/Filters
Advanced Features
Pro Features
Tailwind v4 features
Practice

and much more...

We'll cover practice examples and advanced features at the end, so stay tuned!

Styling/Typography

Font (size, color, weight)

<div class="text-lg text-blue-500 font-bold">
  Large blue bold text
</div>

Spacing (margin, padding, borders)

<div class="m-4 p-2 border-2 border-gray-300">
  Element with margin, padding and border
</div>

Colors

<div class="bg-red-500 text-white hover:bg-red-600">
  Red background with white text
</div>

Width and Height

<div class="w-full h-32 md:w-1/2">
  Responsive width and fixed height
</div>

Containers/Animation

Flex and Grids

<div class="flex justify-between items-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
</div>

Containers

<div class="container mx-auto px-4">
  Centered container with padding
</div>

Transitions and Animations

<button class="transition-all duration-300 transform hover:scale-110">
  Hover to scale
</button>

Effects and Filters

<img class="blur-sm hover:blur-none transition-all" src="image.jpg" alt="Blurred image">

Advanced Features

Hover, Focus, Before, After...

<button class="hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
  Interactive button
</button>

Responsive Design - media queries

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

Dark Mode

<div class="dark:bg-gray-800 dark:text-white">
  Dark mode compatible element
</div>

@apply and module.scss

.custom-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1234ff'
      }
    }
  }
}

Custom Utilities

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem'
      }
    }
  }
}

iframe and video

<div class="aspect-w-16 aspect-h-9">
  <iframe src="video-url" class="w-full h-full"></iframe>
</div>

Tailwind v4 features
- https://tailwindcss.com/blog/tailwindcss-v4#container-queries

Practice

Payment form https://dribbble.com/shots/23941276-Wallet-Page-Interactions

Check full video where I done this project - https://www.youtube.com/watch?v=D9kRwAeQAYs

Conclusion

An awesome tool for quickly building pet projects and gaining practical experience.

These Mistakes Are Breaking Your Projects!

RG Global x htmllessons — Thu, 17 Apr 2025 23:48:51 +0000

These 10 coding mistakes are silently ruining your codebase. Learn how to fix them before they break your frontend and backend forever.

1. Move business logic to services

Bad approach:

const calculateTotal = (products) => {
  return products.reduce((acc, product) => acc + product.price, 0)
}

const ShoppingCart = ({ products }) => {
  const total = calculateTotal(products)
  return <div>Total: {total}</div>
}

Good approach:

class CartService {
  calculateTotal(products) {
    return products.reduce((acc, product) => acc + product.price, 0)
  }
}

export const cartService = new CartService()

export const ShoppingCart = ({ products }) => {
  const total = cartService.calculateTotal(products)
  return <div>Total: {total}</div>
}

2. Use constants and enums

Bad approach:

if (status === 'SUCCESS') {
  // handle success
}

Good approach:

export const STATUSES = {
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
  PENDING: 'PENDING'
}

if (status === STATUSES.SUCCESS) {
}

3. Create configs (for example, for pages)

Talk about how the subscription will disappear this month, and that you're currently buying a subscription with everything included. Also about the upcoming intensive course on Next.js 15

Bad approach:

import Link from 'next/link'

const Navigation = () => {
  return (
    <Link href='/contact'>
      Contact
    </Link>
  )
}

export default Navigation

Good approach:

class PageConfig {
  home = '/'
  about = '/about'
  contact = '/contact'
}

export const pageConfig = new PageConfig()

import Link from 'next/link'
import { pageConfig } from '../config/pages.config'

const Navigation = () => {
  return (
    <Link href={pageConfig.contact}>
      Contact
    </Link>
  )
}

export default Navigation

4. Properly import modules for better optimization

When we import only what we need from a library, our app becomes smaller and faster. Imagine it like packing only the tools you'll actually use for a trip instead of your entire toolbox.

Bad approach:

import _ from 'lodash'
const sortedArray = _.sortBy(array, 'property')

Good approach:

import sortBy from 'lodash/sortBy'
const sortedArray = sortBy(array, 'property')

5. Use dynamic imports (SSR vs SSR false)

Dynamic imports let us load parts of our app only when they're needed. This makes the initial page load much faster because the browser doesn't have to download everything at once.

It's also important to lazy load only those elements that aren't needed by the user at the initial stage.

Example:

import dynamic from 'next/dynamic'

const ClientOnlyComponent = dynamic(
  () => import('../components/ClientOnlyComponent'),
  { ssr: false }
)

const LazyLoadedComponent = dynamic(
  () => import('../components/LazyLoadedComponent')
)

const MyPage = () => {
  return (
    <div>
      <h1>My Page</h1>
      <p>This page demonstrates dynamic imports with and without SSR.</p>
      <ClientOnlyComponent />
      <LazyLoadedComponent />
    </div>
  )
}

export default MyPage

6. Import dependencies at the moment of use

This is like calling a friend only when you actually need their help, instead of making them wait with you all day. Load packages only when a user takes an action that requires them.

Bad approach:

import { toast } from 'react-hot-toast'

const handleClick = () => {
  toast('Hello, world!')
}

Good approach:

const handleClick = async () => {
  const { toast } = await import('react-hot-toast')
  toast('Hello, world!')
}

7. Move dependencies to devDependencies

Some packages are only needed when you're building your app, not when users are using it. By putting these in devDependencies, you make your final app smaller and faster to load.

We move dependencies to devDependencies so they are installed only in the development environment, not in production, thereby reducing the final build size and speeding up installation on the server.

package.json:

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "webpack": "^5.58.2"
  }
}

8. Be careful with SSR usage

SSR (Server-Side Rendering) is worse than ISR (Incremental Static Regeneration) from an optimization perspective because SSR generates a page on the server for each request, which increases load and slows down response time. As traffic increases, server costs grow since 1 request gets 1 response. ISR, on the other hand, generates a page once and updates it on a schedule, reducing server load and speeding up content delivery.

During editing, you can show SSR and ISR and the difference in data retrieval, in one case 1 request 1 response, and in the other 1000 or more requests and still 1 response (which is super optimized)

9. Optimize classes with tailwind-merge

When working with CSS classes in Tailwind, sometimes classes can conflict or duplicate. This tool helps clean up your classes automatically, like having a smart assistant organize your closet.

Relevant when you receive props

Bad approach:

export const Button = ({ className, variant = 'primary', children }) => {
  const baseClasses = 'px-4 py-2 font-bold rounded'
  const variantClasses = variant === 'primary' 
    ? 'bg-blue-500 text-white' 
    : 'bg-gray-500 text-white'

  return (
    <button className={`${baseClasses} ${variantClasses} ${className}`}>
      {children}
    </button>
  )
}

Good approach:

import { twMerge } from 'tailwind-merge'

export const Button = ({ className, variant = 'primary', children }) => {
  const baseClasses = 'px-4 py-2 font-bold rounded'
  const variantClasses = variant === 'primary' 
    ? 'bg-blue-500 text-white' 
    : 'bg-gray-500 text-white'

  return (
    <button className={twMerge(baseClasses, variantClasses, className)}>
      {children}
    </button>
  )
}

10. Load data only when it's needed

Don't download all the movies on Netflix just in case you might want to watch them. Similarly, only load data when a user actually needs to see it, like when they click a button or scroll to a section.

Content data is loaded immediately when the page renders, even if the user hasn't clicked the "Show content" button.
This wastes data and makes your app load slower, even when users don't need this information.

Bad example:

import { useQuery } from '@tanstack/react-query'

export const Page = () => {
  const query = useQuery({
    queryKey: ['contents'],
    queryFn: fetchTableOfContents
  })

  return (
    <div>
      <button>Show content</button>
      {data && <div>{data.contents}</div>}
    </div>
  )
}

Good example #1:

import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'

export const Page = () => {
  const [isOpen, setIsOpen] = useState(false)

  const query = useQuery({
    queryKey: ['contents'],
    queryFn: fetchTableOfContents,
    enabled: false
  })

  const handleShowContents = () => {
    setIsOpen(true)
    query.refetch()
  }

  return (
    <div>
      <button onClick={handleShowContents}>Show content</button>
      {isOpen && query.data && <div>{query.data.contents}</div>}
    </div>
  )
}

Good example #2:

import { useState } from 'react'
import dynamic from 'next/dynamic'

const TableOfContents = dynamic(
  () => import('../components/TableOfContents')
)

export const Page = () => {
  const [isOpen, setIsOpen] = useState(false)

  const handleShowContents = () => {
    setIsOpen(true)
  }

  return (
    <div>
      <button onClick={handleShowContents}>Show content</button>
      {isOpen && <TableOfContents />}
    </div>
  )
}

Conclusion

These examples will help you follow best practices and improve the quality of your code.
```
10 real-world mistakes
```
```
Clean code, clean architecture
```
```
For JS, TS, React, Node
```
```
Boost performance & clarity
```
```
Simple fixes, big impact
```

🔗 Watch a full video: https://youtu.be/Vd8lAIxa46Q

Forem: RG Global x htmllessons

Mistakes That Destroy Your Codebase!

Tip/Mistake 1: Use export const Instead of export default

Example with export default:

Example with export const:

Tip/Mistake 2: Using useFormStatus to Improve UX for Post Creation

Example:

Tip/Mistake 3: Tailwind CSS Classes You Didn’t Know (sr-only and Others)

Example: Using sr-only to Hide Content from the UI but Keep It for Screen Readers

Text Selection Control

Scrolling Settings

Hiding the Default File Input

Tip/Mistake 4: Using Component Libraries vs. Native Code

Example Using react-select:

Example Using Native <select>:

Tip/Mistake 5: The Depcheck Tool

How to Use Depcheck:

Full video (please like and subscribe) - https://youtu.be/KCh6ztZBJoY

Tip/Mistake 6: Optimizing Enums

Example with enum:

Example with as const:

Tip/Mistake 7: Choosing Between useEffect and useLayoutEffect

The Difference:

Example with useEffect:

Example with useLayoutEffect:

Tip/Mistake 8: The Knip Tool

How to Use Knip:

Tip/Mistake 9: Missing key When Rendering Lists

Why key is Important:

Bad Example (No key):

Good Example (Using Unique key):

Tip/Mistake 10: Use a Seeder on the Back-End

Example Seeder for an Online Store:

Tailwind CSS v4 Crash Course – Build from Scratch!

Styling/Typography

Containers/Animation

Advanced Features

Practice

Conclusion

These Mistakes Are Breaking Your Projects!

1. Move business logic to services

2. Use constants and enums

3. Create configs (for example, for pages)

4. Properly import modules for better optimization

5. Use dynamic imports (SSR vs SSR false)

6. Import dependencies at the moment of use

7. Move dependencies to devDependencies

8. Be careful with SSR usage

9. Optimize classes with tailwind-merge

10. Load data only when it's needed

Good example #1:

Good example #2:

Conclusion

Tip/Mistake 1: Use `export const` Instead of `export default`

Example with `export default`:

Example with `export const`:

Tip/Mistake 2: Using `useFormStatus` to Improve UX for Post Creation

Example: Using `sr-only` to Hide Content from the UI but Keep It for Screen Readers

Example Using `react-select`:

Example Using Native `<select>`:

Example with `enum`:

Example with `as const`:

Tip/Mistake 7: Choosing Between `useEffect` and `useLayoutEffect`

Example with `useEffect`:

Example with `useLayoutEffect`:

Tip/Mistake 9: Missing `key` When Rendering Lists

Why `key` is Important:

Bad Example (No `key`):

Good Example (Using Unique `key`):