A Blog Post with Every HTML Element? Almost. — Taking 18 months to come together, this post makes a brave attempt to squeeze every HTML element (including some former elements like <marquee> and <blink>) into a single place. It’s a fantastically retro-feeling reunion that starts off feeling a little dull but rapidly picks up the pace, even if poor <applet> doesn't make the cut..

Patrick Weaver

Practical CSS Layouts with Jen Kramer — Join Jen for this extensive video course and learn to code complex layouts using CSS Grid and Flexbox. The course covers responsive design, handling images, styling, navigation and more via a series of exercises.

Frontend Masters sponsor

WordPress 6.3 “Lionel” Released — Hailed as a “momentous release”, the universally popular CMS includes a new Site Editor experience, the ability to create and sync block ‘patterns’, new design tools, keyboard shortcut changes, style revision tracking, along with performance and accessibility improvements.

Matías Ventura (WordPress)

An Update on Chrome Security Updates: Shipping Security Fixes to You Faster — In an effort to reduce the “patch gap” and get security fixes out faster, Chrome is now shipping weekly Stable channel updates. This doesn't affect the cadence of milestone updates, though, so Chrome 200 is still some way off. 🤭

Amy Ressler (Google)

Introducing Project IDX: An Experiment to Improve Full-Stack, Multiplatform App Development — A new project from Google — it’s a full browser-based IDE (built atop the same tech as VS Code) that includes support for most full-stack JavaScript frameworks, cross-platform previews, and deploying to Firebase. You can sign up for the waitlist.

Google

An Introduction to htmx, the HTML-Oriented Dynamic UI Library — A look at what htmx is, how it aims to simplify dynamic web development, and how you can harness its potential to enhance your web development process.

James Hibbard

Join the React Native EU Conference with a 10% Discount Ticket 🔥 — Sign up for the biggest React Native conf in Europe. Check the agenda to see what’s awaiting you on Sept 7-8 in Wrocław!

Callstack sponsor

✨  Coding the Stars: An Interactive Constellation with React Three Fiber — The Supabase team built a Web-based visualization in the form of an animated sky filled with stars, where each star represented a user signup. If you’ve never experimented with React Three Fiber or creating visual effects before, this is a good introduction walking through the key parts of their approach.

Francesco Sansalvadore (Supabase)

What Does It Mean for Web Browsers to Have a 'Baseline' — Back in May we shared news on Baseline, a new project that aims to clarify what developers can rely on across browsers and the web platform in general. Mary recaps why it matters, how it will hopefully work, and even touches upon the browser politics of the new project.

Mary Branscombe (The New Stack)

Smoothing Out the Scrolling Experience in Chrome on Android — A look at how the scrolling experience on Chrome for Android has been improved, reducing slow scrolling jank by 2x. The post shares how the Chromium team discovered and evaluated the problem, and how that helped them “design a better browser experience going forward”.

Stephen Nusko (Google)

Optimizing Speed on eBay — “For every 100 milliseconds improvement in search page loading time, eBay saw a 0.5% increase in ‘Add to Cart’ count.” — This perfectly highlights how important performance can be at such huge scale. Addy runs through just how the performance of eBay’s sites and apps were optimized for a faster overall user experience.

Addy Osmani

Designing Accessible Text Over Images: Best Practices, Techniques, And Resources — The first in a two-part series in which Hannah Milan covers best practices when using various 'text over image' techniques. Lots of visuals here to help make the point.

Smashing Magazine

The Future of Open Source: SaaS, the Final Frontier — Software has moved to the cloud … and open source is moving with it. Join SaaS leaders for the discussion on Sept 7.

Sentry sponsor

Typograms: A Way to Render ASCII Diagrams More Elegantly — An intriguing project out of Google that lets you ‘draw’ diagrams in plain ASCII text within special script tags and these will then be rendered into nicer looking versions in the browser. An interesting approach if Mermaid is too full on for your needs.

Sam Goto / Google

svg-drawing: A Simple Canvas to Draw, "Replay", and Export SVG Line Art — You can deep link to any drawing, adjust some draw settings, and even change the options for playing back the drawing by animating the lines. Please excuse my shoddy rocket drawing.

catsjuice

OGL 1.0: A Minimal WebGL Framework — WebGL is far from the easiest technology to use on its own, so libraries like Three.js are often used to make it more accessible. OGL has a similar motive while sticking closer to the WebGL metal.

Nathan Gordon et al.

Vaul: An Unstyled Drawer Component for React — Also referred to as a “bottom sheet”, useful for mobile interfaces as a replacement for a dialog element and it’s powered by Radix UI’s dialog component.

Emil Kowalski

Mobile FIRST: A Browser Extension to Simulate Different Mobile Devices — Available for Chrome and Firefox, it’s useful for responsive testing and taking screenshots and GIFs for mockups and presentations.

Mobile FIRST

MyTailwind: Interactively Customize Tailwind Components — Gives you a simple visual editor where you can customize styles for about 11 different components (button, navbar, card, sidebar, alert, etc.), then copy the HTML with the Tailwind classes.

Ashraful Malik

noclip — A Digital Web-Based Museum of Video Game Levels — This neat site is a browser-based way to explore levels from a variety of classic games. I’ve just been exploring the castle grounds of Super Mario 64 and the streets of GTA III’s Liberty City. A cool nostalgia trip if nothing else. Repo here. Three cheers for WebGL!

Jasper St. Pierre