Blog

Flex-Wrapping

Rap battling (or battle rap) is a type of rap performance in which two or more rappers sing against each other (generally including some insults/attacks). Today's comic plays with the homophones Rap and Wrap to make a silly joke with Flexbox and the flex-wrap property.

A flex container will lay out the content in a single line by default. This may be Ok, but if the items' size exceeds the container, they will be squeezed or they will overflow. So instead, we may want to get the content into multiple lines. This is where flex-wrap comes into action.

This property defines if a flex container will be single-line or multi-line (depending on the amount and size of the flex items), and in the case of multi-line, it defines how the items will be stacked after wrapping.

flex-wrap has three main values:

• nowrap: the items will not wrap, instead they will overflow the parent. (This is the default value.)
• wrap: the items will wrap instead of overflowing the flex container. They will stack from cross-start to cross-end.
• wrap-reverse: the items will wrap instead of overflowing the flex container. They will stack from cross-end to cross-start.

The cross-start and cross-end part may sound complicated, but it is easier than what it sounds. It depends on the direction of the flex: if the direction is horizontal ("row"), then the wrapped elements will stack vertically (in rows); and if the direction is vertical ("column"), the wrapped elements will stack horizontally (in columns).

Let's check an example with a flex container with 5 items with a defined width. By default, the value of flex-wrap is "nowrap", so the flex items will overflow the container (I put it as an image to avoid the annoying horizontal overflow it would create):

Now, if we change the code to set a value of "wrap" for flex-wrap, when the flex items would overflow the container, they wrap into a new row instead (live demo):

1 2 3 4 5

But if we set flex-wrap to "wrap-reverse", then the direction of the wrapping is the opposite: instead of getting into a new row, the wrapped elements push the others into a new row.

1 2 3 4 5

One last example with the flex-direction set to "column." In this case, the elements organize vertically in columns, so when they wrap, they do it in columns instead of rows:

1 2 3 4 5

I hope these examples were useful and that you enjoyed today's comic. Learn more about flex-wrap on the following sources:

• MDN article on flex-wrap
• CSS Tricks: A Complete Guide to Flexbox
• Josh W Comeau: An Interactive Guide to Flexbox

An Apple A Day Alternative

They say an apple a day keeps the doctor away... But does that apply to web development and CSS, too? Today's cartoon tried to answer that question. I also coded an alternative version, a little bit more educational, highlighting the parts of the box model using the same drawing:

