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

Mấy tuần liền không có gì hot, tuần này thì quá trời tin tức luôn 🥲

Safari Technology Preview 162 hỗ trợ nesting CSS

Hồi cuối năm ngoái, nhóm phát triển Webkit có đặt khảo sát về cú pháp cho nesting CSS (dịch: CSS lồng 😂) thì giờ đây tính năng này đã có mặt trong Safari Technology Preview 162. Căn bản thì nó cũng tương tự như SASS, LESS, hay Stylus vậy.

/* Thay vì… */
.card {
  background-color: #eee;
}

.card .card-title {
  font-weight: 600;
}

/* Giờ có thể gom gọn lại thành… */
.card {
  background-color: #eee;

  .card-title {
    font-weight: 600;
  }
}

Rất là quen thuộc đúng không? Nhưng vì giới hạn của parser bên trong trình duyệt, chúng ta không thể dùng nesting với các selectors cho thẻ HTML (element selectors), tức là:

.card {
  div {
    /* Hông chạy */
  }
}

/* Mà bạn phải dùng `&` */
.card {
  & div {
    /* Ngon 👍 */
  }
}

& mang ý nghĩa “đem selector ở phía trên xuống đây”. Bạn cũng có thể viết như sau:

/* Thay vì… */
a {
  text-decoration: none;
}

a:hover {
  color: red;
}

.component a {
  text-decoration: underline;
}

/* Đổi thành */
a {
  text-decoration: none;

  &:hover {
    color: red;
  }

  .component & {
    text-decoration: underline;
  }
}

& cũng có thể dùng nhiều lần trong cùng một selector, và nó dẫn đến trường hợp như vầy:

ul {
  padding-left: 1em;

  & article & {
    padding-left: 0;
  }
}

/* Trở thành 😳 */
ul {
  padding-left: 1em;
}

ul article ul {
  padding-left: 0;
}

Giải pháp là sử dụng :is().

ul {
  padding-left: 1em;

  :is(article) & {
    padding-left: 0;
  }
}

Hiện tại thì Chrome cũng đã hỗ trợ nesting CSS. Chromium (Edge) thì dự định sẽ phát hành trong tương lai. Riêng Firefox vẫn chưa có động tĩnh gì.

Chạy Node.js trên trình duyệt? Tại sao không?

Không hẹn mà gặp, trong tuần này Stackblitz và CodeSandbox đều công bố giải pháp riêng để chạy Node.js trên trình duyệt.

Đâu đó hồi đầu tuần, Stackblitz phát hành WebContainer API cho tất cả mọi người sử dụng. WebContainer là một hệ điều hành viết bằng WebAssembly, được thiết kế để có thể chạy server Node.js ngay trên trình duyệt. WebContainer bao gồm một ổ cứng ảo cho phép bạn thao tác với tập tin và thư mục (dĩ nhiên cũng ảo luôn), một/ nhiều HTTP servers dựng bằng ServiceWorker API, và Node.js command line.

Bạn có thể dùng WebContainer để xây dựng những bài hướng dẫn có tính tương tác cao, như trường hợp của Svelte, hoặc làm web IDEs như Codeflow, hay máu lửa hơn thì làm ứng dụng AI.

Trong một diễn biến khác, CodeSandbox lại khoe Sandpack 2.0. Bản thân Sandpack là một hệ sinh thái, hiện có vẻ hướng đến xây dựng trang tài liệu/ hướng dẫn tương tác nhiều hơn. Khi sử dụng gói @codesandbox/sandpack-react cho React, bạn có ngay một trình soạn thảo, với nhiều lựa chọn về theme và template để bạn bắt đầu dự án mới với các web (meta-)framework thông dụng như Angular, Vue, Solid, hay Next.js. Ví dụ cụ thể về Sandpack chính là trang tài liệu của React.

Đi kèm với Sandpack là Nodebox, một runtime để chạy ứng dụng Node.js trên trình duyệt. So với WebContainer thì Nodebox tương thích với nhiều trình duyệt hơn vì không sử dụng SharedArrayBuffer (Safari chưa hỗ trợ API này). Bù lại thì Nodebox dùng nhiều bộ nhớ hơn, và vẫn thiếu vài API như async_hooks, vm, worker_threads. Một lưu ý là Nodebox không mở mã nguồn nhe.

Tin vắn

• Đầu tiên là thông báo cho người dùng Apple. Nếu bạn đang xài iOS/iPadOS phiên bản dưới 16.3.1 thì hãy update liền nhe, vì có một lỗi trong WebKit có thể bị khai thác để chạy code từ xa.

• Tiếp theo là Safari mới phát hành 16.4 beta 1. Nổi bật nhất có lẽ là Web Push API. Nếu người dùng thêm website của bạn vào trang nhà (Home Screen), bạn có thể gửi tin thông báo (notifications) bằng cách dùng Push API, Notifications API, và Service Workers. Bạn cũng có thể dùng Badging API để hiển thị bộ đếm, giống như số email chưa đọc chẳng hạn. Ngoài ra còn nhiều tính năng mới nữa mà bạn có thể xem chi tiết ở đây.

• Container queries đã được các trình duyệt hỗ trợ đầy đủ 🎉 Từ nay bạn sẽ có thêm công cụ để thiết kế layout tùy biến rồi nhe. Nguồn.

• Remix ra bản v1.13.0, hỗ trợ PostCSS và Tailwind.

• Lighthouse ra bản 10.0. Nổi bật là thông số Time To Interactive (TTI) sẽ không còn tính nữa. Trong các phiên bản trước, TTI chiếm 10% tổng số điểm hiệu suất. Từ v10, 10% này sẽ chuyển qua cho Cumulative Layout Shift (CLS), chiếm 25%. Lighthouse 10 sẽ được đính kèm vào Chrome 112 và PageSpeed Insights trong vài tuần tới.

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 😛

• ascorbic/unpic-img: Tương tự như next/image như độc lập với framework, giúp bạn chèn hình vào web và tự động tạo srcset, sizes, vân vân và mây mây. Hiện hỗ trợ React, Vue, Solid, và Svelte. Bạn có thể đọc thêm về hướng dẫn sử dụng của tác giả.

• microfeed/microfeed: Một CMS nhỏ gọn chạy trên Cloudflare Pages, R2, D1, và Zero Trust. Phù hợp cho podcasts, blogs, photos, hay bookmark cá nhân.

• ellie/atuin: Thay thế lịch sử trong terminal (chính xác hơn là shell) của bạn bằng một cơ sở dữ liệu SQLite, đi kèm với thống kê, đồng bộ dữ liệu, và những tính năng hay ho khác. Viết bằng Rust, hỗ trợ zsh, bash, và fish.

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

• The Key To Good Component Design Is Selfishness: Daniel Yuschick chia sẻ những kinh nghiệm khi thiết kế component, thông qua hai ví dụ rất cụ thể là Button và Modal.

• Writing Javascript without a build system: Julia Evans, hay còn biết đến như là @b0rk và rất nổi tiếng với các zines về công nghệ, vừa chia sẻ trải nghiệm khi viết JavaScript mà không dùng đến công cụ build nào như webpack hay vite. Kết luận là với website nho nhỏ thì không cần thật.

• The User Activation API: Blog của WebKit có một bài về những web APIs cần phải được người dùng cho phép/ kích hoạt trước khi sử dụng.

Kết

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