2023 - Week Thirty - AgedCoffee

This weekly report mainly summarizes the content from various places.

Technology
Tools
- veaury
- auto-form
- vaul
- capo.js
- swagger-typescript-api
- np
Updates
- Astro 2.9: View Transitions (experimental)
Others

Technology#

Use svg sprite icons in React #

This article introduces best practices for using svg sprite icons in React applications. The author does not recommend writing svg code directly in components, as it can lead to a significant increase in package size. Instead, the author advocates for using svg sprites, storing multiple icons in one svg file, so that only a portion is displayed when needed. The article also provides some useful tools and scripts to help developers use svg sprite icons in their projects.

The Application of WebAssembly in Douyin Fireworks Effects #

This article discusses how to optimize JavaScript code using WebAssembly, with practical examples from Douyin's fireworks effects. By packaging time-consuming JavaScript calculations into .wasm files and executing the original calculation logic using WebAssembly, performance can be significantly improved. The article also points out the issues with this solution, but using WebAssembly remains a good choice for CPU-side performance bottlenecks.

Strongly Type useRef with ElementRef #

This article explains how to use the useRef hook in React with native elements. It provides a solution for specifying the correct element type when using useRef. The author recommends using the ElementRef type helper in React to easily extract the type of the targeted element. This method also applies to custom components using forwardRef. The article concludes with a recommendation for a free beginner course on React and TypeScript for more tips and tricks.

Determining the correct type when using useRef with native elements in React can be tricky, but using the ElementRef type helper makes it easier to extract the appropriate type.
ElementRef can also be used with custom components that use forwardRef to extract the type of the element forwarded by the component.
If unsure of the type to use, ElementRef is a useful tool to ensure the correct type is used in useRef.

Recreating YouTube’s Ambient Mode Glow Effect #

This article discusses YouTube's "Ambient Mode" feature, which creates a glowing effect around the video player. The author reverse-engineered the code and explains how to create this effect using HTML <canvas> and the requestAnimationFrame function. The article outlines the HTML <canvas> element and its uses, as well as the requestAnimationFrame method. It then details the steps to create the ambient mode effect, including rendering video frames on the canvas, applying blur effects, and adding CSS styles. The article also discusses the HTML markup and synchronizing <canvas> with <video> elements.

The ambient mode effect of YouTube's video player creates a subtle glow by projecting the video's colors onto the background, enhancing immersion.
This effect is achieved using the HTML <canvas> element and the requestAnimationFrame function to render and synchronize video frames with the canvas.
By scaling down, blurring, and styling the canvas, similar glowing effects can be created on other videos.

React Server Components Tips #

React Server Components (RSC) are React's official data-fetching solution. They come with some limitations, such as the need for deep integration with bundlers, strict component tree structures, and interactive code must be executed in special client components. However, they also offer benefits, such as the ability to fetch data within components, avoiding common waterfall issues when fetching data on the client side, accelerating data flow loading through <Suspense>, and executing more code on the server without sending it to the client, thus reducing bundle size. When using RSC, it is necessary to:

React Server Components are React's official data-fetching solution, allowing data to be fetched within components.
Using React Server Components can avoid common data waterfall issues when fetching data on the client side.
Using React Server Components can achieve data streaming through <Suspense>, speeding up the initial loading of pages.

Full Context Development #

This article discusses the technique of lazy loading, which is a method of delaying the loading of resources (such as images, scripts, or React components) until they are actually needed. Lazy loading can improve network performance and user experience by only loading the resources currently required, reducing loading times and utilizing network resources more efficiently. The article also mentions some practical cases where lazy loading can significantly enhance website loading speed. It also introduces how to implement lazy loading in React.

Lazy loading is a technique for delaying resource loading, which can improve webpage loading speed and network resource utilization.
The React.lazy() function can be used to implement lazy loading of components, loading the required modules through dynamic import() statements.
Lazy loading can be combined with the Suspense component to provide placeholder content during loading, resulting in a better user experience.

A Beginner’s Guide to Docker Networking #

Docker's networking capabilities include different types of network drivers. By default, Docker creates a bridge network named docker0 for communication between containers and with the host. The bridge network connects containers by creating Linux bridges, internal interfaces, iptables rules, and host routing. The bridge network can also provide external access through port mapping. Additionally, the article introduces two other types of networks: host network (where the host and containers are on the same network) and none network (where containers run on an isolated network stack). The bridge network is a way to connect multiple communication networks or segments.

