Frontend  Focus

#481 — March 10, 2021 | Read on the web

A Whimsically Illustrated CSS Grid Cheat Sheet — A handy guide with lots of illustrations covering both parent and children properties. There’s a video version of the guide here too.

Joy Shaheb

The Best Font Loading Strategies & How to Execute Them — Know your FOIT, FOUT, and FOFT in this detailed guide to font-loading strategies. It makes a few key recommendations at the end.

Zell Liew

A Friendly Introduction to Functional Programming with JavaScript by Anjana Vakil — Learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative), and use key concepts of functional to improve your everyday coding.

Frontend Masters sponsor

Exploring @property and its Animating Powers — Jhey Tompkins looks into what the @property feature can do, with a particular focus on how it can help with transitions and animations. Lots of cool CodePen examples here.


Speeding Up Chrome's Release Cycle — Chrome is planning to move to releasing a new ‘milestone’ every 4 weeks, starting with Chrome 94 in Q3 of 2021.

Alex Mineer (Google)

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Responsive Text Based on Image Size — Want the text below an image to match the image width? Here’s how.

Temani Afif

The Importance of Learning CSS — Aimed at those who primarily work with modern JavaScript frameworks like React, but find CSS confusing and frustrating: “getting better at CSS has had an enormous impact on my life and career as a developer”.

Josh W. Comeau

An Accessible Current Page Navigation State — When it comes to accessibility, using just color to convey meaning isn’t enough. Here’s how to implement a visual indicator to help a user understand where they are.

Callum Hart

Learn How Pipeline Automation Helps PagerDuty Run 500+ Builds Daily

Buildkite sponsor

Through The Pipeline: An Exploration of Frontend Bundlers — A developer compares Parcel, Rollup, and esbuild for his reasonably modest requirements.

Andrew Walpole

Tips for Building Accessible Design Systems — This post aims to address some common accessibility issues found with design systems.

Suzanna Scacca

A Super Flexible CSS Carousel, Enhanced With JS Navigation

Maks Akymenko

▶  How You Can Simplify Your CSS with :is()

Kevin Powell

The Best Classless CSS Frameworks in 2021

Melissa McEwen

💻 Jobs

Wynter Is Looking for Developers to Join Its Research Panel — Give feedback on digital products and landing pages, get paid $10-$50 per survey. Super low-key commitment, 10-15 mins per survey.

Wynter Research Panels

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.


Find Frontend Engineering Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.


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

🔧 Code, Tools and Resources

AVIF Converter: Online Tool to Convert Any Image to AVIF — You might find this useful for experimenting. The AVIF spec is still in early development and currently only Chrome, Firefox, and Opera have support for it.

Justin Schmitz & Niksa Sporin

HTML Boilerplates: Generate and Download a Custom HTML Starter — A nicely done online tool to customize and generate a starting point for an HTML file. Might not necessarily be used for a full blown app but great for demos and smaller stuff.

allen hsu

Swiper: A Modern Mobile Touch Slider — Complete with hardware accelerated transitions and native-like behavior. There are integrations with React, Svelte, Vue.js and Angular, too.

Vladimir Kharlampidi

Publicis Sapient: Focus on Content First - Deliver Sites Fast — Learn how you can use GatherContent to build sites in a fraction of the time. Sign up for a free trial now.

GatherContent sponsor

Web3Forms: Contact Forms for Static Websites — A web form service that offers a pretty decent free forever plan that might be worth trying out.

Web3Forms Quick and Simple Image Placeholder Service — Enter a width, height, background color, text color, and some example text, and then generate the HTML to embed temporary images and dummy text.