Frontend  Focus

#477 — February 10, 2021 | Read on the web

An Interactive Guide to CSS Transitions — This is an excellent and comprehensive guide to using CSS transitions. Covers the basics really well — but even if you’re a bit more experienced in working with CSS animations I’d say you’ll no doubt still learn something here.

Josh W Comeau

21 Bad Front-End Habits to Drop in 2021 — A fun but clearly opinionated list from one of the maintainers of the State of CSS survey. They’re more about mindset and approach rather than the underlying tech.

Sacha Greif

Fast, Reliable Feature Management for the Modern Enterprise — LaunchDarkly is a feature management platform that empowers teams to safely deliver & control software through feature flags. By separating code deployments from feature releases, we enable you to deploy faster, reduce risk, and iterate continuously.

LaunchDarkly sponsor

How Vivaldi Became the Power-User Browser — Ernie Smith talks with Vivaldi CEO Jon von Tetzchner about how the ‘power-user’ browser Vivaldi has managed to “maintain a flexible design philosophy in an era when so much is decided for you online”.

Tedium

Exploring the Complexities of Width and Height in CSS — The explicit values you set and the actual values that render can often be different. This post digs into those complexities.

Uri Shaked and Michal Porag

? Tutorials, Articles & Opinion

Managing CSS Z-Index In Large Projects — Wrangling z-index values can often prove tricky. Here, Steven Frieson shares an easy-to-implement framework that brings “clarity and confidence” to working with z-index.

Smashing Magazine

prefers-contrast: forced Is A Mistake — CSS Media Queries Level 5 is coming, and though still in progress the author feels that new media feature prefers-contrast: forced is a “mistake in the making”.

Kilian Valkhof

Sharing Data Between CSS and JavaScript using Custom Properties — A look at how to use the power of JavaScript to give CSS things it can’t access. For example, CSS can’t read the coordinate of the mouse cursor, but JavaScript can. Opens up some interesting possibilities.

Christian Heilmann

10 Software Components to Stop Building In House — Reduce development time & conserve engineering resources by integrating these 10 types of SaaS solutions.

Stream sponsor

The Complete Guide to Centering in CSS — We linked to this a fair few months ago, but spotted it was doing the rounds again — it covers centering in CSS using grid, flexbox, and classic block element layouts. It remains a handy guide for what’s a seemingly perennial hurdle to overcome. ?

Stephanie Eckles

Going From Solid to Knockout Text on Scroll — A fun CSS trick in which a large title switches from a solid color to knockout text as the background image behind it scrolls.

Blake Lundquist

Google’s Next Big Chrome Update Will Rewrite The Rules of The Web — Matt Burgess writes on how Google’s impending takedown of third-party cookies in Chrome is a big win for privacy. And Google.

Wired

How to Change The Look and Feel of Pseudo Elements using JavaScript and CSS — Here’s how CSS Custom Properties can help when changing any pseudo elements through JavaScript.

Dharmen Shah

Animating a CSS Gradient Border — Some Chromium only techniques here, but neat all the same.

Bramus Van Damme

A Guide to Making Your Images and Videos Accessible

Suzanne Scacca

How to Avoid Layout Shifts Caused by Web Fonts

Simon Hearne

The Web Performance of Internal Systems Is Important, So Optimise Them Too

Matt Hobbs

The Enigma of The Ellipsis and Why We See It On Every UI

Jason Carlin

? Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

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 Your Next Job Through 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

? Code, Tools and Resources

doodad: Generate Unique, Seamless, Royalty-free Patterns — After you build the pattern, you can export as JPEG, PNG, SVG, or data URI for CSS backgrounds.

doodad

Luxa CSS: A Lightweight CSS Framework for Any Development Context — Includes class names like .lx-avatar and .lx-btn along with an easy to follow modifier system. Not necessarily the next Tailwind, but seems like a decent option.

Lucas de França

blurhash-to-css: Convert a BlurHash to a CSS Object using TypeScript, Rust, and WebAssembly — A ’BlurHash’ is a compact representation of a placeholder for an image that can improve perceived load times. They’re often rendered using canvas but this makes it possible via CSS too. Example page.

Jamie Mason

github1s: One Second to Browse any GitHub Repo with VS Code — Just add 1s to any GitHub URL (before the .com) and you’ll get a Web-based VS Code-like view of the repo’s directory structure and files. Try an example here.

netcon

Are You ARM Ready? Learn How Buildkite Is Becoming ARM Native

Buildkite sponsor

Emotisign: Quickly Add Social-Media-Like Sentiment Tracking to Your Web Pages

emotisign

The Chrome Dino Goes Disco — Tap through to watch the dino dance (it’s more of a little shuffle really). Sharing this mainly because it’s cute / amusing. ?

Jhey Tompkins codepen