Có gì hot? Tuần 49 & 50 - 2022

State of CSS 2022

State of CSS vừa phát hành kết quả khảo sát của năm 2022, được tổng hợp từ 14,310 lượt trả lời. Dựa vào bản khảo sát này, chúng ta có thể theo dõi xu hướng phát triển của CSS, và quan sát sự đón nhận của cộng đồng đối với sự phát triển đó 😃

Đầu tiên hãy điểm qua những tính năng CSS mới. Hầu hết chúng ta đều biết đến gap và aspect-ratio, với hơn 87% và 64% người trả lời. CSS Logical Properties, ví dụ như block-size, margin-block, hay inset-inline, chỉ có 50.2% người khảo sát biết. Hơn 1/4 người khảo sát biết về viewport unit (vh, vmax, vmin, …), media queries range (@media (24rem < width < 42rem)), và writing modes. Những tính năng khác như object-view-box, @container hay subgrid còn khá mới mẻ.

Nói về màu sắc, currentColor được rất nhiều người biết đến và sử dụng, nhưng những tính năng mới hơn như gradient color spaces, color(), color-mix(), hay relative và wide gamut color thì chưa. Một phần cũng vì hầu hết các trình duyệt chưa hỗ trợ chúng, trừ Safari (bất ngờ chưa). Ngoài ra các tính năng liên quan đến scroll như scroll-behavior, overscroll-behavior, scroll snap, touch-action, hay scrollbar-gutter đã được dùng khá nhiều (mình không biết hai cái cuối 🥲).

Những tính năng đang dần phổ biến hơn bao gồm: prefers-color-scheme, prefers-reduced-motion, will-change, @supports, :has(), :where(), v.v.

CSS frameworks: Tailwind vẫn đang giữ ngôi đầu bảng, theo sau là PureCSS (quái, cái này lâu lắm rồi mà), và Ant Design. Các framework như UIKit, Primer của Github hay Halfmoon đang thu hút sự chú ý trong cộng đồng. Tụt hạng dần dần là Bulma, Tachyons, Material UI và Semantic UI. Hai cây đa cây đề trong làng là Bootstrap và Foundation vẫn an tâm nằm trong top cuối 🤣

Về các công cụ viết CSS, chúng ta có Sass vẫn được rất nhiều người dùng, theo sau là PostCSS, Less và Stylus. LightningCSS của Parcel là “tay mới” nhưng cũng đang được nhiều người quan tâm, chắc một phần là nhờ tốc độ siêu nhanh 🦀

Tạm tóm lại, 2022 giới thiệu rất nhiều tính năng mới cho CSS, tới mức đôi khi chúng ta cảm thấy dội. Nhưng dù sao đó cũng là tín hiệu tốt khi lập trình viên có nhiều lựa chọn từ trình duyệt hơn, giảm phụ thuộc vào JavaScript. Trong năm sau, mình dự đoán subgrid, :has(), và container queries sẽ được sử dụng trong thực tế nhiều hơn nữa (để tranh thủ viết bài).

SvelteKit ra bản 1.0

Nhóm phát triển SvelteKit vừa công bố phiên bản 1.0, đánh dấu những tính năng chính đã ổn định và có thể dùng cho production.

Nếu đây là lần đầu tiên bạn nghe đến SvelteKit thì đây là một meta-framwork được xây dựng bằng Svelte, cũng như Next.js trong hệ sinh thái React vậy. Svelte không sử dụng virtual DOM mà dựa vào compiler để phát hiện và tự động cập nhật DOM khi trạng thái ứng dụng thay đổi, cuối cùng biên dịch các components thành vanilla JS. Hướng tiếp cận này giúp giảm tải cho trình duyệt, đồng thời hạn chế lượng JavaScript gửi xuống người dùng.

SvelteKit có những tính năng nổi bật như:

• Định nghĩa routes theo thư mục
• Hỗ trợ Layout và Layout data
• Hỗ trợ API routes
• Hỗ trợ data fetching với hàm load() đặc biệt
• Server-side rendering (SSR)
• Có thể dùng như một Static Site Generator (SSG)
• Hỗ trợ TypeScript
• Hot Module Replacement (HMR)
• Có thể được deploy trực tiếp lên Vercel, với rất nhiều templates, hoặc có thể dùng các adapter để triển khai lên Netlify, Cloudflare Pages hay Azure Static Web Apps.

Bạn có thể tìm hiểu thêm về SvelteKit ở đây hay bắt đầu khóa học miễn phí của Vercel.

