In this article, we will use session in Remix to build a login feature. The user now can log in and redirect to the home page. Let’s go forward! coding logic Before moving on coding step, we need to create the coding logic: Create a login route. Create a session util. Add action function in remix to login. Add loader function to check whether the user login or not. Create a login route First of all, we need to create a login route in Remix....

Cookie is useful for developing the website. We can make some features like shopping cart, banner, login, etc. In this article, we are going to make an example to know how to using Cookie in Remix! This is our requirements: By default, we show for the user banner content. If users want to hide the banner, they can click Hide button.. We will use Cookie to make the feature above....

One of the most difficult things with a frontend developer is UI. We don’t know how to make a good UI. So we usually have to buy the design from a designer. But sometimes, we want to do it by ourselves. In this article, we are going to learn the basic things in UI, we can use to improve our UI without a design background. Let’s go forward! space When we code a layout UI, we usually use margin, padding to add more space....

Today! We are going to make an example in Remix! This is the requirements: We can show list people. We can add a new people. We can delete a people. Whenever we add or delete a people, list people automatically change without reloading the page. First of all, we are going to make a flow that we need to do in order: Setup database model for application. Create a route people in Remix....

Imagine that we want to code an application for this requirements: We have a form to subscribe an email. We have to validate the inputted email. We also need to customize some behaviors of a form submitting: error, submitting, success. We need to improve accessibility for screen readers. Let’s do it quickly! Coding First of all, we need to create a Route in Remix: import {Form} from 'remix' export default function NewRoute() { return ( <div> <Form method="post"> <input type="email" name="email" className="emailInput" /> <button type="submit">Subscrice</button> </Form> <div> <h1 className="text">You subscribed!...

Hi friend! Today! We are going to learn about the detail package in remix-run! It’s so interesting, let’s go with me! Form There are two ways to submit a form in Remix: We use a form from the browser. We use a Form component from remix. So what differences between form and Form? TODO NavLink Imagine that we want to make a breadcrumb or navigation. Normal, we might want to determine what route is active?...

You are a frontend developer, you want to interact with the database in a easy way. In this article, we are going to learn about Prisma - a modern package that helps us work with databases. Let’s grab a drink and go forward! Prisma You don’t need to have a complicated setup to work with the database, using Prisma, you can easily interact with the database. Moreover, it works perfectly with typescript, Prisma supports full type for our database....

Hi friend! Today, We are going to learn how to make an responsive image in CSS! This article is inspired by Learn Responsive Design course, you can refer to the original article here. Let’s discover them! size control Imagine that we have an image with width: 360px, height: 720px, but the parent’s image has width: 300px. Notice that our image width overrides its parent width, of course, we don’t want to let it happen....

2021 has gone away but it’s worth looking back. Reviewing creates a big motivation for me, and it makes me keep going! In this article, I am going to talk about what I did in 2021. Let’s go, my friend! Habit I still believe the philosophy below. No matter where, no matter who you are, the habit you did build the person you will be. In 2021 I decided to do a lot of habits....

Hi friend! Today! We are going to look at remix-run a new framework! Remix The great job we can get is when learning remix, we can learn all of the stuff of the web: meta, header, request, form action. The more we know remix, the more we know how the web works. That’s interesting! Now grab a drink and Let’s dig in! fetching If you have used React for a long time, you are very familiar with the code below!...