14th week of 2021

Published on

Last updated on

Started using an RSS reader, block and inline directions in CSS, clip-path in CSS.

Table of contents

👨‍💼 Work

No highlights this week. Except that Easter Monday was a paid day off. ☺

👨‍🚀 Personal

Started using an RSS reader

I used to use Google Reader before Google killed it in 2013. Since then I have been meaning to start using another RSS reader. I don't know why it took so long!

I signed up for a free 30-day trial of BazQux Reader. After the free trial month, it will cost just $30 per year.

Other RSS readers that I considered are Miniflux and Newsblur. I eventually chose BazQux because I liked its UI the most. It has a very high information density, which is nice. And it's written in Haskell – cool!

So, I'm using BazQux to follow:

After I have everything set up properly and everything has worked smoothly for a while, I'll write a blog post about my RSS setup. (You should subscribe to my blog's RSS (or JSON) feed to be notified when I publish that post. 😉)

Oh, and now that I use an RSS reader myself, I should implement RSS feeds for my cookbook[1] and weekly log as well, like I have planned for a long time. 🙉

Update on May 8, 2021: I implemented the new feeds in the 18th week: New RSS feeds for my website!

👨‍🎓 Learnings

CSS: block and inline directions

This feels very basic – like most learnings afterwards – but here goes anyway.

Webpages are like paper documents. Individual words are inline and placed side by side, from left to right (or right to left in some languages). Some words are combined into blocks (e.g. headings and paragraphs) that stack on top of each other, from top to bottom (or bottom to top in some obscure languages).

So, that's the two directions of CSS: block and inline. And that's how display: block and display: inline work too:

  • Block elements (display: block) take the full available width by default so that they stack on top of each other. Think of e.g. headings and paragraphs.
  • Inline elements (display: inline) are placed side by side. Think of individual words and e.g. <span> elements.

So yeah, this is very basic, but explaining block and inline directions by comparing a webpage to a regular paper document was somehow eye-opening to me. I like this mental model that I learned from Josh W Comeau's CSS for JavaScript developers course (Module 1).

Understanding these two directions is also essential for understanding logical properties in CSS. For example, when working with right-to-left languages, you might want to use e.g. margin-inline-start and margin-inline-end instead of margin-left and margin-right. The latter properties would be in reverse or "wrong" order when compared to working with left-to-right languages.

🕵️‍♂️ Cool stuff

CSS: clip-path is cool

I don't think I have ever had to use clip-path in CSS. But after reading Ahmad Shadeed's article Understanding Clip Path in CSS, I can see how clip-path can be used for nice visual effects.

Two examples that I stumbled upon this week:

Side note: I noticed only afterwards that the two posts are by the same author, Mikael Ainalem. Cool!

Footnotes

  1. I no longer have a cookbook section on this website: Goodbye Cookbook, hello more blog posts.

💁‍♂️ More Weekly log entries

Next week: 15th week of 2021

Previous week: 13th week of 2021