Frontend Focus

#​494 — June 9, 2021 | Read on the web

Safari Overhaul Includes Tab Groups and Web Extensions On Mobile — Apple unveiled its next version of Safari at WWDC earlier this week, featuring a new design, improvements to tab management, and the expansion of web extensions to both iPhone and iPad. If you're feeling spicy and are running the beta you can find Apple's release notes for Safari 15 here.

Brittany A. Roston

Let Your Users Import Their Own Data, with Confidence — Integrate a production-ready data importer from Flatfile in minutes and let your users import their own data, securely, and with confidence. No Excel formatting, no custom import scripts, and no need to build vs. buy.

Flatfile Portal sponsor

How To Fix Cumulative Layout Shift (CLS) Issues — Google’s Core Web Vitals initiative has seen many sites get busy optimizing their Page Experience to maximize ranking factor. Here, Barry Pollard looks at the Cumulative Layout Shift metric that’s “causing trouble to a lot of sites”, and looks at ways of addressing any issues that come with it.

Smashing Magazine

Looking at WCAG 2.5.5 for Better Target Sizes — Ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough? Todd dives into all things target size here, with advice on how to get the sizing just right.

Todd Libby

Serverless Functions: The Secret to Ultra-Productive Front-End Teams? — The title screams evangelism but it’s really genuine excitement at the opportunities serverless platforms open up for front-end developers.

Jason Lengstorf

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

The Right Tag for The Job: Why You Should Use Semantic HTML — Here’s a decent guide to semantic HTML: what it is, why it’s so important, and how to use it.

Sophie Koonin

▶  How to Find and Remove Dead CSS — Do you have old CSS styles hanging around in your project that you’re afraid to remove because you’re not sure if anything else is depending on them? This 25-minute video explores one way to get more confidence about which styles are actually unused and safe to delete.

Justin Searls

VS Code Extensions for HTML — Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better.

Chris Coyier

Can Firefox’s New Look Save The Web Browser? — We shared news last week of Firefox 89 — it’s out now, complete with a fresh design. Here’s a quick interview with the team at Mozilla discussing the new look and its accessibility wins.

Daryl Baxter

New Mobile Chat Kit From Stream — Chat UI & SDKs for Figma, Sketch, Flutter, React Native, iOS, & Android. The UI includes flexible assets for creating customized, scalable, and beautiful in-app chat experiences.

Stream sponsor

The Web We Choose to Build — Establishing principles for what you do can help frame things, and give focus. Here’s some thoughts on defining such principles for user-centred front-end development.

Colin Oakley

Ancestors and Descendants — Some more worthwhile reflections from Eric on the evolution of CSS over the past 25 years, warts and all:

“I know it’s still fashionable to complain about how CSS is all janky and weird and unapproachable, but child, the wrinkles of today are a sunny park stroll compared to the jagged icebound cliff we faced at the dawn of CSS”

Eric Meyer

How to Create Neon Text With CSS
Silvia O'Dwyer

Three Tips About Flexbox That Will Make Your CSS Better
Stas Melnikov

Getting Started with webpack
Nwani Victory


Senior Frontend Engineer (Remote) — We're looking for a Senior Front-End Engineer to join the web team at Unsplash. Small team but big product. Strict TypeScript with plenty of functional programming.

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

🔧 Code, Tools and Resources

daisyUI: A Library of Tailwind CSS Components in Multiple Themes — Includes dozens of ready-made components that you can try out using about 20 different themes, all of which are testable live in the docs.

Redfern Dev A Client-Side, Privacy-Friendly Compression Tool for PNG and JPG — Seems to work really quickly. You can choose from a few different settings and you have the option to convert to WebP format.

Towfiq I

Assetroulette: Randomized Assets for Web Design — This is a new spin on placeholder images, allowing you to generate random images, memes, pics from Unsplash, or even a random stylesheet (though we can’t figure how the latter would be useful).

Karim Jedda

Remove Guesswork from Website Bugs with Screenshots and Technical Info

BugHerd sponsor

ts-audio: Work with AudioContext More Easily — Want a demo complete with code? Here you go. You can create audio playlists too.

Evandro Leopoldino Gonçalves

CSS Layout Generator — A CSS Grid and Flexbox generator for creating layout components.

Brad Woods A Real-Time Strategy Game Where You Control Your Units by Writing JavaScript Code
Vilem Ries

Angular Flex-Layout: A Layout API for Angular using Flexbox Media Queries