DEV Community: Nguyen Thien Ly

Synthesis about git

Nguyen Thien Ly — Sun, 03 May 2020 08:09:23 +0000

Synthesis about git

New key word

synthesis: tổng hợp
nature: bản chất

Remote

To add a new remote, use the git remote add command on the terminal, in the directory your repository is stored at.

The git remote add command takes two arguments:

A remote name, for example, origin
A remote URL, for example, https://github.com/user/repo.git

For example:

$ git remote add origin https://github.com/user/repo.git
# Set a new remote

$ git remote -v
# Verify new remote
> origin  https://github.com/user/repo.git (fetch)
> origin  https://github.com/user/repo.git (push)

Branch

1. Branching off (copy)

$ git checkout -b <new_working_branch>

2. Listing branches

$ git branch

3. Switching branch

$ git checkout <branch_name>

4. Remove branch on local

$ git branch -D <branch_name>

5. Remove branch on remote

$ git push --delete origin <branch_name>

Status

$ git status

Diff

show status change each file

$ git diff

If files have added (committed), use

$ git diff --cached

Note, add color to see easy and cool

$ git config --global color.ui true

Commit

$ git add .

$ git add -A

add . and add -A add all change into committed list.

just add specific file need to commit, use

$ git add <file_path>

Reset commit, not create new commit, use

$ git commit --amend -m "an updated commit message"
$ git commit --amend --no-edit

Log

$ git log

Press [Enter] to scroll the list till the end or press q to quit

To search commit logs matching a specific pattern, use:

$ git log -g --grep=<pattern>

Add flag –oneline to show on line 1 commit.
Add flag –graph to show relationship parent-child

blame

Check who is author of line in 1 file (and commit hash id, time)

$ git blame <file_path>

Push

After to commit, push these changes on origin (remote repo)

$ git push origin <branch_to_push>

Use push to delete remote branch (note have ":")

$ git push origin :<branch_to_remove>

Tag

Tag version

$ git tag -a <tag_name> -m 'message'

$ git tag <tag_name>

Push tag on remote repo

$ git push origin <tag_name>

Delete tag

Delete in local first: $ git tag -d
Delete in remote: $ git push origin -delete

Merge

Use to join 2 or more commit from difference branch

$ git merge <branch_to_merge>

Fetch

Use to update branch origin in local with branch similar on remote repo

$ git fetch origin <branch_on_remote_repo_to_fetch>

Pull

Nature is fetch before merge

$ git pull origin <branch_on_remote_repo_to_pull>

Or add flag -rebase to fetch before rebase

$ git pull --rebase origin <branch_on_remote_repo_to_pull>

Reset

Point local repo to old commit in history

$ git reset HEAD

$ git reset <commit_hash_id>

Note: Use $ git reflog to show list

Flag –hard: destroy all change

$ git reset --hard
$ git reset <commit_hash_id> --hard

After reset can update changes on remote repo to override history commit of this branch

$ git push --force origin <remote_branch>

Note: you should limit the use of operations that change the commit history

Revert

Used to reverse the changes of an old commit in history, essentially creating a new commit with the opposite change from the selected commit.

This is the safest way to revert changes because the commit history is completely unchanged, and the revert is also logged.

$ git revert <commit_hash_id>

References

What is closure? (Closure là gì?)

Nguyen Thien Ly — Fri, 10 Apr 2020 18:04:25 +0000

Mục lục

Vấn đề
Lexical scoping là gì ?
Closure là gì?
Giả lập class bằng closures
Closure Scope Chain
Các bài phỏng vấn thường thấy về closure
Kết bài

0. Vấn đề

Heyzo what's up

Xin chào tất cả mọi người, mọi người có biết closures là gì không? Đối với một người mới đi làm như mình thì cũng mơ hồ

Mình rất cay vì mình luôn được phỏng vần về closure tưởng đã chuẩn bị chắc ăn nhưng cuối cùng toàn trả lời fail. Vì vậy hôm nay mình sẽ tổng hợp về closure để tạo ra một bí kíp riêng cho mình và chia sẻ cùng mọi người nha

Bài viết này mình tổng hợp từ nhiều nguồn, nếu mọi người có góp ý gì thì mình rất sẵn lòng tiếp thu.

Bắt đầu thôi @-@

1. Lexical scoping là gì?

Xem xét ví dụ dưới đây

function outerFuc() {
  var name = 'Nguyen Thien Ly'; 

  function innerFunc() { 
    console.log(name);  
  }

  innerFunc();
}

outerFuc(); // Kết quả ra là Nguyen Thien ly

Bên trong hàm outerFunc gồm: Một biến cục bộ name, và function innerFunc. Bên trong function innerFunc không có biến cục bộ nào cả nhưng trong hàm này đang sài một biết name của cha nó function functionOuter. Vậy đây là một ví dụ về lexical scopping cách mà các function sử dụng một biến của một hàm nó lòng trong, hoặc nhiều hàm lòng vào nhau.

2. Closure là gì?

