15 thư viện JavaScript và CSS hấp dẫn trong tháng 9 năm 2017

Cập nhật: Lượt xem: 736 [ Javascript ]

15 thư viện JavaScript và CSS hấp dẫn trong tháng 9 năm 2017

15 thư viện JavaScript và CSS hấp dẫn trong tháng 9 năm 2017

DisplayJS

displayjs

Framework nhỏ này giúp việc đồng bộ dữ liệu với DOM dễ dàng hơn. Thay vì phải tự thiết lập và cập nhật nội dung của trang, với DisplayJS, bạn có thể ánh xạ các biến JavaScript với các phần tử HTML cụ thể, tương tự như cách React hoặc Vue.js xử lý template.

React Beautiful DnD

react-dnd

Thư viện React của Atlassian giúp cho việc kéo, thả các component. Nó cung cấp một API mạnh mẽ và dễ sử dụng trong khi vẫn cung cấp nhiều tùy chọn tùy chỉnh và điều khiển. Các thao tác khi tạo, kéo, thả component diễn ra rất mượt với bộ GPU mạnh mẽ.

r2

r2

Đây là phiên bản được cập nhật thư viện request của Node.js khá nổi tiếng. Nó mang lại giải pháp cho một giao thức HTTP nhẹ hơn được xây dựng trên Fetch API của trình duyệt và được kèm theo cho Node.js. R2 có kích thước chỉ 16K khi nén, so với yêu cầu khoảng 500K thì nhẹ hơn rất nhiều.

Primer CSS

primer

CSS framework được sử dụng cho thiết kế front-end  của GitHub. Nó có 23 gói được chia thành 3 gói meta để cài đặt dễ dàng hơn. Mỗi gói được cập nhật và phân phối độc lập qua NPM, giúp dễ dàng quản lý hơn.

Puppeteer

puppeteer

Puppeteer là một API Node.js high-level để làm việc với tính năng chạy ngầm của Chrome. Đây là dự án chính thức của Google do nhóm Chrome DevTools thực hiện.

Marko

marko

Đây là framework JavaScript mới giống như Vue.js. Nó cho phép bạn tách ứng dụng của bạn thành các thành phần độc lập và mô tả cách mà application view thay đổi theo thời gian và phản hồi lại với hành động của người dùng. Marko tự động cập nhật DOM để phản ánh dữ liệu trong ứng dụng của bạn.

redocx

redocx

Thư viện React này để tạo các tài liệu word. Nó cho phép bạn xác định tài liệu văn bản bằng cách sử dụng các React component và sau đó đưa chúng vào Word qua dòng lệnh. Có các component cho các bảng, hình ảnh, header, footer và mọi thứ bạn cần.

fuzzysort

fuzzysort

Thư viện JavaScript này dùng để xây dựng các giao diện tìm kiếm giống như những gì bạn có thể tìm thấy trong các text editor như Sublime Text. Nó cho phép người dùng tìm thấy những gì họ tìm kiếm, ngay cả khi họ đánh sai. Thư viện sẽ hiện mỗi mục tìm kiếm tùy thuộc vào mức độ phù hợp với từ truy vấn tìm kiếm.

Trowel

trowel

Một bản SASS mở rộng cung cấp một cách mới để viết các biến scss. Nó cho phép bạn nhóm nhiều biến thành một đối tượng, làm cho scss của bạn dễ đọc và viết hơn.

Vivify

vivify

Vivify là thư viện animation dành riêng cho CSS. Bạn chỉ cần thêm lớp vivify vào phần tử bạn muốn sinh động. Bạn cũng có thể thêm các lớp infinite để làm cho các hình động lặp lại theo vòng lặp. Thư viện cung cấp cho bạn hơn 50 animation với các hiệu ứng cc và di chuyển.

Tons of Checkboxes

checkbox

Một bộ sưu tập các checkbox component chỉ dành cho CSS. Có nhiều kiểu khác nhau bao gồm Toggles, Switches, Circles và Squares. Tất cả các checkbox có bốn kích cỡ từ nhỏ đến rất lớn. Tương thích với tất cả các trình duyệt hiện đại bao gồm IE9 +.

Push

push

Push là thư viện tốt nhất để quản lý thông báo trên màn hình JavaScript. Nó dựa trên Notification API mạnh mẽ nhưng cũng hoạt động như một giải pháp kiểm tra chéo trình duyệt (Cross Browser) đáng tin cậy và sẽ trở lại các triển khai cũ hơn nếu trình duyệt của người dùng không hỗ trợ cho API mới.

react-imgpro

react-impro

Một React component dùng để xử lý hình ảnh. Nó cho phép bạn sửa đổi một hình ảnh bằng cách sử dụng các bộ lọc và sau đó xuất sang định dạng base64. Nó rất dễ sử dụng, bạn chỉ cần chỉ định một url cho hình ảnh của bạn, các bộ lọc bạn muốn áp dụng và kích thước và định dạng đầu ra.

Lozad.js

lozad

Lozard là một thư viện JavaScript thuần túy cho các hình ảnh, iframes và các thành phần HTML khác. Nó dựa trên IntersectionObserver API mới, cho phép nó giám sát vị trí của các phần tử mà không phụ thuộc vào bất kỳ yếu tố bên ngoài nào. Nó rất nhẹ, với chỉ 535 byte khi đã nén.

Semiotic

smiotic

Framework Data Visualization (diễn hoạ dữ liệu) là sự kết hợp của React và D3. Nó cung cấp ba loại frame (XYFrame, ORFrame, NetworkFrame) cho phép bạn tạo ra một số biểu đồ không theo truyền thống. Cách dữ liệu được hiển thị có thể được tùy chỉnh thêm bằng cách điều chỉnh các thiết lập của frame hoặc thêm style CSS của riêng bạn.