Sign in

Father. Runner. Reader. Coder.


Continue from previous parts [ 1][ 2] in this part, we will go through a few advanced techniques to implement the infinite loading feature to get more posts from HackerNews and skeleton gradient animation to deliver the best user experience. Although there are Vue Plugins to support infinite loading, in this tutorial, we will build from scratch so that we could learn deeply through the progress. …


I’ve been involved with web development for more than 10 years. yet my story is a little bit unordinary. . From the beginning, I used WordPress to run content-based sites, so it may not be considered real programming works. Then I moved on with Zend Framework to build a sharing file service (like MediaFire). After that, I got hired by Yahoo! as a Product specialist before I’ve managed a startup team to built a Hulu clone site for the local market. (Btw, my startup has failed due to the bad business model). After that, I’ve tried others but still failed…

With a long history of development (and chaos), JS has some messy legacy that can’t be removed to keep the consistency but only improved by new features/functions. This leads to confusion for developers. The series has been written as notes for myself and others to comprehend these concepts and avoid bugs in development.

What is NaN ?

NaNis shorthand for Not A Number, specified in The IEEE Standard for Floating-Point Arithmetic (IEEE 754–2008) for floating-point arithmetic established in 1985. In Javascript context, it is a “property of the global object. In other words, it is a variable in the global scope.”. …

Recently, I’ve made a small investment in ETH cryptocurrency via a local exchange market. I would like to check my investment in my spare time and make a call to buy more or sell. Unfortunately, the exchange market doesn’t provide me a chart, but they just have simple APIs to keep tracking of the portfolio balance, and currently ask and bid price by local currency. As the result, it is quite annoyed to keep tracking the trend. Finally, I decided to write a basic price chart for my personal use (I’ve combined some APIs from the local exchange to included…

After building a very basic Single Page Application (SPA) from the first tutorial with VueJS 3, today we gonna continue to enhance the application. Our goals in this part are:

- Fetch more kinds of items from HackerNews (previously, the site just received only top stories) with mini navigation.

- Nowadays, dark mode is a first-class feature for almost every application, so we will equip it for ours either.

- Implement localStorage to save user preferences: the last selected topic, and dark/light mode

In every tutorial, I would try to explain in details why I use this but not that…

A simple explanations about javascript core concepts

Javascript is one of the most language for web development nowadays. It has a complicated history with both up and down trend, with many subsets, extensions … which could make beginners misunderstood the core concept behind this powerful language, and I am one of them. So, I decided to research and try to comprehend the fundamentals before go deeper with advanced tools such as frameworks or libraries. This post is more like my personal notes, which have been documented from many sources to have a clear and concise overview about Javascript. (Feel free to correct me if I wrote anything…

VueJS is rising as one of the most popular front end framework, compared with React (supported by Facebook) and Angular (from Google). Recently, it has been updated to version 3 with many new exciting features. In this post, we will explore the combination with VueX (state management) to handle 3rd party API. To make it simple for the learning purpose, our goal is just to receive the top articles from Hacker News and load it from the client side.

You can try the online demo here (updated to the latest version)

First of all we use Vite to scaffold…

Django is a powerful and robust framework, which enable us to build web applications rapidly. It supports many rich features out of the box, creating form is one of them. In order to create an upload image form with customize templates, just add some lines as below:

Create a model to store a basic user profile information

and a form to handle it

finally, customize the widget template (core/widgets/photo.html)

Recently, I need a new external hard drive to archive my data. As usual, I read some reviews from CNet, NewEgg, PcWorld … and decided that I will choose between Seagate or Transcend brand. Then, I went to the biggest shop for computer hardware in town. I stopped by the hard-drive area, and there was one pretty sale girl there. Actually, she was introducing products to two other guys. I stepped forward and listening either. She was talking about the Western Digital (WD) products, which weren’t in my wish list. Believe or not, I am a consistent guy, I asked…

Truong Phan

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