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

Tuần này học gì: Phương thức tĩnh URL.canParse()

Firefox 115 vừa phát hành ngày 4.7 giới thiệu phương thức tĩnh URL.canParse(url) giúp bạn kiểm tra một URL có hợp lệ hay không. Cách sử dụng rất đơn giản.

const invalid = URL.canParse('https//ehkoo.com')
// false

const valid = URL.canParse('https://ehkoo.com')
// true

Phương thức này cũng hỗ trợ chữ ký URL.canParse(url, base) để bạn kiểm tra một đường dẫn tương đối, trong đó base là đường dẫn gốc.

const invalid = URL.canParse('/s?keyword=hoho', 'https//ehkoo.com')
// false

const valid = URL.canParse('/s?keyword=haha', 'https://ehkoo.com')
// true

Vì tham số url sẽ được chuyển thành kiểu chuỗi (stringified) nên bạn có thể dùng URL.canParse(url, base) như thế này.

const u = {
  toString() {
    return 'https://ehkoo.com'
  },
}

URL.canParse(u) // true
URL.canParse({ url: 'https://ehkoo.com' }) // false

Hiện tại chỉ có Firefox, Node.js 20, và Deno 1.33 là hỗ trợ URL.canParse() thôi.

Tin vắn

• Vite ra bản 4.4, thử nghiệm hỗ trợ cho Lightning CSS. Đây là thư viện để xử lý CSS tương tự như PostCSS nhưng được viết bằng Rút 🦀, do team Parcel xây dựng. Vite 4.4 cũng hỗ trợ Solid.js và Qwik khi dùng create-vite.

• Trong khi cool kids bây giờ xài Solid hay Svelte thì Ember lại lặng lẽ ra bản 5.0. Có gì hot thì thật ra mình cũng không biết, nhưng nếu bạn đã chán JSX và virtual DOM thì coi chơi cho biết cũng được, như kiểu du hành thời gian về lại quá khứ vậy đó.

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 😛

• udecode/plate: Là một framework cho framework 🤣 giúp bạn xây dựng chương trình soạn thảo văn bản bằng ianstormtaylor/slate. Plate sử dụng một hệ thống headless plugins để xây dựng tính năng. Ngoài ra còn đi kèm một giao diện dựng sẵn dựa vào shadcn/ui.

• gpbl/react-day-picker: Một thư viện để tạo date picker cho React. Thề luôn là sau ngần ấy năm làm React mình vẫn không thấy một cái date picker nào ra hồn.

• appsmithorg/appsmith: Một framework nữa để tạo ứng dụng nội bộ. Bạn chỉ cần tạo kết nối vào một nguồn dữ liệu ví dụ như database (PostgresQL, MongoDB, v.v) hay GraphQL/REST APIs, sau đó dùng giao diện kéo thả để tạo UI, gắn UI và dữ liệu lại với nhau, và bùm, thế là có ngay một web app ngon lành.

• denoland/dnt: Viết tắt của Deno to Node Transform, công cụ này giúp bạn chuyển đổi một module của Deno thành package để dùng cho Node.js.

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

• 4 More HTML Concepts You Didn’t Know: Bài viết giới thiệu về 4 khái niệm ít người biết trong HTML, bao gồm: Browsing Contexts, Unstyled Documents, Customized Built-In Elements, và Kinds of Elements.

• The case against self-closing tags in HTML: Jake Archibald chia sẻ về cú pháp của các thẻ HTML tự đóng, theo kiểu là <br> hay <br />. Cá nhân mình nhớ thì trong HTML5 không cần phải dùng /> nữa 🧐

• Breaking Up with SVG-in-JS in 2023: Jacob ‘Kurt’ Groß chia sẻ vì sao bạn không nên inline SVG vào ứng dụng JS để không bị giảm performance.

• Learn how to use hue in CSS colors with HSL: Bài viết của Brian Smith trên MDN về sử dụng giá trị “hue” trong cú pháp màu HSL.

• The massive bug at the heart of the npm ecosystem: Darcy Clarke mô tả lỗi bảo mật khá nghiêm trọng của hệ sinh thái npm: nội dung manifest của một package và nội dung thực tế của tập tin tarball chưa bao giờ được kiểm tra xem có trùng khớp với nhau không. Lỗi này ảnh hưởng đến npm@6, npm@9, yarn@1, và cả pnpm@7.

• 🎥 The Cost Of JavaScript - 2023: Video dài 35 phút của Addy Osmani nói về chi phí của JavaScript trong các ứng dụng web ngày nay. Một lần nữa nhắc chúng ta gửi ít JS về phía người dùng thôi.

Kết

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