Closure là một hàm được viết lồng vào bên trong một hàm khác (hàm cha) nó có thể sử dụng biến toàn cục, biến cục bộ của hàm cha và biến cục bộ của chính nó (lexical scoping)

Tiếp tục đoạn code trên và thay đổi một chút

function outerFuc() {
  var name = 'Nguyen Thien Ly'; 

  function innerFunc() { 
    console.log(name);  
  }

  return innerFunc;
}

var refInnerFunc = outerFuc();

refInnerFunc(); // Kết quả ra là Nguyen Thien ly

Nếu mà bạn không để ý thì bạn sẽ để ý được sự khác biệt mà javascript mang lại.

Cái chỗ thằng refInnerFunc được gán bằng kết quả thực hàm outerFuc() vậy thì giờ thằng refInnerFunc đang references đến kết quả chạy hàm outerFuc() (refInnerFunc trỏ đến hàm innerFunc nhưng chưa thực thi hàm này nhé)

Hàm outerFuc() giờ đã thực thi xong các biến cục bộ của nó sẽ được giải phóng

Giờ đến lượt thực thi function innerFunc() (Chạy dòng này nè refInnerFunc()). kết quả in ra Nguyen Thien Ly. Ủa đây là biến thằng cha mà, nó đã bị hủy rồi sao còn in ra được zậy, không phải undefined à. Vậy đã có điều gì xảy ra?

Ở javascript khi một hàm nằm trong một hàm khác, thì cái hàm nằm trong chưa thực thi mà thằng cha nó lỡ thực thi trước, thì nó sẽ tạo ra một Lexical Enviroment để đặt tất cả các biến của nó đang có và "gắn" vào hàm con để đề phòng trường hợp thằng con có cần thì có mà xài :v

Ở trường hợp trên sau khi function outerFuc() đã chết rồi nó để lại di chúc cho thằng hàm con trong nó là một tài sản biến name, sẽ đi theo thằng hàm innerFunc() cho đến khi mà thằng này cũng chết thì nó mới giải phóng

Vậy trong ví dụ trên ai là Closure? Câu trả lời là refInnerFunc vì nó đang là một hàm nằm trong hàm khác (Vì nó đã được assign innerFunc) và nó đang có biến name của cha nó (Có thể sài dù cha nó có thể mất đi) và biến global (nếu có) và biến cục bộ của nó (nếu có). (Lexical enviroment). refInnerFunc sẽ reference đến cái Lexical enviroment (Trỏ vào đây). Vậy thằng refInnerFunc đang trỏ vào function innerFunc() và lexical enviroment của nó nhá.

Nhìn vào hình dưới đây sẽ thấy

Một ví dụ khác :v

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

Cả hai thằng add5 và add10 đều là closure và thằng mỗi thằng có mỗi lexical enviroment riêng.

add5 (Cha nó để lại di chúc biến x=5 và nó đang trỏ tới anonymous function và trong đó có biến cục bộ là y)

ddd10 (Cha nó để lại di chúc biến x=10 và nó đang trỏ tới anonymous function và trong đó có biến cục bộ là y)

Đậy là dạng closure dùng khác lexical enviroment (thằng x = 5 thằng x = 10) và chung xử lí (Chung hàm anonymous y)
(Dạng 1)

3. Giả lập class bằng closures

javascript là ngôn ngữ hướng hàm functional programming nhưng ai cũng biết được rằng ngôn ngữ hướng đổi tưởng object oriented programming có những thứ rất hay ho ví dụ: Tính chất bao bọc và bảo vệ dữ liệu, vậy trong ES6 có class thì thực chất là khai báo và dùng tính chất closure này để mô phỏng tương đối


//Ví dụ 2
var counter1 = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
     changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

console.log(counter1.value()); // logs 0
counter1.increment();
counter1.increment();
console.log(counter1.value()); // logs 2
counter1.decrement();
console.log(counter1.value()); // logs 1

