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

Tuần này học gì: Cú gạt giò của RegExp với cờ global

Vừa rồi mình mới phải làm một chức năng tìm kiếm trên một mảng dữ liệu tương tự như vầy.

const data = [
  { id: 1, text: 'cóc ổi cam chanh' },
  { id: 2, text: 'dừa cam chanh tắc' },
  { id: 3, text: 'xoài me sung quít' },
  { id: 4, text: 'cam chanh dứa xoài' },
]

Để người dùng có thể tìm bằng chữ hoa chữ thường hay gì tùy ý thì đơn giản nhất là dùng RegExp.

function search(keyword, data) {
  const regex = new RegExp(keyword, 'gi')
  return data.filter((d) => regex.test(d.text))
}

const result = search('Cam ch', data)
console.log(result)
→ [ { id: 1, text: "cóc ổi cam chanh" },
    { id: 4, text: "cam chanh dứa xoài" } ] // Ủa 😳

Hóa ra là khi được khởi tạo với cờ global /foo/g hay sticky /foo/y, mỗi lần gọi đến .test() thì đối tượng RegExp sẽ lưu lại vị trí lastIndex trong chuỗi mà nó tìm thấy [Nguồn]. Trong ví dụ ở trên, sau khi tìm thấy chuỗi trong object ID 1, regex.lastIndex sẽ có giá trị là 13. Qua đến ID 2, nó bắt đầu tìm từ vị trí 13 trong chuỗi, không tìm thấy gì nên trả lastIndex về lại 0. Đến ID 3 cũng không tìm thấy nên lastIndex vẫn là 0. Cuối cùng với ID 4 thì tìm từ vị trí 0 ra kết quả nên trả về true 😫

Bài học ở đây là không dùng global khi làm tính năng tìm kiếm này, hoặc sử dụng String.prototype.match(), hoặc khởi tạo đối tượng RegExp ngay bên trong hàm .filter().

Tin vắn

• Firefox 114 vừa phát hành hỗ trợ WebTransport API. API này bản nâng cấp của WebSocket, sử dụng HTTP/3 Transport để trao đổi dữ liệu giữa client và server.

• Mozilla giới thiệu MDN Playground, cho phép bạn thử nghiệm nho nhỏ chạy HTML/ CSS/ JavaScript ngay tại trang. So với jsfiddle hay codepen thì MDN Playground không có gì nổi bật hơn, lại đòi phải nâng cấp lên MDN Plus nếu muốn tạo permalink, thành ra chắc cũng ít xài. À có một tính năng là dùng AI để giải thích code, nhưng vẫn…meh 🤷‍♂️

• Bên cạnh đó, web.dev vừa có một trang giới thiệu về WebAssembly. Tại đây bạn có thể xem qua tổng quan về Wasm, Emscripten, và một số ứng dụng của chúng trong thực tiễn.

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 😛

• jquense/react-big-calendar: Giao diện lịch giống như Gcal/ Outlook viết bằng React

• daybrush/selecto: Giúp bạn chọn các elements trên trang bằng cách kéo chuột hay touchpad.

• joeattardi/picmo: Giao diện để chọn emoji bằng JavaScript thuần, dễ tích hợp với React, Vue, Angular, v.v.

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

• CommonJS is hurting JavaScript: Phải công nhận một điều là nhóm phát triển Deno rất siêng viết blog, hầu như tuần nào cũng có một bài. Lần này Andy Jiang chỉ ra những bất tiện của CommonJS: modules phải tải đồng bộ, không dễ “rung cây”, không được trình duyệt hỗ trợ, và kêu gọi chuyển qua xài ESM. Một diễn biến khác thì Bun thì lại ra bài CommonJS is not going away.

• JavaScript Gom Jabbar: Thêm một bài phàn nàn nữa về hệ sinh thái JavaScript, lần này là package.json 🤭

• It’s Not Wrong that ”🤦🏼‍♂️”.length == 7: Henri Sivonen của Mozilla có bài viết về cách các ngôn ngữ khác nhau xử lý Unicode. Đọc rất là mở mang nha.

• Styling scrollbars: Ollie Williams giới thiệu cách tùy chỉnh thanh cuộn bằng scrollbar-color và scrollbar-width, mặc dù hai thuộc tính này chỉ mới được Firefox hỗ trợ.

• Incomplete List of Mistakes in the Design of CSS: Những sai lầm khi thiết kế CSS. Đọc giải trí cho vui 😃

• What does the image decoding attribute actually do?: Barry Pollard thắc mắc thuộc tính decoding của thẻ IMG hoạt động như thế nào, và câu trả lời là…

• On the <dl> (2021): Ben Myers giới thiệu về thẻ <dl> để tạo danh sách định nghĩa và những ứng dụng khác của nó. Mình cũng hay xài thẻ này lắm nè.

Kết

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