Original link: https://limboy.me/links/2022-41/
Tech
Vercel OG Image Generation
Vercel’s new tool for generating Open Graph Image, OG Image is the cover image that will be displayed when sharing to social networks, like this:
To generate such dynamic images, the simple and crude method is to run a headless chrome on the serverless platform, and combine puppet to take screenshots of web pages. Vercel’s new solution is to use html and css to generate this graph, just like writing a page module.
Behind the scenes, the Satori engine is used to render into SVG, and then combined with SVG to image technology to finally generate PNG images.
If you are interested in the implementation technology, you can take a look at this Thread by Shuding .
This page is a truly naked
A very interesting article. The content of the article itself is the source code, and even the style is displayed. The main technologies used are:
- All elements are set to
blockso that some implicit tags are also displayed:<style>* {display:block}</style> - Add
contentto the label throughbefore::,after::and set specific styles:
html::before {content:'<html>'} html::after {content:'</html>'} head::before {content:'<head>'} head::after {content:'</head>'} /*...*/ *::before,*::after { color:rgba(136, 18, 128, 0.5); font-weight:100; font-size:1.0em }
A (Mostly) Complete Guide to React Rendering Behavior
A very good article introducing the mechanism of React Render. After reading it, I believe that I will have a deeper understanding of React Render. Here’s a condensed version I put together:
render is actually the process of calling component function (class component will be more intuitive, because there is a render method). After the render method of the root component is called, a React element tree is constructed.
So how does React know it’s time to call the component? This has a mark dirty process. When setState is executed, the component is dirty, and react knows that it needs to be ReRendered.
So when does react know that the component is dirty? Is it a callback? No, this is too inefficient, and there are several setState that need to be executed several times. A technology similar to event loop is used here. Multiple setState calls will be packaged and saved to a certain checkpoint. When the next loop starts, react will go to each checkpoint to check whether there are tasks to be executed.
If a Parent Component needs ReRender, then all its Children will be ReRendered, regardless of whether the props have changed, because React doesn’t know whether the Component will do any Side Effects. If you want to tell React that it is a Pure Component, the same Props There must be the same Result when you come in, so you can use React.memo package it.
What should be noted here is the “same props”. For React, only the same memory address (the same reference, judged by === ) is the same Prop, so the function or variable defined inside the Component, if directly Pass it as a prop to children, even if children are a pure component, it will be re-rendered, because react thinks that the prop has changed, you can put these variables outside the component, or wrap them with useMemo and useCallback
When a new round of render calls ends, another React element tree will be obtained. At this time, you need to compare it with the previous tree to see what has changed, and then apply the changes to the real DOM. This process is Reconciliation.
To render the result on the browser, imagine that there are two workers inside React, one for Render and one for Commit. The goal of the former is to get two React element trees, and then give them to the latter, and the latter will apply these Diffs to the DOM after calculating the Diffs.
When using Context, when the value of the Context Provider is changed (usually set by the Parent Component), all the Consumers of the Context (the Component that uses useContext(Ctx) ) will also be ReRendered.
After the value of the Provider is changed, not only the Consumer will be ReRendered, but the Component under the Provider will also be ReRendered, even if there is no interest in the Context, because React’s renderer adopts a conservative strategy: unless you tell me it is Pure Component, as long as Your parent component ReRender, you have to ReRender, regardless of props changes.
Therefore, the best practice here is to wrap the Component next to the Context Provider with React.memo .
The future of rendering in React
From the perspective of user experience, combined with key indicators (TTFB, LCP, TTI, etc.), we talked about several rendering modes of React.
- CSR (Client Side Rendering), the easiest, but LCP, TTI and SEO are all problems
- SSR (Server Side Rendering), solves the problems of LCP and SEO, but TTI does not solve it well, and it may also bring about the problem of slow TTFB (after all, you need to get the data on the server first and then
renderToString, SSG partially solves this problem ) - Stream SSR (The new rendering patterns), a problem with hydration is that a whole tree needs to be hydrated together, one is a possible performance problem, and the other is slow because it has to wait for all the content of a tree to be loaded. The goal of Stream SSR is to achieve hydrate at component granularity. When a component of the backend stream comes over, it hydrates easily, which can improve TTI. Some secondary content (such as comments) can be wrapped in
Suspenseand hydrated after the server sends the rendered component with data.
hydrate consists of two processes. First, the client obtains the final DOM tree through the two steps of render and commit, and then matches the DOM tree nodes sent from the server one by one, and binds various interactive events (such as button clicks). There will be no data coverage in this process (that is, the data on the server side shall prevail), and the structures of the two DOM trees are required to be exactly the same. The author of this article stepped on the pit and made a good summary.
If you take a closer look, you will find that not all components need interaction. Those components that do not need interaction do not need to be hydrated. The HTML rendered by the server is completely sufficient. This is also the direction mentioned at the end of this article. For example, for this type of component, it can be named with .server.ts/js . Remix and fresh are designed according to this idea.
A World-Class Code Playground with Sandpack
The article mainly introduces the author’s experience of using Sandpack as Code Playground, as well as the introduction of some custom configurations of Sandpack, which is quite good in terms of effect.
If you want to use a lighter alternative, you can take a look at devjar . There are not many source codes, which is very helpful for understanding the implementation principle.
General
Introduction to the Zettelkasten Method
I had a brief understanding of the Zettelkasten note-taking method before, but I did not practice it strictly for various reasons. Finally, one night, after being frustrated with the note-taking again, I decided to study ZK in detail. This article basically made Zettelkasten clear. There are a few key points:
- Atomic Notes
- describe in your own words
- Create connections between notes
Atomic notes, that is, each note speaks a point, which can then be cited by different articles. Just like an oxygen atom, it can combine with hydrogen atoms to form water, and it can also combine with carbon atoms to form carbon dioxide.
Then this note cannot be simply the content of the Quote book or article, so it is not your note, and the impression will not be deep. Use your own words to describe it, and then attach a reference link (such as the title of the book).
In this note, link to other notes naturally , that is, through context, rather than attaching links to other notes at the bottom. If it doesn’t link naturally, it means that the connections between the notes are not tight, and the context is not visible through backreferences.
PS: The App I use is obsidian , which has just released version 1.0 , adding support for Tab, and the default theme is more concise.
What are EPR paradox, quantum entanglement, Bell’s inequality? The hardest interpretation of the 2022 Nobel Prize in Physics!
A video brought by Mr. Li Yongle talked about what these masters who won the Nobel Prize in Physics did. Have some macro understanding of some concepts that sound very esoteric, and basically do not need pre-knowledge.
The “EPR Paradox” is a thought experiment conceived by Einstein and two other physicists to counter the school of quantum mechanics represented by Bohr. Quantum mechanics believes that the spin of electrons in different directions cannot be measured at the same time, but this thought experiment shows that the spin directions of electrons can be measured in different directions through the characteristics of quantum entanglement, so quantum mechanics is not reliable.
“Quantum entanglement” is probably a pair of particles that have matching properties, such as rotating in one direction or one is positively charged and the other is negatively charged, and the state of one can be detected by detecting the state of the other.
The genius of “Bell’s Inequality” is that it proposes a theory that can verify who is right between the anti-quantum mechanics school headed by Einstein and the quantum mechanics school headed by Bohr. Through the relationship between several sets of Venn diagrams, an inequality that must be satisfied in a classical scenario is obtained. If the inequality is overturned, then quantum mechanics wins, otherwise, classical mechanics (all states are determined, but there are hidden variables) has not yet been discovered) wins.
These Nobel Prize winners experimented with the “Bell’s Inequality” to see if this Bell’s Inequality is true through experiments.
Shantaran on Apple TV+
A very favorite book “Shantalaan” is about to be released on Apple TV. How should I put it, I’m looking forward to it!
This article is reproduced from: https://limboy.me/links/2022-41/
This site is for inclusion only, and the copyright belongs to the original author.