DEV Community: TenE

Vercel design.md

TenE — Thu, 18 Jun 2026 16:23:39 +0000


---
version: alpha
name: Geist
description: "Vercel’s Geist design system, Light theme (the Dark theme is documented at /design.dark.md)."
colors:
  primary: "#171717"
  secondary: "#4d4d4d"
  tertiary: "#006bff"
  neutral: "#f2f2f2"
  background-100: "#ffffff"
  background-200: "#fafafa"
  gray-100: "#f2f2f2"
  gray-200: "#ebebeb"
  gray-300: "#e6e6e6"
  gray-400: "#eaeaea"
  gray-500: "#c9c9c9"
  gray-600: "#a8a8a8"
  gray-700: "#8f8f8f"
  gray-800: "#7d7d7d"
  gray-900: "#4d4d4d"
  gray-1000: "#171717"
  gray-alpha-100: "#0000000d"
  gray-alpha-200: "#00000015"
  gray-alpha-300: "#0000001a"
  gray-alpha-400: "#00000014"
  gray-alpha-500: "#00000036"
  gray-alpha-600: "#0000003d"
  gray-alpha-700: "#00000070"
  gray-alpha-800: "#00000082"
  gray-alpha-900: "#000000b3"
  gray-alpha-1000: "#000000e8"
  blue-100: "#f0f7ff"
  blue-200: "#e9f4ff"
  blue-300: "#dfefff"
  blue-400: "#cae7ff"
  blue-500: "#94ccff"
  blue-600: "#48aeff"
  blue-700: "#006bff"
  blue-800: "#0059ec"
  blue-900: "#005ff2"
  blue-1000: "#002359"
  red-100: "#ffeeef"
  red-200: "#ffe8ea"
  red-300: "#ffe3e4"
  red-400: "#ffd7d6"
  red-500: "#ffb1b3"
  red-600: "#ff676d"
  red-700: "#fc0035"
  red-800: "#ea001d"
  red-900: "#d8001b"
  red-1000: "#47000c"
  amber-100: "#fff6de"
  amber-200: "#fff4cf"
  amber-300: "#fff1c1"
  amber-400: "#ffdc73"
  amber-500: "#ffc543"
  amber-600: "#ffa600"
  amber-700: "#ffae00"
  amber-800: "#ff9300"
  amber-900: "#aa4d00"
  amber-1000: "#561900"
  green-100: "#ecfdec"
  green-200: "#e5fce7"
  green-300: "#d3fad1"
  green-400: "#b9f5bc"
  green-500: "#82eb8d"
  green-600: "#4ce15e"
  green-700: "#28a948"
  green-800: "#279141"
  green-900: "#107d32"
  green-1000: "#003a00"
  teal-100: "#defffb"
  teal-200: "#ddfef6"
  teal-300: "#ccf9f1"
  teal-400: "#b1f7ec"
  teal-500: "#52f0db"
  teal-600: "#00e3c4"
  teal-700: "#00ac96"
  teal-800: "#00927f"
  teal-900: "#007f70"
  teal-1000: "#003f34"
  purple-100: "#faf0ff"
  purple-200: "#f9f0ff"
  purple-300: "#f6e8ff"
  purple-400: "#f2d9ff"
  purple-500: "#dfa7ff"
  purple-600: "#c979ff"
  purple-700: "#a000f8"
  purple-800: "#8500d1"
  purple-900: "#7d00cc"
  purple-1000: "#2f004e"
  pink-100: "#ffe8f6"
  pink-200: "#ffe8f3"
  pink-300: "#ffdfeb"
  pink-400: "#ffd3e1"
  pink-500: "#fdb3cc"
  pink-600: "#f97ea7"
  pink-700: "#f22782"
  pink-800: "#e4106e"
  pink-900: "#c41562"
  pink-1000: "#460523"
  # Wide-gamut accent variants in oklch for P3 displays (sRGB hex above is the fallback)
  blue-100-p3: "oklch(97.32% 0.0141 251.56)"
  blue-200-p3: "oklch(96.29% 0.0195 250.59)"
  blue-300-p3: "oklch(94.58% 0.0293 249.84870859673202)"
  blue-400-p3: "oklch(91.58% 0.0473 245.11621922481282)"
  blue-500-p3: "oklch(82.75% 0.0979 248.48)"
  blue-600-p3: "oklch(73.08% 0.1583 248.133320980386)"
  blue-700-p3: "oklch(57.61% 0.2508 258.23)"
  blue-800-p3: "oklch(51.51% 0.2399 257.85)"
  blue-900-p3: "oklch(53.18% 0.2399 256.9900584162342)"
  blue-1000-p3: "oklch(26.67% 0.1099 254.34)"
  red-100-p3: "oklch(96.5% 0.0223 13.09)"
  red-200-p3: "oklch(95.41% 0.0299 14.252646656611997)"
  red-300-p3: "oklch(94.33% 0.0369 15.011509923860523)"
  red-400-p3: "oklch(91.51% 0.0471 19.8)"
  red-500-p3: "oklch(84.47% 0.1018 17.71)"
  red-600-p3: "oklch(71.12% 0.1881 21.22)"
  red-700-p3: "oklch(62.56% 0.2524 23.03)"
  red-800-p3: "oklch(58.19% 0.2482 25.15)"
  red-900-p3: "oklch(54.99% 0.232 25.29)"
  red-1000-p3: "oklch(24.8% 0.1041 18.86)"
  amber-100-p3: "oklch(97.48% 0.0331 85.79)"
  amber-200-p3: "oklch(96.81% 0.0495 90.24227879900472)"
  amber-300-p3: "oklch(95.93% 0.0636 90.52)"
  amber-400-p3: "oklch(91.02% 0.1322 88.25)"
  amber-500-p3: "oklch(86.55% 0.1583 79.63)"
  amber-600-p3: "oklch(80.25% 0.1953 73.59)"
  amber-700-p3: "oklch(81.87% 0.1969 76.46)"
  amber-800-p3: "oklch(77.21% 0.1991 64.28)"
  amber-900-p3: "oklch(52.79% 0.1496 54.65)"
  amber-1000-p3: "oklch(30.83% 0.099 45.48)"
  green-100-p3: "oklch(97.59% 0.0289 145.42)"
  green-200-p3: "oklch(96.92% 0.037 147.15)"
  green-300-p3: "oklch(94.6% 0.0674 144.23)"
  green-400-p3: "oklch(91.49% 0.0976 146.24)"
  green-500-p3: "oklch(85.45% 0.1627 146.3)"
  green-600-p3: "oklch(80.25% 0.214 145.18)"
  green-700-p3: "oklch(64.58% 0.1746 147.27)"
  green-800-p3: "oklch(57.81% 0.1507 147.5)"
  green-900-p3: "oklch(51.75% 0.1453 147.65)"
  green-1000-p3: "oklch(29.15% 0.1197 147.38)"
  teal-100-p3: "oklch(97.72% 0.0359 186.7)"
  teal-200-p3: "oklch(97.06% 0.0347 180.66)"
  teal-300-p3: "oklch(94.92% 0.0478 182.07)"
  teal-400-p3: "oklch(92.76% 0.0718 183.78)"
  teal-500-p3: "oklch(86.88% 0.1344 182.42)"
  teal-600-p3: "oklch(81.5% 0.161 178.96)"
  teal-700-p3: "oklch(64.92% 0.1572 181.95)"
  teal-800-p3: "oklch(57.53% 0.1392 181.66)"
  teal-900-p3: "oklch(52.08% 0.1251 182.93)"
  teal-1000-p3: "oklch(32.11% 0.0788 179.82)"
  purple-100-p3: "oklch(96.65% 0.0244 312.1890119359961)"
  purple-200-p3: "oklch(96.73% 0.0228 309.8)"
  purple-300-p3: "oklch(94.85% 0.0364 310.15)"
  purple-400-p3: "oklch(91.77% 0.0614 312.82)"
  purple-500-p3: "oklch(81.26% 0.1409 310.8)"
  purple-600-p3: "oklch(72.07% 0.2083 308.19)"
  purple-700-p3: "oklch(55.5% 0.3008 306.12)"
  purple-800-p3: "oklch(48.58% 0.2638 305.73)"
  purple-900-p3: "oklch(47.18% 0.2579 304)"
  purple-1000-p3: "oklch(23.96% 0.13 305.66)"
  pink-100-p3: "oklch(95.69% 0.0359 344.6218910697224)"
  pink-200-p3: "oklch(95.71% 0.0321 353.14)"
  pink-300-p3: "oklch(93.83% 0.0451 356.29)"
  pink-400-p3: "oklch(91.12% 0.0573 358.82)"
  pink-500-p3: "oklch(84.28% 0.0915 356.99)"
  pink-600-p3: "oklch(74.33% 0.1547 0.24)"
  pink-700-p3: "oklch(63.52% 0.238 1.01)"
  pink-800-p3: "oklch(59.51% 0.2339 4.21)"
  pink-900-p3: "oklch(53.5% 0.2058 2.84)"
  pink-1000-p3: "oklch(26% 0.0977 359)"
