Sihui liang seeliang

add remote

git add remote-name remote-git-url

fetch

git fetch remote-name

checkout files

git checkout remote-name/branch-name -- path-to-folder-or-file

Updated on medium

find out the differences

use git diff to generate file list

git diff --name-only master

limited to certain file types

add ext filter

Write more readable code in angular 1

For the last few years, I have been working with Angular frame work for different products. Here are some solutions that benefit me in my maintaining progress Angular 1 code.

Use controllerAs instead of $scope for directives

By default, all the functions in directive are hooking with $scope. As long as the functions are inside the directive scope in HTML, the app would be functional.

// sample.js
var sample = () => {

Scalable styling with flat structure and BEM/SMACSS

Scalability of the code has become a major requirement for web development recently. In css development, scalability could be achieve with flat structure and BEM/SMACSS on top of Atom design and Style composition.

The concept of flat structure and BEM/SMACCS maybe alien to developers are working with inheritance styling code. but with overwhelming benefit, this scalable solution has be adopted by some advanced developers.

Flat structure

Here is a quick explanation why flat structure is a better solution for managing scalable development. To implement flat structure, component styling shall be equally treaded by two factors:

Selector: by class and class only
Level of selector: only base level selector, which means some css selecting rules like nesting and sibling shall be avoid.

Implementation of Atomic design

After spending a little more than a decade, and had worked with vast variety products and projects, personally, I think atomic design be a prefect fit for scalable / long-term development.

To avoid wast your time, I would to address that atomic design implementation could be a overkill for known short term projects (less than 6 months), as I mentioned before frameworks like bootstrap and foundation would do just fine

Implementation

Great, you are still reading.

In short, the implementation is a sorting process: Sorting components based on its atomic category.

Find me on medium

https://seeliang.medium.com

Style composition

Back in the good old days, when I started my career, styling was easy. You put framework on, modify a bit, all done. For short term projects, not a problem.

When I switched to building product / service, this approach led to large amount of technical debits in many cases

	module.exports = {
	...settings

	webpackFinal: async (config) => {
	const update = config
	update.module.rules.push({
	test: /\.(ts\|tsx)$/,
	loader: 'ts-loader',
	include: /node_modules/,
	options: {

	const ejs = require('ejs');
	const fs = require('fs');
	module.exports = ({template, config}) => {
	fs.readFile(template, 'utf8', (err, data) => {
	if (err) { console.log(err); return false; }
	var ejs_string = data,
	template = ejs.compile(ejs_string),
	html = template(config);
	fs.writeFile(template.replace('.ejs', '') + '.html', html, (err) => {
	if(err) { console.log(err); return false }

	if ! git diff-index --quiet --relative=src HEAD^; # with compare git diff target (HEAD^) and path (src)
	then
	echo has change;
	# run
	else
	echo no change
	fi