Tags: age

3201

sparkline

Friday, July 3rd, 2020

Dark mode revisited

I added a dark mode to my website a while back. It was a fun thing to do during Indie Web Camp Amsterdam last year.

I tied the colour scheme to the operating system level. If you choose a dark mode in your OS, my website will adjust automatically thanks to the prefers-color-scheme: dark media query.

But I’ve seen notes from a few friends, not about my site specifically, but about how they like having an explicit toggle for dark mode (as well as the media query). Whenever I read those remarks, I’d think “I’m really not sure I’ve got time to deal with adding that kind of toggle to my site.”

But then I realised, “Jeremy, you absolute muffin! You’ve had a theme switcher on your website for almost two decades now!”

Doh! I had forgotten about that theme switcher. It dates back to the early days of CSS. I wanted my site to be a demonstration of how you could apply different styles to the same underlying markup (this was before the CSS Zen Garden came along). Those themes are very dated now, but if you like you can view my site with a Zeldman theme or a sci-fi theme.

To offer a dark-mode theme for my site, all I had to do was take the default stylesheet, pull out the custom properties from the prefers-color-scheme: dark media query, and done. It took less than five minutes.

So if you want to view my site in dark mode, it’s one of the options in the “Customise” dropdown on every page of the website.

Saturday, June 27th, 2020

W00t! My copy of Purple People has arrived! Really looking forward to reading @QwertyKate’s “jolly dystopia.”

W00t! My copy of Purple People has arrived! Really looking forward to reading @QwertyKate’s “jolly dystopia.”

Tuesday, June 23rd, 2020

CSS folded poster effect

This is a very nifty use of CSS gradients!

Sunday, June 14th, 2020

Sitting in the sunshine with something for all the senses.

Sitting in the sunshine with something for all the senses.

Monday, June 8th, 2020

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.

Friday, May 29th, 2020

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.

Tuesday, May 26th, 2020

Replying to

Ich kenne die Regeln nicht, also ich weiß nicht ob ich das richtig mache, aber hier sind sechs Bücher die ich (ziemlich) neulich gelesen hab’ (die nicht auf mein Kindle oder aus der Bibliothek sind). https://adactio.com/notes/reading

Ich kenne die Regeln nicht, also ich weiß nicht ob ich das richtig mache, aber hier sind sechs Bücher die ich (ziemlich) neulich gelesen hab’ (die nicht auf mein Kindle oder aus der Bibliothek sind).

https://adactio.com/notes/reading

Tuesday, May 19th, 2020

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.”

Tuesday, May 5th, 2020

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.

Monday, May 4th, 2020

Hanging out with my @Clearleft comrades on a Monday morning.

Hanging out with my @Clearleft comrades on a Monday morning.

Friday, May 1st, 2020

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.

Thursday, April 30th, 2020

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.

Friday, April 24th, 2020

Flowers in the meadow.

Flowers in the meadow.

Thursday, April 23rd, 2020

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 224 colors. That’s… a lot of colors, roughly 224 of which I wasn’t actually using.

Sunday, April 19th, 2020

Checked in at Sheepcote Valley. Lying in the grass on a hillside — with Jessica map

Checked in at Sheepcote Valley. Lying in the grass on a hillside — with Jessica

Sun, sheep, and sea.

Sun, sheep, and sea.

Friday, April 17th, 2020

Roast chicken and veg.

Roast chicken and veg.

Lockdown just got real. 5Kg of Iberian bellota pata negra shoulder has arrived from Spain. 🐖 🇪🇸

Lockdown just got real.

5Kg of Iberian bellota pata negra shoulder has arrived from Spain. 🐖 🇪🇸

Thursday, April 16th, 2020

Lunchtime noodles.

Lunchtime noodles.

Wednesday, April 15th, 2020

Green leaves and blue sky.

Green leaves and blue sky.