2023 - Twenty-Ninth Week

This weekly report mainly summarizes and organizes content from various places

Technology
Tools
Updates
- Storybook 7.1
Others
- How to Do Great Work
- Breaking Through Web3

Technology#

Software engineering: problem-solving and critical-thinking #

Software engineering is often misunderstood as merely coding, but it involves problem-solving and critical thinking. Engineers must first understand the problem and then use strategies like decomposition and pattern recognition to propose solutions. Critical thinking is applied during the design, implementation, and testing phases, considering factors like scalability and performance. Software engineering is about understanding problems, conceptualizing solutions, and applying critical thinking to ensure effectiveness. As the importance of software grows, engineers need to become excellent problem solvers and critical thinkers.

Software engineering is not just coding; it requires problem-solving and critical thinking skills.
Engineers must understand problems, conceptualize solutions, and apply problem-solving strategies to develop effective software systems.
Critical thinking is crucial throughout the software development process, from design to implementation and testing, to ensure efficient and high-quality code.

Introducing Flame graphs: It’s getting hot in here #

Flame graphs are a visualization tool used to identify code bottlenecks and understand code execution patterns. They are now available in the AppMap extension for VS Code and JetBrains editors. Flame graphs provide a hierarchical view of function executions, allowing developers to quickly identify time-consuming functions and optimize code efficiency. They reveal insights such as long-running queries, N+1 queries, and the impact of functions on overall performance. AppMap enhances flame graphs by highlighting defects in the application and demonstrating their direct impact. The tool also offers sequence diagrams, traditional dependencies, and tracing views.

Flame graphs provide a visual representation of code execution patterns, helping developers identify bottlenecks and optimize performance.
The color scheme of flame graphs helps developers understand different types of code, such as SQL queries, function calls, and external service calls.
AppMap makes it easier to identify and fix issues by highlighting defects in the application and showing their direct impact.

How React 18 Improves Application Performance #

React 18 introduces concurrent features that improve application performance. The main thread in JavaScript executes tasks one at a time, and long-running tasks can block others. A benchmark of 50ms is used to maintain a smooth visual experience. Total Blocking Time (TBT) and Interaction to Next Paint (INP) are metrics used to measure the impact of long-running tasks on performance. Traditional React rendering is synchronous, leading to delays and unresponsive UIs. React 18 introduces a concurrent renderer that allows non-urgent rendering to yield the main thread and prioritize more important tasks. The concurrent renderer can also pause and resume rendering based on user interactions.

React 18 introduces concurrent rendering, allowing non-blocking rendering and prioritizing more important tasks, improving application performance.
The concurrent renderer in React 18 can pause and resume rendering based on external events like user interactions to optimize user experience.
By using the startTransition function, developers can mark updates as non-urgent, further enhancing performance by prioritizing important tasks.

How to Iterate Over Object Keys in TypeScript #

This article discusses the challenges of iterating over object keys in TypeScript and presents several solutions. The author explains that using Object.keys returns an array of strings instead of a union of all keys, which can lead to issues when trying to access values on the object. They propose two main solutions: narrowing the type by converting keys to keyof typeof and using type assertions to check if keys actually exist on the object before indexing. The article also mentions generic function methods and wrapping Object.keys in a custom function. The author concludes that type narrowing is their preferred solution but acknowledges that other methods may be more appropriate in certain scenarios.

Iterating over object keys in TypeScript can be challenging due to the limitations of Object.keys, which returns an array of strings instead of a union of all keys.
Using keyof typeof for type narrowing or type assertions can help access object key values more safely and specifically.
While type narrowing is the simplest and often sufficient solution, isKey type assertions and generic function methods provide alternative ways to iterate over object keys in TypeScript.

5 Common Pitfalls with Server Components in Next13 (with examples)#

This article discusses common issues and solutions when using the App Router feature in NextJS 13. It highlights potential problems with using React Hooks in server components, using event handlers in server components, and directly importing server components into client components. The article provides solutions for each issue, including adding "use client" to enable familiar behavior, converting components to server components as needed, and using route changes to trigger re-renders.

The App Router in NextJS 13 replaces the Pages Router and introduces default server components, but there are some limitations regarding the use of React Hooks and event handlers.
Directly importing server components into client components can lead to fetch request issues and inefficient component behavior, requiring conversion to client components or careful composition of server and client components.
Server components do not automatically re-render on state or data changes, so they rely on route changes to trigger re-renders.

Writing CSS In 2023: Is It Any Different Than A Few Years Ago?#

This article discusses how the evolution of CSS has influenced the way we write CSS today. The author highlights several features that have had a significant impact, such as container queries, cascading layers, () and () pseudo-selectors, new color function syntax, and user preference queries. The author also notes that while these features have changed the approach to CSS, they have not yet been widely adopted in production environments or daily use. Overall, the article emphasizes the excitement and joy of writing CSS driven by these new features.

Features in CSS, such as container queries and cascading layers, have changed the way CSS is written, making it easier to create responsive layouts and manage cascading.
Pseudo-selectors like () and () are very useful for managing specificity and simplifying naming conventions.
The updated syntax for color functions in CSS, such as rgb() and hsl(), makes defining color values more convenient, eliminating the need to choose between different function versions.

