Home Blog Page 207

5 tip về GitHub cho lập trình viên

GitHub là gì? Những lợi ích GitHub mang lại cho lập trình viên

Tháng 10.2017 là kỷ niệm 5 năm làm việc tại GitHub.  Cách đây 5 năm, tôi là một kế toán viên nhiệt tình, người không biết gì về lập trình, hãy để tôi nói về việc sử dụng Git và GitHub.

Bây giờ tôi là một nhà khoa học về dữ liệu, người biết rất nhiều điều về Git & GitHub. Đó là một phần nhờ vào việc học những công nghệ này mà tôi đã thực hiện chuyển đổi nghề nghiệp này.

Mẹo số 1: Thay text editor mặc định kết hợp với Git

Đối với nhiều người, trình text editor mặc định khi sử dụng Git từ thiết bị terminal là VIM. VIM có thể rất tệ hay đáng sợ đối với những người mới hoặc thậm chí là với các hacker mới vào nghề. Hoặc thậm chí đối với các hacker có nhiều kinh nghiệm @ laacked

Nếu bạn gặp phải vấn đề (bạn sẽ thấy ở tip 4), bạn sẽ bị đuổi ra khỏi VIM để khắc phục sự cố và bạn cần phải biết các lệnh VIM cụ thể để chỉnh sửa tài liệu doc. Trong hơn một năm tôi đã có một sticky note tại nơi làm việc để nhắc nhở các lệnh VIM cơ bản như i (chỉnh sửa) và: wq (lưu và bỏ). Để tránh những giọt nước mắt tiềm ẩn, bạn chỉ có thể thay đổi trình text editor mặc định.

Để thay đổi trình text editor của bạn sang Atom, Sublime, hoặc TextMate, hãy thực hiện theo các hướng dẫn trong GitHub Help này.

Bạn cũng nên chắc chắn rằng các phím tắt của bạn được thiết lập để bạn có thể mở các tập tin trong trình text editor ưa thích của bạn trực tiếp từ thiết bị đầu cuối sử dụng sử dụng subl . hoặc atom .Hãy kiểm tra các tài liệu này để thiết lập truy cập Atom từ thiết bị đầu cuối của bạn và các tài liệu này để thiết lập Sublime.

Tham khảo việc làm GIT lương cao tại TopDev

Mẹo số 2: Thay đổi dotfile

Tôi đã không tìm hiểu về dotfile cho đến khi tôi hack và sử dụng Git & GitHub trong nhiều năm. Tôi vẫn hối tiếc rằng tại sao không biết về điều này sớm hơn!

Dotfiles cho phép bạn tùy chỉnh terminal prompt để bạn có thể nhìn thấy những gì git branch của bạn đang ở & nếu bạn có thay đổi không được yêu cầu. IT’S GENIUS! Tôi lấy my dotfiles từ đồng nghiệp (John Nunemaker) nhưng nếu bạn tìm kiếm GitHub cho ‘dotfiles’, bạn sẽ tìm thấy nhiều tùy chọn.

Mẹo số 3: Cài đặt Hub

Hub là một công cụ dòng lệnh làm cho nó dễ dàng hơn để sử dụng GitHub. Thường thì tôi sẽ làm việc trên một terminal của tôi nhưng muốn xem các vấn đề hoặc kéo các yêu cầu về GitHub. Vì vậy, tôi sẽ mở một tab trình duyệt, sau đó bị quấy rầy bởi email / twitter / a puppy – và mười phút sau, hãy gõ vào địa chỉ terminal GitHub.

>>> Xem thêm: GitHub là gì? Những lợi ích GitHub mang lại cho lập trình viên

Bằng cách gõ  hub browse trong terminal, nó sẽ tự động mở ra url của terminal trực tiếp trong trình duyệt của bạn để GitHub-ing phân tán miễn phí. 

Mẹo số 4: Thực hành hợp nhất các xung đột

Tôi phải thừa nhận rằng, đôi khi mình không thành thật về điều này. Tôi không thể nhớ số lần mà tôi đã từ bỏ một dự án hoặc kéo yêu cầu bởi vì tôi gặp phải nhiều vấn đề. Các tài liệu về cách sửa chữa chúng làm tôi sợ, và sau đó khi tôi đã ở trong VIM tôi chỉ muốn từ bỏ (xem hướng dẫn số 1).

Sau đó, tôi nhận ra rằng tôi cần phải đối mặt với nỗi sợ hãi của mình vì vậy tôi bắt đầu kho thực tiễn, tạo ra xung đột hợp nhất và dọc lướt qua các tài liệu hoặc xem video trên YouTube về cách khắc phục xung đột hợp nhất. Tôi đã làm điều đó một vài lần. Giờ đây bạn cũng có thể khắc phục các xung đột đơn giản trong giao diện người dùng GitHub do đó tiện dụng.

Bây giờ khi tôi gặp rắc rối với xung đột, tôi đỡ sợ và bình tĩnh thực hiện theo cách của tôi để loại bỏ từng vấn đề, biết rằng nhờ kiểm soát phiên bản, tôi không thể gây rối lên quá nhiều.

Practice

Mẹo số 5: Tạo trang GitHub

Trang GitHub là một trang web cá nhân hoặc dựa trên dự án mà GitHub sẽ lưu trữ miễn phí! Nó luôn giúp có một dự án thực tế để thúc đẩy GitHub để thực hành với các kỹ năng về Git và GitHub của bạn.

Tạo một trang web đơn giản sử dụng HTML, CSS và JavaScript từ một hướng dẫn code sau đó làm theo các bước để lưu trữ nó trên GitHub ở đây hoặc bạn có thể kiểm tra video này tôi đã làm một thời gian trở lại với hướng dẫn từng bước. Hoặc thử phương pháp Fork and Go.

Nguồn: TopDev via Freecodecamp

Tìm việc IT lương cao, đãi ngộ tốt trên TopDev ngay!

Tạo lại bố cục bài viết của Medium với CSS Grid

Khi nghĩ về CSS Grid, mọi người thường hình dung cách bố trí ảnh với Grid và các trang web hoàn thiện. Tuy nhiên, CSS Grid thực sự là một công nghệ tuyệt vời để đặt ra các bài báo hay, vì nó cho phép bạn làm những điều mà trước đây khó khăn để đạt được.

Trong bài viết này, tôi sẽ giải thích cách tạo lại bố cục của những bài viết nổi tiếng trên Medium bằng cách sử dụng CSS Grid.

Nội dung

Chúng ta sẽ bắt đầu với một tệp HTML cơ bản, chứa đựng loại nội dung mà bạn thường tìm thấy trong bài viết Medium. Ví dụ: tiêu đề, đoạn văn, phụ đề, hình ảnh, trích dẫn … Đây là một ví dụ:

<article>
<h1>Running any NPM package in the browser locally</h1>
<p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.</p>
<blockquote>
<p>Scrimba is a platform for interactive coding screencast where         
you can run the code at any moment in time.</p>
</blockquote>
<figure>
<img src="https://mave.me/img/projects/full_placeholder.png">
</figure>

Nếu bạn mở tệp này trong trang web mà không điều chỉnh bất kỳ bố cục nào, nó sẽ giống như sau:

Không thật sự đặc biệt. Vì vậy, hãy sửa nó bằng CSS Grid. Chúng tôi sẽ thực hiện từng bước để bạn có thể làm theo.

Thiết lập cơ bản cho lề

Điều đầu tiên chúng ta cần làm là đưa lưới vào bài viết và chia nó ít nhất thành ba cột.

article {
    display: grid;
    grid-template-columns: 1fr 740px 1fr;
}

Các cột đầu tiên và cuối cùng phản hồi và hoạt động như lề. Chúng sẽ chứa những khoảng trắng. Cột giữa được cố định ở 740 điểm ảnh và sẽ giữ nội dung của bài viết.

Lưu ý rằng chúng tôi không xác định các hàng bởi vì chúng sẽ đơn giản là cao để cần phải được để phù hợp với nội dung của họ. Mỗi khối nội dung trong bài viết (đoạn, hình ảnh, tiêu đề) sẽ có hàng riêng của nó.

Bước tiếp theo là đảm bảo tất cả nội dung trong grid bắt đầu ở dòng cột thứ hai theo mặc định.

article > * {
    grid-column: 2;
}

Bây giờ chúng ta có kết quả sau:

Chúng ta có thể thấy ngay sự khác biệt, vì khoảng trắng ở mỗi bên giúp cho văn bản dễ đọc hơn.

Tuy nhiên, hiệu ứng này có thể đạt được cũng dễ dàng bằng cách đặt thuộc tính lề trái và phải để tự động. Vậy tại sao lại phải sử dụng CSS Grid?

Bởi vì, vấn đề phát sinh khi chúng tôi muốn bắt chước các tính năng hình ảnh của Medium. Ví dụ: tạo hình ảnh có chiều rộng đầy đủ, như hình:

Nếu chúng ta đã sử dụng tự động lề là 0, điều này sẽ buộc chúng ta phải áp dụng lề âm lên hình ảnh để làm cho chúng chiếm toàn bộ chiều rộng trang web.

Với CSS Grid, chúng ta có thể dễ dàng chia ra, vì chúng ta sẽ chỉ sử dụng các cột để đặt chiều rộng. Để làm cho hình ảnh của chúng tôi chiếm toàn bộ chiều rộng chúng tôi sẽ chỉ cho nó cuộn từ dòng đầu tiên đến dòng cột cuối cùng.

article > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}

Chúng tôi cũng đặt lề trên đầu và cuối. Và sau đó chúng ta có một hình ảnh đẹp với toàn chiều rộng:

Mở rộng với nhiều cột hơn

Tuy nhiên, điều này không mang lại cho chúng ta tất cả, vì Medium có một vài bố cục khác mà chúng ta cần phải tính đến. Hãy nhìn vào một vài trường hợp điển hình:

Hình ảnh cỡ trung

Đây là tùy chọn hình ảnh giữa chế độ bình thường và chế độ toàn bộ chiều rộng, chúng ta sẽ gọi là một kích thước trung bình. Ví dụ:

Quote

Ngoài ra,Medium cũng đặt một đường thẳng đứng ở phía bên tay trái của bài viết nếu bạn thêm một lời dẫn:

Điều này đòi hỏi một cột nhỏ ở phía bên tay trái của grid. Để làm cho mọi thứ cân đối, chúng tôi cũng sẽ thêm một cột tương tự ở phía bên tay phải.

Vì vậy, để hỗ trợ cả quote và hình ảnh mid-sized, chúng ta cần chia toàn bộ chiều rộng thành bảy cột thay vì ba, như sau:

article {
    display: grid;
    grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;
}

Nếu chúng tôi sử dụng Chrome inspector , chúng tôi thực sự có thể thấy các đường grid bên dưới (xem hình bên dưới). Thêm vào đó, tôi đã thêm các con trỏ để thực hiện để làm cho nó dễ dàng hơn để nhận ra các cột khác nhau.

Điều đầu tiên chúng ta cần làm là làm cho tất cả các mục mặc định bắt đầu ở dòng cột thứ tư thay vì ở thứ hai.

article > * {
    grid-column: 4;
}

Sau đó chúng ta có thể tạo hình ảnh cỡ trung bằng cách:

article > figure {
    grid-column: 2 / -2;
    margin: 20px 0;
}

Đây là cách mà Chrome đã hoạt động:

Các quote dễ dàng được tạo ra bằng cách làm như sau:

article > blockquote {
    grid-column: 3 / 5;
    padding-left: 10px;
    color: #666;
    border-left: 3px solid black;
}

Chúng tôi làm cho nó kéo dài từ thứ ba đến thứ ba cho dòng cột thứ năm. Chúng tôi cũng thêm padding-left: 10px; để văn bản dường như bắt đầu ở dòng cột thứ tư (cột thứ ba rộng 10 pixel). Đây là cách nó trông trên grid.

https://cdn-images-1.medium.com/max/1000/1*SiTYghcUyboIplQOfFQTqA.png

Sidemark

Medium có một cách khá tốt đẹp để báo hiệu nội dung nào trong bài viết cần làm nổi bật nhất. Văn bản chuyển thành màu xanh lá cây, và nó sẽ là một điểm nổi bật nhất ở phía bên tay phải.

Các văn bản nổi bật hàng đầu sẽ rất khó để tạo ra nếu chúng ta sử dụng margin: 0 auto; thay vào đó là CSS Grid. Điều này là do yếu tố hoạt động khác với tất cả các yếu tố khác trong bài viết. Thay vì xuất hiện trên một đường thẳng, giả sử xuất hiện ở phía bên tay phải của phần tử trước đó. Nếu chúng ta không sử dụng CSS Grid thì có lẽ chúng ta phải bắt đầu lộn xộn với position: absolute; để làm cho công việc này.

Nhưng với CSS Grid thì thật đơn giản. Chúng ta sẽ làm cho loại nguyên tố đó bắt đầu trên dòng cột thứ tư.

.aside {
    grid-column: 5;
}

Việc này sẽ tự động đặt nó ở bên phải của bài viết:

Lưu ý: Tôi đã không đánh dấu văn bản màu xanh lá cây,

vì điều đó không có gì liên quan đến CSS Grid.

Và đó là nó! Bây giờ chúng tôi đã tạo lại hầu hết cách bố trí bài viết của Medium bằng cách sử dụng CSS Grid. Và nó đã được thực hiện khá dễ dàng. Tuy nhiên, lưu ý rằng chúng tôi đã không chạm đến những phản hồi, vì điều đó đòi hỏi toàn bộ bài viết mới.

Nguồn: TopDev via Freecodecamp

Dialogflow – Đưa Chatbot dự báo thời tiết lên tầm cao mới (phần 1)

Cố gắng làm hài lòng tất cả mọi người là điều không thể

Trong bài viết đầu tiên, tôi đã giới thiệu với chúng ta các khái niệm Agent, Intent, Entity, và ở bài viết thứ hai là cách để tạo một Chatbot dự báo thời tiết rất, rất đơn giản từ các Prebuilt Agents. Trong phần một bài viết này, tôi muốn quay lại với các khái niệm quan trọng khác trong Dialogflow bao gồm:

  1. Fulfillment
  2. Context
  3. User say
  4. Action và Parameter

Nào hãy cùng nhau bắt đầu!

Fulfillment

Như hình ở trên, trong nội dung các intents về thời tiết, phần response là hoàn toàn trống rỗng, nên mỗi khi người dùng hỏi Chatbot thì nó không có gì để trả lời lại:

Và tôi đã phải bổ sung một vài “biện pháp nghiệp vụ” (code) thì sau đó mọi thứ đã tốt hơn

Theo định nghĩa của từ điển, FULFILLMENT là danh từ có nghĩa là thực hiện, hoàn thành, đáp ứng. Trong tài liệu của Dialogflow, Fulfillment (hay Webhook) là một API ở Backend mà chúng ta cần cung cấp để Dialogflow gọi đến khi cần xử lý nghiệp vụ trước khi Dialogflow trả lời lại cho người dùng.

Tuy nhiên, với cách mà tôi đang thực hiện việc Fulfillment cho Chatbot dự báo thời tiết hoàn toàn khác với cách ở trên, cách mà tôi đang thực hiện là

Theo tôi cách thực hiện Fulfillment nào cũng có cái hay của riêng nó.

Context

Theo từ điển, CONTEXT có nghĩa là bối cảnh, ngữ cảnh, phạm vi. Lấy ví dụ trong Chatbot, người dùng vừa hỏi “Thời tiết ở Hà Nội” và đã nhận được câu trả lời, họ đặt tiếp thêm một câu hỏi nữa “Vậy ở Đà Nẵng thì thế nào?”, trường hợp nếu không có context Chatbot không thể nào hiểu được người dùng đang hỏi vấn đề gì liên quan đến Đà Nẵng, còn trường hợp có context Chatbot sẽ biết ngay người dùng đang hỏi tiếp về thời tiết của Đà Nẵng.

Trong một Intent của Dialogflow có input context và output context như hình dưới đây:

Input context có nhiệm vụ giúp Dialogflow xác định Intent này chỉ được thực hiện khi đang có các context tương ứng

Mặc định, một context của Dialogflow sẽ hết hạn sau 5 lần requests hoặc 10 phút kể từ khi nó được tạo ra. Như trong hình, số 2 ở context weather có nghĩa là context này sẽ hết hạn sau 2 lần requests (hoặc sau 10 phút)

User say

Có 2 loại user say trong Dialogflow

  • @ Là những mẫu (template) văn bản
  •  Là những ví dụ (example) mà người dùng sẽ có thể nói

Mặc dù Dialogflow hỗ trợ cả hai loại hình trên, nhưng khuyến cáo chúng ta chỉ nên sử dụng loại số 2 (example) vì nó giúp cho việc học cũng như xử lý của Dialogflow hoạt động nhanh & tối ưu hơn.

Ngoài ra, chúng ta hãy ghi nhớ khi tạo intents, nếu nhập được càng nhiều các ví dụ ở user say thì càng giúp cho Chatbot càng “thông minh” hơn.

Action và Parameter

Trong source code Chatbot dự báo thời tiết củ chuối lần trước, nếu người dùng gửi nội dung không liên quan đến thời tiết thì luôn gặp lỗi

(Chắc có vài bạn đọc đã *b*e*e*p* rồi đúng không nào?!)

Lý do là tôi đã luôn cho rằng mọi văn bản mà người dùng đưa vào đều là hỏi thời tiết mà bỏ qua việc kiểm tra.

Action (hành động) chính là giá trị mà Dialogflow hỗ trợ để giúp lập trình phân biệt được trong trường hợp này đâu là các văn bản liên quan đến thời tiết và đâu là các văn bản khác. Đi kèm với Action là các Parameter (tham số)

Mỗi tham số là giá trị được trích xuất từ văn bản của người dùng thông qua việc sử dụng các entities tương ứng, ví dụ:

  • Tham số address, kiểu @sys.location, khi đó, trong văn bản của người dùng có Hà Nội, hay Đà Nẵng, Tokyo, New York, Paris,… thì sẽ được Dialogflow xử lý để gán vào cho tham số address
  • Tham số date-time, kiểu @sys.date-time, khi đó, trong văn bản của người dùng mà có Ngày mai, Thứ 6 này, Tuần tới,… thì sẽ được Dialogflow xử lý để gán vào cho tham số date-time

Khi định nghĩa các tham số, có các thông tin mà chúng ta cần quan tâm (^^ Để ý nhé)

  • Constant: Là giá trị mà chúng ta nhập vào ô value, tham số sẽ luôn luôn mang giá trị này
  • Default: Là giá trị mặc định được gán cho tham số nếu trong văn bản của người dùng không đề cập đến
  • IsList: Ví dụ người dùng hỏi thời tiết của Hà Nội, Đà Nẵng và Paris ngay trong một văn bản, thì IsList giúp Dialogflow xác định cả 3 giá trị sẽ được gán vào cho cùng 1 tham số
  • Required: Khi required được lựa chọn, nếu trong văn bản của người dùng mà Dialogflow không tìm được giá trị để gán vào cho tham số, Dialogflow sẽ đánh dấu để yêu cầu người dùng đưa vào.
    • Ví dụ tham số address là required, nhưng người dùng chỉ nhập vào là: Ngày mai thời tiết thế nào? Thì Dialogflow sẽ đánh dấu văn bản này chưa đầy đủ, còn thiếu địa chỉ.

