Có gì hot? Tuần 37 - 2023

Tuần này năm ngoái là mình ra bản tin Ehkoo số đầu tiên đó mọi người 😳

Tuần này học gì: Thay đổi giá trị phần tử khi dùng for...of

for...of thì có gì là lạ nữa phải hông mọi người. Ứng dụng thường gặp nhất là để duyệt qua phần tử của một mảng, giống như vầy:

const arr = ['a', 'b', 'c']

for (const el of arr) {
  console.log(el)
}
// 'a'
// 'b'
// 'c'

Nói cho chính xác hơn thì for...of duyệt qua phần tử của một đối tượng có thể duyệt được (iterable objects) như mảng (array), chuỗi (string), Map, Set, NodeList, v.v.

Tự nhiên hôm nay mình nghĩ tới chuyện thay đổi giá trị của một phần khi đang duyệt mảng. Kiểu như vầy:

const arr = ['a', 'b', 'c']

// Sử dụng `let` vì dùng `const` thì không gán giá trị được
for (let el of arr) {
  if (el === 'b') el = 'd'
}
console.log(arr)
// ["a", "b", "c"]

Ở trên mình mong kết quả sẽ là ["a", "d", "c"] nhưng arr vẫn là ["a", "b", "c"]. Kiểm tra lại trên MDN thì có một đoạn ghi chú như vầy.

Note: Each iteration creates a new variable. Reassigning the variable inside the loop body does not affect the original value in the iterable.

Nghĩa là một biến mới luôn được tạo ra trong mỗi vòng lặp. Việc gán lại giá trị của biến không ảnh hưởng đến phần tử gốc. Ok fine, dù sao cũng không khuyến khích vừa duyệt vừa sửa 🤔

Nhưng với đoạn code dưới đây:

const arr = [
  { id: 1, value: 10 },
  { id: 2, value: 20 },
  { id: 3, value: 30 },
]

for (const el of arr) {
  if (el.id === 2) el.value = 50
}
console.log(arr)
// [
//   { id: 1, value: 10 },
//   { id: 2, value: 50 },
//   { id: 3, value: 30 },
// ]

Ủa alo 🫠 Chưa hết…

for (const el of arr) {
  if (el.id === 2) el = { ...el, value: 50 }
}
console.log(arr)
// [
//   { id: 1, value: 10 },
//   { id: 2, value: 20 },
//   { id: 3, value: 30 },
// ]

Tới đây thì mình thấy mệt não quá rồi nên kết luận là bạn không nên vừa duyệt vừa sửa phần tử của mảng nhe. Trừ khi bạn biết mình đang làm gì, nhưng chơi dao cũng có ngày đứt tay đó.

Tin vắn

• Firefox 118 giới thiệu tính năng dịch tự động toàn bộ trang web. Người dùng Chrome thì đã quá quen thuộc với tính năng này rồi, nhưng tính năng dịch của Firefox lại chú trọng vào tính riêng tư nhiều hơn. Do đó dữ liệu được dịch offline mà không dựa vào dịch vụ của bên thứ ba nào.

• eslint v9 sẽ tách phần kiểm tra và định dạng code thành hai phần riêng. Lý do là có rất nhiều luật cơ bản của eslint chỉ bao gồm di chuyển khoảng trắng (whitespaces) qua lại, và đây là công việc của chương trình định dạng code (formatters).

• esbuild phát hành phiên bản 0.19.3.

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

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

• Pagefind vừa ra phiên bản 1.0. Đây là thư viện giúp tạo tính năng tìm kiếm cho các trang web tĩnh. Pagefind hỗ trợ Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, hay bất cứ framework nào build ra tập tin HTML. Sau khi đánh chỉ mục (indexing) xong, bạn có thể dùng JavaScript API của Pagefind cùng với UI mặc định để có ngay ô tìm kiếm nội dung trong trang.

