Frontend Focus

#​510 — September 29, 2021 | Read on the web

Simplifying Form Styles with accent-color — The new CSS accent-color property makes it quick and easy to roll out brand colors to certain form inputs by leveraging user agent styles. This article looks at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.

Michelle Barker

ct.css – Let’s Take A Look Inside Your <head> — This is a new nifty little diagnostic snippet that helps spot common <head> performance bottlenecks easily.

Harry Roberts

Shortcut Puts The 'Can' in Kanban and the Agile in Agile — Imagine how much more you could get done if your project management tools didn't make you sigh. Shortcut is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try.

Shortcut sponsor

Bringing Instant Page-Loads to the Browser Through 'Speculative Prerendering' — Learn more about how speculative prefetching and prerendering in the browser are used, drawbacks of the current implementations, and how to participate in the Chrome origin trial.

Leena Sohoni and Addy Osmani

▶  What's Coming in WCAG 2.2? — This hour-long webinar dives into what you need to know about the upcoming version of the Web Content Accessibility Guidelines, plus how the changes benefit people accessing the web, and when you should adopt the new criteria.

Matthew Putland

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Accessible Palettes: Stop Using HSL for Color Systems — Following a recent color system project Eugene shares the most important lessons learnt about color and presents a new design and accessibility tool (Accessible Palette) born out of this work.

Eugene Fedorenko

One Last Time: Custom Styling Radio Buttons and Checkboxes — Restyling native HTML radio buttons and checkboxes without the use of visually hidden inputs.

Scott O'Hara

A Content Model Is Not a Design System — Having a great site isn’t enough, as folks are getting answers from apps, voice assistants, and rich search snippets — this article looks at developing an omnichannel content strategy.

Dougal MacPherson (A List Apart)

We'll Build Your Frontend Team In Days, Not Months — Tell us your ideas for a frontend strategy, and we’ll tell you what’s possible and what can be improved. 1h, no charge.

The Software House sponsor

▶  You Make My Head Spin: Reducing Motion on the Web — Some people suffer a lot when they encounter something like parallax scrolling — it can cause them nausea, dizziness, or other symptoms. These users can turn the “reduce motion” setting on — here’s a look at how to respect that setting.

Eeva-Jonna Panula

Understanding min-content, max-content, and fit-content in CSS — What these keyword values are, their differences, and how they can apply to a real-world project.

Ibadehin Mojeed

The Five Most Common Website Accessibility Issues (And How To Fix Them)
Bureau of Internet Accessibility

'Firefox for Android is a Mess, and Something Needs to Change'

What is ARIA? Common Misconceptions About Accessible Rich Internet Applications
Bureau of Internet Accessibility


Senior Frontend Engineer at UnifiHealth (Remote) — We're a seed-stage health insurance startup. Are you looking to have a big impact? Apply to be our first frontend engineer.

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

Can I Include(?) — This browser tool helps determine if one HTML tag can be included within another HTML tag, as per the HTML specification.

Alexander Vishnyakov

Motion One: The Web Animations API for Everyone — A new library for animations on the web. Built on the Web Animations API for a tiny bundle size and great performance. MIT licensed and with a nice simple API too.

Matt Perry

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code

Retool sponsor

MUI Treasury: A Collection of Ready-to-Use Components Based on Material-UI — All components are customizable and you can try them out here where you can test them on various mock device sizes.

siriwat kunaporn

Theatre.js: A JavaScript Motion Design Library for the Web — Can be used both programmatically and visually to animate 3D objects created with things like Three.js, HTML/SVG, and even just small page elements or JS variable values. Docs and GitHub repo.


Huey: A Multi-Featured, Custom Color Palette Generator — One of the nicer of such tools you’ll find. Randomize the palettes or choose a starting color. You can select number of families/tints, then export as PostCSS, SCSS, or Tailwind.

Zak Erving