Chun Ming Wang

Mar 25, 2021

Sending data from a parent component to a child component in Angular

As indicated in this article, it is common to share data between a parent component, and one or more child components. One can implement this pattern by using @Input() and @Output() directives. However, the explanation for this pattern is NOT very clear. Here in this series of articles, I would…

Angular

2 min read

Angular

2 min read

Dec 26, 2020

A local PostgreSQL development environment based on Docker

Use the following steps to create the environment. For more information, please the article below the steps. :). (By the way, I use Ubuntu 20.04) Create a directory data in any directory you want. Create a Docker network using the following command. docker network create learning-postgreSQL-network 3. Create a container…

Docker

4 min read

Docker

4 min read

Oct 4, 2020

Run Sass Command Line Tool Without Node.js

You may be like me, who just want to learn Sass only. However, you find that it is not that easy to setup a system that can automatically transpile Sass files and automatically reload the browser when Sass, javascript or HTML files changes. At first, I thought I can only…

Sass

2 min read

Sass

2 min read

Mar 25, 2020

Small Traps in Setting a Local MariaDB Development Environment by Docker

Now it is time for me to begin to seriously learn a database. I know the theory of databases, but I lack of experience using a database. I used MS SQL before, but I know little about it. …

Mariadb

5 min read

Mariadb

5 min read

Dec 10, 2019

Anatomy of a Semantic-UI Template: Cover

The official document of Semantic-UI says little about learning how to use Semantic-UI. Examples are given, but they are code only. None of them are described in detail. I usually learn programming language by examples. Not only read the example code, but also write the example code from scratch. This…

CSS

4 min read

CSS

4 min read

Jul 26, 2019

A Docker Image for CSS Development Using Semantic-UI

You may not want to install Nodejs just for CSS development with semantic-UI. This simple Docker image is all you need. Features of this image are: 1. no need to install Nodejs locally 2. install semantic-UI locally The Dockerfile to create the image is: FROM node:lts-alpine RUN apk update && apk…

Docker

2 min read

Docker

2 min read

May 28, 2019

Responsive Navigation Menu

Here I would like to create a responsive menu. The menu is vertically stacked on small screens, and is a horizontal navigation bar on larger screens. When I tried to combine the two menus in the same file to achieve responsiveness, I found things got tangled. It is better to…

Web Development

3 min read

Web Development

3 min read

May 17, 2019

Center a Simple CSS Horizontal Navigation Bar Made by Using Float

For HTML code please see this article. The CSS code is * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #ccc; } nav ul { list-style: none; padding: 0; margin: 0; background-color: #444; text-align: center; /* step 4*/ overflow: auto; /* step 5*/ } nav li {…

CSS

2 min read

CSS

2 min read

May 16, 2019

A Simple CSS Horizontal Navigation Bar Using inline-block

The effect of every line of code can be observed using a simple Browser-Sync docker image. The HTML code for the horizontal navigation bar is as follows. <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a class="active" href="#">Tutorials</a></li> <li><a href="#">About</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">Contact</a></li> </ul> </header>

CSS

2 min read

CSS

2 min read

May 12, 2019

Simple CSS Vertical Navigation Menu

There is a great article that explains how to build a simple CSS menu in detail. However, I want to build my own and record each step in my own tongue. First of the first is to clarify requirements. Requirements are simple. The menu is a vertical menu on small…

CSS

2 min read

CSS

2 min read