All Posts

Fixing the Issue: Prop dangerouslySetInnerHTML Did Not Match
Adam C. |
Today, as I was updating the NextFeathers Repos on my local environment. I received a warning message stating “Prop dangerouslySetInnerHTML did not match.” Upon further investigation, I discovered that this warning is related to the Prism.js library, which is commonly used for syntax highlighting. There seems to be a discrepancy between the server-rendered HTML content and the content rendered on the client side, leading to this warning being triggered.
NextFeathers Repos Updates: Breaking Changes in Next.js v13 and Feathers v5
Adam C. |
In this blog post, we will discuss the recent updates made to the NextFeathers repositories. Specifically, we will focus on the breaking changes introduced in Next.js v13 and the upgrade from Feathers v4 to v5. These updates require attention and adjustments in order to ensure smooth integration and functionality.
Fixing Duplicate Meta Tag Issue in Next.js
Adam C. |
As a Next.js developer, it's essential to optimize the SEO of your web pages to ensure they rank well in search engine results. However, you may come across an issue where Next.js renders duplicate meta tags, causing potential SEO problems. In this blog post, we will explore the problem and discuss a solution to fix it when using NextFeathers, a popular Next.js setup.
Error Handling in Next.js: Handling 404, Server-Side Errors, and JavaScript Runtime Errors
Adam C. |
Error handling is an essential aspect of web development to ensure smooth user experiences and provide meaningful feedback when things go wrong. In this blog post, we'll explore how Next.js, a popular React framework for building server-rendered applications, facilitates error handling. Specifically, we'll cover handling 404 errors, server-side errors (500), and client-side errors caused by JavaScript runtime errors using the react-error-boundary package.
MongoDB addToSet: Simplifying Array Operations
Adam C. |
MongoDB is a popular NoSQL database that offers a variety of features to make working with data easier and more efficient. One of these features is the addToSet operation, which allows you to add a new element to an array field only if it does not already exist in the array.
How to Get 'Object this' Inside an Arrow Function in JavaScript
Adam C. |
In an arrow function, the this keyword behaves differently than in a regular function. In an arrow function, the this keyword is lexically scoped, meaning that it takes its value from the enclosing execution context. This is in contrast to regular functions, where the value of this is determined by how the function is called.
Understanding the 'this' Keyword in JavaScript: Anonymous Functions vs Arrow Functions
Adam C. |
The meaning of this in JavaScript can be a bit confusing, especially when using anonymous functions and arrow functions. When you use an anonymous function declared with the function keyword, the this keyword inside the function refers to the object that called the function. In other words, the this keyword is bound to the context of the function call.
Hide Anchor Ads When Scrolling To The Bottom
Adam C. |
Google Adsense's new Anchor Ads are getting better, for it no longer shifts the layout i.e., no more Cumulative Layout Shift(CLS.) But at the same time, it removes the dismissal button, so the Ads stay on the page bottom and overlay the footer beneath. I don't find the option to turn on the dismissal (close) button, but figured out the way to fix this by using some custom Javascript.
Key is Matter in ReactJS
Adam C. |
React's key point is 'state', and 'key' attribute is special and powerful. When a key changes, React will create a new component instance rather than update the current one, so the useSate will be called in the component.
Issue of Using  router as a Dependency in  useEffect
Adam C. |
Using "router" as a Dependency is useEffect is dangerous because it could cause an infinite page re-rendering. The better to fix this is using "Router" directly imported from "next/router"
Add Last Updated Date to the NextJS website Automatically
Adam C. |
For a constantly changing information site, it's better to display the last updated date on the website so that the visitors can have a better sense of the age of the data. Here are two ways to do it with NextJS.
Use SSM to Retrieve Both Parameter Store Parameters and Secrets Manager Secrets
Adam C. |
Today, I learned that we could use @aws-sdk/client-ssm to retrieve Secrets from the secret manager as well. That is called Referencing AWS Secrets Manager secrets from Parameter Store parameters.
Fixed the VIM Background Color on Mac
Adam C. |
I set the VIM background as dark color on Mac since I set it up, but recently it's changed to white. After some investigation, I found that the color files are missing.
Enable Security on Mongo DB With Remote Access
Adam C. |
By default, MongoDB has no enabled access control, so there is no default user or password. But you can only access it via Localhost. Here is my default setup after installation.
Notes of LAMP Setup on MacOS Monterey
Adam C. |
You probably don't need another tutorial about installing LAMP on MacOS, because there are tons when you Google. This post is pretty much the notes for me, but I am happy to know if find it helpful.
Issue When Upgrading aws-amplify/ui from 2.03 to 3.10.1
Adam C. |
My client's website is using AWS Amplify to handle the user log-in via AWS Cognito. As of aws-amplify-react@4.x.x, the Authenticator is not styled, so we had installed the aws-amplify/ui 2.0.3, and then imported the style from '@aws-amplify/ui/dist/style.css'. But it stopped working after updating to V3. Here is the solution.
NextJS in Maintenance Mode
Adam C. |
Everyone hates the server is down, but it happens sometimes. It's better you have a backup plan, that you can quickly switch to, but if not, at least you need to put the site in the maintenance mode, so your visitors won't be surprised by seeing the 404 or 500 error. In this article, I would like to show you how to put on a maintenance page quickly in the NextJs application.
Disable MongoDB Fulltext Stop Words
Adam C. |
If you don't want to use Stop Words in Mongodb's Fulltext search, you need to set the default language to "none" in the index. If you already created the index, you have to drop it, and then make the new one with "default language" to be "none".
Fix Node.js Port In Use Error
Adam C. |
Sometimes the Node.js application does not close itself when you close the IDE, then when you try to start the application later, it will not start because the port is in use. It's easy to fix, but you need to remember the command to find the process and then kill it. Why not add the "kill-port" to the script in the package.json?
Responsive Semantic UI Table
Adam C. |
Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.