👋 Hello! Just a quick programming note — I'm taking a short summer break next week, so there will be no newsletter landing in your inbox next Wednesday. Usual service resumes on August 28th — see you then.
__
Chris Brandrick, your editor

Together with  WorkOS
🚀 Frontend Focus

#​656 — August 14, 2024 | Read on the web

Relative Color Syntax — Some Basic Use Cases — We now have broad support for the relative color syntax. Chris Coyier takes a look a this “extremely powerful way to manipulate colors in CSS” in relation to colors you're already using.

Chris Coyier

The Puppeteer Browser Control Library Announces Official Firefox Support — As of version 23, the Puppeteer browser automation library now has first-class support for Firefox.

Mozilla Hacks

WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It's trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.

WorkOS sponsor

How Google Handles JavaScript In Its Indexing Process — At one point if you wanted Google to index your content it needed to be directly in the HTML and not dynamically rendered with JavaScript. Things have since changed of course , but how much?

Zecchini, Moore, Siddle, Ubl (Vercel)

▶  Start Over-Engineering Your CSS — An interesting talk from the recent CSS Day conference about purposely going “over the top and embracing complexity” as a way to deepen our understanding of CSS.

Kevin Powell

⚡️ Quick Links

đź“™ Tutorials, Articles & Opinion

▶  Japanese Web Design: Weird, But It Works. Here's Why — “beneath the overwhelming user interface lies undeniable psychology”.

Phoebe Yu

HTML Web Components Can Have a Little Shadow DOM, As A Treat — Scott notes that some of the current discourse around Web Components “tends to conflate a couple of things”, chiefly around augmenting HTML via custom elements and how the Shadow DOM comes into play.

Scott Jehl

Create Interactive Tutorials in the Browser — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure.

StackBlitz sponsor

font-size Limbo — Some nuanced thoughts on what font-size we should be reaching for as a default in 2024. Geoff Graham at CSS-Tricks chimed in too.

Sebastian Laube

The Anchor Element — An informative look at the humble HTML <a> anchor element, explaining what it is, how it works at the browser level, and how to use it correctly. Heydon has also taken a look at the abbr element, and the address element.

Heydon Pickering

The Dying Web — A plea to us all to give Firefox a try, because open standards and privacy are “more important than a few milliseconds of loading time”.

Matthias Endler opinion

How to Create an Auto “Text Typing Effect” with Vanilla JavaScript
Esther Vaati

🔧 Code, Tools & Resources

typlr.app: Create Fonts in the Browser — If you’ve never attempted to make your own font, this might be a cool place to start! This interactive tool allows you to customize each letter’s shape and kerning, and you can install it as a PWA.

Evgeny Agasyants

ObsoHTML: Node and CLI Tool to Find Obsolete HTML — ObsoHTML is a Node.js script designed to scan HTML, PHP, JavaScript, and TypeScript files within a specified directory for obsolete or proprietary HTML attributes and elements. Should help keep things tidy.

Jens Oliver Meiert

There Are Better Things to Code Than Forms — With the SurveyJS drag-and-drop form builder, you can generate and style dynamic, JSON-driven forms right in your JS app (Angular / React / Vue.js / jQuery).

SurveyJS sponsor

tailwindcss-highlights: A Tailwind Plugin to Add Highlights to Text — The term “highlights” here refers to an effect similar to a highlighter pen for marking up an actual paper document. Includes 20 variants of the effect, which you can see here.

Julian

▶  Inter 4.0: A Big Font Update for UI Design — Now with true italics, optical sizing changes, and stylistic alternatives. However, this version 4.0 update doesn’t appear to be on Google Fonts yet.

Oliver Schöndorfer

Slab: A Programmable Markup Language That Simplifies The Creation of HTML — An alternative to tools like Pug, claiming to offer advantages like improved readability, built-in programming constructs, integration with JSON data, and an easy learning curve.

Võ Minh Thu

Ipx.