TypeScript is a strict syntactical superset of JavaScript that adds optional static typing to the language.
Handling file uploads in a React app is straightforward, but things get more interesting when you need to filter for specific file types and parse their contents. I needed to create an upload button that only accepted JSON and YAML files, then read and displayed their contents in the browser. Here’s how I did it.
When I started working with Adaptive Cards in a React app, I wanted a way to dynamically load and style cards while keeping them flexible. Adaptive Cards provide a powerful way to render dynamic UI elements using JSON, but by default, their Markdown support is somewhat limited. To improve this, I decided to integrate markdown-it,
When I first encountered the “The inferred type of ‘meta’ cannot be named without a reference to…” message in Storybook, I was caught off guard. I wanted a quick solution that would keep my TypeScript checks happy and my Storybook setup running smoothly. After a bit of trial and error, I discovered a simple fix
I remember feeling puzzled the first time my TypeScript compiler complained about an imported .module.css file in my React code. Everything worked at runtime, but VSCode kept throwing red squiggles. To avoid confusion, I decided to create a quick fix that put an end to these errors. Cannot find module ‘./MyComponent.module.css’ or its corresponding type
I recently ran into an error in my Storybook environment that read: useNavigate() may be used only in the context of a component. It took me a moment to understand why this was happening, and I want to share how I solved it. Error: useNavigate() may be used only in the context of a component.
I’ve always believed that maintaining up-to-date API documentation is crucial for building reliable software. In my latest project, I wanted to integrate Swagger UI into my Express server, but with a twist—I needed the documentation to update automatically whenever I made changes to my API routes. After some research and experimentation, I discovered a workflow
As I began working on my latest React project, I realized the importance of incorporating voice input to enhance user experience. This feature allows users to interact with the app using voice commands, which can be particularly useful for accessibility and convenience. In this post, I’ll walk you through how I implemented voice input in
I remember the first time I worked on an application that needed custom 404 handling. I kept thinking, “There must be an elegant way to catch these errors and redirect the user to a stylish ‘Not Found’ page.” As it turns out, React Query and React Router together make this process feel quite intuitive, and
As a developer, I often encounter scenarios where I need to determine the type of media a URL points to before rendering it in my application. This could be crucial for optimizing user experience, ensuring compatibility, or simply for organizing content effectively. In this post, I’ll walk you through different methods I use to achieve
Progressive Web Apps (PWAs) are becoming increasingly essential in today’s web development landscape. With their ability to combine the best features of web and mobile apps, they’re a fantastic choice for modern developers. If you’re working with Vite and React, you’re already leveraging tools that emphasize speed and efficiency. Now, let’s make your app a
When working on modern web applications, performance is often a key concern, and images are a frequent culprit in slowing things down. Lazy loading images is one effective strategy to improve your app’s performance by only loading images as they are needed. However, handling situations where an image fails to load is just as important
Building a feature-rich web application often requires simple yet effective solutions. One such example is managing uploaded images in memory, specifically camera screenshots. Here, I’ll walk you through how to create an Express.js endpoint that stores and retrieves screenshots from memory. This setup is ideal when you want lightweight, temporary storage for uploaded files without