2023-Week 31 - AgedCoffee

This weekly report mainly summarizes the content from various sources

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

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 times. RSCs can interact with both 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 with 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 terms of server rendering and Suspense, providing better performance and user experience.
RSCs reduce the size of client JavaScript bundles, improve page load times, 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 highlights reasons such as the hidden nature of the system, approaches to dealing with hidden systems, and the additional 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 provides suggestions for improving tools and output formats.

DNS is a widely used technology, but learning and debugging DNS issues can be challenging due to the hidden nature of many systems involved.
Hidden systems in DNS include DNS libraries on computers, caching by resolvers, and the conversations between resolvers and authoritative DNS servers, which are not easily observed and understood.
By educating people about these hidden systems, improving the readability of tool outputs, and adding 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 utility type 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 utility type for extracting specific members from a union type.
Extract can be used to extract specific members based on discriminant properties or shapes of the 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 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 the 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 data needed for decisions, 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.

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. Finally, it emphasizes how using React Email and Resend can simplify the process of creating and sending emails, and provides links to relevant documentation and example code.

Sending emails using React has become challenging lately, but React Email and Resend solve this problem.
After setting up a Next.js application and configuring Resend, we can create a typical portfolio contact form for sending emails.
With React Email and Resend, creating and sending emails becomes easier, providing an excellent developer experience.

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

Web Components have not gained widespread adoption in the past decade due to several reasons: 1. Web Components are too low-level and primarily targeted towards framework authors, while most frameworks have already solved their 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. Lack of support from successful use cases and well-known products made it difficult to gain traction. 4. Web Components only recently gained broad support and were previously experimental technology. 5. Web Components have some performance issues. If given a chance to start over, the target audience should be WordPress users, reducing Google's influence, simplifying styling issues, and establishing a code of conduct.

There are marketing issues and a lack of comprehensive marketing strategies.
Web Components are too low-level and were designed for framework developers, but they are not attractive to framework developers 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, resulting in poor promotion.

The virtual keyboard API #

This article addresses the issue of fixed elements being obscured by the virtual keyboard on mobile devices and explains how to use 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 withstand 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 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 achieve high availability of containers. Kubernetes is currently the most popular container orchestrator, supporting the management and allocation of resources in clusters of up to thousands of nodes, with powerful features and performance. It supports democratization and has complex configuration.

Tools#

ora #

Elegant terminal spinner.

size-limit #

Calculate the real cost of running your JS application or library to keep good performance. Show an error in pull requests if the cost exceeds the limit.

A lightweight and flexible accessible modal dialog script.

Updates#

Sharp - WASM #

Design#

The Looking Glass: Higher Level Design #

This text mainly 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. The text also 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 based on goals and relevant knowledge and skills to design solutions.

Design is a conscious act of influencing outcomes, a means of controlling our destiny, and a way to reject unsatisfactory status quo.
Design has been around since the dawn of our existence, it is a weapon against chaos, a magical dust of innovation, and the foundation of 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, it should be based on knowledge and skills to determine the best designer.

Others#

AI models require users to clearly describe their problems, but in today's society, half of the people lack good expressive abilities and cannot get 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"