Piccalilli Newsletter - Issue #26

Welcome

Всем привет! 👋

It is October! That means it’s challenge season, so my rucksack of links is gonna be getting pretty darn full. I’m also finally able to share with you all that I’ll be opening day two of FrontEndConf in Moscow with my “Keeping it simple with CSS that scales talk”. Exciting stuff!

This week is a really great week on this newsletter because there's plenty of variety. Let’s dig in.

If you’re enjoying reading this newsletter as much as I’m enjoying creating it, please share it with your pals. It’ll be really appreciated if you do.

Enjoy!

I’m making two video-based courses

This week, I shared how CSS From Scratch will be a video-based course rather than a book because I genuinely think it'll be a much better final product that way.

In preparation for it, I need to brush off my ageing video production skills, so what I’m going to do is create a mini course where I’ll teach folks how to build a semantic, progressively enhanced landing page, which I’ve already started designing.

Keep your eyes open for updates for both projects. You can sign up for CSS From Scratch updates on Product Hunt.

Featured Article

A Modern CSS Reset

Another from me this week. I think about stuff like CSS resets far more than I should do, but here I am, making the smallest possible reset that gives you some really sensible defaults.

Fancy

Equal Parts - Marketing Site

⚠️Motion warning ⚠️

Good gosh, this website is stunning. Those of you that have subscribed to this newsletter for a while will know how much I love fine touches and attention to detail. This website has those in abundance.

Check out the fancy hover states (especially on the nav) and the custom cursors.

Brittany Chiang - Personal Site

⚠️Motion Warning ⚠️

This is just a lovely website. Great colours, great layout and impeccable delivery. Nice work, Brittany.

Fun

Web design in 4 minutes

This is great. Keep clicking through the anchors to reveal more and more CSS to design a page, right in front of your eyes.

A great demo of how CSS works, by Jeremy.

Prompts

A really smart PWA from Uncle Dave. As per his usual style, it's clean, light and incredibly fast.

A great, fun tool for prompting your doodles (especially for Inktober).

Video

Mozilla Developer - YouTube Channel

This channel is great. Mozilla have got some of our best people in CSS to create in-depth education material for us all, for free. Great stuff.

Algorithms

.a-pull: A CSS algorithm for pulling one box outside another

As always, Lara is the purveyor of fine CSS algorithms. A nice short and interesting read!

Resources

Typetura

It’s so good to see Typetura go properly live with paid plans. It’s a super smart way of dealing with flexible, responsive typesetting.

Nice work, Typetura team!

Sponsors

Relearn CSS Layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

We’ve got a special code for Piccalilli subscribers where you can get 20% off. Use the code PICCALILLI_PAL at the checkout to get everything for $80 instead of $100.

Thank you

That’s all, folks

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

If you have written a handy CSS utility, CSS trick or tutorial, you can submit a link over at https://submissions.piccalil.li ➡

You can also support this newsletter by sponsoring it.

Until the next issue, take it easy 🙂