This weekly report mainly summarizes and organizes content from various places
- Technology
- A Discussion on Layer 4 Load Balancing
- GLB: GitHub’s open source load balancer
- Advanced usage patterns for taking page element screenshots with Playwright
- Definition and Handling of Technical Debt
- Does Interaction to Next Paint actually correlate to user behavior?
- Getting Started with React Native Skia
- TanStack Router – modern React for the rest of us
- Printing Perfection, A Developer’s Journey with React-to-Print
- Tools
- Updates
- AI
- Others
Technology#
A Discussion on Layer 4 Load Balancing#
Layer 4 load balancing is a common technology in networks, typically used as a reverse proxy at the TCP layer. It forwards data based on the ports and flags in the TCP header without maintaining a complete TCP implementation. This type of load balancing is more like forwarding IP packets rather than TCP proxying. This design allows for high forwarding efficiency. In addition to these basic concepts, client-side load balancing that relies on service discovery and load balancing techniques in reverse proxy mode are also introduced. In the latter, the load balancer is placed in front of backend instances to achieve scaling by evenly forwarding traffic to backend instances. However, the load balancer itself also needs to address its own scaling and service discovery issues.
- Layer 4 load balancing is a reverse proxy at the TCP layer that forwards data based on the ports and flags in the TCP header without maintaining a complete TCP implementation.
- Layer 4 load balancing is more like forwarding IP packets rather than TCP proxying, with high forwarding efficiency.
- Client-side load balancing that relies on service discovery allows clients to be aware of multiple servers and access different servers based on certain policies.
- Load balancing in reverse proxy mode achieves scaling by placing the load balancer in front of backend instances, evenly forwarding traffic to them.
- The load balancer itself needs to solve its own scaling and service discovery issues.
GLB: GitHub’s open source load balancer#
GitHub has released the design details of their load balancer GLB Director and made it open source. GLB Director is a Layer 4 load balancer that can distribute a single IP address across multiple physical machines while minimizing connection interruptions during server changes. It does not replace services like haproxy and nginx, but adds a layer in front of these services (or any TCP service) to allow them to scale across multiple physical machines without requiring each machine to have a unique IP address. GLB Director utilizes ECMP (Equal-Cost Multi-Path) routing to achieve IP address scaling, evenly distributing connections across multiple paths using a hashing algorithm. To address connection breakage, GLB Director introduces a new layer called "director," responsible for controlling the hashing and storing connection-related states. GLB Director avoids the issue of duplicating connection states at the director level by leveraging the existing stream state of the proxy servers. To maintain consistency, GLB Director uses "rendezvous hashing" to select primary and backup servers and adjusts server states to add and remove servers.
- GitHub has released the design details of their load balancer GLB Director as an open source project.
- GLB Director is a Layer 4 load balancer that can distribute a single IP address across multiple physical machines for load balancing while minimizing connection interruptions.
- GLB Director improves traditional load balancer design by using ECMP routing and stream states, allowing proxy servers to add and remove without maintaining state.
Advanced usage patterns for taking page element screenshots with Playwright#
This article discusses how to take screenshots of web pages using Playwright and customize the screenshots. The author first introduces the basic usage of Playwright for screenshots, then demonstrates how to modify the DOM before taking a screenshot using Playwright's addScriptTag method, and how to modify the screenshot using the Sharp module. Finally, the author introduces Playwright's mask feature, which allows certain elements to be hidden in the screenshot by specifying a CSS selector.
- Using Playwright makes it easy to take page screenshots, which can be used for visual regression testing or scraping third-party web pages.
- The addScriptTag method in Playwright allows for modifying the DOM structure before taking a screenshot, controlling the content of the screenshot.
- The Sharp module can be used to crop, resize, and process screenshots, enabling modifications to the screenshot images.
Definition and Handling of Technical Debt#
This article discusses the definition and handling methods of technical debt. Technical debt refers to compromises made during development to complete code, including reckless debt, prudent debt, intentional debt, and unintentional debt. Technical debt can lead to negative consequences such as unstable codebases and performance issues. To manage technical debt, it is recommended to document all compromises and add comments, strictly adhere to coding style guidelines, conduct code reviews, and use shame files to track and manage known debts.
- Technical debt refers to compromises made during development to solve problems, which may affect the stability and maintainability of the code.
- There are four types of technical debt: reckless debt, prudent debt, intentional debt, and unintentional debt, each with different consequences and handling methods.
- Methods for managing technical debt include documenting everything, adhering to coding style guidelines, conducting code reviews, and tracking technical debt lists.
Does Interaction to Next Paint actually correlate to user behavior?#
In this article, the author discusses the Interaction to Next Paint (INP) metric introduced by Google, which will replace First Input Delay (FID) as one of the core Web Vital metrics in March 2024. The article defines INP, how to measure it, and its influencing factors, analyzing the correlation between INP, user behavior, and business metrics through actual data. The author also mentions that results may vary across different websites, noting a negative correlation between INP and conversion rates, but no consistent association with Google's thresholds. Finally, the article explains how to measure INP in SpeedCurve and provides related resources.
- Interaction to Next Paint (INP) is a metric used to measure a page's responsiveness to user interactions, showing a negative correlation with actual user behavior and business metrics.
- The quality of INP is negatively correlated with user behavior and conversion rates, indicating that INP is a meaningful metric related to user-perceived performance.
- There is no consistent correlation between INP and the thresholds set by Google (good, needs improvement, poor), so thresholds should be determined based on one's own data.
Getting Started with React Native Skia#
Skia is a cross-platform 2D graphics library that allows drawing graphics on iOS, Android, macOS, Windows, Linux, and browsers. The @shopify/react-native-skia library exposes Skia functionalities to React Native developers. Skia can be used in React Native to draw custom user interactions, optimizing performance and animation effects. The article explains how to use Skia to draw basic shapes and paths and implement animations using the react-native-reanimated library.
- React Native Skia is a cross-platform 2D graphics library that can run on multiple operating systems and browsers.
- RN Skia provides powerful drawing capabilities to create custom shapes and implement animation effects.
- Using React Native Skia allows for building custom user interactions that differ from conventional React Native components, achieving high-performance dynamic effects.
TanStack Router – modern React for the rest of us#
TanStack Router is a routing library based on React that provides type-safe routing and data loading features. Its design is inspired by Remix, NextJS, TRPC, and Chicane. By integrating routing with the application's state and UI, it allows better control over URLs and page states, achieving improved multitasking and data preloading effects. TanStack Router also supports file-based routing and nested routing, making it easier for developers to build the next generation of applications. Although it is currently in beta, it has already gained popularity and usage among developers.
- Tanner provides us with a type-safe routing solution through TanStack Router, making it easier to build the next generation of applications.
- TanStack Router places routing within the control of application state and UI, linking every significant UI change to a new URL, enabling page reconstruction and multitasking capabilities.
- The nested routing feature of TanStack Router allows for more flexible page layouts by controlling different parts of the UI while supporting loading and error state handling.
Printing Perfection, A Developer’s Journey with React-to-Print#
This article recounts the author's experience implementing a custom printing solution in a commercial application. The author utilized the "react-to-print" library to leverage the browser's native printing API, addressing issues with the default print layout. The author shares the reasons for choosing this library, the challenges faced, and the solutions found. The article emphasizes the importance of continuous learning, problem-solving, and community in the field of web development.
- To achieve better print layouts, sometimes it is necessary to use non-default browser printing solutions.
- "react-to-print" is a library built on the browser's native printing API, with a high download rate and widespread usage.
- During implementation, attention must be paid to resolving component references, hiding elements, and keyboard events to achieve the desired printing effect.
Tools#
nft#
Node.js dependency tracking tool
JSPyBridge#
A bridge for interoperability between Node.js and Python
stylex#
A styling system for ambitious user interfaces
tinyld#
A simple and efficient language detection library for NodeJS
Updates#
XState v5 is here#
XState v5 is an open-source state management and orchestration solution based on state machines, state charts, and the Actor model. It focuses on the use of actors, enabling developers to write and manage complex application logic more easily. In this version, XState introduces actors as abstract units that can be used to create various types of logic, such as Promise logic, Transition function logic, Observable logic, and Callback logic. Additionally, XState v5 introduces new features like the Inspect API, deep persistence, and an actor system. This version also simplifies the API, reduces bundle size, and improves documentation with new examples.
- XState v5 is an open-source state management and orchestration solution based on state machines, state charts, and the Actor model, aimed at simplifying logic management and collaborative development.
- The main focus of XState v5 is on actors, which can simulate communication and collaboration between multiple parts of a system.
- XState v5 introduces new actor logic creators and implements different types of logic through actors, such as Promise, transition functions, Observable, and Callback.
Astro 4.0#
Astro 4.0 is a web framework for building content-driven websites, providing new APIs, faster build speeds, redesigned documentation, and development tools that enhance the local development environment. Highlights of the new version include the Astro Developer Toolbar, internationalized routing, incremental content caching, a new view transition API, redesigned logs, and documentation. Astro 4.0 also introduces new features like internationalized routing and incremental content caching, offering simplified development and faster build speeds. Astro 4.0 can be installed via npm, enhancing the local browser development experience with the Astro Developer Toolbar.
- Astro 4.0 is a web framework for building content-driven websites, featuring fast loading and strong SEO capabilities.
- Astro 4.0 introduces the Astro Dev Toolbar, enhancing and customizing the local browser development experience.
- Astro 4.0 also adds features like internationalization (i18n) routing, incremental content caching, a new view transition API, redesigned logs, and documentation.
RTK-v2.0.0#
This major version update brings significant changes, including the removal of deprecated syntax, updates to middleware and enhancer options, the addition of new methods and middleware, and updates to other dependencies. It also improves TypeScript support and modernizes build outputs. This version is one of the major updates across all related packages in the Redux series. Specific changes and migration guides can be found in the Redux documentation.
- RTK 2.0's major updates include the removal of deprecated object syntax, updates to middleware and enhancer options in configureStore, the addition of new features like combineSlices and dynamic middleware, and updates to RTK Query and other libraries.
- In RTK 2.0, createReducer and createSlice.extraReducers no longer support object syntax and are recommended to use builder callback syntax instead.
- Middleware and enhancer options in configureStore must now use callback function syntax, and it is still recommended to use the default middleware and enhancers.
- The behavior of RTK Query has changed, now always tracking cache entries and optimizing the synchronization of subscription states.
- Redux has released ESM/CJS compatible packages, optimizing build outputs and toolchains, and no longer providing UMD builds.
- RTK now relies on Redux core 5.0, Reselect 5.0, Redux Thunk 3.0, and Immer 10.0.
Storybook 7.6#
Storybook 7.6 is the last minor version of the Storybook 7 series, improving performance and user experience, enhancing integration with tools in the frontend ecosystem, and paving the way for the next major version, Storybook 8. Updates include improved SWC support, new testing tools and fast build modes, NextJS SWC + avif support and fixes, SvelteKit page and navigation simulation, React-docgen upgrades, background themes, viewports, improved accessibility, and diagnostic errors. Additionally, some features have been removed, such as Storyshots and support for Vue2. Storybook 7.6 is the final version of the 7.x series, preparing for the upcoming Storybook 8.
- Improvements in Storybook 7.6 include performance enhancements and user experience improvements, with tighter integration with tools in the frontend ecosystem, preparing for the next major version, Storybook 8.
- Storybook 7.6 reduces the startup time of Webpack projects by over 50% using the Speedy Web Compiler (SWC) and fixes issues with Preact and React fast-refresh in SWC.
- Storybook 7.6 brings SWC and avif support for Next.js users, fixing issues with ref forwarding in the Image component and Jest compatibility.
AI#
design2code#
Convert any web design screenshot into clean HTML/CSS code
CopilotKit#
Integrate built-in AI chatbots 🤖 and AI-based text areas ✨ into React web applications
Others#
Do not treat a career as a specific thing; it is one of the most dangerous and suffocating concepts invented by humanity, and it is the enemy of most dreams and intuitions.
A career should be an abstract concept, referring to a person's continuous exploration, training, practice, and gradual progress in daily work and life.
-- "The Legacy of Jobs"