Tech Watch RSS Feed
All the articles I've selected.
Component testing in Storybook
Published: at 10:13 AM(Michael Shilman)The blog post on Storybook discusses how component testing integrates with Storybook. It covers the importance of testing UI components in isolation, using Storybook to document and visually test components, and combining it with popular testing frameworks like Jest and Testing Library. This allows for better debugging and ensuring that individual components behave as expected before integrating them into larger applications.
Never Call new Date() Inside Your Components
Published: at 04:34 PM(Kyle Shevlin)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.
Interface Segregation Principle in React
Published: at 04:31 PM(Alex Kondov)The article discusses the Interface Segregation Principle (ISP) in React, emphasizing the importance of creating small, specific interfaces or prop definitions that only include necessary data. The principle suggests avoiding components that depend on more data than they use, which simplifies testing and maintenance. The article also addresses issues like prop drilling and offers solutions such as using React context or component composition to avoid passing unnecessary data through components.
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.