web-development

Introduction to strokes.js In the quest for more expressive and personalized web typography, strokes.js emerges as a groundbreaking solution. Traditional webfonts, while versatile, suffer from an inherent limitation: their static nature. Every instance of a webfont renders identically across devices and browsers, stripping away the uniqueness and variability inherent in human handwriting. strokes…

Launching a business website can be a time-consuming process. From creating layouts and choosing visual elements to developing pages and testing the final experience, traditional website development often requires significant coordination between designers, developers, marketers, and business owners. For companies that need to establish an online presence quickly, this lengthy process can become …

The Search Result That Broke Me I typed "how many tiles do I need for a bathroom floor" into Google, clicked the top result, and got: A wall of text before the calculator, padded with keyword-stuffed filler sentences that said nothing Zero explanation of waste percentage — just a single input box that assumed I already knew my layout pattern added risk A box-count answer with no rounding logic sh…

A new, experimental API has landed on chromium-based browsers. It allows us to have better control of the transition between two pages.

I made a smol client-side syntax highlighter that uses the CSS Custom Highlights API called MicroLighter. I’ll talk about why I made it in a bit but first I wanted to… ahem… highlight… some of the features. - Zero-dependencies - ~2kb minifed+gzipped - Uses CSS ::highlight(token-name) , not spans - Leverages Textmate’s language grammars - Human-readable light-dark() themes - All languages/grammars…

From Graphic Designer to "Vibe Coder": Why I Fell in Love with Frontend Code For years, my world was all about pixels, color palettes, and layouts. As a web and graphic designer, I loved shaping digital spaces—until I hit a wall: I wanted my designs to actually move, breathe, and react. Static mockups only show half the story. That realization pushed me to open a code editor and dive into fronten…

How VisualRefiner converts HEIC, compresses images, and transcodes video with no server, no upload, and no account — using the Canvas API, WebCodecs, and a little WebAssembly. Most "free online converters" work like this: you pick a file, it's uploaded to a server, converted there, and sent back. That's fine for a meme. It's less fine for a folder of personal photos, a passport scan, or client fo…

A website can look polished, work perfectly with a mouse, and still be difficult for some people to use. A form might use colour as the only indication that something went wrong. A sticky header might

Also available in Español The Problem The last piece ended on a promise: a real mechanism for boundaries exists, native to the browser, no build step required. Most explanations of that mechanism describe it as a specificity tool — a way to write weaker selectors and still win the conflict. That's true. It's also the shallow read. Here's the deeper one. Before Cascade Layers, styling conflicts on…

Table of Contents Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API Meet the Project Configuring Your Development Environment Project Structure The Chrome Extension Mental Model Walking Through manifest.json Understanding popup.html Understanding styles.css Reading README.md the… The post Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API appeared firs…

Every Hydrogen project I've worked on started the same way — wire up a cart, build a PDP, add filters, then spend weeks on the "extras" that aren't really extras: wishlist, compare, quick view, proper i18n, RTL. After doing this enough times I decided to build it once and properly. ada ÉLAN is a Hydrogen storefront theme for fashion brands. It ships: — An editorial design system (Cormorant Garamo…