This is a guide on how to install the sass compiler through node and npm.

Let’s use sass on plain HTML CSS and JS projects! | Gen Yap


  1. At package.json "script" add "css": "node-sass --include-path scss path/to/file.scss path/to/output.css", and "watch": "nodemon -e scss -x 'npm run css'"
  2. Now your setup has been done, enjoy. CSS uglify will be introduced in the bonus section of this article.

If you have no idea or setup failed, please follow the instructions below. If you still have problems with the setup, feel free to leave a comment.

Update: node-sass can’t process rgba(xxx,xxx,xxx,xxx) or rgb(xxx,xxx,xxx) , a trick on this is to initialize…

Real-time Strategy Game Sharing

I have spent 472.5 hours on this game. Some guides might help you to get better in this game and enjoy this game better. — kinng

We might have met in the game as of November or Kinng(old name). Yes, they are me.

This article will only share experiences, for really basic info about this game please have a look at Fandom-WIKI(as the WS dev group has a lot of minor changes released all the time, even the data there isn’t that accurate sometimes).

Also, I will do a game strategy sharing at the very bottom of this article. (new update)


  • People tend to finish games faster in fewer players game
  • More tech points…

Beginner Guide

Sharing 2 apps that make my life easier on Windows. Wox and Droplr.

In my opinion, Windows OS is not perfect yet as there are still some functions we could not call out by shortcut keys. It might seem fine to you, but I would like to say that shortcut keys can save time and increase your productivity. It has been months since I started to code and I found that there are two sections I could optimise my performance:

  1. quick switching and opening applications (Wox)
  2. a better screenshot (Droplr)


Wox is a python based application released on GitHub. Unlike…

Beginner Guide

A full guide to frontend beginners on building an online portfolio by editing existing templates and put it alive on GitHub.

Photo by Clément H on Unsplash

Hi there, this article will give you some ideas on how to create your portfolio as well as learning frontend development as a beginner. Editing the existing portfolio templates is a good exercise on mastering HTML and CSS skills, but it is recommended to try building a new portfolio from scratch.

For those who just want to create an online portfolio for getting better exposure in finding a job position, welcome to join this journey too!

In short, we will start by picking a template online, followed by editing it to our own styles, and finally, put it on our…

Beginner Guide

An article gives an introduction to beginners about frontend development.

created by Kinng on

Welcome to this article, I guess you might be not familiar to frontend developing, so you enter here. I will try my best to share everything I know to let you have a basic understanding of the elements of frontend developing and the relationship between all the elements.

What is front-end development?

Front-end development is the process of creating the client-side webpages and applications. For example, we open up and the page we see on browser is one of the client-side webpages. Also, the client-side webpages are usually not able to store data. …

Beginner Guide

Unlike the previous article doing 90% of words sharing, this article will use codes to show some features of TypeScript.

created by Kinng

The previous article shares about why TypeScript is becoming more popular and at the end of it, we installed TypeScript to our local machine. In this article, we will see some syntax which TypeScript inherits from JavaScript and some extra feature syntax which make TypeScript specials.


tsc file.ts --watch will automatically compile your ts file to js file every time you saved and it will show if any errors happen.

node file.ts or node file.js to execute the file.

JavaScript Syntax in TypeScript


Beginner Guide

TypeScript is getting popular these days. I believe every code beginner will get to know it is related to JavaScript during his or her code journey. This article will share to you what extra features TS gives us and how to write TS.

Created by Kinng

What is TypeScript?

In short, TypeScript is a superset of JavaScript which means it is a language built on JavaScript. The biggest differences between JavaScript and TypeScript is the additional static typed feature after the props.

const sum = (a: number; b: number) =>{
return a + b

Static Typed & Dynamic Typed Languages

Dynamic typed language will not check the properties of a variable…

Beginner Guide

A skill all senior developer know and junior developer should know.

Minimized code by Kinng

As a web developer, website performance is the first thing on the table at all time. People will tend to switch webpages if they need more than two seconds to load. The main idea of increasing website performance is to make the bridge of frontend, transferring and backend as smoother as possible. To explain this, let’s see the picture below.

Beginner Guide

This article discusses the deployment of codes on 4 different websites (GitHub, Netlify, Pythonanywhere, and Heroku) under 4 different situations for free.

Created by Kinng

Nothing is more exciting than putting your hard work online and share it to the world. In my journey so far, I have deployed nearly 30+ webpages online, some of them are just static webpages and some of them are webpages with more backend functions. In this article, I would like to share my experience with those who are not familiar with webpage deploying yet. Hope my sharing could give you some ideas to make your works live free.

What kind of webpage are you going to deploy?

This is the top thing you need to think and know before the rest happens. …

Beginner Guide

Are you a beginner who wondering which should you pick in your long coding journey? Here I am going to share the differences between them and how to pick.

code editors by Kinng

Picking a code editor is a MUST on the coding journey, no matter what language you are writing, a suitable code editor helps you to save time on checking errors and giving you hints. There have no such thing called the best code editor, only the most suitable editor for you at your current level. This article will not dive into all editor individually because there are tons of them in the market, instead, I will share my experience on picking.

Anyway, notepad and words can be used as code editors too…

OK, I know code editors… but what about IDE?

IDE stands for integrated development environment. Code editors…


Working hard on building myself to be a professional web developer and data analyst. Coding Python and JavaScript. GitHub:

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