//Ví dụ 2
var counter2 = (function() {
  var privateCounter = 0;
  // function changeBy(val) {
  //   privateCounter += val;
  // }
  return {
    increment: function() {
      privateCounter ++;
    },
    decrement: function() {
      privateCounter --;
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

console.log(counter2.value()); // logs 0
counter2.increment();
counter2.increment();
console.log(counter2.value()); // logs 2
counter2.decrement();
console.log(counter2.value()); // logs 1

Ở đây ta có một closure:

counter

Dùng chung một lexical enviroment gồm:

Biến privateCounter
Function changeBy

Và khác phần xử lí

increment
decrement
value

(Dạng 2) coi lại dạng 1 phần 2

Vì dùng chung nên cả ba thằng này đều có thể dùng function changeBy() để điểu khiến biến privateCounter như ví dụ 1 hoặc có thể tự điều khiển privateCounter bên trong mỗi hàm như ví dụ 2

Vậy ta không thể thấy hay điều khiển được các biến trong lexical enviroment này mà chỉ được tác động đến privateCounter thông qua những function mà nó cung cấp (increment, decrement, value) . Khá giống với OOP phải không nào ^^

4. Closure Scope Chain

Ví dụ dưới đây

// global scope
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // outer functions scope
      return function sum4(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

var s = sum(1);
var s1 = s(2);
var s2 = s1(3);
var s3 = s2(4);
console.log(s3) //log 20

Trong ví đụ dưới đây ta thấy có các closure như sau

s (Có lexical enviroment gồm biến a và e trỏ vào function sum2 )
s1 (Có lexical enviroment gồm biến a, b và e trỏ vào function sum3 )
s2 (Có lexical enviroment gồm biến a, b, c và e trỏ vào function sum4 )
s3 (Có lexical enviroment gồm biến a, b, c, d và e và thực thi và giải phong a, b, c, d)

Vậy nhận ra rằng

Tất cả có chung biến global là e
Thằng đằng trong sẽ lấy tất cả các dữ liệu thằng ngoài có

5. Bài phỏng vấn thường thấy về closure

Ví dụ dưới đây

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000)
}

// logs 3, 3, 3

Chúng ta thấy rằng function anonymous để console biến i của cha nó sẽ chạy sau khi cha nó chạy xong (Vì thằng này delay ít nhất 1s), vì vậy javascript sẽ tạo ra closure để cung cấp cho thằng hàm con trong có thể sài, vì vòng lặp là 3 nên sẽ tạo ra 3 closure

Giờ xem xét cái lexical enviroment nào, t biết rằng var i tuân thủ nguyên tắc function scope nó sẽ được tạo mới trong mỗi function còn ngoài function thì var i nhiều lần cũng chỉ là biến i đó thôi. Vậy chúng nó sài chung lexical enviroment (Giống bài mô phỏng class phần 3).

Mà để hàm thực thi function log i ra cần tới 1s sau, vậy theo như ví dụ trên, vòng lặp for sẽ được chạy xong trước khi thực thi function log i sớm nhất được thực thi vậy biến i lúc này sẽ luôn là giá trị sau khi chạy xong vòng for, i = 3.

Vậy sẽ ra kết quả là 3, 3, 3

Để sửa lỗi này t có nhiều cách nhưng mình sẽ đề xuất một cách là dùng let thay cho var vì let theo nguyên tắc block scope biến sẽ được tạo mới trong dấu { } nên sẽ có 3 closure dùng 3 lexical enviroment khác nhau nhé

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000)
}

// logs 0, 1, 2

6. Kết bài

Đến đây cũng đã hết bài viết rồi, cảm ơn mọi người đã theo dõi. Nếu có góp ý hay thắc mắc gì thì cứ để lại comment bên dưới mình sẽ trả lời. Xin chào mọi người.

Link tham khảo:

Create CV with BEM - 2

Nguyen Thien Ly — Thu, 02 Apr 2020 08:44:21 +0000

Series về cách tạo một CV đơn giản nhưng cực chất cho dev cực chất

Phần 1: Chuẩn bị và cấu trúc project html, css, js cùng BEM thần thánh (Link)
Phần 2: Thiết kế, lắp ráp index-page và deploy lên github-page (Link)
Phần 3: Refactor code và các chú ý về BEM
Phần 4: Thiết kế và fetch Gist, lắp ráp blog-page và deploy lên github-page

Kết quả: https://nguyenthienly.github.io/MY_PROFILE

2. Phần 2: Thiết kế, lắp ráp index-page và deploy lên github-page

Mục lục

Cài đặt live-server
Thêm một fonts bằng fonts.google.com và một số thứ khác
Cài đặt block header và các sai lầm dễ mắc phải về BEM
Deploy lên github-page
Kết bài

0. Cài đặt live-server

Heyzo what's up

Thông thường thì mọi người code html, csss, mỗi khi thêm một ít code mới lại refresh khá mất thời gian vì vậy mình sẽ giới thiệu một extension của VScode, để làm điều này tự động

Các bước cài đặt

Ấn tổ hợp phím (Ctrl + Shift + X)
Gõ lên thanh tìm kiếm live server và ấn vào install
Sau khi cài đặt xong thì, ấn tổ hợp phím (Ctrl + Shift + E) chọn file .html kích chuột phải trong Open with live server nha

1. Thêm một fonts bằng fonts.google.com

Để cài các font phù hợp và đẹp mắt thì mình sẽ chỉ cho các bạn một trang rất hay của anh google
nha, mình sẽ lấy font chữ để phục vụ cho project mình hôm nay luôn

vào trang fonts.google.com
Tìm font fira code và chọn
Mình lấy các options và sẽ được một embed như vầy

<link
  href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;515;600;700&display=swap"
  rel="stylesheet"
/>

Lúc khai báo thì mình sẽ sài như dưới đây

font-family: "Fira Code", monospace;

Trong bài mình dùng các icon của fontawesome.com vì vậy các bạn cũng có thể chọn như mình

Về hình ảnh thì có vài cách:

Các bạn bỏ vào thư mục images và push lên github để lấy url
Dùng một url có sẵn để dev nha mình xài thằng này picsum.photos

3. Cài đặt mẫu block header và các sai lầm dễ mắc phải về BEM

Sau khi đã phân chia thư mục như phần trước

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     └─── component
│            └─── button.css
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html

Ở file index.html có bạn nào sẽ khai báo Block header như dưới đây không?

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__link__logo">
        </a>

        <ol class="header__list">
            <li class="header__list__item">
              <a class="header__list__item__link">
              </a>
            </li>
        </ol>
    </header>

Nếu bạn đã nghĩ khai báo như vậy là đúng, xin chúc mừng bạn đã hiểu nhầm về BEM rồi đấy

Bạn nên khai báo file index.html như dưới này:

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>
    </header>

tại sao như vậy?

Nguyên tắc 1

Khi làm BEM thì nên tuân thủ Block__Element chứ không phải Block_Element_Element. Vì BEM không thể hiện các level hoặc độ sâu của các element, mà BEM giúp bạn dễ dàng định danh mối quan hệ với top-level block (Block mà nó nằm trong). Nên các bạn hãy cố gắng đặt đúng nguyên tắc BEM nha

Tiếp theo,

Trong Block Header này có 3 Element gồm:

Logo bên trái
Menu ở giữa
button bên phải

Ở bài trước mình đã tách Button ra một block riêng, sẽ có Block chứa Block khác, ví dụ dưới đây

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn">My blog</a>
    </header>

Vậy bây giờ các bạn sẽ gặp trường hợp. Là thằng Block cha (header) muốn điều khiển thằng Block con (btn)

Vậy bạn sẽ khai báo như nào, có bạn nào định làm như dưới đây không?

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="header__btn btn">My blog</a>
    </header>

Như các bạn thấy mình vừa thêm class header__btn vào, nếu các bạn nghĩ như này là đúng thì hình như lại hiểu nhầm BEM nữa rồi ^^

Nguyên tắc 2

Chúng ta không nên cho một Block này can thiệp vào một Block khác. Điều này vô tình có khiến bạn đang sửa đổi một hoặc thuộc tính của thằng Block bị can thiệp đang có nhé. Điều này cũng đã vi phạm nguyên tắc Open/Close của SOLID

Ai không biết thì kích vào đây để đọc thêm về nó nhá

Vậy chúng ta phải làm sao để có thể giải quyết vấn đề trên?

Đây là lúc dùng thằng Modifier này nha, ví dụ dưới trong file index.html

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn--mt-50 btn">My blog</a>
    </header>

Mình có thay thằng header__btn bằng thằng btn--mt-50 để ví dụ rằng mình muốn trong Block header này Block btn sẽ margin-top: 50px. Sẽ có cách giải quyết hay hơn nhưng mình sẽ trình bày ở Phần 3 nhé

Cuối cùng

Ở Phần 1 mình đã cũng nói lí do là muốn tách Block btn ra riêng vì trong project có dùng lại.

Mình giả sử nếu bạn không tách ra, mà xem Block btn như một Element btn của Block header và sau đó lại có một nơi nào đó sài một btn khá giống với cái element btn trong Block header thì phải code lại hay tạo ra block btn mới phải không nào, điều này cũng vi phạm nguyên tác về BEM

Nguyên tắc 3

Khi nào mà vẫn có thể Modifier được thì ưu tiên Modifier hơn là tạo ra một Block mới

Vậy cũng là ví dụ này, khi mình muốn trong Block Header cái Block btn nhỏ hơn những cái khác thì mình thêm class btn--small là được

index.html

   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn btn--mt-50 btn--small">My blog</a>
    </header>

Và kết quả sẽ được như hình nhá (Mình chỉ dựa theo thôi và trình mình không thể clone giống bạn này 100% các bạn thông cảm)

Trên đây là các kinh nghiệm mà mình đã có khi làm việc với BEM mình hy vọng các bạn có thể thực hành và hiểu hơn về BEM nhé

Nếu không có người yêu khiến bạn buồn, thì BEM sẽ khiến bạn hanh phúc, hãy tin là như vậy

4. Deploy lên github-page

Sau một hồi code và refactor code thì cơ bản cũng đã xong trang index.html với cấu trúc thư mục như sau

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     │      └─── ...
│     └─── component
│            └─── button.css
│            └─── ...
└─── js
│     └─── page
│     └─── container
│     └─── component
│            └─── ...
└─── index.html
└─── blog.html

Chú ý giúp mình đặt tên có index.html và bố trí như trên để push lên github nhận luôn nhá

Các bạn gõ các lệnh sau

git add .
git commit -m "create home.html"
git push origin master

Sau đó lên trang github làm theo các bước sau

Kích vào phần setting
Cuộn xuống phần github pages và select phần Master branch
Đợi github load lại và cuộn dưới phần đó sẽ thấy link

Kết quả https://nguyenthienly.github.io/MY_PROFILE

4. Kết bài

Đến đây cũng đã hết phần này rồi, các bạn nếu thấy thú vị và hữu ích thì tiếp tục theo dõi, mình sẽ có phần 3 sớm nhất có thể

Chúc mọi người vượt qua mùa dịch an toàn, và làm những điều thật có ít nhé

Mày không thoát được đâu con trai, tu be không tình yêu

Link tham khảo:

shorturl.at/nsvN0
shorturl.at/fqsRT
http://getbem.com/

Create CV with BEM - 1

Nguyen Thien Ly — Thu, 02 Apr 2020 08:41:40 +0000

Series về cách tạo một CV đơn giản nhưng cực chất cho dev cực chất

Phần 1: Chuẩn bị và cấu trúc project html, css, js cùng BEM thần thánh (Link)
Phần 2: Thiết kế, lắp ráp index-page và deploy lên github-page (Link)
Phần 3: Refactor code và các chú ý về BEM
Phần 4: Thiết kế và fetch Gist, lắp ráp blog-page và deploy lên github-page

1. Phần 1: Chuẩn bị và cấu trúc project html, css, js cùng BEM thần thánh

Mục lục

Vấn đề
Những thứ cần chuẩn bị
Tạo repository trên github.com
BEM là gì, sao phải dùng BEM
Cấu trúc Project
Kết bài

0. Vấn đề

Heyzo what's up

Xin chào tất cả mọi người, trước đây khi mà mình đi xin việc thì đến giai đoạn nộp CV, thì mình hay lên topcv.vn hay là cvsimply.com để tậu cho mình một cái CV phải không nào, việc đó rất tiện nhưng mình cảm thấy nếu mình là dev có thể xây dựng cho mình một CV theo phong cách của riêng mình thì gây ấn tượng mạnh hơn với nhà tuyển dụng nha (Biết đâu lọt vào vòng gửi xe ^^)

Hôm nay ở nhà chống dịch deadline cũng không nhiều, vì vậy mình sẽ viết một series về cách tạo CV đơn giản nhưng cực chất cho dev he, à không riêng gì dev các bạn nào muốn tạo cho mình một CV của riêng mình thì cứ đọc. Cái này mình chỉ muốn chia sẻ cho mọi người nên có gì đắc tội mong mọi người nhẹ tay cho em

Let's go

1. Những thứ cần chuẩn bị

Nào cặp nào bút, nào sách nào vở, không không

Editor (Mình sài VScode nha ai thích thì sài không thích thì sài ^^)
Một ít kiến thức về HTML, CSS, JS không biết gì lên đây tìm nha
Biết dùng git căn bản, ai chưa rành vô đây để học, học hết video đảm bảo biết sài git
Có một repository trên git hub không có thì xem dưới mình bày tạo

2. Tạo repository trên github.com

Truy cập vào trang web https://github.com/, chọn đăng nhập bằng google hoặc đăng kí mới
New repository, giao diện hiện ra như hình dưới điền tên vào nha (Mà điền tên nào liên quan tí vì cái này sẽ là domain của mình luôn ấy)

Sau đó nhấn Create repository và làm theo các bước dưới đây (gõ trong command line nhé)

mkdir MY_PROFILE 
README.md // Tạo file tên như vậy nhá
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/NguyenThienLy/MY_PROFILE.git
git push -u origin master

Như vậy, sau khi thao tác xong reponsitory của bạn sẽ giống hình dưới đây, rồi chuẩn bị xong rồi đó @-@

3. BEM là gì, sao phải dùng BEM

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

Qui ước đặt tên

.block {}   /* Block */

.block__element {}  /* Element */

.block--modifier {}  /* Modifier */

Định nghĩa ở trên đây (Đọc thêm về BEM ở đây) nhưng mình chỉ muốn nói rằng trước đây khi chúng ta đặt tên class trong css đôi khi đã xảy ra những lỗi về mức độ ưu tiên trong css, hay đặt tên không chuẩn một khi project lớn lên sẽ gây nhiều phiền phức ... Có nhiều quy tắc để giải quyết vấn đề này nhưng mình thấy BEM là dễ hiểu và thực hành mà vẫn giải quyết được các vấn đề liên quan

Cách thực hành BEM mình sẽ làm ứng dụng trực tiếp vào cái Project CV này luôn ^^

4. Cấu trúc Project

Các bạn có thể tự thiết kế cho mình một bản PSD theo ý thích nhưng mình thiết kế không đẹp, nên mình sẽ chọn một CV đã có sẵn để clone lại nha. Từ bản clone này các bạn có thể thêm mắm, muối để biến nó thành một bản CV của chính mình !!

CV này mình được một người bạn gửi cho và thực sự mình cảm thấy nó quá đẹp và đáng để mình học hỏi nha, link đây brittanychiang.com

Bắt đầy với việc chia cấu trúc project như dưới đây (Mình chia như vầy để deploy lên git-hub chạy được luôn nha)

Cây thư mục sẽ trông như vậy

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     └─── component
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html

Giờ mình sẽ bắt đầu phân tích một thành phần dưới đây trong trang web theo BEM nhé

Bạn để ý rằng block header này có 3 Element gồm:

Logo bên trái
Menu ở giữa
button bên phải

Một chú ý là Element button sẽ được dùng lại trong project này vì vậy mình cũng sẽ xem Element Button như một Block độc lập và nằm trong Block Header

Vậy giờ sẽ thêm các file thích hợp vào cây thư mục, nó sẽ trông như vầy ^^

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     └─── component
│            └─── button.css
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html

Khi bắt đầu với BEM mình đã dùng sai về nguyên tắc của nó, vì vậy vào phần sau mình sẽ chia sẽ cho các bạn nghe nhé ^^

5. Kết bài

Đến đây cũng đã hết phần này rồi, để tiếp tục theo dõi mấy bạn kích vào đây để đi qua phần 2 nhé

Chúc mọi người vượt qua mùa dịch an toàn, và làm những điều thật có ít nhé

Mày không thoát được đâu con trai, tu be không tình yêu

Link tham khảo:

Unit test in typescript by jest

Nguyen Thien Ly — Wed, 01 Apr 2020 06:37:37 +0000

Mục lục

Vấn đề
Chuẩn bị
Unit testing là gì?
Jest là gì?
Config jest
Demo nhẹ
Kết bài

0. Vấn đề

Heyzo what's up

Xin chào tất cả mọi người, làm developer thì ai cũng phải viết unit test (Định nghĩa phần 2) phải không nào, bài viết này mình xin giới thiệu một package hỗ trợ viết unit test trong javascript rất hay ho đó là jest, mọi người cùng theo dõi nhé

Mình sẽ config và demo jest trong typescript nhé, mong mọi người chú ý theo dõi

1. Chuẩn bị

Editor (Mình đề xuất VScode nhé vì mình xài cái này)
Nodejs
Có sẵn một project viết bằng typescript + expressjs nhé
Jest plugin (Hôm nay mình demo cái này)

Giờ thì, let's go !!!

2. Unit testing là gì?

Unit Test là một loại kiểm thử phần mềm trong đó các đơn vị hay thành phần riêng lẻ của phần mềm được kiểm thử. Kiểm thử đơn vị được thực hiện trong quá trình phát triển ứng dụng. Mục tiêu của Kiểm thử đơn vị là cô lập một phần code và xác minh tính chính xác của đơn vị đó.

Một Unit là một thành phần PM nhỏ nhất mà ta có thể kiểm tra được như các hàm (Function), thủ tục (Procedure), lớp (Class), hoặc các phương thức (Method).

Các bạn đọc thêm ở đây

3. Jest là gì

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

Định nghĩa trên lấy từ đây. Nếu ai xài Mocha rồi thì biết jest này tương tự về cách giải quyết vấn đề nha, nhưng jest tích hợp đầy đủ hơn không như mocha phải cài thêm chai và sinon nữa, các bạn xem thêm trên đây để so sánh khách quan nhé

4. Config jest

Cài đặt các package bằng lệnh dưới đây

npm install --save-dev @types/jest jest ts-jest

@types/jest type jest trong typescript
jest package hỗ trợ viết unit testing
ts-jest hỗ trợ jest trong typescript

Vào trong project có sẵn về typescript ở root project tạo file jest.config.js

jest.config.js

module.exports = {
  "roots": [
    "<rootDir>/src"
  ], 
  // Xác định nơi bỏ các file testing 
  // Thông thuòng ra sẽ bỏ các file typescript vào hết thư mục src
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ], 
  // Jest sẽ dựa định dạng này để phát hiện các file 
  // cần được testing nhé
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  }, 
  // Thằng ts-jest sẽ xác định các file có dạng này
  // Sau đó sẽ biến đổi về dạng nó có thể hiểu được
  // Để chạy jest
  "verbose": true,
  // Báo cáo các bài test lúc đang chạy 
  "globals": {
    "ts-jest": {
      diagnostics: false
    }
  }
  // Ồ ồ cái này cần à nghe, cái này để các hàm
  // của thằng jest trở thành globals
  // không cần phải require hay import khi dùng nữa
}

