|
Modern Fluid Typography Using CSS Clamp — An exploration of fluid typography principles, use-cases, implementation with CSS 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 |
|
📙 Tutorials, Articles & Opinion |
▶ CSS Cascade Layers: An Overview of the New 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 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
|
▶ Flexbox or Grid - How to Decide?
|
|
🔧 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 |