This weekly report mainly summarizes and organizes 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 collaboration 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 method 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 standard foundation and unified API surface for server-side JavaScript will benefit developers, runtime creators, and enterprises 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 and eliminating noticeable delays.
- During development, Next.js automatically fetches and caches the next page's content 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, CSS 3D parallax effects 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 overtaken MySQL as 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 coexisting internally.
Understanding gRPC and RPC, and Mastering Debugging Elegantly#
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, substantial 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 in handling spaces 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 improves 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 have significantly improved Prisma's startup performance. The latest version, Prisma 5.0.0, is now available, encouraging users to upgrade. The upgrade may involve some breaking changes, but the impact is expected to 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.
- A more efficient JSON-based transport protocol and optimized internal structure have been introduced, resulting in faster startup times and reduced memory usage for Prisma Client.
- Prisma 5.0.0 is now available, bringing these performance enhancements and encouraging users to upgrade while being mindful 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.
- The 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 tools, 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 metal type, ensuring authenticity and accuracy in 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, converging data analysis directions through conjecture and verification to save 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, thus facilitating problem exploration and providing practical product and design strategy recommendations.
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 code questions and writes code for you by reading your entire codebase and code graph.
ChatGPT Exploration: Advanced Guide to Code Interpreter#
- The code interpreter cannot solve all problems for you at once and return satisfactory results. While it will self-correct during execution, it requires some appropriate guiding prompts when it fails.
- When it indicates that it cannot perform certain operations due to environmental constraints, you can try providing it with alternative solutions or steps to guide it (requiring some basic Python programming knowledge).
- The file upload feature of the code interpreter, combined with the image display capabilities of ChatGPT, further amplifies the capabilities of GPT-4. For example, data analysis, file format conversion, hypothesis validation, etc.
- 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 to your local machine in advance 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 analysis, while file format conversion tasks may fail due to excessive source file size, leading to 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 thought process, rather than copying the teacher's (or textbook'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.
Do not simply copy/paste others' words; express them in your own language. You might want to clearly mark which parts you understand and which parts you still have questions about or do not understand.
(3) Notes must be easily retrievable.
To maximize the utility of your notes (which also saves your time), they must be easy to retrieve. Write a title for each section and regularly organize a table of contents.
Unlike what many think, programming does not require mastering profound thoughts, but rather a certain degree of memorizing documentation to express our ideas clearly using fixed terminology.
-- "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 during my teenage years.