February 10, 2021 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 Comeau21 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 sponsorHow 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”.TediumExploring 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?? Quick bits:The startup time for Chrome’s DevTools is now around 13% faster.A new in-development browser called Beam has just taken on a fresh round of capital to help it become a reality.Obinna Ekwuno of Gatsby is making the case for web accessibility in this free virtual meetup tomorrow.A university study into browser fingerprinting (assessing the consequences for privacy) is seeking participants.? Tutorials, Articles & OpinionManaging 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 Magazineprefers-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 ValkhofSharing 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 Heilmann10 Software Components to Stop Building In House — Reduce development time & conserve engineering resources by integrating these 10 types of SaaS solutions.Stream sponsorThe 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 LundquistGoogle’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.WiredHow 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 ShahAnimating a CSS Gradient Border — Some Chromium only techniques here, but neat all the same.Bramus Van DammeA Guide to Making Your Images and Videos Accessible Suzanne ScaccaHow to Avoid Layout Shifts Caused by Web Fonts Simon HearneThe Web Performance of Internal Systems Is Important, So Optimise Them Too Matt HobbsThe Enigma of The Ellipsis and Why We See It On Every UI Jason Carlin? JobsFrontend 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-TeamSenior 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.KomootFind 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.doodadLuxa 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çablurhash-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 Masongithub1s: 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.netconAre You ARM Ready? Learn How Buildkite Is Becoming ARM NativeBuildkite sponsorEmotisign: Quickly Add Social-Media-Like Sentiment Tracking to Your Web Pagesemotisign 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 Source link