2025: Posts tagged #code

Tyler Sticka shows how to do OTP´s (one-time passcodes) in his article Simple One-Time Passcode Inputs. The key element is the autocomplete="one-time-code" setting on the input element, which adds support for autofill from password managers or via SMS. The other attributes make typing in the code more convenient and activate client-side input validation:

<form action="…" method="post">
  <h2>Verify Account</h2>
  <label for="otp">
    Enter the 6-digit numeric code sent to +1 (555) 555-5555
  </label>
  <input type="text"
    id="otp"
    inputmode="numeric"
    autocomplete="one-time-code"
    maxlength="6"
    pattern="\d{6}"
    required>
  <button>
    Continue
  </button>
  <a href="…">
    Try another way…
  </a>
</form>

One by one:

type="text"

OTP´s appear as a number, but a six digit 000004 is not the a countable number, but a sequence of 6 digits, therefore the OTP is treated as text

inputmode="numeric"

enable the numeric virtual keyboard on touch devices

autocomplete="one-time-code"

this add´s support for autofill from password managers or via SMS

maxlength="6"

prevent users putting in more than 6 digits

pattern="\d{6}"

we want 6 digits, and no other values

required

make the field mandatory

Tools for Designers provides great (and free) tools to help with colors and web typography:

• Gradient Generator
• Mesh Gradient Generator
• Data Visualization Color Picker
• Accessible Color Generator
• Interactive Typography Tutorial

mermaid.live is the online editor for Mermaid charts.

echarts.apache.org/examples/editor.html is the online editor for ECharts.

A friendly introduction to SVG by Josh Comeau.

This post is intended to be completely beginner-friendly, no previous SVG experience required (though it does assume that you’re familiar with the basics of HTML/CSS/JS).

Use the Nano ID Collision Calculator to understand the collision-likelihood of your current Nano ID alphabet and id-length.

Fancy-Border-Radius is a tool written by Nils Binder, that allows to create and play with blobs by setting the horizontal and vertical radii with the CSS property border-radius.

whatsmydns.net allows to check global DNS record propagation.

PagesCMS is a CMS for static sites hosted on GitHub that looks interesting. It is MIT-licensed and made by Ronan Berder. There is a online version to hook into, but it is as well possible to host it yourself.

Jen Simmons is putting a spotlight on the overlooked lh unit with her article Polishing your typography with line height units. It makes a big difference!

Line height units give us a direct way to tie any size in our layout to the vertical rhythm of the text.

I like to apply it in a flow css class to set the space between direct siblings:

.flow > * + * {
    margin-block-start: 1em; /* fallback for browsers not supporting the lh unit */
    margin-block-start: 1lh;
}

The Human in the Loop, by Pablo Stanley.

The LLM writes, reviews, and rewrites its own code. But when it gets stuck, it really gets stuck. Fixing a small bug can spiral into an endless loop — or a full rewrite of the whole project. And you can’t step in, because you don’t speak the language fluently. You just nod along, hoping the next retry works. […] I jokingly tell our dev team I’m a hacker (they silently hate me a bit haha). But I’ve also gained a deep respect for them — the real programmers. The stuff AI does today is built on decades of human work. And when things break, it’s still the humans who fix it… for now.

anchor-tool.com allows to select a desired anchor positioning and see the required CSS code. The tool supports logical properties! As of March 7 only working in Chromium browsers.

Navigating the web platform by Patrick Bosset, product manager on the Edge team at Microsoft.

As a web developer, navigating the web platform isn't always easy. Here are ways to keep track of what you can use, of what's new in web browsers, and ways you can influence the development of the platform by making your voice heard.

HTML Minification for Static Sites with html-minifier, by Jim Nielsen.

A checklist for your tsconfig.json, by Dr. Axel Rauschmayer.