In this article Josh Comeau went in depth on why it matters to think of CSS as the parameter to the layout algorithms. This means for any layout problem, you must think of which layout algorithm you're using before deciding.

For example, z-index is not functioning by default. To use it you must set position: relative | relative. This is because the flow algorithm (think about Word) doesn't know about z-index. It only makes sense in the "Positioned" layout algorithm. And the position attribute is used to switch the positioned algorithm. Instead of saying z-index depends on the position attribute, it's better understood that it depends on the layout algorithm.

Another evidence is that properties are interpreted differently in different layouts. For example, width is hard-restriction for flow layout, but more fluid in a flexbox layout.

It's possible to declare conflicting layouts on the same element. But then there is a priority in which algorithm takes precedence. Two algorithms are never used simultaneously on the same element.

Identifying the algorithm:

• flow (the default)
  • the core of flow layout are inline blocks and blocks.
• positioned (when position is set), four variants: relative, absolute, fixed, sticky
• float (when float is set)
• table
• flexbox (parent is display: flex)
• grid (parent is display: grid)

There are quirks which are result of different layout algorithms. For example, when putting an img inside a box, it gets a little whitespace below it that are not padding/margin/border of either parent box or the image. This is because inline elements are aligned by baseline. And the flow algorithm adds a bit of vertical space below the baseline of inline element to ensure the bottom part of "g", "j", etc are visible. img by default is inline-block and its baseline is at its bottom edge (0). Now the problem is understood one can solve it in different ways.

Josh Comeau writes one of the best interactive css tutorial out there! I learned so much in this article. A few notes:

• margin: auto makes the child take as much margin as possible.
• width: fit-content uses all available space, but within the intrinsic size
• margin-inline: auto is a shorthand for margin-left: auto; margin-right auto;
• place-content: center is a shorthand for align-content: center; justify-content: center
• difference between place-content and place-items in grid layout - the latter aligns items relative to the cell
• the insight that css attributes are merely inputs to the underlying layout algorithm

On the techniques required to circumvent YouTube's download rate limit.

• How to find the scancode of a key (evtest),
• And map it to some known keycode (setkeycodes).

A comprehensive note on functional analysis.

A comprehensive guide and links to models for playing with stable diffusion.

This article explained the concept pretty well! It not only showed how to use Flexbox, but also the reason it's designed this way. Here are a few things I learned:

• the default css layout algorithm is flow. flexbox and grid are two completely different layout. by using display: flex we are switching layout algorithm.
• justify means to position along primary axis, whereas align means to position along cross axis (think of a kebab skew vs cocktail wiener)
• content is a group of things that can be distributed, whereas items refers to single items that are positioned individually.
• width in flow layout is a hard constraint, whereas in flexbox layout it's a "hypothetical size", meaning only the hinted size.
• flex-basis is just like the width (or height) attribute along the primary axis. A difference is that flex-basis cannot reduce an item below its minimum size.
• flex-grow: n to use the remaining n_i/(sum n_i) of space; specially, flex-grow: 0 stick to its intrinsic size.
• flex-grow is used when the children's size combined is smaller than the size of container, whereas flex-shrink is used when children's size is bigger.
• flex-shrink: n shrinks the children by making each pay the debt in size. each pays a portion of (n_i/sum n_i); specially flex-shrink: 0 makes the child never shrink.
• flexbox layout never shrinks an item below its min-width (or height), regardless of their flex-shrink value, and even at the cost of overflowing the container.
• gap is a convenient attribute comparing to setting margin because it doesn't add spacing on the ends.
• margin: auto is an useful alternative to flex-grow: 1 because it gobbles up the spare space without changing the item's size.
• with flex-wrap: wrap, items won't shrink below their hypothetical size, and overflowed items wrap to a new row/column.
• when flex-wrap: wrap takes effect, we use align-content to adjust the position of all items about the cross-axis.

A comprehensive introduction to the working and graphics pipeline.

Do you know RF signals can be used to track your poses and positions even if you don't carray a phone? This guide show a number of things I previously never thought of impossible.

Common misconceptions about SSD and how they are different from traditional HDD.

Intuitive explanation on CORS with a lot of examples. The article is not short but the reading was fun.

There are these three types of CORS requests, embedding, reading and writing. Each are treated differently. CORS embedding controls cross-site resources to be embedded. CORS writing controls form. CORS reading controls the ability for a script to read the response from a cross-site request.

The article also explained how preflight request works, and CORS in local context, etc. Overall very nice to read.

<blockquote>Ceph storage cluster, you typically need just three (3) monitor nodes for the whole cluster. Those nodes are contacted by both the storage nodes and the</blockquote>

<blockquote>An open-source guide to help you write better command-line programs, taking traditional UNIX principles and updating them for the modern day.</blockquote>

<blockquote>Executables have been fascinating to me ever since I discovered, as a kid,
that they were just files. If you renamed a .exe to something else, you
could open it in notepad! An...</blockquote>

Good explanation of ELF format. (with a Rust parser as demo!)