Latest Posts

What's the Deal with Collapsible Margins?

Last week, I ran a twitter poll asking the following question - What would be the amount of space between two sibling divs, where the 1st has a margin-bottom of 10px and 2nd a margin-top of 30px? The result of this poll was that 39% of the 754 people who...

How the minmax() Function Works

One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a...

CSS Animations vs the Web Animations API: A Case Study

Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is! Introduction to the Web Animations API As with last week, I'll start this...

How I Animated the bitsofcode Logo with CSS

I’m pretty new to CSS animations. For the most part, I had only used them in limited cases and mostly using libraries created by others, such as the excellent Animate.css created by Daniel Eden. As I mentioned in Redesigning bitsofcode, the graphic designer I worked with for the...

Asynchronous Functions 101

One of the major advantages of JavaScript is that everything is asynchronous. For the most part, different parts of your code don’t affect the execution of others. doALongThing(() => console.log("I will be logged second!")); console.log("I will be logged first!"); Unfortunately, this is also one of...