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

Tuần này học gì: URLSearchParams() và chuyện en/decode URL

Tuần này sếp muốn mình làm tính năng tự động điền email từ URL vào form. Kiểu như với URL này https://example.com/reset-password/123abc?email=a.b@c.com thì ô nhập email sẽ có giá trị là a.b@c.com vậy.

Nghe thì cũng không có gì khó ha. Bạn có thể dùng document.location.search để tách email từ URL ra bằng tay, hoặc dùng URLSearchParams() chung với URL(), hoặc xài gói của bên thứ ba như qs hay query-string.

const qs = new URL(document.location).searchParams
console.log(qs.get('email')) // a.b@c.com`

Nói chung cách nào cũng được. Vấn đề ở đây là khi email có dấu +, chẳng hạn như a.b+d@c.com.

URL sẽ coi dấu + cũng như %20 là khoảng trắng, thành ra nếu bạn dùng URL() như trên thì kết quả sẽ ra vầy.

// https://example.com/reset-password/123abc?email=a.b+d@c.com
const qs = new URL(document.location).searchParams
console.log(qs.get('email')) // a.b d@c.com` ❌

TIL: Có thể thấy URLSearchParams() tự động decode URI components luôn.

Do đó bạn phải encode email trước khi gắn lên URL. Chúng ta có thể sử dụng hai hàm encodeURI() và encodeURIComponent(), mà nói thiệt là lần nào mình cũng phải coi lại MDN để biết chúng khác nhau ra sao.

encodeURI('a.b+d@c.com') // "a.b+d@c.com"
encodeURIComponent('a.b+d@c.com') // a.b%2Bd%40c.com"

Vậy ra encodeURIComponent() chính là cái bạn muốn. Theo MDN, encodeURIComponent() sẽ encode luôn cả những kí tự dùng để định nghĩa URL, bao gồm ; / ? : @ & = + $ , #.

Kết luận: URL của bạn nên là https://example.com/reset-password/123abc?email=a.b%2Bd%40c.com. Khi đó sử dụng URLSearchParams() sẽ ra kết quả như mong muốn.

Tin vắn

• Astro phát hành phiên bản 3.0, mang đến View Transitions API thông qua component <ViewTransitions> (hiện tại chỉ chạy được trên Chrome/ Edge). Bên cạnh đó, component <Image> giúp tối ưu hình ảnh đã trở nên ổn định hơn, chuyển thư viện xử lý từ @squoosh/lib sang lovell/sharp, và hỗ trợ dịch vụ tối ưu hình của Vercel. Phiên bản này cũng cải tiến tốc độ khi dùng SSR trên serverless, cũng như HMR chạy nhanh hơn khi dùng JSX với React/ Preact 🤷‍♂️

• Bản khảo sát State of CSS đã công bố kết quả cho năm 2023. Thường mình sẽ quan tâm những tính năng mới nào của CSS cần phải học thêm, đồng thời theo dõi framework nào đang lên/ xuống trong năm. Năm nay Tailwind tụt xuống hạng 3 rồi, vừa lòng toy lắm 😈

• Chrome dự định sẽ ngưng hỗ trợ sự kiện unload từ phiên bản 117. Sự kiện này thường được dùng cho các tác vụ như lưu dữ liệu của người dùng trước khi rời trang, dọn dẹp tài nguyên sử dụng trong trang, hay gửi thông tin thống kê. Nhưng vì unload rất không ổn định trên các thiết bị di động nên lập trình viên được khuyến khích nên dùng sự kiện visibilitychange hay pagehide.

• bun ra bản 0.8.0, hỗ trợ SvelteKit, Nuxt, và ti tỉ thứ khác.

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 😛

• romac/react-if: Như một trò đùa nhưng thư viện này cung cấp các components <If />, <Then />, <Else />, <When />, <Unless />, <Switch />, <Case />, v.v. để ứng dụng của bạn nhìn càng React-ish hơn nữa. Cái giá của đỉnh cao trừu tượng là 4.07kB.

• monodyle/hiki: Hàng Việt Nam nhà trồng. Hiki là một component React giúp hiển thị dialog ở màn hình bự, nhưng tự động chuyển thành drawer ở màn hình nhỏ. Ghé qua xem thử và thả 1 ⭐️ ủng hộ nhe.

• jamiebuilds/tinykeys: Thư viện siêu nhỏ chỉ có 400B giúp bạn làm phím tắt cho ứng dụng web.

• ugit là công cụ trực quan giúp bạn undo hầu hết các tác vụ khi làm việc với git, chẳng hạn như lỡ xóa file nè, hay xóa tag, reset, v.v.

• BM Lucas là font tự phát triển của Baemin.

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

• 🇻🇳 Today I fkup with JavaScript - monody: Bạn Minh “Monody” Le Hong viết bài chia sẻ hai engine Chrome V8 và Firefox SpiderMonkey cài đặt hàm Array#sort(cb) khác nhau thế nào. #til là thứ tự của tham số trong cb bị đảo ngược giữa hai engines 😱

• Bézier curves: Bài viết hết sức trực quan của Richard Ekwonye về đường cong Bézier. Nói thiệt là trước giờ mình toàn xài ease-in-out mà không hiểu rõ nó như thế nào 🥲

• Why htmx Does Not Have a Build Step: Alexander Petros chia sẻ vì sao mã nguồn của htmx là một tập tin duy nhất với hơn 3000 dòng code và không có sử dụng build tool, modules, v.v. Một trong những lý do là vì hỗ trợ IE11 nên không dùng ES6. Ngoài ra việc chỉ có một tập tin còn giúp dễ theo dõi stack trace, đọc mã nguồn dễ hơn, v.v.

• Quit Your YAP-ing: Bài viết của Kyle Shevlin chia sẻ về Yet Another Prop Syndrome, xảy ra khi bạn thêm props vào một component có sẵn thay vì dùng “composition”.

• Dark Mode: How Users Think About It and Issues to Avoid: Bài trên Nielsen Norman Group về dark mode. Tóm tắt là mặc dù khá phổ biến nhưng đa số người dùng xem dark mode như kiểu “có cũng được không có cũng không sao”.

• Best Rust Web Frameworks to Use in 2023: Mặc dù tựa bài nghe có vẻ câu khách kiểu gì đó nhưng bài viết của Stefan Baumgartner mang đến một cái nhìn khá toàn diện về các web frameworks viết bằng Rút.

Kết

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