BẢN TIN CÔNG NGHỆ "DÂN CODER" HÀNG TUẦN [TUẦN 14,15,16,17 - 2023]

BởiAdmin •
0

Tuần này học gì: window.location.reload() và đồng bọn

Lại một tuần im ắng nên phải có thêm mục này cho bản tin dài ra 🙃

Phương thức window.location.reload() chắc đã rất quen thuộc với mọi người rồi đúng không? Dùng để tải lại trang hiện tại, giống như người dùng nhấn nút Refresh vậy. Phương thức này không nhận vào tham số nào hết, nhưng thử tìm kiếm trên Github bạn sẽ thấy có rất nhiều chỗ gọi window.location.reload(true).

Hóa ra trước đây Firefox có hỗ trợ window.location.reload(forceGet : boolean) để ép trang bỏ qua bộ đệm và tải lại trang. Tham số này không được quy định trong bất cứ tiêu chuẩn (standards) nào hết, và là hàng tự chế của Firefox. Các trình duyệt khác hoàn toàn bỏ qua tham số này. Do đó bạn cứ gọi window.location.reload() là được rồi.

Bên cạnh .reload(), chúng ta còn có window.location.assign(url) và window.location.replace(url). Cả hai phương thức này đều dùng để chuyển trang sang url mới, chỉ khác ở chỗ .replace() sẽ thay thế URL hiện tại trong History của trình duyệt. Tức là:

history = [page-1, page-2]

location.assign(page-3) → history = [page-1, page-2, page-3]
location.replace(page-3) → history = [page-1, page-3]

Nếu người dùng nhấn nút Back, tùy thuộc vào bạn sử dụng .assign() hay .replace() mà trình duyệt sẽ quay về page-2 hay page-1 tương ứng.

Tin vắn

  • Nhóm phát triển Angular vừa thông báo sẽ hỗ trợ Jest từ v16 và Web Test Runner trong những phiên bản sau nữa. Trước đây thì các dự án Angular hay xài Karma của Google.

  • Phiên bản Chrome 113 sắp tới sẽ cho phép bạn ghi đè (overrride) headers của network response. Giờ đây bạn chỉ cần mở devtool - Network - Headers - Response Headers, sau đó click vào biểu tượng Edit là có thể thêm vào CORS, Permissions-Policy, hay bất cứ header nào tùy ý. Ngoài ra phiên bản này còn có những tính năng khác mà bạn có thể đọc thêm ở đây.

  • The Verge đăng bài cho biết với tính năng Follow creator, Microsoft Edge sẽ gửi bất cứ URL nào bạn truy cập đến bingapis.com. Nghe cũng hơi mệt đó. Nếu bạn quan tâm đến quyền riêng tư thì (1) tắt tính năng này (2) nghỉ xài Edge cho lành.

  • Cũng liên quan tới Microsoft nhưng The Register vừa cho biết một vài phần lõi của Windows 11 đang được chuyển từ C++ qua Rust 🦀

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

  • TanStack/form: Họ nhà Tanstack lại đón chào thành viên mới. Thư viện này giúp bạn xử lý form và hỗ trợ hầu hết các framework. Hiện tại vẫn đang âm thầm phát triển.

  • observablehq/plot: là một thư viện mã nguồn mở để biểu diễn dữ liệu dạng bảng. Plot không hẳn tập trung vào vẽ biểu đồ mà giúp bạn khám phá và hình dung dữ liệu nhanh nhất, chỉ với vài dòng code. Plot được phát triển từ D3, và có thể tích hợp vào React/ Vue.

  • mishamyrt/Lilex: Lilex là một font lập trình được phát triển dựa trên IBM Plex Mono, hỗ trợ ligatures.

