Tài nguyên mới cho các nhà thiết kế và phát triển web (tháng 2 năm 2017)

Loạt Fresh Resouces dành cho nhà phát triển web có chạy khoảng 4 năm nay, và việc duy trì loạt bài này đã giúp tôi hiểu rõ hơn về tiến trình web trong những năm qua. Có công cụ mới được phát hành mỗi tháng để làm cho việc phát triển web dễ dàng hơn.

Trong phần này, chúng tôi đã thu thập một số công cụ mới, bao gồm các thư viện JavaScript, một vài thư viện CSS và tài liệu tham khảo để cải thiện kỹ năng của bạn. Hãy kiểm tra chúng.

Bấm để biết thêm tài nguyên

Tìm toàn bộ bộ sưu tập tài nguyên được đề xuất của chúng tôi và các công cụ thiết kế và phát triển web tốt nhất hiện có.

Chú thích

JavaScript là tiếp quản ứng dụng máy tính để bàn cho tính di động trên nền tảng khác nhau cũng như hoạt động tốt như ứng dụng gốc. Ứng dụng này, Chú thích, ví dụ là được xây dựng trên đỉnh của Electron. Đây là một ứng dụng đơn giản cho phép bạn tìm kiếm các tập tin Phụ đề (.srt) để đính kèm vào video bạn đang xem.

Dòng lệnh OSX tuyệt vời

An danh sách khổng lồ các dòng lệnh hữu ích và tiện dụng cho macOS. Ở đây bạn có thể tìm thấy rất nhiều điều có thể được thực hiện thông qua CLI, chẳng hạn như “xóa hàng đợi in”, “ẩn thư mục trong Finder”, và “ngăn chặn giấc ngủ hệ thống”.

Trevor

Trevor chỉ đơn giản là Travis CI được thực hiện ngoại tuyến. Travis là một dịch vụ tích hợp liên tục nơi các nhà phát triển kiểm tra phần mềm của họ để xem phần mềm có hoạt động đúng nhiều môi trường không. Trevor vẫn đang trong giai đoạn đầu; hiện tại nó chỉ hỗ trợ “Nút”.

Dần dần

Một JavaScript đẹp thư viện để tải hình ảnh dần dần, do đó tên. Hình ảnh nhỏ sẽ được phục vụ và làm mờ trong khi trình duyệt đang tải hình ảnh đầy đủ. Điều này giúp trang web của bạn tải nhanh hơn nhiều đặc biệt là nếu nó chứa hình ảnh lớn.

QartJS

Đây là một JavaScript làm cho mã QR bớt nhàm chán. Với điều này, bạn có thể phủ mã QR lên một hình ảnh - chẳng hạn như ảnh của bạn.

Docker WP

Docker WP là một Môi trường Docker được thiết kế đặc biệt để phát triển WordPress. Môi trường khép kín và sẽ không ảnh hưởng đến hệ thống máy tính của bạn trong trường hợp bạn thực hiện cấu hình. Nó là một thay thế tuyệt vời cho Vagrant, Valet, Local và MAMP.

Rellax

Rellax là một thư viện JavaScript để tạo hiệu ứng Parallax trên cuộn trang. Nó đi kèm với một vài tùy chọn và tương đối dễ dàng để cấu hình. Nó rất nhẹ, chạy rất nhanh, và không yêu cầu phụ thuộc như jQuery do đó, nó là một thay thế tuyệt vời cho các thư viện khác trong danh mục này, chẳng hạn như Parallax.js hoặc Scrollax.js.

Khớp nối

Một thư viện JavaScript thú vị khác. Phát âm mang lại tổng hợp giọng nói đến trang web của bạn. Nó là có thể phân tích và đọc trang web của bạn, cuối cùng có thể cải thiện khả năng truy cập trang web của bạn cho người dùng có khả năng hiển thị bị suy giảm.

Kiếm tiềnJS

MonetizeJS là một thư viện JavaScript để thực hiện Stripe dễ dàng; dễ dàng như sử dụng jQuery.

