Together with  Debugbear

#​585 — March 22, 2023 | Read on the web

The 'End' of Front-End Development? — A recent narrative doing the rounds on our corner of Twitter suggests that capable large language models (like GPT-4) could soon put us all out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

Six CSS Snippets Every Frontend Developer Should Know — Toolbelt worthy, powerful, and broadly cross-compatible CSS techniques you can use today. Certainly worth a quick browse.

Adam Argyle (Google)

🚀 Monitor and Optimize Site Speed To Rank Higher in Google — Page speed is not only important to your users but also impacts Google rankings. DebugBear continuously monitors performance and provides in-depth reports and recommendations. Use site speed experiments to test optimizations quickly.

DebugBear sponsor

Selecting Previous Siblings with CSS :has() — Touches on how one of the more frustrating long-standing limitations of CSS was its inability to select elements based on their children or preceding siblings — but notes how "this is now a breeze" thanks to the well supported :has() pseudo-class.

Tobias Ahlin Bjerrome

Cool Frontend Arts of Local-First: Storage, Sync, Conflicts — A look at the concepts behind implementing local-first solutions such as storage, synchronization, and conflict resolution for web applications that can function both online and offline.

Pavel Grinchenko


📙 Tutorials, Articles & Opinion

Laying Out a Print Book with CSS — A neat look at how you might approach such a task — and Ian even had the end result printed, joking that this project gives us “all the formatting of a traditional print book, achieved in the most asinine way possible”.

Ian G McDowell

Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.

Raymond Camden

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Could We Make The Web More Immersive using a Simple Optical Illusion? — This is a cool little bit of experimentation if nothing else.


Why Aren’t Logical Properties Taking Over Everything? — Chris outlines some of the reasons why this may be the case.

Chris Coyier

Fix Color Contrast: Web Accessibility for Text & UI Design — A solid overview of what’s crucial and required about color contrast for text and UI components.

Oliver Schöndorfer

The 'Dark Defaults' of Microsoft Edge? — An overview of the allegedly “user-hostile defaults” found in Microsoft’s browser. The criticism comes from a good place however, as the author is “hoping that somebody at Microsoft will wake up to the unrealised potential of Edge and start treating it like Safari: a utility that end users can trust to have their back and preserve their privacy in as many circumstances as possible”.

Thomas Karpiniec

Enabling the Inspection of WebView Content in Apps — How to enable inspection of web content in your apps using the new inspectable API and Web Inspector in Safari.

Patrick Angle (WebKit)

Little Design Tips: Some Simple Ways to Make Content Look Good — Quite a handy list.
Andy Bell

Lessons From Linguistics: i18n Best Practices for Frontend Devs
Lucas Huang (Shopify)

🧑‍💻 JOBS

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness.

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

🔧 Code, Tools & Resources Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).

paul irish

Fontpair: Explore Curated Font Pairings Using Google Fonts — You can browse the fonts individually or go to the “pairings” page to view font pairs that work well together (heading + text) in your designs.


Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly sponsor

Make Bookmarklets — Here’s a neat bookmarklet generator which lets you create and test bookmarklets directly in the browser.

Cullan Luther

SvHighlight: Code Syntax Highlighter for Svelte, Powered by Highlight.js — Includes a blurring feature (to focus attention on specific lines of code) and you an customize it via Tailwind. Try out some interactive examples here to see the cool blurring effect.


Free Fonts for Interface Designers
Cosima Mielke