Bắt đầu thấy rối rồi! Tập trung nhé, vì các tham số là cái mà chúng ta sẽ lập trình để xử lý. Sai con toán là bán luôn cái máy tính…

  • Kiểu @sys.date rất đặc biệt, khi văn bản của người dùng có ngày không đầy đủ, ví dụ Thứ 6, hay ngày 2 tháng 3,… thì Dialogflow sẽ tìm ngày trong tương lai gần nhất với văn bản. Tuy nhiên, bạn có thể chỉ định thêm các thông tin như:
    • $date.recent, trường hợp này Dialogflow sẽ tìm ngày gần nhất trong quá khứ
    • $date.partial, trường hợp này Dialogflow sẽ trả về dữ liệu ngày mà không có những thông tin thiếu, ví dụ ngày 2 tháng 3 thì Dialogflow sẽ trả về giá trị “UUUU-03-02”

Khi backend của bạn xử lý các tham số, sẽ có những trường hợp

  • Original: Ví dụ tham số của bạn kiểu @sys.number, khi người dùng nói “Hai” thì giá trị bạn nhận được là số 2, còn giá trị ở original vẫn là chuỗi “Hai”
  • Để lấy một tham số đã được lưu ở context thì sử dụng cách #context_name.parameter_name

Tham khảo thêm các vị trí tuyển dụng lập trình it lương cao tại Topdev.

Nguồn: Dialogflowvn

Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 1)

JS Template literals

Template literals là gì? Nó cho phép lập trình viên có thể nhúng biểu thức JavaScript (hoặc multi-line string, biến, hàm…) bên trong chuỗi string một cách dễ dàng. Thông thường cú pháp khai báo string là dấu ' hoặc " , đối với template literals thì ta khai báo bằng dấu ` gọi là dấu back-tick. Nó giúp chúng ta làm việc với string dễ dàng hơn trước, muốn sử dụng nó thì dùng ${bien} . Xem ví dụ bên dưới:

var fName = 'Peter', sName = 'Smith', age = 43, job= 'photographer';
var a = 'Hi, I\'m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';
var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;

Điều này giúp code của bạn dễ đọc hơn. Bạn có thể đặt bất cứ điều gì bên trong của dấu ngoặc nhọn: biến, phương trình, hoặc các function call.

Block Scoping

Trong JS, scope đề cập đến ngữ cảnh hiện tại trong code của bạn. Scope có thể được xác định trên globally hoặc locally . Hiểu về scope trong js là chìa khóa để viết code chống lỗi và trở thành developer tốt hơn. Bạn sẽ hiểu được ở đâu variables/functions có thể được truy cập, có thể thay đổi scope của ngữ cảnh trong code của bạn, nói nôm na là có thể viết code nhanh hơn và dễ maintain hơn, cũng như debug dễ dàng hơn.

  • Block Scoped là phạm vi trong một khối, nghĩa là chỉ hoạt động trong phạm vi được khai báo bời cặp {...}.
  • ở Es6 người ta sử dụng biến let và const để khai báo cho biến trong cặp {}

Xem việc làm javascript đãi ngộ tốt trên TopDev

Khai báo ‘Let’

Điều này cũng tương tự như var nhưng có một vài khác biệt đáng chú ý. Vì với phạm vi một khối, một biến mới có cùng tên có thể được khai báo mà không ảnh hưởng đến các biến bên ngoài.

var a = 'car' ;
{
    let a = 5;
    console.log(a) // 5
}
console.log(a) // car

Vì nó bị ràng buộc thành một block scope, nó giải quyết câu hỏi này:
“Đầu ra là gì, và làm thế nào bạn sẽ làm cho nó hoạt động như chúng ta mong đợi?”

for (var i = 1; i < 5; i++){
    setTimeout(() => { console.log(i); }, 1000);
}

Trong trường hợp này nó xuất ra “5 5 5 5 5” bởi vì biến i thay đổi trên mỗi lần lặp.

Nếu bạn chuyển var thành let sau đó tất cả mọi thứ thay đổi . Bây giờ, mỗi vòng lặp tạo ra một block scope mới với giá trị bị ràng buộc với vòng lặp đó. Đó là mặc dù bạn đã viết:

{let i = 1; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 2; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 3; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 4; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 5; setTimeout(() => { console.log(i) }, 1000)}

Một khác biệt giữa var và let  là let không bị “hoisted” như var .

Note: hoisted nghĩa là trong Javascript bạn có thể định nghĩa một biến sau khi sử dụng nó, hay nói cách khác một biến có thể được sử dụng trước và định nghĩa sau.

{ 
    console.log(a); // undefined
    console.log(b); // ReferenceError
    var a = 'car';
    let b = 5;
}

Bởi vì hành vi của nó chặt chẽ và dễ dự đoán hơn, một số người đã nói rằng bạn nên sử dụng let thay vì var, trừ khi bạn đặc biệt cần hoisting hoặc looser scoping mà var khai báo.

Const

Nếu bạn muốn khai báo một biến không đổi trong JavaScript trước đó, nó đã được quy ước để đặt tên cho biến trong block cap. Tuy nhiên, điều này sẽ không secure biến – nó chỉ cho phép các developer khác biết rằng đó là một hằng số và không nên thay đổi.

Bây giờ chúng ta khai báo biến const.

{
    const c = "tree";
    console.log(c);  // tree
    c = 46;  // TypeError! 
}

const  không làm cho biến không thể thay đổi, mà nó chỉ gán cứng giá trị cho biến. Nhưng nếu bạn có một công việc phức tạp (object hay array), thì giá trị vẫn có thể được sửa đổi.

{
    const d = [1, 2, 3, 4];
    const dave = { name: 'David Jones', age: 32};
    d.push(5); 
    dave.job = "salesman";
    console.log(d);  // [1, 2, 3, 4, 5]
    console.log(dave);  // { age: 32, job: "salesman", name: 'David Jones'}
}

Vấn đề với block scoping function

Các khai báo Function bây giờ được chỉ định để ràng buộc block scoping.

{
    bar(); // works
    function bar() { /* do something */ }
}
bar();  // doesn't work

Vấn đề xảy ra khi bạn khai báo một function bên trong câu lệnh if.
Cùng xem xét điều này:

if ( something) {
    function baz() { console.log('I passed') }
} else {
    function baz() { console.log('I didn\'t pass') } 
} 
baz();

Trước ES6, cả hai khai báo function đã được “hoisted” và kết quả sẽ là ‘I didn\’t pass’. Bây giờ chúng ta nhận được ‘ReferenceError’, như baz luôn bị ràng buộc bởi block scope.

Spread

ES6 giới thiệu ... operator, được gọi là ‘spread operator’ (Spread Operator cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator này có syntax là 3 dấu chấm ...). Nó có hai cách sử dụng chính: truyền một array hay object vào một array hay object mới, và đưa nhiều tham số vào một array.

Trường hợp sử dụng đầu tiên là trường hợp bạn dễ gặp phải nhất, vì vậy chúng ta sẽ hãy xem xét nó đó đầu tiên.

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

Điều này có thể rất hữu ích cho việc đẩy một tập các biến sang một function từ một array.

function foo(a, b, c) { console.log(`a=${a}, b=${b}, c=${c}`)} 
let data = [5, 15, 2];
foo( ...data); // a=5, b=15, c=2

Một object cũng có thể được truyền vào, nhập mỗi cặp giá trị quan trọng vào object mới.

let car = { type: 'vehicle ', wheels: 4};
let fordGt = { make: 'Ford', ...car, model: 'GT'};
console.log(fordGt); // {make: 'Ford', model: 'GT', type: 'vehicle', wheels: 4}

Một tính năng khác của spread operator là nó tạo ra một array hoặc object mới. Ví dụ dưới đây tạo ra một array mới cho b, nhưng c chỉ refer đến cùng một array.

let a = [1, 2, 3];
let b = [ ...a ];
let c = a;
b.push(4);
console.log(a);  // [1, 2, 3]
console.log(b);  // [1, 2, 3, 4] referencing different arrays
c.push(5);
console.log(a);  // [1, 2, 3, 5] 
console.log(c);  // [1, 2, 3, 5] referencing the same array

Trường hợp còn lại là thu thập các biến với nhau thành một array. Điều này rất hữu ích khi bạn không biết có bao nhiêu biến được truyền vào một function.

function foo(...args) {
    console.log(args); 
} 
foo( 'car', 54, 'tree');  //  [ 'car', 54, 'tree' ]

Tham số mặc định

Các Function có thể được định nghĩa cùng các tham số mặc định. Thiếu hoặc không xác định giá trị được khởi tạo với giá trị mặc định. Hãy cẩn thận – bởi vì giá trị nullfalse bị ép buộc là 0.

function foo( a = 5, b = 10) {
    console.log( a + b);
} 
foo();  // 15
foo( 7, 12 );  // 19
foo( undefined, 8 ); // 13
foo( 8 ); // 18
foo( null ); // 10 as null is coerced to 0

Giá trị mặc định có thể nhiều định dạng hơn – chúng cũng có thể là các biểu thức hoặc các hàm.

function foo( a ) { return a * 4; }
function bar( x = 2, y = x + 4, z = foo(x)) {
    console.log([ x, y, z ]);
}
bar();  // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ] 
bar( 10, undefined, 3 );  // [ 10, 14, 3 ]

Phần 2: Mẹo với ES6 và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn

TopDev via Freecodecamp

Việc làm IT mới nhất trên TopDev

Tại sao bạn nên sử dụng Python Generator

Tại sao bạn nên sử dụng Python Generator

Generator đã là một phần quan trọng của Python kể từ khi được giới thiệu với PEP 255.

Generator function cho phép bạn tuyên bố một function hoạt động giống như một iterator.

Chúng cho phép các lập trình tạo ra một iterator một cách nhanh chóng và dễ dàng.

Iterator là gì, bạn có thể yêu cầu?

Iterator là một đối tượng có thể lặp lại (looped). Nó được sử dụng để phản ánh một container dữ liệu để làm cho nó hoạt động giống như một đối tượng iterable. Có thể bạn đã sử dụng một vài đối tượng có thể lặp lại mỗi ngày: các string, list và từ điển để đặt tên cho một số.

Một iterator được định nghĩa bởi một class thực hiện các Iterator Protocol. Giao thức này chỉ ra hai phương pháp trong class: __iter__ và __next__.

Quay lại. Tại sao bạn thậm chí muốn tạo ra iterators?

  71 trích đoạn code Python cho các vấn đề hàng ngày của bạn

Tiết kiệm không gian bộ nhớ

Các iterator không tính toán giá trị của mỗi mục khi khởi tạo. Chúng chỉ tính toán nó khi bạn yêu cầu nó. Đây được gọi là lazy evaluation.

Lazy evaluation thực sự hữu ích khi bạn có một bộ dữ liệu cực lớn để tính toán. Nó cho phép bạn sử dụng dữ liệu ngay lập tức, trong khi cả bộ dữ liệu đang được tính.

Giả sử chúng ta muốn nhận được tất cả các số nguyên tố nhỏ hơn một số cực đại.

Trước tiên chúng ta xác định hàm kiểm tra nếu một số là số nguyên tố:

def check_prime(number):
    for divisor in range(2, int(number ** 0.5) + 1):
        if number % divisor == 0:
            return False
    return True

Sau đó, chúng ta định nghĩa class bao gồm phương thức __iter__  và __next__ :

class Primes:
    def __init__(self, max):
        self.max = max
        self.number = 1
    def __iter__(self):
        return self
    def __next__(self):
        self.number += 1
        if self.number >= self.max:
            raise StopIteration
        elif check_prime(self.number):
            return self.number
        else:
            return self.__next__()

Primes được khởi tạo với giá trị lớn nhất. Nếu số nguyên lớn tiếp theo lớn hơn mức max, iterator sẽ tăng một ngoại lệ StopIteration, kết thúc Iterator.

Khi chúng ta yêu cầu các element tiếp theo trong Iterator, nó sẽ tăng number một đơn vị và kiểm tra xem đó có là một số nguyên tố. Nếu không, nó sẽ gọi __next__ một lần nữa cho đến khi number đó là số nguyên tố. Một khi đạt được, Iterator trả về số.

Bằng cách sử dụng một Iterator, chúng ta không tạo ra một danh sách các số nguyên tố trong bộ nhớ của chúng ta. Thay vào đó, chúng tôi sẽ tạo ra số nguyên tố tiếp theo mỗi khi được yêu cầu.

Hãy thử nó:

primes = Primes(100000000000)
print(primes)
for x in primes:
    print(x)
---------
<__main__.Primes object at 0x1021834a8>
2
3
5
7
11
...

Mỗi lần lặp của đối tượng Primes gọi __next__ để tạo ra số nguyên tố tiếp theo.

Iterator chỉ có thể được lặp lại qua một lần. Nếu bạn cố lặp lại primes một lần nữa, sẽ không có giá trị nào được trả về và điều này hoạt động giống như một danh sách trống rỗng.

Bây giờ chúng ta đã biết iterator là gì và làm thế nào để tạo ra chúng, tiếp theo là về generator.

  Chuyển đổi Unicode dựng sẵn & tổ hợp với Python

Generator

Nhớ lại rằng generator function cho phép chúng ta tạo ra các iterator theo một cách đơn giản hơn.

Generator giới thiệu câu lệnh yield cho Python. Nó hoạt động giống như return vì nó trả về một giá trị.

Vậy là chúng ta đã tiết kiệm được trạng thái của function. Trong lần tiếp theo function được gọi, vẫn tiếp tục từ nơi dừng lại, với cùng các giá trị biến mà nó đã có trước khi yielding.

Nếu chúng ta chuyển  Primes iterator thành generator, nó sẽ giống như sau

def Primes(max):
    number = 1
    while number < max:
        number += 1
        if check_prime(number):
            yield number
primes = Primes(100000000000)
print(primes)
for x in primes:
    print(x)
---------
<generator object Primes at 0x10214de08>
2
3
5
7
11
...

Bây giờ đó là pythonic! Liệu ta có thể làm tốt hơn không?

Vậy, chúng ta có thể sử dụng Generator Expressions, được giới thiệu với PEP 289.

Đây là danh sách comprehension equivalent của generator. Nó hoạt động chính xác giống như comprehension, nhưng biểu thức được đặt trong() và trái ngược với [].

Các biểu thức sau đây có thể thay thế generator function ở trên:

primes = (i for i in range(2, 100000000000) if check_prime(i))
print(primes)
for x in primes:
    print(x)
---------
<generator object <genexpr> at 0x101868e08>
2
3
5
7
11
...

Đây là khả năng của generator bằng Python.

Tóm lại

  • Generator cho phép bạn tạo các iterator theo cách rất pythonic.
  • Iterator cho phép lazy evaluation, chỉ tạo ra element tiếp theo của một đối tượng có thể lặp lại khi được yêu cầu. Điều này hữu ích đối với bộ dữ liệu cực lớn.
  • Iterator và generator chỉ có thể lặp lại được một lần.
  • Generator Function tốt hơn Iterator.
  • Generator Expressions tốt hơn các Iterator (đối với các trường hợp đơn giản).

Nguồn: TopDev via Freecodecamp

Xem thêm tuyển dụng lập trình python lương up to 20M

Hãy nắm vững nguyên tắc cơ bản nếu như bạn muốn trở thành bậc thầy thiết kế

Tuần trước, một độc giả đã đặt ra một câu hỏi: Làm cách nào để trở thành một designer bậc thầy?

Khi đang suy nghĩ về câu trả lời, đầu óc của tôi cảm thấy điều này giống như học tiếng Quan Thoại. Gần đây, tôi quyết định tự học thêm một ngôn ngữ mới. Khi nói đến việc học một ngôn ngữ mới, trước tiên bạn phải nắm vững các nguyên tắc cơ bản. Danh từ, đại danh và động từ là cơ sở cho việc có được những ý tưởng phức tạp hơn.

Ngôn ngữ là phương tiện mà mọi người giao tiếp với nhau. Visual design là một ngôn ngữ bằng thị giác. Và việc học visual design không khác gì việc học một ngôn ngữ mới.

Một visual design tốt không được sinh ra mà được tạo ra. Chìa khóa để trở thành designer tốt là sự nghiêm khắc. Bạn sẽ chỉ tiến bộ như là một designer nếu bạn có sự nỗ lực.

Đây là một số nguyên tắc cơ bản bắt buộc phải nắm vững nếu bạn muốn tiến bộ trong thiết kế.

Nguyên tắc # 1: Quay lại với kiểu chữ cơ bản

Kiểu chữ mà designer sử dụng nói lên rất nhiều điều. Bởi vì cách sử dụng phông chữ là một điều cơ bản cho thiết kế.

Bạn có thể tạo ra toàn bộ thiết kế chỉ bằng việc dùng text. Ngoài ra cũng có thể thiết kế đơn giản bằng theo chữ, chọn được sự tinh tế từ các phông chữ mà bạn chọn. Để cải thiện cách bạn typography, hãy bắt đầu bằng việc học những điều cơ bản đầu tiên.

Phát triển từ vựng để mô tả kiểu chữ. Tìm hiểu về các thuật ngữ như tracking, kerning, và leading mean. A Beautifully Illustrated Glossary Of Typographic Terms You Should Know  là một bài báo tuyệt vời để học các thuật ngữ này.

Tiếp theo, nếu bạn muốn có hiểu biết toàn diện về cách áp dụng typography vào webiste, hãy đọc Web Typography: The Elements ofTypographic Style Applied to the Web.

Cuối cùng, hãy học cách kết nối phông chữ với nhau. Một tài liệu tuyệt vời viết về điều này là FontWolfFontPair. Việc kết hợp phông chữ với nhau sẽ làm thay đổi thiết kế của bạn.

Để tìm hiểu sâu hơn về typography, bạn có thể đọc bài báo của tôi: Typography can make your design… Or break it.

Nguyên tắc # 2: Dùng khoảng trống để tạo sự cân bằng

Khoảng trống tạo ra chuyển động dọc và ngang trong thiết kế. Nó là điều then chốt cho việc tạo ra hệ thống phân cấp thị giác và mối liên hệ giữa các yếu tố.

Bạn có thể nhìn vào các trang web như BehanceDribbble để có được cảm hứng về cách dùng khoảng trống trong thiết kế. Sử dụng không gian thật sự quan trọng sử để tạo sự cân bằng và sự hài hòa thị giác.

