2023 - Twenty-Seventh Week

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

Technology
Tools
Updates
- Expo SDK 49 beta is now available
- Node.js 20 is now available!
Design
- Essential for B-end Designers: How to Systematically Understand Business
AI
- A Review of Collaborative Research Between Large Language Models and Knowledge Graphs: Complementary Advantages of Two Major Technologies
- All You Need to Know to Build Your First LLM App
Others
- Docker Deployment of Free GPT4-FreeGPT

Technology#

Understanding Web Audio #

This article introduces some methods for implementing audio recording on the front end, including supported formats and browser compatibility. It mainly discusses two third-party libraries: the ecorder-core library and the recorder-js library, and summarizes the support situation for technologies like Flash. The article points out that currently mainstream browsers support the web audio API, with only IE versions having issues, necessitating the consideration of using Flash technology for recording. However, Flash technology is outdated, has poor compatibility with new mainstream browsers, and Microsoft has stopped supporting IE.

This article discusses the importance of prioritizing high-intent keywords over high-search-volume keywords to generate leads and conversions through SEO-driven content. Traditional approaches targeting high-search-volume keywords may increase traffic but often fail to produce measurable leads and registrations. The author introduces the concept of pain-point SEO, which focuses on understanding the searcher's intent and creating content that addresses their specific pain points. The article provides a process for proposing SEO topics that drive leads and registrations, including using category keywords, comparison and alternative keywords, and "jobs to be done" keywords. By aligning with the buyer's journey and addressing their pain points, businesses can enhance the conversion potential of their SEO efforts.

In content marketing, prioritizing low-search-volume but high-purchase-intent keywords can achieve higher conversion rates compared to targeting high-search-volume keywords.
Pain-point SEO focuses on addressing the searcher's pain points and intent, leading to more effective content ideas that drive leads and registrations.
The three levels of pain-point SEO include category keywords, comparison and alternative keywords, and "jobs to be done" keywords, which can help target different stages of the buyer's journey.

Industrial Empathy #

This article discusses the impact of web font loading on Google's Core Web Vitals, particularly Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). It introduces the use of font-display: optional as a solution to improve LCP and avoid layout shifts caused by font loading. The article also explores the use of preloading with font-display: optional and the impact of browser caching on fonts. It suggests self-hosting font loading code and introduces a tool called "Perfect Font Fallback" to help match fallback fonts with custom fonts for a smooth transition. The article concludes with a mention of a new web standard solution, the @font-face property size-adjust, to address font matching issues. Overall, the article provides insights and strategies for optimizing web font loading for better performance.

Using font-display: optional and self-hosted web font CSS can improve Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics.
Tools like "Perfect Font Fallback" can be used to adjust font fallbacks for a smooth transition, avoiding layout shifts.
The upcoming web standard size-adjust provides a solution for font matching issues, further enhancing user experience.

RegExp v flag with set notation and properties of strings #

This article discusses the new unicodeSets mode in JavaScript regular expressions. It allows for extended character classes, including Unicode properties of strings, set notation, and improved case-insensitive matching. The v flag is used to enable this mode and cannot be combined with the u flag. The article provides examples and explanations of how to use these new features.

The new unicodeSets mode in JavaScript allows for extended character classes, including Unicode properties of strings and improved case-insensitive matching.
The v flag enables the use of set notation and string literal syntax in character classes to perform operations like difference/subtraction and intersection.
With the v flag, regular expressions can now match multi-character strings and support properties of strings, making it easier to handle emojis and other Unicode characters.

Tether elements to each other with CSS anchor positioning #

The CSS Anchoring API aims to provide a CSS API for connecting elements together without the need for JavaScript or additional markup. It allows for positioning and resizing elements based on the position and size of other elements. Currently, there are various solutions for element anchoring, such as wrapping them in containers or using JavaScript to track their positions. However, these solutions have limitations and may not be responsive. The CSS Anchoring API offers a more streamlined and efficient approach by allowing developers to define anchor points and use anchor functions to position elements, eliminating the need for JavaScript and third-party dependencies. The API is still in experimental stages but can be tested in Chrome Canary.

