2023-Week 31 - AgedCoffee

title: Week 31-2023
date: '2023-08-02'
tags: ['Weekly Learning - 2023']
draft: false
summary: ''

This weekly report mainly summarizes and organizes content from various sources.

Technology
Tools
Updates
- Sharp - WASM
Design
- The Looking Glass: Higher Level Design
Other

Technology#

Understanding React Server Components #

React Server Components (RSCs) are components in the React framework that include data fetching and remote client-server communication capabilities. RSCs address the tight coupling between the client and server in traditional approaches and improve performance by rendering on the server. RSCs also reduce the size of client JavaScript bundles and provide faster page load speeds. RSCs can interact with client components and server components in the same React tree. However, RSCs have some limitations, such as the inability to use lifecycle hooks and state. In Next.js, RSCs can be used through the App Router and components can be selectively set as client components.

React Server Components (RSCs) extend the basic functionality of React to include data fetching and remote client-server communication.
RSCs address some of the issues with traditional React in server rendering and Suspense, providing better performance and user experience.
RSCs reduce the size of client JavaScript bundles, improve page load speeds, and seamlessly integrate with client components and Suspense.

Why is DNS still hard to learn?#

This article discusses why learning and debugging DNS issues can be challenging. The author points out several reasons, including the hidden nature of the system, approaches to dealing with hidden systems, and the lack of extensive debugging information provided by DNS servers. Additionally, the article mentions some tools related to DNS and some peculiar issues such as negative caching and differences in getaddrinfo implementations. Finally, the author suggests some improvements to tools and output formats.

DNS is a widely used technology, but learning and debugging DNS issues can be challenging due to many hidden systems.
The hidden systems of DNS include DNS libraries on computers, caches of resolvers, and conversations between resolvers and authoritative name servers, which are not easily observed and understood directly.
By educating people about these hidden systems, improving the readability of tool outputs, and increasing debugging information, learning and debugging DNS issues can be made easier.

6 Ways to Use Extract in TypeScript #

This article introduces various use cases for the Extract type helper in TypeScript. These include extracting members from a union type based on discriminant identifiers, extracting members from a union type based on member shapes, extracting all strings, booleans, and numbers from a union type, extracting all functions from a union type, excluding null and undefined from a union type, and finding common members between two union types.

Extract in TypeScript is a very useful tool that allows you to extract specific members from a union type.
Extract can be used to extract specific members based on discriminant properties or shapes of a union type.
Extract can also be used to extract specific types of members from a union type, such as strings, booleans, functions, etc.

The value of a prototype is in the insight it imparts, not the code.#

This text discusses the value and importance of prototyping in development. Prototyping helps us quickly validate ideas, gather feedback, and make decisions. It helps us understand problems, find solutions, and provides valuable insights. Prototypes are not just the end result of code, but also a learning tool that helps product and engineering teams make critical business decisions. The text also introduces different types of prototypes and methods and steps for prototyping. Finally, it emphasizes the importance of the knowledge gained through prototyping for the success of a project and future similar projects.

Prototyping is a valuable tool for validating ideas, gathering feedback, and making critical business decisions for product and engineering teams.
The value of a prototype lies in the insights it provides, not just the code written. It helps us fail fast, gather the necessary data for decision-making, and iterate safely.
Prototyping is a learning tool that helps us discover requirements, solve problems, improve products, and plays a crucial role in the success of the final product and future similar projects.

How to Send Emails with React Using Resend #

This article explains how to send emails using React Email and Resend, and builds a typical portfolio contact form using Next.js. With the Resend API, we can send emails and create email components using React Email. The article provides detailed steps on setting up a Next.js application, obtaining a Resend API key, creating email components, and sending emails using Resend. It emphasizes that using React Email and Resend simplifies the process of creating and sending emails and provides links to relevant documentation and example code.

Sending emails using React has become challenging recently, but the introduction of React Email and Resend solves this problem.
After setting up a Next.js application and configuring Resend, we can create a typical portfolio contact form for sending emails.
Using React Email and Resend, we can easily create and send emails, providing an excellent developer experience.

If Web Components are so great, why am I not using them?#

