Khai code đầu xuân, tìm hiểu về Progressive Web Apps (PWA)

Image result for 2019

Xin chào các bạn, các bạn ăn Tết có vui không nè, hôm nay hết Tết rồi mọi người lại quay trở lại với cuộc sống thường nhật thôi. Chắc hẳn mọi người đã từng nghe đến Single Page Application (SPA) rồi phải không? Hôm nay mình sẽ chia sẻ về một khái niệm mới mà các nhà dự đoán công nghệ sẽ bùng nổ trong năm 2019 đó là Progressive Web Apps (PWA).

Vậy PWA là gì? PWA là trải nghiệm người dùng có hướng tiếp cận mới theo các tiêu chí sau:

  • Đáng tin cậy – Tải trang ngay lập tức và không bao giờ hiển thị downasaur, (chú khủng long đáng ghét) ngay cả trong điều kiện mạng không ổn định.
  • Nhanh – Đáp ứng nhanh chóng với các tương tác của người dùng với hình ảnh động mượt mà.
  • Hấp dẫn – Cảm thấy giống như một ứng dụng tự nhiên trên thiết bị, với trải nghiệm người dùng tuyệt vời.

Mức chất lượng mới này cho phép PWA chiếm được một vị trí trên màn hình chính của người dùng. Bây giờ sẽ đi chi tiết vào các tiêu chí bên trên nhé.

1. Đáng tin cậy
Khi khởi động ứng dụng từ màn hình người dùng, Service Workers cho phép PWA tải một cách nhanh chóng bất chấp trạng thái kết nối mạng.
Một Service Worker được viết bằng Javascript giống như một người ủy quyền phía client và để cho người dùng truy cập cache và cách phản hồi lại yêu cầu request. Bằng việc pre-caching (tải lại bộ nhớ đệm đã lưu các nguồn tài nguyên khi người dùng truy cập trang trước đó), bạn có thể loại bỏ việc phụ thuộc vào internet, đảm bảo trải nghiệm người dùng một cách nhanh chóng và đáng tin cậy.

2. Nhanh chóng
53% lượng người dùng sẽ rời bỏ một trang web nếu nó chiếm quá nhiều thời gian tải trang thông thường là 3 giây (không tối ưu trang web như ảnh động, ảnh dung lượng lớn, thư viện nhiều mà không sử dụng hoặc không minified). Và một khi đẫ tải, người dùng mong chờ tải trang nhanh nhất có thể không cần phải cuốn tới đâu tải tới đó hoặc phản hồi chậm. Một trong những ví dụ điển hình trong việc tối ưu trang và tải trang là Thegioididong. Tải cực nhanh và hình ảnh load toàn bộ không cần cuộn để “Load More“.

3. Hấp dẫn
PWA có thể cài đặt và trực tuyến trên màn hình người dùng mà không cần bất kỳ ứng dụng nào khác hỗ trợ. PWA cung cấp trải nghiệm toàn màn hình với sự trợ giúp từ một tập tin manifest (khai báo quyền và cài đặt ứng dung) và thậm chí có thể thu hút người dùng bằng  push notifications.
Một tập tin Manifest cho phép bạn điều khiển cách ứng dụng xuất hiện và cách nó khởi chạy. Bạn có thể chỉ rõ icon, cách tải trang, điều hướng màn hình và thậm chí có hiển thị trong trình duyệt hay không.

Continue reading

Advertisements

Phân biệt Pseudo-elements và Pseudo-classes

Mình đang dự định ra một series về CSS từ lý thuyết đến thực hành luôn vì mình đọc tài liệu trên mozilla thấy cực hay nếu vừa học vừa chia sẻ ra thì nó vừa giúp mình nhớ bài hiệu quả vừa giúp mọi người đọc tài liệu một cách “smart” nhất có thể. Mọi người có góp ý gì về ý tưởng này của mình thì bình luận phía dưới nhé nếu beat_brick nhiều quá thì không dám hê hê.

Cả 2 khái niệm mình đề cập đến đầu tiêu đè nó thuộc về pseudo-selectors dịch nôm na ra là “bộ chọn giả” tức là các selectors này là trạng thái hoặc thuộc tính của selector đã được quy định trước. Chúng không chọn các phần tử, hay đúng hơn là một phần của các phần tử nhất định hoặc các phần tử chỉ trong các ngữ cảnh nhất định. Chúng có hai loại chính: pseudo-classespseudo-elements. Ok giờ bắt đầu đi sâu hơn vào phân tích nhé:

Pseudo-classes


A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Một lớp giả CSS là một từ khóa được thêm vào phía cuối của selector và đứng sau một dấu  (:), nó được dùng để chỉ rõ bạn muốn định dạng cho phần tử được chọn nhưng chỉ khi nó ở trong một trạng thái nhất định. Ví dụ, bạn muốn định dạng một liên kết chỉ khi nó được hover hoặc một checkbox khi nó bị disabled hoặc một phần tử là con thứ nhất của cha trong cây DOM.

