Forem: David Turnbull

i18n SEO checklist: 15 SEO tips to reach a global audience

David Turnbull — Wed, 12 Nov 2025 02:07:43 +0000

Introduction

Optimizing multilingual sites for search engines isn't just about translation quality. Search engines need explicit signals to understand which pages are translations of each other, which markets they target, and which version to serve to which users.

This checklist covers 15 requirements for effective SEO for a global audience.

Note: If your website isn't already multilingual (or if you want a better developer experience for your multilingual website), be sure to check out Lingo.dev.

1. Structure your URLs with language subdirectories

Use subdirectories with ISO language codes to organize your multilingual content. This consolidates domain authority while keeping language versions separate and identifiable.

2. Add bidirectional hreflang tags to your HTML

Tell search engines about all language versions by adding hreflang tags to every page. Each page must reference all variants including itself.

<link rel="alternate" hreflang="en" href="https://example.com/en/products/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/produkte/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/productos/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/products/" />

3. Set the HTML lang attribute correctly

Match the lang attribute to your page's actual content language. Browsers and screen readers use this to render text and select pronunciation rules correctly.

<html lang="en">
<html lang="de">
<html lang="es-MX">
<html lang="zh-CN">

4. Point canonical tags to same-language versions

Canonical tags should reference the same language version to avoid duplicate content issues. Never point a German page's canonical to the English version.

<link rel="canonical" href="https://example.com/en/product/" />

<link rel="canonical" href="https://example.com/de/produkt/" />

5. Generate localized URL slugs

Translate your URL slugs to match the content language. This improves user experience and local search relevance.

const slugs = {
  'about': { en: 'about', de: 'ueber-uns', es: 'acerca-de' },
  'products': { en: 'products', de: 'produkte', es: 'productos' }
};

const url = `/${lang}/${slugs['about'][lang]}/`;

6. Include hreflang annotations in your XML sitemap

Add hreflang markup to your sitemap as a secondary discovery method. This reinforces the signal for search engines, especially on large sites.

<url>
  <loc>https://example.com/en/products/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/products/" />
  <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/produkte/" />
  <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/products/" />
</url>

7. Organize sitemaps by language

Split your XML sitemaps by language for better crawl efficiency and clearer Search Console organization.

<sitemapindex>
  <sitemap>
    <loc>https://example.com/sitemap_en.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap_de.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap_es.xml</loc>
  </sitemap>
</sitemapindex>

8. Build language-aware internal links

Keep all internal links within the same language version. This prevents users from jumping between languages unexpectedly.

const currentLang = window.location.pathname.split('/')[1];
const productLink = `/${currentLang}/products/`;

9. Detect language preferences from Accept-Language header

Parse the Accept-Language header to suggest appropriate language versions. Show this as an optional banner rather than forcing redirects, which can hurt SEO.

const acceptLang = request.headers['accept-language'];
const userLangs = acceptLang.split(',').map(l => l.split(';')[0].substring(0, 2));

if (userLangs[0] !== currentLang) {
  showBanner(`View in ${userLangs[0]}?`);
}

10. Add language-specific Schema.org markup

Include the inLanguage property in your structured data so search engines understand the language context of your content.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Product Details",
  "inLanguage": "en",
  "url": "https://example.com/en/product/"
}
</script>

11. Configure language-specific Open Graph tags

Set Open Graph metadata for each language version to ensure proper display when shared on social platforms.

<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:title" content="Wireless Headphones" />

<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:title" content="Kabellose Kopfhörer" />

12. List language sitemaps in robots.txt

Declare all language-specific sitemaps in robots.txt to help search engines discover them.

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap_en.xml
Sitemap: https://example.com/sitemap_de.xml
Sitemap: https://example.com/sitemap_es.xml

13. Send Content-Language HTTP headers

Add Content-Language headers to provide an additional language signal that both search engines and browsers can use.

const lang = request.path.split('/')[1];
response.setHeader('Content-Language', lang);

14. Add resource hints for region-specific CDNs

Use preconnect and dns-prefetch hints to speed up connections to region-specific CDN servers and improve Core Web Vitals.

<link rel="preconnect" href="https://cdn-eu.example.com">
<link rel="dns-prefetch" href="https://cdn-eu.example.com">

<link rel="preconnect" href="https://cdn-asia.example.com">

15. Load geo-specific third-party resources conditionally

Load region-specific resources like payment providers or analytics scripts based on user location to improve relevance and performance.

const paymentScripts = {
  'us': 'https://js.stripe.com/v3/',
  'eu': 'https://js.stripe.com/v3/',
  'cn': 'https://cdn.alipay.com/sdk.js'
};

const script = document.createElement('script');
script.src = paymentScripts[userRegion];
document.head.appendChild(script);

Join our Hackathon 🚀

We're sponsoring the Hack this Fall 2025 hackathon and giving away some prizes to the most creative uses of Lingo.dev. To learn more, join our Discord channel.

i18n for beginners: Every way to detect a user's locale (from best to worst)

David Turnbull — Wed, 05 Nov 2025 19:15:44 +0000

Introduction

At Lingo.dev, we're often asked about how to detect a user's locale. This is an important aspect of internationalization (i18n), but some of the most intuitive options are actually the worst.

This post walks through every method developers use to detect locale, ranked from most reliable to least. Some work. Some guess. Some fail spectacularly.

TL;DR

Start with explicit choices. Check the user's profile setting first. Then check the URL. Then check stored preferences.
When you have nothing explicit, negotiate from browser settings. Use navigator.languages on the client and Accept-Language on the server.
Use IP geolocation and timezone only for regional formatting like currency and date formats, never for language selection.
Always show a visible language switcher. Save the user's choice immediately. Never make them search for how to change languages. Never override their explicit choice with automatic detection.

1. User selected locale in account settings

When a signed-in user picks a locale in your settings, that choice is final. Use it everywhere. Sync it across all their devices. Never override it with automatic detection.

This is the user telling you exactly what they want. Listen to them.

const user = await db.users.findById(session.userId);
const locale = user?.locale ?? null;

Save their choice immediately when they change it. Make the language switcher easy to find. Let them change their mind anytime.

2. URL locale in path, subdomain, or query parameter

URLs are explicit and shareable. When someone visits /fr-CA/pricing or fr.example.com, they chose that locale. Honor it for that request and remember it.

const u = new URL(location.href);
const pathSegment = u.pathname.split('/').filter(Boolean)[0];
const subdomain = location.hostname.split('.')[0];
const query = u.searchParams.get('lang') || u.searchParams.get('locale');

const supported = ['en', 'en-GB', 'fr', 'fr-CA', 'de'];
const locale = [pathSegment, subdomain, query].find(v => supported.includes(v)) || null;

When you need to handle deep links, ask the user if they want to switch languages. Don't force a redirect.

3. Stored client preference in cookies or localStorage

Remember what guests choose between visits. This works well for returning visitors on the same device.

const fromCookie = document.cookie.match(/(?:^|;\s*)locale=([^;]+)/)?.[1] ?? null;
const fromStorage = localStorage.getItem('locale');
const locale = fromStorage || fromCookie || null;

Shared devices create problems here. A family computer or library terminal will show the last person's choice. After someone signs in, their profile preference should override this.

4. Browser language preferences from navigator.languages

The browser tells you which languages the user prefers, in order. Match this list against what your app supports.

const preferred = navigator.languages || [navigator.language];
const supported = ['fr-CA', 'fr', 'en', 'de'];

const exactMatch = preferred.find(lang => supported.includes(lang));
const languageMatch = preferred
  .map(lang => lang.split('-')[0])
  .find(lang => supported.includes(lang));

const locale = exactMatch || languageMatch || null;

Use this when you have nothing more explicit. Never override a URL parameter or profile choice with browser preferences.

5. Accept-Language HTTP header on server

On the first request, the server receives an Accept-Language header. This contains the same preference list with quality weights.

const acceptLanguage = req.headers['accept-language'] || '';
const preferences = acceptLanguage
  .split(',')
  .map(part => {
    const [tag, quality = '1'] = part.trim().split(';q=');
    return { tag: tag.toLowerCase(), quality: Number(quality) };
  })
  .sort((a, b) => b.quality - a.quality)
  .map(pref => pref.tag);

const supported = ['en', 'en-gb', 'fr', 'fr-ca', 'de'];
const exactMatch = preferences.find(tag => supported.includes(tag));
const languageMatch = preferences
  .map(tag => tag.split('-')[0])
  .find(tag => supported.includes(tag));

const locale = exactMatch || languageMatch || null;

