2023 - Week Thirty - AgedCoffee

This weekly report mainly summarizes and organizes 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 this can lead to a significant increase in package size. Instead, the author advocates for using svg sprites, storing multiple icons in a single 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.

Application of WebAssembly in Douyin Fireworks Effects #

This article discusses how to optimize JavaScript code using WebAssembly, with practical examples based on Douyin's fireworks effects. By packaging time-consuming JavaScript calculations into a .wasm file and using WebAssembly to execute the original calculation logic, 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 suggests using the ElementRef type helper in React to easily extract the type of the targeted element. This method is also applicable 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 using forwardRef to extract the type of the element forwarded by the component.
If unsure about 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 module composition, as well as interactive code needing to run 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, enabling accelerated loading of data streams 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 the official data-fetching solution in React, 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 resources that are currently required, reducing load times and utilizing network resources more efficiently. The article also mentions 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, improving 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 while loading, resulting in a better user experience.

A Beginner’s Guide to Docker Networking #

Docker's networking features 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 a Linux bridge, internal interfaces, iptables rules, and host routing. The bridge network allows 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 connecting containers on the host, allowing communication between containers while enabling communication with the outside world through port mapping.

TypeScript Father’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 role 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 used imports for better performance.

Others#

How To Be Successful #

This article provides 13 thoughts on how to achieve extraordinary success, whether in earning significant wealth or creating something important. The author emphasizes the importance of compound interest, both in business and personal growth. They highlight the necessity of confidence, independent thinking, and effectively promoting one's ideas. Encouragement to take risks, stay focused, and work hard is also present. The article concludes by stating that finding purpose and making a meaningful impact can bring immense joy and fulfillment.

To achieve extraordinary success, focus on self-improvement and career advancement, pursue exponential growth, and continuously enhance results.
Cultivate confidence, even to the point of delusion, as it has tremendous 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. Adhering to 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 grammatical 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 behind their value. The author also 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 providing 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 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 building small SaaS applications easier, 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, leading to 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.