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

Nền tảng web tuần/ tháng qua có gì hot?

View Transition API

Chrome vừa phát hành phiên bản 111 vài ngày trước mang đến View Transition API, giúp bạn thay đổi DOM và đính kèm hiệu ứng chuyển động (animations) cho thay đổi đó bằng CSS.

Cơ chế hoạt động đại loại là:

• Trình duyệt cung cấp một API mới document.startViewTransition(callback)

• Khi document.startViewTransition() được gọi, trình duyệt sẽ lưu lại trạng thái hiện tại của trang, đồng thời chụp lại màn hình (screenshot), sau đó kích hoạt callback. Lúc này cây DOM sẽ có thêm các element giả (pseudo-elements) như sau:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

• ::view-transition đóng vai trò làm nền (backdrop) cho trang, ::view-transition-old(root) là hình chụp của trang ở trạng thái trước, và ::view-transition-new(root) là biểu diễn thực tế của trạng thái sau.

• Theo mặc định, Chrome sẽ áp dụng hiệu ứng fade-in-out bằng cách thay đổi opacity của view-transition-old và view-transition-new. Bạn có thể dùng CSS để thay đổi hiệu ứng chuyển động này theo ý thích.

Bạn có thể tham khảo hướng dẫn chi tiết hơn ở đây, cũng như xem các demo khác tại https://glitch.com/edit/#!/simple-set-demos. Lưu ý là cần Chrome 111+ nhé.

Mặc dù View Transition API đang được thiết kế cho các ứng dụng một trang (Single Page Apps - SPAs) nhưng nó sẽ được mở rộng để hỗ trợ các ứng dụng nhiều trang. Lúc đó việc chuyển trang bằng nút Back/ Next, hay click vào link sẽ kích hoạt View Transition API, tương tự như document.startViewTransition() vậy. Bạn có thể thử qua tính năng này bằng cách bật cờ chrome://flags/#view-transition-on-navigation.

Ngoài lề: Tính năng này làm nhớ hồi xưa xài <meta http-equiv="page-enter" /> trên IE quá 🥲

Tùy chỉnh chữ to đầu dòng (drop caps) với thuộc tính initial-letter

Chrome 110, Edge 110, và Safari 9 đã hỗ trợ thuộc tính initial-letter, cho phép bạn làm hiệu ứng chữ to đầu dòng dễ dàng hơn. Cách sử dụng đơn giản nhất là:

/* Chữ cái đầu tiên ở thẻ P sẽ chiếm 3 dòng rưỡi */
p:first-letter {
  initial-letter: 3.5;
}

Bên cạnh đó initial-letter còn có những cách dùng nâng cao hơn mà bạn có thể tham khảo ở đây. Rất tiếc là Firefox vẫn chưa hỗ trợ thuộc tính này.

Mở rộng :nth-child() và :nth-last-child() với cú pháp of S

Trong CSS, chúng ta có thể dùng :nth-child() để chọn những element con theo thứ tự từ trên xuống của chúng (bắt đầu từ 1), thông qua cú pháp An + B. Ví dụ như :nth-child(2n) để chọn những phần tử có thứ tự chẵn, :nth-child(2n + 1) để chọn những phần tử có thứ tự lẻ, hay :nth-child(5n + 1) để chọn phần tử thứ 1, thứ 6, thứ 11, v.v. :nth-last-child() cũng hoạt động tương tự nhưng thứ tự của phần tử được tính từ dưới lên.

Với Chrome 111, An + B được mở rộng thành An + B of S?, cho phép bạn chọn tính thứ tự những phần tử nào thỏa mãn vùng chọn S mà thôi. Ví dụ như :nth-child(2 of .highlight) nghĩa là trong những phần tử có class .highlight, chọn phần tử thứ hai. Trong khi đó, .highlight:nth-child(2) lại là chọn phần tử con vừa có class .highlight vừa đứng thứ hai 😵‍💫

.highlight:nth-child(2) {
  border: 1px solid blue;
}

:nth-child(2 of .highlight) {
  border: 1px solid red;
}

Cho dễ hình dung hơn thì bạn có thể click vào đây 👉 https://jsfiddle.net/dkmv0y2n/ hoặc ở trang Chrome Developers với nhiều ví dụ hơn. Một lần nữa, Firefox vẫn chưa hỗ trợ tính năng này 😢

Hàm lượng giác trong CSS

Chrome 111 cuối cùng cũng đã hỗ trợ các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan(), và atan2() khi dùng chung với calc() trong CSS. Các hàm này có thể nhận giá trị góc theo độ hoặc radian, chẳng hạn như 45deg hay 1.0471967rad, hoặc dùng các hằng số như pi hay e, ví dụ như sin(pi / 4).

div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}

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 😛

• orogene/orogene: Orogene là một công cụ quản lý package cho Node.js được viết bằng Rust. Mặc dù đang trong giai đoạn đầu phát triển, nhưng Orogene đã rất nhanh, hơn cả bun hay pnpm.

• ssleptsov/ninja-keys: Một thư viện giúp bạn gắn các phím tắt vào website. Hỗ trợ vanilla JS, Vue, React, Svelte.

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

• Were React Hooks a Mistake?: Jake Lazaroff điểm lại những cách để tạo component trong React, từ thuở xài class đến PureComponent và bây giờ là function. Sau đó đưa ra câu hỏi: Liệu mọi người quan tâm đến signal gần đây có phải vì nó đem đến cảm giác thân thuộc như class components?

• Redefining Developer Experience: Cole Peters của Begin.com đặt câu hỏi thế nào là trải nghiệm tốt cho lập trình viên? Liệu DX xịn có mang đến UX xịn luôn không?

• Some simple ways to make content look good: Lại một bài viết rất xịn của Andy Bell, hướng dẫn bạn thiết kế giao diện cho nội dung chữ để dễ đọc và thuận mắt hơn.

Kết

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