This matters for server-side rendering and edge routing. Use it to set a sensible default. Once the user makes a choice, stick with their choice.

6. Single language from navigator.language

This gives you one language instead of a list. The API is simpler but less precise.

const browserLanguage = navigator.language || '';
const locale = browserLanguage.split('-')[0] || null;

Prefer navigator.languages when you can. Fall back to this when you need something simple.

7. Locale from Intl.DateTimeFormat resolution

The JavaScript runtime resolves what locale it will use for formatting. This tells you how dates and numbers will appear by default.

const resolved = new Intl.DateTimeFormat().resolvedOptions().locale;
const language = resolved.split('-')[0];

Use this for formatting defaults, not for content translation. The locale for formatting numbers might differ from the language someone wants to read.

8. OAuth profile language from identity providers

Some OAuth providers include locale in user profiles. Google and other identity providers sometimes share this data.

const profile = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
  headers: { Authorization: `Bearer ${accessToken}` }
}).then(response => response.json());

const locale = profile.locale ? profile.locale.split('-')[0] : null;

Treat this as a hint after login, not a requirement. The user might want different settings in your app than in their Google account.

9. Country code top-level domain

A .fr domain suggests France, not necessarily the French language. Belgians and Swiss people speak French too. Germans and Austrians both speak German.

const tld = location.hostname.split('.').pop();
const countryHint = {
  fr: 'FR',
  de: 'DE',
  es: 'ES',
  uk: 'GB'
}[tld] || null;

Use this as a region hint for currency and formatting. Don't use it to guess content language. Many countries are multilingual.

10. Country from IP geolocation

Mapping IP addresses to countries helps with currency and regional formats. It fails for language detection.

const geoData = await fetch('https://ipapi.co/json/').then(r => r.json());
const country = (geoData.country_code || '').toUpperCase();

VPNs break this immediately. People travel with laptops. Many countries speak multiple languages. Use IP geolocation only as a last resort for regional formatting, never for language selection.

11. Timezone-based inference

Timezone data helps format dates correctly. It says nothing reliable about language preferences.

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

Someone in America/Toronto might prefer English or French. Someone in Europe/Brussels might want Dutch, French, or German. VPNs and travel make this even less reliable.

12. User agent string parsing

Extracting locale from the User-Agent header breaks constantly. The format varies across browsers. Privacy changes are removing this data entirely.

const userAgent = req.headers['user-agent'] || '';
const match = userAgent.match(/; ([a-z]{2}-[A-Z]{2})\)/);
const locale = match ? match[1].split('-')[0] : null;

Don't build anything on top of this. It will break. Modern browsers are actively reducing what the user agent reveals.

Join our Hackathon 🚀

We're sponsoring the Hack this Fall 2025 hackathon and giving away some prizes to the most creative uses of Lingo.dev. To learn more, join our Discord channel.

Beyond the basics: 21 TypeScript features you might not know about

David Turnbull — Wed, 22 Oct 2025 01:34:02 +0000

Introduction

At Lingo.dev, I write a lot of TypeScript code. I'm definitely not a wizard, but I do try to play with features that go beyond the basic types.

This post describes a number of features (and when you might want to use them) to help you expand your knowledge beyond the absolute fundamentals.

1. Readonly arrays, tuples, and `as const` assertions

By default, arrays and objects are mutable, and TypeScript widens literal values to their general types. This makes it harder for TypeScript to help you catch bugs and provide accurate autocomplete.

const colors = ["red", "green", "blue"];
// Type: string[] - could be any strings
colors.push("yellow"); // Allowed, might not be what you want

type Color = (typeof colors)[number]; // string (too general!)

Solution

Use as const to make everything readonly and preserve literal types, or use readonly for specific arrays.

const colors = ["red", "green", "blue"] as const;
// Type: readonly ["red", "green", "blue"]
colors.push("yellow"); // ✗ Error: can't modify readonly array

type Color = (typeof colors)[number]; // "red" | "green" | "blue" ✓

// Or for function parameters:
function display(items: readonly string[]) {
  items.push("x"); // ✗ Error: can't modify
  items.forEach(console.log); // ✓ OK: reading is fine
}

When to use it

Configuration or constant data that shouldn't change
Preventing accidental mutations
Preserving literal types for better type inference
Function parameters that shouldn't be modified

Learn more: TypeScript Docs: ReadonlyArray

2. `keyof typeof` for object-as-const enums

TypeScript enums have some quirks and generate JavaScript code. Sometimes you just want to define constants in an object and derive types from them.

Solution

Combine as const (to lock in literal values), typeof (to get the object's type), and keyof (to get the union of keys or values).

// Define your constants as a plain object
const STATUS = {
  PENDING: "pending",
  APPROVED: "approved",
  REJECTED: "rejected",
} as const; // Lock in the literal values

// Get a union of the values
type Status = (typeof STATUS)[keyof typeof STATUS];
// "pending" | "approved" | "rejected"

function setStatus(status: Status) {
  // TypeScript validates and autocompletes!
}

setStatus(STATUS.APPROVED); // ✓
setStatus("pending"); // ✓
setStatus("invalid"); // ✗ Error

When to use it

Alternative to enums with better JavaScript output
Creating const-based configuration with derived types
When you want both runtime values and compile-time types

Learn more: TypeScript Docs: typeof types

3. Labeled tuple elements

Tuples like [number, number, boolean] work, but it's not obvious what each position means. Is it [width, height, visible] or [x, y, enabled]?

Solution

Give tuple positions meaningful names that show up in your editor's autocomplete and error messages.

// Before: unclear what each number means
type Range = [number, number, boolean?];

// After: self-documenting
type Range = [start: number, end: number, inclusive?: boolean];

function createRange([start, end, inclusive = false]: Range) {
  // Your editor will show you the parameter names!
  return { start, end, inclusive };
}

createRange([1, 10, true]); // Clear what each argument means

When to use it

Function parameters that are tuple-based
Return values with multiple related pieces of data
Any tuple where the meaning of positions isn't obvious

Learn more: TypeScript Docs: tuple types

4. Indexed access and element type extraction

You have a complex type and want to refer to just one property's type, or extract what's inside an array, without repeating yourself.

Solution

Use bracket notation (Type["property"]) to access property types, and [number] to get array element types.

type User = {
  id: number;
  profile: {
    name: string;
    emails: string[];
  };
};

// Access nested property types
type ProfileType = User["profile"]; // { name: string; emails: string[] }
type NameType = User["profile"]["name"]; // string

// Extract array element type
type Email = User["profile"]["emails"][number]; // string

When to use it

Deriving types from existing types (DRY principle)
Extracting array/tuple element types
Working with nested structures without redefining types

Learn more: TypeScript Docs: indexed access types

5. User-defined type guards (`arg is T`)

You write a function that checks if something is a certain type, but TypeScript doesn't understand that the check actually narrows the type.

function isPerson(x: unknown) {
  return typeof x === "object" && x !== null && "name" in x;
}

function greet(x: unknown) {
  if (isPerson(x)) {
    x.name; // ✗ Error: TypeScript still thinks x is 'unknown'
  }
}

Solution

Use a type predicate (arg is Type) to tell TypeScript that your function performs a type check.

type Person = { name: string; age: number };

function isPerson(x: unknown): x is Person {
  return (
    typeof x === "object" &&
    x !== null &&
    "name" in x &&
    typeof (x as any).name === "string"
  );
}

function greet(x: unknown) {
  if (isPerson(x)) {
    console.log(x.name); // ✓ TypeScript knows x is Person here!
  }
}

When to use it

Validating data from APIs or user input
Type-safe validation functions
Discriminating between types in a union

Learn more: TypeScript Docs: type predicates

6. Exhaustive checking with `never`

You have a union type (like different shapes or statuses) and a switch statement. Later, someone adds a new variant to the union but forgets to handle it in the switch. No error is thrown - it just silently doesn't work.

Solution

Add a default case that assigns the value to a never type. If all cases are handled, the default is unreachable. If a case is missing, TypeScript will error because the value isn't assignable to never.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number };

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.size ** 2;
    default:
      // If all cases are handled, this is unreachable
      const _exhaustive: never = shape;
      throw new Error(`Unhandled shape: ${_exhaustive}`);
  }
}

// Later, someone adds triangle:
// type Shape = ... | { kind: "triangle"; base: number; height: number };
// ✓ TypeScript error in default case: triangle is not assignable to never!

When to use it

Switch statements over discriminated unions
Ensuring all union variants are handled
Catching bugs when types evolve over time