Giờ trong file tsconfig.json sẽ thêm một ít
ở exclude nó trông như vậy nè

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es6"
    ],
    "outDir": "./build",
    "resolveJsonModule": true,
    "strict": true,
    "types": [
      "reflect-metadata",
      "jest"            // Chú ý ở đây phải có cài này không file .ts sẽ báo lỗi 
    ],
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules", "**/*.spec.ts", "**/*.test.ts"
  ],
  "include": [
    "./src/**/*"
  ]
}

Rồi giờ để chạy được test thì mình sẽ thêm tý ở file package.json

package.json

 "scripts": {
      ...
      "test": "jest --detectOpenHandles"
    },

Khi nào muốn chạy thì gõ npm run test là được nha, như vậy là phần config như xong, cây thư mục sẽ nhìn giống dưới đây nè ^^

└─── node_modules
└─── jest.config.js
└─── tsconfig.json
└─── package.json
│ 
└─── src
    └─── test
    └─── app.ts

5. Demo nhẹ

describe("Filter function", () => {
Tạo một file app.spec.ts (hoặc app.test.ts) trong thư mục test, các hàm test, describe đều là global nãy mình đã config rồi nhé @-@

app.spec.ts

import { filterByTerm } from '../app'

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];

    expect(filterByTerm(input, "link")).toEqual(output);
  });
});

