Frontend Focus

#​530 — February 23, 2022 | Read on the web

🔒  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

▶  Builder a Greener Web — A 20-minute talk on the environmental impact of our sites and what considerations you may want to take into account when it comes to the carbon footprint of your digital projects.

Michelle Barker

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

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

How to Make 'Slanted' Containers with CSS in 3 Steps
Dave Seidman

Creating a Read Progress Bar in React and TailwindCSS
Anshuman Bhardwaj


Senior Frontend Engineer (React) — Remote / NYC — We're the leading spend management platform for businesses. Small cross-functional front-end operations using React and TypeScript.

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

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.

🔧 Code, Tools & Resources

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!


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 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