Đọc/ xem gì cuối tuần

  • Scoped CSS is back: Keith J. Grant điểm sơ qua tính năng @scope của CSS, giúp bạn giới hạn các rules trong một selector nhất định. Bạn có thể thử qua tính năng này trong Chrome sau khi bật Experimental Web Platform Features ở chrome://flags/. Tạm biệt BEM, CSS-in-JS hay CSS modules 👋

  • Hiding empty elements with CSS :empty and :has(): Thay vì dùng class .open / .close, Tobias Ahlin giới thiệu một kỹ thuật mới để ẩn/ hiện nội dung trên web bằng :empty và :has().

  • Inconsistent JavaScript imports can lead to duplicate code: Một kinh nghiệm nhỏ khi import module với các dự án dùng Webpack để tránh code bị bundle nhiều lần.

  • Is Critical Thinking the Most Important Skill for Software Engineers?: Gergely Orosz khuyến khích lập trình viên nên phát triển kỹ năng tư duy phản biện, để có thể tự xây dựng ý kiến riêng thay vì cứ nghe theo các “cây đa cây đề” hay nhân vật nổi tiếng trong ngành.

  • A Gentle Introduction to Islands: Một bài tổng quan về kiến trúc đảo trong Fresh, hay còn gọi là Đảo khủng long.

Có gì mới trong ECMAScript 2023?

Hội đồng TC39 vừa chốt đơn những tính năng của phiên bản ES2023. Cùng xem qua nhé.

Tìm một phần tử từ cuối mảng

Để tìm kiếm một phần tử trong mảng, chúng ta có thể dùng Array#find(fn) và Array#findIndex(fn). Hai phương thức này trả về phần tử hoặc vị trí của phần tử đầu tiên thỏa mãn điều kiện của hàm fn, tính từ đầu mảng. Ví dụ:

const arr = [0, 7, 12, 9, 21, 8]

// Tìm số lẻ đầu tiên trong mảng
arr.find((x) => x % 2 === 1) // 7
arr.findIndex((x) => x % 2 === 1) // 1

ES2023 bổ sung hai phương thức mới: Array#findLast(fn) và Array#findLastIndex(fn). Như tên gọi, hai phương thức này sẽ trả về phần tử/ vị trí của phần tử đầu tiên thỏa mãn hàm fn, nhưng tính từ cuối mảng.

const arr = [0, 7, 12, 9, 21, 8]

arr.findLast((x) => x % 2 === 1) // 21
arr.findLastIndex((x) => x % 2 === 1) // 4

Hiện tại bạn có thể sử dụng findLast() và findLastIndex() trên tất cả các trình duyệt.

Các phương thức mới cho mảng: toReversed(), toSorted(), toSpliced(), và with()

Các phương thức Array#reverse(), Array#sort(), và Array#splice() thay đổi (mutate) mảng khi được gọi. Điều này không đảm bảo tính bất biến (immutability). Do đó ES2023 bổ sung các phương thức sau vào Array.prototype:

  • toReversed(): Đảo ngược vị trí các phần tử của mảng từ dưới lên
  • toSorted(): Sắp xếp mảng
  • toSpliced(): Xóa một/nhiều phần tử trong mảng, hoặc thay thế phần tử ở những vị trí nhất định
const a = [0, 7, 12, 9, 21, 8]

// Đảo ngược mảng
const reversed = a.toReversed() // [ 8, 21, 9, 12, 7, 0 ]

// Sắp xếp mảng
const sorted = a.toSorted((x, y) => x - y) // [ 0, 7, 8, 9, 12, 21 ]

// Xóa phần tử ở chỉ mục 1
const removed = a.toSpliced(1, 1) // [ 0, 12, 9, 21, 8 ]

a === reversed // false
a === sorted // false
a === removed // false

Bên cạnh đó, chúng ta cũng có phương thức mới Array#with(index, value). Phương thức này dùng để thay thế giá trị của một phần tử tại vị trí nhất định. Chẳng hạn như:

const a = [0, 7, 12, 9, 21, 8]

const b = a.with(1, 3) // [0, 3, 12, 9, 21, 8]
a === b // false

Trừ Firefox ra, các trình duyệt khác đều đã hỗ trợ phương thức này.

Chuẩn hóa cú pháp hashbang

Khi viết script để chạy trong CLI bằng Node.js, có thể bạn sẽ dùng hashbang (hay còn gọi là shebang).

// Giả sử chúng ta có tập tin cli.js
#!/usr/bin/env node
console.log('Hello')

Và sử dụng như vầy:

$ chmod +x cli.js
$ ./cli.js # Không cần phải `node cli.js` nữa
Hello

Vấn đề là #! không phải là cú pháp hợp lệ trong ECMAScript, và thường thì dòng hashbang sẽ được môi trường chủ bỏ đi trước khi chuyển qua cho Node.js thực thi. ES2023 đề xuất chuẩn hóa cú pháp của hashbang, và chỉ cho phép đặt hashbang ở đầu tập tin.