Khi nghiên cứu về typography, bạn có thể nhận thấy tầm quan trọng của khoảng cách trong thiết kế. Điều chỉnh kerning và leading của phông là một bài tập tuyệt vời để phát triển khả năng dùng ngôn ngữ. Vì lý do này, tôi khuyên bạn nên thử KernType, một trò chơi để so sánh giải pháp kerning của bản thân với giải pháp của người khác.

Một bài tập khác sẽ giúp bạn phát triển mắt là: Dùng một thiết kế hiện có, vẽ trục x và y, đơn giản hóa mọi thứ thành các hình dạng cơ bản, phân tích sự cân bằng, và sắp xếp lại các phần tử. Đặc biết chú ý đến ảnh hưởng của “negative space” đến sự cân bằng của các phần tử.

Nguyên tắc # 3: Thay đổi kích thước để tạo ra phân cấp thị giác

Khi tạo ra hệ thống phân cấp thị giác, kích thước là yếu tố hàng đầu. Bằng cách thay đổi kích thước để truyền đạt các mối quan hệ thị giác giữa các phần tử, bạn có thể tạo ra dòng thiết kế.

Sizing là một trong những lý do giải thích tại sao Grid hữu ích. Bạn có thể sử dụng Grid để giúp bạn điều chỉnh kích thước theo tỉ lệ các phần tử để truyền đạt tầm quan trọng.

Một khi bạn đã xác định được kích thước cho một phần tử, giữ nó như nhau trong tất cả các trường hợp. Trong thiết kế, tính nhất quán là “King”.

Đây là một bài tập giúp bạn phát triển khả năng dùng kích thước:

Điều quan trọng nhất là yêu cầu feedback.

Phác hoạ hoặc wireframe một landing page. Sau đó nhờ một người bạn xem xét bằng cách giúp họ thấy các yếu tố nổi bật nhất để họ ghi số các yếu tố dựa trên visual weight. Liệu kết quả có phải những gì bạn mong đợi?

Khi thực hiện bài tập này, hãy nhớ những câu hỏi sau:

  • Mục đích chuyển đổi của landing page là gì? Làm thế nào bạn có thể tối ưu hóa để đạt được mục tiêu?
  • Mối quan hệ giữa các yếu tố khác nhau là gì? Bạn muốn nhấn mạnh yếu tố nào?
  • Bố cục của bạn có hướng dẫn người dùng qua trang này không?

Nguyên tắc # 4: Sử dụng màu sắc để truyền tải ý nghĩa

Màu sắc đóng vai trò trong nhiều phương diện khác nhau. Nó chuyển tải ý nghĩa, tạo cộng hưởng cảm xúc và mang lại sự thống nhất cho thiết kế.

Để hiểu sâu về vào màu sắc, bạn có thể đọc bài viết của tôi Designing in Color. Dưới đây là một số điểm chính.

  • Xác định mục đích thiết kế của bạn trước khi chọn một bảng màu. Thiết kế tốt là sự hòa hợp hoàn hảo của bảng màu với mục đích cần truyền tải.
  • Xác định đối tượng. Mọi người thường thấy màu sắc khác nhau. Thế nhưng có những tác động khác nhau đối với người dân dựa trên sở thích cá nhân của họ, văn hoá và kinh nghiệm.
  • Khi chọn một bảng màu, sự đơn giản chính là chìa khóa. Chọn màu nền trung tính. Sau đó chọn màu sắc chính và phụ. Cuối cùng dựa trên các màu khác, tìm ra lỗi và màu thành công cho các trạng thái giao diện khác nhau của bạn.

Một khi bạn có được sự nắm bắt tốt về những điều cơ bản màu sắc, màu sắc đến từ quá trình thử nghiệm và lặp đi lặp lại. Chủ động cố gắng thoát ra khỏi thói quen và thử bảng màu mới.

Đây là một bài tập giúp bạn phát triển khả năng dùng màu sắc:

Dành thời gian biên soạn bảng màu cho những thứ xung quanh như ảnh, tạp chí và chương trình yêu thích của bạn. Sau đó lấy một thiết kế hiện có và áp dụng bảng màu mới vào nó.

Hãy lưu ý cách màu sắc làm đổi tâm trạng của thiết kế. Nó có thay đổi ý nghĩa không?

—–

Và xem thiết kế của bạn như là một nghề thủ công, trong đó luôn có những thứ để cải thiện. Luôn có động lực để trở thành một nhà thiết kế tốt hơn.

Nguồn: TopDev via Freecodecamp

Câu chuyện về khát vọng chinh phục giải pháp không dây của một doanh nghiệp Việt

Theo thống kê, Việt Nam hiện đang có 49 triệu xe máy và khoảng 3,2 triệu xe ô tô (đã đăng ký). Tính theo con số sở hữu phương tiện thì cứ 1000 dân sở hữu 22 ô tô và đối với xe máy là 516 xe. Với tốc độ phát triển như hiện nay, đặt ra một thách thức lớn cho ngành giao thông vận tải của nước trong công tác quản lý và giám sát các phương tiện tham gia giao thông.

Việc quản lý giám sát trong doanh nghiệp vận tải là vô cùng cần thiết, không chỉ là để chủ xe có thể quản lý phương tiện của mình, mà còn là cách để nâng cao ý thức tham gia giao thông của các tài xế, không ít doanh nghiệp đã tìm tới các thiết bị định vị giám sát hành trình, phần mềm quản lý qua smartphone để theo dõi hành trình của lái xe. Đồng thời, đó cũng chính là quy định của chính phủ về điều kiện đăng kí kinh doanh vận tải ô tô.

(Nghị định 86/2014/NĐ-CP đã quy định về việc lắp thiết bị giám sát hành trình. Quy định đối với xe ô tô kinh doanh vận tải hành khách, xe ô tô kinh doanh vận tải hàng hóa bằng công – ten – nơ, xe đầu kéo kéo rơ moóc, sơ mi rơ moóc hoạt động kinh doanh vận tải và xe ô tô kinh doanh vận tải hàng hóa phải gắn thiết bị giám sát hành trình; thiết bị giám sát hành trình phải đảm bảo tình trạng kỹ thuật tốt và hoạt động liên tục trong thời gian xe tham gia giao thông.)

Xuất phát từ trăn trở về bài toán là làm sao để thực hiện tra cứu xe đi, xác định vị trí của xe chính xác ngay lập tức; lưu thông tin của các tuyến đường xe đi qua; giám sát chặt chẽ tiêu hao nhiên liệu của xe; xe dừng xe chạy; giám sát đóng mở cửa xe; giám sát tải trọng… Để giúp đỡ người quản lý trong công tác quản lý giám sát xe công ty TNHH A.D.A (Asian Dragon Company Limited) – với tên thương mại là Magiwan đã phát triển hệ thống các thiết bị giám sát hành trình không dây, chuyên cung cấp các giải pháp công nghệ Giám sát, Điều phối bao gồm:

–  Giải pháp Giám sát, Điều phối phương tiện vận tải Hành khách, Hàng hóa, Đường bộ.

–  Giải pháp Giám sát, Điều phối phương tiện Vận tải đường Thủy.

– Giải pháp Giám sát, Điều phối phương tiện trong doanh nghiệp sản xuất Bê tông tươi.

–  Giải pháp quản lý Nhiên liệu, Nhiệt độ, Tải trọng, ….

–  Giải pháp  Quản lý Nhân viên Mãi vụ

–  Giải pháp Quản lý phương tiện cá nhân

Magiwan tự hào là đơn vị tiên phong lĩnh vực cung cấp sản phẩm thiết bị giám sát hành trình hợp quy, sản phẩm đã và đang có mặt trên 63 tỉnh thành cả nước, mang lại những tiện ích to lớn cho các nhà quản lý doanh nghiệp vận tải, qua đó góp phần vào sự phát triển chung của lĩnh vực giao thông vận tải. Trong 10 năm trưởng thành và phát triển Magiwan tự hào là :

  • Một trong những công ty đầu tiên cung cấp giải pháp GPS tại thị trường Việt Nam từ năm 2007.
  • Liên tiếp nhiều năm liền nằm trong top các nhà cung cấp dịch vụ GPS tại Việt Nam có số lượng thuê báo lớn nhất qua các năm từ 2008 đến nay.
  • Là đối tác tin cậy của các đơn vị lớn như FAO (Tổ chức nông lương thế giới), VNPT, Viettel và hàng loạt các doanh nghiệp lớn như Techcombank, Southernbank, Sacombank, Lê Phan, BKC,…
Toàn hệ thống Magiwan đã có hơn 60 nhân viên, với mạng lưới phân phối trải rộng cả nước với 3 chi nhánh chính thức tại Hà Nội, Đà Nẵng, TP. HCM

Magiwan tập trung những nhân viên trẻ, năng động, ham học hỏi và khát vọng vươn lên để làm chủ khoa học công nghệ, hiện thực hóa sứ mệnh “Phát triển cộng đồng bằng giải pháp không dây”. Giá trị cốt lõi mà Magiwan luôn hướng tới là “Cải thiện môi trường nhân viên từng ngày”.Với tâm niệm thành công của mỗi nhân viên chính là thành công chung của toàn doanh nghiệp. Ở Magiwan chú trọng vào sự phát triển của từng nhân viên luôn là ưu tiên hàng đầu của doanh nghiệp. Phòng nhân sự phối hợp với công đoàn công ty, luôn quan tâm chăm lo cho đời sống công nhân viên, thường xuyên tổ chức các hoạt động giải trí hàng ngày, hàng tuần: câu lạc bộ bi lắc, bóng bàn, bóng đá, cầu lông, games (age of empire), cờ tướng; hàng tháng tổ chức “happy hour” để tăng tinh thần đoàn kết giữa các nhân viên trong công ty, ngoài ra công ty quy định hàng năm tổ chức 1, 2 lần tổ chức các hoạt động tham quan – du lịch cho nhân viên công ty.

Các hoạt động vui chơi thể thao thường xuyên được tổ chức
Du lịch là hoạt động thường niên của Magiwan

Trong thời gian tới Magiwan tiếp tục đầu tư hoàn thiện, nâng cấp các sản phẩm giám sát dành cho xe hơi, xe máy, đầu máy kéo,… Bên cạnh đó cũng phát triển các sản phẩm không dây phục vụ tốt hơn cho cuộc sống của con người như: thiết bị định vị cá nhân cho xe máy, chống trộm, thiết bị cá nhân trong lĩnh vực y tế chăm sóc sức khỏe người cao tuổi, chăm sóc sức khỏe cá nhân… và nhiều sản phẩm thú vị khác.

Hiện tại, Magiwan đang tìm kiếm những lập trình viên tài năng, mong muốn được làm việc trong môi trường chuyên nghiệp, không ngại thách thức, ham học và mong muốn tham gia vào toàn bộ quy trình tạo ra sản phẩm “ tạo ra những thay đổi cách mạng” trong lĩnh vực giao thông vận tải, cùng với đó là những quyền lợi hấp dẫn. Cùng Magiwan chia sẻ khát vọng không dây ngay hôm nay. Tìm hiểu thêm tại đây.

TopDev

18 designer hàng đầu dự đoán về xu hướng UI/ UX trong năm 2022

ux designer

Dưới đây là tổng hợp 18 designer hàng đầu cho bạn tham khảo. Hy vọng với thông tin dưới đây của Topdev sẽ góp nhặt thêm nhiều điều thú vị cho các bạn

1. Accessibility đóng vai trò quan trọng nhất, thứ 2 là ego (bản ngã)

“Tôi thực sự hy vọng 2022 sẽ là năm mà các designer cam kết thiết kế sẽ đi cùng với accessibility. Chúng ta cần phải ngừng sử dụng các màu xám cực nhẹ cho các yếu tố quan trọng, cần phải ngừng sử dụng các animation cho mỗi pixel chỉ vì nó đẹp, cần phải ngừng gây khó dễ cho người đọc để hiểu được content của 1 trang chỉ vì muốn chứng tỏ bản thân là designers”.

— Hubert Florin, Product Designer của Slack

2. Collaboration trong design sẽ góp phần đẩy mạnh tính kĩ thuật

“Dù designer có biết code hay không, với tôi các team design sẽ phải bắt đầu hợp tác nhiều hơn tương tự như các team kĩ thuật. Hợp tác có thể bao gồm review design giống như quá trình review code, thiết kế các tools có chức năng như code linters hoặc cải thiện về design patterns nguồn mở. Software sẽ ra sao nếu tất cả các dự án engineer nguồn mở có các nguyên tắc design tương đương thúc đẩy những chuẩn mực trong ngành về User experience hoặc Information design?”

— Jules Forrest, Senior Product Designer của Credit Karma

3. Designers sẽ tập trung vào ethics

“Hy vọng của tôi là các UX/UI designers đều nhận thức được ảnh hưởng của bản thân trong năm 2022, coi trọng các phân nhánh đạo đức trong những lựa chọn thiết kế dành cho các bên sử dụng sản phẩm của các designers”

— Tim Belonax, Lead Designer của Pinterest

4. Designers sẽ phụ thuộc lớn vào industry standard (chuẩn công nghiệp)

“Thật không may, sự phụ thuộc vào các hệ thống design theo quy định (như Material, Fluent) sẽ ngày càng tăng cao”

— Johan Ronsse, UI/UX Designer & Partner của Mono Design

5. Hiệu quả càng cao, trách nhiệm càng lớn

“Năm 2022, các công cụ design & lập trình sẽ tiếp tục hội tụ, với nhiều công cụ tập trung hơn hỗ trợ design & build các hệ thống làm việc được với bất kì công nghệ hay platform nào mà bạn cần. Frameworks, variables tùy chỉnh, CSS grid như Vue & React sẽ mang đến những cơ hội mới và hiệu suất tốt hơn cho quá trình thực thi design – hy vọng rằng điều này cũng tạo thêm không gian để thiết kế 1 cách có trách nhiệm và xây dựng được những trải nghiệm bao quát hơn”

— Diana Mounter, Design Systems Manager của GitHub

6. Chúng ta đang dần bỏ qua xu hướng mà chúng ta đều cần

“Dù không có khả năng sẽ thay đổi mạnh mẽ ngành design hay dẫn đầu xu hướng, nhưng xu hướng mà chúng ta đều cần chính là thiết kế phục vụ cho accessibility và inclusive design. Có rất nhiều việc cần phải và hiếm ai muốn đụng đến #accessibility”

— Matthew Morek, UI/UX Design Consultant

7. Design sẽ là kẻ nắm giữ cuộc chơi trong việc thay đổi xã hội

“Thiết kế có sức ảnh hưởng nhiều nhất chính là thiết kế giải quyết các vấn đề thực sự của con người. Trong tương lai, tôi nghĩ design sẽ đóng vai trò quan trọng việc giải quyết các vấn đề lớn, khó khăn trong xã hội. Design sẽ có tính chính trị hơn, dễ tiếp cận hơn và là 1 toolset mang đến những thay đổi thực sự”

— Michelle Morrison, Design Program Manager của Facebook

UI UX tuyển dụng nhiều vị trí, lương cao trên TopDev

8. Các công cụ Design sẽ giúp designer trở nên nổi bật so với tất cả mọi người

“Các công cụ design hiện đại sẽ đủ mức độ tiếp cận để nhiều người có thể đóng góp vào quy trình design 1 cách công bằng. Chúng ta sẽ đánh giá “designers” trong vai trò ít tách biệt hơn mà là công việc nhiều người có thể đóng góp vào”

— Noah Levin, Design Manager của Figma

9. Jason Schwartzman nói là đúng nhất

“Tôi có thể trích dẫn lại câu của Jason Schwartzman trong I Heart Huckabees không? Sự kết nối chắc chắn sẽ trở thành sự thật”

— Zachary Gibson, Material Design Creative Lead của Google

10. Đã đến lúc phải khách quan

“Chúng ta được “cảm thông” rất nhiều nhờ biệt tài phô trương trong vài năm qua và sắp tới chúng ta cần phải bổ sung vào đó bản tính “vô ngã” (egoless). Rất nhiều người vẫn cảm thấy không thoải mái khi nhắc đến “những người không phải designer” và nhận ra thiết kế tốt nhất của họ được tạo ra từ hơn 90% input của những người khác và 10% (hoặc ít hơn) là ý tưởng của chính người đó, nhưng các team & công ty thành công nhất đã biết đến điều này trong design từ rất lâu rồi”

— Nicole Tollefson, Lead Designer của Atlassian Buyer Experience

11. Kỹ năng sẽ đóng vai trò quan trọng hơn bao giờ hết

“Việc trau dồi kĩ năng ngày càng đóng vai trò quan trọng – đây cũng là vấn đề có nhiều thay đổi nhất. Điều này đồng nghĩa là chúng ta sẽ lắng nghe & hợp tác với nhau nhiều hơn; đảm bảo luôn có những ý kiến, tiếng nói đa chiều ở nhiều team khác nhau xuyên suốt quá trình làm việc; cải tiến môi trường tối ưu nhằm mang đến hiệu suất tối đa. Dưới mỗi vấn đề về Tech sẽ là vấn đề liên quan đến con người”

— Josh Silverman, Design Producer của Twitter

12. Đã đến lúc chủ động tương tác với môi trường

“Theo tôi, các thiết kế tương lai tích hợp với thế giới thực sẽ nắm vai trò chủ đạo. Dù đó là bằng các cảm ứng phần cứng, mô phỏng thực tế hoặc UI thay đổi theo ngữ cảnh (context-driven UI) thì các designers sẽ hiểu được thiết kế tồn tại như thế nào trên thực tế. Các thiết kế sẽ tương tác chủ động với môi trường xung quanh chúng cũng như tận dụng tối đa tiềm năng liên quan đến phần cứng”

— Linda Dong, Design Manager của Lyft

13. Các công cụ design tốt hơn sẽ mang đến khả năng branding tốt hơn bằng các design systems

“Khi các công cụ tiếp cận với những làn sóng phổ biến hiện nay đến từ design systems, việc hợp tác và đẩy mạnh cách thể hiện của 1 thương hiệu bằng 1 design system sẽ ngày càng dễ dàng hơn. Điều này cũng giúp các designer làm việc với lòng trung thành cao hơn trong phát triển sản phẩm nhờ khả năng cải thiện quá trình đưa ra quyết định và giảm chi phí cho ra đời các tác phẩm digital xuất sắc”

— Lucas Smith, Design Technologist của Airbnb

14. Các Design systems sẽ phục vụ con người, không phải sản phẩm

“Làn sóng chuyển dịch lớn tiếp theo trong thiết kế đòi hỏi chúng ta phải xem các design systems như 1 dịch vụ, không phải là product nữa. Chúng ta có khuynh hướng đánh giá 1 design system như 1 “sản phẩm phục vụ cho các sản phẩm khác” nhưng theo tôi, điều đó sẽ gây hại cho những mối quan hệ, những thỏa thuận, thỏa hiệp và tương tác giữa người với người – điều khiến quá trình làm việc với các hệ thống trở nên thách thức hơn & đáng tuyên dương hơn”

