Tech Watch RSS Feed
All the articles I've selected.
How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
Published: at 08:53 AM(Lokman Musliu)Want to build a Chrome extension using the latest tech stack? This guide walks you through creating a Chrome extension with React, TypeScript, TailwindCSS, and Vite.
jaqt: javascript queries and transformations
Published: at 03:34 PMJAQT is a JavaScript library that provides SQL and GraphQL-inspired functions, Array.select() and Array.where(), for working with arrays and objects. It enhances the native Array.map() and Array.filter() methods by adding syntactic sugar for easier querying, without introducing a custom query language. This allows users to perform complex data transformations using plain JavaScript, making the code both powerful and intuitive. The library is lightweight and flexible, designed for scenarios where ease of use is preferred over performance improvements.
You Might Not Need an Effect
Published: at 03:24 PMThe article from the React documentation explains when it is unnecessary to use the useEffect hook. It provides common scenarios where developers mistakenly rely on effects and offers alternative ways to handle logic that don't involve useEffect, such as computing derived state or managing non-reactive values. The article emphasizes cleaner code and avoiding performance issues by using simpler React features instead of overcomplicating state management with effects.
Why You Should Start Using Zod
Published: at 08:01 AM(praca_praca)The article explains why Zod is a valuable tool for developers, especially when working with TypeScript. Zod simplifies validation, improves type safety, and reduces boilerplate code. It allows developers to define schemas and infer TypeScript types from them, making code easier to maintain and more reliable. The article also shows how Zod enhances developer productivity in scenarios like form validation and contract sharing between frontend and backend.
Replacing React code with CSS :has selector
Published: at 07:25 AM(Nadia Makarevich)The article explores how the new CSS :has selector can simplify React code by eliminating the need for complex JavaScript logic. It allows for targeting parent elements and handling UI interactions like focus states, form element conditions, and dynamic styling without relying on React's state or re-renders. The post provides examples where using :has improves accessibility, reduces unnecessary React components, and enhances performance.
What’s new in React 19
Published: at 07:17 AM(Michael Novotny)The article highlights new features in React 19, such as improved server components, better support for streaming, and enhancements to the transitions API. It also discusses changes aimed at simplifying state management and improving performance, like the new useEvent hook. Additionally, React 19 introduces experimental features like the useCache hook for handling asynchronous data more effectively. These updates focus on enhancing the developer experience while pushing performance optimizations for modern web applications.
React and FormData
Published: at 07:12 AM(Brad Westfall)The article explores how React developers can use FormData, a JavaScript standard, to handle form data in both controlled and uncontrolled components. It covers how to avoid using refs and directly extract form values, while discussing challenges with TypeScript compatibility. The piece also introduces tools like Zod for schema validation and highlights how modern React APIs, especially in version 19, integrate with FormData, with examples from frameworks like Remix.
A beginners guide to using Vite with React
Published: at 01:45 PM(Arnab Chatterjee)A beginner's guide to using Vite with React. Covers setting up a new project, explaining Vite's benefits like fast server start and hot module replacement, project structure overview, working with assets, and basic troubleshooting. Highlights Vite as a modern, efficient alternative to traditional bundlers for React development.
Advanced CSS Grid Techniques
Published: at 01:42 PM(Ridoy Hasan)The article discusses advanced CSS Grid techniques, including using grid areas for named layouts, auto-placement for automatic item positioning, and the minmax() function to set flexible track sizes. It also covers the differences between auto-fill and auto-fit for responsive grids and how to combine CSS Grid with Flexbox for layout alignment. Practical examples and code snippets guide users through creating dynamic, responsive layouts with ease.
CSS Grid - A Deep Dive
Published: at 01:38 PM(Ridoy Hasan)The article provides an in-depth explanation of CSS Grid, a powerful layout system for web development. It covers fundamental concepts such as grid containers, items, lines, tracks, and cells, and demonstrates how to define rows and columns, use fractional units, and control item placement. Practical examples include creating responsive designs, managing grid gaps, and nesting grids. The post also introduces features like auto-fit and auto-fill to enhance grid flexibility.