Docker's networking subsystem is pluggable, supporting different types of network drivers.
Docker creates a bridge network named docker0 by default, and each new Docker container automatically connects to this network unless a custom network is specified.
The bridge network creates a private internal network that connects containers on the host, allowing communication between containers while enabling communication with the outside world through port mapping.

The Father of TS's New Project TypeChat Indicates the Future of Frontend #

TypeChat is a tool that can convert natural language descriptions into executable code. It can automatically correct output results and generate stable code. In the future, frontend engineers will need to write detailed type declarations for TypeChat to generate framework code, similar to how frontend developers currently write state change logic through frameworks. This will raise the requirements for frontend engineers, but the position will continue to exist, albeit with fewer practitioners.

Tools#

veaury #

Use React in Vue3 and Vue3 in React.

auto-form #

A React component that automatically creates @shadcn/ui forms based on zod schemas.

vaul #

An unstyled drawer component for React.

capo.js #

Organize your <head> tag content.

swagger-typescript-api #

TypeScript API generator via Swagger schema.

np #

A better npm publish.

Updates#

Astro 2.9: View Transitions (experimental)#

Introduced experimental view transition support for smoother transitions between pages without needing client-side routing.
Redirect configuration options are no longer experimental, making it easier to set up redirects in projects.
Astro's static analysis has been improved, optimizing script bundling by only including the imports that are used, leading to more efficient performance.

Others#

How To Be Successful #

This article provides 13 thoughts on how to achieve extraordinary success, whether in generating significant wealth or creating important things. The author emphasizes the importance of compound interest, both in business and personal growth. They stress the necessity of confidence, independent thinking, and effectively promoting one's ideas. The article encourages taking risks, staying focused, and working hard. Finally, it points out that finding purpose and making a meaningful impact can bring immense joy and satisfaction.

To achieve extraordinary success, focus on self-improvement and career growth, pursue exponential growth, and continuously enhance results.
Cultivate confidence, even to the point of near delusion, as it has immense power in achieving success and overcoming challenges.
Develop independent thinking skills, learn to effectively promote your ideas, and make risks easier to seize opportunities and adapt quickly.

Good code is like a love letter to the next developer who will maintain it.#

This article emphasizes the importance of writing good code and compares it to writing a love letter. Good code is like a personalized, sincere, and thoughtful love letter. It follows design patterns and principles, making it scalable, maintainable, and efficient. Following best practices, such as appropriate naming conventions and thorough commenting, is also crucial. Rigorous testing and empathy for future developers are key elements of writing good code. Ultimately, good code is a lasting legacy that others can easily build upon.

Good code is like a love letter, personalized, sincere, and thoughtful, aimed at accurately conveying emotions and efficiently solving problems.
Design patterns and principles are the grammar rules of code, providing developers with a shared vocabulary for creating scalable, maintainable, and understandable software designs.
Following best practices, conducting thorough testing, and showing empathy and respect for future developers are essential for creating code that is easy to read, understand, and maintain.

NFTs 101 — Why NFTs are a generational innovation #

The author explains their new understanding of the value of NFTs (non-fungible tokens) and their decision to invest over $1 million in NFTs. They discuss the high return potential of NFTs and the reasons for their value. The author shares their previous skepticism towards art and intangible goods but explains how they began to appreciate the value of NFT art. The article is divided into different sections covering various aspects of NFTs and provides practical tutorials for interacting with NFTs.

The author was initially skeptical about the subjective value of NFTs and art but has now become a firm believer in the potential of NFTs as a technological revolution.
The author emphasizes the disconnect between traditional art valuation and the speculative nature of NFTs, but believes that NFTs can offer higher returns than traditional cryptocurrency investments.
The author highlights the practicality of NFTs across multiple industries, such as art and gaming, and discusses the potential for aligning interests between creators and collectors.

What Comes After SaaS?#

This article discusses the concept of "malleable source code" in software development, where users can modify the underlying code of applications using artificial intelligence. This allows for more customization and personalization, similar to building a customizable suburban development project. The author shares their experiences using malleable source code applications and how easily they can share with friends through browser-based development environments. The article argues that this new paradigm in software development will make it easier to build small SaaS applications, blur the lines between developers and users, and create more customized software.

The development of web-based environments and artificial intelligence technologies has made it possible to create customizable and personalized software applications.
These technological advancements allow users to modify and customize applications without needing coding skills, resulting in a more personalized and tailored user experience.
This new paradigm in software development opens up new business opportunities and blurs the lines between developers and users.