typography:
  heading-72:
    fontFamily: Geist Sans
    fontSize: 72px
    fontWeight: 600
    lineHeight: 72px
    letterSpacing: -4.32px
  heading-64:
    fontFamily: Geist Sans
    fontSize: 64px
    fontWeight: 600
    lineHeight: 64px
    letterSpacing: -3.84px
  heading-56:
    fontFamily: Geist Sans
    fontSize: 56px
    fontWeight: 600
    lineHeight: 56px
    letterSpacing: -3.36px
  heading-48:
    fontFamily: Geist Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 56px
    letterSpacing: -2.88px
  heading-40:
    fontFamily: Geist Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: -2.4px
  heading-32:
    fontFamily: Geist Sans
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: -1.28px
  heading-24:
    fontFamily: Geist Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: -0.96px
  heading-20:
    fontFamily: Geist Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: -0.4px
  heading-16:
    fontFamily: Geist Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: -0.32px
  heading-14:
    fontFamily: Geist Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: -0.28px
  button-16:
    fontFamily: Geist Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
  button-14:
    fontFamily: Geist Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  button-12:
    fontFamily: Geist Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
  label-20:
    fontFamily: Geist Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
  label-18:
    fontFamily: Geist Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 20px
  label-16:
    fontFamily: Geist Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
  label-14:
    fontFamily: Geist Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label-14-mono:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label-13:
    fontFamily: Geist Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
  label-13-mono:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
  label-12:
    fontFamily: Geist Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  label-12-mono:
    fontFamily: Geist Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  copy-24:
    fontFamily: Geist Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
  copy-20:
    fontFamily: Geist Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 36px
  copy-18:
    fontFamily: Geist Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  copy-16:
    fontFamily: Geist Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  copy-14:
    fontFamily: Geist Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  copy-14-mono:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  copy-13:
    fontFamily: Geist Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
  copy-13-mono:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
spacing:
  1: 4px
  2: 8px
  3: 12px
  4: 16px
  6: 24px
  8: 32px
  10: 40px
  16: 64px
  24: 96px
  base: 4px
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  full: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background-100}"
    typography: "{typography.button-14}"
    rounded: "{rounded.sm}"
    padding: "0 10px"
    height: 40px
  button-secondary:
    backgroundColor: "{colors.background-100}"
    textColor: "{colors.primary}"
    typography: "{typography.button-14}"
    rounded: "{rounded.sm}"
    padding: "0 10px"
    height: 40px
  button-tertiary:
    textColor: "{colors.primary}"
    typography: "{typography.button-14}"
    rounded: "{rounded.sm}"
    padding: "0 10px"
    height: 40px
  button-error:
    backgroundColor: "{colors.red-800}"
    textColor: "#ffffff"
    typography: "{typography.button-14}"
    rounded: "{rounded.sm}"
    padding: "0 10px"
    height: 40px
  button-small:
    typography: "{typography.button-14}"
    rounded: "{rounded.sm}"
    padding: "0 6px"
    height: 32px
  button-large:
    typography: "{typography.button-16}"
    rounded: "{rounded.sm}"
    padding: "0 14px"
    height: 48px
  input:
    backgroundColor: "{colors.background-100}"
    textColor: "{colors.primary}"
    typography: "{typography.label-14}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: 40px
  input-small:
    typography: "{typography.label-14}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: 32px
  input-large:
    typography: "{typography.label-16}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: 48px
---

# Geist

## Overview

Geist is Vercel’s design system for building consistent, developer-focused interfaces. The aesthetic is minimal and high-contrast: plenty of whitespace, restrained color, and content set on near-neutral surfaces. Prioritize readability and accessibility, and use color to signal state or hierarchy rather than decoration.

This is the Light theme. The Dark theme uses the same token names with different values and lives at `/design.dark.md`. Colors are sRGB hex with Display P3 equivalents.

## Colors

Each non-background scale runs 10 steps (`100`–`1000`), and the step encodes intent, not just lightness:

- `100` default background
- `200` hover background
- `300` active background
- `400` default border
- `500` hover border
- `600` active border
- `700` solid fill, high contrast
- `800` solid fill, hover
- `900` secondary text and icons
- `1000` primary text and icons

`background-100` is the primary page and card surface; `background-200` is a secondary surface for subtle separation. The `gray-alpha-*` tokens are translucent, so they layer over any background; use them for borders, dividers, overlays, and hover states. Solid `gray-*` holds its contrast on any surface, so use it for text and opaque fills. Accent scales carry meaning: `blue` for success, links, and focus; `red` for errors; `amber` for warnings; plus `green`, `teal`, `purple`, and `pink`. Use the hex tokens everywhere; each accent scale also ships a `*-p3` wide-gamut value in `oklch()` for Display P3 screens. The Dark theme redefines the same names at `/design.dark.md`.

## Typography

