Frontend Focus

#​525 — January 19, 2022 | Read on the web

Modern Fluid Typography Using 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 — 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 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

How Do We Predict the Ever-Changing Shape of the Covid19 Pandemic? 🦠📊 — 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 — 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? — 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:

📙 Tutorials, Articles & Opinion

▶  CSS Cascade Layers: An Overview of the New @layer and layer() CSS Primitives — 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.

Una Kravets

Replacing jQuery (110kb) with Umbrella JS (8kb) — 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 — 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 — Explores the Navigation Timing Web API — a powerful tool to programmatically gather and measure a web app’s key performance metrics.

Shimin Zhang

Website Performance and The Planet — A high-level list of performance considerations from an eco-conscious point of view.

Fershad Irani

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 — 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
Christian Heilmann

▶  Flexbox or Grid - How to Decide?
Kevin Powell

Jobs

Senior React Engineer @ Nebulab (Remote) — 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 — Millions get inspired and plan adventures with our apps. To help us make 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 — 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.

🔧 Code, Tools & Resources

clay.css: A CSS Utility Class and Sass Mixin for Adding 'Claymorphism' Styles to Components — 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.

Adrian Bece

Vanilla List: A Directory of Vanilla JavaScript Plugins — 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 — 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

Shortcut (formerly Clubhouse.io) sponsor

CSS Fingerprint: A Resource for Learning About Tracking Info on Site Visitors with CSS — 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.

Oliver Brotchie

Two.js: A Renderer-Agnostic 2D Drawing Library — 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 — Paste in any site's URL or use existing CSS code to generate various palettes that you can view as CSS or SCSS.

alwane