Today I’ll be helping you to step by step create an animated SVG circular progress component (a.k.a the ring progress) from scratch. If you are not using React, you can also apply it in a similar way. Here is the checklist:

  1. Create the circular background
  2. Create the circular progress
  3. Add label
  4. Add animation to the circular progress

Let’s get started!

Step 1: Understand the DOM layers & properties

Before jumping into the code, we need to understand the layers' structure and how it works. …


There are a lot of libraries, plugins out there for implementing pie chart, donut chart but they can’t fully support for what designers need so you need to create your own pie chart, donut chart to adapt that unique designs. Today, I will show you how to create many different variations of pie chart, donut chart in React using D3.js library.

Let’s get started!

Here is the list of features that we are covering by today:

  • Add labels inside Pie chart
  • Create a simple Donut chart
  • Add the gap/padding between Donut chart
  • Rounded…


Welcome back to my React series. Today I will show you how to build the Carousel, Slider, or Image Gallery component from scratch.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

If you’re not familiar with the carousel, you can take a look at the Bootstrap Carousel as a reference here.

Step 1: Understand the structure

Let’s figure out how the carousel works under the hood


2048 is a popular and easy-to-play game. This post will show you how to create this game from scratch which can apply in different programming languages with the foundation. In this post, I will be focusing on JavaScript to implement in ReactJS and React Native.

Here is the checklist for us to get it done:

  1. Init the game board
  2. Move the game board to the left
  3. Move the game board to the right
  4. Move the game board to the top
  5. Move the game board to the bottom
  6. Check win status
  7. Check game over


Bài viết này không nói về sáng tạo để tạo ra những ứng dụng triệu đô hay những sản phẩm vượt bậc thay đổi xã hội, thế giới vì bản thân mình hiện cũng chưa tạo ra được điều đó. Tư duy sáng tạo mình sắp nói tới đây là sự sáng tạo trong công việc để tạo ra nguồn cảm hứng, tạo ra những điều mới mẻ hỗ trợ cho môi trường học tập và làm việc của bạn.

Mình xin phép được kể câu chuyện của bản thân mình vì mình nhận ra việc tư duy sáng tạo…


Picture: unsplash.com/@neonbrand

Imagine you have an application in which users have some sensitive data and they may forget to logout, leave the session open and someone else can extract these sensitive data like a banking account, personal information, private messages,…

As a developer, you need to have a solution to protect our users when they are leaving for a while to drink water, to have a phone call, or to be in the restroom,…

This post is not only for React developers but also for others who are using other JavaScript frameworks because we will be focusing on problem solving with pure…


Mình có biết 1 câu chuyện ở 1 ngôi chùa nọ có 1 con mèo hay phá phách. Mỗi lần các sư thầy chuẩn bị tụng kinh thì con mèo nó lại đi vào phá làm cho các thầy không tập trung được. Thế là trụ trì liền bảo đệ tử của mình bắt nhốt con mèo vào lồng mỗi lần tụng kinh. Rồi vài chục năm sau đó, những đồ đệ ngày trước đã trở thành trụ trì ở những nơi khác nhau. …


Mình nghĩ nhiều người cũng từng có suy nghĩ này, đặc biệt là tìm kiếm cho mình “việc nhẹ lương cao”, “ngồi mát ăn bát vàng” hoặc những người lao thân vào cờ bạc, số đề, kiếm tiền bất chính chỉ mong có được nguồn thu nhập khủng trong thời gian ngắn.

Trước tiên mình khẳng định là KHÔNG CÓ CÁCH KIẾM TIỀN NÀO LÀ DỄ cả, cách nào cũng có 1 cái giá phải trả của nó hết nên nếu ai có tư tưởng đó thì cố gắng giữ chân trên mặt đất, đừng ôm mộng tưởng quá lớn…


If you are a frontend developer, I think you know that modal is an ubiquitous UI elements on the web. Today I will show you how to implement it from basic to advanced in React with the following steps.

  1. Add styling
  2. Handle show/hide modal
  3. Implement onClose event
  4. Close modal by outside click
  5. Close modal by Escape keydown event
  6. Add dynamic modal content
  7. Add animation to modal using CSS
  8. Add animation to modal using Transition Group
  9. Use portal to render modal
  10. Add submit button to modal

I’m assuming that you’re familiar with how to create a…


Giao tiếp là 1 trong những kỹ năng mình nghĩ là không thể thiếu nếu bạn muốn đạt hiệu quả trong công việc, học tập, đời sống xã hội nên hôm nay mình sẽ liệt kê 1 số lỗi giao tiếp thường gặp để nếu như bạn đang mắc phải thì hãy tập hạn chế nó lại nhé.

1. Muốn giao tiếp mà chỉ chào thăm dò

Mình hay gặp những trường hợp nhắn tin hỏi thăm, nhờ vả nhưng chỉ vọn vẹn kiểu “hi anh", “hi Thi" và không nói gì thêm kiểu như chờ mình trả lời rồi mới nói vấn đề thế nào. Nếu là đồng…

Thi Tran

I’m a software engineer. I love programming, writing & sharing. https://about.trandinhthi.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store