Frontend Focus

🇺🇦 #​542 — May 18, 2022 | Read on the web

The State of CSS in 2022 — An introduction and overview of the CSS features and browser changes on slate for the rest of the year. There’s a lot to look through here, including :has(), Viewport unit variants, subgrid, color-mix(), and much more. It’s a solid high level look at what you need to know about writing CSS in 2022 and beyond, with examples/resources to boot. There’s also an accompanying video version here.

Adam Argyle

Web Applications 101 — A single article that touches on almost everything involved in building a modern Web site from the simplest of HTML pages through to server-side rendering (SSR) and static-site generation (SSG). Not a tutorial but gives you the broader, architectural picture.

Robin Wieruch

How to Create Dynamic Forms Using FormArray in Angular — Have you ever booked movie tickets online? If yes, then you have used a dynamic form. In this article, you’ll learn to create a dynamic form in Angular and also hear a high-level explanation of other useful classes of Angular reactive forms.

Kendo UI for Angular sponsor

New WebKit Features in Safari 15.5 — Safari 15.5 is here, with support for the inert attribute, the worker-src Content Security Policy directive, APIs for implementing new viewport units in WKWebView, and many fixes.

Jen Simmons (WebKit)

⚡️ Quick bits:

đź“™ Tutorials, Articles & Opinion

:where() :is() :has()? New CSS Selectors That Make Your Life Easier — An approachable look at these three new CSS selectors, how to use them, and the current levels of browser support for each.

Kilian Valkhof (Polypane)

Rethinking Server-Timing as a Critical Monitoring Tool — Server-Timing is uniquely powerful as the only HTTP response header that supports setting free-form values for a specific resource and making them accessible via a browser API separate from the Request/Response references themselves.

Sean Roberts

Level-Up Your Cypress Testing Knowledge for Free — Learn from top industry experts with over 25 lessons on how to get started with Cypress. sponsor

Syntax Highlighting (and More) with Prism on a Static Site — This post will show you how to implement syntax highlighting on a Next.js blog with the popular Prism.js library.

Adam Rackis

Theoretical Foundations for Server-Side Rendering and Static-Rendering — A research paper and proposal regarding rendering. It ultimately concludes that the distinction between pre-rendering (static) and SSR is somewhat blurry and proposes an API implementation wherein the framework chooses whether to serve up an existing pre-render or a server-rendered page without the developer needing to specify in advance.

Eric Burel

How Modern Frameworks Perform on the New 'Interaction to Next Paint' (INP) Metric
Leena Sohoni, Addy Osmani, Keen Yee Liau

Quick Tip: You Might Not Need calc()
Michelle Barker


Product Designer at Fleet (100% Remote) — We're building a better way to manage employee laptops and servers. We're looking for someone with design and frontend experience to join the team and help iterate our web and desktop apps.

Software Engineer — 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.

🔧 Code, Tools & Resources

Reagraph: WebGL Graph Visualizations for React — A high-performance network graph visualization library that uses WebGL under the hood for both 2D and 3D rendering options. Here’s a basic sandbox example you can play with.


Tweetic: Convert Tweets to Static HTML — Useful to preserve the look of a tweet longterm or possibly in HTML email. Also gives you the option to use plain CSS or Tailwind for the styling.


DFlex: A Drag-and-Drop Library for All JS Frameworks — This is a vanilla JavaScript solution with a focus on good performance and easy implementation. Try some demos here.


Find & Fix Your Accessibility Bugs. Free axe DevTools Chrome Extension

Deque sponsor

Parvus: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on Web pages but if you have to, use this! There’s a CodePen example.

Benjamin de Oostfrees An Online Tool to Reduce the Size of Images — There are certainly lots of similar tools, but this one has a nice UI where you can visually compare the images and use sliders to reduce the quality and physical size.

Horizon UI: A Beautiful Open Source Admin Template for Chakra UI and React — Includes 70+ dark/light components covering a whole slew of UI possibilities. View a live preview here.

Horizon UI