Issue #571

December 21, 2023

Getting Started with Web Performance

Alistair Shepherd goes through some of the reasoning, jargon, metrics, tools, and top tips on improving your web performance.

Roman Komarov explains the basics of Anchor Positioning, an incoming dynamic addition to enhance the capabilities of CSS positioning.

What have I been up to

I’ve started publishing more on various social media channels—videos, carousels, threads, quizzes, coffee pictures, and everything in between.

If you want to connect, find CSS Weekly on:
• Twitter / X
• TikTok
• Instagram
• Threads
• Bluesky
• YouTube

Looking forward to seeing you there! :)

CSS Weekly on YouTube

▶ CSS Tips — Practical img Element Defaults

A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.

Watch video

▶ How to enable experimental CSS & JS features in Chrome, Firefox & Safari

A step-by-step guide on how to enable experimental CSS and JavaScript features and various Web APIs in Chrome, Firefox, and Safari.

Watch video

Articles & Tutorials

View Transitions

Chen Hui Jing demonstrates how animating DOM state changes no longer requires a mountain of code thanks to the new View Transitions API.

New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem

Šime Vidas explains why 100vw does not always represent the full width of the viewport and shows how to avoid it, along with approaches we may have to solve it in the future.

CSS animation-composition

Tyler Gaw shows how to use the CSS animation-composition property for advanced control over how values are applied during keyframe animations.

Three modern CSS properties your website must have

Mojtaba Seyedi outlines some newish CSS features that can help you improve your user interface.

(I’ve also made a guide on color-scheme and a quick tip on text-wrap properties.)

You don't need JavaScript for that

Kilian Valkhof outlines one of the core principles of web development: you should choose the least powerful language suitable for a given purpose.

Attention to detail, creativity, and expertise define CSS specialists and front-end architects.

Take part in the Developer Nation survey and be part of a community dedicated to shaping the upcoming tech landscape. Your insights can win you fantastic tech gear and rewards!

Start Here

Tools

React Glow

A React component that creates a mouse-tracing glow effect.

Check it out

Request-Animation-Frames

A library that enables you to use requestAnimationFrame as an async iterable in any JavaScript environment.

Check it out

Inspiration

CSS CodePen Room furniture challenge...

Alvaro Montoro created an interesting CSS CodePen challenge where you must put one piece of responsive, pure CSS furniture in a 3d room.

Get inspired

Until Next Week

Thank you so much for reading!

If you want to support this newsletter and my work, check out my other CSS-related projects:
• CSS Stickers
• Mastering Linting
• CSS Weekly YouTube Channel

Happy coding,
Zoran Jambor

PS. Use the coupon code CSSFRIENDS to get additional 40% discount on the Masterclass package of Mastering Linting Course.

Issue #570 Issue #572