keyword_pseudo_classes

Continue reading

Làm việc hiệu quả với dữ liệu thông qua Console.table()

Chào tất cả mọi người, chắc hẳn mọi người đã biết về DevTools của Google rồi phải không? Hôm nay mình sẽ giới thiệu với các bạn về một chức năng cực kỳ hữu ích để quan sát dữ liệu xem tương tác từ server trả về dữ liệu có đúng không, có đủ fields hay không nhé.
Console.table() sẽ giúp bạn lấy dữ liệu ra dưới dạng bảng để quan sát và xem các trường của đối tượng đó 😀 Nào đi xuống ví dụ cho dễ hiểu nhé

Khai báo dữ liệu để thử trước nhé:

let data = [
{
“_id”: “5ba58fdcd4bf0ddbeeec5341”,
“picture”: “http://placehold.it/32×32”,
“age”: 20,
“eyeColor”: “brown”,
“name”: “Mckee Parker”,
“gender”: “male”,
“company”: “KATAKANA”,
“email”: “mckeeparker@katakana.com”,
“phone”: “+1 (912) 526-3879”,
“latitude”: -5.081202,
“longitude”: 169.83552,
“tags”: [
“dolor”,
“occaecat”,
“mollit”,
“labore”,
“dolor”,
“proident”,
“duis”
]
},
{
“_id”: “5ba58fdc20d2114d935e5226”,
“picture”: “http://placehold.it/32×32”,
“age”: 23,
“eyeColor”: “brown”,
“name”: “Pauline Meyer”,
“gender”: “female”,
“company”: “EARTHPURE”,
“email”: “paulinemeyer@earthpure.com”,
“phone”: “+1 (846) 472-2630”,
“latitude”: -79.883639,
“longitude”: -83.842653,
“tags”: [
“do”,
“ex”,
“nostrud”,
“consectetur”,
“aliqua”,
“est”,
“consectetur”
]
},
{
“_id”: “5ba58fdc0f3a4a916c76e6ac”,
“picture”: “http://placehold.it/32×32”,
“age”: 31,
“eyeColor”: “blue”,
“name”: “Janette Bryant”,
“gender”: “female”,
“company”: “KYAGURU”,
“email”: “janettebryant@kyaguru.com”,
“phone”: “+1 (850) 578-2179”,
“latitude”: -70.490236,
“longitude”: 81.918946,
“tags”: [
“cupidatat”,
“veniam”,
“dolor”,
“cillum”,
“Lorem”,
“cillum”,
“qui”
]
}
];

Ok bây giờ sẽ thử 2 thằng console.log()console.table() nhé.

  • Console.log(data) : như bình thường mọi người debug với javascript thôi phải không

Capture

  • Console.table(data)

Capture2

Tada kì diệu chưa? Mọi người biết rồi beat_brick mình nhẹ tay nhé. Hàm này cực có ích để kiểm tra dữ liệu các mảng có các object bên trong, kiểm tra các trường có trả về đủ dữ liệu hay không hoặc để trực quan hơn khi học Javascript chẳng hạn. Cảm ơn mọi người đã theo dõi mọi thông tin về tài liệu các bạn có thể theo dõi thêm tại: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

 

Sự khác nhau của null, 0, undefined, empty trong Javascript?

Trong javascript, chúng ta rất dễ nhầm lẫn giữa các định nghĩa, giá trị, kiểu dữ liệu ở tiêu đề mà mình đưa ra giữa null, 0, undefined, empty. Hôm nay mình sẽ cố gắng giải thích ngắn gọn xúc tích nhất cho mọi người cùng hiểu để không nhầm lẫn nữa nhé, nếu có sai sót gì mọi người có thể bình luận bên dưới bài viết đẻ cùng hoàn thiệt bài viết  nhé.
1. NULL
– Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể được sử dụng để gán cho một biến như là một đại diện không có giá trị. Tức là biến đõ đã được gán giá trị và giá trị đó là null đại diện cho không có giá trị.
Capture
2. UNDEFINED
– Undefined có nghĩa là không xác định. Trong javascript, khi bạn khai báo một biến nhưng chưa gán giá trị cho nó, giá trị của biến đó sẽ là undefined.
Capture2
3. Giá trị 0
– Biến đó đã có giá trị và giá trị của nó là 0. Giá trị của biến đó đã được xác thực và tồn tại.
Capture3
– Mọi người có thể thấy typeof của nó là number tức là nó có kiểu dữ liệu là số và giá trị của nó là 0 nhé.
4. Giá trị Empty
– Empty là giá trị rỗng là biến đó đã được gán giá trị rỗng vào đó hoặc một mảng không chứa giá trị nào nhưng đã được gán dấu [] thì độ dài của nó là 0 vậy mảng đó là mảng rỗng nhé mọi người, không có phần tử trong mảng.
Capture4
Trên đây là một số chia sẻ của mình mọi người đọc nếu không hiểu hãy bình luận ngay nhé :D. Cảm ơn mọi người đã đọc bài!