--- title: "Six CSS snippets you should know" publication: "Frontend Focus" issue: 585 published_at: "2023-03-22" canonical_url: "https://frontendfoc.us/issues/585" --- Plus is GPT-4 a threat to frontend jobs? | Together with [![Debugbear\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_470,h_94/e_make_transparent/co_white,e_outline:7/oe0ikgryzdz8qeq3d3qh.png)](https://www.debugbear.com/?utm_source=newsletter&utm_medium=sponsored&utm_campaign=frontend-weekly-3) #​585 — March 22, 2023 | [Read on the web](https://frontendfoc.us/issues/585) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1679487615/yfjol6cwzknvsba15iqh.jpg)](https://www.joshwcomeau.com/blog/the-end-of-frontend-development/) [The 'End' of Front-End Development?](https://www.joshwcomeau.com/blog/the-end-of-frontend-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](https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/) — Toolbelt worthy, powerful, and broadly cross-compatible CSS techniques you can use today. Certainly worth a quick browse. Adam Argyle (Google) [![\](https://copm.s3.amazonaws.com/f03dd74b.png)](https://www.debugbear.com/?utm_source=newsletter&utm_medium=sponsored&utm_campaign=frontend-weekly-3) [🚀 Monitor and Optimize Site Speed To Rank Higher in Google](https://www.debugbear.com/?utm_source=newsletter&utm_medium=sponsored&utm_campaign=frontend-weekly-3) — 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()`](https://tobiasahlin.com/blog/previous-sibling-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](https://caniuse.com/css-has). Tobias Ahlin Bjerrome [Cool Frontend Arts of Local-First: Storage, Sync, Conflicts](https://evilmartians.com/chronicles/cool-front-end-arts-of-local-first-storage-sync-and-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 **⚡️ IN BRIEF** - Dave Rupert ponders [the role of 'limitations' in building for the Web](https://daverupert.com/2023/03/limitations-and-websites/). - A looks at the [prevalence and extent of web fingerprinting.](https://www.bitestring.com/posts/2023-03-19-web-fingerprinting-is-worse-than-I-thought.html) - Chase McCoy thinks about [how blogs shaped the Web](https://chasem.co/2023/03/weblogs-as-a-form/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/gjclorkfax5jqgktsdga.jpg)](https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/) [Laying Out a Print Book with CSS](https://iangmcdowell.com/blog/posts/laying-out-a-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](https://www.raymondcamden.com/2023/03/14/progressively-enhancing-a-table-with-a-web-component) — Building a web component wrapper to add table sorting. Raymond Camden [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication?utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — 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?](https://shopify.github.io/spatial-commerce-projects/WonkaVision/) — This is a cool little bit of experimentation if nothing else. Shopify [Why Aren’t Logical Properties Taking Over Everything?](https://chriscoyier.net/2023/03/13/why-arent-logical-properties-taking-over-everything/) — Chris outlines some of the reasons why this may be the case. Chris Coyier [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1679495178/wnuybniutd7vuvqxomvr.png)](https://pimpmytype.com/color-contrast/) [Fix Color Contrast: Web Accessibility for Text & UI Design](https://pimpmytype.com/color-contrast/) — 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?](https://thomask.sdf.org/blog/2023/03/18/the-dark-defaults-of-microsoft-edge.html) — 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](https://webkit.org/blog/13936/enabling-the-inspection-of-web-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](https://set.studio/some-simple-ways-to-make-content-look-good/) — Quite a handy list. Andy Bell [Lessons From Linguistics: i18n Best Practices for Frontend Devs](https://shopify.engineering/internationalization-i18n-best-practices-front-end-developers) Lucas Huang (Shopify) 🧑‍💻 JOBS [Software Engineer](https://jobs.ashbyhq.com/stickermule/1539721e-7c7d-4f45-a5b0-17e5c02d7bd0?utm_source=Cooperpress) — 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. Stimulus [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=easy-job-hunting) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/xbmennyjdc7po4qcfqcx.jpg)](https://trace.cafe/) [trace.cafe: Easy Webperf Trace Sharing](https://trace.cafe/) — 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](https://trace.cafe/t/demo)). paul irish [Fontpair: Explore Curated Font Pairings Using Google Fonts](https://www.fontpair.co/) — 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. fontpair [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) Shortcut (formerly Clubhouse.io) sponsor [Make Bookmarklets](https://make-bookmarklets.com/) — 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](https://github.com/bennymi/svhighlight) — 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](https://svhighlight.vercel.app/) to see the cool blurring effect. SvHighlight [Free Fonts for Interface Designers](https://www.smashingmagazine.com/2023/03/free-fonts-interface-designers/) Cosima Mielke 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/585/*|UID|*?ipx=t)