16th week of 2021

Published on

New webcam, setting goals for personal projects, CSS learnings, Conventional Comments, frequency illusion.

Table of contents

πŸ‘¨β€πŸ’Ό Work

New webcam

Some months ago I bought a new microphone.

This week I bought a new webcam: Logitech BRIO.

I have previously used my iPad mini as a webcam via the EpocCam app. It has worked well, but it's always a hassle to setup a stand for the iPad. The iPad is also blocking a big portion of my monitor.

My laptop has an integrated webcam, but it's too far to the side when using an external monitor, so I haven't used it. I doubt it wouldn't even have good quality.

I already used the BRIO in one Teams meeting, and it worked well.

I like that the BRIO just stays on top of my monitor. There's no setting it up and opening an app every time I want to use it, unlike when using iPad via EpocCam.

πŸ‘¨β€πŸš€ Personal

Setting goals for upcoming weeks

I didn't do anything much this week either. It's frustrating, because I'd like to do something, and I have lots of ideas what to work on.

(To be fair, I have written this weekly log every week for 16 weeks. That's better than nothing!)

This got me thinking: what could I do to make more progress?

And I got the idea that maybe I could try setting goals for upcoming weeks. This way I don't have to think in the middle of the week what to focus on.

For the next week (17th week), my goal is to implement RSS feeds for this weekly log and for my cookbook. Currently I have an RSS feed only for my blog, which I'm updating infrequently.

πŸ‘¨β€πŸŽ“ Learnings

CSS: vertical centering using margin: auto

margin: auto normally centers a block element only horizontally. To achieve vertical centering, it's common to reach for e.g. flexbox.

Turns out that margin: auto can in some cases center vertically as well. The element must also have:

  • position: absolute or position: fixed
  • top: 0 and bottom: 0
  • an explicit height (e.g. height: 200px).

This can be very useful for modals.

Note that for only vertical centering, only margin-top and margin-bottom need to be set to auto; margin-right and margin-left can be anything. This is similar to horizontal centering: only margin-right and margin-left need to be set to auto; margin-top and margin-bottom can be anything.

See an example on flems.io.

I learned this from Josh W Comeau's CSS for JavaScript developers course (Module 2).

CSS: position: fixed breaks when any of its ancestors uses transform

position: fixed works mostly the same way as position: absolute does. Whereas the latter is positioned relative to its closest positioned ancestor, the former is positioned relative to the viewport.

However, in the case of position: fixed, if any of the element's ancestors (i.e. parent or any of the grandparents) has a transform property set to something else than none, the element's positioning "breaks." The fixed element is then positioned relative to that ancestor, i.e. position: fixed behaves like position: absolute.

This can easily cause confusing bugs.

I learned this from Josh W Comeau's CSS for JavaScript developers course (Module 2).

MDN's documentation on position: fixed mentions that the perspective and filter properties also break position: fixed, but "there are browser inconsistencies with perspective and filter contributing to containing block formation."

πŸ•΅οΈβ€β™‚οΈ Cool stuff

Conventional Comments – consistent code review comments

Consistent and clear code review comments can save hours of undercommunication and misunderstandings.

You can come up with your own set of commenting guidelines in your team. Or you can use Conventional Comments, which is "a standard for formatting comments of any kind of review/feedback process." Think of Conventional Commits, but for code review comments (and other kinds of comments as well).

An added benefit of Conventional Comments is that they are machine-readable.

I have been wanting to come up with some kind of commenting guidelines at work. I don't know if we'll end up using Conventional Comments, but the standard can at least work as inspiration and a reference.

Frequency illusion

After learning about a new topic, it sometimes seems to quickly surge in popularity. Like "wow, this topic is nowadays being covered everywhere" or "awareness of this topic is clearly increasing."

That's possible. Or, it's also possible that you are just noticing the topic more.

Here's what Wikipedia tells us about frequency illusion:

Frequency illusion, also known as the Baader–Meinhof phenomenon, is a cognitive bias in which, after noticing something for the first time, there is a tendency to notice it more often, leading someone to believe that it has a high frequency (a form of selection bias). It occurs when increased awareness of something creates the illusion that it is appearing more often. Put plainly, the frequency illusion is when "a concept or thing you just found out about suddenly seems to crop up everywhere."

I had been looking for a term for this phenomenon. Now let's see if I start to notice lots of coverage of the frequency illusion. πŸ˜„

πŸ’β€β™‚οΈ More Weekly log entries

Next week: 17th week of 2021

Previous week: 15th week of 2021