Learn more: TypeScript Docs: exhaustiveness checking

7. Type-only imports and exports (`import type`/`export type`)

Sometimes you import types from other modules, but those imports show up in your compiled JavaScript even though they're only used for type checking. This can cause circular dependencies or bundle bloat.

Solution

Use import type to tell TypeScript: "this is only needed for type checking, erase it completely from the JavaScript."

// Regular import - might end up in compiled JS
import { User } from "./types";

// Type-only import - guaranteed to be removed from JS
import type { User } from "./types";

// Mixed imports
import { saveUser, type User } from "./api";
//       ^^^^^^^^^  ^^^^^^^^^^^
//       value      type-only

When to use it

Preventing circular dependency issues
Keeping your JavaScript bundle smaller
When using build tools that require explicit type-only imports (isolatedModules)
Clarifying intent (this is only for types, not runtime code)

Learn more: TypeScript Docs: importing types

8. Ambient module declarations for non-code assets

You import non-TypeScript files (like images, CSS, or data files), but TypeScript doesn't know what type they should have.

import logo from "./logo.svg"; // ✗ Error: Cannot find module

Solution

Create ambient module declarations that tell TypeScript how to type these imports.

// In a .d.ts file (like global.d.ts or declarations.d.ts)
declare module "*.svg" {
  const url: string;
  export default url;
}

declare module "*.css" {
  const classes: { [key: string]: string };
  export default classes;
}

// Now these work:
import logo from "./logo.svg"; // logo: string
import styles from "./app.css"; // styles: { [key: string]: string }

When to use it

Typing imports of images, fonts, styles
JSON or data files not handled by your build tool
Any non-TypeScript asset your bundler processes

Learn more: TypeScript Docs: module declaration templates

9. The `satisfies` operator

