Frontend Focus

#​528 — February 9, 2022 | Read on the web

A-Frame 1.3: A Framework for Building WebVR Experiences — A web framework for building virtual reality experiences that work on Vive, Rift, Quest, as well as desktop and mobile platforms, including in the browser (as the demos here show).

A-Frame VR Team

iOS 15.4 Beta Suggests Apple to Support Push Notifications from Web-Based Apps — Looks like Apple is working on bringing web-based notifications to iOS — which would be a real big win for a range of web-based apps.

Sami Fathi

Weekly Conversations on the Art & Practice of Software — For more than 12 years, The Stack Overflow Podcast has been the destination for developers. Hosts Ben Popper, Cassidy Williams & Ceora Ford chat with incredible guests to explore what it means to work in software, and how code is reshaping our world.

The Stack Overflow Podcast sponsor

How to Favicon in 2022: Six Files That Fit Most Needs — “It’s time to rethink [..] favicons for modern browsers and stop the icon generator madness”. The high-level advice is this: Prefer SVG over PNG, trust browsers to downscale, drop obscure formats. A good guide to favicons for the modern web.

Andrey Sitnik

“Evergreen” Does Not Mean Immediately Available — In an age of auto-updating everything, everywhere, there “isn’t a single, specific device, browser, and person we cater to when creating a web experience”. It’s worth keeping this in mind when thinking about your broader approach to the web platform.

Eric Bailey

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Reducing the Web’s Carbon Footprint: Optimizing Social Media Embeds — A look at what we can do to reduce the environmental impact of social media embeds and social sharing widgets — plus some strategies to avoid them altogether. These double-up as great performance tips too.

Michelle Barker

Replace JavaScript Dialogs with HTML's <dialog> — How to replace JavaScript dialogs with the HTML dialog element with the same functionality as the alert(), confirm(), and prompt() methods.

Mads Stoumann

What Web Frameworks Solve: The Vanilla Alternative — Suggests a few patterns of how to use the web platform directly as an alternative to some of the solutions that are offered by frameworks.

Noam Rosenthal

Aspect Ratio is Greataspect-ratio is a great example of a humble property that fills a long-awaited need in the CSS, as demonstrated here.

Michelle Barker

Project Management for Software Teams Has Never Been Easier — Shortcut is fast and intuitive project management built for developers. Delight the scrum gods and try it now.

Shortcut (formerly sponsor

Creating Generative SVG Grids — Goes through how to create some rather colorful, generative grid designs with JavaScript and SVG, and then animate them too. The end result is pretty neat.

Alex Trost

CSS Animations: A Complete Guide for Beginners — For those just getting started with CSS, this covers all the parts of the CSS animations spec with an interactive demo for each of the features.

Louis Lazaris beginner

A Deep Introduction to WordPress Block Themes — This is a high-level look at block themes and full-site editing.

Ganesh Dahal

Preventing Smooth Scrolling with JavaScript
Kilian Valkhof

The CSS from-font Value Explained in Four Demos
Sylvester Bistrović

'Yes, I Can Connect to a Database in CSS'


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.

Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

Hotkey 2.0: Trigger an Action on an Element When a 'Hotkey' is Pressed — Use Hotkey, set the data-hotkey attribute on your elements, and you get keyboard shortcuts. v2.0 just dropped. If it's good enough to be used on GitHub, it's good enough for us!


lite-youtube: A Web Component That Renders YouTube Embeds Faster — It’s the Shadow DOM web component version of Paul Irish’s lite-youtube-embed, with keyboard accessibility and some other nice features.

Justin Ribeiro

Moving Pinterest’s iOS Builds to Autoscaled EC2 Mac

Buildkite sponsor

DevTools for Tailwind: Bring Back Designing and Debugging in Your Browser — Not a free tool, but possibly one you’ll want to consider if you want to be able to experiment with all Tailwind classes on a page – not just the ones compiled during a build process.

beyond code Hide Your Web Link Behind a Mini-Coding Challenge — Definitely a unique take on Captchas. Before visiting the link, the user has to solve a 1-3 line code-related task. For now, it’s JavaScript only.

Asad Memon

Compress Images: A Fast Tool to Compress WEBP, JPEG, PNG, AVIF, and JXL Images Online


ssspill: An SVG Generator for a Stylistic 'Spill'/Melted Effect

Sébastien Noël