title: Week 23 of 2023
date: '2023-06-09'
tags: ['Weekly Study-2023']
draft: false
summary: ''#
This weekly report mainly summarizes and organizes content from various sources.
Technology#
The evolution of React APIs and code reuse#
This article discusses the evolution of React and various code reuse patterns, including mixins, higher-order components, and render props. It explores the underlying mental models that shape them, the trade-offs they bring, and the pitfalls of overusing them. Ultimately, the article concludes that having a clear and accurate mental model of the technology is key to mastering it, and a collective understanding of how things work helps create consistent visual and structural patterns in codebases.
Cloud Music Low-Code + ChatGPT Practical Solutions and Thoughts#
The front-end team of Netease Cloud Music has integrated LLM into its low-code platform to enhance user experience. The AI Copilot feature allows users to create, modify, and configure components using natural language and generate code snippets. Additionally, the team has developed a question-and-answer system based on LLM to provide a better user experience. The platform, based on a source code-driven low-code development system, enables flexible and efficient development. The team also emphasizes the importance of embracing the open-source community and mainstream ecosystems in low-code product design. The author believes that LLM will have a significant impact on work and life, and exploring and applying these changes is crucial.
The origin private file system#
The File System standard introduces the Origin Private File System (OPFS) as a storage endpoint that is privately owned by the page's origin and invisible to the user, providing an optionally optimized way to access special files. OPFS is supported by modern browsers. Traditional ways of handling network files do not align with how users think about editing files, meaning that users end up with downloaded copies of input files. The File System Access API introduces three picker methods that make modern handling of network files smoother. Files and folders accessed through these methods exist in a file system visible to the user. Files saved from the network, especially executable files, are marked with a web badge, allowing the operating system to display additional warnings before executing potentially dangerous files. The origin private file system is not suitable for user viewing and is private to the site's origin.
HTML's Graphical 3D Future#
Lume is a project that provides a set of HTML elements for 3D rendering, built on top of three.js and using a responsive and templating system supported by Solid.js to define new custom HTML elements. Lume allows developers to use all the capabilities of HTML/CSS today within a 3D space, with additional graphical capabilities and accessibility for 3D content. Lume also provides a system called Lume Element for defining custom elements. The article mentions other features built on top of Three.js by Lume and provides more details about the Lume roadmap.
Software 2.0#
- Neural networks represent a fundamental shift in the way software is developed, presenting a trend towards software 2.0 written in an abstract and less understandable language trained on data.
- Porting complex programs to the software 2.0 stack has many advantages, including computational homogeneity, simple integration in silicon, and the ability to tackle real-world problems with large datasets.
- Google is at the forefront of this shift, focusing on rewriting most of its components into software 2.0 code and merging statistical strengths into a consistent understanding of the world.
Neural networks are not just another tool in the machine learning toolbox; they represent a fundamental shift in software development towards software 2.0, which is written in an abstract and less understandable language and relies on data and neural network structures to determine desired behavior. As more complex programs are ported to the 2.0 stack, this shift is happening within the industry, and it has many benefits, including computational homogeneity and ease of implementation in silicon. Examples of this shift include visual recognition, speech recognition and synthesis, machine translation, games, and databases.
Building a magical AI-powered semantic search from scratch#
- Building AI-powered semantic search has become easier and more accessible with the advancements in large language models and OpenAI's completion API.
- To index content, article chunks need to be transformed into embedding vectors, store these embedding vectors in a database, convert user queries into embedding vectors, and compare them with the stored embedding vectors using cosine similarity.
- To ensure the most relevant results are returned for a given query, a higher cosine similarity threshold of 0.85 is used, and OpenAI's completion API is leveraged with manually crafted prompts to provide accurate and accessible responses.
In this article, the author builds an AI-powered semantic search for their blog using OpenAI's large language model and Supabase's pgvector database. The project involves indexing blog content, transforming it into embedding vectors, and storing them in a database. The author explains what embedding vectors are and how they work, including using cosine similarity to determine similarity between sentences. The article also covers using OpenAI's completion API to get human-readable search outputs.
Tools#
react-unity-webgl#
React Unity WebGL provides a modern solution for embedding Unity WebGL builds into React applications, along with advanced APIs for bidirectional communication and interaction between Unity and React.
bundlejs#
An online tool for quickly bundling and compressing your projects and viewing the compressed gzip/brotli file sizes in a local browser.
taichi.js#
A JavaScript wrapper for webGPU.
eslint-plugin-perfectionist#
🦄 ESLint plugin for sorting various data, such as objects, imports, types, enums, JSX attributes, etc.
Updates#
HTTP Batch Stream Link#
The httpBatchLink is a terminating link that batches multiple tRPC operations into a single HTTP request sent to a single tRPC endpoint. It is used to reduce the number of HTTP requests sent and the number of database queries on the server. The maximum URL length option can be set to limit the number of requests sent in a batch. The batching functionality can be disabled on the server or tRPC client by replacing the httpBatchLink with the httpLink.
astro 2.6#
Astro 2.6 introduces several experimental features that are now stable and available for all Astro projects. These features include middleware, mixed SSR output mode, custom client directives, and CSS inlining. Middleware allows developers to run code before or after a page is rendered and returned to the user. Mixed SSR output mode combines interactive API endpoints and pages into a site while keeping the entire project static and pre-rendered by default. Custom client directives allow developers to define their own client directives, and CSS inlining automatically inlines small CSS snippets into HTML for faster page loading.
Others#
If you have originality, you can avoid competition. Basically, if you are competing with someone, it's because you are doing the same thing. If everyone does something different, competition can be reduced or even eliminated. So, don't imitate others.
-- Naval, renowned American venture capitalist