Sometimes I start with something that sounds tiny, and somehow it turns into a whole renovation. This time, it was Thucde.dev.

If you only glance at the homepage or a couple of dashboard screens, the easy reaction is probably: “ Looks like some nice UI polish. ” One of the biggest shifts is that the frontend no longer feels like a codebase living between two eras. Over just a few days, thucde.dev went through a pretty substantial set of changes:

There’s a subtle React bug many developers run into without realizing why. Looks completely harmless.

I avoided using GitHub Actions to deploy Node.js apps to Azure for years. Why? Because I simply couldn't get them to work. I would see "Build Succeeded" and "Deployment Successful" messages, yet the actual application would crash immediately upon launch. Today, I faced the same issue again. However, this time I had my AI companion to help debug. After several prompts and failed attempts, I finally found the root cause and a permanent fix. I’m sharing it here to save you the headache.

Array.prototype.reverse() mutates the original array. That’s fine in isolated scripts, but inside a React render it can lead to surprising UI, especially in React 18 Strict Mode (development) where React intentionally invokes render twice to surface side effects. Consider a parent passing an array as props:

I recently ran into an issue with MongoDB query that I took ~30 mins to figuring out - so I am sharing in case you are facing this at a time - because I didn't notice this, had this issue before even though I have been using MongoDB for a long time. --

As a software engineer in web development, how usually have you been using Postman for testing API endpoints? In my case, I use it sometimes, but Postman is a very strong tool to play with the APIs.  So, do you use secured endpoints that require some sort of authorization? How do you do on that?

In MacOS, you can create alias for long command for better typing and developing purposes! In this post, you'll know how. In this instruction, we will do "pn" for "pnpm" command.

You’ve Probably Seen Dynamic Images—You Just Didn’t Know It You might have come across dynamic images before without realizing that’s what they were.

If you've used the @googlemaps/places Node.js client library recently, you may have noticed it’s not keeping up with the latest Google Places API features—particularly the Text Search endpoint. While it’s convenient to rely on official libraries, sometimes they lag behind the actual REST API (Web Service). That’s exactly what happened to me. Rather than wait for updates or work around limitations, I decided to go straight to the source: the REST API  (Web Service) itself. In this post, I’ll show you how to build a TypeScript class that makes direct HTTP requests to the Google Places Text Search endpoint. By using REST, we get full access to the latest features, more control over the requests and responses, and a better understanding of how the API really works.

A compact example on how to detect if the OS is MacOS or others, which help for cases like to create shortcuts for web applications.   In React, since window is not available during server-side rendering or the initial render, it's important to access it inside a useEffect to ensure it's defined.  

While working on a feature that caches image data for the user's last searches, I ran into a limitation: localStorage caps out at around 5MB (and only stores strings). Not ideal when you're dealing with images or structured data. That’s when I turned to IndexedDB — the browser’s built-in, asynchronous, low-level NoSQL database.

I've been working with React for about 2 professional years but have never known about this until recent. Since I had a chance to apply this 'new' thing, I'm sharing now with you. I was trying to fix a defect that I was so unsure about how to fix it with the current implementation. That is, some of the inner components were not working as expected.

While I'm doing an extremely boring task, is not too complicated, but it repetitive and I have to do the same thing for many many of times. It took me a day to get half the work done. And it's... even prone to error . I'm implementing a feature that would change the whole Help page of an application. It is estimated (by me) to have almost 6 mds (man-days) for all the changes needed. 

In this short blog, you'll know how to use debounce lodash in React or Next.js applications. When handling user input in React, especially in scenarios like search bars or real-time form validation, it's common to run a function every time the user types. However, this can lead to excessive function executions, causing performance issues and unnecessary re-renders.

I think this is a small tip but would help you out when developing websites. I just faced it recently and it took me a while to figure out the issue. So, I hope this will save you some time next time when you see it. In case you haven't noticed, the space appears at the bottom of the image tag. If your image has the size of 200x200, then you, in some cases, may see that the actual frame that covers the image has the size of 200x2 XX - which XX is bigger than 0. And this number depends on several factors, it maybe the font size, font family, lineheight.

