<browser-window>: A Web Component to Create Pretend Browser Windows on the Web — Initially built to use within a slide deck (for this talk), browser-window is a lightweight themed zero-dependency web component wrapper to emulate a Safari-like browser window within a Web page. The page full of demos might give you some ideas for its use.

Zach Leatherman

Reality Check #1: Building Out a Furniture Site from Dribbble — This is a fun new experimental blog series where a visually stunning design is taken from Dribbble and then recreated by a professional Web developer to see how well it might function in practice. This first one is for a furniture site.

Andy Bell

Free Course: Land a Software Engineering Role — Jerome Hardaway has helps over 300 folks get a software development job — now he shares his advice in this video course — featuring resume tips, networking advice, how to optimize your GitHub profile for technical scrutiny, and more.

Frontend Masters sponsor

Answering Common Questions About Interpreting Page Speed Reports — This post takes a closer look at how various performance tools both audit and report on various performance metrics (such as core web vitals), and then answers some common questions that arise from running such audits.

Geoff Graham

You're Gonna Need A Bigger Browser — Yes, browsers are hugely load-bearing in the web’s architecture, and Robin notes they haven’t really changed all that much. As such this post questions some aspects that seem worthy candidates for change to best serve the user going forward.

Robin Berjon

WebKit Features in Safari 17.1 — Here’s a rundown of what’s new. Oh, and 17.2 is already in beta.

WebKit

The New CSS Math: rem() and mod() — Runs through the basics of these two new math functions and highlights some use cases. Dan notes that “the nuance in how they work is not always clear from the start” — so this quick overview should prove handy.

Dan Wilson

'Let’s Reinvent the Wheel' — Musing on how we approach designing the web, highlighting some pain points with current methods, issues with design tools, and what role CSS can play in creating our sites.

Vasilis van Gemert

Naming Variables in CSS — Some conventions that you may want to consider when it comes to naming your CSS variables.

Jonathan Dallas

Stick to Your True Love and Work #LikeABosch — You're the perfect link between code & car? Then you’re perfect for us. Show your skills & join our team. Learn more.

Bosch sponsor

Exit Animations — Animating an element as it leaves the DOM isn’t something that’s particularly straightforward. Here Chris shares some options, before commenting that he hopes something like “@exit-style or @exiting-style or @outgoing-style or ::outgoing” lands in CSS eventually.

Chris Coyier

How Blogging Platform Bear Does Analytics with CSS — Instead of using server logs this “slightly boutique” analytics system triggers a read with a body:hover CSS declaration.

Herman Martinus

Making Music with Google Sheets and Web MIDI API — A fun curio this — with the help of Web MIDI API, we can use Google Sheets as a music sequencer.

Asep Bagja

Docusaurus 3.0: The Elegant Static Site Generator — Docusaurus is a popular React-powered tool aimed at building documentation sites in particular, though it can handle more general sites too. Folks like Supabase, Redux and Temporal use it for their doc sites. v3 features an upgrade to MDX v3, React 18, Mermaid v10, and essentially modernizes everything.

Sébastien Lorber

Tiny Helpers: Online Tools for Web Developers — We first featured this now sizeable collection of single-purpose online tools around three years ago, and it has since grown to over 500 resources. It has plenty of tools aimed at developers of all types — think things like color management, favicon generators, accessibility tools, and more.

Stefan Judis

Nightwind: Automatic Dark Mode for Tailwind Sites — An innovative and customizable Tailwind plugin that takes your current color choices into consideration when constructing a dark mode theme for your site. Try it out directly on the page.

Nightwind

TailwindMate: Convert CSS Colors to and from Tailwind Format — Enter any CSS color (RGBA, HSLA, hex) and this tool will convert the color to the closest Tailwind named equivalent. You can also switch to “from Tailwind” mode.

Jaleel Bennett

SiriWave: The Apple Siri Waveform Replicated in Pure JS — If you need an effect that implies sound is playing or being recorded, perhaps.

Flavio Maria De Stefano

FormsLab: An Open-Source Form Builder Toolkit for Creating Surveys, Polls, and More

Konrad Ryczko