Best of Theo - t3․gg — 2024
- 1
- 2
Theo - t3․gg·2yA Very Exciting New Chart Library
Shaden has released a new chart library that promises ease of use and powerful customization options, built on top of technologies like D3 and Recharts. The setup process is straightforward, involving just a few commands, and the library includes numerous pre-configured chart types and components. Users can easily integrate and customize these charts to suit their needs, making it a versatile tool for developers looking to enhance their projects with dynamic data visualizations.
- 3
- 4Theo - t3․gg·2y
MarioKart.js Blew My Mind (Open Source + React + ThreeJS)
A developer has recreated the classic multiplayer game Mario Kart using react and threejs, and the project is now open source. The game utilizes react 3 fiber, a wrapper for threejs that simplifies 3D rendering in webgl. The code is easy to read and understand, and the developer has included additional open source projects related to gamepad control and cart physics. The camera in react 3 fiber allows for easy manipulation of the game's viewpoint. The project also incorporates the use of libraries such as zustand for managing game state.
- 5Theo - t3․gg·2y
A new browser I'm actually hyped about
Zen browser offers a fast, beautiful, and private browsing experience built on top of Firefox. It's highly customizable with features like integrated proxy settings, split views, and extensive theme support. Open-source and community-driven, Zen provides users with flexibility and performance enhancements that set it apart from other browsers.
- 6
- 7
- 8Theo - t3․gg·2y
UI Libraries Are Dying, Here's Why
UI libraries are dying as the future of web development shifts towards generating custom component libraries using tools like Shaden UI and VD. These tools allow developers to easily build and customize UI elements within their own code base, providing a more flexible and powerful solution.
- 9Theo - t3․gg·2y
I can’t believe they built this in React
The post explores the creation of an interactive 3D badge for the Vercel Ship 2024 event using React 3 Fiber, an advanced tool for rendering 3D elements in React. It breaks down the tech stack, including Blender for model preparation, React, React 3 Fiber, and React 3 Rapier for physics. The guide covers setting up a 3D environment, integrating physics, and handling user interactions, offering readers a comprehensive look into developing interactive 3D components on the web.
- 10
- 11Theo - t3․gg·2y
Why Everyone Loves Zustand
Zustand is a state management library for React that simplifies state management with a small and efficient API. Unlike Redux, Zustand reduces boilerplate and offers a React hook-based solution. This post dives into using Zustand to refactor an application named Teemo, demonstrating how to instantiate and access state in a more straightforward manner. Zustand's advantages include its small package size, ease of setup, and ability to prevent unnecessary re-renders by selecting specific state slices. The post also briefly touches on the author's experiences with state management in a more complex app and comments on the use of context and middleware.
- 12Theo - t3․gg·2y
It's Better To Be Late
Many developers feel pressured to keep up with new technologies to avoid falling behind. Historical examples, such as early mobile game development, suggest that jumping on trends too quickly can be a disadvantage. Following genuine interest rather than fear of missing out may lead to better success. It's often more beneficial to wait until a market or technology has matured before investing significant time and effort.
- 13Theo - t3․gg·1y
Tailwind just broke a TON of websites...
Tailwind CSS recently faced an issue where custom text selection colors broke in the latest version of Chrome (131). This problem arose due to changes in Chrome's handling of CSS variables and selection properties. Although quickly addressed, the incident highlights the complexities of web development and browser compatibility, emphasizing the need for cautious use of advanced CSS features. Fixes include using specific Tailwind settings or waiting for Chrome updates.
- 14
- 15Theo - t3․gg·2y
React Removes `fetch`
React version 13 initially caused controversy by overriding fetch on the server, but the React team has now removed this feature. The automatic overriding of fetch improved performance by caching fetch calls within a single request. However, developers now have to manually wrap fetch calls in React Cache to achieve the same caching behavior.
- 16Theo - t3․gg·2y
React Just Changed Forever
React Conf made big announcements about React 19 and the open-sourcing of React Compiler. React Compiler is an experimental build-time tool that optimizes React apps, improving performance and simplifying code. It has already been used in production at companies like Facebook and Instagram. While React Compiler is still experimental, React developers are encouraged to try it out in smaller experiments to provide feedback and improve its stability.
- 17Theo - t3․gg·2y
RIP Redis?
Redis has changed its license, moving away from open source and implementing a new source available license. This decision has sparked controversy and disappointment among the community. It has also raised questions about the impact on companies using Redis and the viability of alternative solutions.
- 18Theo - t3․gg·1y
I might have a new favorite state manager...
Introducing xstate store, a new state management tool that offers a modern, lightweight approach combining the best features from libraries like zustand and Redux toolkit. It excels in type inference, separation of context and transitions, and provides an upgrade path from simple stores to more complex state machines. xstate store is also framework-agnostic, which simplifies logic separation from the UI layer.
- 19Theo - t3․gg·2y
My favorite browser is (kind of) dead
The post discusses the current state of web browsers, acknowledging that Chrome has largely dominated the market. However, it highlights a surprising resurgence of chrome-based browsers offering unique features, specifically focusing on the Arc browser. The author shares their mixed feelings about Arc, having initially disliked it, but eventually falling in love with its functionality after multiple attempts. Despite its loyal user base, concerns are raised about the future of Arc following the announcement of Arc 2.0, which suggests a pivot away from browser development. The post also criticizes the Arc team for not adequately addressing long-standing performance issues and questions the future of the browser, appealing for better user engagement and communication from its developers.
- 20Theo - t3․gg·2y
Don't Contribute to Open Source
Contributing to open source should be driven by real problems you encounter and understand, rather than as a means to get a job. Open source contributions demonstrate your problem-solving skills and involvement in the community, not just the act of contributing itself. Starting with issues and using projects you are familiar with is key. Setting effective goals in programming is important for growth and success.
- 21Theo - t3․gg·2y
Making The Fastest Website Even Faster (With Next.js)
McMaster's website is renowned for its speed, achieved through innovative prefetching and client-side JavaScript techniques, despite using older web technologies. A recent rewrite of the website using Next.js has made it even faster, showcasing the power of Next.js optimization techniques, including preloading strategies and efficient image handling. Key performance insights demonstrate that optimizing user experience isn't solely about the framework but understanding and addressing the needs and expectations of users.
- 22Theo - t3․gg·2y
React Native Just Got 550% Faster
React Native has significantly improved with a 550% performance boost, thanks to a new architecture in version 0.76. This update includes features like full support for modern React features, synchronous updates, and native modules, eliminating the need for a bridge between JavaScript and native code. Convex is recommended as a superior backend alternative to Firebase, simplifying backend development with minimal code.
- 23Theo - t3․gg·2y
How React Query Won
React Query is an async state manager that simplifies data fetching and server state management in React applications. It addresses the problems of repetitive code, data duplication, and lack of predictability in fetching data. With React Query, developers can easily fetch data, manage loading and error states, and sync server state with client state. It eliminates the need for complex state machines and provides a simple, intuitive solution for handling async operations in React.
- 24Theo - t3․gg·2y
Vapor: The Future Of Vue
View's Vapor mode is an alternative compilation strategy inspired by Solid that aims to improve performance by eliminating the use of virtual DOM. It allows for granular opt-in at the component level and reduces the runtime size. Solid, another JavaScript framework, also focuses on performance and uses a similar model based on signals for reactive updates.
- 25Theo - t3․gg·2y
BREAKING: jQuery V4 Is Here (YES REALLY)
jQuery 4 is finally in beta after 8 years of hard work. It includes bug fixes, performance improvements, and some breaking changes. Support for Internet Explorer less than 11 has been removed, but jQuery is still being careful with how this breaks things. Other browser support, such as Edge Legacy and older versions of iOS and Android browsers, has also been dropped. Deprecated APIs have been removed and the source has been migrated to ES modules. Trusted types in CSP and form data support in jQuery Ajax are some of the other notable improvements.