Tech Watch RSS Feed
All the articles I've selected.
Why is CSS-in-JS slow?
Published: at 04:26 PM(Corbin Crutchley)The article explains why CSS-in-JS can be slow, primarily due to how it handles style generation and rendering. Traditional CSS is parsed directly by the browser, but CSS-in-JS solutions often require JavaScript to generate styles, leading to delays in rendering as the browser must parse and execute JavaScript before applying styles. Some modern tools like PandaCSS or Vanilla Extract mitigate this by compiling CSS ahead of time, reducing performance issues. The article also highlights the trade-offs between different CSS-in-JS approaches.
How To Create An NPM Package
Published: at 04:17 PM(Matt Pocock)The article provides a step-by-step guide on how to create and publish an NPM package. It begins with setting up your project using npm init, which creates a package.json file to manage the project's configuration. You then write your code, ensuring it exports the necessary functions or modules. If you’re using TypeScript, you need to compile your code into JavaScript. The article also emphasizes the importance of adding metadata, managing dependencies, and versioning the package correctly. Before publishing, you should test your package thoroughly and create a README.md for documentation. Finally, the package is published to the NPM registry using npm publish.
The TSConfig Cheat Sheet
Published: at 03:29 PM(Matt Pocock)The TSConfig Cheat Sheet is a comprehensive guide to configuring TypeScript. It covers the base options, strictness, transpiling with TypeScript, building for a library, and building for a library in a monorepo. Some of the important points from this article are that es2022 is the best option for stability, and that you should use strict mode.
How to Use the useReducer Hook in React
Published: at 03:24 PM(Timothy Olanrewaju)The article on freeCodeCamp explains how to use the useReducer hook in React for managing complex state logic. useReducer is an alternative to useState, useful when state transitions depend on previous states or when multiple states are interconnected. The article covers the basics of reducers, how to set up useReducer with an initial state and actions, and compares it to useState. It also includes practical examples to help understand when and why to use useReducer.
Front End Interview Handbook
Published: at 02:57 PM(Yangshun Tay)The Frontend Interview Handbook is a comprehensive resource designed to help developers prepare for frontend job interviews. It covers essential topics like HTML, CSS, JavaScript, and algorithms, offering practice questions, tips, and detailed explanations. The handbook also provides guidance on how to approach interviews, what to expect, and how to present your skills effectively to potential employers. It’s a valuable tool for anyone looking to excel in frontend development interviews.
JS Dates Are About to Be Fixed
Published: at 02:47 PM(Iago Lastra)The article explains how JavaScript's new Temporal API, specifically the Temporal.ZonedDateTime object, resolves longstanding issues with date and time handling. Traditional JavaScript Date objects lose critical context like time zones, leading to inaccuracies. Temporal fixes this by accurately representing dates with time zones, handling Daylight Saving Time, and providing reliable date comparisons and arithmetic. This new API simplifies global time consistency in modern web development.
How to compose JavaScript functions that take multiple parameters (the epic guide)
Published: at 09:11 AM(James Sinclair)The article provides an in-depth guide on how to effectively compose functions in JavaScript that accept multiple parameters. It explores techniques such as function wrapping, partial application, and currying, which can simplify the handling of functions with multiple parameters. The guide begins by discussing the challenges of composing functions that require multiple arguments and offers solutions like wrapping functions to accept arrays of arguments. It then delves into partial application, where you pre-apply some arguments to a function, creating a new function with fewer parameters. This approach is particularly useful for customizing functions and creating more reusable code. Currying is another technique covered, allowing you to transform functions into a series of unary (single-argument) functions, further simplifying their composition.
Swapy
Published: at 08:57 AMSwapy is a framework-agnostic tool that enables drag-and-swap functionality in web layouts with minimal code. It allows developers to easily convert any layout into a drag-and-drop interface by specifying slots and items using simple HTML attributes. Swapy supports various frameworks like React, Vue, and Svelte, and provides options for customization, including animation styles and event listeners to track swaps. Installation is straightforward via package managers or CDN.
Good Refactoring vs Bad Refactoring
Published: at 03:11 PM(Steve Sewell)This is an article about good versus bad refactoring. It discusses what refactoring is and the importance of doing it well. The article also details several common pitfalls to avoid, such as changing coding styles too much or adding unnecessary abstractions. Finally, it offers tips for successful refactoring, including being incremental, understanding the code deeply, and using testing tools.
Why I Don't Like Enums
Published: at 02:32 PM(Matt Pocock)The article explains why the author dislikes using TypeScript Enums, citing their inflexibility and poor compatibility with modern JavaScript features like objects and literal unions. Enums can introduce confusion and make code less predictable. Instead, the author recommends using alternatives like objects or union types, which offer better clarity, maintainability, and alignment with JavaScript's evolution.