15th week of 2021

Published on

Stepped CSS animations, fn.length in JavaScript, cool voxel website, heights vs widths in CSS.

Table of contents

👨‍💼 Work

No highlights this week.

👨‍🚀 Personal

No highlights on this area either.

👨‍🎓 Learnings

CSS: stepped animations (steps())

CSS animations can be stepped, meaning that instead of being smooth from start to end, they jump through a specific amount of steps. Like so:

animation-timing-function: steps(5);

One practical use of this is to create a blinking cursor animation. See Marko Denic's article CSS Tips for an example (it's the very first tip on that page). That's where I learned about the existence of steps().

See also animation-timing-function on MDN for details of the steps() value.

JavaScript: functions have a length property

The length property of a function returns the number of required arguments:

(() => {}).length                    //=> 0
((a) => {}).length                   //=> 1
((a, b) => {}).length                //=> 2
((a, b, c) => {}).length             //=> 3
((a, b, c = 'default') => {}).length //=> 2
((a, ...args) => {}).length          //=> 1
((...args) => {}).length             //=> 0

I learned this from a tweet by Mikael Ainalem. See also Function.length on MDN.

One practical use of Function.length is to use it to create a currying function:

const curry = (fn, ...args) =>
  fn.length > args.length
    ? curry.bind(null, fn, ...args)
    : fn(...args)

const mul = (a, b, c) => a * b * c

curry(mul, 1, 2, 3) //=> 6
curry(mul, 1, 2)(3) //=> 6
curry(mul, 1)(2, 3) //=> 6
curry(mul, 1)(2)(3) //=> 6
curry(mul)(1, 2, 3) //=> 6
curry(mul)(1, 2)(3) //=> 6
curry(mul)(1)(2, 3) //=> 6
curry(mul)(1)(2)(3) //=> 6

Source of the curry function: Babak's reply to Mikael's tweet.

🕵️‍♂️ Cool stuff

Cool website: Yamauchi No.10 Family Office

Cool domain too: y-n10.com.

On desktop, click "Start"; on mobile, click the "№10" logo to "start" the site.

The website has lovely animated voxel art and a fancy diagonal scrolling. 🤔

I found the site via a post on /r/web_design. See also comments on Hacker News.

CSS: different logics behind heights and widths

height and width work somewhat differently in CSS. Here's one way to think about them:

height tends to look "down" the tree, to determine its size based on the natural size of its contents, while width tends to look "up" the tree, basing its size on the space made available by the parent.

The quote is from Josh W Comeau's CSS for JavaScript developers course (Module 1). Seriously, the course is a goldmine.

I don't know if the quote makes sense on its own (without more context). But I thought it describes the difference between height and width very clearly yet succinctly, so I wanted to share it here.

💁‍♂️ More Weekly log entries

Next week: 16th week of 2021