Chuyên mục
Chưa được phân loại

Chào tất cả mọi người!

Cảm ơn vì đã sử dụng WordPress. Đây là bài viết đầu tiên của bạn. Sửa hoặc xóa nó, và bắt đầu bài viết của bạn nhé!

Chuyên mục
Javascript

6 tính năng tuyệt vời của Javascript ES6

Javascript ES6 mang đến nhiều tính năng mới giúp chúng ta giải quyết công việc một cách hiệu quả, thông minh và thuận tiện hơn. Chúng ta hãy cùng điểm qua 6 tính năng mới của ES6 vô cùng tuyệt vời dưới đây.

Thiết lập Object [key]

Trước đây khi khởi tạo một Object trong Javascript, nếu bạn muốn khai báo một thuộc tính có tên là giá trị của một biến thì phải làm sau khi đã khởi Object:

let tenBien = 'age';
let obj = {
    'name': 'Tung'
};
obj[tenBien] = 20;

Javascript ES6 cung cấp cho chúng ta một cách khởi tạo ngắn gọn hơn:

let tenBien = 'age';
let obj = {
    'name': 'Tung',
    [tenBien]: 20
};

Bằng cách bao tenBien trong cặp ngoặc vuông, chúng ta có thể đưa nó vào trong Object rồi 😉

Arrow Functions

Arrow Functions trong Javascript ES6 giúp chúng ta khai báo hàm một cách ngắn gọn hơn. Ví dụ dưới đây là cách viết một hàm tính bình phương một số theo cách thông thường:

function binhPhuong(a) {
    return a*a;
}

Với Arrow Function, chúng ta có thể viết như sau:

let binhPhuong = (a) => {
    return a*a;
}

Với những hàm chỉ có một dòng return, chúng ta còn có thể viết gọn hơn với Arrow Function:

let binhPhuong = a => a*a;

find và findIndex

Javascript cung cấp cho lập trình viên phương thức Array.prototype.indexOf để tìm kiếm vị trí của một phần tử trong mảng. Tuy nhiên indexOf chỉ cho phép chúng ta tìm kiếm một giá trị cụ thể. findfindIndex cho phép chúng ta tìm kiếm có điều kiện, ví dụ như tìm một phần tử chia hết cho 2.

let arr = [1, 3, 5, 6, 9, 12]
let resultIndex = arr.find( num => num%2 == 0 )  // kết quả là 3 vì phần tử đầu tiên chia hết cho 2 là 6 có index là 3 (bắt đầu từ 0)
let resultValue = arr.findIndex( num => num%2 == 0 )  // kết quả là 6 vì phần tử đầu tiên chia hết cho 2 là 6

Toán tử … (Spread Operator)

Toán tử Spread giúp chúng ta phân tách một mảng hoặc một đối tượng thành các đối số riêng biệt. Chúng ta hãy xem qua ví dụ sau để hiểu rõ hơn:

Ví dụ về Spread Operator với Object

let me = {
    name: 'Tung',
    age: '20'
}
let tungcode = {
    school: 'HaUI'
}
let author = {...me, ...tungcode}
console.log(author) // { name: 'Tung', age: '20', school: 'HaUI' }

Ví dụ về Spread Operator với Array

console.log(Math.min(1, 2, 3, 4, 5, 6)) // 1

let a = [1, 2, 3, 4, 5, 6]
console.log(Math.min(...a)) // 1

let b = [...a, 10, 11]
// b = [1, 2, 3, 4, 5, 6, 10, 11]
console.log(Math.min(...b)) // 1

Template Literals

Trước đây để tạo một string chứa nhiều dòng, chúng ta phải thêm \ vào cuối mỗi dòng để đánh dấu kết thúc dòng. Cú pháp này vừa rối, vừa không đẹp khiến các dev Javascript không hài lòng.

