DEV Community: Mubeen Khan

WiFi QR codes are just one line of text (here is the format)

Mubeen Khan — Wed, 21 Oct 2026 10:40:33 +0000

WiFi QR codes are just one line of text (here is the format)

You have seen them on cafe tables and Airbnb welcome books: point your phone camera at the square, and you join the WiFi without typing a 24-character password. There is no magic in it. A WiFi QR code is a plain text string in a tiny, well-supported format, and once you know the format you can generate one in about ten lines of JavaScript.

The format

The payload looks like this:

WIFI:T:WPA;S:CoffeeShop_Guest;P:flatwhite42;;

Four fields, each terminated by a semicolon, and the whole thing ends with a double semicolon:

T: the security type. WPA covers WPA/WPA2 (nearly every modern router), WEP is for old equipment, and nopass means an open network. With nopass you simply omit the P: field.
S: the network name (SSID).
P: the password. Leave it out for open networks.
H:true is optional and marks a hidden network whose SSID is not broadcast.

So an open guest network is just:

WIFI:T:nopass;S:Lobby_WiFi;;

The part everyone forgets: escaping

SSIDs and passwords can legally contain the exact characters the format uses as delimiters. If your network is called Cafe; Bar or your password contains a colon, a naive string concatenation produces a payload phones misread. The rule: escape backslash, semicolon, comma, and colon with a backslash.

Here is a small builder that gets it right:

function escapeWifiField(s) {
  return String(s)
    .replace(/\\/g, '\\\\')
    .replace(/;/g, '\\;')
    .replace(/,/g, '\\,')
    .replace(/:/g, '\\:');
}

function buildWifiPayload({ ssid, password, encryption = 'WPA', hidden = false }) {
  const enc = encryption === 'nopass' ? 'nopass' : encryption === 'WEP' ? 'WEP' : 'WPA';
  let p = 'WIFI:T:' + enc + ';S:' + escapeWifiField(ssid) + ';';
  if (enc !== 'nopass') p += 'P:' + escapeWifiField(password) + ';';
  if (hidden) p += 'H:true;';
  return p + ';';
}

buildWifiPayload({ ssid: 'CoffeeShop_Guest', password: 'flatwhite42' });
// WIFI:T:WPA;S:CoffeeShop_Guest;P:flatwhite42;;

From there, feed the string to any QR encoder. In the browser, the qrcode npm package renders it to a canvas or data URL in one call; nothing needs a server.

Two practical notes

First, a printed WiFi QR is a spare key: anyone who scans it reads your password in plain text on their device. For visitors, the smarter move is a separate guest network on your router, and share that one.

Second, error correction matters for print. The default Medium level survives about 15% damage, which is fine on a table tent. For a sign by the door that will get scuffed, bump it to High.

I built a free generator that handles the escaping, the hidden-network flag, and the print layout for you, including a ready-to-hang guest sign: https://www.theutilityhub.online/tools/wifi-qr-generator

It runs entirely in the browser, so your network name and password never leave your device. Useful the next time someone asks "what is the WiFi password" and you would rather just point at the wall.

Your mockups deserve better than the same grey lorem ipsum

Mubeen Khan — Tue, 20 Oct 2026 10:33:17 +0000

Every designer has the same Latin paragraph memorized by accident. We paste it into hero sections, cards, article bodies, then squint at the layout and call it a review. It works, but it is a missed opportunity: placeholder text is a design material, and the flavor you choose changes how a mockup reads.

The classic Latin block is safe. Clients expect it, nobody reads it, and that is the point when you want feedback on spacing and hierarchy instead of words. But when the brand has a personality, matching the placeholder to the vibe makes presentations land harder. A coffee brand menu mockup filled with espresso, crema, single origin reads instantly as theirs. A playful kids brand with pirate ipsum gets a laugh and keeps the review about the design. A SaaS landing page with startup ipsum (disrupt, synergy, runway) feels like a real product page, which is exactly what you want stakeholders reacting to.

I got tired of hand-editing filler text, so I built a small free generator with four themes: classic Latin, startup ipsum, coffee ipsum, and pirate ipsum. You pick the theme, set 1 to 10 paragraphs and short, medium or long sentences, then copy or download: https://www.theutilityhub.online/tools/lorem-ipsum-generator

Three habits that make placeholder text work harder:

Match paragraph count to the layout. One or two for hero sections and cards, three to five for article bodies. Generate slightly more than you need and trim.
Keep the classic opener on when stakeholders expect the traditional first line. Turn it off when you want a fully fresh passage.
Never ship placeholder to production. It sounds obvious until a launch checklist skips it. Search the built site for "lorem" before every deploy.

Placeholder text will never be glamorous, but it is the cheapest design tool you already use. Give it a theme and your mockups start doing more of the talking.

How I Shipped a Bilingual EN/ES Calculator Site on Next.js Static Generation

Mubeen Khan — Thu, 01 Oct 2026 23:01:57 +0000

I run UtilityHub — 12 free finance calculators + money guides, Next.js 15 on Vercel. Last week I shipped the whole thing in Spanish. Here's the architecture that made it (mostly) painless.

The routing trick: one [locale] segment + middleware

Instead of next-intl, I used a single app/[locale] segment with a tiny middleware:

/es/* → served as-is (locale = es)
/en/* → 308 redirect to the canonical unprefixed URL
everything else → rewritten to /en/* internally (URL stays clean)

English keeps its clean URLs (/tools/mortgage-calculator) — zero SEO risk to existing rankings — while Spanish gets real localized slugs (/es/tools/calculadora-de-hipoteca).

Translations as data, not components

All calculator copy (labels, explainers, FAQs, meta) lives in lib/tools.es.js, mirroring the English lib/tools.js schema. The math (lib/calculations.js) is shared — translation never touches numbers. A Node schema-validation script checks all 12 entries: field parity, 4 FAQs each, numeric defaults byte-identical.

hreflang without tears

Every page emits reciprocal en / es / x-default alternates, with slug mapping via a small lib/slug-map.js (EN slug ↔ ES slug both directions).

Result

59 static pages, one build, <html lang> correct per locale, sitemap includes all /es URLs. The Spanish mortgage calculator is live if you want to poke at it: https://www.theutilityhub.online/es/tools/calculadora-de-hipoteca

Full English site: https://www.theutilityhub.online