Friday Issue Nr. 97 | 26/1/2024

Happy 40th birthday, Mr Macintosh! This week has loads of CSS posts, including a great one about Scroll-Driven Animation, CSS specificity, border-image prop and fancy codePen example for inspiration. JavaScript has an AHA stack, React in 2024 and an exciting post about Tuple types.

JavaScript News

How to start a React Project 2024

Overview of how to start a ReactJS project with Vite, Next, Astro and what pros and cons with each approach.

The AHA stack

The AHA stack uses Astro, HTMX, and Alpine.js and is a full-stack web app. There are loads of examples and great explanations.

HTMX and Web Components

Lately, HTMX and Web Components have started to appear in the news more often, now in one post.

Console delight

Front-enders use console.log on a daily basis. I know, console.error, and some colouring is also available. Apparently, you can also add SVG, images, CSS and HTML.

Tuple types in Hooks

CSS News

Intro to Scroll-Driven Animations with CSS scroll() and view()

In less than 10 minutes, you will learn how to make scroll animations. This one is a pleasure to read post!

12 one-line CSS upgrades

A really good one to bookmark. There are a few highlights, but more in the post:

margin-inline, text-underline-offset, outline-offset, color-scheme, accent-color and fit-content is really a gem.

When to use A vs Button?

The DIV is not the Link, or is it? This is definitely an article which summarises some of my concerns and daily observations. And yes, when it comes to dashboards, things get really fuzzy.

CSS specificity calculator

Clear explanation of specificity and how to calculate it, then you can use the calculator above to test your knowledge.

CSS border-image property

This is a very long read. I didn’t realise that this property has so many possibilities, but also it is really confusing.

Fading content using transparent gradients in CSS

Different technique observation to fade text and let it be selectable.

CodePen Room Furniture challenge

Get inspired! The details of the lights for this work were terrific, but that fly made it come alive!

Mixed News

Apple Macintosh turns 40

Today, it feels strange that people paid ~$2K for Notepad, Calc and Paint, but those were the first steps. 🙂

Porsche design system

I randomly found this one; interestingly, they use native web components.