-
Listener Middleware
Streamlined a Redux application by consolidating logic into slice files, removing unused code, and setting up path aliases. Transitioned from Sagas to Listeners for simpler scenarios, focused on local storage interactions and reacting to dispatched actions. Additionally, removed unnecessary dependencies like redux-saga and reselect and created a custom Persistence class for typed local storage access… Read More
-
RTK Query
I transitioned my Redux application to use RTK Query for API calls. This reduced the need for selectors and simplified data management. While RTK Query is powerful, it has limitations like needing many endpoints for a single server and requiring complex TypeScript types for builders. Sagas are still used for specific cases like handling drag-and-drop… Read More
-
Emoji Typed Strings
This article discusses the author’s journey updating an emoji library for better integration with TypeScript and the challenges encountered when using emoji within an IDE. The author faced issues with their IDE not displaying emoji characters correctly when hovering over emoji strings. To fix this, they needed to cast the emoji strings as themselves. The… Read More
-
Slicing Drag & Drop
Separating Drag & Drop data into its own slice. Read More
-
Transitioning to createSlice
The blog post details transitioning to Redux Toolkit’s createSlice for managing async actions, including fetch operations, drag-and-drop, and abortable processes. It highlights a modular approach using custom action groups to streamline lifecycle management, reduce boilerplate, and maintain flexibility with Redux Saga for handling complex asynchronous workflows. Read More
-
Pullet Catcher
I worked on a Live Haul crew, transporting chickens in harsh conditions. The job was stressful for both the birds and workers, with unsafe practices, mistreatment, and constant exhaustion. After witnessing inhumane conditions, I eventually left for better job opportunities, transitioning from poultry work to a career in IT. Read More
-
React Glider
Smooth gliding animations for drag-and-drop in a React app. A reusable library (@CodeJamboree/glider) tracks positions and applies styles during drag operations. Keys for data identification and element references are crucial for the library to function. ForwardRef used to access element positions, and useLayoutEffect for post-paint calculations. Quirks with styling and Drag & Drop behavior addressed… Read More
-
Pragmatic Drag & Drop
Exploring Atlassian’s new library, “Pragmatic Drag & Drop”, which offers more flexibility for drag-and-drop functionality across platforms. After initial setup struggles, the library was configured to my needs. The result is smoother drag-and-drop with visual enhancements and easier implementation compared to my custom solution. The library’s modularity and built-in functionalities are commendable. Read More
-
Dragon Drops
Exploring the challenges of implementing drag-and-drop in React using Material UI and React DnD. A custom library to address these challenges was created, providing reusable components and hooks for managing draggable and droppable elements. The library offers flexibility and control over drag-and-drop behavior. Read More
-
Redux Saga Routines
This blog post explores the challenges of using the Redux Saga Routines library with TypeScript and presents a custom action builder solution as an alternative. The action builder provides a more flexible and type-safe way to create Redux actions, addressing the limitations of the Redux Saga Routines library. The post also discusses the process of… Read More