Ngoài ra Auth.js (tiền thân là NextAuth.js) cũng ra bản thử nghiệm cho SvelteKit. Auth.js ban đầu là giải pháp cho các ứng dụng Next.js, giúp bạn xác thực người dùng bằng Google, Facebook, Auth0, Apple, v.v, hay dùng đường dẫn magic/ passwordless chỉ trong “vài nốt nhạc”. Auth.js có thể chạy trên hầu hết các môi trường như Vercel Edge Functions, AWS Serverless, v.v. Sau khi tách phần lõi ra thành thư viện @auth/core, Auth.js trở nên độc lập và có thể tích hợp dễ dàng với các framework khác, với SvelteKit là framework đầu tiên.

Tin vắn

• jQuery phát hành 3.6.2: Bất ngờ chưa, jQuery chưa chết nhe. Cứ nghĩ không ai xài jQuery nữa, cho tới khi bạn nhận ra còn rất nhiều website làm bằng Wordpress. Bản 3.6.2 chủ yếu sửa lỗi khi dùng :has() trên Chrome.

• npm thử nghiệm xem mã nguồn của package ngay trên web: Nếu bạn xem một package trên npm, ví dụ như ky, ngay cạnh tab Readme sẽ có thêm một tab Code để xem mã nguồn.

• Storybook ra mắt Framework API, giúp tích hợp với các thư viện/ framework khác dễ dàng hơn.

• SWR 2.0 cuối cùng cũng có mutation API, giới thiệu DevTools mới, và hỗ trợ concurrent rendering.

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 😛

• Halfmoon: là một responsive CSS framework được thiết kế để xây dựng dashboard, hay các ứng dụng nội bộ. Hỗ trợ dark mode, với hơn 1500 biến CSS, hao hao Bootstrap, và chạy tốt trên tất cả các trình duyệt kể cả IE 11.

• Assembler CSS: Nói sao ta, Assembler CSS giống như CSS-in-HTML vậy đó 🫣 Bạn gắn vào một compiler ~8kB gzipped, sau đó khai báo các mixin thông qua CSS variables, và dùng thuộc tính x-style cho các elements, và bùm, Assembler CSS sẽ tự động sinh ra CSS. Thấy hơi ảo nhưng cũng là một hướng tiếp cận mới lạ.

• Console Ninja là một extension cho VSCode, giúp bạn in giá trị của console.log ngay dòng code luôn. Xem video này để dễ hiểu hơn ha. Hiện tại vẫn đang miễn phí.

• transition.style của Adam Argyle giới thiệu 46 hiệu ứng chuyển động sử dụng CSS transition. Bạn có thể copy và sử dụng ngay. Rất là xịn luôn.

• Protocol là một template của Tailwind UI giúp bạn xây dựng website tài liệu kỹ thuật cho API bằng Next.js. Hỗ trợ MDX, dark mode, v.v. Giá bán lẻ 89€ chưa bao gồm thuế ha.

• vincentdchan/blocky-editor là một thư viện headless giúp bạn xây dựng các trình soạn thảo dạng khối (block editor) giống như Notion. Viết bằng vanilla JS và có sẵn wrapper cho Preact.

• beholdr/maska là một thư viện để tạo các ô nhập liệu theo một mẫu định sẵn, kiểu như nhập số điện thoại, thẻ tín dụng, hay địa chỉ IP á. Maska viết bằng vanilla JS, không dùng thư viện ngoài, và tích hợp sẵn với Vue.

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

• Browsers, JSON, and FormData: Jim Nielsen cho rằng để giải quyết tình trạng “nhà nhà làm SPA, người người làm SPA” và “cái gì cũng xài JavaScript” thì 1/ các API servers nên hỗ trợ thêm FormData bên cạnh JSON, hoặc 2/ các trình duyệt phải cho phép trực tiếp gửi JSON. Có một ý khá hợp lý là: “Every request a browser makes with a JSON payload requires functioning JavaScript”

• 7 Website Performance Metrics to Track for Better UX: Khi mới tìm hiểu về core web vitals và performance metrics, chúng ta dễ bị choáng ngợp bởi quá nhiều thuật ngữ và từ viết tắt. Bài viết này sẽ hướng dẫn bạn tập trung vào 7 giá trị quan trọng nhất.

• Form design: multiple inputs versus one input (2020): Adam Silver thảo luận về việc sử dụng một hay nhiều ô nhập liệu khi xây dựng form, với ví dụ cụ thể là nhập thẻ tín dụng hay ngày tháng.

• 📔 Stop Stealing Sheep & Find Out How Type Works: Một trong số những quyển sách nhập môn khi bắt đầu tìm hiểu về font chữ. Bạn có thể download quyển sách này miễn phí từ Google Fonts.

Kết

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