Learn how to create a folder tree structure in CSS with connected lines for nested lists. This step-by-step guide shows you how to style hierarchical lists using only CSS—no JavaScript needed! You'll know how to do it in 3 mins.

I'll show you a MUI-like circular progress with just TailwindCSS. In this tutorial, we'll show you how to create a sleek, Material-UI-inspired circular progress indicator using only TailwindCSS. Say goodbye to additional libraries and dependencies! We'll guide you through the process step-by-step, ensuring your progress indicator is not only visually appealing but also highly customizable. Whether you're a seasoned developer or just starting out, this guide will help you enhance your web projects with a modern, minimalist touch. Let's dive in!

If you find yourself in a situation where you've been tasked with building a change request, analyzed, estimated, and started working on it, only to realize afterward that it doesn't work as expected because what you're building relies on an outdated library that doesn't support upgrades and has many bugs, here's what you could consider: 1. Upgrade the library: Assess if upgrading the library to a newer version that supports the features you need and fixes existing bugs is feasible. This could potentially solve the issues you're encountering.

How to redirect to a page from Next.js POST router handler. Ok so I was struggling around this afternoon trying to figure out how can I handle the log-in callback from Google Identity for my next personal web application.

Let's say, you're implementing a feature that functions based on the browser's storage, such as local storage  or session storage . You manipulate the storage programmatically based on the feature's events and use that data in the storage to do something. However, you might run into an issue which you're not getting the correct storage data - in other words - you're getting outdated information. 

As React developers, we typically don’t need to worry about implementing web APIs, since this is usually handled by the backend team. However, there are occasions where it becomes necessary for us to take on this task as well. These situations may include: • Setting up an intermediary server

In React, as far as I know, we use a library to facilitate navigation between routes. This practice has been in place for a long time, even before I was familiar with React, and continues to this day, demonstrating its effectiveness and the benefits it offers. With React Router DOM, having around 9 million weekly downloads on NPM (including both existing and newly built websites) is a strong indicator of its quality and widespread adoption.

An Open Graph image is crucial for creating an appealing webpage. It can be configured both statically and dynamically based on data managed by tools like a CMS.  But with Next.js, you can push this dynamic capability even further. In older Next.js versions, it supports via a tag imported from next/head .

Markdown is a lightweight markup language used to format plain text. It was created by John Gruber in 2004 with the goal of making it easy for writers to create web content that is both human-readable in its raw form and easily converted into HTML. ChatGPT -  "what is markdown"

Let's get straight to the point right now - no more beating around the bush. To test React components with unit tests, we can use some popular tools that give you pretty handy ways to deal with.

If you're a developer, or a software engineer, or you just simply.. code, you probably have heard or been working on Unit Tests.  In the real-world case, if you work in IT field and you are the one who writes code, you may have to also write unit tests (UTs) for what you've done. There's a lot of tools, libraries that are helping us to write UTs, however, for some specific domains such as React components testing, it's still, be tricky 😭

If you're new to unit tests with Jest, especially in Next.js, and haven't figured out how to test the _app.tsx  or _app.jsx file yet. I'll show you a way. As we're using one of the features of a library called @testing-library/react - a very famous one with over 7M weekly downloads.

If you're really into Unsplash community, like photography and have something to do with React/Next.js, you may, sometimes, wish to have Unsplash photos integrated into your products/applications. Unsplash Developers API got your back! And it's FREE. 

Have you ever been thinking about how to publish a React Component to a registry such as NPM so that it can be installed and used by several projects but don't know how? I feel you, there were several attempts that I've been through this, but there was no luck. I was able to publish a component to NPM, but the component is not working properly.

While developing a new cool application, I figured out how to deal with BlurHash strings. If you have heard about this before, you may notice that passing the BlurHash string won't help with your image loadings. See below: In this example, we fetch the image data from Unsplash, with then Unsplash returns an object with images (including a blur_hash string for each), this app then decodes those blur_hash strings into image data (in base64 format), then shows them immediately in prior to the real image that still being loaded.

If React Strict Mode in development gets you into trouble in some cases, for example, you need a specific action to run only just once, but also don't want to lose the benefits of running the app in Strict Mode, I'll show you a way out! First, you may need to check whether the environment your app is running on, like so:

