Introducing the popover API — There’s a new set of declarative HTML APIs for building popovers on the way, and the first of which — the popover API — is landing in Chromium 114. This post shows us how to use it when building tooltips, menus, and more. You're asking: Is this one of those Chrome/Edge-only experimental features for now? Yes. But MDN has docs, Safari is tech previewing it, and it may well take off.

Una Kravets (Chrome Developers)

Eleven HTML Best Practices for Login and Signup Forms — Andrey notes that “even popular sites fail to implement” the best practices highlighted in this article (such as autocomplete, focus states, validation, etc). There’s a quick checklist towards the end too.

Andrey Sitnik

Full Stack for Front-End Engineers with Jem Young (Netflix) — Learn what it means to become a well-rounded full-stack engineer with this hands-on video course. You’ll dive into servers, work with the command line, understand networking and security, set up continuous integration and deployment, manage databases, build containers, and more.

Frontend Masters sponsor

WebKit Features in Safari 16.5 — This version of Apple’s browser contains a handful of new features including CSS Nesting, :user-valid and :user-invalid pseudo class support, Apple Pay changes, an update to cyber attack feature Lockdown Mode, the usual bug fixes and more. Here's the release notes for the latest version of Safari Technology Preview too.

Jen Simmons (WebKit)

'Why We're Bad at CSS' — “We want our styles to be generic enough to reuse in different contexts but not so generic that we have to constantly repeat ourselves in those contexts” — Mike explores how we may achieve this and improve things along the way, with a practical example.

Mike Aparicio

Using linear() for Better Animation — A good look at using the linear() easing function with CSS transitions, animations and the Web Animations API.

Ollie Williams

The Rhythm of Your Screen — Thoughts on scrolling, holding attention, information architecture, and achieving a rhythm to your page layout.

Christopher Butler

Be Careful Using ‘Menu’ — Some cautionary advice on the use of the word ‘menu’ in your projects. Adrian warns us to be “certain you have chosen the term that accurately describes the control you want”.

Adrian Roselli

We Built Our Documentation Using Docusaurus, React, and Vercel — It requires effort to produce great documentation. Effective documentation is fundamental to users getting started.

courier.com sponsor

Add Opacity to an Existing Color — Let’s say you have your brand color, and you want to find some nice complimentary opaque versions to go alongside it. What are your options? Chris runs through some approaches.

Chris Coyier

The Button Case - Using Custom Properties for a Smart Button System — A look at using variables in CSS to create an efficient button system (with just 20 lines of code thanks to custom properties).

Brecht De Ruyte

Updating My Website from My iPad — A look at using GitHub Codespaces to both develop and push updates to a site, all from an iPad.

Daniel Diaz

CSS Pattern: Fancy Backgrounds with CSS Gradients — A collection of nice background patterns, now 100 strong, made with just CSS.

Temani Afif

Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

Windstatic: A Set of 170+ Components & Layouts Made with Tailwind and Alpine.js — Categorized under page sections, navigation, and forms, and each category includes multiple components you can drop into your Tailwind projects.

Michael Andreuzza

Picyard: Create Screenshots and Mockups with Beautiful Backgrounds — Has lots of different ways to customize including gradient backgrounds, shadows, dimensions, and you can even try out different kinds of mockups (testimonials, code snippets, etc).

Krish Gohil

Strawberry: Zero-Dependency, Build-Free JavaScript Framework — A tiny frontend framework positioned as an “alternative to vanilla JS” (isn't everything?) that offers reactivity and composability. 3KB gzipped.

Alan

Starry Night: GitHub-Like Syntax Highlighting — GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach. It’s admittedly quite heavy (due to using a WASM build of the Oniguruma regex engine) but if you want something with the same experience..

Titus Wormer