— Daniel Eden, Product Designer của Facebook

15. Các Design systems sẽ ngày càng quan trọng

“Làn sóng design systems ngày càng phát triển hơn đi cùng với quá trình scaling các team design, template hóa và sự phụ thuộc ngày càng cao vào nội dung dựa trên Machine Learning & AI. Các designer sẽ áp dụng kiến thức về phương pháp và tư duy thuật toán vào skillset của mình để đáp ứng nhu cầu và thể hiện được ước muốn của con người”

— Jerel Johnson, Sr. Product Designer của Backpack Health

16. Flat design sẽ ít được chú ý hơn

“Nhiều sáng tạo hơn về interfaces trong năm 2022 khi chúng ta rời dần flat design, thay vào đó tập trung vào interaction & accessibility”

— Una Kravets, Sr. UI Engineer của DigitalOcean

17. Các Design systems sẽ xóa nhòa khoảng cách giữa các phòng ban

“Các xu hướng thiết kế trong năm 2022 tới chắc chắn sẽ có những cải tiến liên quan đến design systems. Ngày càng nhiều công ty đang nghiên cứu lợi ích của việc hệ thống hóa thiết kế, đặc biệt là cách để khỏa lấp khoảng trống giữa product, design và engineering. Thêm nữa, tôi có cảm giác 3D modeling và 3D visualizations sẽ tiếp tục được nhiều người biết đến hơn. Tôi có thể tưởng tượng được việc thể hiện chiều sâu trong UI sẽ trở thành xu hướng – 1 trong những hệ quả của 3D modeling & 3D visualizations”

— Isha Kasliwal, Senior UI/UX Designer/Developer của Twitch

18. Những cải tiến về CSS sẽ ảnh hưởng đến thiết kế web theo những cách không ngờ được

“Có rất nhiều thứ hay ho thú vị về CSS – khả năng tích hợp những công cụ mới, như Grid & Custom Properties, với các tính năng hiện tại như Calc & Viewport Unites. CSS hiện đại cho phép mức độ interaction, responsive và data visualization mới mà trước đây cần phải có sự can thiệp sâu rộng của Javascript. Tôi rất vui khi thấy các xu hướng mới đang phát triển vượt xa công nghệ Javascript”

— Miriam Suzanne, Designer & Developer của OddBird

Nguồn: TopDev via blog.figma.com

Tạo ra HTML responsive bằng cách thêm một dòng CSS

Trong bài này, tôi sẽ hướng dẫn bạn cách sử dụng CSS Grid để tạo ra Image grid thay đổi tùy theo kích thước màn hình.

Và phần thú vị nhất: Tạo ra Responsiveness với một dòng CSS duy nhất.

Điều này có nghĩa là chúng ta không phải gây lộn xộn HTML với các class name xấu xí (nghĩa là col-sm-4col-md-8) hoặc tạo các phương tiện query cho mọi kích thước màn hình.

Thiết lập

Trong bài viết này, ta sẽ tiếp dùng Grid đã sử dụng trong bài viết CSS Grid đầu tiên. Sau đó chúng ta sẽ thêm các hình ảnh vào cuối bài báo. Dưới đây là là hình ảnh ban đầu của grid:

Đây là HTML:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Và CSS:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

Lưu ý: ví dụ với một chút basic styling, mà tôi sẽ không nói ở đây, vì không có gì liên quan đến CSS Grid.

Nếu code này gây nhầm lẫn, bạn nên đọc Learn CSS Grid trong một bài viết 5 phút mà đã có những giải thích về cơ bản của layout module.

Cùng bắt đầu xây dựng các columm responsiveness.

Responsiveness cơ bản với fraction unit

CSS Grid đem lạimột giá trị hoàn toàn mới gọi là fraction unit. Được viết như  fr, fraction unit cho phép bạn chia tách container thành nhiều fraction như bạn mong muốn.

Hãy thay đổi từng cột thành một fraction unit wide.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

Điều gì xảy ra tại đây là việc Grid chia tách toàn bộ chiều rộng thành ba fraction và mỗi cột chiếm một unit. Đây là kết quả:

Nếu chúng ta thay đổi giá trị grid-template-columns thành 1fr 2fr 1fr, thì cột thứ hai sẽ rộng gấp hai lần so với hai cột khác. Chiều rộng bây giờ là bốn fraction unit, và cột thứ hai chiếm hai trong số họ, trong khi những cột khác chiếm một. Nó trông như thế này:

Nói cách khác, giá trị fraction unit giúp chúng ta rất dễ thay đổi chiều rộng của cột.

Responsiveness nâng cao

Tuy nhiên, ví dụ trên không đem lại tính reponsive như mong muốn, vì grid này sẽ luôn luôn được ba cột rộng. Chúng tôi muốn grid của mình có thể thay đổi số lượng cột với chiều rộng của container. Để đạt được điều đó, bạn sẽ phải biết về ba khái niệm hoàn toàn mới.

repeat()

Cùng bắt đầu với hàm repeat(). Đây là một cách quan trọng để xác định các cột và hàng của bạn. Hãy dùng grid ban đầu và thay đổi để dùng repeat ():

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

Nói cách khác, repeat(3, 100px) giống với  100px 100px 100px. Tham số đầu tiên xác định có bao nhiêu cột hoặc hàng mà bạn muốn và số thứ hai là về chiều rộng, vì vậy điều này sẽ chỉ cho chúng ta bố cục chính xác giống khi chúng ta bắt đầu với:

auto-fit

Tiếp theo là  auto-fit. Hãy bỏ qua số lượng cố định của cột, và thay vì thay thế 3 với auto-fit.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

Điều này dẫn đến kết quả sau:

Grid giờ thay đổi số lượng cột với chiều rộng của container.

Nó chỉ đơn giản cố gắng để phù hợp càng nhiều cột rộng 100px vào container càng tốt.

Điều này dẫn đến kết quả sau:

Tuy nhiên, nếu cố đem code tất cả các cột chính xác 100px, sẽ không có được sự linh hoạt như mong muốn, vì chúng sẽ hiếm khi bổ sung thêm vào chiều rộng đầy đủ. Như bạn thấy trên gif ở trên, Grid thường để lại khoảng trắng ở phía bên phải.

minmax()

Và phần cuối cùng cần sửa được gọi là minmax(). Chúng tôi chỉ cần thay thế 100px với minmax(100px, 1fr). Đây là CSS cuối cùng.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

Lưu ý rằng tất cả responsiveness xảy ra trong một dòng CSS.

Điều này dẫn đến kết quả sau:

Hoàn hảo. Hàm minmax() xác định một dải kích thước lớn hơn hoặc bằng min và nhỏ hơn hoặc bằng max.

Như vậy, các cột sẽ luôn có ít nhất 100px. Tuy nhiên, nếu có nhiều không gian hơn, Grid sẽ chia một cách bình đẳng cho mỗi cột, vì các cột biến thành một fraction unit thay vì 100 px.

Thêm hình ảnh

Bây giờ là bước cuối cùng là thêm các hình ảnh. Điều này không liên quan gì đến CSS Grid, nhưng chúng ta vẫn phải nhìn vào code.

Chúng tôi sẽ bắt đầu thêm một thẻ ảnh bên trong mỗi Grid item.

<div><img src="img/forest.jpg"/></div>

Để làm cho hình ảnh phù hợp, chúng tôi sẽ đặt nó như là rộng và cao như các item, và sau đó sử dụng object-fit: cover; Điều này sẽ làm cho hình ảnh bao gồm toàn bộ container, và trình duyệt sẽ cắt nó nếu cần thiết.

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Kết quả như sau:

Thật tuyệt! Bây giờ bạn đã biết một trong những khái niệm phức tạp nhất trong CSS Grid, vì vậy hãy tự hào về mình.

Browser support

Trước khi kết thúc, tôi cũng cần đề cập đến browser support. Vào thời điểm viết bài này, 77% lưu lượng truy cập trang web toàn cầu hỗ trợ CSS Grid, và nó đang tăng.

Tôi tin năm 2018 là của CSS Grid. Nó sẽ có đột phá lớn, và sẽ trở thành một kỹ năng phải có cho các nhà phát triển front-end. Giống như CSS Flexbox trong vài năm gần đây.

Nguồn: TopDev via Freecodecamp

Là nhân viên quèn bạn vẫn hoàn toàn có thể lãnh đạo người khác, thời nay lãnh đạo đâu cần đến chức danh

Người ta cho rằng để lãnh đạo được người khác, khiến mọi người làm theo ý mình ta cần tới chức danh, thực tế không phải như vậy khi một người lãnh đạo chân chính được xây dựng nên bởi lòng tin và sự tôn trọng.

Lại một ngày trôi qua, bạn làm rất nhiều việc trên văn phòng, từ dự án này tới đầu việc kia, làm hài lòng tất cả mọi người đặc biệt là sếp. Ngày hôm nay cũng như mọi ngày khác, hết yêu cầu đi họp, hỗ trợ đồng nghiệp, trả lời email, bê nước, thậm chí là pha trà, sếp yêu cầu bạn làm rất nhiều thứ.

Và rồi cuối ngày, khi mọi thứ qua đi bạn nhận thấy rằng mình chỉ đang làm việc dựa trên những yêu cầu của người khác. Hết giờ làm bạn gặp một người quen lâu năm, họ hỏi bạn công việc dạo này sao rồi? “Vẫn tốt thôi, như mọi ngày”, bạn trả lời. Thế chức vụ hiện tại của bạn là gì? “Tôi không biết, nhân viên?”.

Không cần tới chức danh quản lý, phó phòng, trưởng phòng hay giám đốc bạn mới có thể lãnh đạo người khác.

Đã bao giờ bạn tự hỏi mình rằng liệu bạn sinh ra có chỉ để làm những gì người khác bảo bạn phải làm?

Định nghĩa của sự lãnh đạo với nhiều người là khi bạn làm sếp, khi bạn mang trên mình chức danh lãnh đạo, khi người khác gọi bạn là lãnh đạo. Thế nhưng, là một nhân viên quèn, bạn có nhận thấy rằng rất nhiều người khác coi bạn là một lãnh đạo dù bạn chẳng có chức danh gì?

Lãnh đạo sinh ra từ tác phong làm việc và tính cách cá nhân

Giờ ai cũng có thể được gọi là lãnh đạo, một người đưa ra tầm nhìn cho người khác và sử dụng vài cách thức để người khác làm việc cùng mình được coi là lãnh đạo. Giả sử bạn yêu cầu một đồng nghiệp làm đầu việc cùng mình với một cái đích cụ thể, họ đồng ý làm theo. Xong! Bạn vừa lãnh đạo rồi đó.

Trước hết, hãy xác định bạn là lãnh đạo kiểu gì

Tùy thuộc vào mô hình công ty hay ngành nghề, có thể nơi bạn làm chẳng có lãnh đạo hoặc có những nơi ai cũng là lãnh đạo và bạn trở thành một lãnh đạo tinh thần, một người lãnh đạo tiềm năng.

Để nói về lãnh đạo, có 2 kiểu điển hình đó là người lãnh đạo có chức danh và người lãnh đạo quèn chẳng có danh phận gì nhưng ai cũng nghe. Dù là gì đi nữa, 2 kiểu trên cũng có những cách thức hoạt động rất tương đồng nhau.

Họ gắn kết mọi người chứ không phá hoại tập thể

Một người lãnh đạo sẽ biết lắng nghe vấn đề của người khác, xây dựng lòng tin và gắn kết mọi người. Cái đích cuối cùng chính là để gắn kết cả tập thể, mọi người làm việc cùng nhau mà không có bất kì mâu thuẫn nào.

Có những người lãnh đạo tạo ra sự cạnh tranh lẫn nhau trong tập thể, họ phá hoại sự gắn kết chung và rồi cuối cùng yêu cầu nhân sự làm việc theo ý mình. Đây là kiểu lãnh đạo độc tài hay người ta gọi với khái niệm “sếp”, những người chỉ muốn cấp dưới làm theo ý mình. Như vậy, nếu một người lãnh đạo đã biết mọi thứ, coi tất cả những gì mình làm là đúng, giá trị của nhân sự phía dưới ở đâu?

Họ động viên tinh thần cả tập thể

Lãnh đạo là điểm tựa tinh thần của cả tập thể, họ mang lại năng lượng tích cực để mọi người làm việc tốt hơn, môi trường làm việc thú vị hơn. Một người lãnh đạo thực thụ sẽ biết cuốn hút người khác và tạo không khí thoải mái cho tất cả mọi người.

Họ không bao giờ hoảng loạn

Một người lãnh đạo sẽ biết xử trí ra sao khi vấn đề xảy đến. Nhiệm vụ của họ là thống nhất cả tập thể để tìm ra phương pháp giải quyết, họ không ngồi một chỗ phó mặc mọi thứ hay kêu gào thảm thiết về những vấn đề gặp phải, họ nỗ lực để làm mọi thứ tốt hơn.

Họ được tôn trọng

Một người có chức danh lãnh đạo chưa chắc đã được tôn trọng. Sự tôn trọng không tới từ chức danh, nó tới từ tính cách và phương pháp họ làm việc. Một người lãnh đạo có thể nhận được sự tôn trọng qua những gì anh ta làm, thế nên đừng nói, hãy để kết quả làm nó thay bạn. Một khi xây dựng được sự tôn trọng lẫn nhau, không có rào cản nào dừng bước được tập thể của bạn.

Họ mang tới những gì mình hứa

Lãnh đạo có tầm nhìn về những gì tập thể làm, một khi họ thực hiện được tầm nhìn ấy, họ sẽ nhận được những phần thưởng xứng đáng. Nhiều khi không cần thiết là một phần thưởng giá trị, đôi khi nó chỉ là cảm giác thành công khi hoàn thành một vấn đề.

Lãnh đạo chẳng cần đến chức danh

Xem hết phần bên trên rồi chứ? Đó là những thứ mà một người lãnh đạo sẽ làm, chắc chắn rằng dù là một nhân viên quèn bạn cũng đã làm được rất nhiều điều trong số trên. Chính vì thế hãy cứ rèn luyện phong cách lãnh đạo của mình và đưa tập thể đến những cái đích mới.

Và hãy luôn nhớ rằng, một tập thể luôn được tạo nên bởi những người có thế mạnh và điểm yếu khác nhau. Tận dụng đúng thế mạnh của họ để tỏa sáng và tiết chế những yếu điểm bằng cách đưa họ vào những nhóm riêng biệt, những công việc đặc thù để điểm yếu kia không còn khiến họ lạc lõng.

Có rất nhiều thứ bạn chẳng thể làm được nếu không có chức danh, thế nhưng nhớ rằng lãnh đạo đa phần được xây dựng nên nhờ vào khả năng thiết lập mối quan hệ, sự gắn kết trong tập thể. Có khả năng truyền lửa và thuyết phục người khác là điều không phải ai cũng làm được, nó sẽ giúp ích rất nhiều trong cả công việc cũng như cuộc sống.

Nguồn: Cafebiz

JSON Web Token (JWT) là gì ?

jwt là gì

Jwt là gì? Trong bài viết này mình cùng tìm hiểu khái niệm JWT là gì , trước tiên hãy xem giải thích theo lý thuyết được định nghĩa bởi RFC 7519

Jwt là gì?

JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên Client – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON . Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn bằng dấu “.”

jwt là gì
Credit: Toptal
  Tại sao phải sử dụng JSON Web Token (JWT) để bảo mật API
  API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth

Vậy theo lý thuyết trên thì mình sẽ có một chuỗi Token như sau:

header.payload.signature

Cấu trúc của JSON Web Token:

Như ở trên đã nói JSON Web Token bao gồm 3 phần, được ngăn cách nhau bởi dấu chấm (.):

  1. Header
  2. Payload
  3. Signature (chữ ký)

Header

Phần header sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT

{
    "typ": "JWT",
    "alg": "HS256"
}
  • “typ” (type) chỉ ra rằng đối tượng là một JWT
  • “alg” (algorithm) xác định thuật toán mã hóa cho chuỗi là HS256

Payload

Phần payload sẽ chứa các thông tin mình muốn đặt trong chuỗi  Token như username , userId , author , … ví dụ:

{
  "user_name": "admin",
  "user_id": "1513717410",
  "authorities": "ADMIN_USER",
  "jti": "474cb37f-2c9c-44e4-8f5c-1ea5e4cc4d18"
}
  Authentication nâng cao trong SPA (React/Vue) dùng JWT kết hợp Cookie

Lưu ý đừng đặt quá nhiều thông tin trong chuỗi payload vì nó sẽ ảnh hưởng đến độ trể khi Server phải xác nhận một Token quá dài

jwt là gì

Signature

Phần chử ký này sẽ được tạo ra bằng cách mã hóa phần header , payload kèm theo một chuỗi secret (khóa bí mật) , ví dụ:

data = base64urlEncode( header ) + "." + base64urlEncode( payload )
signature = Hash( data, secret );
  • base64UrlEncoder : thuật toán mã hóa header và payload

Đoạn code trên sau khi mã hóa header và payload bằng thuật toán base64UrlEncode ta sẽ có chuỗi như sau

// header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
// payload
eyJhdWQiOlsidGVzdGp3dHJlc291cmNlaWQiXSwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJyZWFkIiwid3JpdGUiXSwiZXhwIjoxNTEzNzE

Sau đó mã hóa 2 chuỗi trên kèm theo secret (khóa bí mật) bằng thuật toán HS256 ta sẽ có chuỗi signature như sau:

9nRhBWiRoryc8fV5xRpTmw9iyJ6EM7WTGTjvCM1e36Q

Có thể bạn quan tâm: Vị trí tuyển dụng lập trình Javascript lương cao

Cuối cùng

Kết hợp 3 chuỗi trên lại ta sẽ có được một chuỗi JWT hoàn chỉnh

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsidGVzdGp3dHJlc291cmNlaWQiXSwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJyZWFkIiwid3JpdGUiXSwiZXhwIjoxNTEzNzE.9nRhBWiRoryc8fV5xRpTmw9iyJ6EM7WTGTjvCM1e36Q

Như vậy các bạn cũng đã hiểu được các thành phần của một chuỗi JWT.

Khi nào nên dùng JSON Web Token?

Authentication: Đây là trường hợp phổ biến nhất thường sử dụng JWT. Khi người dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phía người dùng sẽ chứa thêm mã JWT. Điều này cho phép người dùng được cấp quyền truy cập vào các url, service, và resource mà mã Token đó cho phép. Phương pháp này không bị ảnh hưởng bởi Cross-Origin Resource Sharing (CORS) do nó không sử dụng cookie.