Sử dụng Symbols làm khóa cho WeakMap

Hiện tại thì bạn chỉ có thể dùng object làm khóa cho WeakMap. ES2023 mở rộng ra, cho phép bạn dùng Symbol để làm khóa luôn.

const weak = new WeakMap()
const key = Symbol('ref')
weak.set(key, 'ECMAScript 2023')

console.log(weak.get(key))

Tính năng này đã được hầu hết các trình duyệt hỗ trợ (trừ Firefox).

Nếu chưa biết về WeakMap và WeakSet thì đừng bỏ qua bài viết Tìm hiểu Map và Set trong JavaScript nha.

Tin vắn

  • Node.js phát hành phiên bản v20.0.0, thử nghiệm tính năng Permission Model cho phép lập trình viên giới hạn quyền truy cập tài nguyên của ứng dụng, chẳng hạn như không cho phép sử dụng hệ thống tập tin, tạo process con hay thread mới. Nghe giống Deno ha. Phiên bản này cũng nâng cấp lên V8 11.3.

  • TypeScript vừa merge tính năng mới, cho phép trả về bất cứ dữ liệu nào có thể render được như string, number, promises… trong React component, thay vì chỉ null | JSX.Element.

  • LightningCSS, chương trình xử lý CSS viết bằng Rust siêu nhanh của Parcel, vừa phát hành phiên bản 1.20.0, mang đến những cải thiện khi viết media và container queries, hỗ trợ cú pháp of S khi dùng :nth-child(), cập nhật dữ liệu về tính tương thích của các trình duyệt…

  • Mozilla mở rộng tính năng Total Cookie Protection cho người dùng trên toàn thế giới. Tính năng này tạo riêng một “hộp bánh” cho mỗi website, và chỉ website đó mới có thể đọc dữ liệu cookie của nó, giúp hạn chế người dùng bị theo dõi khi truy cập nhiều website khác nhau.

  • Chrome thử nghiệm một giao diện mới với nhiều thông tin hơn khi cài đặt web app trên desktop và mobile. Lập trình viên có thể thêm vào nhiều screenshots giúp người dùng dễ hình dung hơn về ứng dụng được cài đặt.

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

  • yoavbls/pretty-ts-errors: Extension cho VSCode giúp thông báo lỗi của TypeScript trở nên dễ đọc (hiểu) hơn.

  • gradient.style: Công cụ tạo gradient siêu xịn của Adam Argyle, mặc định sử dụng màu oklch nên bạn nên xem bằng Safari 16.4 nhe.

  • azurystudio/cheetah: web framwork mới cho Deno, tự quảng cáo là nhanh như báo.

  • Rich-Harris/headless-qr: Thư viện tạo mã QR gọn nhẹ của Rich Harris, tác giả Svelte.

  • microsoft/griffel: Thư viện CSS-in-JS của Microsoft.

Đọc/ xem gì cuối tuần

Tính năng mới trên nền tảng web

Tháng 3 vừa qua đón chào các phiên bản ổn định của Firefox 111, Chrome 111, và Safari 16.4. Cùng điểm qua những tính năng mới trên nền tảng web nào.

Firefox 111 thêm vào thuộc tính toàn cục autocapitalize và translate cho thẻ HTML. autocapitalize khi gán vào thẻ input sẽ quy định chữ được tự động viết hoa như thế nào khi nhập bằng bàn phím ảo. Các giá trị cho phép là: on / sentences tự động viết hoa đầu câu (mặc định), words viết hoa cho chữ cái đầu tiên của mỗi từ, characters tất cả chữ đều viết hoa, và off / none để tắt viết hoa tự động. autocapitalize sẽ không có hiệu lực với input[type=url | email | password]. Trong khi đó translate = yes | no giúp bạn quy định phần nội dung nào nên được dịch bởi các chương trình tự động, ví dụ như Google Translates. Chẳng hạn như <span translate="no">My Dung Co.</span> thì không nên dịch ra vậy 😆

Cũng trong phiên bản 111, Firefox mang đến Origin Private File System (OPFS). Nói cho ngắn gọn thì đây là một “ổ cứng” để tạo thư mục và tập tin dành riêng cho từng domain vậy. Bạn có thể dùng OPFS để đọc/ ghi files nhanh hơn, phù hợp cho các ứng dụng dùng Wasm. Tìm hiểu thêm về OPFS ở đây.

