seeliang

module.exports = {
  ...settings

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

seeliang

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 }

seeliang

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 

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

seeliang

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

seeliang

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 = () => {

seeliang

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.

seeliang

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.

seeliang

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