Sometimes you want TypeScript to check that an object matches a type, but you also want TypeScript to remember the specific values you used (not just that they're strings or numbers).

// Without satisfies - loses specific information
const routes: Record<string, string> = {
  home: "/",
  profile: "/users/:id",
};
// routes.profile is just 'string', not the specific "/users/:id"

Solution

satisfies checks your object against a type without changing what TypeScript remembers about it.

const routes = {
  home: "/",
  profile: "/users/:id",
} satisfies Record<string, `/${string}`>; // Must be strings starting with "/"

// routes.profile is still the literal "/users/:id" - exact value preserved!

When to use it

Configuration objects where you want both validation AND specific value types
When you need autocomplete on exact values, not just the general type

Learn more: TypeScript Docs: satisfies operator

10. Assertion functions (`asserts` and `asserts x is T`)

Sometimes you want a function that throws an error if a condition isn't met. Type guards (above) only work in if statements - they don't affect the code after the function call.

function assertNotNull(x: unknown) {
  if (x == null) throw new Error("Value is null!");
}

const data: string | null = getValue();
assertNotNull(data);
// TypeScript still thinks data might be null here

Solution

Assertion functions use asserts to tell TypeScript: "if this function returns (doesn't throw), then the condition is true."

function assertNotNull<T>(x: T): asserts x is NonNullable<T> {
  if (x == null) throw new Error("Value is null!");
}

const data: string | null = getValue();
assertNotNull(data);
// ✓ TypeScript now knows data is definitely string here!
data.toUpperCase(); // Safe to use

When to use it

Validation functions that throw on failure
Enforcing runtime invariants
Early error checking at function boundaries

Learn more: TypeScript Docs: assertion functions

11. Template literal types for string patterns

Imagine you have event names like "user:login", "user:logout", "post:create", etc. You want TypeScript to autocomplete these and catch typos, but there are too many to list manually.

Solution

Template literal types let you describe string patterns using the same syntax as JavaScript template strings.

// Generate all combinations automatically
type EventName = `${"user" | "post"}:${"create" | "delete"}`;
// Result: "user:create" | "user:delete" | "post:create" | "post:delete"

function trackEvent(event: EventName) {
  // TypeScript will autocomplete and validate the event names!
}

trackEvent("user:create"); // ✓ OK
trackEvent("user:update"); // ✗ Error - not a valid combination

When to use it

API routes or event names that follow a pattern
CSS class names with prefixes/suffixes
Any structured string format (like database table names, file paths)

Learn more: TypeScript Docs: template literal types

12. Distributive conditional types

You want to filter or transform a union type (like string | number | null) by applying logic to each member.

Solution

Conditional types automatically distribute over unions when the checked type is "naked" (not wrapped in another type).

// Remove null and undefined from a union
type NonNullish<T> = T extends null | undefined ? never : T;

// This distributes: checks each member separately
type Clean = NonNullish<string | number | null>;
// string | number (null was filtered out)

// Extract only function types
type FunctionsOnly<T> = T extends (...args: any[]) => any ? T : never;
type Fns = FunctionsOnly<string | ((x: number) => void) | boolean>;
// (x: number) => void

When to use it

Filtering union types
Building utility types like Exclude, Extract
Transforming each member of a union differently

Learn more: TypeScript Docs: distributive conditional types

13. `infer` to capture types inside conditionals

You need to extract a piece of a complex type (like "what type does this function return?" or "what's inside this array?").

Solution

Use infer to create a type variable that captures part of the type you're examining.

// Extract the return type of a function
type ReturnType<F> = F extends (...args: any[]) => infer R ? R : never;

type MyFunc = (x: number) => string;
type Result = ReturnType<MyFunc>; // string

// Extract array element type
type ElementType<T> = T extends (infer E)[] ? E : never;

type Numbers = ElementType<number[]>; // number
type Mixed = ElementType<(string | boolean)[]>; // string | boolean

When to use it

Extracting parameter or return types from functions
Getting element types from arrays or tuples
Parsing types inside template literals or complex structures

Learn more: TypeScript Docs: inferring within conditional types

14. Mapped type modifiers (`+readonly`, `-?`, etc.)

Sometimes you need to take an existing type and make all properties required (remove ?), or make everything mutable (remove readonly). Manually rewriting each property is tedious.

Solution

Mapped types can add (+) or remove (-) the readonly and optional (?) modifiers.

// Remove readonly from all properties
type Mutable<T> = {
  -readonly [K in keyof T]: T[K];
};

// Remove optional (?) from all properties
type Required<T> = {
  [K in keyof T]-?: T[K];
};

type Config = Readonly<{ port?: number; host?: string }>;
type EditableConfig = Mutable<Required<Config>>; // { port: number; host: string }

When to use it

Creating editable versions of readonly types
Making all properties required for validation functions
Building utility types that transform property modifiers

Learn more: TypeScript Docs: mapping modifiers

15. Key remapping in mapped types (`as`)

You want to transform an object type by changing property names (like removing a prefix, or filtering out certain properties), but mapped types normally keep the same keys.

Solution

Use as inside a mapped type to transform keys as you iterate over them.

// Remove private properties (those starting with _)
type RemovePrivate<T> = {
  [K in keyof T as K extends `_${string}` ? never : K]: T[K];
};

type WithPrivate = { name: string; _secret: number };
type Public = RemovePrivate<WithPrivate>; // { name: string }

// Add a prefix to all keys
type Prefixed<T> = {
  [K in keyof T as `app_${string & K}`]: T[K];
};

type Original = { id: number; name: string };
type Result = Prefixed<Original>; // { app_id: number; app_name: string }

When to use it

Creating public versions of types by filtering out internal properties
Converting between naming conventions (camelCase to snake_case)
Filtering object types based on key patterns

Learn more: TypeScript Docs: key remapping in mapped types

16. Const type parameters

When you pass an array to a generic function, TypeScript normally "widens" it to a general array type, losing information about the specific values.

function identity<T>(value: T) {
  return value;
}

const pair = identity([1, 2]); // Type is number[], not [1, 2]

Solution

Add const before the type parameter to tell TypeScript: "keep this as specific as possible."

function identity<const T>(value: T) {
  return value;
}

const pair = identity([1, 2]); // Type is [1, 2] - exact tuple preserved!

When to use it

Functions that should preserve exact array/tuple structures
Builder functions where you want to track literal values through transformations

Learn more: TypeScript Docs: const type parameters

17. Variadic tuple types and spreads

How do you type a function that needs to accept different numbers of arguments while keeping track of each argument's type?

Solution

Variadic tuples let you work with lists of types that can grow or shrink. Think of ... as "spread this list of types here."

// Type that adds an element to the end of a tuple
type Push<T extends unknown[], U> = [...T, U];

type Result = Push<[string, number], boolean>; // [string, number, boolean]

// Real example: Typing a function wrapper
function logged<Args extends unknown[], Return>(
  fn: (...args: Args) => Return,
): (...args: Args) => Return {
  return (...args) => {
    console.log("Calling with:", args);
    return fn(...args);
  };
}

When to use it

Wrapping functions while preserving their exact argument types
Creating type-safe function composition utilities
Building tuple manipulation types

Learn more: TypeScript Docs: tuple types

18. The `this` parameter in functions

When a function uses this, TypeScript doesn't know what type this should have. This causes problems with methods, callbacks, and event handlers.

function setName(name: string) {
  this.name = name; // ✗ Error: 'this' has type 'any'
}

Solution

Add an explicit this parameter (doesn't count as a real parameter at runtime) to type what this should be.

interface Model {
  name: string;
  setName(this: Model, newName: string): void;
}

const model: Model = {
  name: "Initial",
  setName(this: Model, newName: string) {
    this.name = newName; // ✓ TypeScript knows what 'this' is!
  },
};

model.setName("Updated"); // Works
const fn = model.setName;
fn("Test"); // ✗ Error: 'this' context is wrong

When to use it

Methods that rely on this
Event handler callbacks
Functions designed to be called with .call() or .apply()

Learn more: TypeScript Docs: this parameters

19. `unique symbol` for nominal-like typing

TypeScript uses "structural typing" - two types with the same structure are considered the same. Sometimes you want types that are structurally identical but logically different (like UserID vs ProductID, both strings).

type UserId = string;
type ProductId = string;

function getUser(id: UserId) {
  /* ... */
}

const productId: ProductId = "prod-123";
getUser(productId); // ✗ We want this to be an error, but it's not!

Solution

Use unique symbol to create a "brand" that makes types incompatible even if their structure is identical.

declare const USER_ID: unique symbol;
type UserId = string & { [USER_ID]: true };

declare const PRODUCT_ID: unique symbol;
type ProductId = string & { [PRODUCT_ID]: true };

function getUser(id: UserId) {
  /* ... */
}

const productId = "prod-123" as ProductId;
getUser(productId); // ✓ Now this IS an error!

When to use it

Preventing mixing up IDs of different types (user IDs, order IDs, etc.)
Creating "nominal" types that can't be accidentally substituted
Type-safe keys for registries or dependency injection

Learn more: TypeScript Docs: unique symbol

20. Module augmentation and declaration merging

You're using a third-party library and need to add properties to its types (like adding custom configuration options), but you can't edit the library's code.

Solution

Use module augmentation to add to existing interfaces or modules from the outside.

// In your own .d.ts file
declare module "express" {
  // Add to Express's Request interface
  interface Request {
    user?: { id: string; name: string };
  }
}

// Now TypeScript knows about req.user in your Express handlers!

When to use it

Extending library types with custom properties
Adding types for library features that aren't fully typed
Plugin systems where you're registering new capabilities

Learn more: TypeScript Docs: module augmentation

21. Constructor signatures and abstract "newable" types

You want to write a function that accepts a class (not an instance) and creates instances of it. How do you type "something that can be constructed with new"?

function createInstance(SomeClass: ???) {
  return new SomeClass();
}

Solution

Use a constructor signature: new (...args: any[]) => T to describe something that can be constructed.

// Type describing a constructor
type Constructor<T = unknown, Args extends unknown[] = any[]> = new (
  ...args: Args
) => T;

function createInstance<T>(Ctor: Constructor<T>): T {
  return new Ctor();
}

class User {
  name = "Unknown";
}

const user = createInstance(User); // user: User ✓

// More complex: factory with specific constructor arguments
function createPair<T>(
  Ctor: Constructor<T, [string, number]>,
  name: string,
  age: number,
): T {
  return new Ctor(name, age);
}

When to use it

Dependency injection frameworks
Factory functions that create instances
Generic code that works with classes as values
Testing utilities that mock constructors

Learn more: TypeScript Docs: constructor signatures in interfaces

How to create a ChatGPT app with OpenAI's Apps SDK

David Turnbull — Tue, 07 Oct 2025 03:31:37 +0000

Introduction

OpenAI has announced the introduction of "apps" for ChatGPT:

Apps are essentially plugins for ChatGPT that can be invoked with natural language. They can render custom user interfaces, which enables richer and more interactive user experiences, and are built on top of the Model Context Protocol (MCP) specification, which means you don't have to learn an entirely new technology.

At this stage, only certain developers are allowed to distribute their apps, but anyone can start developing them. I'm keen to explore possible opportunities for Lingo.dev, so I've immediately started digging into what's possible.

This guide explains what I've learned about how to get an app up and running.

👉 In future articles, I'll be doing deeper dives into ChatGPT app development, so follow me on Twitter or LinkedIn to keep up to date.

Step 1. Set up the examples repo

OpenAI has provided a repo of app examples to help understand the basic lifecycle of apps and common patterns, such as creating interactive interfaces.

To set up the repo:

Clone the openai-apps-sdk-examples repo:

git clone https://github.com/openai/openai-apps-sdk-examples.git

Navigate into the repo:
```
cd openai-apps-sdk-examples
```
Install the dependencies:
```
pnpm install
```

Step 2. Start the development servers

Apps are made up of an MCP server, which is responsible for defining things like tools and resources, and frontend code, which is responsible for rendering UI elements that can be displayed withi ChatGPT.

Start the frontend server

In the terminal, run the following comand:

pnpm run dev

Start the backend server

In a separate terminal:

Navigate into the directory for the server code:
```
cd pizzaz_server_node
```
Run the server:
```
pnpm start
```

The server should become available at http://localhost:8000.

Step 3. Expose the local server

For ChatGPT to be able to "talk" to an app, it needs to be available via a public URL. During development, the easiest way to do this is with an SSH tunneling tool, such as ngrok. This kind of tool exposes a local server via a publicly accessible URL.

To set up ngrok:

Sign up for an ngrok account.
Install ngrok:
```
brew install ngrok
```
Configure an authtoken for ngrok:
```
ngrok config add-authtoken <authtoken>
```
(You'll see the authtoken after signing up for an account.)
Start a tunnel:
```
ngrok http 8000
```
Here, "8000" is the port number. If the server is not running on port 8000, be sure to specify the actual port number.

Note: There are many alternatives to ngrok, including free and open-source options. For a (very) comprehensive list, see awesome-tunneling.

Step 4. Enable Developer Mode

To test an app that's in development, Developer Mode must be enabled in ChatGPT.

To enable Developer Mode:

In ChatGPT, navigate to Settings.
In the sidebar, select Apps & Connectors.
Scroll down and click Advanced settings.
Enable Developer mode.

When Developer Mode is enabled, ChatGPT should look like this:

Step 5. Create an app

In ChatGPT, navigate to Settings.
In the sidebar, select Apps & Connectors.
Click Create.
In the Name field, enter a name for the app (e.g., "Hello World").
In the MCP Server URL field, enter the URL of the MCP endpoint. This URL must be public, support HTTPS, and point directly to the /mcp endpoint (i.e., not the root server URL).
In the Authentication dropdown, select No authentication.
Enable I trust this application.
Click Create.

Step 6. Use the app

In ChatGPT, start a new chat.
Click the + (Plus) icon.
In the More menu, select the app.
Submit a prompt that explicitly invokes the app:

Using the "Hello World" app, give me a list of pizza places.

Next steps

Follow me on Twitter for more articles about developing ChatGPT apps
Read the official documentation
Browse the examples repo

How to serve Markdown to AI agents: Making your docs more AI-friendly

David Turnbull — Thu, 02 Oct 2025 00:29:02 +0000

Introduction

If you've been on developer Twitter recently, you might have seen Bun's tweet about serving Markdown directly to AI coding assistants like Claude Code.

// Detect dark theme var iframe = document.getElementById('tweet-1971934734940098971-155'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1971934734940098971&theme=dark" }

Both Mintlify and Fumadocs have already immediately implemented the feature in their documentation platforms, and I just implemented it myself for Lingo.dev.

// Detect dark theme var iframe = document.getElementById('tweet-1972315377599447390-420'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1972315377599447390&theme=dark" }

Here's why it matters and how to implement it yourself.

The problem: HTML bloat

AI agents can fetch the content of web pages to help developers. Most of the time, this content comes back as HTML. But HTML contains markup that consume tokens without adding meaningful information, degrading performance.

The solution: Content negotiation

The elegant solution is content negotiation. This is a standard HTTP mechanism where clients tell servers what format they prefer using the Accept header.

When an AI agent requests your documentation with Accept: text/markdown or Accept: text/plain, your server can respond with Markdown instead of HTML.

This means:

Fewer tokens for the same information
Easier parsing and comprehension
More documentation fits in the context window

Implementation guide

The exact implementation detail depends on your programming language and framework, but the general approach is the same.

Let's walk through an example with Express.js.

1. Detect the Accept header

When a request arrives, check if the Accept header contains text/markdown or text/plain:

app.get("/docs/*", (req, res) => {
  const acceptHeader = req.headers.accept || "";

  if (acceptHeader.includes("text/markdown")) {
    // Serve Markdown
  } else if (acceptHeader.includes("text/plain")) {
    // Serve plain text
  } else {
    // Serve HTML (default behavior)
  }
});

2. Serve the raw Markdown

Load and return the raw Markdown content for the requested page:

if (acceptHeader.includes("text/markdown")) {
  const markdownContent = await loadMarkdownForPage(req.path);
  res.setHeader("Content-Type", "text/markdown; charset=utf-8");
  res.send(markdownContent);
  return;
}

3. Fallback to existing behavior

For all other requests (browsers, crawlers, etc.), continue with your existing HTML rendering:

res.render("docs", { content: processedContent });

4. Test your implementation

Use curl to verify your implementation works correctly:

# Request Markdown
curl -H 'Accept: text/markdown' https://lingo.dev/en/cli

# Request plain text
curl -H 'Accept: text/plain' https://lingo.dev/en/cli

# Request HTML (default)
curl -H 'Accept: text/html' https://lingo.dev/en/cli

For Markdown requests, you should see:

Response header: Content-Type: text/markdown; charset=utf-8
Body: Raw Markdown content without HTML tags

For HTML requests, you should see your normal rendered page.

AI coding anti-patterns: 6 things to avoid for better AI coding

David Turnbull — Thu, 25 Sep 2025 03:51:48 +0000

Introduction

Since joining Lingo.dev, startup life has been pushing me to eek out as much as I can from AI coding assistants. The more I do this though, the more I've identified counter-productive patterns that I'm sure other people are suffering from.

This article covers some of the most significant anti-patterns that I want to proclaim from my soapbox.

1. Assuming understanding

If your AI assistant regularly goes off the rails, your prompts might not be as clear as you think. There's probably a lot of room for interpretation, leading to outcomes that are technically correct but not what you want.

The simplest option is to ask the AI to explain its understanding of your prompt back to you in its own words.

For more reliability, discuss the probelm and intent with the AI, prompting it to ask questions until the problem space is well understood. You'll likely realize your own understanding has some significant gaps.

2. Persisting with dead-end conversations

When an AI assistant goes down the wrong path, it can be difficult to get it back on the right path.

If you feel like you're not making progress in a certain conversation, don't fall into the sunk cost fallacy. Instead, start over and try again.

LLMs are slot machines, and simply pulling the lever again can be the most effective option. (This is one of those "If it is stupid but it works, it isn't stupid" ideas.)

3. Wasting tokens on codebase exploration

AI coding tools are useful for exploring a codebase, but they also stumble down irrelevant rabbit holes. This means all sorts of useless information can end up in the context window, degrading the performance of the model.

If you know what the relevant parts of the codebase are, or if you know it'll only take you a couple of minutes to figure it out, refer to those files directly.

Alternatively:

Use AI to explore the codebase.
Ask the AI to return the list of file paths relevant to a certain task.
Start a new conversation and reference those files directly.

That's the best of both worlds with only a couple of extra keystrokes.

4. Using too many MCP servers

Model Context Protocol (MCP) servers can be useful — I'm particularly fond of Context7 and Playwright MCP — but each server exposes tools with descriptions and those descriptions eat into the context window.

The more MCP servers that are enabled by default, the worse your starting point for every conversation. It's an immediate handicap.

Here's what I recommend:

Only enable MCP servers when they're relevant to the task you're working on.
Get comfortable with toggling MCP servers on and off in your coding assistant.
Consider if an MCP server is even necessary. For example, AI coding tools are excellent at using the GitHub CLI, so setting up an MCP to interact with GitHub may not be the best trade-off.

5. Bloated memory files

Most AI coding assistants have some concept of "memory" or "rules". These are instructions that are automatically injected into the context window based on what part of the code is being explored or modified.

These files can be a huge timesaver, but it's also easy for them to become bloated over time with an ever-expanding list:

Preferences that aren't relevant to every request
Rules that are better followed without the use of AI

Here's what I recommend:

Start by putting preferences in text files that you have to explicitly reference. If you find reference them regularly, "promote" them to memory files.
Don't waste the context window on rules that can be handled deterministically through linting and formatting tools.
Review and prune memory files on a regular basis. Ensure that every rule fights for its right to exist.

6. Having loyalty to any assistant or model

On Twitter, I regularly see die-hard fans of Claude Code or Codex or Cursor or whatever else. This kind of fandom only benefits the makers of the tools, not the people using the tools.

Instead:

Be willing to jump between tools and models
Regularly reevaluate (possibly outdated) assumptions about the "best" tools
Don't buy into the hype that tool makers are selling

I don't think it's necessary to constantly seek greener grass, but at least don't become static when the ground is shifting so quickly.

21 native browser APIs you might not have used before

David Turnbull — Wed, 17 Sep 2025 03:49:04 +0000

Introduction

When I started working at Lingo.dev, I noticed that some Node.js packages were no longer needed since they could be replaced with native features.

Similarly, modern browsers ship with dozens of lesser-known APIs. These native features handle everything from haptic feedback to barcode scanning, sometimes eliminating the need for external libraries.

Here are 21 browser APIs with practical code examples for each.

1. Web Share API

The Web Share API lets you tap into the native sharing capabilities of the operating system. Instead of building custom share buttons for every platform, you can invoke the system's share dialog with a single API call.

navigator.share({
  title: 'Check out this article',
  text: 'Found this interesting article about browser APIs',
  url: 'https://example.com/article'
});

2. Vibration API

Control the device's vibration motor to provide haptic feedback. This works primarily on mobile devices and can enhance user interactions with subtle physical responses.

// Vibrate pattern: 100ms on, 50ms off, 100ms on
navigator.vibrate([100, 50, 100]);

3. Broadcast Channel API

Communicate between different browser contexts (tabs, windows, iframes) of the same origin. Think of it as a message bus for your application across multiple windows.

const channel = new BroadcastChannel('app-notifications');

// Send message to other tabs
channel.postMessage({ type: 'user-logout' });

// Listen for messages
channel.onmessage = (event) => {
  console.log('Received:', event.data);
};

4. Screen Wake Lock API

Prevent the device screen from dimming or locking while your app is in use. Perfect for recipe apps, presentation tools, or video players.

const wakeLock = await navigator.wakeLock.request('screen');

// Release when done
wakeLock.release();

5. Page Visibility API

Detect when a page becomes visible or hidden to the user. This helps optimize performance by pausing unnecessary operations when the user switches tabs.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Tab is hidden');
  } else {
    console.log('Tab is visible');
  }
});

