
Welcome back, fellow React enthusiasts!

Previously, we discussed [re-renders and the "moving state down" pattern](/blog/react-rerender). That technique works
great when you can isolate stateful logic into a leaf component. But sometimes the architecture doesn't allow for that.

What do you do when state *must* live at the top, yet you don't want to tank performance?

Let's explore a real scenario. You're building a dashboard with a resizable sidebar. The sidebar width is controlled
by dragging a handle, and the entire content area needs to respond to this width change.

## The Challenge

Here's what you need:

* A draggable divider that updates the sidebar width in real-time.
* The sidebar wraps around `ExpensiveChart`, `DataGrid`, and `AnalyticsPanel`.
* As you drag, the layout adjusts smoothly.

The naive approach puts the drag state at the top level (or perhaps tries to hide it in
a [custom hook](/blog/react-hooks-pitfalls), which doesn't change anything):

```jsx
const Dashboard = () => {
  const [sidebarWidth, setSidebarWidth] = useState(300);

  const handleDrag = (e) => {
    setSidebarWidth(e.clientX);
  };

  return (
    <div className="dashboard-layout">
      <div className="sidebar" style={{ width: sidebarWidth }}>
        <DragHandle onDrag={handleDrag} />

        {/* These re-render constantly while dragging! */}
        <ExpensiveChart />
        <DataGrid />
        <AnalyticsPanel />
      </div>
      <MainContent />
    </div>
  );
};
```

<Image src="elements.png" alt="React DevTools screenshot titled 'The Problem: Re-rendering Everything' showing App component with scrollPosition state triggering re-renders on BunchOfStuff and VerySlowComponent children" />

This implementation will stutter badly. Every mouse movement fires a state update, causing `Dashboard` to re-render.
When `Dashboard` re-renders, so does everything nested inside it. The "moving state down" approach fails here because
the `sidebar` div needs to wrap the expensive components while also knowing about the width.

You might reach for `React.memo`, but there's a cleaner compositional approach that leverages how React handles
elements.

## The Fix: Composition with Children

Extract the resize logic into a dedicated component that accepts its contents as children:

```jsx
const ResizableSidebar = ({ children }) => {
  const [width, setWidth] = useState(300);

  const handleDrag = (e) => {
    setWidth(e.clientX);
  };

  return (
    <div className="sidebar" style={{ width }}>
      <DragHandle onDrag={handleDrag} />
      {children}
    </div>
  );
};
```

Refactor `Dashboard` to use this wrapper:

```jsx
const Dashboard = () => {
  return (
    <div className="dashboard-layout">
      <ResizableSidebar>
        {/* Passed as props, not defined here */}
        <ExpensiveChart />
        <DataGrid />
        <AnalyticsPanel />
      </ResizableSidebar>
      <MainContent />
    </div>
  );
};
```

Now dragging is fluid. The expensive components stay untouched even though they visually live inside a component that
updates dozens of times per second.

## The Mechanics Behind It

This behavior stems from the distinction between **Components** and **Elements**.

A **Component** is the function itself (`Dashboard`, `ResizableSidebar`).

An **Element** is the object produced when JSX executes (`{ type: ExpensiveChart, props: {...} }`).

Here's what happens step by step:

1. `Dashboard` renders once and creates Element objects for `<ExpensiveChart />`, `<DataGrid />`, and
   `<AnalyticsPanel />`.
2. These Element objects get passed into `ResizableSidebar` through the `children` prop.
3. User starts dragging. `ResizableSidebar` updates its `width` state repeatedly.
4. `ResizableSidebar` re-executes, returning a new sidebar div with the updated width.
5. React checks the `children` prop. Has the reference changed?
6. No. `Dashboard` never re-rendered, so `children` points to the exact same objects in memory.
7. React skips reconciling that entire subtree.

The key insight: **React compares element references, not their visual position in the tree.**

## Understanding the JSX Transformation

Remember that `children` is an ordinary prop. The nested syntax is syntactic sugar.
Elements are [expressions](/blog/expressions-statements), so these two snippets produce identical results:

```jsx
<Wrapper>
  <Content />
</Wrapper>
```

```jsx
<Wrapper children={<Content />} />
```

You could use any prop name: `content`, `slot`, `body`. The optimization works as long as the Element is created in a
scope that doesn't re-render and then passed to the stateful component.

## Wrapping Up

The [previous article](/blog/react-rerender#moving-state-down) showed how pushing state into a child component
prevents unnecessary re-renders. This article demonstrated the inverse: lifting static UI *out* of the stateful
component by passing it as props.

Both patterns serve the same purpose: decoupling what changes from what stays stable.


Learn how React elements work and how passing children as props can optimize performance by preventing unnecessary re-renders.

React Elements, Children as Props, and Re-Renders


<Image src="exit.jpg" alt="Glowing green EXIT sign hanging from a ceiling, representing how early return pattern lets functions exit before reaching the end" />

**The early return pattern** (also called guard clauses or the bouncer pattern) is a technique where you exit a function as soon as a precondition fails, instead of wrapping your main logic in nested `if` blocks. It reduces nesting, lowers cognitive load, and makes your functions dramatically easier to read.

## What Is the Early Return Pattern?

Today, while wrestling with some code, I caught myself smiling at something small but powerful. I was deep in a function that was starting to look like a staircase of if statements. Halfway through, I stopped and thought: _why am I dragging all these checks down the page when I could just step out early_?

That's when it clicked — again 🥳. Early return isn't just a coding pattern; it's a way of freeing your own brain. You handle the simplest, most obvious cases first and politely bow out of the function. Then the rest of the logic can flow without carrying the weight of those initial conditions.

```javascript
function processUser(user) {
  if (!user) return;          // nothing to process
  if (!user.isActive) return; // skip inactive users

  sendWelcomeEmail(user);
  updateAnalytics(user);
}
```

Each of those `if` lines is a **guard clause** — a check that says "if this condition isn't right, leave now." Some people call this the **fail-fast approach**: deal with the problems up front, then focus on the happy path. Others use the term **bouncer pattern** — like a bouncer checking IDs before letting you into a club.

## Before and After: Nested If vs Guard Clauses

Before I got into this habit, my functions often looked like a pile of _stacked boxes — each_ if wrapped inside another. It worked, but it forced every reader (including future me) to carry all those checks in their head all the way down.

```javascript
// ❌ Nested approach
function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasProfile) {
        sendWelcomeEmail(user);
        updateAnalytics(user);
      }
    }
  }
}
```

This still runs fine, but it makes you think about conditions long after you should've moved on. Now compare:

```javascript
// ✅ Early return approach
function processUser(user) {
  if (!user) return;
  if (!user.isActive) return;
  if (!user.hasProfile) return;

  sendWelcomeEmail(user);
  updateAnalytics(user);
}
```

Once those guard clauses are in place, I don't have to `mentally juggle` those "what ifs" anymore. They're dealt with. The rest of the code reads like a straight road.

> You make the easy decisions first, exit where needed, and leave the interesting logic standing in the light. It's not just about fewer braces — it's about respecting your own attention span.

## The Arrow Anti-Pattern and the Pyramid of Doom

When nested if statements stack up, the code starts forming a visual arrow pointing to the right — this is called the **arrow anti-pattern** (or the **pyramid of doom**). Here's an extreme but not unrealistic example:

```javascript
// ❌ Arrow anti-pattern
function handlePayment(order) {
  if (order) {
    if (order.items.length > 0) {
      if (order.paymentMethod) {
        if (order.paymentMethod.isValid) {
          if (order.shippingAddress) {
            processPayment(order);
            sendConfirmation(order);
          }
        }
      }
    }
  }
}
```

Every condition pushes the real logic further to the right. By the time you reach `processPayment`, you're five levels deep. Early return flattens this completely:

```javascript
// ✅ Flat with guard clauses
function handlePayment(order) {
  if (!order) return;
  if (order.items.length === 0) return;
  if (!order.paymentMethod) return;
  if (!order.paymentMethod.isValid) return;
  if (!order.shippingAddress) return;

  processPayment(order);
  sendConfirmation(order);
}
```

Same logic, zero nesting. The intent is immediately clear: handle the edge cases, then do the work.

## Guard Clauses in Real-World JavaScript

Trivial examples are easy to agree with. Where early return really shines is in production code.

### Express.js API Handler

```javascript
app.post('/api/orders', async (req, res) => {
  if (!req.body.items?.length) {
    return res.status(400).json({ error: 'Cart is empty' });
  }

  if (!req.user) {
    return res.status(401).json({ error: 'Not authenticated' });
  }

  if (!req.user.hasPermission('create_order')) {
    return res.status(403).json({ error: 'Forbidden' });
  }

  const order = await createOrder(req.body, req.user);
  return res.status(201).json(order);
});
```

Notice the `return` before each `res.status(...)`. This is critical in Express — without it, the function keeps executing and you'll get "headers already sent" errors. More on this in the [common mistakes](#common-mistakes-with-early-return) section below.

### Form Validation

```javascript
function validateForm(data) {
  if (!data.email) return { valid: false, error: 'Email is required' };
  if (!data.email.includes('@')) return { valid: false, error: 'Invalid email' };
  if (!data.password) return { valid: false, error: 'Password is required' };
  if (data.password.length < 8) return { valid: false, error: 'Password too short' };

  return { valid: true, error: null };
}
```

Each guard returns a clear error. No nested if-else chains, no accumulated error variables.

### React Component

```jsx
function UserProfile({ user, isLoading, error }) {
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  if (!user) return <EmptyState />;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}
```

React developers use this pattern constantly. Each guard clause handles a specific UI state, keeping the main render clean.

## Early Return in TypeScript

Guard clauses in TypeScript do more than improve readability — they **narrow types**. TypeScript understands that after a guard, the remaining code can assume a more specific type.

```typescript
function formatUserName(user: User | null | undefined): string {
  if (!user) return 'Anonymous';
  if (!user.firstName) return user.email;

  // TypeScript knows user is non-null and firstName exists here
  return `${user.firstName} ${user.lastName ?? ''}`.trim();
}
```

This is especially useful with [discriminated unions](/blog/discriminated-unions):

```typescript
type Result =
  | { status: 'success'; data: Order }
  | { status: 'error'; message: string }
  | { status: 'loading' };

function renderResult(result: Result) {
  if (result.status === 'loading') return <Spinner />;
  if (result.status === 'error') return <Error message={result.message} />;

  // TypeScript narrows to { status: 'success'; data: Order }
  return <OrderDetails order={result.data} />;
}
```

No type assertions needed. The guard clauses do the narrowing for you. For reusable checks, you can extract them into [type predicates](/snippets/type-predicates) — custom type guards that make the narrowing explicit.

## Early Return with Async/Await

Early return works just as well in async functions. This is an area where surprisingly few articles give concrete examples, but it's where I find guard clauses most valuable — async code is already hard enough to read without adding nesting.

```javascript
async function fetchUserOrders(userId) {
  if (!userId) return [];

  const user = await getUser(userId);
  if (!user) return [];
  if (!user.isActive) return [];

  const orders = await getOrders(user.id);
  if (!orders.length) return [];

  return orders.map(formatOrder);
}
```

Each guard prevents unnecessary `await` calls. If the user doesn't exist, we skip the orders fetch entirely. This matters for performance — not just readability.

You can combine early returns with `try/catch` as well:

```javascript
async function processWebhook(payload) {
  if (!payload?.event) return { status: 'ignored' };
  if (!isValidSignature(payload)) return { status: 'unauthorized' };

  try {
    const result = await handleEvent(payload.event, payload.data);
    return { status: 'processed', result };
  } catch (error) {
    return { status: 'failed', error: error.message };
  }
}
```

The guard clauses stay clean and outside the `try/catch` — no need to catch errors for validations that won't throw.

## Early Return vs Nested If Statements

Some developers argue that early return "splits" the function into multiple exit points, making it harder to trace. Let me address that honestly.

Nested if statements have **one** exit point — the end of the function. Early return can have **many**. So which is better?

In practice, **multiple early exits are easier to reason about** because each one is self-contained. When you see `if (!user) return;`, you know exactly what happens for that case. With nested ifs, you have to trace through the entire tree to understand every path.

That said, if your function has only one or two conditions, nesting is perfectly fine:

```javascript
// This is perfectly readable as-is
function greet(name) {
  if (name) {
    return `Hello, ${name}!`;
  }
  return 'Hello, stranger!';
}
```

Early return shines most when you have **three or more preconditions** to check.

## When NOT to Use Early Return

Early return isn't always the answer. Here are cases where I'd think twice.

**Single-expression functions.** If your function is a one-liner, a ternary or null coalesce is simpler:

```javascript
// A guard clause would be overkill here
const getDisplayName = (user) => user?.name ?? 'Anonymous';
```

**Functions with required cleanup.** If you need to release a resource — close a file handle, release a lock, clear a timer — multiple return points make it easy to forget the cleanup. Use `try/finally` to guarantee it runs:

```javascript
function readConfig(path) {
  const handle = openFile(path);
  if (!handle) return null;

  try {
    return parseFile(handle);
  } finally {
    closeFile(handle); // Always runs, even after early return
  }
}
```

**Complex state machines.** When a function has many interacting states rather than simple preconditions, a `switch` statement or a [dispatch table](/blog/dispatch-tables) is often clearer than a chain of early returns.

## Common Mistakes with Early Return

### Forgetting `return` in Express.js

This is the #1 gotcha I see in code reviews:

```javascript
// ❌ Bug: missing return
app.get('/user', async (req, res) => {
  if (!req.user) {
    res.status(401).json({ error: 'Unauthorized' });
    // Execution continues! 💥
  }

  const profile = await getProfile(req.user.id); // Crashes
  res.json(profile);
});
```

`res.json()` does **not** stop function execution. You must add `return`:

```javascript
// ✅ Fixed
if (!req.user) {
  return res.status(401).json({ error: 'Unauthorized' });
}
```

### Over-Guarding

Don't guard against things that can't happen:

```javascript
// ❌ Unnecessary — array.map always returns an array
function formatItems(items) {
  if (!items) return [];
  return items.map(format);
}
```

Only validate at system boundaries (user input, external APIs). Trust your internal code.

## Enforcing Guard Clauses with ESLint

You can configure ESLint to encourage early returns automatically:

```json
{
  "rules": {
    "no-else-return": "warn",
    "max-depth": ["warn", 3]
  }
}
```

`no-else-return` flags unnecessary `else` blocks after a `return`. `max-depth` warns when nesting exceeds 3 levels — a good nudge toward flattening your code with guard clauses.

It's funny how these little patterns sneak up on you. Today's code reminded me that writing for humans — including future me — is just as important as writing for the machine.

## Related

- [Expressions vs Statements](/blog/expressions-statements) - understand the building blocks behind guard clauses and control flow
- [Check if a URL is absolute](/snippets/is-absolute-url) - a concise example of early return for URL validation


Learn the early return pattern (guard clauses) in JavaScript and TypeScript. Reduce nesting, improve readability, and write cleaner functions with real-world examples.

Early Return Pattern in JavaScript — Guard Clauses Guide


<Image alt="A hand-drawn diagram showing Generic Type Parameters on the left and a browser window with TypeScript code for a generic identity function on the right, plus two boxes labeled U and V" src="generic.jpg" priority={true} />

When you first encounter TypeScript generics, you'll likely see something
like [this](https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics):

```typescript
function identity<T>(arg: T): T {
  return arg;
}
```

That lonely **T** sitting there might seem mysterious.

Why T? What if you need more than one? And when should you graduate from single letters to something more descriptive?
Let's dive into the world of generic naming conventions and figure out what actually makes sense.

## The Classic Lineup: T, U, V, W

The **T** convention comes from mathematics and early programming languages. It simply stands for "Type" – nothing
fancy.
When you need multiple generic parameters, the tradition is to march through the alphabet:

```typescript
// Two types? Add U
function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

// Three types? Bring in V
function triple<T, U, V>(first: T, second: U, third: V): [T, U, V] {
  return [first, second, third];
}
```

This alphabetical progression isn't arbitrary – it creates a clear, predictable pattern that developers can follow
easily. Plus, these single letters are visually distinct and don't clutter your code.

> This naming convention is common in different languages,
> like [Java](https://docs.oracle.com/javase/tutorial/java/generics/types.html) and others.

## When Single Letters Work Perfectly

For simple, general-purpose functions and utilities, single letters are your best friend:

```typescript
// Array mapping - crystal clear what T and U represent
function map<T, U>(items: T[], transform: (item: T) => U): U[] {
  return items.map(transform);
}

// Key-value pairs - K and V are intuitive
interface Dictionary<K, V> {
  [key: K]: V;
}
```

> Notice how TypeScript's own built-in utilities follow this pattern. `Pick<T, K>`, `Omit<T, K>`, `Record<K, V>` – they
> stick with meaningful single letters because the context makes their purpose obvious.

## The Case for Descriptive Names

Sometimes, though, single letters leave your future self (and your teammates) scratching their heads. That's when
descriptive names shine:

```typescript
// What are T and U supposed to represent here?
interface ApiClient<T, U> {
  get(endpoint: string): Promise<T>;
  handleError(error: U): void;
}

// Much clearer!
interface ApiClient<ResponseData, ErrorType> {
  get(endpoint: string): Promise<ResponseData>;
  handleError(error: ErrorType): void;
}
```

This is especially valuable in domain-specific code where the generic types have special meaning in your business logic.

## The Repository Pattern Example

Here's where descriptive naming really pays off:

```typescript

interface Repository<Entity, Key> {
  findById(id: Key): Promise<Entity | null>;
  save(entity: Entity): Promise<Key>;
  delete(id: Key): Promise<void>;
  findAll(): Promise<Entity[]>;
}


class UserRepository implements Repository<User, string> {
  // Implementation details...
}
```

Anyone reading this code immediately understands what **Entity** and **Key** represent.
Compare that to `Repository<T, U>` – you'd need to dig into the implementation to figure out which is which.

## The T Prefix Debate

You'll sometimes see generic parameters prefixed with T:

```typescript
interface Repository<TEntity, TKey> {
  findById(id: TKey): Promise<TEntity>;
}
```

This convention comes from [C#](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic?view=net-9.0) and serves a purpose – it clearly marks something as a **type parameter** rather than a
**regular variable**. But it's not universally loved.

TypeScript's own standard library doesn't use the T prefix.
React components rarely use it. Many JavaScript and TypeScript projects skip it entirely:

```typescript
// Both are perfectly valid
interface Props<User, Settings> {}
interface Props<TUser, TSettings> {}
```

The choice often comes down to team preference and consistency with your existing codebase. Pick one style and stick
with it.

## Practical Guidelines

Here's what I've learned from years of writing TypeScript:

### Use single letters when:

- Writing utility functions that work with any type 
- The generic's role is obvious from context 
- You're following established patterns (like `map<T, U>`)

### Use descriptive names when:

- The generics have a specific domain meaning 
- You have multiple related type parameters 
- Code clarity would suffer with single letters

### Stay consistent:

- Whatever convention your team chooses, apply it everywhere 
- Don't mix T prefixes with non-prefixed names randomly 
- Document your team's preferred style

## Common Single-Letter Conventions

```typescript
T // Primary type parameter
U, V, W // Additional type parameters (alphabetical order)
K // Key type (in mappings, records)
V // Value type (in key-value structures)
E // Element type (in collections)
R // Return type
P // Properties/Props type
```

## Wrapping Up

- **Consistency beats perfection** – pick a style and stick with it 
- **Context is king – choose names** that make sense for your specific use case 
- **When in doubt, be descriptive** – clarity trumps brevity in complex code 
- **Follow your team's conventions** – consistency across the codebase matters most

> I love conventions and wrote a lot of articles about them.
> Check out about [conventional commits](/blog/conventional-commits) and [JavaScript Naming](/blog/javascript-naming-conventions) for more.

## Related

- [Template Literal Types](/snippets/template-literal-types) - template literal types leverage generics for powerful string patterns
- [The satisfies Operator](/snippets/satisfies-operator) - satisfies uses type inference alongside generics
- [Discriminated Unions](/blog/discriminated-unions) - combine unions with generics for type-safe patterns


Learn TypeScript generic type parameter naming conventions. Understand when to use T, K, V and when descriptive names like TKey make your code more readable.

What is a generic type parameter T in TypeScript?


### Understanding the Hidden Pitfalls of Custom Hooks in React

In a previous post we covered [How React Re-Renders Work](/blog/react-rerender). But today, we'll take a closer look at
the hidden pitfalls of custom hooks in React.

<Image alt="Hand-drawn cover image with 'Custom React Hooks' title, useEffect() in blue, fishing hook illustrations, and the React logo" src="hooks.jpg" priority={true} />

When we handle state, component re-renders, and application performance in React, custom hooks are a powerful tool that
help us keep our components clean and manageable. However, this simplicity can sometimes hide performance issues that we
may not immediately notice.

Consider a basic custom hook for managing a dropdown menu:

```jsx
const useDropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  return {
    isOpen,
    open: () => setIsOpen(true),
    close: () => setIsOpen(false),
    toggle: () => setIsOpen(prev => !prev),
  };
};
```

Using this hook in a component might look neat and clean:

```jsx
const App = () => {
  const { isOpen, toggle, close } = useDropdown();

  return (
    <div className="app-container">
      <button onClick={toggle}>Menu</button>
      {isOpen && <DropdownMenu onSelect={close} />}
      <ExpensiveChart />
      <DataGrid rows={1000} />
    </div>
  );
};
```

At first glance, this setup appears elegant—state logic neatly wrapped in the `useDropdown` hook. However, this
approach hides a subtle performance issue: whenever the dropdown visibility state changes, React re-renders the entire
`App` component, despite the state being limited to a small interaction.

> Why? You can read more about react rerenders [here](/blog/react-rerender).

### Hidden States and Re-rendering Pitfalls

Let's extend our custom hook to listen for window resize events:

```jsx
const useDropdown = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return {
    // For example, this part of the code was simplified
    isOpen: false,
    open: () => {},
    close: () => {},
    toggle: () => {},
  };
};
```

Now, every time the user resizes the window, this hook updates the state internally. Even though the window width isn't
returned or directly used, it **triggers state changes**, causing the entire `App` to re-render unnecessarily.

### Nested Hooks Can Multiply Issues

The problem worsens when custom hooks depend on other hooks indirectly. For example, consider another hook for tracking
keyboard input:

```jsx
const useKeyboardListener = () => {
  const [lastKey, setLastKey] = useState(null);

  useEffect(() => {
    const handleKeyDown = (e) => setLastKey(e.key);
    window.addEventListener('keydown', handleKeyDown);

    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return lastKey;
};

const useDropdown = () => {
  useKeyboardListener();

  return {
    // For example, this part of the code was simplified
    isOpen: false,
    open: () => {},
    close: () => {},
    toggle: () => {},
  };
};
```

Even if `useDropdown` does not directly use the last key pressed, the `App` component still re-renders each time
a key is pressed, since the state is updated inside the nested hook.

> Hiding stateful logic within hooks doesn't remove their performance impact. The
> solution isn’t hiding complexity but smartly managing and isolating the state.

### How to Solve This

To avoid such issues, encapsulate state logic in smaller components:

```jsx
const Dropdown = () => {
  const { isOpen, toggle, close } = useDropdown();

  return (
    <>
      <button onClick={toggle}>Menu</button>
      {isOpen && <DropdownMenu onSelect={close} />}
    </>
  );
};
```

This ensures that the minimal required area re-renders, preventing unnecessary updates across the entire app.

> In this solution, the `Dropdown` logic moved down from `App` to its own component. I described this approach in
> [this article](/blog/react-rerender#moving-state-down).

### Key Takeaway

The key lesson: carefully handle state encapsulation within custom hooks. Keep state management local and focused to
optimize your React application's performance and responsiveness.

> P.S. Memoization and other performance optimizations will be covered in future posts. Meanwhile, you can read about [Elements, Children as Props, and Re-Renders](/blog/react-elements-children).

## Related

- [useClickOutside Hook](/snippets/use-click-outside) - a practical custom hook example that applies the patterns discussed above
- [useMediaQuery Hook](/snippets/use-media-query) - another commonly used custom hook with proper cleanup


Learn about performance risks in React custom hooks, how they cause unexpected re-renders, and strategies to manage state efficiently.

Understanding the Hidden Pitfalls of Custom Hooks in React


<Image alt="Cartoon React atom character pointing at three components and saying 'You need to re-render'" src="react-rerender.png" priority={true} />

Hi, react [Andy](https://en.wiktionary.org/wiki/react_Andy)!

I’ve used React for over six years. I’ve noticed that even skilled programmers often struggle to grasp how React
operates behind the scenes. This can lead to inefficiencies. It affects code quality, speed, and user experience.

The documentation is great for starting with React. Many [books](https://www.roadtoreact.com/), courses, and blogs focus
on beginners. But what comes next? How can you dive deeper and really understand how it works? If you’ve been writing
React for a while, basic or
even intermediate courses may not be enough. Sadly, resources for advanced learning are limited.

That’s why I’m launching a [series of articles](/blog/category/advanced-react) to fill this knowledge gap.

## Intro to re-renders

Understanding re-renders in React is crucial for performance. You need to understand what triggers them. Know how they
move through the app. Learn what happens during a re-render and why it matters.

<Image alt="Meme: 'Oh, so you like React? Tell me what triggers a re-render' with a skeptical cartoon character" src="react-meme.png" />

## The problem

Imagine you're an intern at a FAANG company. Your first task is to create a new React component. You're asked to add a
simple `button` that opens a `settings panel` at the top of the dashboard.

```jsx
const Dashboard = () => {
  // Some code here
  return <div className="container">
    {/* The trigger should go somewhere here */}
    <ExpensiveDataGrid />
    <AnalyticsWidget />
    <ActivityFeed />
  </div>;
};
```

Then you implement it. The task seems straightforward. We've all done it countless times:

```jsx
const Dashboard = () => {
  // Add state
  const [isExpanded, setIsExpanded] = useState(false);

  // Everything that is returned here will be re-rendered when the state is updated
  return <div>
    {/* Add the trigger */}
    <IconButton onClick={() => setIsExpanded(true)}>
      Show settings
    </IconButton>

    {/* Add the panel */}
    {isExpanded && <SettingsPanel onDismiss={() => setIsExpanded(false)} />}

    <ExpensiveDataGrid />
    <AnalyticsWidget />
    <ActivityFeed />
  </div>;
};
```

You add [state](https://react.dev/learn/state-a-components-memory) to track if the panel is expanded or collapsed. You include
a button to change the state and render the panel
based on this state.

When you run the app, there's a noticeable delay ⏰, **almost a second** — before the panel appears.

Experienced React developers might quickly suggest.

> "You’re re-rendering the whole app. Just wrap everything in [React.memo](https://react.dev/reference/react/memo) and
> use [useCallback](https://react.dev/reference/react/useCallback) to avoid unnecessary renders."

This advice has its place, but it’s wise to pause before jumping in. In this case, memoization isn’t needed and could
hurt performance.

First, let’s take a closer look at what exactly is happening and why this delay occurs.

<Image alt="Flowchart showing a state update at the root triggering re-renders in all child components down the tree" src="rerender.png" />

When we click the button, we trigger the `setIsExpanded` setter function, which updates the `isExpanded` state from `false` to
`true`. As a result, the `Dashboard` component that holds this state re-renders itself.

After the state updates and the `App` component re-renders, React must pass the new data to other dependent components.
It automatically re-renders all components that the first component shows. It keeps going down the tree until it reaches
the end.

If you visualize a typical React app as a tree structure, you will find that everything beneath the point where the
state update was initiated will be re-rendered.

> Re-rendering is crucial to understand in React.

The key point to remember is that React never re-renders components "up" the render tree. If a state update occurs in
the middle of the component tree, only the components "down" the tree will be re-rendered.

<Image alt="Component tree diagram where only the subtree below the state update node re-renders, leaving sibling branches unchanged" src="rerender-state.png" />

When a component is wrapped in `React.memo`, `React` will interrupt its default re-rendering process and first evaluate
whether the `props` have changed. If there are no changes to the `props`, re-renders will be halted. However, if even a
single `prop` is modified, the re-rendering will proceed as usual.

It's important to note that effectively preventing re-renders through memoization is a nuanced topic with various
considerations. For a deeper understanding, it is advisable to explore these concepts further in new articles. (Coming soon... or read about [Elements, Children as Props, and Re-Renders](/blog/react-elements-children))

<Image alt="Component tree diagram showing React.memo blocking re-renders on one branch while the other branch re-renders normally" src="react-memo.png" />


Wrapping components with `React.memo` can indeed help prevent unnecessary re-renders in certain scenarios. However, it's
important to note that using `React.memo` comes with its own set of complexities and caveats, which will be discussed in
future articles. A more effective approach is to isolate the components that rely on specific state and encapsulate both
the state and those components into a smaller, dedicated component. This can lead to improved performance and a clearer
component structure.

## Moving state down

Let's move our logic into a separate component.

```jsx
const SettingsToggle = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return <>
    <IconButton onClick={() => setIsExpanded(true)}>
      Show settings
    </IconButton>

    {isExpanded && <SettingsPanel onDismiss={() => setIsExpanded(false)} />}
  </>;
};
```

And then render this new component in the `Dashboard`:

```jsx
const Dashboard = () => {
  return <div>
    {/* Our new component */}
    <SettingsToggle />

    <ExpensiveDataGrid />
    <AnalyticsWidget />
    <ActivityFeed />
  </div>;
};
```

<Image alt="Before-and-after component tree: moving state into a child component isolates re-renders from the slow sibling component" src="rerender-performance-fix.png" />

Consequently, the settings panel appears immediately. We resolved a significant performance issue using a straightforward
composition technique!


Dive into the mechanics of React re-renders — learn what causes them, how they impact performance, and how to manage them effectively.

React Re-Renders: What Triggers Them and Why


If you’re interested in GraphQL but haven’t had the chance to explore it directly, it's time to take action.
[Apollo Odyssey](https://www.apollographql.com/tutorials/) is the perfect solution to help you understand how it all
fits together!

<Image alt="Apollo Certified Graph Developer Associate certificate issued to Serhii Shramko on 3/12/2025" src="graphql-certificate.png" priority={true} />

## Apollo Odyssey: Free Learning Platform

The learning platform features a variety of paths, combining video tutorials with written guides that include quizzes
and code challenges for reinforcement.

<Image alt="Apollo Odyssey learning platform video showing Track Card data structure with fields: title, thumbnail, length, module count, author name, and author picture" src="graphql-apollo-odyssey.png" />


To earn
the [Apollo Graph Developer - Associate certification](https://www.apollographql.com/tutorials/certifications/apollo-graph-associate),
you must complete the first four paths:

- [Basics](https://www.apollographql.com/tutorials/lift-off-part1)
- [Resolvers](https://www.apollographql.com/tutorials/lift-off-part2)
- [Arguments](https://www.apollographql.com/tutorials/lift-off-part3)
- [Mutations](https://www.apollographql.com/tutorials/lift-off-part4)

> Developers who obtain this certification possess a solid foundational knowledge of GraphQL and the Apollo tool suite
> to design a schema, run an Apollo Server 4, and perform queries with Apollo Client 3 on the frontend.

I absolutely love this platform! It features fantastic videos, clear explanations, and some really good jokes that
always make me smile. 😀

## Apollo Graph Developer - Associate

As you work your way through the four required tutorials, you will be creating a real-world application called
`Catstronauts`.

<Image alt="Catstronauts demo app built with React and GraphQL showing a grid of cat-themed space course cards" src="catstronauts.png" />

This project consists of a frontend client built with _TypeScript_ and _React_, alongside a backend server that utilizes
_Node.js_ as its runtime environment and [Apollo Server](https://www.apollographql.com/docs/apollo-server) as a
standalone, spec-compliant GraphQL server.

## Certification exam

- 31 multiple choice questions
- 25 correct answers required to pass

I achieved success in my test, making only a single error.

This outcome highlights the effectiveness of the course, which comprehensively addresses all relevant material,
equipping me with the confidence to approach the exam calmly.

## Graph Developer - Professional

Well, now the next step is to gain a deeper knowledge of GraphQL and
get [Graph Developer - Professional](https://www.apollographql.com/tutorials/certifications/apollo-graph-professional)
certification.

> Developers who obtain this certification demonstrate strong familiarity with Apollo Federation concepts. They can
> apply those concepts to build a federated supergraph or move an existing monolithic graph to federation.

I really commend the [Raphael Terrier](https://www.linkedin.com/in/raphaelterrier/)
and [Michelle Mabuyo](https://www.linkedin.com/in/michellemabuyo/) for developing such an excellent learning course.

## Further reading

- [Useful Articles for Developers](/blog/useful-articles) — curated list of recommended developer resources
- [Branded Types in TypeScript](/snippets/branded-types) — type safety technique useful for strongly-typed GraphQL schemas


My journey to getting Apollo GraphQL certification for free. Learn about the exam structure, preparation tips, and how to earn your credential.

How I Got Apollo GraphQL Certification for Free


Writing clean, maintainable JavaScript isn't just about making your code work - it's about making it understandable. In
this comprehensive guide, we'll explore the essential naming conventions that can transform your JavaScript code from
merely functional to professionally polished.

## Why Naming Matters in JavaScript

Every time you write code, you're not just writing it for the computer - you're writing it for other developers (
**including your future self** ). Good naming conventions serve as a form of documentation, making your code
self-explanatory
and reducing the cognitive load required to understand it.

## Core Principles of JavaScript Naming

### 1. Consistency Is Key

The most fundamental rule of naming in JavaScript is maintaining consistency throughout your project. Whether you choose
camelCase or snake_case, stick to it. Here's why:

- Reduces cognitive overhead for developers
- Makes code more predictable
- Simplifies maintenance and refactoring
- Improves team collaboration

### 2. Language Matters

While JavaScript is flexible enough to allow variable names in any language, stick to English. This ensures:

- Universal code readability
- Easier collaboration with international teams
- Better integration with existing codebases

### 3. The Case for Different Cases

JavaScript uses multiple naming conventions depending on the context:

- `camelCase` for variables, functions, and methods (e.g., when you need to [capitalize the first letter of a string](/snippets/how-to-capitalize-first-letter-of-string-in-javascript), the function name follows camelCase)
- `PascalCase` for classes and constructor functions
- `UPPER_SNAKE_CASE` for constants
- `kebab-case` typically for CSS classes and HTML attributes

JavaScript’s built-in APIs use camelCase (e.g., getElementById), PascalCase for classes (e.g., Date), and
UPPER_SNAKE_CASE for constants (e.g., Math.PI). Align your code with these patterns.

## Practical Naming Guidelines

### Variables and Functions

#### Boolean Variables

Boolean variables should start with an affirmative prefix, typically 'is' or 'has':

```javascript
// Bad ❌
const active = true;
const notAllowed = !user.checkAccess();

// Good ✅
const isActive = true;
const hasPermission = user.checkAccess();
```

> Another thing to remember at the conference is that the affirmative prefix shouldn't include a negation. This is
> because the negation operator (!) is most commonly used with Boolean values. So, a value named something like '
> isNotAllowed' with the negation applied to it, '!isNotAllowed', can be quite misleading.

Naming recommendations for Boolean from [W3C](https://w3ctag.github.io/design-principles/#naming-booleans).

#### Functions and Methods

Function names should be verbs that clearly describe their action:

```javascript
// Bad ❌
function userData() {}

function total() {}

// Good ✅
function getUserData() {}

function calculateTotal() {}
```

### Collections and Arrays

Use plural nouns for arrays and collections:

```javascript
// Bad ❌
const userRoleList = ['admin', 'editor', 'viewer'];
const activeUserArr = new Set();

// Good ✅
const userRoles = ['admin', 'editor', 'viewer'];
const activeUsers = new Set();
```

### Classes and Objects

#### Class Names

Classes should use PascalCase and be noun phrases:

```javascript
// Bad ❌
class userService {
  constructor() {}
}

// Good ✅
class UserService {
  constructor() {}
}
```

#### Class Members

Avoid repeating the class name in member names:

```javascript
// Bad ❌
class UserProfile {
  updateUserProfile() {}

  deleteUserProfile() {}
}

// Good ✅
class UserProfile {
  update() {}

  delete() {}
}
```

### Constants and Enums

#### Constants

Use UPPER_SNAKE_CASE for true constants:

```javascript
// Bad ❌
const maxRetryAttempts = 3;
const apiBaseUrl = 'https://api.example.com';

// Good ✅
const MAX_RETRY_ATTEMPTS = 3;
const API_BASE_URL = 'https://api.example.com';
```

#### Enums

Use PascalCase for enum names and UPPER_SNAKE_CASE for enum values:

```javascript
// Bad ❌
const userRoles = {
  admin: 'admin',
  editor: 'editor',
  viewer: 'viewer'
};

// Good ✅
const UserRole = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer'
};
```

#### Maps

Also known as a dictionary data structure. This data structure is used for mapping one value to another.

```javascript
// Bad ❌
const userRole = {
  [AccountType.SUPERVISOR]: 'Supervisor',
  [AccountType.VISITOR]: 'Visitor',
}

const REDIRECTING = {
  '/teams': '/supervisor-panel',
  '/account': '/authenticate',
}

const UserPermissions = {
  [AccountType.SUPERVISOR]: [AccessLevel.USER_ADMINISTRATION, AccessLevel.TEAM_ADMINISTRATION],
  [AccountType.VISITOR]: [AccessLevel.PROFILE_MANAGEMENT],
}

// Good ✅
const userRoleToReadable = {
  [AccountType.SUPERVISOR]: 'Supervisor',
  [AccountType.VISITOR]: 'Visitor',
}

const pagePathToRedirectPath = {
  '/teams': '/supervisor-panel',
  '/account': '/authenticate',
}

const userRoleToPermissions = {
  [AccountType.SUPERVISOR]: [AccessLevel.USER_ADMINISTRATION, AccessLevel.TEAM_ADMINISTRATION],
  [AccountType.VISITOR]: [AccessLevel.PROFILE_MANAGEMENT],
}
```

## Common Pitfalls to Avoid

### 1. Including Types in Names

```javascript
// Bad ❌
const userArray = ['John', 'Jane'];
const nameString = 'John';

// Good ✅
const users = ['John', 'Jane'];
const name = 'John';
```

### 2. Ambiguous Abbreviations

```javascript
// Bad ❌
const usr = getUser();
const pwd = 'secret';

// Good ✅
const user = getUser();
const password = 'secret';
```

### 3. Inconsistent Naming Patterns

```javascript
// Bad ❌
const get_user = () => {};
const fetchData = () => {};
const retrieve_info = () => {};

// Good ✅
const getUser = () => {};
const fetchData = () => {};
const retrieveInfo = () => {};
```

### 4. Different Languages

```javascript
// Bad ❌
const ユーザー名 = "John";

// Good ✅
const userName = "John";
```

## Types & Interfaces

Names of types and interfaces should be written in `PascalCase` notation.

```typescript
// Bad  ❌
type TUser = {
  firstName: string
  lastName: string
}

interface userServiceInterface {
  findByEmail: (email: string) => User
}

// Good ✅
type User = {
  firstName: string
  lastName: string
}

interface UserServiceContract {
  findByEmail: (email: string) => User
}

interface IUserService {
  findByEmail: (email: string) => User
}
```

> When engineering teams choose to leverage both class-based types and abstract definitions within the same project, best practices suggest adding a distinguishing marker to the abstract definitions. Common prefix choices include `T` and `Contract`.

## Tools for Maintaining Naming Conventions

To help maintain consistent naming conventions, consider using:

1. [ESLint](https://eslint.org/) with naming convention rules
2. [Prettier](https://prettier.io/) for consistent formatting
3. IDE extensions for code style enforcement
4. Team code review guidelines focused on naming

## Time-Tested Naming Conventions

- [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html#naming)
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript?tab=readme-ov-file#naming-conventions)

## Conclusion

Good naming conventions are more than just style preferences - they're a fundamental aspect of writing maintainable,
professional JavaScript code. By following these conventions consistently and thoughtfully, you'll create code that's
easier to understand, maintain, and debug.

Remember, the goal isn't to follow these rules blindly, but to use them as guidelines to write more readable and
maintainable code. The best naming convention is one that your entire team understands and follows consistently.

## Related

- [CSS Class Naming Conventions](/blog/class-naming-conventions) - BEM methodology for HTML/CSS
- [Common CSS Class Names](/snippets/common-css-classes) - practical BEM class name examples


Master JavaScript naming conventions with this guide. Learn best practices for naming variables, functions, and classes to write cleaner code.

JavaScript Naming Conventions: A Complete Guide for Clean Code


Hey there, TypeScript fans!

Ever found yourself wrestling with complex types and wishing there was a better way? Well,
buckle up, because we're about to dive into the world of discriminated unions. 🚀

## What Are Discriminated Unions?

Okay, so `discriminated unions` sounds like some fancy computer science term (and yeah, it kind of is), but don't let
that scare you off. Think of them as TypeScript's way of saying, "Hey, this thing can be one of these specific types,
and here's an easy way to figure out which one it is."

It's like having a box of assorted candies, but each candy has a little flag sticking out of it telling you what flavor
it is 🍭. That flag? That's our discriminant. Neat, right?

## How to Create a Discriminated Union

Let's break it down into easy steps:

1. Come up with the different "flavors" your type can be.
2. Give each flavor a special property (our little flag) that says what it is.
3. Throw them all together into one super-type.

Here's what it looks like in action:

```typescript
interface Taco {
  kind: "taco";
  shells: number;
}

interface Burrito {
  kind: "burrito";
  length: number;
}

interface Nachos {
  kind: "nachos";
  toppings: string[];
}

type MexicanFood = Taco | Burrito | Nachos;
```

In this tasty example, `kind` is our special flag (discriminant), and `MexicanFood` is our super-type. Each specific
type
(`Taco`, `Burrito`, `Nachos`) has its own `kind` property that tells TypeScript what it is.

## Why Discriminated Unions Are Awesome

1. **TypeScript becomes psychic**: It can magically figure out which specific type you're dealing with. No more guessing
   games!

2. **Your code tells a story**: Anyone reading your code can quickly understand what's going on. It's like leaving good
   comments, but better.

3. **Catch mistakes before they happen**: TypeScript can warn you if you forget to handle a case. It's like having a
   really attentive proofreader.

4. **Your IDE becomes smarter**: Better autocomplete suggestions? Yes, please!

## Discriminated Unions in Action

Let's see how we can use our `MexicanFood` type:

```typescript
function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      return food.shells * 200; // TypeScript knows it's a Taco!
    case "burrito":
      return food.length * 100; // It's definitely a Burrito here
    case "nachos":
      return food.toppings.length * 50; // Nacho time!
  }
}
```

TypeScript's got your back here. It knows exactly what properties are available in each case. Pretty cool, huh?

## Pro Tip: Don't Forget Any Cases!

Want to make sure you've covered all your cases? Here's a neat trick:

```typescript
function assertNever(x: never): never {
  throw new Error("Unexpected food: " + x);
}

function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      return food.shells * 200;
    case "burrito":
      return food.length * 100;
    case "nachos":
      return food.toppings.length * 50;
    default:
      return assertNever(food); // TypeScript will complain if you miss a case
  }
}
```

> We will discuss the `assertNever` function in a future post.

If you add a new type of food but forget to update `getCalories`, TypeScript will give you a heads-up. It's like having
a friendly reminder bot!

## Discriminated Unions of Tuples

Sometimes, you might want to use a discriminated union with tuples. Here's how you can do it:

```typescript
type User = { id: number, name: string }; // User type
type APIResponse = [success: true, data: User] | [success: false, error: string]; // Tuple type

function handleResponse(response: APIResponse): void {
  const [success, data] = response;

  if (success) {
    const { id, name } = data; // TypeScript knows it's a User!
    console.log(`User ${name} with ID ${id} found!`);
  } else {
    //  TypeScript knows it's an error string!
    console.error(`Error: ${data}`);
  }
}
````


## Discriminated Unions and Destructuring
Discriminated unions are awesome, but they're not perfect. One of the main drawbacks is that you can't use them with destructuring.

```typescript
function getCalories({ kind, shells, length, toppings }: MexicanFood): number {
  // Error: Property 'shells' does not exist on type 'MexicanFood'.
  // Error: Property 'length' does not exist on type 'MexicanFood'.
  // Error: Property 'toppings' does not exist on type 'MexicanFood'.
}
```

So, if you need to destructure your object, you'll have to do it the more explicit way:

```typescript
function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      const { shells } = food; // TypeScript knows it's a Taco! And you can destructure here
      return shells * 200;
    case "burrito":
      const { length } = food;
      return length * 100;
    case "nachos":
      const { toppings } = food;
      return toppings.length * 50;
  }
}
```

## Wrapping Up

[Discriminated unions](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions) in TypeScript are like the Swiss Army knife of type management. They help you write code that's
easier to understand, harder to mess up, and just plain cooler.

Next time you're dealing with a bunch of related but different types, give discriminated unions a shot. Your future
self (and your teammates) will thank you!

Happy coding, and may your types always be discriminated! 🚀✨

## Related

- [Branded Types in TypeScript](/snippets/branded-types) - another pattern for type-safe identifiers
- [Type Predicates](/snippets/type-predicates) - use type predicates to narrow discriminated unions at runtime
- [Generic Type Parameters](/blog/generic-type-parameters) - combine generics with unions for flexible APIs


Discover how discriminated unions in TypeScript help you write cleaner, safer code. Learn what they are, how to use them, and why they're great!

Discriminated Unions in TypeScript: Write Safer Code


<Image src="astro-image-error.png" alt="MissingSharp Could not find Sharp error in Astro.js Vercel build logs" />

## TL;DR

Install Sharp and configure `sharpImageService` in your [Astro](/blog/astro) config. This resolves the `[MissingSharp] Could not find Sharp` error on Vercel and other platforms that don't bundle Sharp by default.

## The Error

You run `astro build` or deploy to Vercel, and the build fails with:

```bash
[MissingSharp] Could not find Sharp.
Please install Sharp (`sharp`) manually into your project.
```

This is one of the most common Astro deployment errors. It works locally but fails on Vercel — a classic "works on my machine" problem.

You'll see this error in:

- **Vercel build logs** during deployment
- **`astro build`** output in CI/CD pipelines
- Any environment where Sharp's native binaries aren't available

## Quick Solution

Two steps — configure the image service and install Sharp:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService(),
  },
});
```

```bash
# Install Sharp as a direct project dependency
pnpm add sharp
```

Verify the fix locally before deploying:

```bash
# Build locally to confirm the error is resolved
pnpm run build
```

Deploy again. The error is gone.

<Image src="astro-image.png" alt="Astro Image component working correctly on Vercel after Sharp fix" />

## Why This Happens

[Sharp](https://www.npmjs.com/package/sharp) is a native Node.js image processor that Astro uses for image optimization at build time. It converts, resizes, and compresses images through the `<Image />` component.

The key issue is that Sharp includes **platform-specific native binaries** (C/C++). In local development, Sharp is resolved from Astro's own internal dependencies — your OS already has the matching binary. But on Vercel and other CI/CD platforms, the build environment may not have the correct Sharp binary for its architecture.

Adding Sharp as a direct dependency with `pnpm add sharp` ensures that your package manager installs the correct platform-specific binary during the build step. Instead of relying on Astro's transitive dependency, Sharp becomes a first-class dependency in your project. This is especially important with strict package managers like [pnpm](/blog/pnpm) that don't hoist transitive dependencies by default.

> For more details, see the [MissingSharp error reference](https://docs.astro.build/en/reference/errors/missing-sharp/) and the original [GitHub issue #5253](https://github.com/withastro/astro/issues/5253).

## Common Variations

The `MissingSharp` error isn't the only image issue you'll hit in Astro. Here are three related errors and their fixes.

### MissingImageDimension

```bash
[MissingImageDimension] Missing width and height attributes
```

This happens with remote or external images. Astro can't determine dimensions at build time for URLs, so you must provide them:

```jsx
// ❌ Missing dimensions for remote image
<Image src="https://example.com/photo.jpg" alt="Photo" />
```

```jsx
// ✅ Explicit width and height for remote images
<Image
  src="https://example.com/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
/>
```

### RemoteImageNotAllowed

```bash
[RemoteImageNotAllowed] Remote image is not allowed
```

Astro blocks remote images from domains not in your allowlist. Add the domain to your config:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService(),
    domains: ['example.com', 'cdn.example.com'],
  },
});
```

### ImageMissingAlt

```bash
[ImageMissingAlt] Image missing required "alt" property
```

Astro enforces accessibility. Every `<Image />` needs an `alt` attribute — use `alt=""` for purely decorative images:

```jsx
// ❌ No alt attribute
<Image src={hero} />
```

```jsx
// ✅ Descriptive alt text
<Image src={hero} alt="Dashboard showing analytics overview" />
```

## Astro Image Best Practices

- **Use `<Image />` instead of `<img>`** — Astro's component handles optimization, format conversion, and [lazy loading](/snippets/lazy-loading-images-with-intersection-observer) automatically
- **Use the `densities` prop** for responsive DPI support — `densities={[1, 2]}` generates 1x and 2x variants
- **Leave `quality` at the default** — Astro's defaults balance size and clarity well. Override only when you need lossless (`quality="max"`) or aggressive compression
- **Allowlist domains for remote images** — add them to `image.domains` and always provide `width` + `height`
- **Test `astro build` locally before deploying** — catch image errors early instead of debugging failed Vercel builds
- **Configure global Sharp defaults** (Astro 6.1+) — set codec-specific options once in your config instead of on every image:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService({
      webp: { quality: 80 },
      avif: { quality: 65 },
    }),
  },
});
```

> Read more in the [Astro Image docs](https://docs.astro.build/en/guides/images/).

## Related Articles

- [Astro Framework Guide](/blog/astro) — comprehensive introduction to Astro
- [Build a Link Tree with Astro.js](/blog/linktree) — the project where I first hit this error


Fix the [MissingSharp] Could not find Sharp error when deploying Astro.js to Vercel. Step-by-step Sharp image service setup and configuration guide.

Fix: Could not find Sharp in Astro.js (Vercel Deploy)

<Image src="linktree.jpeg" alt="Custom link tree built with Astro.js" priority />

**1 hour** of work and I had my own link tree with Astro.js and Vercel on a custom subdomain — faster than any Linktree
plan, and fully under my control.

Check out the final result: [links.shramko.dev](https://links.shramko.dev/)

## TL;DR

We're building a link tree website with Astro.js and deploying it to Vercel — a simple beginner project that takes about
an hour.

- **Stack**: Astro 6 + TypeScript + Vercel
- **Result**: A static site with 100/100 Lighthouse scores
- **Features**: Typed link data, image optimization, Vercel Analytics, custom subdomain

## Why Astro.js?

I [wrote a comprehensive guide about Astro](/blog/astro), and its zero-JS-by-default approach makes it perfect for a
link tree. A link tree is static content — no React runtime needed.

Astro ranked [#1 in satisfaction](https://2025.stateofjs.com/en-US/libraries/meta-frameworks/) among meta-frameworks in
the State of JS 2025 survey. For a project like this, the results speak for themselves:

<Image src="lighthouse.png" alt="100/100 Lighthouse scores for links.shramko.dev" />

**Why the scores are high:** Astro ships zero JavaScript by default. Your link tree is pure HTML and CSS — no framework
bundle, no hydration delay. Combined with Vercel's edge CDN, the page loads in under 200ms.

## Setting Up the Project

```bash
# Create a new Astro project
pnpm create astro@latest
```

I use [pnpm](/blog/pnpm) as my package manager, but `npm` or `yarn` work fine too.

## Data Structure with TypeScript

Define a typed interface for your links and store them in a JSON file:

```typescript:types.ts
interface SocialLink {
  url: string;
  icon: string;
  title: string;
  description: string;
}

interface UserData {
  name: string;
  profession: string;
  links: SocialLink[];
}
```

```json:data/user.json
{
  "name": "Serhii Shramko",
  "profession": "Senior Software Engineer",
  "links": [
    {
      "url": "https://shramko.dev/",
      "icon": "url",
      "title": "Personal Portfolio",
      "description": "All my latest news and blog posts"
    },
    {
      "url": "https://github.com/Shramkoweb",
      "icon": "github",
      "title": "Github Profile",
      "description": "My Github"
    }
  ]
}
```

This approach separates data from markup — add, remove, or reorder links by editing JSON, not HTML.

## Layout and Components

Astro's [file-based routing](/blog/astro#file-based-routing) keeps the structure simple. One page, a few components:

```jsx:pages/index.astro
---
import Layout from '../layouts/Layout.astro';
import Profile from '../components/Profile.astro';
import List from '../components/List.astro';
---

<Layout title="Link tree | Serhii Shramko">
  <main class="container" id="container">
    <Profile />
    <List />
  </main>
</Layout>
```

Each link is a typed component that renders an icon, title, and description:

```jsx:components/Link.astro
---
interface Props {
  icon: string;
  title: string;
  description: string;
  url: string;
}

const { icon, title, description, url } = Astro.props;
---

<a href={url} class="link" target="_blank" rel="noopener noreferrer">
  <span class="link__icon">
    {icon === 'github' && <Github />}
    {icon === 'linkedin' && <Linkedin />}
    {icon === 'url' && <Url />}
    {icon === 'youtube' && <Youtube />}
  </span>

  <div class="link__content">
    <h2 class="link__title">{title}</h2>
    <p class="link__description">{description}</p>
  </div>
</a>
```

Astro lets you create components from inline SVG. Each icon is its own `.astro` file — clean, tree-shakeable, and no
icon library needed:

```jsx:components/icons/Github.astro
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
</svg>
```

## SEO and Meta Tags

Even a simple link tree benefits from proper meta tags. Add OpenGraph and social sharing tags in your layout:

```jsx:layouts/Layout.astro
---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content="Serhii Shramko — links to portfolio, blog, GitHub, and social profiles." />

    
    <meta property="og:title" content={title} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://links.shramko.dev/" />
    <meta property="og:image" content="https://links.shramko.dev/og-image.png" />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  </head>
  <body>
    <slot />
  </body>
</html>
```

Since Astro outputs static HTML, search engines get a fully-rendered page with zero layout shift — great
for [Core Web Vitals and SEO](/blog/ai-seo-audit).

## Analytics

Add [Vercel Web Analytics](https://vercel.com/docs/analytics) to track page views without slowing down your site. The
analytics script is only 1.1KB.

For a static site, you only need the `@astrojs/vercel` adapter if you want to use Vercel services like analytics:

```bash
pnpm add @astrojs/vercel
```

```typescript:astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  adapter: vercel({
    webAnalytics: { enabled: true },
  }),
});
```

> **Note:** `output` defaults to `'static'` in Astro — no need to set it explicitly. A link tree doesn't need SSR.

<Image src="astro-analytics.jpg" alt="Vercel Analytics dashboard showing link tree traffic" />

Enable Analytics in your Vercel dashboard under Project Settings → Analytics.

## Deploying to Vercel

[Vercel auto-detects Astro projects](https://vercel.com/docs/frameworks/frontend/astro) and configures the build
settings:

1. Push your project to a GitHub repository
2. Connect your Vercel account to GitHub
3. Click "New Project" and select your repository
4. Vercel detects Astro and suggests the correct build settings
5. Click "Deploy" — done

## Custom Domain

<Image src="vercel-domain.jpg" alt="Custom subdomain configuration on Vercel dashboard" />

1. In Vercel project settings, go to the **Domains** section
2. Add your subdomain: `links.shramko.dev`
3. Vercel automatically configures the DNS records

For a subdomain, add a CNAME record pointing to `cname.vercel-dns.com` in your domain registrar.

## Common Mistakes

### Using SSR when static is enough

I [did this mistake](https://github.com/Shramkoweb/linkt-tree/commit/aa6ec4eb384007efe924ce55265919e9ae135d0f)
before =)

```typescript
// ❌ Unnecessary server-side rendering for a link tree
export default defineConfig({
  output: 'server',
  adapter: vercel(),
});
```

```typescript
// ✅ 
export default defineConfig({
  adapter: vercel({
    webAnalytics: { enabled: true },
  }),
});
```

### Not optimizing images

Use Astro's `<Image />` component instead of `<img>` for automatic optimization. If you hit the `[MissingSharp]` error
on Vercel, see my [guide to fixing it](/blog/astro-image-on-vercel).

### Missing OpenGraph meta tags

Without OG tags, links shared on social media show a blank preview. Always include `og:title`, `og:image`, and
`og:description` in your layout.

## Related Articles

- [Astro Framework Guide](/blog/astro) — comprehensive introduction to Astro 6
- [Fix: Could not find Sharp in Astro.js](/blog/astro-image-on-vercel) — resolve the MissingSharp error on Vercel

Build a custom link tree with Astro.js and deploy it on Vercel. Step-by-step tutorial with TypeScript, analytics setup, and performance optimization tips.

Build a Link Tree with Astro.js and Vercel (2026 Guide)


<Image src="conventional-commits.jpg" alt="Git commit history with colorful branch graph showing conventional commit messages in a dark IDE" />

I first came across Conventional Commits during my time at [MacPaw](/about), but initially, I didn't give much thought
to these unique commit messages.
It wasn't until recently that I took a closer look and realized how much more efficient and organized they make the
development process.

Here’s why you might want to give them a try too! 😃

## What Are Conventional Commits?

Conventional Commits is a specification that provides a simple, structured convention for commit messages.
It allows you to write messages that are easy to read and maintain, and which convey the specific intent behind each
change.

The conventional commit message format is straightforward. It starts with a **type**, optionally followed by a **scope
**, and a
short **description**. For example:

```bash
feat(login): add authentication with JWT
```

In this example:

- `feat` is the type of the commit, indicating a new feature.
- `login` is the scope, specifying the part of the project that is affected.
- `add authentication with JWT` is the short description of the change.

## Why Use Conventional Commits?

Using Conventional Commits offers several key benefits:

- `Consistency`: Standardized commit messages ensure that everyone on the team follows the same format, which enhances
  readability and reduces ambiguity.
- `Automation`: Tools can automatically generate change logs, version numbers, and releases based on the structured
  commit messages.
- `Collaboration`: Clear and descriptive commit messages help team members understand the history and context of
  changes, improving collaboration.
- `Compliance`: Adhering to a standardized format helps in meeting the guidelines and best practices of many open-source
  projects.

## Types of Conventional Commits

There are several predefined types of Conventional Commits that help categorize the nature of each change. Each type
indicates a specific kind of modification, making it easier to understand the impact of the commit. Here are the most
commonly used types:

- **feat**: A new feature for the user.
- **fix**: A bug fix for the user.
- **chore**: Changes that don't modify src or test files, such as updating build tasks.
- **docs**: Documentation-only changes.
- **style**: Changes that do not affect the meaning of the code (e.g., formatting, missing semicolons, etc.).
- **refactor**: A code change that neither fixes a bug nor adds a feature.
- **perf**: A code change that improves performance.
- **test**: Adding or updating tests.
- **build**: Changes that affect the build system or external dependencies (e.g., gulp, npm).
- **ci**: Changes to CI configuration files and scripts (e.g., CircleCI, Travis).
- **revert**: Reverts a previous commit.

## Cheat Sheet for Conventional Commits

<Image src="conventional-commits-cheatsheet.png" alt="Conventional Commits cheatsheet table listing commit types: feat, fix, chore, docs, style, refactor, perf, test, build, ci, and revert with descriptions and examples" />

| Type     | Description                | Example                          |
|:---------|:---------------------------|:---------------------------------|
| feat     | New feature                | feat(ui): add dark mode          |
| fix      | Bug fix                    | fix(api): resolve login issue    |
| docs     | Documentation only changes | docs(readme): update setup guide |
| style    | Code style changes only    | style(css): format CSS classes   |
| refactor | Code refactoring           | refactor(auth): optimize logic   |
| perf     | Performance improvement    | perf(database): optimize queries |
| test     | Adding tests               | test(routes): add unit tests     |
| chore    | Build tool/config changes  | chore(deps): bump dependencies   |
| ci       | Continuous Integration     | ci(travis): update config        |
| revert   | Revert previous commit     | revert: rollback last change     |

## Leveraging AI with Conventional Commits

AI-powered IDEs like **JetBrains'** suite of tools enhance your workflow by intelligently suggesting commit messages
that
adhere to Conventional Commits standards. These suggestions are contextually generated based on changes you've made,
significantly streamlining the process and reducing the cognitive load of writing detailed commit messages.

### AI-Powered IDEs and Conventional Commits

JetBrains IDEs, such as IntelliJ IDEA and WebStorm, integrate [AI tools](https://www.jetbrains.com/ai-assistant/) that:

- Automatically suggest precise commit messages.
- Detect commit types (feat, fix, docs, etc.) based on changes.
- Recommend appropriate scopes, improving accuracy and efficiency.

## Examples of Conventional Commits

Understanding the theory behind Conventional Commits is one thing, but seeing how they are applied in real-world
scenarios can be extremely helpful. Below are some examples illustrating how to write effective, clear, and standardized
commit messages.

> Here is an example of commits from [my GitHub](https://github.com/Shramkoweb/Portfolio/commits/develop/)

### Example 1: Adding a New Feature

**Commit Message**:

```bash
feat(auth): add OAuth 2.0 authentication
```

**Explanation**:

**Type**: `feat` (indicates a new feature). <br/>
**Scope**: `auth` (specifies that the change is related to authentication). <br/>
**Description**: `add OAuth 2.0 authentication` (brief summary of the change).

### Example 2: Fixing a Bug

**Commit Message**:

```bash
fix(profile): resolve issue with avatar upload
```

**Explanation**:

**Type**: `fix` (indicates a bug fix). <br/>
**Scope**: `profile` (specifies that the change affects the profile feature). <br/>
**Description**: `resolve issue with avatar upload` (briefly describes the problem and solution).

### Example 3: Updating Documentation

**Commit Message**:

```bash
docs(readme): update installation instructions
```

**Explanation**:

**Type**: `docs` (indicates a documentation change). <br/>
**Scope**: `readme` (specifies the README file). <br/>
**Description**: `update installation instructions` (details the specific update).

### Example 4: Refactoring Code

**Commit Message**:

```bash
refactor(utils): simplify the date parsing logic
```

**Explanation**:

**Type**: `refactor` (indicates a code change that neither fixes a bug nor adds a feature). <br/>
**Scope**: `utils` (specifies that the change pertains to utility functions). <br/>
**Description**: `simplify the date parsing logic` (briefly describes the refactoring).

### Example 5: Performance Improvement

**Commit Message**:

```bash
perf(db): optimize query execution time
```

**Explanation**:

**Type**: `perf` (indicates a performance improvement). <br/>
**Scope**: `db` (specifies that the change affects the database). <br/>
**Description**: `optimize query execution time` (summarizes the performance enhancement).

### Example 6: Adding or Updating Tests

**Commit Message**:

```bash
test(router): add unit tests for routing module
```

**Explanation**:

**Type**: `test` (indicates test-related changes). <br/>
**Scope**: `router` (specifies the routing module). <br/>
**Description**: `add unit tests for routing module` (briefly describes the tests added).

### Example 7: Maintenance or Chore

**Commit Message**:

```bash
chore(deps): upgrade lodash to version 4.17.21
```

**Explanation**:

**Type**: `chore` (indicates maintenance or chores). <br/>
**Scope**: `deps` (specifies that the change pertains to dependencies). <br/>
**Description**: `upgrade lodash to version 4.17.21` (details the specific update).

### Example 8: Continuous Integration Configuration

**Commit Message**:

```bash
ci(circleci): add build step for linting
```

**Explanation**:

**Type**: `ci` (indicates changes to CI configuration). <br/>
**Scope**: `circleci` (specifies the CI service being configured). <br/>
**Description**: `add build step for linting` (briefly describes the new CI step).

### Example 9: Reverting a Previous Commit

**Commit Message**:

```bash
revert: remove OAuth 2.0 authentication

This reverts commit abc123.
```

**Explanation**:

**Type**: `revert` (indicates the commit is a revert). <br/>
**Scope**: None (reverts don't usually need a scope). <br/>
**Description**: `remove OAuth 2.0 authentication` (describes what is being reverted).
Body: This reverts commit abc123. (provides context by specifying the commit being reverted).

## Using Conventional Commits in Projects

Incorporating Conventional Commits into your projects can significantly improve code quality and team collaboration.
Here’s a step-by-step guide on how to start using Conventional Commits in your projects.

### Step 1: Educate Your Team

Before adopting Conventional Commits, ensure that everyone on your team understands its benefits and guidelines. Share
resources, conduct workshops, or organize short training sessions to help everyone get up to speed.

### Step 2: Set Up Commit Message Linting

To enforce the Conventional Commits standard, you can use tools
like [commitlint](https://github.com/conventional-changelog/commitlint) and [husky](https://typicode.github.io/husky/).
These tools help ensure that
all commit messages adhere to the predefined format.

Example Configuration:

#### Install Dependencies:

```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli husky
```

#### Configure Commitlint:

Create a new file named `commitlint.config.js` in the root of your project and add the following content:

```js
module.exports = {
  extends: ['@commitlint/config-conventional'],
};
```

#### Set Up Husky Hooks:

The `init` command simplifies setting up husky in a project. It creates a `pre-commit` script in `.husky/` and updates
the prepare script in `package.json`. Modifications can be made later to suit your workflow.

```bash
npx husky init
```

### Step 3: Use Tools and Libraries

Conventional commits can be parsed by tools, and a very nice use-case is that of generating release changelogs.

<Image src="changelog.png" alt="Auto-generated CHANGELOG v4.1.0 on GitHub showing categorized features and bug fixes from conventional commits" />

#### Semantic Release:

- Automates the whole package release workflow including determining the next version number, generating the release
  notes, and publishing the package.
- [Semantic Release Documentation](https://semantic-release.gitbook.io/semantic-release)

#### Commitizen:

- A tool that prompts you to fill out the commit message with a CLI, ensuring you follow the Conventional Commits
  standard.
- [Commitizen Documentation](https://github.com/commitizen/cz-cli)

### Step 4: Continuous Integration and Continuous Deployment (CI/CD)

Integrate Conventional Commits with your `CI/CD` pipeline to automate tasks such as generating changelogs and
versioning.

Here’s how you can do it:

#### Changelog Generation:

- Use tools like standard-version to generate changelogs automatically.
- [Standard Version Documentation](https://github.com/conventional-changelog/standard-version)

#### Versioning and Releasing:

- Automate versioning and releasing using tools like Semantic Release.
- Define release steps in your CI configuration (e.g., GitHub Actions, Travis CI).

Example GitHub Actions Configuration for Semantic Release:

```yaml
name: Release
on:
  push:
    branches:
      - main
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14
      - name: Install Dependencies
        run: npm install
      - name: Run Semantic Release
        run: npx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

## Conclusion

I hope this blog post has inspired you to delve into conventional commits.

Initially, conventional commits might seem a bit odd, and you might find yourself questioning the format as you make
commits. However, they soon become second nature, and you'll appreciate their impact on your software engineering
practices.

> Conventional commits pair well with [Semantic Versioning](/blog/npm-semantic-versioning) for automated package
> releases.

Looking for more productivity wins? I also wrote about why you should [unsubscribe from email newsletters immediately](/blog/unsubscribe-immediately) to stay focused.


Master Conventional Commits to write clear, structured commit messages. Learn the format, types like feat and fix, and how to automate changelog generation.

Conventional Commits enhance your coding practices


## Introduction

<Image src="pnpm-logo.png" alt="pnpm logo on gray background" />

I found an article from Vercel
about [Projects using pnpm can now be deployed with zero configuration](https://vercel.com/changelog/projects-using-pnpm-can-now-be-deployed-with-zero-configuration)
and I wanted to try it.

## Why Migrate to pnpm?

Before diving into the migration process, it’s important to understand why pnpm is beneficial:

1. **Speed** 🚀: pnpm installs dependencies faster than npm by using a unique package linking mechanism.
2. **Disk Space** 🔎: It saves disk space by using a global store and hard links.
3. **Consistency** 💡: pnpm ensures that dependencies are installed in a way that is more consistent with the version
   specified in your `package.json`.

## Installation of pnpm

First, you need to install pnpm globally. Make sure you have the right Node.js version installed — if you manage multiple versions, [NVM](/blog/nvm) makes switching between them effortless. Then run:

```bash
brew install pnpm
```

## Migration Steps

### 1. Clean the Project

Remove the `node_modules` directory and the `package-lock.json` file. This step is crucial to ensure that there are no
leftover artifacts from npm that might interfere with pnpm.

```bash
rm -rf node_modules package-lock.json
```

### 2. Initialize pnpm

Run the following command to initialize pnpm in your project directory:

```bash
pnpm install
```

This command will create a `pnpm-lock.yaml` file and install all the dependencies listed in your `package.json`.
Understanding [how semantic versioning works in npm](/blog/npm-semantic-versioning) will help you predict exactly what gets installed.

### 3. Verify Dependency Installation

Check that all dependencies have been installed correctly by running:

```bash
pnpm list
```

This command lists all the installed dependencies and their versions. Make sure that there are no missing or outdated
packages.

<Image src="pnpm-list.png" alt="pnpm list command result in terminal" />

## Updating Scripts

### 1. Update npm Scripts

In your `package.json`, update any npm scripts to use pnpm where necessary. For example, if you have a script for
installing dependencies, change it from:

```json
"scripts": {
"install": "npm install"
}
```

to:

```json
"scripts": {
"install": "pnpm install"
}
```

### 2. Update CI/CD Pipelines

If your project uses CI/CD pipelines, ensure that the build scripts and installation commands are updated to use pnpm.
For example, in a [GitHub Actions  with pnpm](https://pnpm.io/continuous-integration) workflow, you might update the
step as follows:

```yaml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - name: Install
        run: pnpm i
      - name: Run Tests // All your CI commands
        run: pnpm run test
```

## Handling Issues and Troubleshooting

During the migration, you might encounter some issues.

> Error: Unable to locate executable file: pnpm. Please verify either the file path exists or the file can be found
> within a directory specified by the PATH environment variable. Also check the file mode to verify the file is
> executable.

I stuck with this error when I tried to run the `pnpm` command in GitHub Actions.

The solution was to use the `pnpm/action-setup@v4` before `actions/setup-node@v4`.
So simply just copy the [above code](#2-update-cicd-pipelines) and paste it in your `.yml` file.

## Conclusion

This migration helped me to reduce the time of deployment by **44%** and the size of `node_modules` by **5%**.

<Image src="vercel-deployment.png" alt="Vercel deployment dashboard showing build time of approximately one second after migrating to pnpm" />

More info how my blog works you can find there [How my site works under the hood](/blog/introducing-the-new-shramko.dev)


Migrate from npm to pnpm and cut your deployment time by 44%. Step-by-step guide covering installation, lockfile conversion, and CI/CD configuration.

Migrate from npm to pnpm – Save Time with This Guide


<Image src="keys.jpg" alt="Keys on white background" />

Hello everyone!

Today, we are going to walk through the process of adding [SSH keys](https://www.ssh.com/academy/ssh-keys) to a GitHub
account using the modern and secure ed25519 algorithm.

Before we begin, make sure you have Git installed on your system. If you haven't done this already, head over to
the [Git website](https://git-scm.com/install/), download the latest version, and install it.

Here is a step-by-step guide:

### Step 1: Checking for Existing SSH keys

Before creating new SSH keys, check if you already have any pre-existing keys. Open your Git terminal or command line
and type:

```bash
$ ls -al ~/.ssh
```

<Image src="ssh.jpg" alt="macOS terminal with .ssh folder" />

This command lists all the files in your .ssh directory. If you don't find any, you can proceed to generate a new one.

Your SSH keys might use one of the following algorithms:

- ⛔️ DSA: It's unsafe and even no longer supported since OpenSSH version 7, you need to upgrade it!
- 🥴 RSA: It depends on key size. If it has 3072 or 4096-bit length, then you're good. Less than that, you probably want
  to upgrade it. The 1024-bit length is even considered unsafe.
- 👌 ECDSA: It depends on how well your machine can generate a random number that will be used to create a signature.
  There's also a trustworthiness concern about the NIST curves that are being used by ECDSA.
- 🥳 Ed25519: It's the most recommended public-key algorithm available today! This is what we'll use in this guide.

### Step 2: Generating a New SSH key

In your terminal, paste the following command:

```bash
$ ssh-keygen -t ed25519 -C "shramko.dev@gmail.com"
```

Replace `shramko.dev@gmail.com` with the email address you used to create your GitHub account. Then, you will be
prompted to "Enter a file in which to save the key," - press Enter to accept the default file location.

**Note:** If you're using a legacy system that doesn't support ed25519, you can use RSA with 4096 bits instead:

```bash
$ ssh-keygen -t rsa -b 4096 -C "shramko.dev@gmail.com"
```

### Step 3: Adding Your SSH key to the ssh-agent

Make sure the `ssh-agent` is running:

```bash
$ eval "$(ssh-agent -s)"
```

Then, add your new SSH key to the ssh-agent:

```bash
$ ssh-add ~/.ssh/id_ed25519
```

Note: If you used RSA instead, replace "id_ed25519" with "id_rsa".

### Step 4: Adding the SSH key to Your GitHub Account

1. Go to your GitHub account settings.
2. Click on 'SSH and GPG keys' in the menu on the left-hand side.
3. Click on 'New SSH Key'.
4. Title it appropriately, then copy the SSH public key to the 'Key' input.

To copy the SSH key, go back to your terminal and type:

```bash
$ clip < ~/.ssh/id_ed25519.pub
```

**For Linux users, use:**
```bash
$ cat ~/.ssh/id_ed25519.pub
```

**For macOS users, you can also use:**
```bash
$ pbcopy < ~/.ssh/id_ed25519.pub
```

Paste the key into the 'Key' input on GitHub, then click 'Add SSH Key'.

### Step 5: Testing the Connection

Return to your terminal and type:

```bash
$ ssh -T git@github.com
```

<Image src="gh.jpg" alt="Testing the Connection with GitHub in macOS terminal" />

You should see a message welcoming you: "Hi [Your GitHub username]! You've successfully authenticated, but GitHub does
not provide shell access."

You've now successfully added a modern, secure ed25519 SSH Key to your GitHub account.

## Related

- [Detect Environment](/snippets/environment) - check the runtime environment before executing commands
- [.gitignore Is Not Enough](/blog/gitignore-is-not-enough) - protect your sensitive files beyond SSH keys
- [Node Version Manager](/blog/nvm) - another essential developer setup step after configuring SSH


Learn how to add SSH keys to your GitHub account. Boost security and ease your workflow by connecting your local machine to GitHub repositories.

Adding SSH Keys to Your GitHub Account


<Image src="browsers.jpg" alt="Different browsers logo on gradient background" />

During site development, we usually test our site only in the browser installed on our computer, but in the world of
browsers there are dozens, and maybe even thousands, of versions.

Therefore, cross-browser development and testing are considered good practice in site development.

## Cross-browser development

Cross-browser development is when your site works not only in the latest Google Chrome, but also in Firefox, Safari,
Opera and Microsoft Edge, plus mobile browsers and tablets.

There are many methods and ways for such development, such
as [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix), [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill),
responsive design and [much more](https://ishadeed.com/article/cross-browser-development/).

I will write about all this in the next article, and today we will talk only about cross-browser testing and tools.

## Cross-browser testing

But how to check that the site you created looks and works the same on different browsers and devices?

The first thought that comes to mind is to install all your browsers on your computer and check everything there, but
there are several limitations here:

- Browser versions ( Usually you install the latest version )
- Operating systems ( You will not be able to install Safari on Windows )
- Devices ( How to check that your site works on an old iPhone )

All these questions are solved by the tools that we will discuss with you today.

## Browserstack

What is Browserstack? It is a cross-browser testing tool that helps us to test our sites on real devices and operating
systems remotely. From Windows to macOS and iPhone.

<Image src="browserstack.jpg" alt="Browserstack main page UI" />

### Device test

Browserstack allows you to test your site on different devices. To do this, it is enough to select the device and
browser you need and that's it, everything is ready for testing.

<Image src="pixel-pro.jpg" alt="Google Pixel 7 testing screen in Browserstack" />


The screenshot shows that the site is not just running in an emulator, but is a real device (Google Pixel 7Pro) with a
serial number.

> Serial Number - 2B101FDH30XXXX

### Testing with different OS

Remember those green fields on the Windows XP? In just a couple of clicks, you can start a real computer
and test your site without installing Windows ☠️.

<Image src="windows-xp.jpg" alt="shramko.dev website on Windows XP" />

### Multi browser testing

If you want to quickly see how the site looks on many devices and browsers, you can
take [screenshots](https://www.browserstack.com/screenshots) of the pages you want.

<img src="/static/images/screenshots.gif" alt="Animated GIF demonstrating cross-browser screenshot comparisons in BrowserStack"/>

Yes, I know that my site does not work on IE. I did it on purpose. [IE 11 Must die](https://death-to-ie11.com/) 👾

### Browserstack developer tools

Sometimes bugs appear in a specific version of a browser or on a device, so you may not only need to look at the site
visually and click on it, but also open the developer tools in the browser and try to find the bug and fix it.

Browserstack can help with this. The DevTools tab opened familiar developer tools such as `Console`, `Network` and
others.

<Image src="dev-tools.jpg" alt="Chrome DevTools open in a browser window showing the Elements panel" />

At this moment, several options are supported on the mobile phone:

- Safari developer tools
- Chrome developer tools

More on the desktop:

- Firefox developer tools
- Safari developer tools
- Chrome developer tools
- Internet Explorer developer tools

### Local testing

It is also possible to launch not only by URL, but also a local site on localhost.

To do this, you need to update the BrowserStackLocal application and follow
the [instructions](https://www.browserstack.com/docs/live/local-testing).

### Browserstack alternatives

Unfortunately, I've only worked with this tool and don't have the experience to recommend anything else, but you can
always [look at the competitors](https://www.g2.com/products/browserstack/competitors/alternatives) and try it
yourself.

## Further reading

- [Introducing the New shramko.dev](/blog/introducing-the-new-shramko.dev) — how I built the blog, including cross-browser testing with BrowserStack
- [Check if an Element Is in the Viewport](/snippets/is-element-in-viewport) — viewport detection snippet useful for debugging layout issues across browsers


Learn how to test your website across different browsers and devices using BrowserStack. Ensure cross-browser compatibility without maintaining a device lab.

Cross-Browser Compatibility – Testing Guide


Very often, cloud database services such as [neon.tech](https://neon.com/) allow you to connect via URL.
That is, without credentials such as `user`, `password`, etc.

## Connection details

### Connection URL

It's [official PostgreSQL format for connection URLs](https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING)

<Image src="postgresql-connection-string.png" priority={true} alt="PostgreSQL connection URL string format showing protocol, user, password, host, port, and database" />

### Base URL and path

Here's an example of a base URL and path structure using uppercase placeholder values:

```text
postgresql://USER:PASSWORD@HOST:PORT/DATABASE
```

<Image src="db-table.png" priority={true} alt="PostgreSQL base URL and path structure with placeholder values for user, password, host, port, and database" />

## How this site connects to the database

### Store your credentials in .env

Store your credentials in your `.env` file.

```shell
PGHOST='<endpoint_hostname>:<port>'
PGDATABASE='<dbname>'
PGUSER='<username>'
PGPASSWORD='<password>'
ENDPOINT_ID='<endpoint_id>'
```

where:

- `endpoint_hostname` the hostname of the branch endpoint. The endpoint hostname has an ep- prefix and appears similar
  to
  this: **ep-tight-salad-272396.us-east-2.aws.neon.tech**
- `dbname` is the name of the database. The default Neon database is neondb
- `user` is the database user
- `password` is the database user's password, which is provided to you when you create a project
- `endpoint_id` is the ID of the branch endpoint that you are connecting to. The endpoint_id has an ep- prefix and
  appears
  similar to this: **ep-tight-salad-272396**

### Use prisma.io to connect Postgres

```js
// You can create DATABASE_URL in your code
const DATABASE_URL = `postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}`;
```

```shell
# Or better to use .env file
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}
```

### Use Datagrip to connect Postgres

You can use the same credentials like `HOST`, `PORT`, `USER`, `PASSWORD`, `DATABASE` for connection to Database with
DataGrip.

<Image src="db-datagrip.png" priority={true} alt="DataGrip connection dialog configured with PostgreSQL credentials" />

## Related

- [Installing PostgreSQL on macOS](/snippets/postgres-install-macos) - step-by-step setup guide
- [SQL Countries Table](/snippets/countries-sql) - ready-to-use seed data for your database


Learn how to connect to PostgreSQL using a connection URL string. Simple guide for Node.js, DataGrip, or any client supporting URL-based database connections.

Use Postgres Connect URLs for DB Connections


<Image src="fruits.png" alt="JavaScript array illustration showing const fruits with six fruit emoji elements and their zero-based index positions" priority={true} />

## Syntax

Arrays are zero-indexed ordered lists of values. They are a convenient way to store a set of related elements of the
same type (such as numbers or strings), although an array can contain multiple types of elements, including other
arrays.

```js
// An array containing numbers
const numberArray = [0, 1, 2, 3, 4, 5];

// An array containing different data types
const mixedArray = [1, 'chicken', false];
```

## Creating an Array

The easiest way to create an array is to use array literals - `[]`, as in the example above.

```js
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];
```

With the Array class by using the new keyword and passing in the elements as arguments:

```js
const fruits = new Array('🍎', '🍐', '🍊', '🍋', '🍉', '🍓');
```

Though, because the effect is exactly the same, it
is [preferable to use the literal method](https://google.github.io/styleguide/jsguide.html#features-arrays-ctor) for
simplicity

## Accessing the Elements of an Array

Array elements are ordered by index values, starting at 0:

- Index 0 has the first element
- Index 1 has the second element
- Index n-1 has the nth element
- Index array.length-1 has the last element

```js
//              [0]   [1]   [2]  [3]   [4]   [5]
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];

// Get first element of array
console.log(fruits[0]); // 🍎

// Get third element of array n-1
console.log(fruits[2]); // 🍊

// Get last element of array
console.log(fruits[fruits.length - 1]); // 🍓
```

## Array methods and properties

Arrays provide a lot of methods and properties.

### Array properties

The Array does not have a lot of properties 😂.

#### Array length

The `length` property is used to know the amount of items in your array.

```js
const apples = ['🍎', '🍎', '🍎'];

// Length of an array
console.log(apples.length); // logs 3
```

### Array methods

For these examples I use this sample data:

```js:DATA_SAMPLE
const employees = [
  {
    name: 'Serhii',
    age: 29
  },
  {
    name: 'Anna',
    age: 20
  },
  {
    name: 'Roman',
    age: 27
  },
  {
    name: 'Julia',
    age: 25
  },
  {
    name: 'Mykola',
    age: 35
  }
];
```

#### Add & remove items from array

Methods that add and remove items from the beginning or the end:

- employees.push(...items) – adds items to the end
- employees.pop() – extracts an item from the end
- employees.shift() – extracts an item from the beginning
- employees.unshift(...items) – adds items to the beginning

#### Find element in array

The `.find()` method will return the **_first element_** in the array that matches a test you provide.

```js
const employees = [/* See DATA_SAMPLE */]

// Find employee with name 'Serhii'
const serhii = employees.find((employee) => employee.name === 'Serhii');

// or with object destructuring
const serhii = employees.find(({ name }) => name === 'Serhii');
```

#### Transform elements in array

The `.map()` method will apply a given function to every item in your array and give you a **_new array with those
values_**.

```js
// Transform employees array to new array of names.
// I use object destructuring in this and future examples
const names = employees.map(({ name }) => name);
```

#### Filter elements in array

The `.filter()` method takes your array and removes items that don't pass a test you give it, and return new array.

```js
// Keep employees who are younger than 25
const youngEmployees = employees.filter(({ age }) => age < 25);
```

#### Merge two arrays to one

The `.concat()` method is used to merge two or more arrays, or concat new array to old. This method does not change the
existing arrays, but instead returns a new array.

```js
const evenNumbers = [2, 4, 6];
const oddNumbers = [1, 3, 5];

const allNumbers = evenNumbers.concat(oddNumbers); // [ 2, 4, 6, 1, 3, 5 ]
```

#### Join each element in array

The `.join()` method creates and returns a new string by concatenating all elements in an array.

```js
// Before .join() we must transform each object in array to string
const formattedOutput = employees
  .map(({ name }) => name) // Transform employee object to name string
  .join("\n"); // "\n" – add newline after each element
```

```shell:Output
Serhii
Anna
Roman
Julia
Mykola
```

#### Check if every element in array matches some criteria

The `.every()` method checks that every single item in your array matches some criteria.

```js

const isAdult = (employee) => employee.age > 18;

// Check is every our employee older than 18 age
const isEveryEmployeeYoung = employees.every(isAdult); // true
```

#### Check if at least one item in array matches some criteria.

The `.some()` method checks that at least one item in your array matches some criteria by compare function.

```js

const isAdult = (employee) => employee.age > 18;

// Check if at least one employee is older than 18
const isSomeEmployeeAdult = employees.some(isAdult); // true
```

#### Check if at least one item includes in your array

The `.includes()` method checks that at least one item in your array matches some value.

```js
// Check is name "Serhii" includes in employees array
const isSerhiiNameExist = employees
  .map(({ name }) => name) // Transform employee object to name string
  .includes('Serhii'); // true
```

#### Loop through an array

The `.forEach()` method executes a provided function once for each array element.

It doesn't return a value though. It's useful for side effects.

```js
// Print to console name of each employee
employees.forEach((employee) => console.log(employee.name))
```

## Conclusion

The array has many methods, in this article I have shown the most used in my opinion.

Further, you can learn more methods on the pages of MDN Web Docs, so I wish you inspiration and hope this article will
be useful to you.

## Related

- [for...in vs for...of Loops](/blog/for-in-vs-for-of) - learn different ways to iterate over arrays
- [Remove Duplicates from an Array](/snippets/remove-duplicates-array) - common array operation
- [Sort an Array of Objects](/snippets/sort-an-array-of-objects-in-javascript) - sorting by multiple properties
- [Generate a Range of Numbers](/snippets/generate-range) - quickly create sequential arrays


Master JavaScript array methods with this beginner-friendly guide. Learn map, filter, reduce, find, and other essential methods with practical examples.

JavaScript Arrays: Essential Methods for Beginners


<Image src="phpstorm.png" alt="PhpStorm allow network popup" />

[PHPStorm](https://www.jetbrains.com/phpstorm/) has a bug in macOS where it always asks for permission to
connect to the network on every startup.

So how to fix it?

## Generate a new certificate in Keychain Access

- Open Keychain Access and from the main menu open **Certificate Assistant** then click on **Create a Certificate**
- Fill out the following:
  - Name: PHPStorm-network (can be any)
  - Identity: Self-Signed Root
  - Certificate Type: Code Signing
  - Leave the checkbox unchecked
- Click save then **Continue**

<Image src="certificate.png" alt="Keychain Access create certificate window" />

## Assign the Certificate to PHPStorm

Open your terminal and enter the following where “PHPStorm” is the name of the Certificate you just created and the
correct location for the PHPStorm.app

```shell
codesign -s "PHPStorm-network" -f /Applications/PhpStorm.app/
```

<Image src="console.png" alt="console codesign window" />

Now restart PHPStorm, and it will ask you one last time to verify the incoming network connections, and after that it
shouldn’t ask you again!

## Further reading

- [ESLint with TypeScript](/blog/eslint-with-typescript) — another IDE and tooling setup guide for a smoother development workflow
- [Introducing the New shramko.dev](/blog/introducing-the-new-shramko.dev) — the full development setup behind building this blog


Fix the "allow network connections" popup appearing every time PHPStorm starts on macOS. Quick codesign solution to stop repeated permission requests.

Enabling Network Connections on Startup in PHPStorm


<Image src="grid.jpeg" alt="Retro synthwave landscape with neon grid lines and glowing sunset, representing CSS Grid layout concept" />

Often in the life of a web developer, you need to make a grid, but the limitations of the browser (Internet Explorer 😭)
do not allow you to use, for example, [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout).

This is
where [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
comes to the rescue. He is our friend, brother and helper. 🫡

This post is about how to create a flexbox-based grid component in React. The component should be reusable and painless
to configure.

> If you have problems coming up with class names, I have a selection
> of [common class names](/snippets/common-css-classes#layout) on my blog

## Preparation

Many of those who created components in React are familiar with
the [classnames](https://www.npmjs.com/package/classnames) library, but I want to recommend you the
[clsx](https://www.npmjs.com/package/clsx) library, which is smaller and similar in functionality.

It is not necessary for our component, but it is more comfortable with them:

```shell
npm i clsx
```

## Step 1: Create React component architecture

```jsx
const Grid = ({ children }) => (
  <div className='grid'>
    {children}
  </div>
);
```

```jsx
const GridColumn = ({ children }) => (
  <div className='grid__col'>
    {children}
  </div>
);
```

```jsx
const GridRow = ({ children }) => (
  <div className='grid__row'>
    {children}
  </div>
);
```

## Step 2: Create styles with SCSS

I use the [BEM](https://en.bem.info/methodology/) methodology for styles, as I think it is excellent for component
libraries.

```scss
// Base styles
.grid {
  width: 100%;

  &__row {
    display: flex;
    flex-wrap: wrap;
  }

  &__col {
    flex-grow: 1;
    flex-shrink: 0;

    // For decoration only
    background-color: #bbeffd;
    border: 1px solid #61dafb;
    padding: 15px;
    text-align: center;
    margin-bottom: 25px;
  }
}
```

What about columns logic?

```scss
.grid__row--col-3 > .grid__col {
  width: 33%;
}

.grid__row--col-2 > .grid__col {
  width: 50%;
}
```

It is so ugly. Why we need to do it manually?

Let's try some [Sass](https://sass-lang.com/documentation/at-rules/control/each/) magic 🪄?

```scss
$columnsNumberToWidth: (
  2: 50%,
  3: 33%,
  4: 25%,
  5: 20%,
  6: 16.6%,
);

@each $number, $width in $columnsNumberToWidth {
  .grid__row--col-#{$number} > .grid__col {
    width: $width;
  }
}
```

You can see how SASS code is transformed into CSS [here](https://www.sassmeister.com/):

<Image src="sass.jpeg" alt="sassmeister site screenshot with SCSS and CSS code" />

## Step 3: Add logic to the GridRow component.

```jsx
import clsx from 'clsx';

const GridRow = (props) => {
  const {
    children,
    columns,
  } = props;

  const rootClasses = clsx('grid__row', {
    [`grid__row--col-${columns}`]: columns,
  });

  return (
    <div className={rootClasses}>
      {children}
    </div>
  );
};
```

## Let's check result

```jsx
<Grid>
  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
  </GridRow>

  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
    <GridColumn>4 of 6</GridColumn>
    <GridColumn>5 of 6</GridColumn>
    <GridColumn>6 of 6</GridColumn>
  </GridRow>

  {/* ...  */}
</Grid>
```

<Image src="example-1.jpeg" alt="First example grid screenshot" />

## Recap

Writing components has an endless process ♾.

Next, you can add a dynamic size of each column, column gaps, change the component tag type, breakpoints and so on...

Therefore, below I share additional materials that may be useful:

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox Froggy Game](https://flexboxfroggy.com/)
- [React bootstrap Grid system](https://react-bootstrap.github.io/docs/layout/grid/)
- [CSS Class Naming Conventions](/blog/class-naming-conventions) - learn more about BEM methodology used in this example


Learn how to build a reusable flexbox-based Grid component in React using BEM methodology and clsx for clean class management.

Flexbox Grid in React: A Step-by-Step Guide

Follow step-by-step tutorials for web development tasks. From project setup to deployment, learn practical skills for your projects.

Tutorial18 articles

Articles

Elements & Children Props

The early return pattern in JavaScript

Generic Type Parameters in TypeScript

Custom Hooks Pitfalls

React Re-Renders

GraphQL Certified – How I earned my certification

Why Are JavaScript Naming Conventions Important?

Discriminated Unions in TypeScript

How to Fix MissingSharp Error in Astro.js on Vercel

Build Your Own Link Tree with Astro.js and Vercel

Conventional Commits

How to decrease deployment time by 44% with pnpm

How to add SSH keys to your GitHub account

Cross-browser testing

Postgres connect to database with URL

JavaScript 101: Arrays

PHPStorm Allow Network Connections on Startup

How to create a grid with flexbox in React