~frontendfocus | Issue 643 - The current state of HTML (16)

The Results of State of HTML 2023 — You may recall late last year we shared the very first ‘State of HTML’ survey — from the same folks behind the excellent JavaScript and CSS efforts. Well, now we have the results from that 2023 questionnaire. Lots of interesting tidbits here, including thoughts on recent HTML features, adoption, accessibility, extensibility, and much more.

10 Updates from Google I/O 2024: Unlocking the Power of AI for Every Web Developer — Google’s annual developer conference got underway yesterday, and we already have a handful of headlines for those of us working on the web — this post outlines 10 features that Google are keen to put the spotlight on, including (to no surprise) lots of AI additions. ▶️ Here's the...

Announcing the Web Platform Dashboard — The ‘Web Platform Dashboard’, announced at Google I/O, is a new, easy way to see a high-level overview of the entire web platform mapped out as a set of features, along with their respective browser support.

Introducing the CSS Anchor Positioning API — With anchor positioning built into the browser, you’ll be able to build layered user interfaces without relying on third-party libraries — it’s in Chrome as of version 125.

The Times You Need a Custom @property Instead of a CSS Variable — Demonstrates where custom properties may be a more suitable option over variables, and showcases some of the freedom and flexibility that custom properties afford us.

Your Background Images Might Be Causing CLS by Salma Alam‑Naylor — In this post, learn how to to avoid unexpected cumulative layout shift (CLS) with tried and tested solutions.

The Modern Guide for Making CSS Shapes — A comprehensive guide with modern techniques for creating common shapes with the smallest and most flexible CSS code possible.

I’m Worried About the Tabbing Behavior, Rather than the Syntax and Name of 'CSS Masonry' — Some more thoughts on the recent CSS Masonry debate, with Andy noting that we should “worry about the basics first”.

Hardest Problem in Computer Science: Centering Things — “Even if it’s hard. Even if tools make it inconvenient. Even if you have to search for solutions. Together, I trust, we can find our way back to putting one rectangle inside another rectangle without messing it up.”

Manifesto for a Humane Web — In an age of trackers, bots, and generative AI, Michelle makes the case for a web by and for humans.

WordPress Studio: A Local App for Running WordPress in Dev — There have long been unofficial ways to run WordPress on your local machine to make life easier as you set things up, design themes, etc. but now WordPress has an official, quick, lightweight, and shareable local WordPress dev environment. For Mac so far, with Windows in ‘early access.’

Adding Customizable Network Visualization Capabilities to Your Apps — Find out how JS libraries can help you build rich network visualizations in your apps that are interactive & insightful.

DOM Projects: A Collection of Projects to Learn Frontend Development — Mainly for beginners, this serves as inspiration for learning to build simple apps with JS and DOM manipulation. Choose a project to view the source and try to build the same app yourself.

WyW-in-JS: A Toolkit for Zero-Runtime CSS-in-JS Libraries — Meaning “Whatever-you-want-in-JS”, it allows developers to build their own CSS-in-JS solution that’s decoupled from any specific implementation. As an example, Material UI’s Pigment CSS is based on this tool.

🎨 Color Picker: Pick Colors by Clicking on Any Image — Upload an image then use an eyedropper tool to select pixels one at a time to generate a color palette. You can also save palettes and choose the output format (RGB, Hex, HSL). Easier than installing a local tool, perhaps.

go-masonry-gallery: A CLI Tool to Generate a Simple HTML/CSS Masonry Gallery from a Local Folder — Note that the generated result makes use of the recently debated, still experimental Masonry feature for CSS grid layout.