Trong khi đó Chrome 111 mang đến View Transitions API, giúp bạn thực hiện các chuyển động khi thay đổi trạng thái các trang của SPAs. Ngoài ra Chrome 111 còn hỗ trợ các màu bên ngoài sắc vực (gamut) RGB, cùng với hai hàm CSS mới color() và color-mix(), và hỗ trợ cú pháp “of S” cho :nth-child() và :nth-last-child().

Với Safari 16.4, trong bản tin tuần trước chúng ta cũng nói qua những tính năng mới rồi:

  • Gửi tin thông báo (notifications) từ ứng dụng app đã được thêm vào Home Screen thông qua Push API, Notification API, và Service Worker. Đồng thời bạn cũng có thể dùng Badge API để hiển thị một nhãn đếm (badge) trên icon của ứng dụng.

  • Giới thiệu các pseudo-class mới: :dir(), :user-valid, :user-invalid, :modal, :fullscreen.

  • @property để định nghĩa kiểu giá trị cho biến CSS.

  • Hỗ trợ CSS Typed OM, giúp JavaScript có thể đọc giá trị của CSS thành object với kiểu dữ liệu tương ứng, thay vì chỉ là string như trước đây.

Tin vắn

  • Vercel đang thử nghiệm Vercel KV, một cơ sở dữ liệu dạng khóa-giá trị (key-value) chạy ở Edge. Sử dụng Redis của Upstash bên dưới.

  • Storybook phát hành trước phiên bản 7.0, đem đến hỗ trợ Vite ngay từ đầu, không cần cài đặt cho NextJS và SvelteKit, cải thiện type safety, cũng như sửa vài lỗi khác.

  • Rome phát hành phiên bản 12, hỗ trợ TypeScript 4.7 và 5.0, thêm các luật để lint, hỗ trợ tập tin JSON, nâng cấp tích hợp với VSCode. Quèo, nhưng có ai xài Rome hông?

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

  • oleggrishechkin/react-viewport-list: Là một thư viện nhẹ hều nhưng khá xịn để render một danh sách lớn (vài chục ngàn dòng hoặc hơn) bằng React. Hỗ trợ flexbox, scroll dọc/ ngang, v.v.

  • daba.so: Giúp bạn import một tập tin JSON và chuyển thành database luôn 😮 Sau đó bạn có thể dùng gói npm i daba để thực hiện thêm/ xóa/ sửa/ truy vấn trên db này. Sắp tới sẽ hỗ trợ thêm functions, authentication, pages, email. Làm mình nhớ tới Supabase ghê. Hiện tại vẫn đang miễn phí.

  • swup/swup: Thư viện giúp bạn làm hiệu ứng chuyển trang cho các ứng dụng multi-page.

  • Phosphor Icons tập hợp hơn 1200 icons với 6 phong cách khác nhau: Thin, Light, Regular, Bold, Fill, và Duotone.

  • code-hike/bright là một server component giúp tô màu cú pháp (syntax highlighting 🤣) cho React.

Đọc/ xem gì cuối tuần

Chrome hỗ trợ WebGPU bắt đầu từ phiên bản 113

Google vừa thông báo giới thiệu WebGPU cho trình duyệt Chrome từ phiên bản 113. Được phát triển từ năm 2017 với sự hợp tác của các nhân viên đến từ Mozilla, Apple, Intel, và Microsoft, WebGPU là tập hợp những API mới tận dụng sức mạnh của các phần cứng hiện đại, cho phép ứng dụng web thực hiện render và tính toán tương tự như Direct3D 12, Metal, hay Vulkan.

So với WebGL, WebGPU ưu tiên hỗ trợ tính toán bằng GPU ngay từ đầu, giúp việc xây dựng các ứng dụng machine learning hay AI dễ dàng hơn. Không giống như WebGL là một wrapper của OpenGL, WebGPU tự thiết kế các lớp trừu tượng riêng, thân thiện với môi trường web, hỗ trợ Promises, đồng thời cung cấp thông báo lỗi rõ ràng, cụ thể.

