--- title: "Vanilla JS resources worth knowing" publication: "Frontend Focus" issue: 485 published_at: "2021-04-07" canonical_url: "https://frontendfoc.us/issues/485" --- ...plus container queries are on the way. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #485 — April 7, 2021 | [Read on the web](https://frontendfoc.us/issues/) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1617802992/wy9wqnurfvvz3noncdbc.jpg)](https://www.smashingmagazine.com/2021/04/vanilla-javascript-code-snippets/) [Vanilla JavaScript Code Snippets](https://www.smashingmagazine.com/2021/04/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](https://lea.verou.me/2021/03/inverted-lightness-variables/) — Tips for creating a quick and scrappy dark mode ‘base’ that works in minutes. Lea Verou [![\](https://copm.s3.amazonaws.com/932bd5ba.png)](https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular-blog-frontend-grid-turorial&utm_content=primary) [Need an Angular Data Grid? Try This Kendo UI Tutorial](https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular-blog-frontend-grid-turorial&utm_content=primary) — 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](https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular-blog-frontend-grid-turorial&utm_content=primary). Kendo UI for Angular sponsor [Tailwind CSS v2.1 Released](https://blog.tailwindcss.com/tailwindcss-2-1) — 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](https://piccalil.li/blog/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](https://www.cassie.codes/posts/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:** - Google Chrome can now [caption media in real time](https://blog.google/products/chrome/live-caption-chrome/) thanks to a new 'Live Caption' feature - The ever excellent [Web Almanac project](https://almanac.httparchive.org/en/2020/) is returning for 2021 and is currently seeking contributors. [Details here](https://docs.google.com/forms/d/e/1FAIpQLSeZJhAvmSTFtQpahplL7uwdBo7UB1iAkRp2MUaPK74KsrN1fQ/viewform). - No, [the BLINK tag](https://www.w3.org/2021/04/pressrelease-blink.html.en) isn't coming back, the W3C was just having a little April Fools' Day fun. 😅 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1617794551/asjo1rsxt8rpaitjgjhk.jpg)](https://themarkup.org/coronavirus/2021/03/24/we-ran-tests-on-every-states-covid-19-vaccine-website) Image via: Sam Morris ([The Markup](https://themarkup.org/coronavirus/2021/03/24/we-ran-tests-on-every-states-covid-19-vaccine-website)) [We Ran Tests on Every U.S. State’s COVID-19 Vaccine Website](https://themarkup.org/coronavirus/2021/03/24/we-ran-tests-on-every-states-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](https://hiddedevries.nl/en/blog/2021-04-02-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](https://retool.com/blog/state-of-internal-tools-2021/?utm_source=cooperpress&utm_medium=referral&utm_campaign=soit_2021) Retool sponsor [Guarding Against Disposable Design](https://www.smashingmagazine.com/2021/04/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](https://tympanus.net/codrops/2021/04/05/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](https://css-tricks.com/creating-a-smart-navbar-with-vanilla-javascript/) Jemima Abu [How to Debug DevTools with DevTools](https://dev.to/hxlnt/how-to-debug-devtools-with-devtools-4ej4) Rachel Simone Weil 💻 **Jobs** [Find New JavaScript Jobs on JsJobbs](https://jsjobbs.com/newsletter) — 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](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,e_tint/rhpbpqkcwh1xjktxs8f5.jpg)](https://github.com/future-architect/cheetah-grid) [Cheetah Grid 1.0: The Fastest Open-Source Data Table for the Web?](https://github.com/future-architect/cheetah-grid) — A bold claim from a library we’ve not encountered before. There’s [a live demo here](https://future-architect.github.io/cheetah-grid/#/) 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](https://github.com/stevecochrane/tailwindcss-logical) — 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](https://github.com/krishdevdb/reseter.css) — 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](https://getstream.io/blog/maker-account/?utm_medium=promoted_newsletter&utm_source=frontend_focus) — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project. Stream sponsor [Condition: A 64KB WebGL 'Demo'](https://fms-cat.com/condition/pages/) — The [_demoscene_](https://en.wikipedia.org/wiki/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.](https://github.com/FMS-Cat/condition) FMS_Cat [A Reproduction of the Spotify Client Built with Angular 11](https://github.com/trungk18/angular-spotify) — 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](https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40) Temani Afif 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)