Trao đổi thông tin: JSON Web Token là 1 cách thức khá hay để truyền thông tin an toàn giữa các thành viên với nhau, nhờ vào phần signature của nó. Phía người nhận có thể biết được người gửi là ai thông qua phần signature. Và chữ ký được tạo ra bằng việc kết hợp cả phần header, payload lại nên thông qua đó ta có thể xác nhận được chữ ký có bị giả mạo hay không.

Có thể bạn muốn xem thêm:

Xem thêm việc làm IT tại TopDev!

17 sự thật đáng ngạc nhiên về tỷ phú Bill Gates, chắc chắn không có điều nào làm bạn thất vọng

Có vài điều mà ai cũng biết về Bill Gates: đó là ông là người giàu nhất thế giới, ông đồng sáng lập nên một trong những công ty công nghệ lớn nhất thế giới, ông là một nhà từ thiện hào phóng – ông cùng vợ của mình dã lập nên Quỹ Bill & Melinda Gates, với mục tiêu nâng cao chăm sóc sức khỏe toàn cầu và giảm đói nghèo, tăng cường giáo dục.

Danh sách còn dài lắm, và đây là 17 sự thật đáng ngạc nhiên khác về Bill Gates do Business Insider chọn ra. Có lẽ là nhiều trong số đó, bạn chưa từng nghe tới.


1. Khi vẫn còn là một cậu “teen”, Bill Gates đã viết phần mềm máy tính đầu tiên của mình trên một chiếc máy tính General Electric. Đó là một chương trình cho phép bạn chơi cờ tic-tac-toe với máy tính.


2. Trường khám phá ra khả năng lập trình của cậu Gates trẻ tuổi, họ đã để cậu viết chương trình máy tính sắp xếp lịch học cho từng học sinh. Cậu Gates láu cá đã thay đổi code của chương trình, tự đặt mình vào những lớp học “có những cô gái thú vị”.

3. Ông dã đọc toàn bộ series sách World Book Encyclopedia khi còn ở độ tuổi thiếu niên.

4. Ông đã đạt số điểm gần 1590 trên tổng số 1600 điểm có thể có trong những bài thi SAT của mình.

5. Giống như nhiều nhà khởi nghiệp công nghệ khác, Gates cũng bỏ dở việc học đại học. Ông rời Harvard vào năm 1975, để theo đuổi giấc mơ mang tên Microsoft.

6. Hai năm sau khi rời Harvard, ông bị bắt tại New Mexico. Lúc ấy ông đã vượt đèn đỏ mà bản thân còn chưa có bằng lái xe.

7. Có thời tại Microsoft, ông đã từng nhớ toàn bộ biển số xe của nhân viên Microsoft để biết họ đến và đi vào giờ nào. “Dần dần tôi cũng phải bỏ thói quen này, bởi kích cỡ công ty ngày càng lớn”, Bill Gates nói.

8. Ông là người thích xe Porsche và có một bộ sưu tập khá đồ sộ. Ông đã mua về chiếc xe thể thao Porsche 959, 13 năm trước khi chiếc xe này được Cơ quan Bảo vệ Môi trường Mỹ hay Bộ Giao thông Mỹ cho phép lưu hành.

9. Gates cũng đã từng là huấn luyện viên lái máy bay. Hiện tại thì ông đang di chuyển giữa các nước bằng chiếc phi cơ riêng ông đã mua về từ năm 1997.

10. Bill Gates còn có một tài sản giá trị khác, đó là Cổ thư Leicester – Codex Leicester, một bộ sưu tập tổng hợp những bản thảo viết tay của họa sỹ, nhà nghiên cứu khoa học, nhà phát minh Leonardo da Vinci. Gates đã mua lại cuốn cổ thư này trong một cuộc đấu giá năm 1994, với số tiền 30,8 triệu USD.

11. Dù bản thân sở hữu số tài sản khổng lồ, Bill Gates nói rằng con của ông, mỗi người chỉ được thừa hưởng 10 triệu USD mà thôi. “Để lại cho con cái một số tài khoản khổng lồ không phải là điều tốt với chúng”, ông nói.

12. Ngày nay, ông dành phần lớn thời gian chăm lo cho quỹ từ thiện của mình. Tuy nhiên, ông cũng nói rằng ông vẫn dành thời gian làm việc với Microsoft, cụ thể là dự án “Thư ký Cá nhân”, một thứ sẽ “ghi nhớ mọi thứ và giúp bạn tìm lại những thứ cũ, giúp bạn chọn ra một mục tiêu để mà tập trung làm”.

13. Ông nói rằng nếu như Microsoft không thành công, ông có lẽ đã đi nghiên cứu trí tuệ nhân tạo.

14. Tuy nhiên, ông cũng “chung chiến tuyến” với Stephen Hawking hay Elon Musk: họ đều e ngại về sự tồn tại của một siêu trí tuệ nhân tạo.

15. Ban nhạc yêu thích của Bill Gates? Đó là nhóm U2.

16. Ông đọc hết 50 cuốn sách một năm. “Việc đọc vẫn là cách thức chính của tôi để học thứ mới và cũng là để thử thách tầm hiểu biết của tôi”.

17. Bill Gates không biết ngoại ngữ nào, và ông thổ lộ rằng tính đến giờ, đó là điều hối tiếc lớn nhất đời ông.

Nguồn: Cafebiz

 

Tôi đã nghiên cứu AI như thế nào trong 2 tháng qua?

Trước tình cảnh mọi thứ đang thay đổi khá nhiều thì vai trò hiện tại của full stack developer thôi là chưa đủ. Trong 2 năm tới, full stack sẽ không còn là full stack nếu không có các kĩ năng AI.

Đây là thời điểm để hành động – trau dồi các kĩ năng của developer, cải thiện mindset của 1 người làm sản phẩm và khả năng đàm phán của 1 doanh nhân để chuyển dần định hướng sang vào data.

Spiros Margaris –  1 nhà đầu tư mạo hiểm, 1 leader có hiểu biết sâu sắc nổi tiếng về AI & Fintech đã từng nói với tôi:

Nếu startups và các công ty chỉ phụ thuộc vào các thuật toán AI & Machine learning Tân tiến để cạnh tranh với nhau sẽ không đủ. Ai không phải là lợi thế cạnh tranh mà là điều bắt buộc. Bạn đã từng nghe ai nói đến việc sử dụng điện để làm nhân tố cạnh tranh chưa?

Xây dựng neural network đầu tiên của mình

Photo by — Unsplash

Khuynh hướng nghiên cứu của tôi là thực hành nên tôi đã nghĩ là tại sao không thực hiện mạng neural của riêng mình?

Tôi không nhảy ngay vào neural nets vì có những cách học hay hơn mà cố gắng làm quen với những từ vựng trong domain.

Bài tập đầu tiên không phải là học, mà là làm quen

Với background thuần về Javascript & Nodejs, tôi đã không muốn chuyển đổi các stacks. Vì vậy, tôi đã tìm module neural net đơn giản tên là nn và sử dụng nó để implement cổng AND với input giả. Từ tutorial này, tôi đã chọn vấn đề mà với 3 input bất kì X,Y & Z thì output sẽ là X AND Y.

var nn = require('nn')
var opts = {
    layers: [ 4 ],
    iterations: 300000,
    errorThresh: 0.0000005,
    activation: 'logistic',
    learningRate: 0.4,
    momentum: 0.5,
    log: 100   
}
var net = nn(opts)
net.train([
    { input: [ 0,0,1 ], output: [ 0 ] },
    { input: [ 0,1,1 ], output: [ 0 ] },            
    { input: [ 1,0,1 ], output: [ 0 ] },
    { input: [ 0,1,0 ], output: [ 0 ] },
    { input: [ 1,0,0 ], output: [ 0 ] },
    { input: [ 1,1,1 ], output: [ 1 ] },
    { input: [ 0,0,0 ], output: [ 0 ] }
    ])
// send it a new input to see its trained output
var output = net.send([ 1,1,0]) 
console.log(output); //0.9971279763719718

Theo ý kiến cá nhân của tôi, đây chính là bước lập trình mà tôi tự tin thực hiên nhất. Khi output flash 0.9971, tôi đã nhận ra network đã biết được cách thực hiện operation AND và tự bỏ qua input bổ sung.

Đây cũng là ý chính của Machine Learning. Bạn đưa cho chương trình máy tính set data và nó điều chỉnh các thông số nội bộ để có khả năng trả lời các câu hỏi dựa trên data mới từ những gì nó quan sát được trong data gốc, với ít error hơn.

Method này cũng được biết đến như gradient descent.

Photo by — Sebastian Raschka

Rèn luyện trí óc sẵn sàng cho Artificial Intelligence

Photo courtesy — Unsplash

Khi đã có được sự tự tin bằng việc tự tạo chương trình AI đầu tiên, tôi muốn biết trong vai trò Developer thì bản thân có thể làm được gì nhiều hơn nhờ Machine Learning.

  • Tôi đã giải quyết vài vấn đề supervised learning như regression classification.
  • Tôi đã sử dụng data set rất giới hạn để thử dự đoán đội nào sẽ chiến thắng 1 trận đấu IPL cho trước thông qua multivariate linear regression. (Các dự đoán đều sai nhưng khá là thú vị)
  • Tôi đã chơi với các bản demos trên Google Machine Learning cloud để xem thử những gì mà AI có thể làm hôm nay (đủ để xem những gì mà Google đang trong vai trò 1 sản phẩm SaaS)
  • Tôi đã bất ngờ biết được AI Playbook, 1 resource cực hay & tiện ích của Andreessen-Horowitz dành cho các developers & các nhà kinh doanh.
  • Tôi đã bắt đầu xem kênh của Siraj Rawal trên Youtube với nội dung xoay quanh Deep Learning và Machine Learning
  • Tôi đã đọc bài viết HackerNoon cực hay về các nhà sản xuất kiêm biên kịch của Silicon Valley đã xây dựng ứng dụng Not Hotdog ra sao. Đây là 1 trong những ví dụ dễ tiếp cận, dễ hiểu nhất dành cho chúng ta.
  • Tôi cũng đã đọc các bài blog của Andrej Karpathy, Director of AI của Tesla.
  • Tôi đã bắt đầu implement vài tutorials về Deep Learning theo đúng từng từ một (copy và paste), cố gắng train model & chạy code trên local machine của mình. Hầu hết thời gian, nó đều không ổn vì hầu như model nào cũng tốn thời gian training cao và tôi lại không có GPU.

Dần dần, tôi chuyển từ các công cụ của Javascript sang Python, và cài đặt Tensorflow trên windows machine của mình.

Toàn bộ quá trình này tập trung vào tiêu thụ các nội dung và xây dựng các bài tham khảo 1 cách thụ động trong tâm trí để sử dụng khi mình gặp phải vấn đề thực sự với khách hàng.

Như Steve Jobs đã từng nói, bạn chỉ có thể liên kết các Điểm quan trọng trong cuộc đời khi nhìn lại quá khứ

Theo kịp con tàu chatbot

Photo by — Unsplash

Là fan ruột của movie Her, tôi đã rất muốn xây dựng chatbots của riêng mình và thực sự đã làm được 1 chatbot bằng Tensorflow trong chưa đến 2 giờ. Tôi đã phác họa quá trình này và các yêu cầu business liên quan ở 1 trong số bài báo của mình

Thật may là bài viết này đã nhanh chóng được lan truyền trên TechInAsiaCodeMentor, và KDNuggets. Đây thực sự là khoảnh khắc tuyệt vời khi mà tôi chỉ mới bắt đầu viết Tech blog, cũng là cột mốc quan trọng trong hành trình nghiên cứu AI.

Từ đây tôi cũng quen được rất nhiều bạn trên Twitter & LinkedIn, cùng đàm luận về lập trình AI cả về chiều dài lẫn chiều sâu cũng như tìm kiếm sự trợ giúp khi gặp khúc mắc. Tôi thậm chí còn nhận được vài lời đề nghị làm các dự án tư vấn và trên tất cả, các developers & AI beginners trẻ bắt đầu hỏi tôi cách bắt đầu với AI.

Đây cũng là lý do tại sao tôi lại viết bài này, để giúp mọi người làm theo và có thể tự mình bắt đầu hành trình chinh phục AI.

BẮT ĐẦU LÀ 1 trong những phần thách thức nhất trong bất kì hành trình nào

Salt & pepper

Photo by — Unsplash

Việc học AI thật không dễ dàng. Khi gặp khó khăn với Javascript, tôi đã dành nguyên 1 đêm để nhảy sang học Python và biết được cách để code bằng Python. Tôi đã từng cảm thấy rất bực mình khi các models của mình không train được trên i7 machine hay thậm chí là sau nhiều giờ training, chúng vẫn trả lại những kết quả rác như khả năng chiến thắng 50-50 của 1 team trong trận Cricket. Học AI không hề giống học web framework.

Đó là 1 skill đòi hỏi khả năng nhận thức những gì Đang diễn ra ở cấp độ vi mô của các tính toán & tìm ra được đâu là thứ phải chịu trách nhiệm cho output – code hoặc data của bạn

AI không chỉ là 1 chủ ngữ, mà là umbrella term (để chỉ 1 từ hoặc 1 câu bao quát hết các concepts thuộc 1 lĩnh vực thông dụng) được sử dụng cho tất cả mọi thứ, từ các vấn đề liên quan đến hồi quy đơn giản đến các killer robots có thể sẽ hủy hoại chúng ta vào 1 ngày nào đó. Cũng giống như mọi nguyên tắc mà chúng ta phải tuân theo, bạn sẽ muốn cherry pick những thứ tương tự như vậy trong AI, bạn sẽ muốn thực sự giỏi về Computer vision hoặc Xử lý ngôn ngữ tự nhiên (Natural Language Processing) hoặc cả những việc đại loại như ngăn cản Chúa trời, chiếm lĩnh thế giới.

Trong buổi nói chuyện với Gaurav Sharma đến từ Atlantis Capital, doanh nghiệp nổi tiếng hàng đầu trong lĩnh vực AI, Fintech & Crypto, anh đã tiết lộ với tôi rằng:

Trong kỉ nguyên artificial intelligence, “trở nên Thông minh” đồng nghĩa với cái gì đó hoàn toàn khác biệt. chúng ta cần phải thể hiện khả năng phê bình, sáng tạo và suy nghĩ ở mức độ cao cấp và cả những công việc cao cấp đòi hỏi sự gắn kết cao về cảm xúc

Bạn sẽ phải kinh ngạc vì cách các máy tính bất chợt tự mình học được mọi thứ. Sự kiên nhẫn và thái độ ngạc nhiên sẽ là 2 nguyên tắc chìa khóa chính mà bạn nên nắm bắt.

Đây là 1 hành trình lớn, rất lớn. Tốn thời gian, mệt mỏi và dễ gây bực dọc.

nhưng điều tuyệt vời chính là, cũng giống như mọi hành trình khác trên thế giới, hành trình này cũng sẽ bắt đầu từ bước đi nhỏ đầu tiên

Nguồn: TopDev via hackernoon.com

Những sự thật ít người biết tới về nghề lập trình

Khi nói đến lập trình viên máy tính ta thường nghĩ tới những người khô khan, tối ngày chỉ biết ngồi bên máy tính. Nhưng sự thực có phải như vậy? Hãy cùng tìm hiểu công việc này trong chia sẻ dưới đây của David Veksler, một kỹ sư công nghệ thông tin về những sự thật ít ai biết đến trong giới lập trình viên

  1. Chỉ 10-20% thời gian của toàn bộ dự án được các lập trình viên sử dụng để viết code

Và bất kể trình độ, mỗi ngày 1 lập trình viên chỉ viết trung bình từ 10-20 dòng code. Sự khác biệt giữa tay chuyên và gà mờ đó là tay chuyên thì dành 90% thời gian để suy luận, tìm tòi và thử nghiệm các phương án tối ưu nhất cho mình; còn những gà mờ thì dành 90% thời gian để debug, thay đổi vài chỗ trong code, lại debug và mong đến một lúc nào đó chương trình sẽ hoạt động.

  1. Một lập trình viên tốt cho năng suất gấp 10 một lập trình viên tầm trung.

Một lập trình viên giỏi có thể còn hơn nữa, 20 cho đến 100 lần tùy hoàn cảnh. Đây là một sự thật không hề “gió” và đã được khoa học chứng minh từ tận những năm 60. Còn một lập trình viên tồi thì chung quy hiệu suất bằng không – chẳng làm nên chuyện gì, ngược lại vẽ ra nhiều vấn đề rối tinh rối mù cho người khác phải bận tâm sửa hộ.“Một công nhân có kĩ thuật tiện cao siêu có thể giá trị gấp vài lần một công nhân với kĩ thuật trung bình. Nhưng một lập trình viên giỏi thì có giá trị gấp 10,000 lần một lập trình viên với trình độ trung bình.” – Bill Gates

  1. Các lập trình viên giỏi thường không dành nhiều thời gian để code

Trái lại những người code liên tục từ lúc này sang lúc khác lại là những người lười biếng, vô tâm, kiêu ngạo và ít chịu tìm tòi nhất. Người lập trình tốt là người biết vận dụng linh hoạt mọi giải pháp mình từng vận dụng qua cho mọi vấn đề họ gặp phải; người lập trình tồi là người viết nên những đoạn code dài dòng, rắc rối, bố cục lung tung và khó để chỉnh sửa. Thực ra quẳng hết mớ code hỏng ra ngoài và bắt đầu lại từ đầu lại là một lựa chọn hữu ích hơn ngồi ì ạch sửa từng chút một.

  1. Định luật Entropy bao hàm mọi vật.

Entropy là một hàm biểu thị mức độ hỗn loạn của một sự kiện diễn ra trong vô số các khả năng ngẫu nhiên có thể diễn ra. Trong lập trình, thay đổi liên tục sẽ dẫn đến phá vỡ mô hình nguyên bản của thiết kế, dẫn đến sự suy giảm giá trị phần mềm (software rot). Dẫu biết điều này là không thể tránh khỏi, song các lập trình viên không nắm bắt được hình mẫu sơ khai của dự án và biết cách biến nó thành hiện thực sẽ tạo ra những phần mềm thất bại đến nỗi giá trị đã tiêu hao sạch sẽ kể cả trước khi dự án hoàn thành, và đây thường là lý do phổ biến nhất tạo nên các phần mềm thất bại (Lí do phổ biến thứ nhì là tạo ra những giá trị mà khách hàng không cần đến).

5. Mặc dù hầu hết các phần mềm đều được xây dựng bởi các đội ngũ chứ không riêng gì ai, nhưng đó cũng không phải là một hoạt động mang tính dân chủ. 

Thường thì chỉ có một người duy nhất chịu trách nhiệm về thiết kế, còn lại cả đội nghĩ cách lấp đầy cách khoảng trống xuất hiện. Kết cấu này giống với một tổ ong hay kiến nhiều hơn.

