In this post, we will learn how to fetch data from 3rd party API and show the result on the HTML page. This time, the data we will fetch is an image from Dog API which is very incredible. Without any further ado, let's get started! First Step Define the HTML. All…

If you’re a developer, you might find yourself tired after writing the same console.log() syntax to check your current variable value. Here are some ways to log your values faster. Create Log Function You can create this function on top of your JavaScript file, or create it in separate file if you want…

A guide on creating a simple API with Next.js — If you’re already familiar with React, you’ve probably heard about Next.js. It is a React framework built by Vercel. It provides us with an optional route out of the box, which means we can write our backend code with JavaScript. So let’s start creating our first API. Install Next.js Run this command…

For the past approximately one and half years of my adventure in exploring front-end development, I was already aware that there is this thing called state management, but I just started to learn about it very recently. As far as I know, there is Redux, MobX, Recoil, etc., but I…

A guide on how to create text animation with an animation library called GSAP. — I was working on revamping my portfolio website, and I wanted to make the animation feel fresh, so I decided to do some text animation with it. Here I want to share how I create this revealing text with an animation library called GSAP. 1. Initiate the project At this point, it is up…

Learn how to toggle color mode with Chakra UI. — Recently I just finished a challenge from frontendmentor.io, it is about displaying some data from API on the home page, and just one another page to go to the detail of each item, pretty simple. But my attention was attracted to one requirement that it needs to be able to…

After several times of trial and error, I finally able to add another option for login to my web app using GitHub OAuth, and in this tutorial we will learn how to make it. To be honest, I don’t really know how to implement it in vanilla JavaScript or other…

I didn’t plan to use any UI library like Bootstrap or others in my latest React project in the first place. But in the middle of the work, which is still in progress right now (which you could see here😝), I remembered Chakra UI and decided to just give it…

Previously, I rarely used async await in my JavaScript code, I always used the fetch method to get any data I needed, at first. After time went by, I started to look at it again and it turns out it’s not that hard to implement it. Here I’d like to…