Một vài ví dụ để dùng WebGPU như là:

  • Nâng cấp hiệu năng của các thư viện như Babylon.js hay Three.js, đem đến những kỹ thuật render mới, đồng thời chuyển các tính toán nặng nề từ CPU sang GPU.

  • Chuyển các game engine sang nền web, đồng thời cho phép chúng thực hiện những kỹ thuật render cao cấp hơn. Ví dụ cụ thể là khi xuất bản game làm bằng Unity lên WebGL, các thông số kỹ thuật thường được đặt ở mức thấp. Với WebGPU chúng ta có thể nâng lên những thiết lập cao hơn.

  • Những ứng dụng nặng về tính toán như machine learning hay VR/AR có thể chuyển sang dùng GPU thay vì CPU như trước.

  • Cải thiện các ứng dụng gọi điện từ xa. Chẳng hạn như Google Meet dùng ML để tách hình người dùng ra khỏi phông nền. Bằng cách sử dụng WebGPU, tính năng này có thể chạy nhanh và ít tốn năng lượng hơn, cho phép Google Meet (1) có thể chạy trên những thiết bị phổ thông (2) sử dụng những model phức tạp và đáng tin cậy.

Để tìm hiểu thêm về WebGPU, đừng quên xem qua tài liệu trên MDN hoặc WebGPU Explainer. Hiện tại bạn có thể dùng WebGPU trong Chrome 113 chạy trên các hệ điều hành ChromeOS, macOS, và Windows. Các nền tảng khác như Linux và Android sẽ được hỗ trợ cuối năm nay. Firefox và Safari cũng đang thực hiện cài đặt WebGPU cho trình duyệt của mình.

#TIL: Thuộc tính valueAsNumber và valueAsDate của thẻ <input>

Trước giờ cứ nghĩ đây là hai tính năng riêng của react-hook-form nhưng hóa ra hai thuộc tính này được trình duyệt hỗ trợ sẵn luôn.

Đại loại là valueAsNumber giống như vầy:

<input id="js-input" type="number" value="4" />

const input = document.getElementById('js-input')
console.log(input.value) // (string) '4'
console.log(input.valueAsNumber) // (number) 4

Theo đặc tả HTML thì input[type=number | range] sẽ trả về giá trị số, với input[type=datetime | date | month | week | time | datetime-local] thì giá trị sẽ được chuyển qua Date rồi đổi thành Unix timestamps ở milliseconds, còn với các input khác sẽ luôn trả về NaN.

valueAsDate cũng tương tự, nhưng kết quả sẽ là một đối tượng Date.

<input id="js-input" type="date" value="2022-02-01" />

const input = document.getElementById('js-input')
console.log(input.value) // (string) "2022-02-01"
console.log(input.valueAsNumber) // (number) 1643673600000
console.log(input.valueAsDate) // [object Date] Tue Feb 01 2022 02:00:00 GMT+0200 (Eastern European Standard Time)

Nói chung cũng tiện 😃

Tin vắn

  • Directus vừa thông báo sẽ không tiếp tục cung cấp gói Community Cloud, a.k.a “đồ chùa”, nữa. Lý do thì không gì khác hơn ngoài chuyện tiền nong. Nếu bạn chưa biết, Directus hay được xài như headless CMS, gắn lên trên một cơ sở dữ liệu nào đó như PostgreSQL hay MySQL, và bùm, bạn có ngay REST/ GraphQL API để tha hồ chơi đùa.

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

  • system-fonts/modern-font-stacks: Bạn đã biết sử dụng font hệ thống app nhanh hơn? Repo này sử dụng những font có sẵn trong hệ điều hành để tạo thành từng stack theo phong cách khác nhau, giúp bạn dễ chọn font hơn nữa.

  • nanostores/nanostores: nanostores cũng lâu rồi nhưng bữa nay mình giới thiệu lại 😝 Đây là một thư viện quản lý trạng trái không phụ thuộc vào framework, nhỏ gọn, lại hỗ trợ TypeScript.

  • studio-freight/lenis: Smooth scrolling siêu nhẹ luôn, chỉ có 3.4KB gzipped.

  • ellegantcss/ellegant: Một framework CSS cung cấp các components như Toggler, Switcher, Menu, Modal, v.v. chỉ bằng CSS thuần mà không dùng JavaScript.

Đọc/ xem gì cuối tuần

Kết

Hẹn gặp lại các bạn trong tuần tiếp theo 👋

Tags:

Đăng nhận xét

Mới hơn Cũ hơn