Coppy đoạn code dưới đây vào app.ts

app.ts

export function filterByTerm(inputArr : any , searchTerm: string){
    return inputArr.filter(function(arrayElement :any) {
      return arrayElement.url.match(searchTerm);
    });
}

Cấu trúc thư mục sẽ trông như vầy nhé

└─── node_modules
└─── jest.config.js
└─── tsconfig.json
└─── package.json
│ 
└─── src
    └─── test
          └─── app.spec.ts
    └─── app.ts

Kết quả:

6. Kết bài

Vậy cũng đã hết bài rồi, hy vọng bài viết này sẽ giúp các bạn cài đặt được jest trong typescript để sử dụng nhé, cảm ơn và xin chào

Link tham khảo:

Intergrate jade into typescript expressjs

Nguyen Thien Ly — Mon, 30 Mar 2020 15:13:56 +0000

Mục lục

Vấn đề
Jade là gì ?
Cài đặt thư mục static (express) và dùng jade trong typescript và
Cài đặt package coppyfiles
Tạo Key api trong google và chèn map google vào html của bạn
Embed map dark-sky vào html của bạn
Kết bài

0. Vấn đề

Heyzo what's up

Xin chào mọi người hôm này mình sẽ demo thằng Jade một template engines dùng cho Nodejs để render html, css, js nhé