6. Lập trình là việc của những người chăm chỉ, trong đó, đặc biệt là bộ não sẽ phải hoạt động điên cuồng.

Những lập trình viên tốt nghĩ về công việc của mình 24/7. Họ viết ra những dòng code tuyệt vời nhất trong bồn tắm hay những giấc mơ. Tại sao? Bởi hầu hết các công việc quan trọng đều không được hoàn thành tại chính nơi làm việc của nó, bản thân Einstein cũng đã tháo gỡ nút thắt trong thuyết tương đối của mình khi mơ. Làm phần mềm không phải đơn giản chỉ cần dành nhiều thời gian làm việc hay thêm người vào là có thể hoàn thành.

Nguồn: Obsmedia

Sự trỗi dậy của Conversional Website

Phương thức sử dụng Conversational Interface như một vũ khí bí mật để cá nhân hóa trải nghiệm website tối đa

Internet đã giúp chúng ta truy cập nhanh chóng đến lượng lớn thông tin trong tầm tay. Tuy nhiên, không giống như máy tính, bộ não con người có khả năng xử lý hạn chế, điều này buộc chúng ta phải lọc ra các nội dung không liên quan. Điều này cho thấy khả năng chú ý của con người đang ngày càng suy giảm và giờ còn ngắn hơn cả cá vàng!

Từ sản xuất hàng loạt đến Hyper Personnalization

Trong quá khứ, hầu hết các doanh nghiệp đang hoạt động với mô hình sản xuất hàng loạt với sự đi đầu của Henry Ford, đảm bảo chất lượng sản phẩm và cung cấp cho khách hàng theo quy mô. Người tiêu dùng ngày nay có nhiều lựa chọn hơn bao giờ hết ở bất kỳ loại sản phẩm nào (bán lẻ, tài chính, phần mềm, vv) làm cho sản xuất hàng loạt không còn là một lợi thế cạnh tranh.

Trong những năm gần đây, nhờ vào sự tiến bộ của công nghệ, các doanh nghiệp đang bắt đầu áp dụng một phương pháp mới gọi là Hyper Personalization (HP)

Tâm điểm của nó, Hyper-Personalization có nghĩa là cân nhắc sự tương tác của khách hàng ở cấp độ 1:1, nơi chúng tôi xem mọi khách hàng một như một cá nhân và thiết kế một trải nghiệm tùy biến cho mỗi khách hàng riêng. Ví dụ điển hình của HP là tính năng tùy chỉnh website của Nike cho phép người dùng thiết kế giày của riêng họ.

Hyper-personalization trên Website

Chúng ta có thể thấy rằng nhiều ngành công nghiệp đang dần chuyển đổi sâu sắc nhờ vào Hyper-Personalization. Hãy xem kĩ Website, một trong những kênh truyền thông chính dùng để giao tiếp với khách hàng.

Một số công ty giả mạo đã và đang thực hiện một số mức độ cá nhân hóa trên website của họ:

Sử dụng IP address.

Nếu chúng ta nhìn vào trang chủ của Stripe, nền tảng thanh toán trực tuyến hàng đầu hiện nay, ngoại trừ thiết kế đẹp, có thể thấy rằng Stripe cung cấp các logo khách hàng khác nhau làm chứng thực dựa trên địa chỉ IP của người dùng. Dưới đây bạn có thể thấy sự khác biệt giữa những gì người dùng tại Tây Ban Nha và Mỹ thấy tại trang web của họ.

Logos dành cho người dùng tại Spain

Logos dành cho người dùng tại Mỹ

Sử dụng ngôn ngữ trình duyệt

Cùng xem website của Uber. Ta có thể thấy rằng họ theo dõi ngôn ngữ mà trình duyệt của bạn đang dùng và hiển thị nội dung được dịch sao cho phù hợp. Dưới đây là một so sánh giữa bản tiếng Tây Ban Nha và tiếng Anh.

Phiên bản website tiếng Tây Ban Nha

Phiên bản webiste tiếng Anh

Chúng ta có thể nhận ra Uber không chỉ dịch văn bản mà còn thay đổi thiết kế trang web để thích nghi tốt hơn với khán giả trong từng phiên bản.

Sử dụng referral link

Ví dụ cuối cùng là trang giới thiệu từ Intercom. Chris Von Wilpert nắm giữ vai trò quan trọng về chiến lược phát triển của Intercom. Tip đầu tiên ông đưa ra là chiến lược giới thiệu được sử dụng bởi Intercom với Dynamic Keyword Insertion. Khi người dùng nhấp vào referral link từ một cuộc trao đổi trực tiếp với brand của Intercom, không giống như các công ty SaaS khác, ông sẽ dẫn đến trên một trang đích như dưới đây.

Landing page với dynamic keyword insertion

Bí quyết ở đây là tên công ty trong thông báo thay đổi phụ thuộc vào nơi mà người dùng nhìn thấy liên kết, điều này mang lại bối cảnh tốt hơn cho người dùng do chuyển đổi nhiều hơn bằng cách sử dụng một thông điệp chung chung.

Tại sao việc áp dụng hyper-personalization vẫn còn quá chậm trên các website?

Câu trả lời là do nhiều thách thức kỹ thuật mà các trang web phải đối mặt để mang lại nhiều trải nghiệm người dùng hơn. Một số thách thức phổ biến là:

  • Dữ liệu non-actionable dư thừa. Các công ty có lượng dữ liệu phong phú nhưng không thể dùng để cá nhân hoá các trải nghiệm số bởi vì dữ liệu được chứa trong các hệ thống khác nhau.
  • Nắm rõ đối tượng để personalize. Nội dung bị khóa trong Content Management System (hệ thống quản lý nội dung) và được kiểm soát bởi các nhà phát triển, trong khi dữ liệu khách truy cập không có sẵn cho việc xác định mục tiêu theo thời gian thực.
  • Đo lường tác động của việc cá nhân hóa. Thậm chí nếu họ có thể xác định nội dung được cá nhân hoá đến các đối tượng có giá trị, các công ty thường thiếu các phương thức trực tiếp để đo lường hiệu quả tổng hợp của danh mục nội dung tùy chỉnh trên website theo thời gian.

Sự trỗi dậy của giao diện Conservational

Tin tốt là với sự nổi lên của Conversational Interface (CI) còn được gọi là giao diện dựa trên chatbot, bây giờ chúng ta có giải pháp hoàn hảo để mang lại trải nghiệm của website đến cấp độ tiếp theo.

Đối với những người không quen với thuật ngữ:

Giao diện đàm thoại là giao diện người dùng tương tác với người dùng khác kết hợp chat, âm thoại voice hoặc bất kỳ giao diện ngôn ngữ tự nhiên nào với các phần tử đồ hoạ như button, hình ảnh, menu, video, …

Slack là một ví dụ tuyệt vời cho Conversational Interface

Có ba lý do chính tại sao CI có sự phù hợp tự nhiên cho hyper-personalization trên website:

Real-time: Không giống như giao diện người dùng đồ họa tương đối tĩnh, người dùng của CIcó thể có tương tác trong thời gian thực. Hơn nữa, họ có thể chọn mỗi tương tác thông tin có liên quan nhất. Do đó, conversational interface liên tục được điều chỉnh và xác định lại bởi mỗi đầu vào từ người dùng.

-Contextualization: một cuộc trò chuyện là giao tiếp hai chiều, người dùng đang nhận được thông tin nhưng đồng thời cũng cung cấp dữ liệu của bản thân cho hệ thống: thông tin, sở thích, vị trí,… Với CI, các doanh nghiệp có thể mô tả người dùng và sử dụng tất cả các dữ liệu để cá nhân hoá những trải nghiệm hơn nữa.

-Simplicity: cuối cùng nhưng không kém phần quan trọng, với hầu hết CMS có sẵn trên thị trường, rất khó để làm được mức độ hyper-personalization thực sự cần thiết để cung cấp một trải nghiệm Frictionless. Tuy nhiên, trong trường hợp của CI, chi phí phát triển là phải thực sự phải chăng. Trên thực tế, có những dịch vụ sẵn có như Landbot.io có thể giúp mọi người xây dựng trải nghiệm đàm thoại trên trang web mà không có bất kỳ kiến thức kỹ thuật nào.

Ví dụ cho Conversional Website

Để kết luận tôi muốn chia sẻ một số ví dụ thú vị của các trang web đàm thoại:

Landbot.io: một công cụ đơn giản nhằm mục đích nhân bản hóa trải nghiệm website bằng các cuộc trò chuyện. Để chứng minh tiềm năng của CI, nhóm Landbot đã xây dựng trang web hoàn chỉnh của họ theo một định dạng cuộc trò chuyện.

Adrian Zumbrunnen: là một nhà thiết kế UX / UI, ông đã biến trang cá nhân của mình thành một cuộc trò chuyện. Ông cũng đã viết một số bài học thú vị về thí nghiệm của mình.

Upcoming Page: Sản phẩm Hunt, nền tảng chất lượng cao, gần đây tung ra các sản phẩm số mới đã phát hành một tính năng mới gọi là Upcoming Page. Nó giúp các nhà sản xuất sản phẩm để có được người dùng đầu cho các sản phẩm sắp tới của họ.

Tôi hy vọng bài viết này có thể làm rõ một số thách thức mà các nhà phát triển web đang phải đối mặt liên quan đến Hyper-Personalization. Ngoài ra, tiềm năng của Conversational Interface để làm cho trải nghiệm trên website trở còn là trở ngại.

Nguồn: TopDev via Uxplanet

Cách thức hoạt động của Javascript: Tổng quan về engine, runtime & call stack

javascript

Các Tech teams hiện nay đang khai thác tối đa mọi sự hỗ trợ của Javascript ở nhiều cấp độ trong stack của team như Frontend, Backend, Hybrid apps, các thiết bị nhúng…

Bài viết này sẽ mở đầu cho series nghiên cứu sâu về Javascript, cách thức hoạt động của Javascript, tích lũy từ quá trình nắm rõ các building blocks của Javascript và cách kết hợp chúng để viết code & apps tốt hơn.

Như đã thấy trong GitHut stats, JavaScript nằm top đầu trong Active Repositories và Total Pushes trên GitHub.

Nếu các dự án đang ngày càng trở nên độc lập hơn với JavaScript, đồng nghĩa là developer phải tận dụng mọi thứ mà Javascript & hệ sinh thái cung cấp với sự thấu hiểu ngày càng sâu hơn về những yếu tố nội bộ nhằm xây dựng nên 1 phần mềm tốt hơn.

Có rất nhiều developer đang sử dụng Javascript mỗi ngày nhưng lại không nắm được kiến thức cơ bản.

Tổng quan

Hầu hết mọi người đều đã nghe đến V8 Engine và hầu hết mọi người đều biết Javascript là single-thread hoặc biết rằng Javascript đang sử dụng 1 callback queue.

Trong post này, chúng ta sẽ đào sâu các concepts này và giải thích rõ cách hoạt động của Javascript. Nắm được chi tiết những điều này, bạn sẽ có thể viết được các ứng dụng tốt hơn, không bị block và khai thác các APIs đã cung cấp 1 cách phù hợp.

Nếu bạn mới tiếp xúc với Javascript, bài viết này sẽ giúp bạn hiểu lý do tại sao Javascript khá “kì quặc” so với các ngôn ngữ khác.

Và nếu bạn là 1 developer Javascript kinh nghiệm thì hy vọng tôi có thể đem đến vài insights tươi mới liên quan đến Javascript Runtime mà bạn đang sử dụng hằng ngày.

JavaScript Engine

Ví dụ phổ biến của JavaScript Engine là V8 engine của Google. Ví dụ, V8 engine được sử dụng trong Chrome và Node.js. Đây là tổng quan đơn giản về Javascript Engine.

Engine sẽ gồm 2 components chính:

  • Memory Heap — nơi diễn ra memory allocation
  • Call Stack — nơi các stack frames tồn tại khi code của bạn thực thi

Xem thêm các tin đăng tuyển dụng lập trình viên javascript trên TopDev

Runtime

Có các APIs trong hệ điều hành được hầu hết các JavaScript developer sử dụng ngoài kia (như “setTimeout”). Tuy nhiên, các API đó không do Engine cung cấp.

Vậy chúng đến từ đâu?

Thực tế sẽ phức tạp hơn.

Như vậy, chúng ta đã có Engine nhưng thực sự có nhiều thứ khác nữa, như Web APIs được cung cấp bởi các hệ điều hành như DOM, AJAX, setTimeout…

Và sau đó, chúng ta có event loop & callback queue rất phổ biến.

Call Stack

JavaScript là ngôn ngữ lập trình single-threaded, đồng nghĩa là nó có Call Stack single.

Call Stack là 1 data structure ghi lại nơi chúng ta hiện diện trong program. Nếu nói về 1 function, chúng ta đặt nó lên đầu stack. Nếu chúng ta trả về từ 1 function, thì lấy nó ra khỏi phần đầu. Đó chính là tất cả những gì mà stack có thể làm.

Cùng xem ví dụ sau.

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

Khi engine bắt đầu thực hiện đoạn code này, Call Stack sẽ trống. Sau đó, các bước tiếp theo sẽ như sau:

Mỗi entry trong Call Stack được gọi là 1 Stack Frame.

Và đây chính xác là cách xây dựng các stack traces khi 1 exception đang được “ném” – về cơ bản nó là state của Call Stack khi exception xảy ra. Xem đoạn code sau:

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
    foo();
}
function start() {
    bar();
}
start();

Nếu đoạn code được thực thi trong Chrome (giả định code này nằm trong file tên là foo.js), stack trace theo sau sẽ được xây dựng như sau:

Blowing the stack”  xảy ra khi bạn đến được kích cỡ Call Stack tối đa. Và việc này diễn ra khá dễ dàng đặc biệt là trong trường hợp đang sử dụng giải thuật đệ quy mà không test code quá rộng rãi. Cùng xem đoạn code mẫu:

function foo() {
    foo();
}
foo();

Khi engine bắt đầu thực thi đoạn code này, engine sẽ bắt đầu bằng việc gọi function “foo”. Tuy nhiên, function này là đệ quy và bắt đầu tự call mà không có bất kì điều kiện chấm dứt nào. Vì vậy, ở mỗi bước execution, function tương tự sẽ được thêm vào Call Stack hết lần này đến lần khác.

Tuy nhiên, trong vài thời điểm, số lượng function calls trong Call Stack sẽ vượt quá kích thước thực sự của Call Stack và hệ điều hành sẽ quyết định hành động bằng cách ném 1 error trông như này:

Chạy code trong single thread khá dễ vì bạn không phải xử lý các tình huống phức tạp phát sinh trong những môi trường multi-threaded —chẳng hạn như deadlocks.

Tuy nhiên, chạy trong 1 single thread cũng có giới hạn của nó. Vì JavaScript có 1 single Call Stack, nên chuyện gì sẽ xảy ra khi mọi thứ bị chậm?

Concurrency & Event Loop

Chuyện gì xảy ra khi bạn có function calls trong Call Stack ngốn rất nhiều thời gian để xử lý? Ví dụ, thử tưởng tượng bạn muốn thực hiện vài chuyển đổi hình ảnh phức tạp trong hệ điều hành.

Vấn đề chính là khi Call Stack có các functions để thực thi, hệ điều hành không thể thực sự làm điều gì khác vì bị block. Đồng nghĩa là hệ điều hành không thể render, không thể chạy code nào khác và bị mắc kẹt. Việc này sẽ gây ra vấn đề nếu bạn muốn có fluid UIs tốt trong ứng dụng của mình.

Thêm nữa, một khi hệ điều hành bắt đầu xử lý quá nhiều tasks trong Call Stack, nó sẽ ngừng responsive trong 1 quãng thời gian khá dài. Và hầu hết các browsers sẽ hành động bằng cách đưa ra error, hỏi bạn là liệu có muốn ngừng web page này không.

Trải nghiệm người dùng không tốt chút nào, đúng không?

Vậy làm cách nào để có thể thực thi các đoạn code này mà không chặn UI & khiến cho browser không responsive nữa? Giải pháp ở đây là asynchronous callbacks giải pháp sẽ được giải thích chi tiết hơn trong Phần 2 của tutorial “How JavaScript actually works” là “Inside the V8 engine + 5 tips on how to write optimized code”.

Trong khi đó, nếu bạn đang gặp khó khăn trong việc reproduce và hiểu rõ các vấn đề diễn ra trong các ứng dụng Javascript của mình thì hãy xem qua SessionStack. SessionStack ghi lại mọi thứ trong web apps của bạn: những thay đổi của DOM, user interactions, các exceptions của JavaScript, stack traces, các network requests bị lỗi và các tin nhắn debug.

Với SessionStack, bạn có thể replay các vấn đề trong web apps như videos và quan sát mọi thứ diễn ra với user.

Bắt đầu hoàn toàn miễn phí ở đây.

 

Nguồn: TopDev via blog.sessionstack.com

Xem thêm việc làm IT lương cao trên TopDev

Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

Bạn có thể không thích câu trả lời vì thật sự rất phức tạp.

Isn’t the word element synonymous to the word component anyway?

Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

From reactjs.org

Nói một cách kỹ thuật, ReactDOM không biểu thị một React component hoặc React element trong DOM. Nó render các phần tử DOM được hỗ trợ bởi instances của component. Điều này đúng cho các thành phần của class. Đối với function component, ReactDOM chỉ tạo ra các phần tử DOM. Function elements không có các instance (có thể được truy cập với this) vì vậy khi sử dụng một function component, ReactDOM render DOM element được tạo ra từ element được trả về của function.

Những gì bạn cần hiểu ở đây là một React element khác với một DOM element. React element chỉ là mô tả của một HTML element, React component, hoặc là sự kết hợp của cả hai.

Một câu hỏi phỏng vấn hay hơn sẽ là: “Khi nào bạn sử dụng một cái gì đó giống như <MyComponent /> trong JSX, một component, element hay một instance?”

Là element nhưng không phải là DOM element, mà là React element. Đầu mối ở đây là bất kỳ JSX tag nào được dịch sang React.createElement . Nhớ, CREATE. ELEMENT.

Tuy nhiên, đối với React để tiếp tục làm việc với React element này, nó sẽ phải đưa ra một function hoặc tạo instance từ class.

Bạn có thể tìm thấy các component, element, và instance bị hòa lẫn trong các React guides và hướng dẫn trên mạng. Tôi có lỗi về việc xáo trộn những từ ngữ này, nhưng tôi nghĩ một người mới bắt đầu học về React cần phải hiểu được những điểm khác biệt quan trọng. Blog React có một bài viết về chủ đề này nhưng lại quá kỹ thuật cho người mới bắt đầu.