6. Clipboard API

Modern, promise-based API for interacting with the clipboard. It handles both text and other data types with proper permission management.

// Copy text
await navigator.clipboard.writeText('Hello World');

// Read text
const text = await navigator.clipboard.readText();

7. Web Speech API

Add speech recognition and synthesis to your web apps. The API consists of two parts: SpeechRecognition for converting speech to text, and SpeechSynthesis for text-to-speech.

// Speech to text
const recognition = new webkitSpeechRecognition();
recognition.onresult = (event) => {
  console.log(event.results[0][0].transcript);
};
recognition.start();

// Text to speech
speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));

8. Battery Status API

Monitor the device's battery level and charging status. Useful for adjusting app behavior based on power availability.

const battery = await navigator.getBattery();
console.log(`Battery: ${battery.level * 100}%`);
console.log(`Charging: ${battery.charging}`);

9. Network Information API

Get information about the user's network connection, including connection type and effective bandwidth. This helps you adapt content delivery based on network conditions.

console.log(`Connection: ${navigator.connection.effectiveType}`);
console.log(`Downlink: ${navigator.connection.downlink}Mbps`);

10. Payment Request API

Streamline checkout flows by integrating with the browser's native payment UI. Users can pay with saved cards, digital wallets, and other payment methods.

const payment = await new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } } }
).show();

11. Resize Observer API

Efficiently monitor element size changes without relying on window resize events. Perfect for responsive components that need to react to size changes.