Khi bạn cài đặt được thằng Jade này rồi thì những thằng Pug, handlebars, ejs tương tự thôi nhé

Nào cùng bắt đầu thôi :v

1. Jade là gì?

Jade is a template engine for Node.js. Jade syntax is easy to learn. It uses whitespace and indentation as a part of the syntax.

Trên là định nghĩa nha (đọc thêm ở đây), nếu bạn nào dùng Pug (đọc thêm ở đây) rồi thì hai thằng này khá giống nhau đó

Dưới đây là cú pháp của thằng Jade nha

index.jade

doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..

html dưới đây sau khi chuyển thành jade thì nó ra ở trên nha

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Jade Page</title>
</head>
<body>
    <h1>This page is produced by Jade engine</h1>
    <p>some paragraph here..</p>
</body>
</html>

Lúc code mình cứ code html như thường. Code xong coppy hết đống code đó dán vào đây. Như vậy là chạy ngon luôn

2. Cài đặt thư mục static (express) trong typescript

Khi bạn code một trang html thông thường bạn sẽ có file .css hay .js phải không nào, vậy thì khi sài express bạn sẽ để chúng ở đâu để các file .jade có thể sử dụng được. Câu trả lời là sử dụng express.static một middle function trong expressjs

Cách cài đặt trong typescript dưới đây nhé, giờ mình bỏ hết các file .js, .css vào thư mục public

