Issue 542 - What you need to know about new CSS in 2022 (16)

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.

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.

Shrink.media: 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.

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

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.

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.

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.

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

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.

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.

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.

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.