new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(`New width: ${entry.contentRect.width}`);
  });
}).observe(document.querySelector('.element'));

12. Credential Management API

Streamline sign-in flows by integrating with the browser's password manager. Users can sign in with a single tap using saved credentials.

// Store credentials
await navigator.credentials.store(
  new PasswordCredential({ id: 'user@example.com', password: 'p@ssw0rd' })
);

// Get credentials
const cred = await navigator.credentials.get({ password: true });

13. Screen Orientation API

Control and respond to screen orientation changes. Useful for games, video players, and other apps that benefit from specific orientations.

// Lock to landscape
await screen.orientation.lock('landscape');

// Current orientation
console.log(screen.orientation.type); // "landscape-primary"

14. Idle Detection API

Detect when the user becomes idle (no interaction with keyboard, mouse, or screen). Useful for chat apps, collaborative tools, or security features.

const detector = new IdleDetector();
detector.addEventListener('change', () => {
  console.log(`User: ${detector.userState}, Screen: ${detector.screenState}`);
});
await detector.start({ threshold: 60000 });

15. File System Access API

Read and write files directly from the browser with user permission. This enables powerful file manipulation without server round-trips.

// Open file
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.text();

// Save file
const writable = await fileHandle.createWritable();
await writable.write('New content');
await writable.close();

16. EyeDropper API

Let users pick colors from anywhere on their screen. Perfect for design tools, theme customizers, or any app that works with colors.

const { sRGBHex } = await new EyeDropper().open();
console.log(sRGBHex); // "#ff5733"

17. WebOTP API

Automatically read SMS verification codes on mobile devices. This streamlines two-factor authentication by eliminating manual code entry.

const { code } = await navigator.credentials.get({
  otp: { transport: ['sms'] }
});

18. Contact Picker API

Access the device's contact list with user permission. Users can select contacts to share with your app without manual entry.

const contacts = await navigator.contacts.select(
  ['name', 'email'],
  { multiple: true }
);

19. Barcode Detection API

Detect and decode barcodes and QR codes directly in the browser. No external libraries needed for scanning various code formats.

const barcodes = await new BarcodeDetector().detect(imageElement);
console.log(barcodes[0].rawValue);

20. Geolocation API

While not exactly unknown, the Geolocation API has some lesser-used features like watching position changes and fine-tuning accuracy requirements.

// Get position with high accuracy
navigator.geolocation.getCurrentPosition(
  position => console.log(position.coords),
  error => console.error(error),
  { enableHighAccuracy: true }
);

// Watch position changes
const watchId = navigator.geolocation.watchPosition(position => {
  console.log(`Moved to: ${position.coords.latitude}, ${position.coords.longitude}`);
});

21. Notification API

Create system notifications that appear outside the browser window. Combined with service workers, these can work even when your app isn't open.

// Request permission
await Notification.requestPermission();

// Show notification
new Notification('Hello!', {
  body: 'This is a notification',
  icon: '/icon.png'
});

27 Rust-based alternatives to classic CLI apps

David Turnbull — Wed, 10 Sep 2025 03:08:54 +0000

Introduction

A couple of months ago, I started working at Lingo.dev/?utm_source=devto&utm_medium=organic&utm_content=lingodotdev/27-rust-based-alternatives-to-classic-cli-apps-2350. Since I was starting on a new laptop with a completely fresh slate, I took the opportunity to investigate the best Rust-based CLIs to help make my daily work that little bit more delightful.

Deep down, I know that remaking something in Rust doesn't inherently mean that it's better... but it certainly doesn't seem to hurt.

1. grep → ripgrep (rg) (55.0k ⭐)

ripgrep searches recursively and respects .gitignore by default. It skips binary and hidden files automatically, making searches faster and more relevant. The performance improvements come from parallelization and smart file filtering that avoids searching node_modules and build artifacts.

# grep
grep -r "TODO" src/

# rg
rg "TODO" src/

2. cat → bat (54.2k ⭐)

bat adds syntax highlighting, line numbers, and Git integration to file viewing. It pages long output automatically using your system pager. The syntax highlighting works for hundreds of languages and formats, making code review in the terminal more readable.

# cat
cat main.rs

# bat
bat main.rs

3. find → fd (39.5k ⭐)

fd simplifies file finding with regex support, color output, and parallel execution. It ignores hidden and gitignored files by default, reducing noise in search results. The simplified syntax makes common operations like finding files by extension more intuitive.

# find
find . -name "*.rs"

# fd
fd -e rs

4. cd → zoxide (29.3k ⭐)

zoxide learns your frequent directories. It jumps to them with partial names using frecency (frequency + recency) scoring. The tool eliminates repetitive navigation through deep directory structures.

# cd
cd /home/user/projects/myproject

# z
z myproject

5. make → just (27.5k ⭐)

just runs project commands without build system complexity. It organizes development tasks in a readable format. The syntax is simpler than make, focusing on commands rather than dependencies.

# make
make build

# just
just build

6. diff → delta (27.4k ⭐)

delta adds syntax highlighting to diffs. It supports side-by-side view and integrates with Git as a pager. The highlighting makes it easier to spot changes within lines, not just which lines changed.

# diff
diff -u file1.txt file2.txt

# delta
diff -u file1.txt file2.txt | delta

7. time → hyperfine (26.0k ⭐)

hyperfine benchmarks commands statistically. It runs multiple iterations with warmups to provide reliable measurements. The statistical analysis includes mean, median, and standard deviation.

# time
time ls -la

# hyperfine
hyperfine 'ls -la'

8. ls → lsd (14.8k ⭐)

lsd adds color, icons, Git status, and tree view to directory listings. It respects existing ls flags while providing better visual hierarchy through icons and color coding. The Git integration shows modified files at a glance without running separate commands.

# ls
ls -la

# lsd
lsd -la

9. top/htop → bottom (btm) (11.8k ⭐)

bottom shows system metrics as interactive graphs. It combines process management with resource monitoring in a single interface. The graphs provide historical context that text-based displays lack.

# top
top

# btm
btm

10. tree → broot (11.7k ⭐)

broot filters directory trees interactively. Type to filter, navigate, and execute actions on selections. The fuzzy matching and modal interface speed up file system navigation.

# tree
tree -L 2

# broot
broot --sizes

11. du → dust (10.4k ⭐)

dust visualizes disk usage with bars and smart recursion. It filters results by regex to find specific file types. The bar charts make it immediately obvious which directories consume the most space.

# du
du -sh *

# dust
dust

12. hexdump/xxd → hexyl (9.8k ⭐)

hexyl colors hex output to distinguish offsets, bytes, and ASCII. It makes binary inspection clearer by highlighting different byte values and patterns. The colored output helps identify structures and patterns in binary data.

# xxd
xxd file.bin

# hexyl
hexyl file.bin

13. curl → xh (6.8k ⭐)

xh simplifies HTTP requests with concise syntax. It outputs readable responses by default with automatic formatting. The HTTPie-compatible syntax reduces the complexity of common API interactions.

# curl
curl https://httpbin.org/json

# xh
xh GET https://httpbin.org/json

14. sed → sd (6.5k ⭐)

sd focuses on search and replace with simple syntax. It uses regex by default; use -F for literal matches if you don't want escaping. The straightforward find-and-replace syntax eliminates the cognitive overhead of sed's command language.

# sed
sed -i 's/foo/bar/g' file.txt

# sd
sd 'foo' 'bar' file.txt

15. dig → dog (6.5k ⭐)

dog queries DNS with colored output. It supports DNS over TLS, HTTPS, and JSON export for modern DNS workflows. The colored output groups related records and highlights important fields.

# dig
dig example.com

# dog
dog example.com

16. ps → procs (5.7k ⭐)

procs displays processes in colored tables. It includes search, tree view, and live updates without additional flags. The default output shows the most relevant information in a scannable format.

# ps
ps aux

# procs
procs

17. man → tealdeer (tldr) (5.4k ⭐)

tealdeer provides example-driven command summaries. Pages cache locally for instant access without network delays. The examples focus on common use cases rather than exhaustive documentation.

# man
man tar

# tldr
tldr tar

18. sudo → sudo-rs (3.9k ⭐)

sudo-rs reimplements sudo in memory-safe Rust. Ubuntu 25.10 ships it by default as a security improvement. The implementation eliminates entire classes of vulnerabilities through Rust's memory safety guarantees.

# sudo
sudo apt update

# sudo-rs
sudo-rs apt update

19. cut → choose (2.0k ⭐)

choose uses zero-based indexing and Python-style ranges. It supports regex separators for complex delimiters. The Python-style slicing syntax makes it easier to select ranges and work from the end of lines.