app.ts

   this.app.use(express.static(path.join(__dirname, 'public')));

   this.app.set('views',path.join(__dirname, 'views')); // Các template engine khác tương tự nhé
   this.app.set("view engine","jade");
   // Mà nhớ là thằng expressjs nó sẽ đi tìm mặc định thư mục views nên nhớ nhét đống file .jade đúng chỗ coi chừng không chạy được đâu :V

Mọi người chú ý là dùng __dirname để lấy đường dẫn tuyệt đối nhé chứ không có khi code không chạy không biết tại sao đâu :v, xong rồi

3. Cài đặt package coppyfiles

Thông thường thì thằng tsc nó chỉ nhận diện các file .ts và chuyển vào thư mục hết đống code ..ts đó ra .js. Vì thế nếu trong thư src (Thư mục chứa code) có file định kiểu .html, .js, .jade thì chúng ta phải coppy bằng tay khá là lằng nhằng. Vì vậy mình xài một package chuyên làm việc này nhá đó là coppyfiles (Đọc thêm ở đây)

Làm tuần tự theo dưới đây nhé

Gõ vào command line

npm i -d copyfiles

Giờ vào file package.json để cấu hình như sau

"jade": "copyfiles -u 1 src/**/*.jade build/" // Cái này cấu hình cho em .jace mà mình đang sài nè

"public": "copyfiles -u 1 src/**/**/*.css src/**/**/*.js src/**/*.html build/" // Cái cuối cùng cấu hình cho nguyên cái thư mục static mình cài ở trên nè :v

Xong rồi, mà nhớ lúc chạy, sau khi cho thằng tsc đưa hết các file .ts sang js rồi, thì gõ lệnh mình đã cài ở trên

npm run jade
npm run public

4. Tạo Key api trong google và chèn map google vào html của bạn

Cái bước này thì cũng dễ thôi vì api của anh google là dễ xài nhất rồi (Các bước ở đây) nhưng có vài chú ý anh em để ý hộ mình nha.