Hopefully, it is clear. Although I must admit, the dashed line marking the personal space is a bit weird and it can be confusing (as it may seem like it's a force-field and the margin is actually between the person and the border).

CSS Christmas Carol

On the twelfth day of Christmas, my CSS sent to me…

Twelve image-renderings,
Eleven pixels padding,
Ten spans a-flexing,
Nine letter-spacing,
Eight divs with vmin,
Seven none font-kernings,
Six videos :playing,
Five :not() with :is()!
Four border-width,
Three place-self,
Two rules with :has(),
And a column in a red grid.

Keyboard Trap vs. Focus Trap

A keyboard trap is a bad UI pattern in which a user can get into a component or element of our application using the keyboard, but it is impossible getting out of it just by using the keyboard. Not to be confused with a focus trap, which is basically the same, but with a keyboard exit (it may be a close button, or pressing Esc, or something like that.)

As you may imagine, a keyboard trap is a HUGE accessibility issue. In contrast, a focus trap can be extremely helpful and positive for usability and accessibility (e.g., a modal in which the focus is trapped until the user presses a button.)

I've had the idea of drawing a trap for keyboards for a while, but I didn't know if it would be clear what it was. I'm still not 100% convinced about it. I like the idea, but I'm not 100% sold on this implementation. I settled for this text (which may remind of a previous comic strip), but before I considered another option about testing and trying to catch keyboards with a trap. I discarded that option because if felt too "technical" and not too good of an idea.

Image Format Decision Tree

I published a more serious article about today's cartoon. It still includes some tongue-in-cheek questions, but the idea was to make it less of a joke and more of an useful thing for people:

The article also includes additional information on why some formats should or should not be used, when we should consider using a video instead of an animated image, and a love letter to BMP... well, not that last part. But I miss BMP.

The Pomodorito Technique

You may have heard about the Pomodoro Technique, a time management method that consists of repeating work and break intervals to help keep focus while getting some needed rest. It is pretty popular in the US among tech employees.

The origin of the name is funny: the method's creator used a tomato-shaped kitchen timer to control the work/break blocks (Pomodoro means tomato in Italian). So that is why each work block is called a "Pomodoro."

The method is simple. First, you pick a task and then:

1. Work for 25 minutes.
2. Take a 5—10 minute break.
3. Repeat steps 1—2 four times.
4. Take a more extended break of 20—30 minutes.

I find this a productive time management method. I follow it often and keep a couple of timers at my desk while I'm working (although they are not tomato-shaped.)

The Pomodorito Technique

Alternatively to the Pomodoro Technique, I introduce you to the tongue-in-cheek Pomodorito Technique (not Lay's affiliated):

1. Eat Doritos for 25 minutes.
2. Work for 5 minutes.
3. Repeat steps 1—2 four times.
4. Take a more extended break to go to the store and buy more Doritos (you probably ran out at this point).

Alternatively, if you have a big stash of Doritos at home, you may use step 4 to take a nap. All that eating is exhausting, and some nice sleep will make digestion easier.

While the Pomodorito Technique is more of a joke, it may be a good burnout index. If you find yourself trying the Pomodoro Technique but quickly spiral into the Pomodorito Technique, it may be about time to take some vacation... or start looking for a new job!

Article originally published on AlvaroMontoro.com

Four combinators walk into a bar...

Today's comic strip is about CSS combinators (and the universal selector). But, what are they? A CSS combinator is something that, combined with the selectors, gives them a relationship.

There are five CSS combinators (but one is at risk of not making the cut to the standard):

• Descendant combinator ( ): indicates that the second element is a descendant (at any level) of the first one.
• Child combinator (>): indicates that the second element is a direct descendant (first level only) of the first one.
• Adjacent sibling combinator (+): indicates that the second element follows the first one directly in the code (first sibling).
• General sibling combinator (~): indicates that the second element follows the first one in the code (any sibling as long as it's after the first element).
• Column combinator (||): indicates that the second element is in the same column specified as the first element (this combinator is experimental and at risk of being removed)

The universal selector (*) selects everything (and that's why everyone in the bar cheers when the next round is on the universal selector.)

This was just a simple introduction to the CSS combinators. For more information, check the following MDN resources:

• CSS Combinators
• Column Combinators
• Universal Selector

Mafalda-inspired cartoon

There is a classic Mafalda comic strip (by Argentinian cartoonist Quino):

"Soup is to Childhood what Communism is to Democracy!" is a political message (cartoons can/should be political at times) that could have different interpretations depending on the perspective.

Based on it, I drew something simple. And because it uses CSS variables (custom properties), it is easy to change the colors to something different:

But I liked the black-and-white version betters, so I published that one. Also, I added more details before publishing it on Monday (the table and t-shirt could use some extras).

Here is a video of how this cartoon was drawn from scratch to its (almost) final form:

Accent Color

Today's comicstrip is about accent-color, so let's talk about it on today's blog post.

As the comic strip indicates, accent-color has nothing to do with the ability to write colors in different languages. What it does, when supported —and it is widely supported now—, is allowing setting up the "primary color" for some HTML elements and form controls.

This CSS property allows for a little standardization of the styles. In the past, each browser would style the HTML elements differently (they still do); but now, developers have some control over how they will be displayed (at least, on the color.)

Browsers allow to set up an accent-color in the following HTML elements:

• Checkboxes (<input type="checkbox" />)
• Radio buttons (<input type="radio" />)
• Range inputs (<input type="range" />)
• Progress bars (<progress />)

...So it begins

I've been doing CSS art for a while already. So it was a matter of time that I combined the CSS art hobby with something I also enjoy, like graphic novels, comic books, or comic strips.

This website is my first attempt at building a place to put all the CSS cartoons I came up with and create an actual series. Hopefully, the comic strips will come weekly, but that will depend on many factors.

I have to thank Temani Afif for the encouragement to put this site together... and for coming up with the name comiCSS. I probably would have delayed the creation of this website until I got a good name, and he came up with a great one in no time.

Let's begin. Ad astra!