#​555 — August 17, 2022 | Read on the web

▶  Creative CSS Layout & The Flexible Web — 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 — 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

Learn from Devs at Leading Tech Companies Free — 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 — 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

📙 Tutorials, Articles & Opinion

CSS Grid and Custom Shapes — 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 — 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 — and now this latest post looks at what performance difference it has made for users.

Matt Hobbs

The Infinite 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 — 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? — 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 — Ponders how to go about creating a web component for star ratings (★★★★★) in a semantically appropriate way.

Lea Verou

outline Is Your Friend — 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 — 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?
Barry Pollard

Everything Developers Must Know About Figma
Christine Vallaure

JOBS

Software Engineers — 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 — 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

system.css: A Design System for Building Retro Apple Interfaces — 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

Shortcut (formerly Clubhouse.io) sponsor

tailwindcss/forms: Tailwind Plugin To Easily Override Form Styles

Tailwind Labs

image-element: A Repository to Collect Best Practices for Web Images — 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 — You can browse the components here, all of which are minimal with sensible defaults, and built with TypeScript and Sass.

Bedrock UI

REVERB: A Simple Color Palette and Gradient Generator — Lets you save generated palettes and gradients and make collections with no login required.

osman ahmed

QUICK RELEASES

GSAP 3.11 — Responsive, accessibility-friendly JS-based animations.
Playwright 1.25 – An update to this framework for web testing and automation.
Breakpoint 3.0 – Claims to make writing media queries in Sass super simple.
WinBox 0.2.4 – A modern HTML5 window manager for the web.
Simple Icons 7.7 – Handy collection of over 2,300 SVG icons for popular brands.
SVGEdit 7.2 – A web-based, JavaScript-driven SVG drawing editor.

Ipx.