JS FS BC W2 W3
Random notes. Unorganized thoughts. Not an article.
The way sentences are structured one line per sentence makes it really easy to read through.
Always nice to have a bit of history as context.
這句很美。“The browser is not just a document visualization tool: it’s a runtime, a platform that executes other programs.”
“…originally Safari evolved from KHTML, a KDE Linux project. Chrome was born as a fork of the open-source rendering engine of Safari, called WebKit, and later separated to its own rendering engine called Blink. Edge completely rewrites its codebase to use Chromium, the open-source part of Chrome. That’s why they share a common ground.”
Got a bit sidetracked noticing he has Arduino tutorials and this brings back a lot of memories.
“RFC stands for Request for Comments.” Flavio provided a link to a Wikipedia page here. https://en.wikipedia.org/wiki/List_of_RFCs
Really happy this was mentioned, all these years I don’t think I’ve seen this mentioned in other material. “The name, Request for Comments, encouraged a community discussion around those papers, that originally circulated in printed form.”
Flavio said he printed these out 20 years ago. Such a good idea.
“HTTP and HTTP/2 work on TCP, while HTTP/3 works on QUIC, a protocol built on top of UDP.”
When using HTTP the default server port is 80, and on HTTPS it’s 443.
TLS is the successor of SSL.
QUIC is a protocol based on UDP (rather than TCP) at the transport layer, which means that HTTP/3 will be based on a completely different tech stack compared to HTTP/2 and HTTP/1.x.
Another difference is that inline elements can be contained in block elements. The reverse is not true.
I really appreciate how the information is clear on what can and can’t be done. Such an efficient way to refresh my memory. For instance if someone explained it this way years ago…
“By default browsers style a paragraph with a margin on top and at the bottom. 16px in Chrome, but the exact value might vary between browsers.
This causes two consecutive paragraphs to be spaced, replicating what we think of a “paragraph” in printed text.”
Beautiful.
“Some other properties make more sense to not be inherited.
Think about fonts: you don’t need to apply the font-family to every single tag of your page. You set the body tag font, and every children inherits it, along with other properties.
The background-color property, on the other hand, makes little sense to be inherited.”
Yes. Makes sense.
Note to self: List of properties that inherit. List of popular pseudo classes.
“They can be used as part of a selector, and they are very useful to style active or visited links for example, change the style on hover, focus, or target the first child, or odd rows.”
“if you add // before a rule, the rule will not be applied, looking like the comment worked. In reality, CSS detected a syntax error and due to how it works it ignored the line with the error, and went straight to the next line.”
“To avoid shooting yourself in the foot, just avoid using inline comments and rely on block comments.”
lol
“The coordinates are relative to the closest container that is not static.”
“Like with absolute positioning, when an element is assigned position: fixed it’s removed from the flow of the page.”
“… today we have Flexbox and Grid to help us with layout, and float has gone back to its original scope: placing content on one side of the container element, and make its siblings show up around it.”
: Pseudo classes
:: Pseudo elements
It’s crazy how you are never confused reading his material… if a question pops up it’s normally explained in the next paragraph…
I have a feeling he left a bit of stuff out so we can experiment ourselves…
“Flexbox is a one-dimensional layout model. CSS Grid is bi-dimensional and allows this more extensive level of control.”
“Positioning elements using `grid-template-areas`"
Cool trick. Use . for places. you don’t need.
Css grid is so much better than flexbox. I think? It’s just so simple.
So happy tailwind was mentioned here. Basically designing in HTML. Wonder if a lot of companies really use tail wind in production.
