Frontend  Focus

#485 — April 7, 2021 | Read on the web

Vanilla JavaScript Code Snippets — A thorough look at vanilla resources and lightweight JS libraries to help solve various problems without the need for any large overheads or third-party dependencies.

Vitaly Friedman

Dark Mode in 5 Minutes with Inverted Lightness Variables — Tips for creating a quick and scrappy dark mode ‘base’ that works in minutes.

Lea Verou

Need an Angular Data Grid? Try This Kendo UI Tutorial — You know layout grids, but most apps also need a data grid. If you have ever built one, you know what a monumental task it is. Kendo UI for Angular helps with an easy-to-implement modern data grid. Try it for yourself with this tutorial.

Kendo UI for Angular sponsor

Tailwind CSS v2.1 Released — This version of the popular CSS framework brings the new JIT engine to core, adds first-class CSS filter support, and more.

Adam Wathan

Container Queries Are Actually Coming — “we’re finally getting container queries and they will transform UI design, just like media queries did”.

Andy Bell

'Swipey' Image Grids — A really good look at how SVG can be used beyond just illustrations and icons and can open up a world of UI styling opportunities. Lots of neat animation and demos to help things along here.

Cassie Evans

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Image via: Sam Morris (The Markup)

We Ran Tests on Every U.S. State’s COVID-19 Vaccine Website — The results, measuring accessibility and privacy protections, were not always great.

Jon Keegan and Colin Lecher

Accessible Front-End Components: Claims Vs Reality — Not all ‘accessible components’ are created equal. Find out which will work best for your end users with this checklist.

Hidde de Vries

Report: See Why Developers Spend 34% of Their Time on Internal Apps

Retool sponsor

Guarding Against Disposable Design — “There is no one-size-fits-all approach for sustainable web design, but there are recurring principles of purpose, evolution, and long-term thinking. Those are the qualities that allow sites to weather the constant tempests of the Web”.

Frederick O’Brien

▶  How to Create a Globe and Add Cities using Three.js — A recorded coding session. (86 minutes.)

Yuriy Artyukh

Creating a Smart Navbar With Vanilla JavaScript
Jemima Abu

How to Debug DevTools with DevTools
Rachel Simone Weil

💻 Jobs

Find New JavaScript Jobs on JsJobbs — Subscribe on JsJobbs to get new, high quality JavaScript Jobs sent to your inbox before everyone else.


🧑‍💻 Got a job listing to share? Here's how.

🔧 Code, Tools and Resources

Cheetah Grid 1.0: The Fastest Open-Source Data Table for the Web? — A bold claim from a library we’ve not encountered before. There’s a live demo here with 1,000,000 records in a table if you want to try it for yourself, though.

Future Corp

tailwindcss-logical: A CSS Logical Properties and Values Plugin for Tailwind — Adds support for the internationally-friendly logical properties in CSS (i.e. using ‘start’ and ‘end’ instead of ‘left’ and ‘right’) to Tailwind’s utility classes.

Steve Cochrane

Reseter.css: A Futuristic CSS Reset — Here’s another alternative to Normalize.css. This one is offered in multiple formats including SCSS and styled-components and there’s a chart to compare it to other reset options.

Krish Dev DB

Free Chat & Activity Feed APIs for Qualifying Teams — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project.

Stream sponsor

Condition: A 64KB WebGL 'Demo' — The demoscene is a programming and art subculture where impressive visual demos are created (often with limited resources) and this is a Web-based example using WebGL. Here’s the source code.


A Reproduction of the Spotify Client Built with Angular 11 — Brings together Angular 11, Nx Workspace, ngrx, TailwindCSS and ng-zorro. Nice work, especially since it actually works.

Trung Vo

A Collection of Over 100 Underline/Overlay Animations

Temani Afif