• dprint là nền tảng để định dạng code (formatter) của nhiều ngôn ngữ khác nhau. Tạm thời cứ coi nó như Prettier viết bằng Rust vậy. dprint có plugins cho TypeScript/JavaScript, Markdown, JSON, TOML, v.v

• kiesel là một dự án cá nhân của Linus Groh để cài đặt một JavaScript engine bằng Zig 😦 Kiesel rất giống với LibJS, là engine sử dụng trong SerenityOS và trình duyệt Ladybird mà tác giả đã làm việc qua. Hiện tại Kiesel đã vượt qua được 25% bài test của test262 sau 4 tháng phát triển.

• capricorn86/happy-dom là một dự án tương tự như jsdom nhưng chú trọng vào tốc độ. happy-dom có thể được dùng khi kiểm thử, cào nội dung websites, hay cho server-side rendering.

• wooorm/starry-night tương tự như shiki, giúp bạn highlight mã nguồn nhưng khác ở chỗ sử dụng CSS class giống như Github thay vì dùng inline style. starry-night hỗ trợ hơn 600 ngôn ngữ lập trình, kèm theo một bản build WASM. Được phát triển bởi Titus, tác giả/ người bảo trì các dự án như remark hay rehype.

• Bowen7/regex-vis là một trình soạn thảo tương tác, giúp bạn hình dung các biểu thức chính quy regex một cách rõ ràng hơn. Bạn cũng có thể dùng regex-vis để tạo và kiểm tra…regex.

• nuejs/nuejs: Một thư viện mới để xây dựng UI. So với React, Vue, hay Svelte thì neujs không phải viết code nhiều bằng, phù hợp cho nhà phát triển UX khi cần tập trung vào thiết kế tương tác hay accessibility.

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

• Open source hooliganism and the TypeScript meltdown: Tuần trước Turbo 8 thông báo bỏ TypeScript thì dĩ nhiên drama ngập trời. DHH biên ngay một bài về cộng đồng TypeScript. Nói chứ hít drama bổ phổi hay không không thấy, chỉ thấy nhức đầu thôi mọi người à.

• Next.js, just why?: Pilcrow than phiền về những thay đổi cũng như API không thống nhất của Next.js 12 và 13. Có vẻ như Next.js 13 bị hối phải release quá nên cứ dở dở ương ương kiểu gì.

• The definitive guide to not using Bun: Mayank viết về trải nghiệm với Bun từ góc nhìn của người dùng Windows, đi kèm theo là cảm nhận về dự án này nói chung. Ồ nếu đã đọc bài viết này thì cũng đừng bỏ qua My thoughts on Bun and other Adventures của Matteo Colina, tác giả pino và fastify.

• Some notes on Local-First Development: Kyle Mathews, tác giả của framework Gatsby, chia sẻ những ghi chú khi xây dựng ứng dụng local-first, dịch là gì nhỉ,kiểu vẫn chạy khi không có mạng Internet á.

• JavaScript WTF: Why does every() return true for empty arrays?: Nicholas C. Zakas, tác giả của ESLint, viết bài giải thích vì sao [].every(fn) === true, so sánh với các ngôn ngữ khác, và gợi ý nhìn vào phương thức every() theo một hướng khác.

• An Internet of PHP: Chắc cũng phải hơn 5-6 năm rồi mình không còn viết PHP nữa để theo JavaScript, nhưng tác giả Timo Tijhof chia sẻ vai trò của PHP trong các ứng dụng Internet ngày nay, cũng như những thay đổi gần đây của ngôn ngữ. Nói chứ giờ không thấy tuyển dụng PHP mấy nữa 🤔

• When MFA isn’t actually MFA: Retool ghi lại một trường hợp sử dụng social engineering và deepfake để lừa lấy mã MFA, và vai trò của Google trong này. Nói chung thế giới bây giờ lừa lọc quá không tin được ai 🥺

Kết

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