This weekly report mainly summarizes the content from various places
Technology#
Beyond Browsers: The Long-Term Future of JavaScript Standards#
JavaScript, as the most popular programming language, has expanded beyond browsers and is now used in server-side and embedded JavaScript runtimes. The ECMAScript standard for JavaScript is primarily driven by the needs of browsers, but with the rise of server-side JavaScript, there is a greater need for cooperation and compatibility between different runtimes. The W3C's WinterCG community group aims to address cross-runtime interoperability between browser and non-browser runtimes. They hope to create a standard specification for JavaScript runtimes that can be customized based on specific needs. This standardization will enable developers to write code once and run it across different server-side runtimes. WinterCG is also developing a list of minimal common Web Platform APIs to ensure consistency in the implementation of Web APIs across various runtimes. Additionally, a proposal in TC39 introduces a way called async context to simplify code tracing in server-side environments. The goal is to create a universal JavaScript that can be used simultaneously for both client-side and server-side across multiple servers.
- JavaScript is expanding beyond browsers, with server-side runtimes like Node and Deno playing a key role in its evolution.
- The WinterCG community group aims to promote cross-runtime interoperability and coordinate the development of a common API for server-side JavaScript environments.
- Adopting a standardized foundation and unified API surface for server-side JavaScript will benefit developers, runtime creators, and businesses that rely on these runtimes.
A Visual Guide to Prefetching in Next.js 13#
This article discusses the concept of prefetching in Next.js 13, a technique that speeds up web page loading by preloading content in the background. Prefetching predicts user behavior and proactively loads expected pages or parts of the site, allowing content to be displayed almost instantly when requested. During development, Next.js automatically prefetches routes based on application navigation, providing a seamless experience. In production builds, routes are prefetched when they are visible in the viewport, ensuring instant transitions between pages. The article also mentions how to disable prefetching for specific links and how to programmatically prefetch routes. Overall, prefetching in Next.js 13 optimizes web page loading speed and creates a smooth navigation experience.
- The prefetching technique in Next.js 13 is a proactive loading method for expected pages or parts of the site, allowing content to be displayed almost instantly, eliminating noticeable delays.
- During development, Next.js automatically fetches and caches the content of the next page based on user interactions, providing a seamless performance preview.
- In production builds, Next.js prefetches routes when they are visible in the viewport, ensuring quick transitions between pages when users click links.
Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images#
This article explores creating stunning 3D effects for images using CSS techniques. The author demonstrates three different effects: CSS 3D shine effect, CSS 3D parallax effect, and CSS 3D rotation effect. The CSS 3D shine effect adds a shine animation and slight rotation to the image on hover. The CSS 3D parallax effect creates a sense of depth by slightly sliding the image and changing the perspective on hover. The CSS 3D rotation effect rotates the image along the y-axis, creating a 3D effect. The author provides detailed explanations and code examples for each effect.
- CSS can be used to create stunning 3D effects for images, such as adding shine animations and rotations on hover.
- By using CSS masks and gradients, a fake shine effect can be created on images without additional markup.
- By combining rotation, translation, and clipping path properties, a CSS 3D parallax effect can create the illusion of depth and motion.
Comprehensive Comparison of Postgres and MySQL (2023 Edition)#
According to the 2023 Stack Overflow survey, Postgres has surpassed MySQL to become the most respected and desired database. This article compares Postgres and MySQL in terms of licensing, performance, features, scalability, ease of use, connection models, ecosystem, and operability. Overall, Postgres has more features, a more vibrant community and ecosystem, while MySQL is easier to learn and has a large user base. It is also common for organizations to have both Postgres and MySQL coexist.
Understanding gRPC and RPC, and Mastering Debugging Gracefully#
gRPC is a modern open-source high-performance RPC framework developed by Google that can run in multiple development environments. Compared to HTTP API interfaces, gRPC uses a leading HTTP/2 underlying architecture design as its transport protocol, suitable for large-scale data transmission and microservices architecture scenarios. It uses a lightweight Protobuf serialization protocol for data exchange, providing faster data processing speeds, reducing data volume, and saving network bandwidth. The RPC protocol is an implementation method for remote procedure calls, used to invoke processes between different servers via network communication. gRPC successfully hides the complexity of internal communication, providing developers with a stable and unified interface suitable for distributed systems of microservices.
Tools#
bruno#
Bruno is an open-source IDE for exploring and testing APIs. It uses a pure text markup language called Bru to store information about API requests and supports collaboration using git or other version control tools. It can run on multiple platforms and provides a website, documentation, and support.
article-extractor#
Web article content extraction
Updates#
Prettier 3.0: Hello, ECMAScript Modules!#
This article announces the release of a new version of the Prettier code formatting tool. Updates include migration to ECMAScript modules, significant changes to Markdown formatting, notable improvements to the plugin interface, and various bug fixes. Changes to Markdown formatting include the removal of spaces between Chinese or Japanese characters and Western characters. The plugin interface now supports asynchronous parsers. The release also includes improvements to space handling for Chinese, Japanese, and Korean, as well as changes to the default value of trailingComma. The article also mentions the removal of Flow syntax support from the Babel parser and the removal of support for Flow comments. Finally, the article introduces a pure CSS parser and provides examples of formatting changes.
- The new version of Prettier enhances the development experience by migrating all source code to ECMAScript modules and introducing several formatting improvements and bug fixes.
- The Markdown formatting in Prettier has changed, no longer inserting spaces between Chinese or Japanese and Western characters, following official guidelines.
- Plugin developers should be cautious when upgrading to the new version, as the plugin interface has undergone significant changes to support asynchronous parsers and ECMAScript modules.
Prisma 5: Faster by Default#
Prisma is a popular database ORM tool that has made significant improvements in startup performance. The latest version, Prisma 4.8.0, focuses on enhancing Prisma's performance in serverless environments. Improvements include a more efficient JSON-based transport protocol, reduced CPU and memory overhead, and a smaller JavaScript runtime with optimized internal structure. These changes significantly enhance Prisma's startup performance. The latest version, Prisma 5.0.0, has been released, encouraging users to upgrade. The upgrade may involve some breaking changes, but the expected impact will be minimal. Prisma is committed to further improving performance and will continue to release updates.
- Prisma 4.8.0 focuses on improving startup performance, especially in serverless environments, significantly enhancing Prisma's performance.
- The introduction of a more efficient JSON-based transport protocol and optimized internal structure allows for faster startup times and reduced memory usage for Prisma Client.
- Prisma 5.0.0 has been released, bringing these performance enhancements and encouraging users to upgrade while being aware of some breaking changes.
Announcing typescript-eslint v6#
TypeScript-eslint v6 is a tool that enables JavaScript tools like ESLint and Prettier to support TypeScript code. The new version brings several significant changes and features. Users need to update to the latest version and replace previous packages. Configuration names have been redesigned with separate configurations for functionality and style rules. The enabled rules in preset configurations have also changed. Some rules have been modified or removed. There are also significant changes in tooling, including dropping support for Node v12 and v14. The minimum supported TypeScript version is now 4.2.4. This version also includes improvements for developers, such as a type checker wrapper API for using TypeScript syntax in ESLint plugins.
- typescript-eslint v6 introduces redesigned configuration names and recommended configurations for functionality and style rules, making it easier to enable linting in TypeScript projects.
- Preset configurations have been updated, including changes to enabled rules and options, requiring users to update their ESLint configurations accordingly.
- This version also includes significant changes to certain rules and tooling, providing improvements for developers, such as a type checker wrapper API for using TypeScript syntax in ESLint plugins.
Design#
Elstob a variable font for medievalists#
This article discusses the Elstob font, which is based on a 17th-century typeface used by the Oxford University Press. The font has several variable axes, including weight, optical size, grade, and italic. Each axis can be adjusted to create different variations of the font. The article provides detailed information about each axis and its range of values. It also mentions that the font is designed for Old English language and literature.
- The Elstob font is a digitized version of a historical typeface commissioned by the Oxford University Press, with different sizes and variations for weight, optical size, grade, and italic.
- The variable axes of the font allow for dynamic adjustments of weight, optical size, grade, spacing, and italic, providing flexibility for web designers and users.
- The design and features of the Elstob font are based on historical samples and type, ensuring authenticity and accuracy when replicating the original typeface.
How to Conduct Affordable Experience Measurement Practices - Insights/Views - UICN User Experience Design Platform#
This article introduces how to conduct affordable experience measurement practices, including methods such as layered comparisons and cross-comparison matrices, as well as preliminary assumptions and later validations in practice, to converge the direction of data analysis through conjectures and validations, thus saving resource investment in analysis. Finally, through specific practical cases, it demonstrates how to break down business goals into experience goals, identifying specific core paths that need attention within the experience goals, thereby facilitating problem exploration and providing practical product and design strategy recommendations to the business.
Invisible Details of Interaction Design#
This article discusses the scientific principles behind interaction design and explores the importance of metaphors, dynamics physics, sliding gestures, responsive gestures, and spatial consistency in creating excellent user experiences. The author emphasizes the need for a good balance between form and function in design and highlights the role of intuition and instinctive behavior in interaction design.
- Interaction design is an art form aimed at creating seamless experiences by understanding human intentions and using metaphors from the real world.
- Excellent interaction design leverages gestures and physics to create intuitive and responsive user interfaces.
- Spatial consistency is important in interaction design, establishing relationships between different elements and providing clarity for users.
AI#
Cody#
Cody answers coding questions and writes code for you by reading your entire codebase and code graph.
ChatGPT Exploration: Code Interpreter Advanced Guide#
- The code interpreter cannot solve all problems for you at once and return satisfactory results. While it will self-correct during execution, it requires you to provide appropriate guiding prompts when it fails.
- When it indicates that it cannot perform certain operations due to environmental constraints, you can try to provide alternative solutions or steps to guide it (a basic understanding of Python programming is needed).
- The file upload feature of the code interpreter combined with the image display capabilities of ChatGPT further amplifies the capabilities of GPT-4, such as data analysis, file format conversion, and hypothesis validation.
- The sessions of the code interpreter are time-sensitive, and the temporary memory opened will be destroyed after timing out. Therefore, please download the output resource links in advance for backup to avoid loss.
- The temporary memory space opened by the Python interpreter is limited, and executing complex time-consuming tasks is likely to fail. It is more suitable for tasks like data processing and data analysis; file format conversion tasks may fail due to excessive source file size, causing memory overflow.
Others#
Three principles can help you take effective notes.
(1) Notes must align with your thinking style.
Take notes in a way that reflects your own thought process, rather than just copying the teacher's (or book's) explanations verbatim. This not only makes it easier for you to write but also helps you understand your thoughts better when reviewing your notes later.
(2) Notes must represent your knowledge.
Notes should not merely copy/paste others' words but express them in your own language. You might want to clearly mark which parts you understand and which parts you still have questions about.
(3) Notes must be easily retrievable.
To maximize the utility of your notes (and save your time), they must be easy to retrieve. Write a title for each section and regularly organize a table of contents.
Contrary to what many think, programming does not require mastering profound thoughts, but rather a certain degree of memorizing documentation to express our ideas clearly using certain fixed vocabulary.
-- "Programming Requires a Breadth of Knowledge"
After a night of tinkering, the AutoBangumi configuration finally got up and running.
https://zhuanlan.zhihu.com/p/641701649
The role of creative leadership is to cultivate more leaders, not followers. I hope this perspective becomes more widespread.
When someone disagrees with your viewpoint, do not defend yourself. Instead, listen. Ask them to explain and validate their concerns, further expanding and affirming their viewpoints. Only then will others be willing to listen to anything you have to say. I wish someone had told me this truth during my teenage years.