-
REST API Paths
When naming REST API paths, it’s important to follow best practices such as avoiding file extensions, using HTTP verbs like GET, POST, PUT, DELETE, and placing variable names in the path. Proper structuring of endpoints helps differentiate between collections and singletons, like using /api/users for a collection and /api/users/123 for a specific resource. Relationships between… Read More
-
JWT Based Authorization
The author implemented JWT-based authentication in a Redux application. They used a separate refresh token to obtain new authorization tokens when the current one expires. They encountered challenges with token storage, header configuration, and state management within Redux. The author recommends using a custom middleware or listener to handle token refresh and local storage interactions.… Read More
-
Drag and Drop Reordering with RTK Query and PHP
Today’s work focused on implementing drag and drop functionality, improving error handling, and refining API endpoints. Key features include a new item creation dialog, item reordering, and enhanced error reporting with stack traces. Backend changes involved refactoring API methods, handling server-side item movement, and using appropriate HTTP status codes. Additionally, the frontend was updated with… Read More
-
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
-
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