title: Week 22, 2023
date: '2023-06-04'
tags: ['Weekly Study - 2023']
draft: false
summary: ''
This weekly report mainly consists of a compilation and organization of various content from different sources.
Technology#
Making animated tooltip with React and Framer Motion#
This article discusses how to create customizable tooltips in React using Floating UI and the Framer Motion library. It provides a step-by-step guide to building a basic tooltip and then adding animations and transitions to make it unique. The tutorial covers necessary edge cases such as positioning and resizing, and ensures that the tooltips are accessible. The author recommends using specific versions of the libraries to avoid potential issues. The generated tooltips can be further customized to fit the needs of developers.
Sharing WebSocket Connections between Browser Tabs and Windows#
This article discusses the concept of sharing WebSocket connections between browser tabs and windows to optimize resource usage and enhance the performance of web applications. By creating a shared worker that specifically manages WebSocket connections and facilitates their sharing across different browser contexts, we can make web applications more efficient and smooth. However, due to the accumulation of references over time, memory leaks can occur, making memory management a challenge. To mitigate this issue, we can leverage WeakRefs or send a special control message within the body of the onbeforeunload event handler.
Watch Out for Layout Shifts with ‘ch’ Units#
This article discusses how the combination of using 'ch' units and optimizing web font loading can lead to layout shifts on websites, resulting in lower cumulative layout shift scores. The author identifies and debugs the issue, resolving it by replacing 'ch' units with 'rem' units. The article serves as a cautionary tale, reminding developers to be mindful when using 'ch' units and emphasizing the importance of considering the impact of font changes on layouts.
How the Raycast API and extensions work#
This article discusses the development of the Raycast API, which is a macOS application, and how it works behind the scenes. The goal of the API is to allow developers to create extensions for Raycast that can be easily installed by users. The article covers various technical choices and trade-offs made during the development process, including the decision to use JavaScript as the primary runtime language and TypeScript as the primary extension language. It also discusses the challenges of rendering the user interface and the use of XPC for interprocess communication. The overall goal is to create a seamless user experience that makes extensions feel like first-class citizens within the application.
Tools#
privateGPT#
Deploy a locally hosted GPT for interactive question and answer interactions with documents.
tailwind-merge#
Merge Tailwind CSS classes to avoid style conflicts.
Updates#
rtk-v2.0.0-beta.0#
Includes updates to TypeScript types, improvements to entity adapters, and new features such as the ability to pass custom createSelector methods to entityAdapter.getSelectors(). This version also includes some significant changes, such as removing the object parameter from createReducer and createSlice.extraReducers. Other changes include updates to Redux core dependencies and support for ESM/CJS compatibility. The article also discusses the changes made in earlier alpha versions.
TailwindCSS supports text-balance#
https://github.com/tailwindlabs/tailwindcss/pull/11320
Adding a Python backend to a Next.js project#
TypeScript 5.1 release#
TypeScript 5.1 is now released! It includes the following features:
- Smarter undefined return function checks
- No restrictions between getter/setter types
- Improved JSX tag checking
- Linked editing for JSX
- @param fragments
- Faster speed
Design#
Error-Message Guidelines#
This article discusses the importance of effective error messages in digital product design and provides 12 guidelines for creating them. These guidelines are divided into three categories: visibility, communication, and efficiency. The visibility guidelines focus on making error messages visible and recognizable to users, while the communication guidelines emphasize the use of understandable language and providing constructive suggestions. The efficiency guidelines suggest that error messages should prevent potential errors and protect users' efforts and time. Overall, creating effective error messages is crucial for improving the usability and quality of digital products.