Geist Sans sets UI and prose; Geist Mono sets code, data, and tabular figures. Both are open-source. The `typography` tokens above carry concrete `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `letterSpacing`:

- Headings, `heading-72` through `heading-14`, title pages and sections; `letterSpacing` tightens as the size grows.
- Labels, `label-20` through `label-12`, carry single-line, scannable text: navigation, form labels, table headers, metadata.
- Copy, `copy-24` through `copy-13`, set multi-line body text with a taller `lineHeight`.
- Buttons, `button-16` through `button-12`, are medium-weight labels for buttons and compact controls.

`copy-14` and `label-14` cover most text. The `-mono` tokens pair Geist Mono with the same metrics; prefer tabular figures when numbers need to align.

## Layout

Spacing follows a 4px scale: 4, 8, 12, 16, 24, 32, 40, 64, 96px. Keep a three-step rhythm: 8px inside a group, 16px between groups, 32–40px between sections. Cards use 24px padding, 16px when compact and 32px for hero areas. Center content in a 1200px column with side padding that grows at wider breakpoints, and make every layout work on mobile and desktop. Breakpoints are `sm` 401px, `md` 601px, `lg` 961px, `xl` 1200px, and `2xl` 1400px.

## Elevation & Depth

Hierarchy comes from tonal surfaces and borders first, so shadows stay subtle. Apply these `box-shadow` values for the light theme:

- Raised cards: `0 2px 2px rgba(0, 0, 0, 0.04)`
- Popovers and menus: `0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06)`
- Modals and dialogs: `0 1px 1px rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 24px 32px -8px rgba(0, 0, 0, 0.06)`

Tooltips take the lightest of these. Pair each elevation with the matching radius below.

## Motion

Use motion only when it clarifies a change, never for decoration. Most interactions should feel instant: a duration of `0ms` is often the snappiest and best choice, and the call is context-dependent. When motion genuinely helps, such as revealing or moving an element, keep it short and physical with the easing `cubic-bezier(0.175, 0.885, 0.32, 1.1)`: roughly 150ms for state changes, 200ms for popovers and tooltips, and 300ms for overlays and modals. Avoid long, looping, or attention-grabbing animation, and honor `prefers-reduced-motion` by dropping nonessential motion.

## Shapes

Radii stay tight: 6px for everyday surfaces and controls, 12px for menus and modals, 16px for fullscreen surfaces. Reserve 9999px for pills, avatars, and circular controls. Keep one radius family per view rather than mixing rounded and sharp corners.

## Components

The `components` tokens above give ready-to-use values per element (`backgroundColor`, `textColor`, `rounded`, `height`) drawn from this theme:

- Primary button: solid `gray-1000` fill with a `background-100` label, for the single most important action on a view.
- Secondary button: `background-100` fill with a translucent `gray-alpha-400` border.
- Tertiary button: transparent fill with `gray-1000` text for low-emphasis actions; it tints with `gray-alpha` on hover.
- Error button: solid `red-800` fill with white text, for destructive actions.
- Input: `background-100` fill, translucent border, 6px radius.

The variant tokens are the default medium (40px) size. Use the `button-small`/`input-small` (32px) and `button-large`/`input-large` (48px) tokens for the other sizes; large buttons step up to `button-16`. Hover and active states step up the scale: a `100` fill becomes `200` on hover and `300` on active, and borders move from `400` to `500` to `600`. Disabled uses a `gray-100` fill, `gray-700` text, and a not-allowed cursor. Focus shows a two-layer ring (`box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006bff`): a 2px gap in the surface color, then a 2px `blue-700` ring.

## Voice & Content

Copy is part of the design; keep it precise and free of filler.

- Use Title Case for labels, buttons, titles, and tabs; sentence case for body, helper text, and toasts.
- Name actions with a verb and a noun (`Deploy Project`, `Delete Member`), never `Confirm`, `OK`, or a bare verb.
- Write errors as what happened plus what to do next: `Build failed. Bundle exceeds 50 MB. Reduce it or raise the limit.`
- Toasts name the specific thing that changed, drop the trailing period, and never say `successfully`: `Project deleted`, not `Successfully deleted the project.`
- Empty states point to the first action: `No deployments yet. Push to your Git repository to create one.`
- Use the present participle with an ellipsis for in-progress states: `Deploying…`, `Saving…`.
- Use numerals (`3 projects`), curly quotes, and the ellipsis character; skip `please` and marketing superlatives.

## Do's and Don'ts

- Use the gray scale to rank information: `1000` for primary text, `900` for secondary, `700` for disabled.
- Keep solid accent color for state and the single most important action on a view.
- Hold WCAG AA contrast (4.5:1 for body text).
- Show the focus ring on every interactive element at `:focus-visible`, and never remove an outline without a visible replacement.
- Apply the typography tokens instead of setting font size, line height, or weight by hand.
- Don’t signal state with color alone; pair it with an icon or text label.
- Don’t use `background-200` as a general fill; it is for subtle separation only.
- Don’t mix rounded and sharp corners, or more than two font weights, in one view.
- Don’t swap `gray-*` for `background-*`; they are separate scales.

Introduction to Git

TenE — Mon, 15 Jun 2026 00:30:00 +0000

Welcome to Git Mastery, a series where we'll learn Git from the ground up, starting with the absolute basics and gradually moving toward advanced workflows, Git internals, hooks, automation, and professional development practices.

Whether you're a student, hobbyist, open-source contributor, or professional developer, Git is one of the most important tools you'll ever learn.

Let's begin.

What Is Git?

Git is a distributed version control system (DVCS) — a tool that tracks every change made to your files over time, so you always know what changed, when it changed, and who changed it.

But that definition alone doesn't really capture what Git feels like to use. A better way to understand it is through a problem every developer has run into.

You start a project. Things are going well. Then you make a change that breaks everything. You try to undo it manually, but you can't remember exactly what you had before. So you do what most people do without a version control system — you start creating backup folders:

project-final
project-final-v2
project-final-v2-fixed
project-final-v2-final
project-final-v2-final-final

Within a week, you have ten folders, no idea which one is actually the latest, and a growing sense of dread every time you open the project.

Git solves this completely. Instead of managing folders manually, Git lets you take a snapshot of your entire project at any meaningful moment — a snapshot called a commit. Each commit is stored safely, labeled with a message you write, and linked to every commit before it. Your project's history becomes a clean, navigable timeline rather than a pile of duplicated folders.

And because Git is distributed, every developer working on a project has a full copy of that entire history on their own machine. There is no single point of failure. No central server going down means everyone loses their work.

Why Do We Need Version Control?

Code changes constantly. Features get added, bugs get fixed, experiments get tried and sometimes abandoned. Without a system to track all of that, even a solo project becomes fragile fast.

Consider a simple scenario. On Monday your app works perfectly. You spend the rest of the week adding a new feature. On Friday something is broken and you have no idea why. Without version control, your options are grim: scroll through every file trying to spot what changed, or manually rewrite code you only half-remember.

With Git, the answer is two commands away. You look at the history, find the last commit where everything worked, and either revert to it or compare it line by line against your current code to pinpoint exactly what went wrong.

But version control is not just a safety net for mistakes. It also changes how confidently you can work. When you know every change is recorded and reversible, you stop being afraid to experiment. You try things. You refactor aggressively. You move faster, not slower, because the cost of being wrong drops to nearly zero.

And when you add other developers to the picture, version control becomes the thing that makes collaboration possible at all. Without it, two people editing the same file at the same time means one person's work silently overwrites the other's. With Git, changes from multiple people are tracked separately and merged deliberately, with conflicts surfaced clearly rather than hidden.

Version control is not about being cautious. It is about having the freedom to be bold.

A Brief History of Git

The World Before Git

For the first decade of Linux development (1991–2002), changes to the kernel were managed through a simple patch-based system. Contributors would submit patches via email to mailing lists, and Linus Torvalds would manually apply them to his source tree. CVS had been around since the 1980s and was the most popular version control system at the time, but it was not a good fit for Linux kernel development.

The BitKeeper Era (2002–2005)

In 2002, the Linux kernel development team adopted BitKeeper, a proprietary distributed version control system created by Larry McVoy's company BitMover. BitKeeper offered a free license to the Linux kernel community, but came with significant restrictions: developers couldn't work on competing version control projects while using BitKeeper, and they couldn't reverse engineer the software.

Despite the controversy around using proprietary tools for an open-source project, BitKeeper worked and it raised the bar for what any replacement would need to deliver.

The Crisis That Sparked Git

The critical incident occurred in 2005 when Andrew Tridgell, a kernel developer, created a tool called SourcePuller that could communicate with BitKeeper repositories. BitMover claimed this constituted reverse engineering of their protocols, violating the license agreement. This dispute led to the revocation of the free BitKeeper license for the Linux kernel project, leaving thousands of developers without their primary collaboration tool.

Torvalds' response was characteristically blunt: "I'll do something that works for me, and I won't care about anybody else."

Ten Days That Changed Software Development

Exactly twenty years ago, on April 7, 2005, Linus Torvalds made the very first commit to a new version control system called Git and in that first commit, he'd written enough of Git to use Git to make the commit itself.

Two key principles drove its development: speed, essential to handle a high volume of changes efficiently, and the widespread use of a hashing system (SHA-1) not primarily for security, but to detect file corruption, a problem Torvalds had already encountered with BitKeeper.

Torvalds needed a system that could handle applying patches in under three seconds, as kernel development often required processing 250 patches simultaneously.

What's in a Name?

When asked about the name, Torvalds described the tool as "the stupid content tracker" and offered several interpretations: a random three-letter combination that is pronounceable and not used by any common UNIX command; or simply the British slang word for a silly or contemptible person. There are several theories, but Torvalds has said he simply liked the word, which he'd learned from the Beatles song I'm So Tired.

From Kernel Tool to World Standard

Within days, Git was functional. Within weeks, the Linux kernel was using it. By June 2005, Git was already managing Linux kernel releases. By December 2005, Git 1.0 was released.

Though quickly adopted by kernel developers, Git didn't win everyone over right away it faced complaints for the first few months and years due to its steep learning curve and unusual mental model. But its strengths were undeniable.

Today, huge numbers of start-ups, collectives, and multinationals including Google and Microsoft use Git to maintain the source code of their software projects. Commercial hosting companies like GitHub (founded 2007), Bitbucket (founded 2010), and GitLab (founded 2011) built entire businesses on top of it. GitHub alone has over 40 million registered developers and was acquired by Microsoft for $7.5 billion in 2018.

Linus Torvalds himself admitted he never expected Git to become this big it was simply built to solve Linux's problem. That problem turned out to be everyone's problem.

Unpacking Manifest V3: Chrome’s Big Extension Shakeup! 🛠️

TenE — Sat, 13 Jun 2026 00:30:00 +0000

Hey tech family! 👋 If you’ve noticed your favorite Chrome extensions acting a bit differently lately or if you're a developer currently sweating over a massive codebase rewrite you are experiencing the era of Manifest V3 (MV3). 🤖

Google has officially pushed the web ecosystem forward by deprecating Manifest V2, making MV3 the absolute standard for how browser extensions behave. But why is this happening, what actually changed, and why is the internet so divided over it? Let’s break it all down in plain English! 👇

🧐 What Exactly is Manifest V3?

Think of a "Manifest" as the blueprint file (manifest.json) that tells the browser exactly what an extension is, what files it uses, and what permissions it needs to run.

Manifest V3 is Google's major architectural overhaul of this system. Its core mission sounds great on paper: improve user privacy, beef up security, and boost browser performance. However, achieving those goals meant rewriting the core rules of how extensions interact with your browser.

🛠️ The Biggest Changes & New Features

MV3 isn't just a small patch; it fundamentally alters the underlying extension engine. Here are the headline shifts:

Goodbye Background Pages, Hello Service Workers! 💤
In MV2, extensions used hidden, persistent background pages that ran 24/7, hogging your computer's RAM even when you weren't using them. MV3 replaces these with Service Workers. They are event-driven meaning they wake up, execute a task (like clicking an extension icon), and go right back to sleep. Hello, free RAM! 🐏
The Ad-Blocker Shakeup: webRequest vs. declarativeNetRequest 🛑
This is the most controversial change. In MV2, powerful extensions like uBlock Origin used the webRequest API to intercept, read, and block network requests in real-time using complex code. MV3 replaces the blocking version of this with declarativeNetRequest. Instead of letting the extension intercept the data, the extension must now hand Chrome a pre-defined list of rules, and Chrome does the blocking itself. 🧑‍⚖️
Zero Remotely Hosted Code Allowed 🚫
Under MV3, an extension can only execute JavaScript that is explicitly packed inside its zip file and reviewed by the Chrome Web Store. No more fetching external scripts at runtime.
Promise-Based APIs 🤝
On the developer side, MV3 finally natively supports modern asynchronous JavaScript Promises across most APIs, moving away from old-school callback functions.

🔄 The Migration Path: Moving from V2 to V3

For developers, migrating is less of a smooth path and more of a complete structural redesign. 🏗️ The typical migration workflow looks like this:

Update the Manifest Version: Change "manifest_version": 2 to 3.
Refactor Background Scripts: Transition your code from a DOM-dependent background page to a completely stateless Service Worker environment (meaning no more accessing window or document directly in the background!). 🧠
Rewrite Network Logic: Swap out interceptive web request listeners for static and dynamic declarative rule-sets.
Implement Offscreen Documents: If your extension absolutely requires DOM parsing or audio recording in the background, you now have to spin up a specialized "Offscreen Document" API to handle it. 📂

⚠️ Key Limitations of MV3

While the architecture is cleaner, it introduces strict boundaries that have left many developers feeling boxed in:

Rule Limits for Content Blockers 📉 – Google places a cap on the maximum number of filter rules an extension can declare, making it much harder for ad-blockers to maintain massive, hyper-detailed tracking protection lists.
Stateless Execution ⏳ – Because service workers terminate after a few minutes of inactivity, maintaining long-term WebSocket connections or temporary in-memory variables requires clever workarounds using chrome.storage.local or chrome.storage.session.
Delayed Updates for Blocklists 🕒 – Since remotely hosted code is banned, major blocklist updates often require pushing a brand-new extension update through Chrome's official Web Store review process instead of updating instantly in the background.

⚖️ The Scale: Pros vs Cons

Let's look at both sides of the coin to see who wins and who loses in this transition:

👍 The Pros

Enhanced Security: Banning remote code execution stops malicious extensions from changing their behavior after passing Google’s initial store review. 🎉
Better Privacy: Extensions can no longer peek at every single network request or bit of personal user data just to perform basic modifications. 👍
Smoother Performance: Event-driven service workers dramatically reduce background power drain and memory consumption on your device. 🔋
Modern Coding Standards: First-class Promise support makes extension development feel like standard modern web development. 💻

👎 The Cons

Crippled Ad-Blockers: Highly customizable, advanced cosmetic filtering extensions are fundamentally less powerful or more difficult to optimize under the new rules. 😢
Developer Friction: Many creators feel that the documentation gaps and rigid constraints limit software innovation and force complex workarounds. 😫
Loss of User Control: Power users lose a degree of autonomy over how deeply they can customize and control their own web traffic. 🎛️

🔮 Final Thoughts

Manifest V3 is easily the most disruptive evolution the extension ecosystem has ever seen. While it successfully builds a safer, faster browser for the average user, it undeniably restricts the playground for advanced power tools. Whether you love the security upgrade or mourn the loss of extension flexibility, MV3 is here to stay! 🏁

🔗 Useful Official Links

Ready to dive deeper or start your own transition codebase? Bookmark these official documentation hubs:

Chrome Developers: Manifest V3 Overview – The core overview explaining the platform vision, structural changes, and key timelines.
Chrome Extensions Migration Guide – A step-by-step technical guide and checklist to convert your Manifest V2 extensions over to V3.
Chrome Reference: declarativeNetRequest API – Official specifications, rulesets, and constraints for managing network request modifications.
Chrome Extensions API Reference – The complete index of all active runtime, scripting, and interface APIs supported in modern Chrome environments.

Zylog - A Simple Yet Powerful Logger for Node.js

TenE — Wed, 18 Mar 2026 12:12:51 +0000

Logging is one of the most underrated yet essential parts of building scalable applications. Whether you're debugging, monitoring, or just tracking events, a good logger can make your life way easier.

That’s where Zylog comes in — a lightweight, flexible, and developer-friendly logger built for Node.js.

✨ Why Zylog?

Most logging libraries are either:

Too heavy ⚖️
Too complex 🤯
Or too limited 🚫

Zylog strikes the perfect balance by being:

⚡ Fast and minimal
🎨 Beautiful and colorized logs
🔧 Highly configurable
🧩 Easy to integrate
📁 File logging support

📦 Installation

Install Zylog using your favorite package manager:

npm install zylog

pnpm add zylog

yarn add zylog

🚀 Quick Start

import { zylog } from "zylog";

zylog.info("Server started");
zylog.warn("This is a warning");
zylog.error("Something went wrong");

🧠 Log Levels

Zylog supports multiple log levels out of the box:

Level	Description
info	General information
warn	Warnings
error	Errors
debug	Debugging details

zylog.debug("Debugging value:", { userId: 123 });

🎨 Colored Output

Zylog automatically colorizes output based on log levels:

zylog.info("Info message");   // Blue/Green
zylog.warn("Warning message"); // Yellow
zylog.error("Error message"); // Red

No extra setup needed 🔥

⚙️ Configuration

You can fully customize Zylog:

import { Zylog } from "zylog";

const logger = new Zylog({
  level: "debug",
  timestamp: true,
  color: true,
});

🧾 Logging to Files

Want to persist logs? Zylog supports file logging too:

const logger = new Zylog({
  file: {
    path: "./logs/app.log",
  },
});

logger.info("This will be saved to file");

📂 Real-World Examples

1. Express Server Logging

import express from "express";
import { zylog } from "zylog";

const app = express();

app.get("/", (req, res) => {
  zylog.info("Incoming request", { url: req.url });
  res.send("Hello World");
});

app.listen(3000, () => {
  zylog.info("Server running on port 3000");
});

2. Error Handling

try {
  throw new Error("Database failed");
} catch (err) {
  zylog.error("Critical error occurred", err);
}

3. Custom Logger Instance

const logger = new Zylog({
  level: "info",
});

logger.info("Custom logger instance");

4. Debugging Complex Objects

const user = {
  id: 1,
  name: "TenE",
  role: "admin",
};

zylog.debug("User details:", user);

🧩 Advanced Usage

Disable Colors (for production logs)

const logger = new Zylog({
  color: false,
});

Custom Log Format (conceptual)

const logger = new Zylog({
  format: (level, message) => {
    return `[${level.toUpperCase()}]: ${message}`;
  },
});

⚡ Performance

Zylog is built to be:

Non-blocking
Lightweight
Efficient for high-frequency logging

Perfect for:

APIs
CLI tools
Background jobs

🛠️ Use Cases

Backend APIs
CLI tools
Automation scripts
Dev debugging
Production monitoring

🧑‍💻 Developer Experience

Zylog focuses heavily on DX:

Clean API
TypeScript support
Minimal setup
Chainable and intuitive usage

🔮 What's Next?

Some ideas you can build with Zylog:

Log dashboards
CLI debugging tools
Middleware logging systems
Monitoring pipelines

💡 Final Thoughts

If you’re tired of bulky logging libraries or messy console logs, Zylog is a clean and powerful alternative.

It gives you:

Control
Simplicity
Performance

All in one package 🚀

⭐ Support

If you like Zylog: https://github.com/teneplaysofficial/zylog

⭐ Star the repo
🐛 Report issues
💡 Suggest features

📌 TL;DR

import { zylog } from "zylog";

zylog.info("Simple. Clean. Powerful.");

Happy logging! 🎉

Mastering Conditional Rendering in React

TenE — Tue, 20 Jan 2026 18:30:00 +0000

What is Conditional Rendering?

In React, conditional rendering allows you to dynamically render different UI components based on certain conditions. You can use JavaScript logic such as if statements, the ternary operator (? :), the logical AND (&&), or assign JSX to variables.

Ways to Implement Conditional Rendering

1. Using if Statements

The simplest way to conditionally render components is by using if statements inside a function component.

Example:

function AlertMessage({ show }) {
  if (!show) {
    return null;
  }
  return <p className="alert">This is an alert message!</p>;
}

export default function App() {
  return <AlertMessage show={true} />;
}

In this example, if show is false, the component returns null and nothing is rendered.

2. Using Ternary Operator (`? :`)

The ternary operator is a compact way to return different JSX based on a condition.

Example:

function UserGreeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
}

Here, if isLoggedIn is true, the message will be "Welcome back!", otherwise, it will be "Please sign in.".

3. Using Logical AND (`&&`) Operator

If you only need to render something when a condition is true, you can use the && operator.

Example:

function Notification({ messages }) {
  return (
    <div>
      {messages.length > 0 && <p>You have {messages.length} new messages.</p>}
    </div>
  );
}

If messages.length > 0, the paragraph will be displayed; otherwise, nothing is rendered.

4. Assigning JSX to a Variable

Using a variable allows for more readable and maintainable code when dealing with complex conditions.

Example:

function StatusMessage({ status }) {
  let message;
  if (status === "loading") {
    message = <p>Loading...</p>;
  } else if (status === "error") {
    message = <p>Error: Unable to fetch data.</p>;
  } else {
    message = <p>Data loaded successfully!</p>;
  }
  return <div>{message}</div>;
}

This approach improves readability when handling multiple conditions.

Best Practices

Keep it simple: If a conditional statement becomes too complex, consider extracting logic into separate functions.
Use early returns: Instead of deeply nesting ternary operators, use if statements with early returns when possible.
Be mindful of falsy values: 0, null, undefined, and false can cause unexpected behavior in logical && expressions.

Conclusion

Conditional rendering in React is an essential concept for building dynamic and responsive applications. Choose the approach that best fits your use case to keep your code clean and maintainable.

Optimize React Rendering with Lazy Loading and Code Splitting

TenE — Sat, 17 Jan 2026 18:30:00 +0000

Introduction

Code splitting is a technique that improves the performance of React applications by breaking the bundle into smaller chunks that are loaded only when needed. This helps reduce the initial load time and enhances the user experience.

Why Use Code Splitting?

Improved Performance: Reduces initial JavaScript payload size.
Faster Load Times: Loads only necessary code when required.
Efficient Resource Utilization: Minimizes unused code execution.

Implementing Code Splitting in React

React provides built-in support for code splitting via lazy and Suspense.

1. Using `lazy` for Lazy Loading

The React.lazy or lazy function allows you to load a component dynamically only when it is needed. Example:

import React, { Suspense, lazy } from "react";
const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <h1>React Code Splitting</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

2. Code Splitting with React Router

When using React Router, you can split code by dynamically importing route components.

Example:

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

3. Using Webpack's Dynamic Imports

Webpack supports dynamic imports using import(), which can be used to split code.

Example:

function loadComponent() {
  import("./DynamicComponent").then((module) => {
    const Component = module.default;
    // Render component dynamically
  });
}

Best Practices for Code Splitting

Split at Route Level: Load components dynamically for different pages.
Lazy Load Large Dependencies: Use lazy for libraries like charts or modals.
Optimize Bundle Splitting: Use Webpack's SplitChunksPlugin for optimized splitting.
Use Suspense for Fallback UI: Provide user-friendly loading indicators.

Conclusion

Code splitting is an essential technique to improve performance in React apps. By leveraging lazy, Suspense, and dynamic imports, you can enhance the user experience by reducing initial load times and loading components efficiently.

Scroll Restoration in React Router

TenE — Sat, 17 Jan 2026 09:30:00 +0000

When building Single Page Applications (SPAs) with React Router, one UX issue appears almost immediately:

Navigation changes the URL, but the page does not scroll to the top.

This breaks user expectations and feels wrong-especially on content-heavy pages like blogs, docs, or dashboards.

In this article, we’ll build a robust ScrollToTop component, explain why it’s needed, and cover every real-world edge case you should be aware of.

The Problem: Why Scroll Doesn't Reset in SPAs

In traditional multi-page websites:

Every navigation triggers a full page reload
Browsers automatically reset scroll position to (0, 0)

In SPAs:

Navigation happens client-side
The DOM does NOT reload
Browser scroll position is preserved by default

So when you navigate from /blog → /about, you stay scrolled halfway down the page.

The Solution: ScrollToTop Component

Here’s the simplest and correct implementation:

import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export function ScrollToTop() {
  const { pathname } = useLocation();

  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

How It Works (Line by Line)

`useLocation()`

const { pathname } = useLocation();

React Router updates location on every navigation
pathname changes when the route changes
It does not change for query params or hash changes unless explicitly used

Why `useLayoutEffect` (NOT `useEffect`)?

useLayoutEffect(() => {
  window.scrollTo(0, 0);
}, [pathname]);

Hook	Problem
`useEffect`	Scroll happens after paint, causing flicker
`useLayoutEffect`	Runs before paint, smooth UX

This prevents visible jump/glitch during navigation.

📌 Use useLayoutEffect for layout-related side effects like scroll, focus, or DOM measurement.

Why Depend on `pathname`?

[pathname];

This ensures scroll resets only when route changes, not on:

Re-renders
State updates
Context updates

Why `return null`?

This component:

Renders no UI
Exists only for side effects
Should be mounted once at the app root

How to Use It Correctly

Place it inside your router, near the root:

<BrowserRouter>
  <ScrollToTop />
  <App />
</BrowserRouter>

Do NOT place it inside individual pages
Do NOT wrap routes individually

Every Important Edge Case Explained

1. Query Params (`?page=2`) Don’t Trigger Scroll

/pathname stays the same
/search changes

❌ Scroll won't reset when only query changes.

✅ Fix (if desired):

const { pathname, search } = useLocation();

useLayoutEffect(() => {
  window.scrollTo(0, 0);
}, [pathname, search]);

2. Hash Navigation (`#section`) Breaks Anchors

