--- title: "The creative web unlocked by new CSS tools" publication: "Frontend Focus" issue: 555 published_at: "2022-08-17" canonical_url: "https://frontendfoc.us/issues/555" --- Plus what's the performance impact of removing jQuery? | #​555 — August 17, 2022 | [Read on the web](https://frontendfoc.us/issues/555) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1660734674/l4oexczovazbt8s11nu7.png)](https://www.youtube.com/watch?v=tueTFd2TQUA) ▶[Creative CSS Layout & The Flexible Web](https://www.youtube.com/watch?v=tueTFd2TQUA) — An hour-long talk looking at the changing CSS 'toolbox' and the creativity a range of new and upcoming features unlocks (things like `aspect-ratio`, `clamp` functions, and custom properties). It’s a good overview of some modern CSS layout techniques, with some demonstrative use cases too. Michelle Barker [An Interactive Guide to Color and Contrast](https://colorandcontrast.com/#/) — This is an excellent, comprehensive guide for exploring and learning pretty anything and everything about the theory, science, and perception of color and contrast. A great resource with plenty of links out to related reading. Nate Baldwin [![\](https://copm.s3.amazonaws.com/522c8d04.jpg)](https://frontendmasters.com/sale/trial/?utm_source=frontendfocus&utm_medium=email&utm_content=courses) [Learn from Devs at Leading Tech Companies Free](https://frontendmasters.com/sale/trial/?utm_source=frontendfocus&utm_medium=email&utm_content=courses) — Get lifetime access to five popular Frontend Masters courses. No credit card required, and no catch. Frontend Masters sponsor [Designing a Better Back Button Experience](https://www.smashingmagazine.com/2022/08/designing-better-back-button-ux/) — When it comes to the humble ‘back’ button, users often get confused, frustrated or apprehensive (“_will I lose my data?_”). Here’s a look at how to design a better back button UX and where to put such buttons in our interfaces. Vitaly Friedman **⚡️ IN BRIEF** - Jecelyn Yeen runs through [what's new in Chrome 105's DevTools](https://developer.chrome.com/blog/new-in-devtools-105/), including the ability to set breakpoints and replay the user flows step by step in the Recorder. - Safari Technology Preview Release 151 is now available, and [here are the release notes](https://webkit.org/blog/13093/release-notes-for-safari-technology-preview-151/). - Microsoft is [open-sourcing its charming 'Fluent' emoji](https://medium.com/microsoft-design/designing-in-the-open-source-5c62be73a599) set. [Repo here](https://github.com/microsoft/fluentui-emoji). - Addy Osmani shares a quick tip to [use `fetchpriority=high` to load your hero image](https://addyosmani.com/blog/fetch-priority/) sooner. - Jeremy Keith [ponders the professional vs. 'expressionist' approaches](https://adactio.com/journal/19370) of various 'no code' tools. - Pratham Kumar has put together [this free Twitter-based CSS course](https://doc.clickup.com/37465296/d/13qb6g-64/css-mini-course) for beginners. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1660644028/vxpkrvfevhqj4ahynevb.jpg)](https://css-tricks.com/css-grid-and-custom-shapes-part-1/) [CSS Grid and Custom Shapes](https://css-tricks.com/css-grid-and-custom-shapes-part-1/) — How to use grid techniques along with CSS `clip-path` and some `mask` magic to create fancy, complex image layouts using “_just about any shape you can imagine_”. Temani Afif [The Impact of Removing jQuery on the Web Performance of Official UK Web Sites](https://insidegovuk.blog.gov.uk/2022/08/15/the-impact-of-removing-jquery-on-our-web-performance/) — The UK government’s digital team have been sharing details of their journey to culling jQuery from the massive GOV​.UK site. [Here’s the 'why' behind the decision](https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/) — and now this latest post looks at what performance difference it has made for users. Matt Hobbs [The Infinite Marquee](https://ryanmulligan.dev/blog/css-marquee) — Shares how to create a responsive looping marquee-style animation using HTML and CSS. There’s a few demos and examples to check out too. Ryan Mulligan [Resolve Front-End Errors with Datadog UX Monitoring](https://www.datadoghq.com/dg/real-user-monitoring/frontend-performance?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-s-errors) — Simplify front-end performance monitoring by analyzing UX data and resolve errors faster with full context - no query language required. Datadog sponsor [Do You Know About `overflow: clip`?](https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/?ref=sidebar) — You probably know `overflow: hidden`, `overflow: scroll` and `overflow: auto`, but do you know `overflow: clip`? It’s a relatively new value for the overflow property. Kilian Valkhof [On Ratings and Meters](https://lea.verou.me/2022/08/on-ratings-and-meters/) — Ponders how to go about creating a web component for star ratings (★★★★★) in a semantically appropriate way. Lea Verou [`outline` Is Your Friend](https://www.matuzo.at/blog/2022/focus-outline/) — Some quick advice on customizing focus styles, noting that we shouldn’t rely on properties like `background-color` or `box-shadow` alone. Manuel Matuzović [HTML is All You Need to Make a Website](https://whitep4nth3r.com/blog/html-is-all-you-need-to-make-a-website/) — In our circles, HTML-only websites are often deemed “_controversial and divisive_”. But why? Salma Alam-Naylor [Why is CrUX Data Different from my RUM Data?](https://web.dev/crux-and-rum-differences/) Barry Pollard [Everything Developers Must Know About Figma](https://www.smashingmagazine.com/2022/08/everything-developers-must-know-about-figma/) Christine Vallaure JOBS [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [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=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1660732457/h1g2gohdvuxccznlullx.png)](https://github.com/sakofchit/system.css) [system.css: A Design System for Building Retro Apple Interfaces](https://github.com/sakofchit/system.css) — A fun little CSS library based on Apple’s classic 80s monochrome OS look. Sakun Acharige [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 [tailwindcss/forms: Tailwind Plugin To Easily Override Form Styles](https://github.com/tailwindlabs/tailwindcss-forms) Tailwind Labs [image-element: A Repository to Collect Best Practices for Web Images](https://github.com/nucliweb/image-element) — Covers everything HTML-related including image formats, media queries, the `sizes` and `srcset` attributes, attributes for better perf, and more. Joan León [Bedrock UI: A Foundational UI Library for Building a Design System](https://bedrock-ui.github.io/bedrock-ui) — You can [browse the components here](https://bedrock-ui.github.io/bedrock-ui/components/alert), all of which are minimal with sensible defaults, and built with TypeScript and Sass. Bedrock UI [REVERB: A Simple Color Palette and Gradient Generator](https://reverb.wtf/) — Lets you save generated palettes and gradients and make collections with no login required. osman ahmed ✨ **QUICK RELEASES** [GSAP 3.11](https://greensock.com/3-11) — Responsive, accessibility-friendly JS-based animations. [Playwright 1.25](https://github.com/microsoft/playwright) – An update to this framework for web testing and automation. [Breakpoint 3.0](https://github.com/at-import/breakpoint) – Claims to make writing media queries in Sass super simple. [WinBox 0.2.4](https://github.com/nextapps-de/winbox) – A modern HTML5 window manager for the web. [Simple Icons 7.7](https://github.com/simple-icons/simple-icons) – Handy collection of over 2,300 SVG icons for popular brands. [SVGEdit 7.2](https://github.com/SVG-Edit/svgedit) – A web-based, JavaScript-driven SVG drawing editor. 📬 **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://twitter.com/chrisbrandrick) & [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/555/*|UID|*?ipx=t)