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

Viết bởi @kcjpop

Đăng ngày

Dài 961 từ. Đọc trong 5 phút.

"Bản tin Ehkoo tuần 41 năm 2023"

Tuần này học gì: Kiểm tra chính tả của một trang web

Mẹo này được Stephanie Eckles chia sẻ trên Mastodon. Đại loại là bạn có thể chạy document.designMode = 'on' trong console để bật chế độ design của một trang web lên. Vì chế độ này chuyển tất cả nodes trong trang thành contenteditable, nó cũng đồng thời kiểm tra chính tả và ngữ pháp luôn.

Tiếng Anh thì dễ rồi chắc để kiểm tra tiếng Việt trình duyệt sẽ dựa vào thuộc tính lang của thẻ <html> hoặc thẻ tương ứng. Mình chưa kiểm chứng nha.

Tin vắn

  • Stackblitz thông báo hỗ trợ WASI cho WebContainers. WebAssembly System Interface là cầu nối đứng giữa, cho phép code WebAssembly có thể tương tác với các tài nguyên của hệ thống như hệ thống tập tin, network, v.v. mà không cần phải đi qua JavaScript. Hỗ trợ WASI mở ra cơ hội cho các ngôn ngữ có thể biên dịch ra WASM như Rust, C/C++, Python, Golang, hay cả PHP chạy trực tiếp trên trình duyệt web. Bạn chỉ cần kéo thả tập tin *.wasm vào dự án Stackblitz là đã có thể chạy rồi.

  • Một diễn biến khác thì Codesandbox giới thiệu tính năng mới hỗ trợ Dev Containers. Đây là một đặc tả được phát triển bởi Microsoft, giúp việc thiết lập môi trường phát triển (dev environment) trong một dự án dễ dàng và đồng nhất hơn. Bạn có thể dùng Dev Containers trong VSCode hay Github Codespace, và giờ đây là Codesandbox. Codesandbox sẽ tự động nhận dạng ngôn ngữ lập trình và các dịch vụ cần thiết trong dự án và thiết lập cho bạn. Ngoài ra bạn cũng có thể chọn chế độ Nâng cao để tha hồ tùy chỉnh theo ý muốn. Hỗ trợ tất cả ngôn ngữ lập trình nhe.

  • Netlify mang đến Netlify Functions 2.0. Thay đổi đầu tiên là các hàm serverless sẽ sử dụng đối tượng Request và Response theo tiêu chuẩn. Bên cạnh đó một đối tượng Context chứa thông tin về request như geolocation, địa chỉ IP, metadata, v.v. cũng được đính kèm. Thay đổi tiếp theo là cho phép định nghĩa đường dẫn đến hàm serverless, ví dụ như /api/my-endpoint, thay vì mặc định vào /.netlify/functions/<function name>. Những thay đổi khác bao gồm: hỗ trợ routing với URLPattern, tùy chỉnh phương thức HTTP cho hàm serverless, hỗ trợ response streaming. Netlify đảm bảo các hàm cũ vẫn tương thích và hoạt động bình thường trên nền tảng 2.0 mới.

  • Lit, framework xây dựng Web Components rất phổ biến, vừa phát hành phiên bản 3.0. Một thay đổi đáng chú ý là tích hợp Preact Signals. Bên cạnh lý do signal 1/ đang hot rần rần 2/ cải thiện hiệu suất và trải nghiệm lập trình viên thì Preact Signal tỏa sáng khi rất gọn nhẹ và không phụ thuộc vào framework/ thư viện nào.

  • Framework Trái Chanh của Deno ra bản 1.5, giới thiệu khái niệm Partials giúp đánh dấu một phần của website sẽ thay đổi khi người dùng chuyển trang, và Fresh sẽ chỉ cập nhật phần đó. Partials giúp chuyển trang mượt mà hơn mà vẫn giữ trạng thái (state) của các islands.

  • Parcel ra bản 2.10.0 với những cải tiến đáng kể về hiệu năng. Tác giả Devon Govett cũng có một thread trên X mô tả về những thay đổi kỹ thuật trong phiên bản này.

  • The Verge cho hay, Microsoft đã tạm biệt React và sử dụng Lit, Web Components, và Vite để xây dựng Microsoft Store cho Windows 10 và 11.

Mới thấy trên quầy

Một vài thư viện/ công cụ/ dự án hữu ích mà bọn mình mới phát hiện 😛

  • github/hotkey là thư viện nhỏ gọn 4kB minified giúp bạn gắn phím tắt vào một element trong trang thông qua thuộc tính HTML. Ví dụ như <button data-hotkey="Shift+?">Show help dialog</button>.

  • boxshadows.xyz là công cụ tạo box-shadow cho CSS trực quan, sinh động, dễ xài lại có ngay kết quả. Lời tự thú là trước giờ mình toàn xài các khai báo box-shadow có sẵn của Material UI thôi 🥲

  • .classnames là tập hợp những từ bạn có thể dùng để đặt tên biến, class, hàm, hay bất cứ thứ gì. Chẳng hạn như CSS class chứa danh sách các phần tử có thể gọi là wrapper, container, hay group. Nói chung đặt tên khó lắm.

  • ekmas/neobrutalism-components: Tập hợp các components cho React được thiết kế theo chủ nghĩa tân thô mộc (neo-brutalism), là phong cách giống như Gumroad hay Figma. Thư viện này sử dụng Tailwind.

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

  • CSS Blend Modes: Bài viết rất đẹp của Brad Woods giới thiệu về các chế độ trộn màu (blend modes) của CSS. Ngoài mô tả các giá trị của hai thuộc tính background-blend-mode và mix-blend-mode, bài viết còn đưa ra những ví dụ rất thực tế. Đáng để đọc nha 👍

  • Maybe you don’t need Rust and WASM to speed up your JS (2018): Bài viết của Slava Egorov, kỹ sư trình biên dịch của Dart, về tối ưu hóa trong V8. Có thể hơi nặng về kỹ thuật nếu bạn giống mình chỉ viết JavaScript bình thường, nhưng trong bài cũng có một số lời khuyên dành cho chúng ta.

  • Strong static typing, a hill I’m willing to die on…: Lại tiếp tục chủ đề khai báo kiểu dữ liệu hay không, bài viết này của Tom Hacohen nêu ra 3 lý do để sử dụng ngôn ngữ kiểm tra kiểu dữ liệu trong dự án: ít bugs, trải nghiệm lập trình viên tốt hơn, khai báo types = tài liệu phát triển. Câu chuyện này giống như vim vs emacs, hay tab vs spaces, mãi mãi không có hồi kết.

Kết

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

Bản tin Ehkoo hàng tuần 💌

Đăng ký ngay để nhận những tin và bài viết mới nhất về lập trình frontend, cũng như các thủ thuật hay thư viện mới…

Powered by Buttondown

Gửi tặng cà phê ☕️

Nếu thấy bài viết này hữu ích, bạn có thể gửi tặng Ehkoo một ly cà phê theo link bên dưới 👇

Cám ơn bạn rất nhiều 🤗