Reading List #3

Last weekend, we had the stomach flu running through our whole family. And just when everyone was somewhat healthy again, our three-year-old daughter caught a pretty nasty eye infection this week to top it off. Thanks to modern medicine and some antibiotics it only lasted a few days and she’s already much better now. But basically, this week was quite a mess and mostly spent recovering and trying to stay ahead of things.

But there are still some positive news: We finally built a first version of the landing page for our “yet-to-be-released-new-project”, which I hopefully can tell more about very soon. Also, we made a little bit of progress on the new email functionality for picu and worked with our content writer on some new blogposts for the picu blog.

Here’s what I’ve read this week:

Frontend Development

๐Ÿ–‹ Google Fonts Knowledge

Google launched Fonts Knowledge, a library of typography guides, which they produce in collaboration with known typography experts. I only had time for a short look around, but it seems to be very extensive and definitely worth a visit if you want to learn something about typography on the web.

Google Fonts Knowledge

๐Ÿ’ก Using Position Sticky With CSS Grid

Position sticky can behave unexpected, if you use it inside a CSS Grid Container. Ahmad Shadeed shows why that is, and what can be done to make it work.

Ahmad Shadeed โ€“ Using Position Sticky With CSS Grid

๐Ÿคฉ Multiline background gradients

If we add a background gradient to multiline text, for example on a title, the gradient will reset on every line which is not very nice. This question by Dan Mall is already a few years old, but the solution Matthias Ott proposed still looks like a nice idea to tinker with.

Twitter โ€“ Matthias Ott

Codepen โ€“ Multiline background gradient with mix-blend-mode

๐Ÿค“ Media Query Range Contexts

Someday in the (near) future, we will be able to use <= and >= inside media queries, instead of min-width & max-width to describe a range. It’s a small improvement but should make media queries more readable.

Bram.us โ€“ Media Queries Level 4: Media Query Range Contexts

๐Ÿ” Project Wallace โ€“ CSS Analyzer

Project Wallace is a handy tool to analyze your CSS which gives you an overview of all the rules you’ve defined in your stylesheet. The tool itself with does not come free of charge, but you can try the CSS Analyzer for free, which is quite interesting.

Analyze your CSS

๐ŸŒˆ HSL Color Range Generator

Another little helper to generate HSL color palettes very easily.

https://codepen.io/jh3y/pen/JjEjJjN


Other / Random

๐ŸŽ™ Getting traction to your SaaS, Brian Casel @ Build Your SaaS Podcast

Brian Casel, founder of zipmessage.com (and others) was on the Build Your SaaS Podcast talking about how to get traction to a new SaaS. I have been following Brian for quite a while now and he’s really been doing loads of projects over the years. From the outside, it’s always easy to think that people like him have it all figured out, so it’s reassuring to hear firsthand that they can struggle with some of the same things like we do.

I’m not very much into audio-podcasts because my brain just doesn’t seem to be able to focus on audio alone. I asked Justin on twitter and he was nice enough to upload the video recording of the full podcast to YouTube (Thanks Justin)!

Build Your Saas โ€“ Brian Casel

๐Ÿก Townscaper

A last one for the weekend: This is just such a cool game to play, I had to include it. It’s absolutely pointless as far as I can tell, but nevertheless very relaxing to play around with.

Townscaper Demo


๐Ÿ‘ Thanks for reading! Stay safe, and have a happy weekend!

Made with โค๏ธ in Switzerland