CSS Co-Designer: '!important Was Added for One Reason Only: Laws in the US' — This tweet got plenty of attention this week — Steven Pemberton shared how !important was added to the spec due to US laws “that require certain text to be in a given font size”. He adds that anything else is probably "misuse." Ernie Smith digs into this a little more here.

Steven Pemberton

Write HTML the HTML Way (and Not the XHTML Way) — Sure, you may not use XHTML (anymore), but when writing HTML you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way. Guilty as charged here: we still like our <br />s.. 😁

Jens Oliver Meiert

Testing Your Web Apps with Cypress — Join Steve Kinney on this detailed course covering Cypress: A fast, easy way to write end-to-end tests for your client-side apps. Learn about the selector engine, test runners, assertion library, and more.

Frontend Masters sponsor

Prepare for the Future with Google Analytics 4 — Google Analytics user? Universal Analytics is sunsetting next year and will stop processing new hits on July 1, 2023. Here’s how to prepare now by moving over to Google’s next gen solution, Google Analytics 4. This move is undoubtedly driven by the broad change in data protection laws (e.g. the GDPR) and user expectations of privacy in recent years.

Russell Ketchum (Google)

Windows High Contrast Mode, Forced Colors Mode and CSS Custom Properties — CSS Custom Properties can be used for far more than just a bit of fun color theming. Eric explains here how this modern CSS is a powerful piece of assistive tech that can help create flexible, maintainable and adaptive digital experiences.

Eric Bailey

Building a Loading Bar Component — Shares a foundational overview of how to go about building a color adaptive and accessible loading bar using the <progress> element.

Adam Argyle

HTML and CSS in Emails: What Works in 2022? — Dives into what HTML and CSS features work for email templates, and how we can make them work for all email clients.

Daniel Schwarz

Streamline and Evolve Your Workflows With Shortcut — We bring the flow to your software team's workflow. Plan, collaborate, build, and measure success with Shortcut.

Shortcut (formerly Clubhouse.io) sponsor

Optimizing SVG Patterns to Their Smallest Size — Some radical ways to go about optimizing SVG patterns so that they contain as little code as possible without affecting the overall image quality.

Bence Szabó

Claymorphism: Will It 'Stick' Around? — This design trend has been picking up steam (you may have noticed the rising popularity of colorful inflated 3D graphics in web illustrations), so here’s a look at the idea in more detail, and how you can recreate the effect with CSS.

Adrian Bece

Implementing a Delay for a Cookie Consent Banner with JS — Here’s how to go about creating an ‘ideal’ cookie consent banner — chiefly one that doesn’t cause cumulative layout shift (CLS) issues.

Dariusz Więckiewicz

6 Challenges Wix Faced While Building a Super CI Pipeline

Buildkite sponsor

Master UI Styles: A 'Virtual CSS' Engine — This small CSS framework (less than 13KB) just hit 1.0. It claims to do away with the need to “memorize arcane class names”, allowing you to stylize HTML with unlimited CSS style variants.

Master

sysend.js: Send Messages Between Open Pages or Tabs in Same Browser — A small library that abstracts a mechanism for sending messages between pages open in the same browser. Supports cross-domain communication and is based on localStorage and the BroadcastChannel API. Here’s a demo (if you open it twice.)

Jakub T. Jankiewicz

Chrome Extension CLI: The CLI for Building Your Next (or First?) Chrome Extension — Want to get building an extension for Chrome as quickly as possible? This tool aims to get you on the right path ASAP.

Dutiyesh Salunkhe

prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS — An official Pretier plugin from Tailwind to automatically sort classes based on Tailwind’s recommended class order.

Tailwind Labs