How Google 'Perfected' the Web — An extensive look at how Google’s dominance has ultimately shaped the web, resulting in a web that's filled with content designed for Google, not necessarily humans. (Not only is it an interesting article, but also a striking piece of modern editorial Web design.)

Mia Sato (The Verge)

The Top Pens of 2023 on CodePen — An always enjoyable round-up of the year in CodePen demos. There’s bound to be something here you find interesting or novel — and there’s always takeaways to be had in terms of how things have been approached too. 100 demos in total, including lovely WebGL flowers, a CSS 3D maze, and a glowing shadow effect.

CodePen

Auth Without Complexity — Auth in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Create signup and login forms, generate magic links, add SSO with Google, and more — all from a streamlined dashboard. Read the docs now.

Userfront sponsor

🔮 Frontend Predictions for 2024 — Because who doesn’t like some soothsaying on where things are heading? Some nuanced thoughts on ‘owning’ the frontend stack, the rise of AI, UI frameworks and more.

Jamie Birch

The Popular Vote of Interop 2024 — We will soon be learning what the focus for Interop will be in 2024, but ahead of that Chris attempts to tally up what proposals might be front and centre in terms of attention (from a total of 103!) — including scroll-driven animations, JPEG XL, and more.

Chris Coyier

The Website vs. Web App Dichotomy Doesn't Exist — “the web is a flexible medium where any number of technologies can be combined in all sorts of interesting ways...”

Jake Lazaroff

New CSS Viewport Units Don't Solve the Classic Scrollbar Problem — On the problem with 100vw, how browsers handle scrollbars, and what future solutions we may have to solve the issue.

Šime Vidas

The World's Smallest PNG — It takes 67 bytes to make one pixel. Evan dives into how it works.

Evan Hahn

Join Our Livestream to Hear Tips on How to Thrive in 2024 and Beyond — We’ll introduce the key findings from our industry 'State Of' survey and the big changes coming in 2024.

Redgate Software sponsor

My Web Development Wishlist 2024 — Some broad but well intentioned wishes.

Jens Oliver Meiert

Using Cutting Edge CSS Features to Build a Progress Indicator — Brings together things like scroll linked animations, CSS trig functions, and color-mix properties to create a progress indicator linked to the current scroll position of the page, without any JS.

Andrico Karoulla

CSS Media Query for Scripting Support — A new ‘scripting’ media query (e.g. @media (scripting: none)), recently added to Chrome, looks to be a powerful addition to the progressive enhancement toolbox — it allows you to test whether scripting languages are available and tailor page content and styles based upon this.

Stephanie Stimac

'My CSS Resets' — How folks approach a CSS reset always seems to be of interest, so here’s Keith’s take on it.

Keith J. Grant

CSS Hooks: A Styling Solution That Brings Advanced CSS Capabilities to Native Inline Styles — This solution resembles inline styles and is designed for React, Preact, Solid, and Qwik. And one big plus is no need for a build step, reducing the overall footprint.

CSS Hooks

remoteStorage: A Cross Browser/Device Persistence Approach — Combines the localStorage API with a remote server to persist data across browsers and devices – so basically, imagine localStorage but remote. Here’s how the server part runs.

Frigade

Try a Lightning-Fast Pairing Tool Built with You in Mind — Tuple will change the way you think about pair programming. Try it with your team free for 14 days, no card required.

Tuple sponsor

Makedraft: An AI That Generates Frontend Code Based on Instructions — Will generate HTML with Tailwind, JavaScript, or Alpine.js. Also includes the option to highlight code you want changed before adding your text in the prompt.

makedraft

subiRegex: Generate Regular Expressions with English — Type something like “Canadian Postal Code” or “5 numbers followed by an optional letter”, etc. and this tool will generate the regex for you using AI.

Jonathan Kong Boon Lieng

Direction-Aware Mickey Mouse — Everyone’s been talking about the copyright status of Steamboat Willie lately, so here’s Mickey following your pointer and keeping an eye on things…

Jon Kantner CodePen

Tailplates: A Set of 20+ Responsive Tailwind CSS Templates — Includes four categories of templates: agency, blog, ecommerce, and SaaS, with eight different page variations. Not a free project, but the price seems reasonable at $10 for the set.

Tailplates