The CSS Anchoring API aims to provide a CSS API for elements, eliminating the need for JavaScript or additional markup.
Current element anchoring solutions involve wrapping them in containers, using JavaScript to track their positions, or using third-party packages.
The CSS Anchoring API allows developers to define anchor points in CSS or HTML and use anchor functions to position elements based on anchor positions, reducing the need for JavaScript and dependencies.

My take on the current React & Server Components controversy #

This article discusses the frustrations and challenges developers face when using React Server Components. The author, as a library maintainer, explains that it has become increasingly difficult to support and help users due to a lack of documentation and guidance. They also express dissatisfaction with the changes and complexities introduced by React Server Components, such as the need to modify library bundlers and the absence of certain features like createContext. The article emphasizes the poor communication between the React team and library maintainers, leading to unexpected issues and confusion. Overall, the author stresses the need for better support and communication to facilitate smoother adoption of React Server Components by developers.

The introduction of React Server Components has led to dissatisfaction among library maintainers and users due to a lack of documentation and support.
The complexity of supporting React Server Components makes it difficult for library maintainers to provide help and effectively resolve issues.
There is a communication gap between the React team and library maintainers, resulting in unexpected challenges and uncertainty about future developments.

Breaking Up with SVG-in-JS in 2023 #

This article discusses the drawbacks of including SVG in JavaScript bundles and proposes alternative techniques for using SVG in JSX. It explains how SVG entered JavaScript, the impact of SVG-in-JS on performance, and its effects on parsing, compiling, and memory usage. The article also provides best practices for removing SVG from JS bundles, including using <img> tags, SVG sprites with <use>, and using CSS to set attributes like fill and stroke. It also explores options for inlining SVG in HTML to avoid the issue of JS bundle bloat.

Including SVG in JS bundles significantly impacts performance, increasing parsing and compilation time, as well as memory usage.
To optimize performance, SVG should be removed from JS bundles and loaded using techniques like <img> tags or SVG sprites.
Using SVG sprites and <use> tags allows for better control over styles and reduces the need for inline SVG code in JS.

Understanding SVG Paths #

This article explains the d attribute in SVG paths and how to use it to draw icons. It discusses different types of path commands, including absolute and relative commands. It also provides an interactive guide to help understand and use path commands.

The d attribute in SVG paths is a series of commands that tell the browser how to draw the path.
Path commands can be uppercase (absolute) or lowercase (relative), with parameters relative to the endpoint of the previous command or the origin.
Understanding the d attribute and its commands is crucial for creating complex and dynamic SVG icons and animations.

React can update state during render #

This article discusses a surprising feature of React, the popular JavaScript library. It explains that updating state during rendering is possible, which is counterintuitive since every state update triggers a re-render. However, React allows this for performance and user experience optimization. The article compares the traditional method of updating state using useEffect with the new method of updating state during rendering. The latter can provide a more stable experience without any flickering of outdated states. The author provides an example and suggests that this feature is particularly useful in specific cases, such as updating default values of form fields.

React allows updating state during rendering, which can be a useful means of optimizing performance and user experience in certain cases.
Updating state during rendering can prevent flickering of outdated states and reduce interactions between various useEffect hooks.
This technique is especially helpful in specific situations, such as updating default values of form fields and menus hidden during scrolling.

Tools#

Microsoft-Activation-Scripts #

A Windows and Office activation tool using HWID / KMS38 / online KMS activation methods, focusing on open-source code and minimal antivirus detection.

postcss-preset-en #

A modern CSS writing transformer.

rrule #

A JavaScript library for handling recurrence rules for calendar dates defined in iCalendar RFC, etc.

hurl #

A tool for issuing, running, and testing HTTP requests using plain text.

Jianmu #

Jianmu is an easily extensible open-source no-code (visual) / low-code (GitOps) tool aimed at the DevOps field. It helps users easily orchestrate various DevOps processes and distribute them for execution on different platforms.

Updates#

Expo SDK 49 beta is now available #

This article announces the release of Expo's SDK 49 beta, a development tool for building mobile applications. The beta period allows developers to test the new version and provide feedback. Updates include network debugging capabilities in the JS debugger, built-in support for React devtools, and experimental support for debugging with VS Code. Other improvements include built-in support for environment variables, changes to the Expo module API, and updates to React Native and React versions. The article also mentions known issues and the upcoming end of support for classic updates. Developers are encouraged to try the beta version and report any issues they encounter.