# cut
cut -d, -f1,3 data.csv

# choose
choose -f, 0 2 data.csv

20. rm → rip (1.6k ⭐)

rip moves files to a graveyard instead of deleting them. Deletions are reversible, providing a safety net against accidental removal. The graveyard is automatically cleaned based on age or size limits.

# rm
rm file.txt

# rip
rip file.txt

21. awk → frawk (1.3k ⭐)

frawk accelerates awk scripts with JIT compilation. It includes native CSV and TSV support, eliminating the need for field separator configuration. The performance gains are most noticeable on large files where the JIT compiler can optimize hot paths.

# awk
awk -F, '{print $1}' data.csv

# frawk
frawk -d, '{print $1}' data.csv

22. bc → eva (894 ⭐)

eva calculates expressions with syntax highlighting. It includes a REPL with history for interactive calculations. The tool supports common mathematical functions and constants without configuration.

# bc
echo "2 + 2" | bc

# eva
eva "2 + 2"

23. cp → xcp (840 ⭐)

xcp adds progress bars to file copying. It optimizes large transfers automatically using platform-specific techniques. The progress indication is especially valuable for network copies and large directory trees.

# cp
cp -r source/ dest/

# xcp
xcp -r source/ dest/

24. xargs → rargs (549 ⭐)

rargs adds regex capture groups to command templates. It supports batch operations and parallel execution for better performance. The regex patterns let you transform filenames and arguments as part of the command execution.

# xargs
ls *.txt | xargs -I {} mv {} {}.bak

# rargs
ls *.txt | rargs -p '(.*)' mv {0} {0}.bak

25. rename → rnr (548 ⭐)

rnr batch renames files using regex. It prevents collisions and supports undo through dry-run mode. The tool shows what will change before committing, reducing rename accidents.

# rename
rename 's/\.bak$//' *.bak

# rnr
rnr -f '(.*)\.bak' '$1' *.bak

26. sort | uniq → huniq (251 ⭐)

huniq removes duplicates without sorting. It preserves input order, which is useful for maintaining chronological sequences or priority ordering.

# sort | uniq
sort file.txt | uniq

# huniq
huniq < file.txt

27. strings → stringsext (125 ⭐)

stringsext finds text in binaries across multiple encodings. GNU strings supports encoding options via -e, but stringsext detects and handles Unicode and other encodings out of the box. This tool is essential for analyzing modern binaries that contain UTF-16 strings or non-Western character sets.

# strings
strings binary.exe

# stringsext
stringsext binary.exe

31 npm packages you can replace with Node.js APIs

David Turnbull — Wed, 03 Sep 2025 05:53:24 +0000

Introduction

When I started working at Lingo.dev, I noticed that some our dependencies were redundant and could be replaced with native Node.js APIs.

This made me wonder what other packages might not serve much of a purpose in modern codebases, so I've compiled this big ol' list of packages you may not need.

Caveat: The native APIs are not always direct replacements for existing packages, so as with any technical decision, the right choice depends on the context.

1. chalk (319.8M weekly downloads)

Node's util.styleText() adds colors and styles to console output. It supports standard ANSI styles like bold, underline, and colors. The API is simple and dependency-free.

import { styleText } from 'node:util';

console.log(styleText('green', '✔ done'));
console.error(styleText('bold', styleText('red', 'error')));

To learn more, see util.styleText() (nodejs.org).

2. readable-stream (185.6M weekly downloads)

The core stream module is stable and feature-complete. It supports async iterators and includes Promise-based helpers in stream/promises. Most stream compatibility issues are resolved.

import { pipeline } from 'node:stream/promises';
import { createReadStream, createWriteStream } from 'node:fs';

await pipeline(
  createReadStream('in.txt'),
  createWriteStream('out.txt')
);

To learn more, see Node.js Streams (nodejs.org).

3. safe-buffer (164.1M weekly downloads)

Modern Node uses safe buffer constructors by default. Buffer.from() and Buffer.alloc() prevent common security issues. The unsafe new Buffer() is deprecated.

const buf = Buffer.from('hello', 'utf8');

To learn more, see Buffer (nodejs.org).

4. isarray (132.0M weekly downloads)

Array.isArray() is the standard way to check for arrays. It's been part of JavaScript since ES5.

if (Array.isArray(value)) {
  // handle array
}

To learn more, see Array.isArray() (developer.mozilla.org).

5. fs-extra (113.3M weekly downloads)

Core fs now includes the convenience methods that fs-extra popularized. fs.cp handles recursive copies, fs.rm does robust removal, and fs.mkdir creates parent directories. Promise variants live in node:fs/promises.

import { cp, rm, mkdir } from 'node:fs/promises';

await mkdir('dist', { recursive: true });
await cp('assets', 'dist/assets', { recursive: true });
await rm('dist/tmp', { recursive: true, force: true });

To learn more, see File System (nodejs.org).

6. uuid (161.3M weekly downloads)

crypto.randomUUID() generates RFC-4122 version 4 UUIDs. The implementation is cryptographically secure and requires no dependencies.

import { randomUUID } from 'node:crypto';

const id = randomUUID();

To learn more, see crypto.randomUUID() (nodejs.org).

7. glob (208.5M weekly downloads)

Node includes fs.glob() for pattern matching in the filesystem. It returns an async iterator that yields matching paths. The API supports standard glob patterns.

import { glob } from 'node:fs/promises';

for await (const file of glob('src/**/*.ts')) {
  console.log(file);
}

To learn more, see fsPromises.glob() (nodejs.org).

8. ws (117.3M weekly downloads)

WebSocket client support is built into Node as a global. The API is browser-compatible, so you can connect to WS and WSS endpoints without additional packages.

const ws = new WebSocket('wss://echo.websocket.events');

ws.onopen = () => ws.send('hello');
ws.onmessage = (ev) => console.log('echo:', ev.data);

To learn more, see WebSocket (nodejs.org).

9. qs (100.7M weekly downloads)

WHATWG URLSearchParams constructs and serializes query strings safely. It pairs naturally with the URL constructor and fetch().

const params = new URLSearchParams({ q: 'node', page: '1' });
const url = new URL('https://api.example.com/search');
url.search = params.toString();

const res = await fetch(url);

To learn more, see URLSearchParams (nodejs.org).

10. rimraf (97.9M weekly downloads)

Use fs.rm with { recursive: true, force: true } for cross-platform directory removal. It handles non-empty directories and missing paths gracefully.

import { rm } from 'node:fs/promises';

await rm('build', { recursive: true, force: true });

To learn more, see fs.rm() (nodejs.org).

11. mkdirp (103.2M weekly downloads)

The fs.mkdir method accepts { recursive: true } to create parent folders. This works in both callback and Promise forms.

import { mkdir } from 'node:fs/promises';

await mkdir('var/log/app', { recursive: true });

To learn more, see fs.mkdir() (nodejs.org).

12. pify (81.6M weekly downloads)

util.promisify() converts callback-based functions to Promises. It handles Node's callback convention automatically.

import { promisify } from 'node:util';
import { stat } from 'node:fs';

const statAsync = promisify(stat);
console.log(await statAsync('package.json'));

To learn more, see util.promisify() (nodejs.org).

13. axios (65.8M weekly downloads)

Native fetch() covers most axios use cases. It handles JSON requests and responses automatically. Timeouts work through AbortController with abort signals.

const ac = new AbortController();
const t = setTimeout(() => ac.abort(), 8_000);

try {
  const res = await fetch('https://example.com/users', { signal: ac.signal });
  const users = await res.json();
  console.log(users);
} finally {
  clearTimeout(t);
}

To learn more, see fetch() (nodejs.org).

14. async (67.0M weekly downloads)

JavaScript's async/await and Promise utilities eliminate most async flow-control needs. Methods like Promise.all() and Promise.race() handle concurrency patterns. The language has first-class support for asynchronous operations.

async function loadAll(urls) {
  const resps = await Promise.all(urls.map((u) => fetch(u)));
  return Promise.all(resps.map((r) => r.json()));
}

To learn more, see Async functions (developer.mozilla.org).

15. node-fetch (74.3M weekly downloads)

The Fetch API is now global in Node.js. You get the same Web-standard API that browsers use. JSON parsing, streaming bodies, and AbortController work out of the box.

const res = await fetch('https://api.example.com/data');
if (!res.ok) throw new Error(res.statusText);
const json = await res.json();

To learn more, see fetch() (nodejs.org).

16. object-assign (64.2M weekly downloads)

