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.
Overview of how to start a ReactJS project with Vite, Next, Astro and what pros and cons with each approach.
https://www.robinwieruch.de/react-starter/
The AHA stack uses Astro, HTMX, and Alpine.js and is a full-stack web app. There are loads of examples and great explanations.
Lately, HTMX and Web Components have started to appear in the news more often, now in one post.
https://binaryigor.com/htmx-and-web-components-a-perfect-match.html
Front-enders use console.log on a daily basis. I know console.info, console.error, and some colouring is also available. Apparently, you can also add SVG, images, CSS and HTML.
https://frontendmasters.com/blog/console-delight/
https://kyleshevlin.com/wrangling-tuple-types/
In less than 10 minutes, you will learn how to make scroll animations. This one is a pleasure to read post!
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.
https://moderncss.dev/12-modern-css-one-line-upgrades/
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.
https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics/
https://specificity.keegan.st/
Clear explanation of specificity and how to calculate it, then you can use the calculator above to test your knowledge.
https://web.dev/learn/css/specificity
This is a very long read. I didn’t realise that this property has so many possibilities, but also it is really confusing.
https://www.smashingmagazine.com/2024/01/css-border-image-property/
Different technique observation to fade text and let it be selectable.
https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css/
Get inspired! The details of the lights for this work were terrific, but that fly made it come alive!
https://codepen.io/ivorjetski/pen/oNVwbzL
Today, it feels strange that people paid ~$2K for Notepad, Calc and Paint, but those were the first steps. 🙂
https://www.theverge.com/24048479/apple-mac-40-anniversary
I randomly found this one; interestingly, they use native web components.