Boost Code Maintainability with TypeScript API Fetch

🚀 New Article Published! If you work with JavaScript or build APIs, JSON is something you interact with every day — but most teams get it wrong in subtle ways that hurt performance and reliability. I just published a deep dive on efficient JSON usage in JavaScript, including: ✅ How JSON really works under the hood ✅ Performance pitfalls common in APIs and backend code ✅ Best practices you can apply today ✅ When to parse, stringify, and when not to 🎥 I also included an accompanying video for visual learners. https://lnkd.in/gUaz5w_S 🔗 Read here: https://lnkd.in/gvVeV443 Whether you’re a backend engineer, full-stack dev, or just want cleaner JavaScript — this one’s for you. Let me know what you think! 👇

𝐁𝐞 𝐡𝐨𝐧𝐞𝐬𝐭: 𝐇𝐨𝐰 𝐦𝐚𝐧𝐲 𝐨𝐟 𝐲𝐨𝐮 𝐤𝐧𝐞𝐰 𝐭𝐡𝐚𝐭 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬 𝐮𝐬𝐞𝐥𝐞𝐬𝐬? You can just type-cast variables and functions using comments in vanilla JavaScript. . . With JSDoc, you can assign types to... > variables > function return values > parameters You can use built-in types or even define your own. And when you're writing code, a decent IDE (e.g., VS Code) will offer autocomplete suggestions based on those assigned types. So... we don't even need TypeScript, right? !! 𝐖𝐑𝐎𝐍𝐆 !! While assigning JSDoc types is better than not doing so, it still creates a codebase nightmare. > The types are suggestions, not requirements. > The code isn't truly self-documenting. > Comments are not supplementary; they're basically required. If you can’t use TypeScript, then do the next best thing: use JSDoc. But if you 𝐜𝐚𝐧 use TypeScript… you probably should.

𝗧𝗵𝗶𝘀 𝗜𝘀 𝗔 𝗛𝗲𝗮𝗱𝗹𝗶𝗻𝗲 Should you use TypeScript in your Node.js project? Let's break it down. You get several benefits with TypeScript: - Static typing catches type-related errors at compile-time - Clear type definitions make your code easier to maintain - Advanced tooling features like auto-completion and refactoring - Better scalability as your codebase grows - Large ecosystem support with most Node.js libraries However, there are some downsides: - Initial setup can be complex - There's a learning curve for developers new to static typing - You need to add an extra build step to compile TypeScript to JavaScript - Some Node.js libraries lack complete type definitions Consider your project's size and your team's experience before adopting TypeScript. Source: https://lnkd.in/gS6ynFJJ

React wasn’t the problem. My fundamentals were. While working on a real-world project, I noticed a clear pattern. Most bugs and confusion didn’t come from advanced features. They came from skipping the basics. A few mistakes I corrected: • Using a state where simple props would do • Writing large components that were hard to maintain • Relying on frameworks without fully understanding React and JavaScript • Trying to optimize before identifying the real problem Once I focused on core fundamentals: • JavaScript basics • React data flow and component responsibility My code became cleaner, easier to debug, and more scalable. Frameworks help you move fast. Strong fundamentals help you build things that last. #ReactJS #FrontendDeveloper #SoftwareEngineering #WebDevelopment #LearningInPublic

#100DaysOfCode Day 45/100 Tonight I promoted some information for the weekend and emailed myself a bunch of resources. Big snow coming to New England :) The resources focused on suggested folder structures in React, some alternatives, and style guides for JavaScript from both Google and AirBnB. I also looked up some more suggestions for Cursor. So far, I’m finding that less complex functions in shorter files seem to net better results. I also risked the “Allow Everything” command in Agent mode and saw its capabilities and risks. It broke something :) One cool thing was running the complexity report on the scripts comprising the complexity report. Some functions were ridiculous, 50-350+ complexity. A few context windows got everything below 10 decision points per function. I’m almost done covering all decision points for my codebase. I want to use my test descriptions and function names to compile a larger list so that I can cover practically all iterations of decision point creation in JavaScript/React/TypeScript. That way I can write a test file covering ideally all possible use cases just to try my best to eliminate decision points that aren’t broken down into the complexity table. I also want to rebuild the breakdown table so that every decision point type is within its own header: - if, else if, ternary, catch, case, ?., ??, &&, ||, default params, loops of each kind, base, and maybe something else I’m forgetting I’ll then explore with restyling or adding in some filtering/sorting for the table in case users want to filter out less complex items. I have some more to do, but I really look forward to exhausting complexity. It’s a fun visual report that leverages ESLint and JavaScript syntax. Maybe I’ll look at cognitive too for good measure idk. Really trying to tackle architecture to make the right lintings an cursor rules. Exploring attributes like file size, function size, max statements, and how they can be enforced by ESLints is going to inform me on how I can best look at for an just understand what’s going on. Really looking forward to better understanding feature va share separation or concerns too, things like “unidirectional codebase architecture” and whatnot. Lots more to go. They can get back to just having ideas and running with them. No use going past the point of no return.

Most React beginners aren’t bad at React — they’re bad at thinking in data flow. They focus on: 1. Files 2. Folder structure 3. Hooks syntax But React doesn’t care about any of that. What actually matters is: 1. Where data lives 2. How it moves 3. Who owns the state Once you understand data flow, React suddenly feels simple. Components stop fighting each other. Bugs become easier to reason about. This mindset shift changed how I write frontend code. Be honest Did React start making sense for you only after you understood data flow? Or are you still stuck thinking in files? #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningToCode

Handling async operations properly is what separates beginner and advanced JavaScript developers. `AbortController` allows you to cancel in-flight requests instead of letting them waste resources or override newer data. If you're working with React, search inputs, or dynamic filters, this is a must-know API.

