Hello friend! This article is a short tip about AWS that I conclude after having a time work with AWS. Let’s gaps a drink and go forward! VPC You only need to understand that VPC is a container that helps us config what IP addresses can access to our application. Let’s make a VPC! Please refer to here. Connect to a redis in elasticache! We are going to implement the follow below:...

Hello friend! Today we are going to review about cookies! Cookies On a website, the server sends cookies to the browser, after that browser uses it to access resources. We usually use cookies to build login features, shop carts, etc. In this article, we are going to learn about all stuff relating to cookies. Let’s gaps a drink and go forward with me! expire, max-age With expire property, we can set a deadline for our cookies, you can think like we talk to cookies:...

The most important thing in UI design is the hierarchy, to make UI more friendly, we have to make a hierarchy between elements. This article helps us for make hierarchy in UI without a design background. This article is inspired by Refactoring UI! You can refer to the orginal article in here. Let’s gaps a drink and go with me! emphasize typography When we want to emphasize text in the element....

Hi friend! Today! We are going to learn about css reset! This article is inspired by Josh, you can refer to the original article here. Let’s go! border-box Imagine that the parent element has width: 200px, and we set the child element CSS like below: width: 100%; padding: 20px; border: solid black 2px; Now, the child element width is 244px, and the parent element width is 200px. We end up with the size of the child element wider than the width of the parent element....

Sometimes, we don’t know why CSS doesn’t work as the way we expected. So understanding the core concept of CSS, we will figure out what’s going on in our CSS. outer and inner By default, the element has two formatting context: outer and inner. For example: display: flex. Based on the CSS above, we can write down the element behavior like below. outer: block formatting context. inner: flex formatting context....

Hello Friend! Today, we are going to learn about shadow in CSS! This article is inspired by Josh. You can refer to the original article. When use shadow? With the main concept, our goal is to make the element works like the natural word. Imagine that we have two elements on a page: header, dialog. The dialog position must be laid out higher more than the header element is. It means the dialog element seems closer to the user more than the header element....

We are going to make a 3D button, it’s so beautiful! We work through these requirements below. This article is inspired by joshwcomeau. You can refer to the original article. In this article, I use remix framework to demo for coding. First requirement Have a 3D button. When we hover the button move up. Add a transition for the button element. First of all, we need to make the HTML for our button....

In the natural world, the element moves gradually. It would be great if we can make our animation like the natural world. In this article, we will learn about transition in CSS. transition-timing-funcion linear This function is against our goal, it makes the element move straightly. ease-out This method makes the element move from fast to slow. It would be great if we apply this method to the modal element that appears after triggering a click event....

In this article, I’m going to learn about Github Action that helps us achieving Continuous Integration and Continuous Deployment in the project. Grab a drink and let’s dig in! What’s Github Action? Suppose that whenever you push the new code to GitHub, and you want to redeploy your app with the new code. push is an action that we told GitHub that Hey GitHub! Can you do these things for me?...

Why Cypress! We are working on a project that uses the Next.js framework. And in order to do unit tests for the project. We use Jest. Jest is so great! But when we want to test the unit page of Next.js, Jest feels a little bit harder to implement. Instead of using Jest, Cypress is an amazing selection for our goal. In this article, we’re going to figure some core concepts of Cypress....