Write Clean Server-Side React Code with Higher-Order Server Components #

React 18 introduces server components, but they come with some limitations that can lead to coupling and duplicated code. One approach is to fetch data at the page level and pass it to the consumer components, but this can lead to coupling. Another approach is to fetch data for each consumer component, but this can lead to duplication. A clear approach is to use higher-order server components that can fetch data and pass it as props to wrapped components. This allows for reusable and decoupled code. Examples and code snippets are provided for reference.

Server components in React 18 can lead to coupling and duplicated code, making data fetching and propagation challenging.
Fetching data in recent server components can help address coupling issues but may lead to multiple fetch requests and violate the single responsibility principle.
Using higher-order server components provides a clear solution by fetching data and passing it as props to wrapped components, whether they are server or client components.

Everything You Want To Know About Media Queries and Responsive Design #

This article discusses the application of media queries and responsive design in web applications. It explains how media queries apply CSS rules based on device characteristics, such as viewport width. Responsive design aims to optimize customized visual presentations for different screen sizes. The article introduces the concept of mobile-first design, emphasizing the importance of prioritizing mobile experiences during design and development. It also explains the difference between CSS pixels and device pixels, as well as how to create responsive layouts and handle non-rectangular displays. The article discusses breakpoints in media queries and how to use them.

Media queries allow for conditional application of CSS rules based on device characteristics, enabling responsive design and customized visual presentations.
Mobile-first design prioritizes designing and developing for mobile devices first, making it easier to adapt to larger screen sizes.
Breakpoints in media queries define points at which conditional styles start or stop being applied based on viewport size, helping to create responsive layouts.

JWTs vs. sessions: which authentication approach is right for you?#

This article discusses the differences between session-based authentication and JWT authentication in maintaining authentication state between API calls. It explains that session-based authentication involves creating and storing session records on the server, while JWT authentication involves sending a self-contained token to the client. The benefits of session-based authentication are its simplicity and reliability, but it may introduce latency and performance issues. JWT authentication can enable faster authorization and interoperability with external applications, but it lacks the ability to invalidate tokens or update information within them. The article suggests a combination of session cookies and JWTs for a balanced approach. It also mentions Stytch's session management product as a solution that offers customization options. Overall, the article emphasizes the importance of evaluating trade-offs between security and latency when choosing the appropriate authentication method.

Session-based authentication relies on server-side session records stored in a database, providing reliability but potentially introducing latency at scale.
JWT authentication can enable faster authorization and interoperability with external applications but lacks the ability to invalidate tokens or update authorization permissions in real-time.
Using a combination of session cookies and JWTs can strike a balance between performance and security, allowing for customizable session durations and reducing API calls for non-sensitive routes.

Tools#

jscodeshift #

jscodeshift is a toolkit for running codemods across multiple JavaScript or TypeScript files. It provides a runner that applies the provided transformations to each file passed to it and outputs a summary of how many files were transformed. It also provides a wrapper around recast, offering different APIs; recast is a tool for transforming AST to AST while preserving the original code style as much as possible.

driver.js #

Driver.js is a lightweight, dependency-free native JavaScript engine that helps guide users' attention on a page. It has no external dependencies, supports all major browsers, and is highly customizable. It can highlight any element on the page, create powerful feature introductions, add focus managers for users, and everything can be controlled via keyboard.

virtua #

A zero-config, fast, and lightweight (about 3kB) React virtual list and grid component.

react-content-font #

A React component that creates fonts only for the characters used on the page.

Updates#

Storybook 7.1 #

Introduced an in-app onboarding flow to make it easier for new users to learn and navigate the component workshop.
Added zero-config style support for popular libraries like Tailwind, Material UI, Emotion, and styled-components.
Includes API reference documentation, Vue 3 source code snippets, responsiveness improvements, a table of contents for UI documentation, and official support for Figma design plugins.

Others#

How to Do Great Work #

This article explores the process of discovering and pursuing great work. It suggests that to do great work, one must choose things they are naturally good at, deeply interested in, and have great potential for. The article emphasizes the importance of engaging in personal projects and cultivating curiosity and exploration habits. It advises individuals to learn enough about their chosen field to reach the forefront of knowledge and actively seek out gaps and unanswered questions. The article acknowledges the challenge of finding what to do, especially for young and ambitious individuals, but encourages them to take action, stay curious, and optimize for interest. It also emphasizes the importance of sticking to one's interests and not being swayed by external forces. Overall, the article argues that the key to doing great work lies in finding what deeply interests you and pursuing it with passion and curiosity.

To do great work, it is important to choose things you are naturally good at, deeply interested in, and have great potential for.
Learn enough about your chosen field to reach the forefront of knowledge and notice gaps that others overlook.
Follow your curiosity, joy, and desire to do something impressive, and be willing to take risks and embrace the oddities of work.

Breaking Through Web3 #

This article introduces the core concepts of Web3, including smart contracts, DeFi, DAOs, and wallets. The core idea of Web3 is that users own their data and assets rather than being controlled by internet companies. However, this also means that users need to take responsibility for managing their wallets and assets. The emergence of Web3 aims to address trust issues but also presents challenges in decision-making efficiency. Web3 may enhance human society but is unlikely to dominate the world entirely.