This weekly report mainly summarizes and organizes content from various sources
Technology#
This article introduces the usage of the infer keyword in TypeScript. This keyword allows developers to extract and infer type information from existing code. Using this keyword, types can be extracted from an existing type or expression and can be used in scenarios such as conditional types, functions, and mapped types. The use of the infer keyword improves type safety and makes the code more efficient and clear. The article also emphasizes some considerations for using this keyword and provides some practical examples.
This article discusses the recently announced serverless storage solutions by Vercel, including Postgres, KV, and Blob. While these services provide a smooth workflow, they come at a high cost. The article suggests using WunderGraph as an alternative solution, which is free, open-source, and provides type safety, enhanced DX, and easy local development. The article provides a quick start guide on WunderGraph and explains how to use it to achieve Neon for PostgreSQL, Upstash for Redis, and Cloudflare R2 for blob storage.
Semantics and the popover attribute: what to use when?
This article discusses how the new Popover attribute in HTML allows adding behavior to elements without changing their semantics. The author explores different roles that can be used together with the Popover attribute, such as menu, dialog, and listbox, and provides examples of when to use each role. The article also explains the keyboard and focus expectations for each role and notes that the Popover attribute is experimental and not widely supported yet.
- React Server Components aim to achieve modern UX through a server-driven mindset, resulting in significantly smaller client JavaScript bundles.
- Server Components are not a replacement for Server-side Rendering (SSR), but when used together, they support fast rendering of an intermediate format that is then rendered to HTML using SSR infrastructure, enabling fast early hydration.
- Server Components introduce automatic code splitting, treating all regular imports in client components as potential code splitting points, allowing the client to fetch components earlier in the rendering process.
5 Lessons Learned From Taking Next.js App Router to Production
- Next.js 13's App Router provides several new features, including Nested Layouts, Server Components, and Streaming, and is the first open-source implementation that fully utilizes React 18 primitives.
- App Router has two caches, one on the client-side and one on the server-side, and it is important to understand how they interact.
- The Streaming feature allows displaying certain parts of a page earlier without waiting for all data to load.
- URL search parameters are not available in layout server components, and it is best to use them in the URL path.
- The normalized file structure of App Router brings many benefits, such as promoting the use of React primitives.
- Adopting new technologies like App Router can be challenging, but it offers many benefits.
Tools#
server actions for react
Others#
Start-up companies have a principle called "Minimum Viable Product," which means that a product can be released as long as it achieves the simplest runnable state, allowing the market to validate its viability.
I would like to propose the opposite concept called "Maximum Viable Product," which means that once the main functionality of a product is complete, it stops there and no longer adds new features. I have seen too many excellent software products continuously expand, with more and more features, until they become incredibly difficult to use.