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

StackBlitz giới thiệu Codeflow beta

Tuần trước tụi mình có chia sẻ CodeSandbox giới thiệu Repositories thì tuần này StackBlitz giới thiệu phiên bản thử nghiệm của Codeflow. Đây là một tích hợp vào Github, cho phép bạn:

• Tạo và review Pull Request đơn giản và dễ dàng
• Làm việc trên Github issues
• Tham gia đóng góp vào các dự án nguồn mở

StackBlitz Codeflow đem VSCode lên trình duyệt, nhưng khởi động nhanh hơn 10 lần 😲, một phần là nhờ vào WebContainers. Đây là một ứng dụng Wasm, cho phép bạn chạy Node.js ngay trên trình duyệt nhưng nhanh, bảo mật và ổn định hơn so với môi trường local. Nhờ đó mà bạn cũng có thể sử dụng các extensions được viết bằng JS/ TS/ Node.js của VSCode luôn. Codeflow còn sử dụng pnpm, đem đến tốc độ cài đặt packages nhanh hơn nhiều so với npm hay yarn.

Để thuận tiện hơn cho việc dùng Codeflow, bạn có thể thêm pr.new vào trước bất cứ URL nào của Github, ví dụ như pr.new/github.com/ehkoo/web 😃 Codeflow sẽ tự động mở và bạn có thể bắt đầu làm việc ngay. Rất hữu ích khi bạn tham gia đóng góp vào một dự án mã nguồn mở nào đó.

Vì vẫn đang trong giai đoạn thử nghiệm nên có thể bạn sẽ gặp lỗi này nọ, nhưng tụi mình nghĩ Codeflow nói riêng và Web IDE nói chung có rất nhiều tiềm năng và sẽ trở thành xu hướng mới để phát triển ứng dụng trong tương lai. Cùng chờ xem ha.

Tin vắn

• Vercel giới thiệu @vercel/og, giúp tạo ảnh cho OpenGraph: Vercel vừa giới thiệu thư viện @vercel/og, giúp tạo ảnh bìa cho OpenGraph bằng HTML/CSS, sau đó chuyển qua SVG bằng thư viện Satori. So với combo Chromium + Puppeteer thì Satori nhanh hơn, nhẹ hơn, phù hợp để chạy trong môi trường Serverless Function. Bạn có thể xem thử demo của Vercel OG tại đây.

• Rollup ra bản 3.0: Bạn cần Node phiên bản tối thiểu 14.18.0 để sử dụng ha.

• Axios ra bản 1.0: Sau 8 năm dài đằng đẵng, cuối cùng thì v1 cũng ra, mà giờ ai cũng xài fetch() hết rồi 🥲

• Bạn đã có thể dùng OffscreenCanvas trong Firefox 105 để chuyển các tác vụ vẽ trên <canvas> vào Web Worker. Thật tiếc là Safari vẫn chưa hỗ trợ.

• Chrome Canary thêm vào tính năng hiển thị những khai báo CSS không có tác dụng, và lý do tại sao. Firefox đã có cái này từ rất lâu rồi nha. Nguồn

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

Một vài thư viện/ công cụ thú vị mà tụi mình vừa thấy.

• hattipjs/hattip: tập hợp những packages nhỏ để xây dựng ứng dụng HTTP, có thể chạy trên nhiều môi trường như Node.js, Deno, Edge Functions, v.v.

• tremorlabs/tremor: thư viện React để xây dựng dashboard chỉ trong một nốt nhạc.

• leeoniya/uFuzzy: thư viện hỗ trợ tìm kiếm mờ (fuzzy search). Bạn có thể nghĩ nó thay thế cho String.indexOf() vậy. Có thể ứng dụng để lọc danh sách, làm autocomplete/ autosuggest, v.v.

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

• When going somewhere does a thing: on links and buttons: Bài của Kilian Valkhof bàn về khi nào sử dụng <button> và khi nào sử dụng <a>. Điều thú vị mình học được sau bài viết này là cách sử dụng :target.

• Practical uses of the :has() relational pseudo class: Một vài ứng dụng thực tế của :has() trong CSS.

• 🎞 Keynote: Why web tech is like this - Steve Sanderson: Tác giả của Knockout.js (ủa bạn nghe đến framework này bao giờ chưa?) sẽ dẫn bạn đi một vòng lịch sử của nghề thiết kế/ lập trình web, đồng thời chia sẻ tương lai của nghề có thể sẽ đi đâu về đâu. Xem thư giãn cuối tuần ha.

Kết

Tuần 41 kết thúc với không có nhiều tin tức lắm ha. Nhưng no news is good news (mặc dù có hơi gượng ép 😅). Hẹn gặp lại các bạn ở tuần sau 👋