Mastery starts with the basics! I’ve just wrapped up a hands-on practice session building a Todo App using React and TypeScript. While it might seem like a simple project, the core logic behind it is what fuels complex, real-world applications. During this build, I focused on: State Management: Leveraging useState for dynamic data flow. Immutability: Mastering the Spread Operator [...] to handle state updates efficiently. Array Manipulation: Using .map() for rendering and .filter() to handle precise deletion logic. Type Safety: Integrating TypeScript to ensure robust data handling and catch errors during development. What's next? The logic for creating and deleting is solid, and I’m currently working on implementing a seamless Edit system to complete the full CRUD cycle! I believe that mastering these small building blocks is essential before scaling to enterprise-level projects. The journey of a thousand miles begins with a single line of code. Stay consistent, stay curious! SourceCode:https://lnkd.in/g6VFC2D5 #ReactJS #TypeScript #WebDevelopment #CodingLife #FrontendDeveloper #LearningEveryday #NextJS #JavaScript #DeveloperCommunity #BuildingInPublic

𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗶𝗰𝗸() 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 ?❓ While reading an open-source project, I came across extensive use of Pick in TypeScript. In this short blog post, let’s take a closer look at what Pick does and how it works. It is a built-in utility type in TypeScript that constructs a new type by selecting specific properties from an existing type. So let us say you are working with Product response from the API and to handle that created a type as shown below, 𝘪𝘯𝘵𝘦𝘳𝘧𝘢𝘤𝘦 𝘗𝘳𝘰𝘥𝘶𝘤𝘵 {  𝘪𝘥: 𝘯𝘶𝘮𝘣𝘦𝘳;  𝘯𝘢𝘮𝘦: 𝘴𝘵𝘳𝘪𝘯𝘨;  𝘱𝘳𝘪𝘤𝘦: 𝘯𝘶𝘮𝘣𝘦𝘳;  𝘥𝘦𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯?: 𝘴𝘵𝘳𝘪𝘯𝘨;  𝘪𝘯𝘚𝘵𝘰𝘤𝘬: 𝘣𝘰𝘰𝘭𝘦𝘢𝘯; } Now you need specific type for  • ProductPreview   • ProductCreate Instead of duplicating code you can create new types using the Pick utlity function as shown below, 𝘵𝘺𝘱𝘦 𝘗𝘳𝘰𝘥𝘶𝘤𝘵𝘗𝘳𝘦𝘷𝘪𝘦𝘸 = 𝘗𝘪𝘤𝘬<𝘗𝘳𝘰𝘥𝘶𝘤𝘵, '𝘪𝘥' | '𝘯𝘢𝘮𝘦' | '𝘱𝘳𝘪𝘤𝘦'>; Instead of creating a function you can pass it to function petameter directly also as shown below, 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘨𝘦𝘵𝘗𝘳𝘰𝘥𝘶𝘤𝘵𝘗𝘳𝘦𝘷𝘪𝘦𝘸(𝘱𝘳𝘰𝘥𝘶𝘤𝘵: 𝘗𝘳𝘰𝘥𝘶𝘤𝘵): 𝘗𝘪𝘤𝘬<𝘗𝘳𝘰𝘥𝘶𝘤𝘵, '𝘪𝘥' | '𝘯𝘢𝘮𝘦' | '𝘱𝘳𝘪𝘤𝘦'> {   𝘤𝘰𝘯𝘴𝘵 { 𝘪𝘥, 𝘯𝘢𝘮𝘦, 𝘱𝘳𝘪𝘤𝘦 } = 𝘱𝘳𝘰𝘥𝘶𝘤𝘵;   𝘳𝘦𝘵𝘶𝘳𝘯 { 𝘪𝘥, 𝘯𝘢𝘮𝘦, 𝘱𝘳𝘪𝘤𝘦 }; } 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨(𝘨𝘦𝘵𝘗𝘳𝘰𝘥𝘶𝘤𝘵𝘗𝘳𝘦𝘷𝘪𝘦𝘸({   𝘪𝘥: 2,   𝘯𝘢𝘮𝘦: "𝘗1",   𝘱𝘳𝘪𝘤𝘦: 29.99,   𝘥𝘦𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯: "𝘛𝘩𝘪𝘴 𝘪𝘴 𝘴𝘢𝘮𝘱𝘭𝘦 𝘱𝘳𝘰𝘥𝘶𝘤𝘵.",   𝘪𝘯𝘚𝘵𝘰𝘤𝘬: 𝘵𝘳𝘶𝘦 }));   Having a solid understanding of the Pick utility type is essential for every TypeScript developer. I hope you find this post useful. Thanks for reading. Video Link - in 1st comment ! #TypeScript #TypeScriptInterview #FrontEnd #FrontEndInterview

Building Strong and Scalable APIs with TypeScript and Zod 🚀 I just finished building a REST API focused on scalability and clean code, using a modern JavaScript stack. The goal of this project was to go beyond “Hello World” and build a solid structure, making sure the code is safe and the data is validated correctly. 🛠️ Main Technologies and Concepts: ✅ Node.js & Express: Fast and simple server setup. ✅ TypeScript: Static typing to avoid errors during development. ✅ Zod: Data validation to make sure only correct data reaches the controller. ✅ Global Error Handling: Custom middlewares to handle errors in a clean way. ✅ Bilingual Documentation: I created a full step-by-step guide (PT-BR/EN) explaining how the API was built. This project shows my commitment to clean code and good backend practices. Feel free to check the source code and documentation in the repository below. Feedback is welcome! 👇 🔗 Repository: https://lnkd.in/dg6r7Mb3 #nodejs #typescript #backend #api #express #zod #webdevelopment #coding #cleanarchitecture