SDK 49 beta introduces new features such as network debugging, built-in React devtools, and experimental support for debugging application JavaScript code directly from VS Code.
Expo CLI now has built-in support for environment variables in Metro, addressing previous issues and following popular conventions in the JavaScript ecosystem.
SDK 49 is the last SDK to support classic updates; starting from SDK 50, applications will need to use a modern update protocol compatible with servers like EAS.

Node.js 20 is now available!#

Node.js 20 has been released with several new features and improvements. Notable changes include the introduction of a Node.js permissions model that allows for restricting access to specific resources during execution. Developers can now better control file system access with --allow-fs-read and --allow-fs-write flags. Custom ESM loader hooks now run in a dedicated thread, ensuring no cross-contamination between loaders and application code. The V8 JavaScript engine has been upgraded to version 11.3, bringing performance improvements and new language features. The stable test runner module has been marked as stable, providing a foundation for writing and running tests. Performance improvements have been made in areas such as URL, fetch(), and EventTarget. Support for single executable applications (SEA) has been improved, allowing for embedding multiple resources. The Web Crypto API functions now have better interoperability with other implementations. Official support for ARM64 Windows has been added. Progress has been made in the implementation of the WebAssembly System Interface (WASI). Users are encouraged to try the new version and provide feedback. Node.js 14 will reach its end of life in April 2023, and users are advised to plan upgrades to Node.js 18 or 20. Node.js 16 will reach its end of life in September 2023. The Next-10 team is conducting a survey to gather feedback to shape the future development of Node.js.

Node.js 20 introduces an experimental permissions model that allows developers to restrict access to specific resources during execution.
Custom ESM loader hooks now run in a dedicated thread, ensuring no cross-contamination between loaders and application code.
Updates include V8 11.3, which brings performance improvements and new language features, as well as other performance enhancements in areas like URL, fetch(), and EventTarget.

Design#

Essential for B-end Designers: How to Systematically Understand Business #

This article analyzes how to quickly start working when facing new B-end business from four perspectives. First, research the industry and competitors to understand the position and competitors of the industry and product through industry reports and competitor analysis; second, understand the company's strategy to clarify the business development direction for which one will be responsible later; third, communicate with the business side to ensure understanding of requirements and reach a consensus; finally, iterate quickly by continuously optimizing designs through rapid prototyping and user feedback. These methods can help designers quickly familiarize themselves with the business and start working.

AI#

A Review of Collaborative Research Between Large Language Models and Knowledge Graphs: Complementary Advantages of Two Major Technologies #

Aejtvl

All You Need to Know to Build Your First LLM App #

This tutorial introduces the process of building chatbots using large language models (LLMs) and context injection. It discusses the need for LLMs to analyze unstructured data and the limitations of fine-tuning. The tutorial also introduces LangChain, a Python framework for LLM applications. The step-by-step tutorial covers the process of loading documents, splitting them into text chunks, converting them into embedding vectors, defining LLM and prompt templates, and creating vector storage. It also emphasizes the importance of agents in decision-making. The tutorial concludes with a summary of LangChain's purpose and the components needed for LLM applications.

Large language models (LLMs) enable us to process and understand unstructured data, which accounts for about 80% of data in companies.
By fine-tuning LLMs, we can adapt them to specific tasks, but through context injection, we can inject relevant context into prompts without modifying the LLM itself.
LangChain is a Python framework that supports LLM application development, providing components such as document loaders, text splitters, vector storage, and prompt management.

Others#

Docker Deployment of Free GPT4-FreeGPT #

I have recently seen many business projects related to "artificial intelligence." They all just send various data to the ChatGPT API, pretending to do something novel and impressive, while in reality, they are just trying to get venture capital as quickly as possible.

-- Hacker News Reader

I find that logic is useful when dealing with computers at work, but rarely useful when dealing with people.
In fact, for the vast majority of interpersonal interactions, logic, rigor, and debate are useless.

-- "Logic, Rigor, and Debate"

AgedCoffee