bikeinsights.com offers a bike geometry database that allows to search and compare bike frames. Their blog article How Bikes are Measured made me aware normalizing the different ways of measuring bikes is absolutely required to come to meaningful comparisons of bike frames.
Choose posts by tag
2025: Posts tagged #bookmark
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
000004is 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
Buy stability. Build possibility.
This sounds true! When deciding to buy or to build a software solution, build what makes you special, what differentiates you.
Getting your build vs buy balance right is how you achieve table stakes: stable infrastructure, reliable publishing, sustainable engineering. But that sets you up for today. In order for any business to future-proof itself, it needs to make a bet on what the future will look like and build for that.
Tools for Designers provides great (and free) tools to help with colors and web typography:
colorlisa.com is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory. Palettes are constantly being added to help keep your designs colorful and fresh.
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.
OpenMoji: Open source emojis for designers, developers and everyone else!
You get the emoji in SVG and PNG format (colored and black), and as a font. The website with the emoji library is nicely made and a free iOS app can be used in addition.
OpenMoji is an open-source project of 50+ students and 2 professors of the HfG Schwäbisch Gmünd (Design University) and external contributers.
A tiny taxonomy of meetings by Jeremy Keith. Three types of meetings:
- Divergent meetings: Generate ideas.
- Convergent meetings: Come to a decision.
- Chemistry Meetings: No tangible output. Get to know each other.
It´s a good idea to communicate upfront what type of meeting you are planning to have to help avoiding frustration among participants about the meeting outcome.
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.
I very much like the idea of the stream by Linus Lee.
Modular Scale is a simple, quick, and free tool by Scott Kellum and Tim Brown to calculate and visualize different type scales.