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 |
|
📙 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 |
How to Debug DevTools with DevTools
|
💻 Jobs |
Find New JavaScript Jobs on JsJobbs — Subscribe on JsJobbs to get new, high quality JavaScript Jobs sent to your inbox before everyone else. JSJOBBS |
🧑💻 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. FMS_Cat |
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 |