Ten Weird HTML Hacks That Shaped the Web — A curious history lesson looking back at old table hacks, CSS kludges, and various quirky coding strategies that helped web developers get things looking good before we had the modern tools at our disposal today.

Ernie Smith

Psychology of Speed: A Guide to Perceived Performance — What’s the gap between measured and perceived performance, and which should we use as our goal? This post digs into how people sense and comprehend time, giving us knowledge to make those long waits feel less frustrating.

Karlina Szczur

Identifying and Fixing Render-Blocking Resources — Fixing render-blocking JavaScript and CSS helps improve page load times so sneakerheads don’t bounce to your competitor’s site while waiting for the images of the latest drop to load. Check some of the best practices.

Sentry sponsor

A Few Ways CSS is Easier to Write in 2023 — Geoff notes that we’re living through something of a CSS renaissance, with new features, techniques, and ideas coming fast. He shares how this breakneck speed of advancement may seem overwhelming, but these modern changes have, in practice, made CSS ‘easier’ to write.

Geoff Graham (Smashing Magazine)

A Hollow Text Hover Effect in Three Lines of CSS — Made possible thanks to a combination of -webkit-text-fill-color, -webkit-text-stroke-width, and -webkit-text-stroke-color CSS properties.

Amit Merchant

The hanging-punctuation Property — Browser support is quite limited, but Chris shares this “no-brainer” CSS treatment that looks great. Hacker News had a surprising(?) amount to say about this, with lots of added context worth perusing.

Chris Coyier

Web Components Eliminate JavaScript Framework Lock-in — Jakes notes how web components can “dramatically loosen the coupling” of JavaScript frameworks — and in an effort to prove it they build an app where every single component is written with a different framework.

Jake Lazaroff

Build and Style Your Site Exactly How You Want — Drag in unstyled HTML elements, control CSS properties, and cascade changes across your site.

Webflow sponsor

Preventing Scroll “Bounce” with CSS — When you scroll rapidly to the top or bottom of a page you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before then bouncing you to the correct position. Here’s how to fix that.

Michelle Barker

Animotion: A Visual CSS Animation Builder — Allows you to create animations by dragging, sizing, rotating, etc., which you can edit using a raw CSS keyframes editor. Also includes a number of built-in animations and easings.

Zack

ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used to share graphs on a major news site and the output is pretty good. It’s frequently updated and there are lots of examples of its use. GitHub repo.

The New York Times Company

🎹 Fast, Reliable 1D/2D Barcode Scanning for Web Apps with Strich — You don’t need a native app to scan barcodes! Try the free demo app or sign up for the free, full-featured 30-day trial.

Pixelverse sponsor

Spectral.js: A Painterly Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a more visually satisfying result.

Ronald van Wijnen

Vectorizer.ai: Convert your JPEG and PNG Images to SVGs with AI — The web app is free while in beta and works rather well on both phots and graphics – though we assume the resulting raw SVG code would need some optimization.

Cedar Lake Ventures

request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment.

Sindre Sorhus