If a URL is:

/docs#getting-started

Your component overrides browser anchor behavior.

✅ Fix:

const { pathname, hash } = useLocation();

useLayoutEffect(() => {
  if (hash) return;
  window.scrollTo(0, 0);
}, [pathname, hash]);

3. Back/Forward Navigation Scroll Loss

By default:

Browsers remember scroll on back/forward
This component breaks that behavior

✅ Best practice:

Only use this for forward navigation
Or disable for certain routes

Advanced handling requires history.state, which is outside basic SPA scope.

4. Mobile Safari & iOS Quirk

window.scrollTo(0, 0);

Sometimes fails on iOS due to momentum scroll.

✅ Safer alternative:

document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

(Use only if you see issues)

5. Scroll Containers (Not Window)

If your app scrolls inside a container:

<div id="scroll-root"></div>

You must target it directly:

document.getElementById("scroll-root")?.scrollTo(0, 0);

6. React Strict Mode Double Execution (Dev Only)

In React:

useLayoutEffect runs twice in development
This does not affect production
Safe to ignore

7. Performance Concerns?

Negligible.

Runs only on navigation
One synchronous operation
Zero re-renders

When You Shouldn't Use ScrollToTop

Infinite scrolling pages
Chat applications
Forms with autosave
Map-based UIs