Search Maps JavaScript API để check xem nó đã enable chưa nhé vì mình sài google maps mà không bật nó lên không sài được đâu
Vào mục Credentials của phần API và Services, chọn api_key vừa tạo => Application restrictions => HTTP referrers(web site) => Thêm địa chỉ mà mình dùng để dev nhé

http://127.0.0.1:5500 // Cái này chạy live server khi code html, css

http://127.0.0.1:9001 // Cái này chạy web app với express nè

Cuối cùng anh em đọc bài này là show lên được rồi á nha (Mà hình như chỉ dev được thôi chứ không dùng product với dạng free này)

5. Embed map dark-sky vào html của bạn

Thằng dark-sky (đọc thêm ở đây) này rất hay đó :v, ai muốn làm ứng dụng dự báo thời tiết thì cực ngon rồi, có hỗ trợ API và dùng free cho dev luôn

Mà mình lúc đầu không tích hợp được map nó vào trong website của mình (Đọc được chính sách nó không cho sài luôn :v), search hồi thấy người khác sài được nên mình mạng phép lấy cái embed này share cho anh em nha, cứ thả vào là chạy quá ngon

  <iframe style="height: 100%;" src="https://maps.darksky.net/@temperature,34.595,20.013,undefined?embed=true&amp;timeControl=true&amp;fieldControl=true&amp;defaultField=temperature&amp;defaultUnits=_f" width="100%" height="150" frameborder="0"></iframe>

6. Kết bài

Bài viết này mình viết theo xu hướng là giữ lại kiến thức cho bản thân và share cho nhưng ai đã làm được phần nào project expressjs có sài template engines rồi nha có gì khó hiểu mong mọi người bỏ qua cho cảm ơn mọi người rất nhiều

Link tham khảo:

Import vs require

Nguyen Thien Ly — Sun, 29 Mar 2020 08:29:13 +0000

Mục lục

Vấn đề
Require là gì ?
Import là gì?
Sự khác nhau giữa require và import
Kết bài

0. Vấn đề

Heyzo what's up

Xin chào tất cả mọi người, trước đây khi bắt đầu sử dụng import để thay thế require một package hay một module đã có để sử dụng.

Có một thắc mắc là tại sao lại sinh ra thằng import nhỉ trong khi require vẫn dùng tốt?

Sau khi tìm hiểu hôm nay mình sẽ trả lời thắc mắc đó theo suy nghĩ của mình, các bạn cùng đọc và cho ý kiến nhé

1. Require là gì?

Là hàm được xây dựng trong Nodejs theo chuẩn commonjs giúp việc khai báo sử dụng các module đã có sẵn rất dễ dàng, xem ví dụ dưới nhé

Tạo ra một module trong file

hello.js

module.exports = function () {
  console.log('Hello everybody!')
}

Giờ, require hello.js vào để sử dụng

main.js

var hello = require('./hello.js')

hello(); // Hello everybody

Rất dễ dàng phải không nào :v

2. Import là gì?

Là tính năng trong ES6 giúp việc khai báo sử dụng các module đã có sẵn rất dễ dàng, à hình như cũng khá là giống require nhỉ :v. Vậy chúng khác nhau cái gì đây, _- chả nhẻ chỉ đổi cách xưng hô, qua phần 3 sẽ rõ nhé. **Let's go*

3. Sự khác nhau giữa require và import

Giống nhau

Trước khi nói điểm khác thì mình xin nói điểm giống giữa hai thằng require và import này nhé

Giúp việc khai báo sử dụng các module đã có sẵn rất dễ dàng, quản lí code theo module tốt hơn
Khi biên dịch thì import cũng trở về require để code có thể thực thi

Khác nhau

Thực chất là những thứ hay ho mà thằng import này có mà thằng có nhé (Lí do được sinh ra)

Theo mình cảm nhận thì khi dùng thằng import thì mọi người thấy code mình sáng hơn phải không nào đó là điều đầu tiền mà import mang lại nhé (Cảm quan thôi :v) => Giúp code dễ nhìn đẹp đẽ hơn
require trong Nodejs theo chuẩn commonjs, còn import mới có trong ES6
Trong một package, file có nhiều module thì việc mong muốn chỉ khai báo các module muốn sử dụng để khỏi lãng phí tài nguyên là mong muốn chính đáng phải không nào (Good good good). import cho phép bạn lấy ra từng phần mà bạn thực sự dùng (Không cần lấy ra cả package hay file như anh require nhé) => Giúp tiết kiệm bộ nhớ
Đối với require việc thực thi theo synchronous (Đồng bộ). Còn đối với import sẽ thực thi theo asynchronous (Bất đồng bộ), không quan tâm Chi Dân tới import thằng trên mình => Hiệu suất cải thiện hơn

var hello = require('./hello.js')
var hello1 = require('./hello1.js')
var hello2 = require('./hello2.js')

Lúc loading lên lần lượt là hello -> hello1 -> hello2
-----------------------------

import hello from './hello.js'
import hello1 from './hello1.js'
import hello2 from './hello2.js'

Lúc loading lên có thể là là hello2 -> hello -> hello1