Next.js is full stack React framework that built on top of React. It makes building full stack web applications with React much more easier! Some features such as routing, route handling, data fetching... might be tricky with React. Next.js helps with those and more in a really simple manner.

Let's fix the Husky Git pre-commit hook failures on GitHub Desktop on Windows! First, if you are facing the same issue as mine, please try the following steps:

GraphiQL is boring? Here's the alternative. With this new tool, we no longer need to install additional package to display the GrapQL interactive playground, but we do it directly on the browser.

Hey, I just earned another React certificate of completetion on Udemy. It's for a course called " The Ultimate React Course 2024: React, Redux, and More " by Jonas Schmedtmann. This course covers a lot of practical information, from the basics to advanced topics. Although I had some prior experience with React, I found this course extremely useful. There's a bunch of stuff that you can't easily figure out through self-learning.

Redux has gained a reputation as a powerful state management tool for React and many other UI applications. While its popularity is undeniable, it's crucial to approach its usage with a discerning eye. Overuse or inappropriate application of Redux can lead to unnecessary complexity and hinder code maintainability. To ensure effective state management, it's essential to identify the appropriate scenarios for incorporating Redux. Here's a comprehensive guide to help you determine when Redux is the right choice for your project:

Have you ever faced an issue that your webpage fails to finish a request due to backend crashing or it's too long to respond, and the app just waits for it - which seems to take forever.  In JavaScript, from ES6 and later*, there is a built-in method that we can use to implement the timeout feature very easily, called Promise.race . Let me show you how.

How to automatically rename the ending HTML/XML tags on typing in VS Code. Cách để chỉnh sửa đầu và đuôi tên thẻ HTML/XML một cách đồng thời trong VS Code.

Shout out for my next certificate on Udemy - Understanding TypeScript! For a long time, I had solely been using JavaScript in my projects and practices, and it was just fine. However, it's time for me to learn and practice TypeScript (JavaScript, but typed 😄). It's amazing how it eliminates predictions and uncertainty.

I've just completed the course about JS on Udemy -  The Complete JavaScript Course 2024: From Zero to Expert! When I first learned JS, I didn't learn it correctly, just searched for it online, learned from several sources... This ended up I could do things, but not to do it with good practices and know why it is what it is.

While enhancing my capabilities in JavaScript/TypeScript and React. I has been practicing what I learned as an effective way to memorize things and how it could be used to solve the practical problems.  It is a next.js application, pretty small, but I think it's good enough to apply the advanced knowledge in it.

Have you ever wondered if you could or should use a JavaScript syntax that you think might break on older browsers? Well, worry no more! Whenever you want to verify if you can or should write something that you believe is not fully supported, you can head over to the Can I Use website. It helps developers see if a specific web technology is supported by different web browsers.

Create an array with n elements in JS. Create an array with n elements filled with zeros in JS

There are seven primitive data types in JavaScript : 1. Number :  Floating point numbers, such as let price = 10; . Integers like 10 can actually be 10.0, so they are so-called floating-point numbers instead of just number.

Have you ever spent ages crafting the perfect blog post, only to see it shared on social media with a blurry thumbnail or completely the wrong image? We've all been there. Those tiny previews can make a huge difference in click-through rates, and a bad one can leave your amazing content hidden in the social media abyss. But fear not, content warriors! Today we're diving into the world of social media debugging tools. These handy helpers will ensure your carefully chosen visuals shine through on every platform, from Facebook to Pinterest. Get ready to transform your social shares and watch those clicks soar!

In database terms, a transaction is a collection of database operations that represents a unit of work. A transaction lifespan refers to the period of its initiation and completion, and includes the entire sequence of operations that make up the unit of work:

Normalization is the process of converting a database design into a standard format. The conversion is done into a normal form - which is the standard of designing a database. Designing database following the normalization could help with some benefits:

First, you need to get the ID of your to be embedded short video, this is what you can easily extract from the sharable URL from Youtube, for example  Then, replace your video's id inside the below snippet, feel free to update the title as well.

Some photos taken at the company new year update 2024. It was great attending the quarterly update at the New World Saigon Hotel today, my second time there this year. Looking back on the company's progress, new initiatives, and upcoming events was truly inspiring. Excited for what's ahead!