In these cases, preserving scroll is actually better UX.

Production-Grade Version (Best Balance)

import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export function ScrollToTop() {
  const { pathname, hash } = useLocation();

  useLayoutEffect(() => {
    if (hash) return;
    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
  }, [pathname, hash]);

  return null;
}

Final Thoughts

Scroll restoration is not optional UX polish it’s a core navigation expectation.

This small component:

Fixes a fundamental SPA flaw
Improves perceived performance
Makes your app feel “native”

If you’re using React Router and don’t have this, your users notice-even if they don’t tell you.

Props in React: Passing Data Between Components

TenE — Sat, 10 Jan 2026 18:30:00 +0000

What Are Props?

Props (short for "properties") are used to pass data from a parent component to a child component in React. Props make components reusable and dynamic.

Props are:

Immutable (Cannot be changed inside the component)
Passed from parent to child
Read-only

Using Props in Functional Components

Example: Passing Props to a Child Component

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

export default App;

The Greeting component receives the name prop and displays "Hello, Alice!".

Using Props in Class Components (Older Method)

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

function App() {
  return <Greeting name="Alice" />;
}

export default App;

Functional components are preferred for props handling.

Default Props

You can set default values for props using defaultProps.

Example: Default Props in Functional Components

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

or using defaultProps:

Greeting.defaultProps = {
  name: "Guest",
};

Props as Objects (`props` vs. Destructuring)

Props are passed as an object. You can access them directly using props or destructure them.

Using props object:

function User(props) {
  return <h1>{props.name} is {props.age} years old</h1>;
}

Using destructuring:

function User({ name, age }) {
  return <h1>{name} is {age} years old</h1>;
}

Destructuring is preferred for cleaner code.

Passing Functions as Props

Example: Child Component Calls Parent Function

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

function App() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <Button onClick={handleClick} />;
}

export default App;

The onClick function is passed from App to Button.

Passing Components as Props (`children` Prop)

Props can also include React elements or components.

Example: Using children Prop

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>This is content inside the card.</p>
    </Card>
  );
}

export default App;

The children prop lets you wrap elements inside a component.

Props vs. State (Key Differences)

Feature	Props ( Passed from Parent)	State ( Internal to Component)
Mutability	Immutable	Mutable
Where Defined?	Parent Component	Inside the Component
How to Update?	Cannot be changed	Use `useState()`

Summary

Props allow data flow from parent to child.
Props are immutable (read-only).
Props can be objects, functions, or even React elements.
Use children prop to pass JSX inside components.

Components in React: Functional vs. Class Components

TenE — Sun, 04 Jan 2026 18:30:00 +0000

