Tags: image

2666

sparkline

Sunday, July 12th, 2020

Checked in at Fox On the Downs. Sunday roast and a pint in the sun — with Jessica map

Checked in at Fox On the Downs. Sunday roast and a pint in the sun — with Jessica

Saturday, July 11th, 2020

Using grilled chicken to recreate the opening credits of Dark.

Using grilled chicken to recreate the opening credits of Dark.

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.

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

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.

Eating toast (with avocado and dukkah) in the back garden.

Eating toast (with avocado and dukkah) in the back garden.