Bạn có thể tham khảo những định nghĩa đơn giản hơn của tôi:

  • React Component là template. Một blueprint. Một global definition. Đây có thể là function hoặc class (với một chức năng render).
  • React Element là những gì được trả lại từ các component. Đó là một đối tượng hầu như mô tả các DOM nodes mà một thành phần đại diện. Với function component, element này là đối tượng mà hàm trả về. Với class component, Element là đối tượng mà hàm trả về của function returns. Các React element lại không phải là những gì chúng ta thấy trong trình duyệt. Chúng chỉ là những đối tượng trong bộ nhớ và không thể thay đổi bất cứ điều gì.
  • React tạo, cập nhật và hủy các instance nội bộ để tìm ra DOM element tree cần phải được render cho browser. Khi làm việc với các class components, thường thì sẽ tham chiếu đến các DOM element được render bằng browser như các component instances. Bạn có thể render cho nhiều instance của cùng một component. Instance là từ khóa “this” mà bạn sử dụng bên trong các thành phần dựa trên class. Bạn sẽ không cần phải tạoinstance từ class 1 cách thủ công, chỉ cần nhớ rằng nó nằm ở một nơi nào đó trong bộ nhớ của React.
  • Các phần tử React dựa trên chức năng không có instance. Một function component vẫn có thể được render nhiều lần nhưng React không chỉ kết hợp một local instance với mỗi lần biểu thị. Nó chỉ sử dụng chức năng gọi hàm để xác định DOM element nào sẽ hiển thị cho hàm.

Điểm mấu chốt là ReactDOM không hiển thị các component trong trình duyệt, và nó không biểu thị các phần tử hoặc (theo nghĩa giữ phần tử để đại diện cho kết quả của React.createElement). Nó cũng không thể hiện instance mà thể hiện các DOM element.

Thật không may, có vẻ như có một practice phổ biến là ở đó để sử dụng term component là cả template lẫn instances hoặc invocations được sử dụng thông qua templates. Tôi không đổ lỗi cho bất cứ ai vì bị lẫn lộn ở đây. Chỉ là một chút thất vọng.

Câu chuyện ở đây là gì?

Mỗi React app bắt đầu với một render sử dụng một phần tử React. Hãy dùng ví dụ HelloMessage  từ reactjs.org, thay đổi 1 chút để có function component:

const Today = () => (
 <div>Today is {new Date().toDateString()}</div>
);
class HelloMessage extends React.Component {
 render() {
   return (
     <React.Fragment>
       <div>Hello {this.props.name}</div>
       <Today />
     </React.Fragment>
   );
 }
}
ReactDOM.render(
 <HelloMessage name="Taylor" />,
 mountNode
);

React element đầu tiên là instance chúng ta bắt đầu trong ReactDOM.render call:

<HelloMessage name="Taylor" /> // This is a React element

React element này mô tả rằng DOM tree được kết xuất nên bắt đầu với component của HelloMessage và một biến  name  với giá trị prop tương đương với Taylor.

React bây giờ cần trả lời câu hỏi: HelloMessage là gì?

Mỗi lần React element mô tả 1 React component (giống như React element chúng ta có ở trên), React sử dụng component của nó để thay thế instance đó bằng những component được trả về. Nó tạo ra instance cho các component dựa vào class hiện tại và giữ tham chiếu của instance trong bộ nhớ và không tạo ra bất cứ điều gì cho các component dựa trên chức năng; nó chỉ invoke element.

Những gì được trả lại từ component của HelloMessage là React element mô tả một  React.Fragment Component:

React ngay bây giờ cần trả lời câu hỏi:  React.Fragment là gì?

React sẽ tiếp tục giảm các mô tả không xác định của các component cho đến khi chỉ có các DOM nodes hợp lệ. Mô tả  React.Fragment được dịch sang 2 React element, một mô tả div và còn lại mô tả một thành phần Today 

React ngay bây giờ cần trả lời câu hỏi: Today  là gì?

Nó gọi hàm Today  để đưa ra câu hỏi cuối cùng này. Hàm Today  trả về một React element mô tả một div.

Tại thời điểm này, virtual tree hoàn thành với tất cả các React elements mô tả các DOM nodes. React sử dụng thuật toán đối chiếu của nó để tìm ra những gì điều được cập nhật trong browser. Các node đã được dịch với instance component duy trì hiệu quả của việc modify instance đó.

Tham khảo việc làm React lương cao mới nhất trong tháng tại đây

Nguồn: TopDev via Medium.freecodecamp

Học Python: Từ Zero đến Hero (phần 2)

PHẦN 1

Iteration: Looping thông qua Data Structures

Như đã biết về Python Basics, List iteration rất đơn giản. Các developer Pythonthường sử dụng looping For như sau:

bookshelf = [
  "The Effective Engineer",
  "The 4 hours work week",
  "Zero to One",
  "Lean Startup",
  "Hooked"
]

for book in bookshelf:
    print(book)

Vậy là với mỗi quyển trên kệ, (có thể làm mọi thứ) để print nó. Đơn giản & trực quan, đó chính là Python.

Đối với hash data structure, chúng ta cũng có thể sử dụng loop for nhưng áp dụng key :

dictionary = { "some_key": "some_value" }

for key in dictionary:
    print("%s --> %s" %(key, dictionary[key]))
    
# some_key --> some_value

Với mỗi key trong dictionary , chúng ta sẽ print key đó và value tương ứng của nó.

Cách khác là sử dụng method iteritems.

dictionary = { "some_key": "some_value" }

for key, value in dictionary.items():
    print("%s --> %s" %(key, value))

# some_key --> some_value

Chúng ta đã đặt tên 2 biến số là key & value, nhưng không cần thiết, có thể đặt bất kì tên nào. Cùng xem:

dictionary_tk = {
  "name": "Leandro",
  "nickname": "Tk",
  "nationality": "Brazilian",
  "age": 24
}

for attribute, value in dictionary_tk.items():
    print("My %s is %s" %(attribute, value))
    
# My name is Leandro
# My nickname is Tk
# My nationality is Brazilian
# My age is 24

Rõ ràng, chúng ta đã sử dụng attribute như 1 tham số cho Dictionary key & nó hoạt động rất tốt. Quá tuyệt vời!

  Học Python: Từ Zero đến Hero (phần 1)

Classes & Objects

Một chút lý thuyết

Objects là đại diện cho các đối tượng trong thực tế như xe hơi, chó, xe đạp. Các objects sẽ chia sẻ 2 đặc tính chủ chốt là: data và behavior.

Xe sẽ có data, như số các bánh xe, số cửa sổ và sức chứa chỗ ngồi. Chúng sẽ phơi bày behavior: có thể nâng lên, dừng lại, hiển thị lượng nhiên liệu còn lại…

Chúng ta nhận diện data như các attributes & behavior như các methods trong lập trình hướng đối tượng.

Data → Attributes và Behavior → Methods

Và 1 Class chính là blueprint mà từ đây các objects đơn lẻ sẽ được tạo ra. Trên thực tế, chúng ta thường tìm các objects cùng loại với nhau. Như xe hơi đề có động cơ, bánh xe, cửa… và mỗi xe được build từ cùng bộ blueprints, có cùng các components.

Python Object-Oriented Programming mode: ON

Trong vai trò 1 ngôn ngữ lập trình hướng đối tượng, Python có 3 con concepts: class & object.

Một class là 1 blueprint, 1 model cho các objects của class đó.

Nói chung, 1 class chỉ là 1 model hoặc 1 cách để define attributes và behavior (như đã đề cập trong section theory). Ví dụ, 1 phương tiên di chuyển class có attributes riêng dùng để xác định liệu objects nào là các phương tiện di chuyển. Số lượng các bánh xe, loại bồn chứa, sức chứa chỗ ngồi và vận tốc maximum đều là các attributes của 1 phương tiện di chuyển.

Từ đây, chúng ta có thể xem syntax Python cho các classes:

class Vehicle:
    pass

Chúng ta define classes với 1 class statement  – và chỉ có vậy. Dễ mà, phải không?

Objects là các instances của 1 class. Chúng ta tạo 1 instance bằng cách đặt tên cho class.

car = Vehicle()
print(car) # <__main__.Vehicle instance at 0x7fb1de6c2638>

Ở đây, car là 1 object (hoặc instance) của class Vehicle.

Lưu ý rằng phương tiện di chuyển class của chúng ta có 4 attributes: số lượng bánh xe, loại bồn chứa, sức chứa chỗ ngồi và vận tốc tối đa. Chúng ta đặt tất cả những attributes này khi tạo 1 phương tiện object. Vậy nên ở đây sẽ define class để nhận data khi khởi tạo nó:

class Vehicle:
    def __init__(self, number_of_wheels, type_of_tank, seating_capacity, maximum_velocity):
        self.number_of_wheels = number_of_wheels
        self.type_of_tank = type_of_tank
        self.seating_capacity = seating_capacity
        self.maximum_velocity = maximum_velocity

Chúng ta sử dụng method init, gọi là 1 constructor method. Vì vậy, khi tạo phương tiện di chuyển object, chúng ta có thể define những attributes này. Hãy tưởng tượng rằng bạn rất yêu thích loại Tesla Model S, và muốn tạo loại object này. Nó sẽ có 4 bánh xe, chạy năng lượng điện, gồm 5 ghế và vận tốc tối đa là 250km/giờ(155 mph). Tạo object như sau:

tesla_model_s = Vehicle(4, 'electric', 5, 250)

Bốn bánh + “loại bồn chứa” bằng điện + 5 ghế + vận tốc tối đa 250km/ giờ

Tất cả các attributes đã được thiết lập. Nhưng làm thế nào để tiếp cận được các giá trị của những attributes này? Chúng ta gửi 1 tin nhắn đến object hỏi về chúng, gọi nó là 1 method, là hành vi của object trên. Hãy implement nó:

class Vehicle:
    def __init__(self, number_of_wheels, type_of_tank, seating_capacity, maximum_velocity):
        self.number_of_wheels = number_of_wheels
        self.type_of_tank = type_of_tank
        self.seating_capacity = seating_capacity
        self.maximum_velocity = maximum_velocity

    def number_of_wheels(self):
        return self.number_of_wheels

    def set_number_of_wheels(self, number):
        self.number_of_wheels = number

Đây là 1 implementation của 2 methods: number_of_wheels và set_number_of_wheels. Chúng ta gọi nó là getter & setter. Vì getter lấy attribute value và setter thiết lập 1 giá trị mới cho attribute đó.

Trong Python, thì sử dụng @property (decorators) để define gettersvà setters.

class Vehicle:
    def __init__(self, number_of_wheels, type_of_tank, seating_capacity, maximum_velocity):
        self.number_of_wheels = number_of_wheels
        self.type_of_tank = type_of_tank
        self.seating_capacity = seating_capacity
        self.maximum_velocity = maximum_velocity

    @property
    def number_of_wheels(self):
        return self.number_of_wheels

    @number_of_wheels.setter
    def number_of_wheels(self, number):
        self.number_of_wheels = number

Và sử dụng các methods này như những attributes:

tesla_model_s = Vehicle(4, 'electric', 5, 250)
print(tesla_model_s.number_of_wheels) # 4
tesla_model_s.number_of_wheels = 2 # setting number of wheels to 2
print(tesla_model_s.number_of_wheels) # 2

Điều này có khác 1 chút với việc define methods. Các methods hoạt động như là các attributes. Ví dụ, khi set số bánh xe mới, chúng ta không áp số 2 vào thành 1 tham số mà set giá trị 2 vào number_of_wheels. Đây là 1 cách để viết code pythonic getter và setter.

Nhưng có thể sử dụng methods cho những thứ khác, như method “make_noise

class Vehicle:
    def __init__(self, number_of_wheels, type_of_tank, seating_capacity, maximum_velocity):
        self.number_of_wheels = number_of_wheels
        self.type_of_tank = type_of_tank
        self.seating_capacity = seating_capacity
        self.maximum_velocity = maximum_velocity

    def make_noise(self):
        print('VRUUUUUUUM')

Khi call method này, nó chỉ trả lại 1 string VRRRRUUUUM.

tesla_model_s = Vehicle(4, 'electric', 5, 250)
tesla_model_s.make_noise() # VRUUUUUUUM

Encapsulation: Ẩn thông tin

Encapsulation là cơ chế giới hạn khả năng tiếp cận trực tiếp đến data & methods của các objects. Nhưng cùng lúc đó, nó lại hỗ trỡ việc vận hành trên data đó (methods của các objects)

“Encapsulation được dùng để ẩn Data Members & Members function. VỚi Định nghĩa này, encapsulation đồng nghĩa là việc hiển thị nội bộ của 1 object được ẩn toàn bộ khỏi tầm nhìn của definition Đến từ Object đó” — Wikipedia

Tất cả hiển thị nội bộ của 1 object được ẩn khỏi bên ngoài. Chỉ có object đó mới tương tác được với data nội bộ của nó.

Đầu tiên, chúng ta cần phải hiểu cách hoạt động của các biến số instance public và non-public và methods.

Các biến số Instance công khai

Đối với 1 Python class, khởi tạo 1 public instance variable trong constructor method của chúng ta.

Trong method constructor:

class Person:
    def __init__(self, first_name):
        self.first_name = first_name

Ở đây, áp dụng value first_name như 1 argument đến public instance variable.

tk = Person('TK')
print(tk.first_name) # => TK

Trong class:

class Person:
    first_name = 'TK'

Không cần áp dụng first_name như 1 argument, và tất cả các instance objects sẽ có 1  class attribute được khởi tạo với TK.

tk = Person()
print(tk.first_name) # => TK

Tốt. Hiện chúng ta đã biết sử dụng public instance variables và class attributes. Điều thú vị khác nữa về phần public là có thể quản lý giá trị của biến, nghĩa là object có thể quản lý giá trị biến số của nó: các giá trị biến số Get và Set.

Nhắc đến Person, nếu muốn set giá trị khác cho biến first_name:

tk = Person('TK')
tk.first_name = 'Kaio'
print(tk.first_name) # => Kaio

Đấy, chúng ta chỉ set giá trị khác (kaio) cho biến instance first_name và nó đã cập nhật giá trị. Đơn giản vậy thôi. Vì là biến public nên sẽ làm được điều đó.

Biến Instance không công khai

“Ở đây, chúng ta không sử dụng thuật ngữ “private” vì không có attribute nào thực sự riêng tư trong Python (mà  không có 1 lượng lớn công việc không cần thiết)” — PEP 8

Giống như public instance variable , chúng ta có thể define non-public instance variable trong method constructor hoặc trong class. Điểm khác biệt syntax chính là: đối với non-public instance variables, sẽ sử dụng gạch dưới (_) trước tên variable.

“‘Các biến instance private mà không thể tiếp cận ngoài trừ lúc ở trong 1 object thì sẽ không tồn tại trong python. Tuy nhiên, có 1 quy ước được hầu hết code python theo là: 1 name prexide với 1 dấu gạch dưới (như: _spam) nên được xem như 1 phần không công khai của API (dù nó là 1 function, 1 method hay 1 data member)” — Python Software Foundation

Ví dụ:

class Person:
    def __init__(self, first_name, email):
        self.first_name = first_name
        self._email = email

Bạn có thấy biến email không? Đây là cách chúng ta define 1 non-public variable

tk = Person('TK', 'tk@mail.com')
print(tk._email) # tk@mail.com

“Chúng ta có thể access & cập nhật nó. Non-public variables chỉ là 1 Quy ước và nên được xem như phần non-public của API”

Vì vậy, sử dụng 1 method cho phép define trong class definition. Cùng implement 2 methods (email và update_email) để hiểu rõ hơn:

class Person:
    def __init__(self, first_name, email):
        self.first_name = first_name
        self._email = email

    def update_email(self, new_email):
        self._email = new_email

    def email(self):
        return self._email

Bây giờ chúng ta có thể update & access non-public variables bằng những methods đó. Cùng xem:

tk = Person('TK', 'tk@mail.com')
print(tk.email()) # => tk@mail.com
tk._email = 'new_tk@mail.com'
print(tk.email()) # => tk@mail.com
tk.update_email('new_tk@mail.com')
print(tk.email()) # => new_tk@mail.com
  1. Khởi tạo 1 object mới bằng first_name TK và email tk@mail.com
  2. Printt email bằng cách tiếp cận non-public variable với 1 method
  3. Cố gắng set email mới ngoài class
  4. Cần phải xem non-public variable như phần non-public của API
  5. Cập nhật non-public variable bằng method instance
  6. Thành công! Chúng ta có thể cập nhật nó trong class bằng method helper

Public Method

Với public methods, chúng ta cũng có thể sử dụng ngoài class:

class Person:
    def __init__(self, first_name, age):
        self.first_name = first_name
        self._age = age

    def show_age(self):
        return self._age

Thử test xem:

tk = Person('TK', 25)
print(tk.show_age()) # => 25

Tốt, vậy là không có vấn đề gì.

Non-public Method

Nhưng với non-public methods thì không làm được điều này. Hãy implement cùng class Person nhưng bây giờ với 1 show_age non-public method bằng 1 dấu gạch dưới (_).

class Person:
    def __init__(self, first_name, age):
        self.first_name = first_name
        self._age = age

    def _show_age(self):
        return self._age

Giờ chúng ta sẽ cố gọi non-public method này với object của mình:

tk = Person('TK', 25)
print(tk._show_age()) # => 25

“Chúng ta có thể access & Update nó. Non-public methods chỉ là 1 quy ước & nên được xem như 1 phần non-public của API”

Dưới đây là ví dụ về cách sử dụng non-public methods:

class Person:
    def __init__(self, first_name, age):
        self.first_name = first_name
        self._age = age

    def show_age(self):
        return self._get_age()

    def _get_age(self):
        return self._age

tk = Person('TK', 25)
print(tk.show_age()) # => 25

Chúng ta có 1 _get_age non-public method và 1 show_age public method. Object của chúng ta có thể sử dụng  show_age (bên ngoài class) và _get_age chỉ được sử dụng bên trong class definition (trong method show_age). Nhưng 1 lần nữa, đây chỉ là vấn đề liên quan đến quy ước.

Encapsulation Summary

Với encapsulation, có thể đảm bảo rằng hiển thị nội bộ của object được ẩn.

Inheritance: các hành vi và các đặc tính

Một vài objects nào đó sẽ sở hữu vài điểm chung: behavior & characterists của chúng.

Trong lập trình hướng đối tượng, các class có thể thừa hưởng những đặc tính (data) và hành vi (methods) tương tự từ class khác.

Cùng xem 1 ví dụ khác và implement nó bằng Python.

Hãy tưởng tượng 1 chiếc xe hơi. Số lượng bánh xe, sức chứa chỗ ngồi và vận tốc tối đa là tất cả các attributes của 1 chiếc xe. Có thể nói rằng 1 class ElectricCar thừa hưởng cùng các attributes từ class Car thông dụng.

Class Car đã implement như sau:

class Car:
    def __init__(self, number_of_wheels, seating_capacity, maximum_velocity):
        self.number_of_wheels = number_of_wheels
        self.seating_capacity = seating_capacity
        self.maximum_velocity = maximum_velocity