The lack of widespread adoption of Web Components in the past decade can be attributed to several reasons: 1. Web Components are too low-level and primarily targeted towards framework authors, while most frameworks have already addressed their own problems. 2. There was confusion between early Web Components and Polymer (Google's UI framework), and Google's marketing approach hindered the promotion of Web Components. 3. The lack of support from successful use cases and well-known products made it difficult for people to invest in using them. 4. Web Components only recently gained widespread support and were previously considered experimental technology. 5. Web Components have some performance issues. If given the chance to start over, the target audience for Web Components should have been WordPress users, reducing Google's influence, simplifying styling issues, and establishing a code of conduct.

There have been marketing issues and a lack of comprehensive marketing strategies for Web Components.
Web Components are too low-level and were designed for framework authors, which may not be appealing to framework authors who have already solved most of their problems.
There were issues with heavy marketing and confusion with Google's UI framework Polymer during the early promotion of Web Components, leading to poor promotion results.

The virtual keyboard API #

This article addresses the issue of fixed elements being obscured by the virtual keyboard on mobile devices and introduces the use of the virtual keyboard API to solve this problem. The author explains the reasons behind the problem and provides examples and use cases for using the virtual keyboard API. The virtual keyboard API is currently only supported in the Android version of the Chrome browser. The author advises caution when using the virtual keyboard API, as it may cause other issues in certain situations.

Fixed elements on mobile devices can be obscured by the virtual keyboard, affecting the user experience.
The virtual keyboard API can be used to solve this problem by detecting the position and size of the keyboard to adjust the layout.
The virtual keyboard API is currently only supported in the Chrome for Android browser and requires JavaScript to be enabled or the use of meta tags or CSS properties.

Using quantum secure encryption algorithms with Nginx #

This article introduces the threats posed by quantum computers and how to protect website data using quantum secure encryption algorithms. The Open Quantum Safe project provides encryption algorithms that can resist attacks from quantum computers and offers documentation on compiling and integrating software such as nginx and Chromium. The article provides specific steps for compiling OQS-OpenSSL and compiling Nginx.

Introduction to container orchestrators #

This article provides an overview of the development of container orchestrators, including an introduction to container orchestrators, Swarm, and Kubernetes. Swarm is an upgraded version of Docker Compose that supports features such as service discovery, load balancing, and rolling updates, but does not provide high availability for containers. Kubernetes is currently the most popular container orchestrator, supporting the management and allocation of resources in clusters with thousands of nodes, and offering powerful features and performance. It supports democratization and has complex configuration.

Tools#

ora #

Elegant terminal spinner.

size-limit #

Calculates the actual cost of running your JS application or library to maintain good performance. If the cost exceeds the limit, display an error in the pull request.

A very lightweight and flexible accessible modal dialog script.

Updates#

Sharp - WASM #

Design#

The Looking Glass: Higher Level Design #

This text primarily discusses the importance of design in problem-solving and the abilities and responsibilities designers should have. It emphasizes that design is a conscious act of influencing outcomes, a means of controlling our destiny, and the magic dust of innovation. Additionally, the text points out biases and difficulties in evaluating others' knowledge and skills and determining important goals. Finally, it calls for a correct understanding of the essence of design and selecting the most suitable person for designing solutions based on goals and corresponding knowledge and skills.

Design is a conscious act of influencing outcomes, a means of controlling our destiny, and a way to reject undesirable status quo.
Design has been present since the dawn of our existence, it is a weapon against chaos, the magic dust of innovation, and the foundation for pursuing happiness.
In the technology ecosystem, engineers and designers may have different skills in design, but roles should not determine who can come up with the best solutions; the best designer should be determined based on knowledge and skills.

Other#

AI models require users to clearly describe their problems, but in contemporary society, half of the people lack good expressive abilities and cannot obtain ideal results from (current) AI models.

-- "AI: The First New UI Paradigm in 60 Years"

Things almost always start with someone doing something seemingly useless at the time.

-- James Burke, British historian of science

If you want to absorb what you learn in the long term, you have to be involved and practice it yourself.

However, in a society where smartphones are popular, true involvement has become more difficult than before. People have become accustomed to passively browsing others' works, and sharing, liking, and reposting have replaced personal involvement.

-- "How to Learn Better in the Digital Age"