Demo này giới thiệu @chenglou/pretext, một library hỗ trợ measure và layout text mà không kích hoạt DOM reflows tốn kém. Khám phá các UI patterns thực tế được chia thành nhiều categories, mỗi pattern có DevTools panel hiển thị layout metrics real-time.
Mỗi ví dụ đều có source code và một lệnh shadcn install, giúp bạn copy pattern thẳng vào project của mình.
Click vào bất kỳ đâu trên label và input snap vào đúng kích thước đó, caret đặt ngay tại vị trí click, được đo bởi pretext trước khi input mount.
Click the label to edit
Click me to edit this labelpretext measures text width before input renders — no hidden span needed
DevTools
Tương tác với demo để xem metrics
npx shadcn@latest add https://upskills.dev/r/pretext-inline-text-editing.jsonMỗi cell input mở rộng để vừa với content khi bạn nhập. Pretext đo text trước khi input render, nên không có initial jump.
Click a cell to edit — input resizes to fit content exactly
| Product | Qty | Price |
| Widget Pro | 12 | $24.99 |
| Gadget Lite | 3 | $9.50 |
pretext measures each cell before the input mounts — no resize jank
DevTools
Tương tác với demo để xem metrics
npx shadcn@latest add https://upskills.dev/r/pretext-editable-table-cells.jsonHeadline lấp đầy toàn bộ chiều rộng card ở font size lớn nhất vừa khít một dòng. Pretext binary-search font sizes off-DOM, không có reflow.
pretext binary-searches font sizes to find the exact fit — no DOM layout required
DevTools
Tương tác với demo để xem metrics
npx shadcn@latest add https://upskills.dev/r/pretext-auto-fit-headline.jsonVề tác giả
NAB, Lead Engineer
Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.
Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.
Cộng đồng Upskills
Upskills
upskills.dev
Tham gia cộng đồng Discord để được hỗ trợ về các bài hướng dẫn và đặt câu hỏi.
GitHub
@upskillsdev
Xem GitHub để tìm source code và gửi issues hoặc feature requests.
Vu Nguyen
@nphivu414
Theo dõi tôi trên X để nhận cập nhật và tin tức mới nhất về Upskills.