~frontendfocus | Issue 656 - Should you 'over-engineer' your CSS? (15)

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.

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.

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?

▶  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.

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

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.

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

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.

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.

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”.

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.

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.

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.

▶  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.

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.