Javascript ES6 cung cấp cho chúng ta Template Literals, giúp tạo string có nhiều dòng với dấu `.

let multiLines = `Chao mung 
cac ban
dang doc
:P
`

let blog = {
    name: 'Tung Code',
    author: 'Tung'
}

let msg = `Welcome to ${blog.name} by ${blog.author}` // Welcome to Tung Code by Tung

Tham số mặc định

Tham số mặc định trong hàm đã được rất nhiều ngôn ngữ hỗ trợ như PHP, Python. Giờ đây Javascript cũng đã tham gia vào cuộc chơi 😛

const xinChao = (name = '') => {
    if(name === '') {
        return 'Hello Guest'
    }
    return `Hello ${name}`
}

console.log(xinChao()) // Hello Guest
console.log(xinChao('Tung')) // Hello Tung

Tổng kết

Trên đây là 6 tính năng trong Javascript mà mình thấy hữu ích nhất. Ngoài ra còn rất nhiều điều thú vị và hữu ích nữa của ES6 mà các bạn nên tìm hiểu tại: http://es6-features.org/

Chuyên mục
Git Github

GitHub CLI là gì? Cách sử dụng Github CLI

Github vừa giới thiệu Github CLI (beta) (gọi tắt là gh). Nó cho phép chúng ta làm việc trực tiếp với Github bằng command line, thay vì chi có thể pull và push như trước kia. Chú ý gh khác với hub CLI tool.

Cài đặt Github CLI

Chúng ta có thể tải về bản cài đặt Github CLI từ trang chủ: https://cli.github.com/
Nếu bạn đang dùng Mac, thì có thể cài đặt thông qua Homebrew bằng lệnh sau:

brew install github/gh/gh

Tác dụng của Github CLI

Công cụ này tập trung hỗ trợ quy trình làm việc cho developers. Dưới đây là một số công việc mà nó cho phép chúng ta thực hiện bằng command line:

Issues

  • Tạo một issue
  • Xem danh sách issue
  • Xem trạng thái của một issue

Pull Request

  • Checkout Pull Request
  • Tạo Pull Request
  • Liệt kê các Pull Requests
  • Kiểm tra trạng thái của một Pull Request

Sự khác biệt giữa gh và hub là gì?

Theo file README, gh và hub được duy trì hoạt động song song trong tương lai.

  • Các tính năng của gh bao gồm Issues và Pull Requests
  • Các tính năng của hub bao gồm tạo/ clone repo

Làm việc với Issue

Hiển thị các Issue

gh issue list [flags]

# flags can be:
# -a, --assignee string   Filter by assignee
# -l, --label strings     Filter by label
# -L, --limit int         Maximum number of issues to fetch (default 30)
# -s, --state string      Filter by state: {open|closed|all}

Tạo một Issue

gh issue create [flags]

# flags can be:
# -b, --body string    Supply a body. Will prompt for one otherwise.
# -t, --title string   Supply a title. Will prompt for one otherwise.
# -w, --web            Open the browser to create an issue

Kiểm tra trạng thái của Issues

gh issue status [flags]

# flags can be:
# --help                  Show help for command
# -R, --repo OWNER/REPO   Select another repository using the OWNER/REPO format

Kiểm tra một Issue

gh issue view {<number> | <url> | <branch>} [flags]

# example
# gh issue view 8

# flags can be:
# -p, --preview   Display preview of issue content

Làm việc với Pull Requests

Checkout một Pull Request

gh pr checkout {<number> | <url> | <branch>} [flags]

# example
# gh pr checkout 12

Tạo một Pull Request

gh pr create

# flags can be:
# -B, --base string    The branch into which you want your code merged
# -b, --body string    Supply a body. Will prompt for one otherwise.
# -d, --draft          Mark pull request as a draft
# -t, --title string   Supply a title. Will prompt for one otherwise.
# -w, --web            Open the web browser to create a pull request

Liệt kê các Pull Request

gh pr list [flags]

# flags can be:
# -a, --assignee string   Filter by assignee
# -B, --base string       Filter by base branch
# -l, --label strings     Filter by label
# -L, --limit int         Maximum number of items to fetch (default 30)
# -s, --state string      Filter by state: {open|closed|merged|all} (default "open")

Hiển thị trạng thái của các Pull Request

gh pr status [flags]

Kiểm tra một Pull Request

gh pr view [{<number> | <url> | <branch>}] [flags]

# example
# gh pr view 14

Tổng kết

Đây là một công cụ vô cùng hữu ích cho các developers trong việc quản lý Issues và Pull Requests.
Dự án vẫn đang trong giai đoạn thử nghiệm nên bạn có thể đóng góp ý kiến tại: https://docs.google.com/forms/d/e/1FAIpQLSfScxLCO5eyeIM4clYcEQEnT0bIP6PK3LZ7E4AHQdj5tItUvQ/viewform

Chuyên mục
Tiện Ích

Lazy EOP – Tiện ích hỗ trợ làm tiếng anh trên EOP

=))

Giới thiệu về Lazy EOP

Lazy EOP là ứng dụng hỗ trợ bạn trong quá trình học tiếng anh trên EOP, rút giúp ngắn thời gian làm bài. Ví dụ khi bạn cần click vào tất cả các từ trong bài nghe để nghe thì tiện ích sẽ giúp bạn làm điều đó, công việc của bạn là chỉ việc ngồi nghe thôi.

Trước khi sử dụng ứng dụng, bạn vui lòng chú ý một số điều sau:

  • Tiện ích không hỗ trợ làm các bài TEST vì điều này là không thể
  • Tiện ích không hỗ trợ làm hết các dạng bài vì thằng code vừa lười vừa không muốn bạn lười như nó

Cảnh báo: Lạm dụng tiện ích này có thể khiến bạn học lại Tiếng Anh. Tiện ích này được tạo ra không phải để làm hộ bài tập cho bạn.

Hướng dẫn cài đặt

Các bạn có thể download tiện ích trên Chrome Store qua link sau: https://chrome.google.com/webstore/detail/ennicdokmlbkfpfnoeibddegdjmhcepk

Hướng dẫn sử dụng

Sau khi cài đặt Lazy EOP, trên trình duyệt của bạn xuất hiện biểu tượng sau:

lazy eop
Biểu tượng của Lazy EOP trên trình duyệt

Bạn hãy đăng nhập vào EOP, click vào một bài bất kì, để ý bên góc trái màn hình sẽ xuất hiện một thanh công cụ màu đỏ:

lazy eop toolbar
Lazy EOP toolbar

Chức năng của 5 buttons trong hình lần lượt là:

Tự động làm tất cả các dạng bài

Tự động nghe

Trong chế độ nghe tự động, thời gian để bạn nghe mỗi từ là 2s.

tự động nghe
tự động nghe

Tự động điền

Tự động điền từ vào chỗ trống:

tự động điền
tự động điền

Tự động chọn đáp án đúng (dạng đục lỗ)

tự động đục :))
tự động đục :))

Tự động nghe và chọn đáp án đúng

nghe và chọn
nghe và chọn