🔒  How Everything We're Told About Website Identity Assurance is Wrong — Dives into how website trust is communicated online (certificates, SSL, and the like) — and how such things can often prove to be misleading.

Troy Hunt

Using Flexbox to Create a Dynamic Line Separator — How to make use of the default flexbox stretching behaviour to create a dynamic line separator. A solid tutorial told in Ahmad’s usual accessible style, with code examples and visuals to help move things along.

Ahmad Shadeed

Walkthrough of an Easy Angular Data Grid with Examples — You could write your own data grid, but why would you when this one already exists. See how easy it is to set up, bind data, group, sort, page, and more. Fiddle with the live samples or install it and try it for yourself, but don’t miss it.

Kendo UI for Angular sponsor

Testing Pipeline 101 For Frontend Testing — If you want to introduce a testing build routine here’s a quick look at how to get on the right track — specifically with the help of some testing frameworks and GitHub actions.

Ramona Schwerin

A Complete Guide to CSS Cascade Layers — We’ve featured a few good links and resources on this topic over the last few weeks, and this one seems to be the most thorough yet — covering its origins, how it works, use cases, and more. Quick refresher: The @layer feature allows us to define explicit contained layers of specificity (so we can avoid hacks).

Miriam Suzanne

Subsetting Font Awesome to Improve Performance — How to go about removing any unused glyphs from the font files so that it reduces the overall file size.

Adam Rackis

Survivorship Bias in Web Performance — Why your analytics shows your site as faster than it is, and why First Contentful Paint (FCP) is a particularly good metric to optimize for.

Simon Hearne

Are You Up to Date on Webhooks? 🤔 — Learn how to structure and version webhooks, how to build a webhooks backend, and why you should use them. Read more.

Hook Relay sponsor

The No-Nonsense Styling Method — A set of guidelines compiled to make styling “less surprising and more predictable”. Specifically, it aims to increase the scalability, maintainability, readability, and ease of change of your CSS.

Ben Lorantfy

Animating-In a Newly Added Element — Using @keyframes just might remove the need for JavaScript when animating newly added DOM elements.

Stephanie Eckles

What Makes Writing More Readable? — Does a really good job of highlighting the benefits of plain language (with a neat toggle to see the before/after). The advice here is obviously applicable in several areas of life, but well worth considering from a web copy angle too.

Rebecca Monteleone and Jamie Brew

Simple.css: A 'Classless' CSS Framework — Similar to SPCSS, which we shared previously. This one includes dark mode and some nice typographic features for quickly setting up landing pages or other simple projects: "By 'classless' I mean that there are no CSS classes anywhere in the CSS or the HTML." Semantic HTML FTW!

Simple.css

Stylo: An Open Source WYSIWYG Rich Text Editor for JavaScript — Based on a web component, no dependencies, and you can configure the default toolbar to suit your app’s needs. Being able to edit the project's homepage is a neat touch.

David Dal Busco

Project Management for Software Teams Has Never Been Easier

Shortcut (formerly Clubhouse.io) sponsor

Atropos: Touch-Friendly 3D Parallax Hover Effects — The easiest and fastest way to fool the eye into thinking the screen has somehow developed three-dimensional capabilities (and, admittedly, annoy some users - so be careful) is to use parallex effects as demonstrated on the project's homepage.

Vladimir Kharlampidi

Mailwind: Use Tailwind CSS to Design HTML Emails — Just add Tailwind’s utility classes as you normally would, then install and run Mailwind via npm to generate the accompanying CSS or inlined HTML.

Soheil Rashidi

A Pure CSS Working Stopwatch — This is a neat little CSS stopwatch demo that actually works — which is possible thanks to the Houdini @property (as such it only works in Chrome and Edge right now). Give it a try.

Jhey Tompkins codepen