869 private links
The design of HTTP/3 by Daniel Stenberg.
The design of HTTP/2 by Daniel Stenberg.
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 sizemargin-inline: auto
is a shorthand formargin-left: auto; margin-right auto;
place-content: center
is a shorthand foralign-content: center; justify-content: center
- difference between
place-content
andplace-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
A web-based CSS animation editor.
Various tricks to mess with webpages - actually quite useful! For example, have you thought of modifying the state of the program using a conditional breakpoint?
An interactive guide on SVG path directives.
This article talks about the evolution of HTTP versions. From the earliest HTTP/0.9 where there is just a single bare GET method and supports no headers, to HTTP/3 which is completely optimized for speed and security. By the way, HTTP/0.9 resembles FTP a lot, which is interesting.
How do you make a webpage without any source code?
- Return "Content-Type: text/html" with empty content. This is tantamount to a bare webpage "<html><body></></>"
- Fill the page's content with the "::before/after{content: xxx}" CSS
- Place the inlined stylesheet in the link header
I learned it's possible to inject CSS via HTTP header: https://danq.me/2020/12/21/http-link-css-injection/
Comparing different approaches of generating HTML:
- String templating
- XML based embedding
- Inline XML (JSX)
- S-expr as DSL
- Custom DSL
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, whereasalign
means to position along cross axis (think of a kebab skew vs cocktail wiener)content
is a group of things that can be distributed, whereasitems
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 thewidth
(orheight
) attribute along the primary axis. A difference is thatflex-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, whereasflex-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); speciallyflex-shrink: 0
makes the child never shrink.- flexbox layout never shrinks an item below its
min-width
(or height), regardless of theirflex-shrink
value, and even at the cost of overflowing the container. gap
is a convenient attribute comparing to settingmargin
because it doesn't add spacing on the ends.margin: auto
is an useful alternative toflex-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 usealign-content
to adjust the position of all items about the cross-axis.
TCP slow start algorithm starts by sending a small amount of data, usually 10 TCP packets. A webpage of 14kB will fit in these 10 packets (MTU - len(headers)). Doing so can deliver the content to the users in one round-trip.
Fun and useful HTML attributes that I didn't know before.
An interesting idea to curate a list of filters for non-ad/tracking-blocking purposes.
base64/hex conversion, cryptography functions, totp, url escaping, regular expression, exif, qr code, disassembly, html to text...
And there's a special "magic" mode that detects the coding from the input.
A bunch of nice tricks to use browsers' web debugger console and console.log() faimilies.
More tricks shared in HN comments: https://news.ycombinator.com/item?id=29071700
This article describes the security implication of using jwt token for authorization in order to save a db lookup.
- Logout doesn't log out if the token is still accessible
- Server-side cannot force block a user
- etc.
websocket explained in detail
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.