A basic overview on TypeScript interfaces, types and enums

Photo by Luca Bravo on Unsplash

To understand TypeScript, we first need to understand what kind of problems JavaScript introduces.

Before TypeScript was a thing, JavaScript had no concept of type checking. It is a dynamically typed language. At one end you can declare a variable and have it store a string. On another end you can have it store a number. Let’s take a look at the following example:

While that is fine if you are writing a simple application, this can have its own implications. Let’s take a look at the following scenario:

Oh no! Normally, we won’t redeclare obj and set…


Photo by Manuel Peris Tirado on Unsplash

Alright, you probably have tons of articles talking about how covid changes things for them. For me, I am going to focus more as to how it affected my priorities in life and my friendships in general.


When you hear of Redux, the first thing you think of is probably the global store. That is right, but there are many ways in which Redux can be implemented within a project.

Today, we will mainly focus on Redux-Saga.


Before continuing on this tutorial, ensure you have reviewed/read part 1 before moving forward: Setting your own spring boot server via JDBC part 1 | by Michael Tong | Dec, 2020 | Medium

In part 2, we will talk about how to set up endpoints to perform crud operations, as well as the structure of the rest of the application.

To have some context as to how the application will be implemented, let’s take a look at the following image:


Photo by Markus Spiske on Unsplash

Have you ever figure out an idea for your own project and you finished building your UI but you just don’t know how to start up your own backend server?

Reading this article I assume you have mastered basics of core java before moving forward.

I will talk about how to get a spring jdbc project running on a pc. And this article will be talking about how to install all the required components onto your machine.


Photo by Phil Desforges on Unsplash

Reading from the title, you are probably thinking: why not use a 3rd party library to build the table and get the job done? Won’t it be more convenient to just use a library that has pagination and filter build in.

It depends on what you are trying to accomplish.

If your goal was simply to build a simple table with pagination built in, then feel free to use a library. …


Photo by Halacious on Unsplash

You have probably typed something in a google search bar and see suggestions coming up before you finish typing?

Yes, it is common these days but imagine not having the functionality in place? Won’t it be annoying to finish typing a key term that you know you will be using multiple times.

In this article, we will be talking about on how to implement the autocomplete feature in react.

To understand how to implement this, here are key components to remember:

  • understand condition that hide/show autocomplete
  • understand how to scroll on autocomplete items as user press up and down to…


Infinite Scroll With Photo Gallery in React
Infinite Scroll With Photo Gallery in React
Photo by kimi lee on Unsplash

To understand the context of what and how infinite scroll works, you can read the following article: https://medium.com/dev-genius/infinite-scroll-with-photo-gallery-in-vanilla-javascript-9dc1d3896cf7

This article is pretty much a react version of the article I just included. The focus of this article is to understand how infinite scroll works as well as how to display a loading indicator when images are being retrieved. By reading this article, I assume you have background and experience coding in react and javascript in general.

As mentioned in the article provided, we have to understand three things:

  • HTML that contains the images and a loading indicator
  • a CSS file…


Photo by Vincentas Liskauskas on Unsplash

Like most people in the world, you probably have a facebook account.

Have you ever wondered why as you scroll down along the main page you can see more posts popping up?

Today we are going to explain how that works with vanilla javascript, css and html.

To understand how all of these works let’s first understand how the whole application will be built all together. There are three components to this:

  • html that contains the images and a loading indicator
  • a css file that controls the animation of loading indicator and how big the images are
  • a javascript file…


What is CSS Grid and How Does it Work?
What is CSS Grid and How Does it Work?
Photo by Michael Dziedzic on Unsplash

Have you ever went onto a beautiful website and wondered why certain tables are aligned the way, or at least, be able to adjust as the user stretches or minimize the screen?

In CSS, there are generally a few ways to do it:

  • flex-box
  • CSS grid
  • media query

All these properties allow HTML elements to be ordered in a different horizontal/vertical format as well as adjusting its width/height according to the screen size.

Interesting right? Today we will go through CSS grid, which combines the benefits of what flex-box and media query offers.

What is CSS grid?

CSS grid is a layout method designed…

Michael Tong

Coding is nothing but a renovation of ideas through fundamental concepts. Stay sharp and stay hungry to learn!

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