What are React Components?

React components are reusable building blocks for UI. They allow you to break down a UI into smaller, independent pieces.

Types of Components in React

React has two types of components:

Functional Components (Modern, recommended)
Class Components (Older)

1. Functional Components (Recommended)

Functional components are JavaScript functions that return JSX.

Example of a Functional Component:

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Why Use Functional Components?

Simpler and easier to read
No need for this keyword
Hooks (useState, useEffect) work only in functional components

2. Class Components (Older Method)

Class components use ES6 classes and render() to return JSX.

Example of a Class Component:

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default Greeting;

Why Avoid Class Components?

More complex syntax
this keyword can be confusing
Cannot use hooks like useState directly

State in Components

✅ State in Functional Components (Using useState)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

❌ State in Class Components (Using this.state)

import React, { Component } from "react";

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increaseCount}>Increase</button>
      </div>
    );
  }
}

export default Counter;

Functional components with hooks (useState) are shorter and cleaner!

Props in Components

✅ Using Props in Functional Components

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

❌ Using Props in Class Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Functional vs. Class Components: Comparison

Feature	Functional Components	Class Components
Syntax Simplicity	Simple & clean	More complex
Performance	Faster	Slightly slower
`this` Keyword	Not required	Required
State Management	`useState` hook	`this.state`
Lifecycle Methods	`useEffect` hook	`componentDidMount`, etc.
Recommended?	Yes	No (legacy)

Conclusion

Use functional components for better performance and readability.
Functional components support React Hooks (useState, useEffect).
Class components are outdated and should be avoided unless working with legacy code.

JSX in React

TenE — Wed, 31 Dec 2025 18:30:00 +0000

What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML inside JavaScript. It makes React components more readable and expressive.

JSX Example:

const element = <h1>Hello, JSX!</h1>;

Why Use JSX?

Readable & Intuitive – Looks like HTML inside JavaScript.
Prevents XSS Attacks – JSX escapes values automatically.
Full JavaScript Power – You can use JavaScript inside JSX.

JSX Syntax Rules

1. Only One Parent Element

✅ Correct:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </div>
);

❌ Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome to React</p>
);

Fix: Wrap elements inside a <div> or <> (fragment).

2. Use `className` Instead of `class`

✅ Correct:

return <h1 className="title">Hello, JSX!</h1>;

❌ Incorrect:

return <h1 class="title">Hello, JSX!</h1>;

Why? class is a reserved keyword in JavaScript.

3. Expressions in JSX Must Be Inside `{}`

✅ Correct:

const name = "React";
return <h1>Welcome to {name}!</h1>;

❌ Incorrect:

const name = "React";
return <h1>Welcome to name!</h1>;

4. Self-Closing Tags for Elements Without Children

✅ Correct:

return <img src="logo.png" alt="React Logo" />;

❌ Incorrect:

return <img src="logo.png" alt="React Logo"></img>;

Using JavaScript Inside JSX

Example: Dynamic Content in JSX

const age = 25;
return <p>{age >= 18 ? "Adult" : "Minor"}</p>;

Example: Calling Functions in JSX

function getGreeting(name) {
  return `Hello, ${name}!`;
}

return <h1>{getGreeting("React")}</h1>;

JSX Without Babel (Pure React)

Under the hood, JSX compiles into React.createElement().

JSX:

const element = <h1>Hello, JSX!</h1>;

Compiles to:

const element = React.createElement("h1", null, "Hello, JSX!");

JSX just makes writing React easier!

Summary

JSX lets you write HTML inside JavaScript.
Must have one parent element.
Use {} for JavaScript expressions.
Use className instead of class.
Self-close elements like <img />.

Setting Up a React Project with Vite

TenE — Sat, 27 Dec 2025 18:30:00 +0000

Why Set Up a React Project?

React needs a build tool to manage dependencies, compile JSX, and optimize performance. The two most popular ways to set up a React project are:

Create React App (CRA) – Official but slower and its now Sunset
Vite – Faster, modern alternative

Setting Up React with Vite

Vite is a modern build tool that offers:

Faster development server.
Better performance with ES modules.
Optimized production build.

Steps to Create a React App with Vite

1. Open Terminal & Run:

npm create vite@latest my-app --template react

or using Yarn:

yarn create vite@latest my-app --template react

or using pnpm:

pnpm create vite@latest my-app --template react

2. Navigate to the project folder:

cd my-app

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

Vite For

