Issue 535 - Chrome reaches 100 (18)

datetime.tools: Date & Time Conversion — Enter a date and time and this tool will generate the equivalent Unix timestamp, ISO 8601, and a local human-readable format.

Understanding Layout Algorithms — Another great article from Josh — this time going beyond focusing on individual properties, instead taking a higher-level look at CSS, how it's structured, and how to form a solid mental model for using it.

Chrome Version 100 Arrives (with Refreshed Logo in Tow) — 14 years after its debut, Google’s browser hits triple digits with Chrome 100. This post from Pete LePage dives into what’s new for developers, including that all important user agent string change. There's also a timeline of 100 cool wider web moments, looking at neat events from throughout Chrome's lifetime.

Dominate Your Lighthouse Score in Next.js Applications — Developers take care of onsite SEO now more than ever - see how to lay the perfect foundation and keep your Lighthouse score in Next.js applications at its peak. Click here to make sure all your boxes are checked.

Those HTML Attributes You Never Use — Describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects.

Mozilla’s Vision for the Evolution of the Web — Mozilla has outlined its vision of the future of the web, based on three values: openness, agency, and safety. In practice the hope is this is a web that's encrypted by default, has better accessibility and internationalization, and no tracking. You can read a summary here if you’d rather not read the full post.

How to Use CSS Math Functions — A solid look (with plenty of code examples) at how to use the CSS logical functions calc(), clamp(), min() and max(), which are now supported by all modern web browsers.

Optimizing Largest Contentful Paint — A good, detailed resource looking at some of more technical and non-obvious aspects of optimizing sites for Largest Contentful Paint (LCP) – a key metric around perceived load speed of a page.

Variable Fonts in Real Life: How to Use and Love Them — A practical look at variable fonts including their benefits, example use cases, file optimization tips, accessibility benefits, and more.

Resetting Inherited CSS with “Revert” — A real-world example of using the all:revert CSS ability. Seems to be a powerful feature, but, as explained here, one that needs to be used with a certain degree of care.

Tired of Asking Users to Enter Passwords in Your Applications? — Check out our blog post on how you can easily integrate magic links in your React chat apps with Supabase.

A Brief Look at CSS's :has — David takes a (very) quick look at some of the use cases for the :has pseudo-class, which allows styling a parent based on a relative selector.

The Web as the Ultimate Tool of Resilience for the World? — Marking two years since the start of the pandemic, W3C CEO Jeff Jaffe reflects on how the web became the 'ultimate tool of resilience' for the world.

Placy: A Simple Tool for Generating Image Placeholders with data: URIs — This is neat because you can customize the dimensions, background color, text, etc., then the HTML uses a data URI, so you don’t have to worry about the service going down.

Mdash: A UI Component Library Based on HTML and Web Components — Boasts a small footprint and includes 20+ components and 160 utility classes, all of which are built with web standards and compatible with any third-party framework or library.

ScrollMovie: A Library to Animate a Background Image as the User Scrolls — You can see it in action on the home page in all its rather bloated glory. Definitely falls under the category of ‘neat, but use rarely if ever’!