Tags: age

CSS folded poster effect

This is a very nifty use of CSS gradients!

Easily rename your Git default branch from master to main - Scott Hanselman

Nice and straightforward. Locally:

git branch -m master main git push -u origin main

Then on the server:

git branch -m master main git branch -u origin/main

On github.com, go into the repo’s settings and update the default branch.

Thanks for this, Scott!

P.S. Don’t read the comments.

A Guide to the Responsive Images Syntax in HTML | CSS-Tricks

Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.

Five Key Milestones in the Life of a Design System - daverupert.com

Five moments in the lifecycle of a design system. They grow up so fast!

1. Formation of the Design System Team
2. First Page Shipped
3. Consumable Outside the Main Product
4. First Non-System Team Consumer
5. First Breaking Change

Dave makes the observation that design systems are less like open source software and more like enterprise software—software you didn’t choose to use:

Often, in my experience, for an internal Design System to have widespread adoption it requires a literal executive mandate from the top floor of the building.

Also: apparently design systems have achieved personhood now and we’re capitalising them as proper names. First name Design, last name System.

“Please, call me Design. Mr. System was my father.”

Is it time for a Web Performance rebrand? – Simon Hearne

I think Simon is onto something here. While the word “performance” means something amongst devs, it’s too vague to be useful when communicating with other disciplines. I like the idea of using the more descriptive “page speed” or “site speed” in those situations.

Web Performance and Web Performance Optimization are still valid and descriptive terms for our industry, but we might benefit from a change to our language when working with others. The language we use could be critical to the success of making the web a faster and more accessible place.

The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

• using grid layout in CSS,
• using type="module" to enhance a form with JavaScript,
• using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

Dams Public Website

I had the great pleasure of visiting the Museum Plantin-Moretus in Antwerp last October. Their vast collection of woodblocks are available to dowload in high resolution (and they’re in the public domain).

14,000 examples of true craftmanship, drawings masterly cut in wood. We are supplying this impressive collection of woodcuts in high resolution. Feel free to browse as long as you like, get inspired and use your creativity.

Better Image Optimization by Restricting the Color Index – Eric’s Archived Thoughts

A great little mini case-study from Eric—if you’re exporting transparent PNGs from a graphic design tool, double-check the colour-depth settings!

I’d been saving the PNGs with no bit depth restrictions, meaning the color table was holding space for 2²⁴ colors. That’s… a lot of colors, roughly 2²⁴ of which I wasn’t actually using.