Object.assign() and spread syntax handle shallow object merging. Both are part of the JavaScript standard.

const target = { a: 1 };
Object.assign(target, { b: 2 });
// or: const merged = { ...objA, ...objB };

To learn more, see Object.assign() (developer.mozilla.org).

17. performance-now (23.5M weekly downloads)

Node's perf_hooks.performance.now() provides high‑resolution timing. The API matches the Web Performance API and reports time in milliseconds with sub‑millisecond precision.

import { performance } from 'node:perf_hooks';

const t0 = performance.now();
// work
console.log('elapsed ms:', performance.now() - t0);

To learn more, see performance.now() (nodejs.org).

18. array-flatten (37.0M weekly downloads)

Array.prototype.flat() flattens nested arrays to any depth. The flatMap() method combines mapping and flattening.

const nested = [1, [2, [3]]];
const flat = nested.flat(Infinity); // [1, 2, 3]

To learn more, see Array.flat() (developer.mozilla.org).

19. bluebird (31.9M weekly downloads)

Native Promises combined with util.promisify() replace custom promise libraries. Node's filesystem and stream APIs already offer Promise-based versions.

import { promisify } from 'node:util';
import { readFile } from 'node:fs';

const readFileAsync = promisify(readFile);
const txt = await readFileAsync('README.md', 'utf8');

To learn more, see util.promisify() (nodejs.org).

20. url-parse (26.8M weekly downloads)

The WHATWG URL class handles URL parsing and manipulation. It's spec-compliant and includes URLSearchParams for query strings.

const url = new URL('https://user:pass@host:8080/path?a=1#frag');
url.searchParams.set('page', '2');
console.log(url.toString());

To learn more, see URL class (nodejs.org).

21. abort-controller (25.2M weekly downloads)

AbortController and AbortSignal are Node globals. They work across multiple APIs including fetch, fs, and timers. This provides a unified cancellation mechanism.

const ac = new AbortController();
setTimeout(() => ac.abort('too slow'), 2000);

try {
  const res = await fetch('https://example.com/slow', { signal: ac.signal });
  console.log(await res.text());
} catch (err) {
  console.error('aborted:', err.name);
}

To learn more, see AbortController (nodejs.org).

22. request (13.4M weekly downloads)

The deprecated request package is fully replaced by native fetch(). The Fetch API provides a cleaner, Promise-based interface for HTTP requests.

const res = await fetch('https://example.com/login', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ email, password })
});
const data = await res.json();

To learn more, see fetch() (nodejs.org).

23. cross-fetch (20.0M weekly downloads)

Since fetch() is global in Node, cross-environment polyfills are unnecessary. The same code works in browsers and Node.

const res = await fetch('https://example.com/ping');
console.log(await res.text());

To learn more, see fetch() (nodejs.org).

24. dotenv (63.3M weekly downloads)

Node now loads environment variables from .env files without external packages. The --env-file CLI flag and process.loadEnvFile() method handle this natively. This eliminates a dependency that appears in almost every Node.js project.

// programmatic
import process from 'node:process';

process.loadEnvFile('.env');
console.log(process.env.API_KEY);

// CLI
// $ node --env-file=.env app.mjs

To learn more, see process.loadEnvFile() (nodejs.org).

25. form-data (100.9M weekly downloads)

The Web-standard FormData API is global in Node. It integrates directly with fetch() for multipart uploads. File attachments work through the Blob API.

const form = new FormData();
form.append('name', 'Ada');
form.append('file', new Blob(['hello']), 'greeting.txt');

await fetch('https://example.com/upload', { method: 'POST', body: form });

To learn more, see FormData (nodejs.org).

26. minimist (80.5M weekly downloads)

Command-line argument parsing is built into Node through util.parseArgs(). It supports typed flags, short aliases, and positional arguments. The API returns a clean object structure for easy handling.

import { parseArgs } from 'node:util';

const { values, positionals } = parseArgs({
  args: process.argv.slice(2),
  options: {
    port: { type: 'string', short: 'p' },
    verbose: { type: 'boolean', short: 'v' }
  }
});

console.log(values, positionals);

To learn more, see util.parseArgs() (nodejs.org).

27. nodemon (7.8M weekly downloads)

Node's --watch flag restarts your process when files change. It integrates with the standard CLI and Node's test runner.

node --watch server.mjs

To learn more, see --watch flag (nodejs.org).

28. worker-farm (3.6M weekly downloads)

The worker_threads module handles parallel CPU-bound tasks. It supports SharedArrayBuffer and structured cloning. Workers can share memory and transfer data efficiently.

import { Worker } from 'node:worker_threads';

const worker = new Worker(new URL('./worker.js', import.meta.url), { workerData: 42 });
worker.on('message', (msg) => console.log('result:', msg));

To learn more, see worker_threads (nodejs.org).

29. esm (3.5M weekly downloads)

ECMAScript modules are fully supported in Node. Set "type": "module" in package.json or use .mjs files. CommonJS interop is supported.

// package.json: { "type": "module" }
import { readFile } from 'node:fs/promises';
console.log(await readFile('file.txt', 'utf8'));

To learn more, see ES Modules (nodejs.org).

30. left-pad (1.2M weekly downloads)

String padding is a language feature through padStart() and padEnd(). These methods handle padding with any character to any length.

const invoiceNo = String(42).padStart(6, '0'); // "000042"

To learn more, see String.padStart() (developer.mozilla.org).

31. sleep (134.3K weekly downloads)

The timers/promises API provides Promise-based delays. It integrates with async/await and supports AbortSignal for cancellation.

import { setTimeout as delay } from 'node:timers/promises';

await delay(500); // sleep 500ms

To learn more, see timers/promises (nodejs.org).

Forem: David Turnbull

i18n SEO checklist: 15 SEO tips to reach a global audience

Introduction

1. Structure your URLs with language subdirectories

2. Add bidirectional hreflang tags to your HTML

3. Set the HTML lang attribute correctly

4. Point canonical tags to same-language versions

5. Generate localized URL slugs

6. Include hreflang annotations in your XML sitemap

7. Organize sitemaps by language

8. Build language-aware internal links

9. Detect language preferences from Accept-Language header

10. Add language-specific Schema.org markup

11. Configure language-specific Open Graph tags

12. List language sitemaps in robots.txt

13. Send Content-Language HTTP headers

14. Add resource hints for region-specific CDNs

15. Load geo-specific third-party resources conditionally

Join our Hackathon 🚀

i18n for beginners: Every way to detect a user's locale (from best to worst)

Introduction

TL;DR

1. User selected locale in account settings

2. URL locale in path, subdomain, or query parameter

3. Stored client preference in cookies or localStorage

4. Browser language preferences from navigator.languages

5. Accept-Language HTTP header on server

6. Single language from navigator.language

7. Locale from Intl.DateTimeFormat resolution

8. OAuth profile language from identity providers

9. Country code top-level domain

10. Country from IP geolocation

11. Timezone-based inference

12. User agent string parsing

Join our Hackathon 🚀

Beyond the basics: 21 TypeScript features you might not know about

Introduction

1. Readonly arrays, tuples, and as const assertions

Solution

When to use it

2. keyof typeof for object-as-const enums

Solution

When to use it

3. Labeled tuple elements

Solution

When to use it

4. Indexed access and element type extraction

Solution

When to use it

5. User-defined type guards (arg is T)

Solution

When to use it

6. Exhaustive checking with never

Solution

When to use it

7. Type-only imports and exports (import type/export type)

Solution

When to use it

8. Ambient module declarations for non-code assets

Solution

When to use it

9. The satisfies operator

Solution

When to use it

10. Assertion functions (asserts and asserts x is T)

Solution

When to use it

11. Template literal types for string patterns

Solution

When to use it

12. Distributive conditional types

Solution

When to use it

13. infer to capture types inside conditionals

Solution

When to use it

14. Mapped type modifiers (+readonly, -?, etc.)

Solution

When to use it

15. Key remapping in mapped types (as)

1. Readonly arrays, tuples, and `as const` assertions

2. `keyof typeof` for object-as-const enums

5. User-defined type guards (`arg is T`)

6. Exhaustive checking with `never`

7. Type-only imports and exports (`import type`/`export type`)

9. The `satisfies` operator

10. Assertion functions (`asserts` and `asserts x is T`)

13. `infer` to capture types inside conditionals

14. Mapped type modifiers (`+readonly`, `-?`, etc.)

15. Key remapping in mapped types (`as`)

18. The `this` parameter in functions

19. `unique symbol` for nominal-like typing