Thuốc bổ

Thuốc bổ là một bộ sưu tập UI cho di động được xây dựng bằng Vue.js và Ionic CSS. Nó bao gồm rất nhiều thành phần UI thường thấy trong điện thoại di động, bao gồm cả Hộp kiểm, Biểu mẫu tìm kiếm, Swiper và cái gọi là Accordion. Bạn có thể sử dụng để xây dựng ứng dụng di động nguyên mẫu ngay trong trình duyệt.

Thư viện thành phần WordPress

10up, một trong những cái tên nổi bật trong WordPress, đã phát hành một thư viện UI được thiết kế đặc biệt dành cho WordPress. Không giống như thư viện UI khác chỉ cung cấp mã CSS và HTML, 10Up cũng cung cấp đoạn mã PHP mà bạn chỉ có thể dán vào chủ đề của mình. Thành phần bao gồm Điều hướng, Tab, Chú giải công cụ, Commonts và Blogrol.

Hiệu suất khởi động JavaScript

Một tuyệt vời và bài viết chi tiết từ Addy Osmani, một trong những kỹ sư của Google, về cách viết JavaScript chạy cực nhanh. Tôi khuyến khích bạn đọc nó qua nâng cao kỹ năng JavaScript của bạn.

KuteJS

Kute là một Thư viện JavaScript để thực hiện hoạt hình. Nó rất nhanh và siêu hiệu quả trong việc tiêu thụ bộ nhớ. Nó có phần mở rộng và các công cụ bổ sung để cho phép áp dụng hình ảnh động trong CSS, SVG và thậm chí là một plugin jQuery cho cú pháp thuận tiện hơn.

Đá PWA

Ứng dụng Web lũy tiến (PWA) là một phương pháp mà cho phép một trang web chạy nhanh và có thể sử dụng ngoại tuyến. PWA Rocks này liệt kê một danh sách đã được Google phê duyệt là PWA. Đến tìm hiểu thêm về PWA từ Google hãy xem: Ứng dụng web lũy tiến.

Trình cập nhật tự động Github

Trình cập nhật tự động Github là Thư viện soạn thảo cho phép plugin của bạn được cập nhật từ Github. Đây là một tập lệnh tiện dụng cho các nhà phát triển để duy trì các plugin cho khách hàng của họ mà không cần nhất thiết phải tải nó lên kho Github.

Thẻ

Thẻ là một thư viện JavaScript điều đó làm cho đầu vào Thẻ tín dụng hấp dẫn hơn và cải thiện trải nghiệm người dùng của bạn trong khi nhập số thẻ tín dụng của họ. Nó hoạt động tốt với jQuery, React, Angular và Ember.

Sỏi

Sỏi cung cấp lớp phủ trên trang của bạn để xem lưới - cột, hàng, máng xối - được bố trí như thế nào. Bạn cũng có thể tạo đặc tả lưới của riêng bạn sử dụng API được cung cấp.

Luxbar

Luxbar là một Khung CSS để tạo điều hướng đáp ứng dễ dàng; chỉ cần thêm biểu định kiểu và thêm HTML đúng cách. Bạn có thể cài đặt thư viện này thông qua NPM, Bower hoặc liên kết biểu định kiểu trực tiếp từ CDN.

Lưới tương phản

Một danh sách về bảng hiển thị độ tương phản màu và cấp độ chính xác của chúng dựa trên WCAG 2.0. Bạn có thể thay đổi giá trị trên bảng và nhanh chóng tìm hiểu xem sự kết hợp màu có tuân theo tiêu chuẩn WCAG không.

Giai điệu

ToneJS là một thư viện JavaScript để tạo ra một giai điệu hoặc âm thanh có thể giống như đến từ một nhạc cụ. Tôi đoán thư viện này sẽ có ích để xây dựng một trình giả lập nhạc cụ dựa trên web hoặc hiệu ứng âm thanh trò chơi.