Một khi đã khởi tạo, chúng ta có thể sử dụng tất cả instance variables đã được tạo ra. Tốt.

Trong Python, hãy áp dụng parent class vào child class như 1 tham số. Một class ElectricCar có thể kế thừa từ class Car.

class ElectricCar(Car):
    def __init__(self, number_of_wheels, seating_capacity, maximum_velocity):
        Car.__init__(self, number_of_wheels, seating_capacity, maximum_velocity)

Đơn giản vậy thôi, chúng ta không cần phải implement bất kì method nào khác, vì class nà đã có rồi (được thừa hưởng từ class Car).

my_electric_car = ElectricCar(4, 5, 250)
print(my_electric_car.number_of_wheels) # => 4
print(my_electric_car.seating_capacity) # => 5
print(my_electric_car.maximum_velocity) # => 250

Thật đẹp, đúng không?

Tổng quan

Như vậy, bài viết này đã giúp chúng ta nắm được những kiến thức Python cơ bản:

  • Cách hoạt động của các biến Python
  • Cách hoạt động của conditional statements Python
  • Cách looping Python (while & for) hoạt động
  • Cách sử dụng Lists: Collection | Array
  • Dictionary Key-Value Collection
  • Cách lặp thông qua data structures
  • Objects & Classes
  • Các attibutes như data của objects
  • Methods như hành vi của các objects
  • Sử dụng getters và setters của Python & property decorator
  • Encapsulation: ẩn thông tin
  • Inheritance: behaviors (hành vi) và characteristics (đặc tính)

Bạn có thể đọc thêm quá trình nghiên cứu lập trình của tôi ở The Renaissance Developer.

Chúc vui, đừng quên hãy tiếp tục học hỏi và luôn cố gắng coding nhé!

Xem thêm các vị trí python tuyển dụng từ công ty lớn

Nguồn: TopDev via medium.freecodecamp.com

Học Python: Từ Zero đến Hero (phần 1)

Trước nhất, Python là gì? Theo người sáng lập, Guido van Rossum, Python là:

“Là programming language high-level, và triết lý core design tập trung vào code readability và syntax cho phép các programmers thể hiện được concepts chỉ trong vài dòng code”

Với tôi, lý do đầu tiên học Python vì đây là ngôn ngữ đẹp, có thể code & thể hiện suy nghĩ của tôi 1 cách tự nhiên.

Lý do nữa chúng tôi có thể tận dụng việc code Python trong nhiều lĩnh vực như: Data Science, Web Development, Machine Learning… Quora, Pinterest & Spotify đều dùng Python để lập trình backend Web của mình.

Tuyển python lương cao các công ty hot

Kiến thức cơ bản

1. Variables – Các biến số

Bạn có thể xem các biến số này như những từ ngữ chứa 1 giá trị.

Trong Python, rất dễ để define 1 variable và đặt giá trị cho nó. Hãy tưởng tượng bạn muốn lưu số 1 trong biến gọi là “one”. Bạn có thể làm như sau:

one = 1

Quá dễ phải không? Chỉ cần chỉ định giá trị 1 đến biến “one”.

two = 2
some_number = 10000

Và bạn có thể chỉ định bất kì giá trị nào đến bất kì biến số nào mà bạn muốn. Như đã thấy ở bảng trên, biến “two” giữ số nguyên 2, và “some_number” giữ 10,000.

Bên cạnh các số nguyên, chúng ta cũng có thể sử dụng booleans (True / False), strings, float, và rất nhiều kiểu dữ liệu khác.

# booleans
true_boolean = True
false_boolean = False

# string
my_name = "Leandro Tk"

# float
book_price = 15.80

2. Control Flow: conditional statements (lệnh tùy điều kiện)

If” sử dụng 1 expression để xác định liệu statement là True hay False. Nếu là True, nó sẽ thực thi những gì thuộc về lệnh “if”. Ví dụ:

if True:
  print("Hello Python If")

if 2 > 1:
  print("2 is greater than 1")

2 lớn hơn 1, vì vậy code “print” sẽ được thực thi.

Lệnh “else” sẽ được thực thi nếu expression “if” là false.

if 1 > 2:
  print("1 is greater than 2")
else:
  print("1 is not greater than 2")

1 không lớn hơn 2, nên code trong “else” statement will be executed.

Bạn cũng có thể sử dụng statement “elif”:

if 1 > 2:
  print("1 is greater than 2")
elif 2 > 1:
  print("1 is not greater than 2")
else:
  print("1 is equal to 2")

3. Looping / Iterator

Trong Python, chúng ta có thể iterate theo nhiều hình thức khác nhau, như while và for.

While Looping: nếu statement là True, thì code trong block sẽ được thực thi. Vì vậy, code này sẽ in số từ 1 đến 10.

num = 1

while num <= 10:
    print(num)
    num += 1

Loop while cần 1 “loop condition.” Nếu True, nó sẽ tiếp tục lặp. Trong ví dụ này, khi num là 11 loop condition sẽ bằng False.

Một đoạn code căn bản khác mà bạn cần hiểu chính là:

loop_condition = True

while loop_condition:
    print("Loop Condition keeps: %s" %(loop_condition))
    loop_condition = False

Loop condition là True nên nó sẽ tiếp tục lặp — cho đến khi chúng ta set nó False.

For Looping: bạn áp dụng biến “num” cho block này, và lệnh “for” sẽ lặp nó cho bạn. Đoạn code này sẽ print tương tự như while code: từ 1 đến 10.

for i in range(1, 11):
  print(i)

Bạn thấy không? Rất đơn giản. Vùng sẽ bắt đầu với 1 và kéo dài đến element thứ 11 (10 là element số thứ tự 10).

  Hướng dẫn cài đặt, lập trình Python trên Ubuntu (Linux)

List: Collection | Array | Data Structure

Tưởng tượng bạn muốn lưu số nguyên 1 trong 1 biến số. Nhưng có thể bây giờ bạn lại muốn lưu 2. Và 3, 4, 5 …

Liệu tôi có cách nào khác để lưu tất cả các số nguyên mà tôi muốn, nhưng không phải trong hàng triệu biến số? Tất nhiên là có 1 cách như thế.

List là 1 collection được dùng để lưu danh sách các giá trị (như những số nguyên mà bạn muốn).

my_integers = [1, 2, 3, 4, 5]

Rất đơn giản, chúng ta có thể tạo 1 array & lưu nó trong my_integer.

Nhưng bạn sẽ tự hỏi: “Làm thế nào để lấy 1 giá trị từ array này?”

Một câu hỏi thú vị. List có 1 concept gọi là index. Element đầu tiên sẽ lấy index 0 (zero). Element tiếp theo lấy 1 và cứ như thế.

Để rõ ràng hơn, chúng ta có thể diễn tả array & mỗi element với index của nó.

Sử dụng Python syntax sẽ rất dễ hiểu:

my_integers = [5, 7, 1, 3, 4]
print(my_integers[0]) # 5
print(my_integers[1]) # 7
print(my_integers[4]) # 4

Tưởng tượng xem, bạn không muốn lưu trữ các số nguyên, bạn chỉ muốn lưu trữ strings, như danh sách họ tên của những người thân quen. Đoạn code của tôi sẽ như thế này:

relatives_names = [
  "Toshiaki",
  "Juliana",
  "Yuji",
  "Bruno",
  "Kaio"
]

print(relatives_names[4]) # Kaio

Nó sẽ hoạt động tương tự như các số nguyên.

Chúng ta chỉ mới cách hoạt động của Lists Nhưng tôi sẽ cho bạn thấy cách thêm 1 element vào data structure List (1 item vào 1 list).

Method thông dụng nhất để thêm 1 giá trị mới vào 1 List là append. Cách thức hoạt động như sau:

bookshelf = []
bookshelf.append("The Effective Engineer")
bookshelf.append("The 4 Hour Work Week")
print(bookshelf[0]) # The Effective Engineer
print(bookshelf[1]) # The 4 Hour Work Week

append cực kì đơn giản. Bạn chỉ cần áp dụng element như tham số  append (ví dụ “The Effective Engineer”)

  Học Python: Từ Zero đến Hero (phần 2)

Lists đã xong. Cùng nghiên cứu data structure khác:

Dictionary: Key-Value Data Structure

Hiện tại, chúng ta đã biết Lists được index với các số nguyên. Nhưng chuyện gì sẽ xảy ra nếu chúng ta không muốn sử dụng các số nguyên như các indices? Một số data structure có thể sử dụng là numeric, string hoặc các loại indices khác.

Cùng nghiên cứu về data structure DictionaryDictionary là tập hợp các cặp key-value. Kết quả sẽ ra thế này:

dictionary_example = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}

key là index chỉ đến value. Làm thế nào để tiếp cận value Dictionary? Hãy sử dụng key.

dictionary_tk = {
  "name": "Leandro",
  "nickname": "Tk",
  "nationality": "Brazilian"
}

print("My name is %s" %(dictionary_tk["name"])) # My name is Leandro
print("But you can call me %s" %(dictionary_tk["nickname"])) # But you can call me Tk
print("And by the way I'm %s" %(dictionary_tk["nationality"])) # And by the way I'm Brazilian

Tôi đã tạo 1 Dictionary gồm tên, nickname và quốc tịch. Những attributes này đều là keys Dictionary.

Khi nghiên cứu cách tiếp cận List bằng index, chúng ta cũng sử dụng indices (keys trong context Dictionary) để tiếp cận value lưu trữ trong Dictionary.

Trong ví dụ này, tôi đã print 1 đoạn về mình bằng tất cả các giá trị lưu trong Dictionary. Khá đơn giản, phải không?

Điều khá hay về Dictionary chính là chúng ta có thể sử dụng bất cứ thứ gì làm value. Trong Dictionary mà tôi tạo, tôi muốn thêm key “age” & số tuổi nguyên thực sự của mình vào đó:

dictionary_tk = {
  "name": "Leandro",
  "nickname": "Tk",
  "nationality": "Brazilian",
  "age": 24
}

print("My name is %s" %(dictionary_tk["name"])) # My name is Leandro
print("But you can call me %s" %(dictionary_tk["nickname"])) # But you can call me Tk
print("And by the way I'm %i and %s" %(dictionary_tk["age"], dictionary_tk["nationality"])) # And by the way I'm Brazilian

Ở đây, chúng ta có 1 cặp key (tuổi) value (24) bằng string như key và integer như value.

Như những gì đã làm với Lists, cùng nghiên cứu cách thêm các elements vào 1 Dictionarykey chỉ đến 1 value là 1 phần quan trọng tạo nên Dictionary. Điều này cũng đúng khi chúng ta đề cập đến việc thêm các elements vào đó:

dictionary_tk = {
  "name": "Leandro",
  "nickname": "Tk",
  "nationality": "Brazilian"
}

dictionary_tk['age'] = 24

print(dictionary_tk) # {'nationality': 'Brazilian', 'age': 24, 'nickname': 'Tk', 'name': 'Leandro'}

Chúng ta chỉ cần chỉ định 1 value vào 1 key Dictionary. Không có gì phức tạp, đúng không nhỉ?

(còn tiếp)

Nguồn: TopDev via medium.freecodecamp.org

Ứng tuyển các vị trí tuyển dụng IT lương cao trên TopDev

Những điều cần biết về CSS-in-JS

Thinking in components — Bạn sẽ không còn phải maintain 1 đống style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS theo level component, thay vì theo level document (modularity).

Ví dụ về Styled React Component


Nhiều khả năng là bạn đã nghe đến những thuật ngữ như CSS-in-JSStyled ComponentsRadiumAphrodite & tự hỏi tại sao lại có thứ này nữa?—Tôi đã & đang rất hài lòng với CSS-in-CSS (CSS trong .css)”

CSS-in-JS là 1 topic nhạy cảm, gây nhiều tranh cãi, được xem là concept tốt nhất giúp bạn không cần phải maintain folder chứa đầy các stylesheet.

Xem qua CSS-in-JS.


CSS-in-JS là gì?

JSS là abstraction mạnh mẽ hơn CSS. JSS sử dụng JavaScript như 1 ngôn ngữ để mô tả các styles theo cách declarative & maintainable. JSS là JS high performance đến CSS compiler hoạt động ở runtime & server-side. CORE LIBRARY THUỘC LEVEL THẤP & framework agnostic, NẶNG khoảng 6KB (ĐÃ minified & gzipped) Có thể extensible bằng plugins API. — nguồn

Nhớ rằng Inline styles & CSS-in-JS không giống nhau! Chúng hoàn toàn khác nhau !

Cách thức hoạt động của Inline Styles

const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>
inline styles

Trong hệ điều hành, việc này sẽ dính vào DOM node như thế này:

<p style="color: white; backgrond-color: black;">inline style!</p>

Cách thức hoạt động của CSS-in-JS

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

<Text>Hello CSS-in-JS</Text>

Trong browser, đoạn code này sẽ attach với DOM như thế này:

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

Sự khác biệt

Bạn có nhận ra sự khác biệt nào không? CSS-in-JS gắn tag <style>  ở phần trên của DOM trong khi inline styles chỉ gắn properties vào DOM node.

Tại sao việc này lại quan trọng?

Không phải tất cả các tính năng CSS đều có thể ẩn danh trước event handlers của Javascript, nhiều selectors ngụy tạo (như :disabled:before:nth-child) đều không hoạt động, styling các tags html và body không được hỗ trợ…

Với CSS-in-JS, bạn nắm giữ hết mọi quyền năng của CSS trong lòng bàn tay. Vì CSS đã được generate, bạn có thể sử dụng mọi truy vấn media & selector ngụy tạo mà bạn có thể nghĩ đến. Một vài thư viện (như jssstyled-components) thậm chí còn hỗ trợ các tính năng không thuộc CSS là nesting!

Bài viết trong link sau sẽ giải thích chi tiết hơn về điểm khác biệt

“Chỉ cần viết CSS in CSS và xong!”

Đúng vậy— tuy trường hợp này đã xảy ra từ lâu rồi nhưng thách thức đặt ra lúc này chính là modern web được viết bằng components, không phải pages.

CSS chưa bao giờ phù hợp với các giải pháp bằng component. CSS-in-JS sẽ thực sự giải quyết được vấn đề này. Vue cũng là 1 giải pháp khác dù styles của Vue không tiếp cận với components state.

Lợi ích của việc sử dụng CSS-in-JS là gì?

  • Thinking in components — Bạn sẽ không còn phải maintain quá nhiều style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS ở cấp độ component, thay cho cấp độ document (phương pháp modularity).
  • CSS-in-JS sẽ khai thác tối đa hệ sinh thái JavaScript nhằm tăng cường cho CSS.
  • True rules isolation” — Các selector được scoped là không đủ. Nếu không define rõ, CSS sẽ có các properties được tự động kế thừa từ element parent. Nhờ có plugin jss-isolate, các nguyên lý JSS sẽ không kế thừa properties.
  • Scoped selectors — CSS chỉ có 1 global namespace. Bạn sẽ không thể tránh khỏi các va chạm selector trong các non-trivial apps. Đặt tên các conventions như BEM có thể giúp ích trong 1 dự án nhưng sẽ khi tích hợp code bên thứ 3 thì mọi chuyện sẽ khác. Trong khi đó, JSS sẽ mặc định generate các class names unique khi JSS compile hiển thị JSON representation sang CSS.
  • Vendor Prefixing —CSS rules được tự động vendor prefix
  • Code sharing — Dễ dàng chia sẻ constants & functions giữa JS và CSS.
  • Chỉ có các styles hiện đang được sử dụng trên màn hình của bạn mới có trong DOM.
  • Dead code elimination
  • Unit tests cho CSS!

Bất lợi của CSS-in-JS?

  • Learning curve – Đường cong học tập: những nỗ lực cần thiết để học được kĩ năng mới sau một khoảng thời gian nhất định
  • Các dependencies mới
  • Các thành viên mới trong team sẽ gặp khó khăn để thích nghi với code-base. Những ai mới làm quen với front-end sẽ phải học nhiều thứ mới.
  • Không hoàn toàn là điểm bất lợi nhưng CSS-JS sẽ thách thức status quo. (tình trạng ngưng trệ trước khi có những tác động tạo ra sự thay đổi)

Vì các điểm mạnh vẫn vượt trội điểm yếu nên hãy thử CSS-in-JS xem sao nhé! Chẳng có gì để mất!


Các thư viện CSS-in-JS phổ biến nhất

Styled Components

import React, { Component } from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: white;
`;

const Wrapper = styled.div`
    background: black
`

class App extends Component {
  render() {
    return (
        <Wrapper>
            <Title>Hello World!</Title>
        </Wrapper>
    );
  }
}

export default App;

JSS-React

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
    wrapper: {
        background: 'black'
    },
    title: {
        color: 'white'
    }
}


const App = ({classes}) => (
    <div className={classes.wrapper}>
        <h1 className={classes.title}>
            Hello JSS-React!
        </h1>
    </div>
)

export default injectSheet(styles)(App)

glamorous

import React from 'react'
import glamorous from 'glamorous'

const Wrapper = glamorous.div({
    backgroundColor: 'black'
})

const Title = glamorous.h1({
    color: 'white'
})

const App = () => (
    <Wrapper>
        <Title> Hello JSS-React!</Title>
    </Wrapper>
)

export default App;

Radium (caveat: uses inline styles)

import React, { Component } from 'react';
import Radium from 'radium';

@Radium // decorator
class App extends Component {
	render() {

        const styles = {
            wrapper: {
                background: 'blue',
            }
            title: {
                color: 'white'
            }
        };

		return (
            <div style={styles.wrapper}>
                <h1 style={styles.title}>Hello Radium!</h1>
            </div>
		);
	}
}

export default Radium(App);

Lưu ý: Radium sử dụng decorators!

Aphrodite

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: 'red'
    },
    title: {
        backgroundColor: 'blue'
    }
});

class App extends Component {
    render() {
        return (
            <div className={css(styles.wrapper)}>
                <h1 className={css(styles.title)}>Hello Aphrodite!<h1>
            </div>;
        )
    }
}

Stylotron

import React, { Component } from 'react';
import { styled } from 'styletron-react';

const Wrapper = styled('div', {
    backgroundColor: 'black'
})

const Title = styled('h1', {
    color: 'white'
})

class App extends Component {
    render() {
        return (
            <Wrapper>
                <Title>Hello Styletron!<Titleh1>
            </Wrapper>;
        )
    }
}

Có nhiều ví dụ rất đơn giản để thể hiện core functionality. Tất cả thư viện đều có nhiều hơn các tính năng đi kèm – ví dụ như: themingdynamic propsserver side rendering

Chi tiết về các tính năng CSS-in-JS xem tại đây

Danh sách đầy đủ những thư viện hay của CSS-in-JS tại đây

Nguồn: TopDev via hackernoon.com