This weekly report mainly summarizes and organizes content from various places
Technology#
How to understand the jump-* keywords in the CSS step function?#
This article discusses the steps function and its parameters in CSS animations, including jump-start, jump-end, jump-both, and jump-none. It demonstrates how to use these parameters to create smooth animations and avoid frame skipping. It also provides solutions to minor glitches in previous animation examples. The article summarizes the differences between jump-* parameters and introduces their compatibility with various browsers.
- The "steps" function in CSS has two parameters, including "start" and "end," which can be used to skip the first or last frame of an animation.
- The "jump-" keywords in the "steps" function, such as "jump-both" and "jump-none," can be used to control the frames skipped in the animation and ensure all frames are displayed.
- Using the "jump-none" keyword can resolve issues with missing frames in animations, as shown in the Ant Design logo animation example.
Teleportation in React: Positioning, Stacking Context, and Portals#
This article discusses CSS positioning, stacking context, and how to avoid content clipping through CSS. It explains why Portals are needed in React and how they work. The article emphasizes that absolute positioning is not suitable for UI elements that should be positioned relative to the screen. It also discusses issues with stacking context and why the z-index CSS property does not always work. Finally, it explains how React Portal addresses these issues and how it works.
- CSS absolute positioning can break out of the normal document flow, but due to its relative nature and stacking context rules, it is not always the best choice.
- Stacking context determines the stacking order of elements when rendered on the screen and can be manipulated using the z-index CSS property.
- In some cases, using React Portal is necessary, such as escaping overflow or rendering elements outside the current DOM hierarchy.
Are you measuring what matters? A fresh look at Time To First Byte#
This article argues that Time to First Byte (TTFB) is not an accurate metric for assessing webpage loading speed. While TTFB can indicate connection establishment time, server response time, and network latency, it fails to capture the entire webpage loading process and actions after the first byte is received. Instead, the author suggests using more meaningful metrics, such as Core Web Vitals, to more accurately measure server or content delivery network performance for end users. However, in certain cases, such as measuring the time to download a single file from a CDN or server, TTFB remains a useful metric.
- Time to First Byte (TTFB) is not a good metric for assessing webpage loading speed because it only measures the time taken to receive the first byte of the response, not the actual time the webpage is usable.
- TTFB is still a useful metric for measuring connection establishment time, server response time, and network latency, but there are better metrics, such as Core Web Vitals, that can more accurately reflect server or content delivery network performance for end users.
- Loading a webpage in a browser is a complex process involving loading fonts, stylesheets, JavaScript, images, and other resources, parsing HTML, CSS, and JavaScript, and constructing a data structure representing the webpage content and its styles, all of which occur after the TTFB report.
Figma plugin for Storybook#
Storybook Connect for Figma is a new plugin that connects Storybook stories with Figma designs, making it easier for designers to stay in sync with production. The plugin accelerates handoff and UI review by comparing implementation with design specifications. It links stories with corresponding variants, identifies reusable components, and simplifies the design handoff process. Users can also use the Storybook plugin to review UI implementations with designers and check if the rendered UI matches the design. The plugin was developed by Jono Kolnik, Michael Arestad, Gert Hengeveld, Zoltan Olah, and Dominic Nguyen.
- Storybook Connect for Figma is a plugin that connects Storybook stories with Figma designs, helping teams compare implementation with design specifications and speeding up handoff and UI review.
- The plugin allows designers to check the functionality of components before use, identify already implemented design components during the design handoff process, and helps designers check if the rendered UI matches the design through the Storybook plugin.
- The plugin aims to create a seamless workflow by establishing persistent links between design and development components, integrating component-based tools like Storybook and Figma.
Why Vue KeepAlive cannot cache iframe#
Introduces the use of KeepAlive in Vue components and explains why KeepAlive cannot cache iframes.
Tools#
ai-jsx#
AI application framework for Javascript.
hyper-fetch#
BetterTyped/hyper-fetch is a fetching framework that enhances fetching capabilities through caching, deduplication, authentication, progress tracking, retries, and more, while supporting real-time data exchange. It features type-safe design and a user-friendly interface for seamless integration in browsers or servers.
unlighthouse#
Scan an entire website (on average) using Google Lighthouse in 2 minutes. Open-source, fully configurable, requiring minimal setup.
sniffnet#
An application for easily monitoring your internet traffic 🕵️♂️
veaury#
Use React in Vue3 and Vue3 in React, as perfectly as possible!
auto-animate#
A zero-configuration embedded animation utility that adds smooth transitions to your web applications. You can use it with React, Vue, or any other JavaScript application.
selecto#
Selecto.js is a component that allows you to select elements within a dragged area using mouse or touch.
Updates#
svelte4#
Svelte 4 has been released, bringing improved performance, developer experience, and website. This version reduces Svelte's package size by nearly 75%, decreases the number of dependencies, and enhances the authoring experience of Svelte. The official svelte.dev website has undergone a comprehensive overhaul, and Svelte 5 is in progress, which will be a rewrite of the Svelte compiler and runtime. Most applications and libraries compatible with Svelte 3 should be compatible with Svelte 4, and a migration guide is provided. This release is thanks to many Svelte maintainers and contributors, as well as community donations.
- Svelte 4 has been released, bringing updates that reduce package size, improve performance, and enhance developer experience.
- Svelte 5 is in progress, which will be a significant rewrite of the compiler and runtime, bringing more new features and performance improvements.
- The Svelte ecosystem has a strong community of maintainers and contributors who have contributed to these updates and improvements.
Nuxt 3.6#
Nuxt.js 3.6 has been released, bringing several new features and improvements. Updates include an SPA loading indicator, performance enhancements, fully static server components, better style inlining, animation control, automatic “static” preset detection, increased type safety, and built-in Nitro 2.5. Users of the framework are encouraged to upgrade.
- Nuxt 3.6 introduces a built-in SPA loading indicator, performance improvements, and fully static server components.
- Updates include better style inlining, animation control, and automatic “static” preset detection for static providers.
- Nuxt 3.6 also features increased type safety and the ability to upgrade to Nitro 2.5.
TypeScript 5.2's New Keyword: 'using'#
TypeScript 5.2 will introduce a new keyword called "using," allowing developers to handle any resources with a Symbol.dispose function when leaving a scope. The "using" keyword is based on a TC39 proposal that recently reached Stage 3, indicating it is about to join JavaScript. It is very useful for managing resources like file handles and database connections. The article provides code examples of using "using" to handle file handles and database connections, demonstrating how it simplifies code.
- TypeScript 5.2 will introduce a new keyword "using" for handling any resources with a Symbol.dispose function when leaving a scope.
- This is very useful for managing resources like file handles, database connections, etc.
- The "using" keyword can also be used with Symbol.asyncDispose to handle resources that require asynchronous processing, such as database connections.
[email protected]#
✋ vite@4.4.0-beta.1 has been released!
Beta documentation is at https://main.vitejs.dev
- ⚡️ Experimental support for Lightning CSS
- 🔼 esbuild 0.18
- 💜 And more features and fixes
Design#
2023 Logo Trend Report#
This article discusses the latest 2023 logo design trends based on an analysis of over 30,000 submitted logos. These trends include circular shapes, wordmarks, psychedelic and retro fonts, and the use of green and blue. The article also emphasizes the importance of understanding context and using tools like AI and inflatables cautiously. The author notes that while trends can provide direction, unlike fashion, designers should pursue originality rather than follow the crowd. The article promotes LogoLounge as a resource for designers to gain inspiration and explore trend reports.
- By analyzing trends in logo design, LogoLounge provides insights into emerging directions for brands.
- The use of AI and 3D tools in logo design is becoming increasingly common, but should be used cautiously with thought and context.
- The 2023 logo trend report highlights circular shapes, wordmarks, and various font styles, colors, and symbols.
Frosted Glass: Depth-based blur in CSS#
AI#
Creating a (mostly) Autonomous HR Assistant with ChatGPT and LangChain’s Agents and Tools#
This article discusses the use of large language models (LLMs) in enterprise applications, particularly in the HR field. The article highlights two recent papers that propose training LLMs to use chain-of-thought processes to derive answers rather than just outputting final results. The LangChain framework is introduced as a way to leverage this capability, where its agents and tools modules enable LLM-driven HR chatbots to break down tasks and utilize multiple tools to derive answers. The article provides examples of chatbots demonstrating LLM's ability to infer user intent from imperfect inputs and solve complex tasks using chain-of-thought processes.
- Large language models (LLMs) can enhance their problem-solving capabilities by leveraging chain-of-thought in decision-making processes and reduce hallucinations.
- LangChain's agents and tools modules can be used to leverage this emerging capability of LLMs and build enterprise applications, such as HR chatbots.
- Prompts serve as "guardrails" for LLMs to keep them focused, and LangChain's HR chatbot demonstrates the ability of LLM-driven applications to generate intermediate steps to arrive at final answers.
What it was like to spend a month using GitHub Copilot and why I plan to not use it (next month)#
This article discusses the author's experience using GitHub Copilot, a tool developed by Microsoft that provides real-time code suggestions. The author was initially impressed and felt more productive, but later noticed some less-than-ideal aspects, such as the tool generating messy and non-standard code. The author also expressed concerns about writing code they did not fully understand and discovering errors in production. They questioned whether this could be the future of programming and whether they were willing to program in this way.
- GitHub Copilot can generate real-time code suggestions, but users need to be cautious as the generated code may not always follow standard design patterns, or users may not fully understand the generated code.
- The tool can enhance productivity, but users may need to create more automated tests to ensure the generated code is correct.
- The author encountered an error in production due to not fully understanding the generated code, emphasizing the importance of carefully reviewing and understanding all suggestions before implementation.
Seeing the World through Your Eyes#
This article discusses a method for reconstructing the appearance of the human eye from images by calculating the pixel size of the cornea and using an approximate eyeball geometry. It trains a radiance field through eye reflections and uses 2D texture mapping to remove the iris. Eye pose optimization was also performed to improve results.
- By calculating the pixel size of the cornea in images, the eyeball geometry remains consistent in healthy adults, allowing for precise eye tracking.
- Texture decomposition is used in the reconstruction process to remove the iris while training a 2D texture mapping to learn the iris texture.
- Eye pose optimization is aimed at handling noise and improving performance during the reconstruction process.
Others#
2023 Developer Survey#