Feature	Vite 🚀	CRA 🐢
Startup Speed	⚡ Instant	🐌 Slow
Build Speed	🔥 Fast	🚶‍♂️ Moderate
Uses Webpack?	❌ No (ES Modules)	✅ Yes
Production Build	✅ Optimized	⚠️ Heavier
Plugins Support	✅ Excellent (Rollup-based)	✅ Good (Webpack-based)

Ultimate React Hooks Guide

TenE — Sat, 20 Dec 2025 18:30:00 +0000

React Hooks are functions that let you "hook into" React state and lifecycle features from function components. They were introduced in React 16.8. Below is a list of common React hooks, their explanations, and examples of usage. Additionally, this guide covers how to create custom hooks.

1. useState

The useState hook lets you add state to function components.

Explanation

useState returns an array with two elements: the current state value and a function to update it.

Usage

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect

The useEffect hook lets you perform side effects in function components.

`useEffect` With Dependencies

useEffect runs after the first render and after every update. You can also specify dependencies to control when the effect runs.

Usage

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

`useEffect` With an Empty Dependency Array []

Runs only once after the initial render (similar to componentDidMount).

useEffect(() => {
  console.log('This runs only once after the first render');
}, []);

Use case: Fetching data when the component mounts, setting up event listeners, etc.

`useEffect` Without Dependencies

Runs on every render (initial and subsequent re-renders).

useEffect(() => {
  console.log('This runs after every render');
});

Use case: Running code that doesn’t depend on specific state changes, like logging or animations.

Cleanup Function in useEffect

If useEffect returns a function, it acts as a cleanup that runs before the next effect or when the component unmounts.

useEffect(() => {
  const interval = setInterval(() => {
    console.log('Interval running...');
  }, 1000);

  return () => {
    clearInterval(interval); // Cleanup on unmount
  };
}, []);

Use case: Cleaning up event listeners, canceling API calls, clearing intervals, etc.

3. useContext

The useContext hook lets you access the value of a context.

Explanation

useContext accepts a context object (the value returned from React.createContext) and returns the current context value.

Usage

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="Hello, World!">
      <MyComponent />
    </MyContext.Provider>
  );
}

4. useReducer

The useReducer hook is an alternative to useState for managing complex state logic.

Explanation

useReducer returns an array with the current state and a dispatch function to trigger state updates.

Usage

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
}

5. useCallback

The useCallback hook returns a memoized callback.

Explanation

useCallback returns a memoized version of the callback that only changes if one of the dependencies has changed.

Usage

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

6. useMemo

The useMemo hook returns a memoized value.

Explanation

useMemo only recomputes the memoized value when one of the dependencies has changed.

Usage

import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  const expensiveCalculation = useMemo(() => {
    // Assume this is an expensive calculation
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

7. useRef

The useRef hook returns a mutable ref object.

Explanation

useRef is useful for accessing DOM elements or persisting values across renders.

Usage

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

8. useImperativeHandle

The useImperativeHandle hook customizes the instance value that is exposed when using ref.

Explanation

useImperativeHandle should be used with React.forwardRef.

Usage

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const inputRef = useRef();

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

9. useLayoutEffect

The useLayoutEffect hook runs after all DOM mutations.

Explanation

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations.

Usage

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

function LayoutEffectComponent() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  });

  return <div ref={divRef}>Hello, world!</div>;
}

10. useDebugValue

The useDebugValue hook is used to display a label for custom hooks in React DevTools.

Explanation

useDebugValue can be helpful for debugging custom hooks.

Usage

import React, { useState, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  // Imagine this is an actual implementation
  return isOnline;
}

11. Custom Hooks

Custom hooks let you extract component logic into reusable functions.

Explanation

Custom hooks are normal JavaScript functions that can call other hooks.

Example: useFetch

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

Usage of Custom Hook

import React from 'react';
import useFetch from './useFetch';

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

This guide provides a comprehensive overview of React hooks, their usage, and how to create custom hooks.

DEV Community: TenE

Vercel design.md

Introduction to Git

What Is Git?

Why Do We Need Version Control?

A Brief History of Git

The World Before Git

The BitKeeper Era (2002–2005)

The Crisis That Sparked Git

Ten Days That Changed Software Development

What's in a Name?

From Kernel Tool to World Standard

Unpacking Manifest V3: Chrome’s Big Extension Shakeup! 🛠️

🧐 What Exactly is Manifest V3?

🛠️ The Biggest Changes & New Features

🔄 The Migration Path: Moving from V2 to V3

⚠️ Key Limitations of MV3

⚖️ The Scale: Pros vs Cons

👍 The Pros

👎 The Cons

🔮 Final Thoughts

🔗 Useful Official Links

Zylog - A Simple Yet Powerful Logger for Node.js

✨ Why Zylog?

📦 Installation

🚀 Quick Start

🧠 Log Levels

🎨 Colored Output

⚙️ Configuration

🧾 Logging to Files

📂 Real-World Examples

1. Express Server Logging

2. Error Handling

3. Custom Logger Instance

4. Debugging Complex Objects

🧩 Advanced Usage

Disable Colors (for production logs)

Custom Log Format (conceptual)

⚡ Performance

🛠️ Use Cases

🧑‍💻 Developer Experience

🔮 What's Next?

💡 Final Thoughts

⭐ Support

📌 TL;DR

Mastering Conditional Rendering in React

What is Conditional Rendering?

Ways to Implement Conditional Rendering

1. Using if Statements

Example:

2. Using Ternary Operator (? :)

Example:

3. Using Logical AND (&&) Operator

Example:

4. Assigning JSX to a Variable

Example:

Best Practices

Conclusion

Optimize React Rendering with Lazy Loading and Code Splitting

Introduction

Why Use Code Splitting?

Implementing Code Splitting in React

1. Using lazy for Lazy Loading

2. Code Splitting with React Router

3. Using Webpack's Dynamic Imports

Best Practices for Code Splitting

Conclusion

Scroll Restoration in React Router

The Problem: Why Scroll Doesn't Reset in SPAs

The Solution: ScrollToTop Component

How It Works (Line by Line)

useLocation()

Why useLayoutEffect (NOT useEffect)?

Why Depend on pathname?

Why return null?

How to Use It Correctly

Every Important Edge Case Explained

1. Query Params (?page=2) Don’t Trigger Scroll

2. Hash Navigation (#section) Breaks Anchors

3. Back/Forward Navigation Scroll Loss

2. Using Ternary Operator (`? :`)

3. Using Logical AND (`&&`) Operator

1. Using `lazy` for Lazy Loading

`useLocation()`

Why `useLayoutEffect` (NOT `useEffect`)?

Why Depend on `pathname`?

Why `return null`?

1. Query Params (`?page=2`) Don’t Trigger Scroll

2. Hash Navigation (`#section`) Breaks Anchors

Props as Objects (`props` vs. Destructuring)

Passing Components as Props (`children` Prop)

2. Use `className` Instead of `class`

3. Expressions in JSX Must Be Inside `{}`

`useEffect` With Dependencies

`useEffect` With an Empty Dependency Array []

`useEffect` Without Dependencies