---
title: "Some top front-end tools of 2021"
publication: "Frontend Focus"
issue: 525
published_at: "2022-01-19"
canonical_url: "https://frontendfoc.us/issues/525"
---

Plus how to use CSS clamp, and building UI components with SVG. |            

[![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/)   

Frontend Focus 

#​525 — January 19, 2022 | [Read on the web](https://frontendfoc.us/issues/525)       

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1642600978/xgsmvjzekdjymmomdnpk.png)](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)  

[Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/) — An exploration of fluid typography principles, use-cases, implementation with CSS `clamp()` and an interactive fluid typography calculator. 

Adrian Bece   

[Parcel CSS: A New CSS Parser, Compiler, & Minifier Written in Rust](https://parceljs.org/blog/parcel-css/) — Continuing the trend of writing JS infrastructure in other languages, the Parcel bundler has a new CSS compiler and minifier written in Rust. [Parcel 2.2](https://github.com/parcel-bundler/parcel/releases/tag/v2.2.0) has just come out and supports a new experimental CSS transformer plugin if you want to try it out, but you can use it standalone too. 

Devon Govett   [![\](https://copm.s3.amazonaws.com/6a5ac83d.png)](https://buildkite.com/blog/monash-university-uses-buildkite-in-covid-19-modelling?utm_campaign=CPress&utm_source=ppc&utm_medium=cpress&utm_term=monash-university&utm_content=devops) 

[How Do We Predict the Ever-Changing Shape of the Covid19 Pandemic? 🦠📊](https://buildkite.com/blog/monash-university-uses-buildkite-in-covid-19-modelling?utm_campaign=CPress&utm_source=ppc&utm_medium=cpress&utm_term=monash-university&utm_content=devops) — Head of Epidemiological Modelling and developers from Monash’s School of Public Health & Preventive medicine explain how they ingest data to produce models. 

Buildkite sponsor   

[Building UI Components with SVG and CSS](https://ishadeed.com/article/building-components-svg-css/) — Plenty of good examples here looking at how creating user interface components with the help of SVG can be beneficial. Ahmad does a great job of highlighting some interesting use cases. 

Ahmad Shadeed   

[What Were the Hottest Front-End Tools in 2021?](https://css-tricks.com/hottest-front-end-tools-in-2021/) — Louis Lazaris has compiled a comprehensive list looking back at some of the most popular and noteworthy frontend tools and resources from 2021. There's over 50 tools to look through here (_think icons, buttons, code generators, handy libraries, etc_) so you are bound to find a few things of value. 

CSS-Tricks     

**⚡️ Quick bits:** 

- 👍 Looks like work is now underway on [implementing CSS Subgrid](https://groups.google.com/a/chromium.org/g/blink-dev/c/GcoJNrGwWAc/m/hbEsge9qAAAJ) in Blink/Chromium.
- 📅 Next Tuesday you can join a live 'state of the Web' session discussing [the current state of headless CMSes,](https://www.thisdotmedia.com/state-of-the-web/#/) including Strapi and Storyblok.
- A [security flaw in Safari and WebKit](https://www.engadget.com/safari-webkit-exploit-browser-history-google-account-200711732.html) lets sites obtain some of your browser history and Google account info. 😬    

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1642601686/kpzn6e3lumywhkemim9y.png)](https://www.youtube.com/watch?v=ilrPpSQJb3U)  

▶[CSS Cascade Layers: An Overview of the New `@layer` and `layer()` CSS Primitives](https://www.youtube.com/watch?v=ilrPpSQJb3U) — Cascade layers are in the current Safari Tech Preview, they’re coming to Chromium 99 (Canary), and Firefox 97 (Nightly). This quick video clearly shows what they and how to use them. There’s [a demo for supported browsers here](https://codepen.io/web-dot-dev/pen/LYzqPEp). 

Una Kravets   

[Replacing jQuery (110kb) with Umbrella JS (8kb)](https://www.bennadel.com/blog/4184-replacing-jquery-110kb-with-umbrella-js-8kb.htm) — A little case study of sorts here, looking at replacing once dominant jQuery with the notably smaller Umbrella JS — which has a similar API and prototype-based plugin system. Code examples and a video here too. 

Ben Nadel   

[Top Five Angular Examples Developers Searched for in 2021](https://www.telerik.com/blogs/top-5-most-searched-angular-examples-2021?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=blog-top-5-most-searched-angular-examples-2021) — Browse live running demos, with code, that show the top five most searched for Angular examples, provided by The Kendo UI team. 

Progress Kendo UI for Angular sponsor   

[Measure Web Performance with the Navigation Timing API](https://blog.shimin.io/measure-web-performance-with-navigation-timing-api/) — Explores the [Navigation Timing Web API](https://www.w3.org/TR/navigation-timing/) — a powerful tool to programmatically gather and measure a web app’s key performance metrics. 

Shimin Zhang   

[Website Performance and The Planet](https://blog.webpagetest.org/posts/website-performance-and-the-planet/) — A high-level list of performance considerations from an eco-conscious point of view. 

Fershad Irani   

[Writing Better CSS](https://www.aleksandrhovhannisyan.com/blog/writing-better-css/) — Sound advice on how to write better CSS using modern strategies like the `:is` and `:where` pseudo-class functions, logical properties and values, clamp, gaps, and aspect-ratio. 

Aleksandr Hovhannisyan   

[The Optional Chaining Operator, “Modern” Browsers, & My Mom](https://blog.jim-nielsen.com/2022/a-web-for-all/) — Some unsupported JavaScript syntax caused an entire website to fail on two seperate hardware devices. A story of device obsolescence, accessibility, and progressive enhancement. 

Jim Nielsen   

[Turning a GitHub Page into a Progressive Web App](https://christianheilmann.com/2022/01/13/turning-a-github-page-into-a-progressive-web-app/) 
Christian Heilmann   

▶[Flexbox or Grid - How to Decide?](https://www.youtube.com/watch?v=3elGSZSWTbM) 
Kevin Powell    

Jobs  

[Senior React Engineer @ Nebulab (Remote)](https://nebulab.com/careers?gh_src=3495fbf2teu) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers. 
Nebulab   

[Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/DCC51EA91D/senior-web-developer-node-reactjs) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. 
Komoot   

[Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired   

🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_.   

🔧 **Code, Tools & Resources**  [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1642601267/vzjhlo1hvb9mha22w2ja.png)](https://codeadrian.github.io/clay.css/) 

[clay.css: A CSS Utility Class and Sass Mixin for Adding 'Claymorphism' Styles to Components](https://codeadrian.github.io/clay.css/) — Generates a fairly unique look that would only work for certain designs. The styles are easily customizable via CSS custom properties. [Here's the associated repo.](https://github.com/codeAdrian/clay.css) 

Adrian Bece   

[Vanilla List: A Directory of Vanilla JavaScript Plugins](https://vanillalist.top/) — Mostly oriented around useful frontend web controls and UI elements. Note that the plugins themselves may have multiple dependencies – just not things like jQuery, React, etc. 

Glitch.Family   

[Responsive Viewer: A Chrome Extension to Test Responsive Designs](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb) — Similar to what’s possible in your browser’s DevTools nowadays, but this one can view multiple screens at once with synchronized scrolling. 

Solaiman Kmail   

[Shortcut Puts the Agile in Agile and the “Can” in Kanban](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=kanban) 

Shortcut (formerly Clubhouse.io) sponsor   

[CSS Fingerprint: A Resource for Learning About Tracking Info on Site Visitors with CSS](https://csstracking.dev/) — Explains some of the techniques that have been floating around on CSS-only tracking. You can agree to see your own fingerprint or just [check out the repo.](https://github.com/OliverBrotchie/CSS-Fingerprint) 

Oliver Brotchie   

[Two.js: A Renderer-Agnostic 2D Drawing Library](https://two.js.org/) — Built by a graphic designer, this library focuses on vector shapes and motion graphics in particular built upon scenegraphs. 

Jono et al.   

[Alwane: Extract Colors From Any Website](https://alwane.io/) — Paste in any site's URL or use existing CSS code to generate various palettes that you can view as CSS or SCSS. 

alwane    

📬 

**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|*)