Piccalilli Newsletter - Issue #10

Welcome

Howdy!

We have made it to issue #10! 🎉 A real milestone. Time certainly flies when you’re having fun.

Thank you so much for your support so far. I love this project and the kind words I receive about it mean so much.

The redesign is also progressing well, so have a read of the journal if you get some time. I’ve also hired a ridiculously talented designer to redesign the logo, which is super exciting. I’ll do some writing about that next week.

This issue features spaceships, aliens, web design experiments and a user-friendly dark mode.

Enjoy!

CSS Pattern

Create a user controlled dark or light mode

Ever since the prefers-color-scheme media query landed, folks have been rolling out dark themes for their websites as often as they use the entire React library to power a hamburger menu on their static blog.

In this tutorial, I should you how to both honour the user’s system colour scheme and give them a toggle to change how your website responds.

Fancy

Toggle — Marketing Site

⚠️ Motion warning ⚠️

My gosh, this is a good website. The thing I like the most is there is a lot of whitespace. It lets the beautiful illustrations shine and the copy reads really well.

The interaction is incredibly smart and tastefully done. A very refreshing marketing site for a product.

Orkestra — Agency site

⚠️ Motion warning ⚠️

This is a beautiful website. There’s so many little easter eggs and hover tricks. There’s also a bit of scroll-jacking, but I actually think it works in this context.

Check out the “culture” page, too. There’s some lovely layout work on there.

Illustration

CSSpaceship

This is really elegantly done, by Fehrenbach. Very tidy work indeed.

You could be forgiven for thinking that this is an SVG and not CSS.

Animation

Discover the stars | Pure CSS

⚠️ Motion warning ⚠️

This is cute as heck. I can’t believe that it’s all completely CSS-controlled, too!

Smashing work by Christina.

Ana Rodrigues

Ana is one of my favourite people on the web. She’s super talented and an overall very nice person. The list of things she does is very long, but a cool thing that she’s doing at the moment is co-organising London CSS.

I also interviewed her on Developurrs, which is definitely worth a read. Also, check out her blog. It’s great!

Video

How to animate box-shadows with transforms and opacity

Alex is very smart and this is a heck of a handy screencast. He makes a lot of really handy videos that you should check out.

Resources

Web Design Experiments by Jen Simmons

Jen is one of our most valuable people on the web. She gives us so much. This is one of my favourite resources of hers.

It was especially great to watch it change as CSS Grid support improved because as y’all know, Jen is a progressive enhancement advocate.

Sponsor

This issue’s sponsor: my Patreon

This issue is sponsored by my Patreon. If you want to sponsor this newsletter, go ahead and back the position: sticky tier.

I want to spend more time working on stuff that benefits the web community, but I also need to feed my family, so I've created a Patreon!

I’d really appreciate your support so I can help folks learn the web platform. The Patreon will hopefully reduce the amount of time I work on client projects and increase the amount of time I can spend working on projects like this one.

Any support will be appreciated and you can select as little as $1 per month!

Thank you

That’s all, folks

If you have any comments, feedback or submissions, please get in touch via Twitter or Email.

You can also submit a link over at https://submissions.piccalil.li ➡

Until the next issue, take it easy 🙂