Frontend Focus
#477 — February 10, 2021 | Read on the web |
Image via: Easings.net
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 |
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
|
How to Avoid Layout Shifts Caused by Web Fonts
|
The Web Performance of Internal Systems Is Important, So Optimise Them Too
|
The Enigma of The Ellipsis and Why We See It On Every UI
|
💻 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 |
🧑💻 Looking to share your job listing in Frontend Focus? There's more info here.
🔧 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 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 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 |