#456 — September 2, 2020

Web Version

Frontend Focus

10 Lesser-Known Web APIs You May Want to Use — Includes the likes of the Performance Interface API, the Vibration API, Clipboard Async API, and others. Your bound to learn something here, although it's worth noting some of these are Chrome-only for now or otherwise in flux/under development.

Tapas Adhikary

COVID-19 Has Changed Your Users — Notes how people’s behaviors and preferences have shifted over the last six months. "Research will help you figure out how your users have changed and how your designs need to adapt".

Kate Moran

New Course: 🐧 Complete Intro to Linux and the Command-Line — Gain powerful command-line skills, learn to use Ubuntu, quit VIM, handle package management, and write your own shell scripts.

Frontend Masters sponsor

D3 6.0: The Data-Driven Document Library — The popular data visualization library takes a step forward by switching out a few internal dependencies for better alternatives, adopts ES2015 (a.k.a. ES6) internally, and now passes events directly to listeners. Full list of changes. There’s also a 5.x to 6.0 migration guide for existing users.

Mike Bostock

'The Five Most Annoying Website Features I Face As A Blind Person Every Single Day' — Highlights some inaccessible web elements that a screen reader user runs into on a regular basis, and how to fix them. They may seem basic, but we expect most sites slip on at least one or two elements.

Holly Tuke

Snowpack Version 2.10.0 Released — The latest version of this popular frontend build tool now supports native CSS @imports. Use it to load CSS, Sass, Less, and any compile-to-CSS language you already have defined in your build pipeline.

Fred K. Schott

⚡️ Quick bits:

💻 Jobs

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


Sr. Engineer @ Dutchie, Remote — Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital.


Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.


➡️ Looking to share your job listing in Frontend Focus? More info here.

📙 Tutorials, Stories & Opinion

Help Users Change Passwords Easily by Adding a 'Well-Known' URL for Changing Passwords — By redirecting requests to a well-known URL for password changes, you can let users update their passwords easier than before.

Eiji Kitamura

Cumulative Layout Shift: The Layout Instability Metric — A look at the Layout Instability API and its use to compute the Cumulative Layout Shift of a page.

Boris Schapira

▶  Accessibility in Design: Semantic Markup — A sub-15 minute video looking at how semantic markup can improve the content consumption experience for screen readers, robots, and your users overall.

Una Kravets

Get an Instant GraphQL API with Hasura to Build Fullstack Apps, Fast — Integrate Hasura’s GraphQL API with any frontend language or framework. Configure your backend with our intuitive UI.

Hasura sponsor

Creating an SVG Path Drawing Animation — The end result here is pretty neat.

Cassie Evans

Revisiting Adaptive Design, A Lost Design Movement — “How can people move from using a product, to understanding how it hangs together and making their own changes?”

Matt Webb

A Clean Start for The Web? Daydreaming A Post-HTML Utopia — Musings on the current web ‘monoculture’, the problems this creates, and ideas as to where we go from here.

Tom MacWright

A Grim Outlook On The Future of Browser Add-ons — “Add-on support is degrading across all browsers and will continue to do so”.

Wladimir Palant

Why CSS ::before Doesn’t Work On Inputs and Images

Šime Vidas

Create A Line Break While Maintaining Inline Status

Andy Bell

🗓 Upcoming Events:

  • Inclusive Design: The Big Picture (September 3) — This online half-day workshop takes place tomorrow, and aims to remystify inclusive design and share resources to help you create inclusive design patterns.
  • CityJS Conference (September 14 - 18) — Online conference and workshops. Speakers include Tan Li Hau, Ana Cidre, Kyle Simpson, Maximiliano Firtman and others.
  • Web and Machine Learning Workshop (Various September dates) — This event from the W3C aims to bring together providers of ML toolkits and framework providers with web platform practitioners.
  • Frontend Love (October 1 - 2) — Online JavaScript conference with over over 20 frontend professionals and authors speaking.

🔧 Code, Tools and Resources

ztext.js: A 3D Typography Effect for the Web — While it initially has a bit of a “WordArt” feel to it, this library actually adds a pretty neat effect to any text you can provide. This is also a good example of a project homepage, complete with demos and example code.

Bennett Feely

Capsize: Flipping How We Define Typography in CSS — Lets you generate code (JS, CSS-in-JS, or CSS) to improve the way text is sized in relation to its capital letters.


The 25 Best Sublime Text Plugins for Front End Developers

Shopify Partners sponsor

Bootstrap Icons v1.0.0 — The official Bootstrap open source library of 1,100+ SVG icons is now at its first stable release. Read about it here.

bootstrap team

Meta Tags: Preview, Edit & Generate Meta Tags for Social Platforms — This helps, for example, if you want to preview how your site looks as a Facebook or Twitter card, or how it will appear when shared on Pinterest or Slack.

Meta Tags

A Vintage Volkswagen Bug in CSS

Shunya Koide codepen