Frontend Focus

#​492 — May 26, 2021 | Read on the web

CSS Container Queries For Designers — CSS Container queries, a long-requested feature by developers is coming soon to CSS — here’s an excellent look, complete with examples and visuals, on how this feature will change the way designers usually work and how/why they should adapt to this new feature.

Ahmad Shadeed

25 Years of CSS — Eric shares some of his handwritten notes on CSS from a quarter-century ago, and reflects on the changes that have occurred in the years since. “I wonder now, in the latter half of my life, what CSS — what the web itself — will look like in another 25 years”.

Eric Meyer

Monitor and Improve Core Web Vitals with Raygun — Are you ready for Core Web Vitals? Start tracking Google's modern, customer-centric metrics with Raygun, and get all of the diagnostics you need to take action. Pricing starts from as little as $8 per month, so get your competitive edge today.

Raygun sponsor

CSS Container Queries: Use-Cases And Migration Strategies — Another look at CSS container queries, this time covering the basics, use-cases, and how to use them today with progressive enhancement or polyfills.

Adrian Bece

An Experimental 'Follow' Feature Coming to Chrome? — If you remember 10+ years ago, subscribing to sites using their RSS feeds and tools like Google Reader was pretty common. RSS is still around but social platforms and email have become more important. Google is experimenting by letting some users ‘follow’ sites from Chrome and keeping your RSS feed updated and discoverable will be a key part of making it work.

Google

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Finally Understanding PNG — A high level introduction to the key concepts of the PNG graphics format that enable it to be efficient in terms of space and how you can use these concepts to reduce the size of your own PNGs.

Christoph Erdmann

Making Disabled Buttons More Inclusive — A look at why we use disabled buttons, and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled>) to mark a button as disabled.

Sandrina Pereira

Trouble with Remote Pair Programming? Download Revelo’s eBook — The future of work is here. Prepare yourself and your team for remote pairing.

Revelo sponsor

Container Queries in Web Components — Here’s a Chrome-only demo showing container queries in action.

Max Böck

Understanding Easing Functions For CSS Animations And Transitions — A deep dive into easing functions and how we can use them to create ‘natural and stunning’ animations.

Adrian Bece

Embedding Google Forms in a Static Site Without iFrames — An approach promising more customizability than embedding a Google Form IFRAME.

Brian May

How to Set Browser Flags in Chromium — For some of the new APIs introduced in Chromium, you need to set a browser flag for experimentation. This article explains how to do this in the various Chromium derivatives like Google Chrome, Microsoft Edge, and others.

Thomas Steiner

Live Webinar: Discover the Editor X Workspace

Editor X sponsor

Building A Rich Text Editor (WYSIWYG) From Scratch
Shalabh Vyas

How to Get Started with Canvas Animations in JavaScript
Michael Karén

▶  How Useful Is the System Usability Scale (SUS) in UX Projects?
Jakob Nielsen

Why You Should Use Tailwind CSS with React Native
Daniel Idaszak

Jobs

Senior Frontend Engineer - Remote — Looking for a JS enthusiast who loves TypeScript, Next.js, and SSR. Let's build the future of finance together.
Kikoff

Lead Frontend Development at Fleet (100% Remote) — Work with the creators of Sails.js + osquery at our new venture, building a better way to manage employee laptops and servers.
Fleet

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

🧑‍💻 Got a job listing to share? Here's how.

🔧 Code, Tools and Resources

Remix Icon: An Open Source Library of 2,200+ Icons in HTML/CSS, SVG or PNG Format — Filter the icons by category, add to collections, and instantly grab the format you want.

Remix Design

Euismod: An Interactive Resource to Learn CSS Grid — Includes a sandbox where you can complete lessons along with a short quiz on the Grid Layout features.

Etesam Ansari

SVG Crop: Remove Blank Space From Around Any SVG Instantly

Steve Dennett

Vuestic: A Free and Open Source UI Library for Vue 3

Epicmax

The New iMac in CSS — Apple’s new iMac is out, and as such Adir has recreated the machine in HTML and CSS. It’s in 3D, and you can change the color too.

Adir SL codepen