Frontend Focus

#​521 — December 15, 2021 | Read on the web

Results of the State of CSS 2021 Survey — Here's the results from the always excellent State of CSS survey, which went live last night. As ever, the results highlight lots of interesting tidbits about CSS usage, adoption, and awareness in 2021, such as:

  • When it comes to frameworks, Tailwind CSS usage is up 13% year-on-year, but Bootstrap still takes the top spot.
  • 46% of respondents detailed how they actively use Firefox for development.
  • Over 80% of respondents have now used CSS Grid.
  • A near 99%(!) of those filling out the survey have used Flexbox.
  • Curiously, nearly 50% of respondents are said to be 'happily using one or more CSS-in-JS library'.
  • Details on rise of CSS Custom Properties, and much, much more — this is all well worth digging into.
  • Kilian Valkhof, the creator of Polypane, shares his conclusion of this year's results here.

Sacha Greif

Tailwind CSS v3.0 Released — Tailwind CSS is an increasingly popular CSS framework (as mentioned above), and last week saw the release of v3.0. This new version introduces faster build times, an extended color palette, multi-column layouts, native form control styling, fancy underlines, and much more.

Adam Wathan (Tailwind)

New Course: Stay Productive Across Multiple Machines, Projects, and Technologies — Enhance your developer productivity with this detailed course on setting up your professional toolchain, covering Ansible, Dotfiles, Terminals, tmux, Bash, and more.

Frontend Masters sponsor

▶  WordPress: State of The Word 2021 — Matt Mullenweg delivered the annual 'State of the Word' annual keynote yesterday, covering all things WordPress, including WordPress 5.9, Openverse, Web3 and yes, even non-fungible tokens.


⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Embrace the Platform — Sage advice: “Keep it simple. Apply the Rule of Least Power. Build with progressive enhancement in mind”.

Bramus Van Damme

Wide Gamut 2D Graphics using HTML Canvas — Support for graphics in wide-gamut color space, including Display P3, inside the canvas element shipped in Safari 15.2.

Cameron McCormack (WebKit)

Put the “Flow” in Your Workflows with Shortcut — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut.

Shortcut (formerly sponsor

Breaking Out of the Box — Progressive Web Apps are blurring the lines between apps and websites, Patrick Brosset helps us think outside of the rectangular box, talking about the Windows Controls Overlay.

A List Apart

Chrome Users Beware: 'Manifest V3 is Deceitful and Threatening' — “Manifest V3 is another example of the inherent conflict of interest that comes from Google controlling both the dominant web browser and one of the largest internet advertising networks”.

Daly Barnett opinion

▶  Build a Color Contrast Checker with Eleventy Serverless — A lightning talk about using Eleventy Serverless to build a zero client-side JavaScript application.

Ben Myers

The Six-Point Guide For Choosing SVG or Webfont — What’s the best choice? This checklist aims to help you decide on the right tech.

Matt Johnson

▶  Building The Most Inaccessible Site Possible…with a perfect Lighthouse score. 😬

Manuel Matuzovic

Responsive iframes with The CSS aspect-ratio Property
Chris Ferdinandi

▶  The Zombie DOM: Old DOM Stuff That Still Haunts Us Today
Google Chrome Developers

Standardizing Focus Styles With CSS Custom Properties
Stephanie Eckles

Internationalized Domain Names Are Still Not Well Supported in 2021
Zack Apiratitham

Analytics Tools Can't Track Screen Readers — And Shouldn't
Bureau of Internet Accessibility


Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

Engineering Manager - Front End (Remote) — With over 8 million clients, Kraken is one of the world's largest, most successful bitcoin exchanges.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools and Resources

Lighthouse Simulator: Run A Lighthouse Performance Test At A Range of Different Network Speeds — The main pull here is that you get observed vs. simulated throttling, along with tables showing how different network settings impact certain performance metrics.


Text Balancer: A Fast Text Wrap Balancer for Multi-Line Headlines — This script attempts to improve on a few existing ones to help avoid uneven headings where the trailing word drops to a new line (i.e. “orphan” text).

Daniel Aleksandersen

Thousands of Teams at Companies Like Amazon, Peloton & DoorDash Collaborate Around Custom Retool Apps

Retool - Build Internal Tools sponsor

deeplinks: Simple Deep Links to Any Text Selection On Your Site

Wesley Aptekar-Cassels

Pico.css: A Minimal CSS Framework for Semantic HTML — Includes dark and light mode themes out-of-the-box and the focus is more on styling native HTML elements, rather than littering your HTML with classes.

Lucas Larroche

ffflux: Online SVG Fluid Gradient Background Generator — Doesn’t create animated backgrounds, but the patterns feel more organic and “motion-like” for designs that fit this style.

Sébastien Noël

COBE: A 5KB WebGL Globe Rendering Library — You can try out an impressive demo here and the API is simple and easy to use.

Shu Ding