869 private links
Techniques and tools for reverse engineering private/undocumented APIs for websites.
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
positionis set), four variants: relative, absolute, fixed, sticky - float (when
floatis 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: automakes the child take as much margin as possible.width: fit-contentuses all available space, but within the intrinsic sizemargin-inline: autois a shorthand formargin-left: auto; margin-right auto;place-content: centeris a shorthand foralign-content: center; justify-content: center- difference between
place-contentandplace-itemsin 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: flexwe are switching layout algorithm. justifymeans to position along primary axis, whereasalignmeans to position along cross axis (think of a kebab skew vs cocktail wiener)contentis a group of things that can be distributed, whereasitemsrefers to single items that are positioned individually.widthin flow layout is a hard constraint, whereas in flexbox layout it's a "hypothetical size", meaning only the hinted size.flex-basisis just like thewidth(orheight) attribute along the primary axis. A difference is thatflex-basiscannot reduce an item below its minimum size.flex-grow: nto use the remaining n_i/(sum n_i) of space; specially,flex-grow: 0stick to its intrinsic size.flex-growis used when the children's size combined is smaller than the size of container, whereasflex-shrinkis used when children's size is bigger.flex-shrink: nshrinks the children by making each pay the debt in size. each pays a portion of (n_i/sum n_i); speciallyflex-shrink: 0makes the child never shrink.- flexbox layout never shrinks an item below its
min-width(or height), regardless of theirflex-shrinkvalue, and even at the cost of overflowing the container. gapis a convenient attribute comparing to settingmarginbecause it doesn't add spacing on the ends.margin: autois an useful alternative toflex-grow: 1because 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: wraptakes effect, we usealign-contentto 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