Có gì hot? Tuần 42 - 2022

Tailwind CSS ra bản 3.2

Trong phiên bản 3.2 này:

• Hỗ trợ sử dụng nhiều tập tin thiết lập trong cùng một dự án với @config
• Kiểm tra trình duyệt có hỗ trợ một tính năng nào đó không với supports-*, ví dụ như supports-[display:grid]:grid
• Thêm vào các variants để kiểm tra thuộc tính ARIA aria-*, HTML data-*, group-*, và peer-*
• Container queries

Bạn có thể xem giải thích chi tiết từng tính năng mới ở đây nè.

Ngoài ra cũng nên đọc qua bài viết Tailwind CSS v3.2: revisiting my “feature creep” warning mà mình nghĩ cũng rất hợp lý. Đại loại là vì Tailwind được nhiều người sử dụng nên cần phải được cập nhật thường xuyên nhằm đem đến cảm giác “project này còn sống”, dẫn đến là đem đến càng nhiều tính năng làm cho Tailwind trở nên nặng nề và phức tạp.

Không biết trong số các độc giả của Ehkoo thì bao nhiêu bạn KHÔNG xài Tailwind ha? Mình nghĩ là chắc không nhiều đâu 😔 Khỏi bàn cãi nhiều, Tailwind CSS giờ đã là lựa chọn số một khi bạn cần thiết kế nhanh giao diện cho web. Nghe giang hồ đồn đang có một thế hệ web developers không biết viết CSS nhưng biết xài Tailwind. Đó là mình nghe vậy thôi 🤷‍♂️

Replit phát hành ứng dụng di động

Replit vừa ra app cho iOS và Android, hứa hẹn đem đến trải nghiệm tốt hơn khi viết code trên thiết bị di động. Bạn có thể dùng Replit để viết ứng dụng Python, JavaScript, hay tạo website, hay bất cứ gì có thể chạy trên NixOS.

Tính năng xịn:

• Dùng joystick để di chuyển con trỏ nhanh trong tập tin: Replit tự thiết kế một điều khiển cho phép bạn di chuyển giữa các dòng code nhanh nhất. Bạn cũng có thể dùng 1 chạm để chọn ngay token gần nhất, chạm lần nữa để chọn cả dòng, và chạm cuối cùng để chọn nguyên block code.
• Gợi ý code thông minh: Replit tự xây dựng hệ thống gợi ý ngay bên trong ứng dụng, sử dụng parser Lezer của CodeMirror để có thể gợi ý ngay cả khi người dùng đang nhập liệu. Hiện tại app Replit có thể gợi ý code Python, HTML, CSS, JS, và Typescript.
• Nhờ Ghostwriter viết code giùm: Ghostwriter của Replit cũng tương tự như Copilot, là một chương trình AI sẽ viết code chung với bạn. Hiện tại Ghostwriter vẫn đang trong giai đoạn beta.

Tin này không hẳn là liên quan đến lập trình frontend nhưng mình nghĩ cũng đáng quan tâm, vì ai cũng biết gõ code trên điện thoại khó chịu như thế nào. Ngoài cách tiếp cận về UI/ UX đáng học hỏi, nếu làm tốt thì app Replit sẽ giúp nhiều người học lập trình dễ dàng và thuận tiện hơn.

Tin vắn

• Netlify hỗ trợ pnpm: Sau một thời gian dài chờ đợi thì cuối cùng chúng ta cũng có thể dùng pnpm cho các dự án trên Netlify. Bạn chỉ cần thêm tập tin pnpm-lock.yaml là Netlify sẽ tự động phát hiện và cài đặt packages. Cho những bạn chưa biết thì pnpm là một công cụ quản lý packages giống như npm hay yarn, nhưng nhanh hơn và ít tốn dung lượng đĩa cứng hơn. [Nguồn]

• Prisma hỗ trợ Deno Deploy: Hơi bất ngờ vì cứ nghĩ trước giờ Prisma chạy được trên Deno từ đời nảo đời nào rồi.

• react-form-hook ra bản 7.38.0, cho phép kiểm tra dữ liệu đối với input dạng week và time. [Nguồn]

• lerna ra v6: Sau khi được Nrwl tiếp quản, Lerna đã sống lại và ra phiên bản 6.0 nè mọi người ơi. Bạn có thể xem chi tiết về những tính năng mới của phiên bản này ở đây. Nrwl cũng đồng thời là tác giả của Nx luô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 😛

• Lucide Icons: Một bản fork của bộ Feather Icons nổi tiếng, với hơn 500+ icons.

• Daisy UI: Thư viện mã nguồn mở cho các components tương thích với Tailwind CSS.

• marcj/TypeRunner: Là một trình biên dịch cho TypeScript được viết bằng C++ và có thể kiểm tra kiểu dữ liệu nhanh hơn gấp 1000x lần. Cái này chỉ là proof of concept thôi và không (hoặc chưa thể) thay thế cho TypeScript compiler.

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

• Why We’re Breaking Up with CSS-in-JS: Sam Magura, developer của Spot và một trong những maintainer của thư viện CSS-in-JS Emotion nổi tiếng, chia sẻ những mặt tốt và chưa tốt của CSS-in-JS, và tại sao nhóm phát triển ở Spot quyết định không dùng CSS-in-JS nữa.

• Futuristic CSS: Sacha Greif điểm qua những tính năng CSS có thể sẽ xuất hiện trong tương lai. Một trong số đó là CSS Toggles đang được thử nghiệm ở Chrome phiên bản Canary.

• Dark mode UI design best practices: Ondřej Pešička chia sẻ 7 điểm cần lưu ý khi thiết kế dark theme cho ứng dụng.

Kết

Tuần 42 trôi qua êm ả mà không có drama gì hết. Nhân tiện nếu bạn có đồng nghiệp bạn bè anh chị em nào cũng làm lập trình frontend thì đừng quên rủ rê lôi kéo nhắn nhủ họ đăng ký nhận Bản tin Ehkoo nha 🥹 Cảm ơn lắm lắm.

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

Đính chính

Trong phiên bản đầu tiên của bản tin này, Ehkoo đã dùng “team Nrwl của Nx” khi nhắc đến Lerna ra phiên bản 6. Cách diễn đạt này có thể gây hiểu lầm vì Nrwl là tên công ty, còn Nx là sản phẩm của Nrwl. Cám ơn anh Chau Tran đã góp ý để bản tin hoàn thiện hơn 🙇🏻‍♂️.