Tài nguyên mới dành cho nhà thiết kế và phát triển web (tháng 6 năm 2015)
Bạn có thể tin rằng loạt phim này đã chạy được gần 3 năm? Trong thời gian ngắn đó, chúng tôi đã giới thiệu ít nhất 30 danh sách các tài nguyên mới nhất cho các nhà thiết kế và phát triển web. Và chúng tôi sẽ tiếp tục điều này với một bản tổng hợp mới cho tháng 6.
Trong phần tổng hợp này, chúng tôi sẽ xem xét một vài thư viện JavaScript để hiển thị thanh trượt, cuộn mượt mà hơn cho các bảng dữ liệu, hiệu ứng thang máy thú vị cho nút cuộn lên trên và hơn thế nữa.
Hãy kiểm tra chúng.
Xác nhận kiểu trung bình
Medium đã được khen ngợi về thiết kế của nó; bố cục và giao diện người dùng dường như đã được suy nghĩ thấu đáo. Trên hết, nó cũng truyền cảm hứng cho các nhà phát triển web phát triển thư viện JavaScript hoặc CSS để sao chép giao diện người dùng. Medium Style Confirm là một thư viện JavaScript giống với hộp thoại bật lên hoặc hộp thoại trong Medium.
chim cánh cụt
Penguin là một khung công tác mặt trước mới mà bạn có thể sử dụng làm nền tảng cho các trang web của mình. Với các công cụ như Grunt và Sass, bạn có thể dễ dàng thêm hoặc xóa các thư viện hoặc CSS mà bạn không cần ra khỏi khung làm cho nó nhẹ nhất có thể. Đây cũng là một lựa chọn tốt cho Bootstrap và Foundation.
Elevator.js
Bạn đã thấy nút đó trong một trang web cho phép bạn trượt lên trên cùng của trang chưa? Hầu hết các nút chỉ đưa bạn lên đỉnh, nhưng với Elevator.js, bạn sẽ có được hiệu ứng tăng tốc trượt tương tự như thang máy, âm nhạc và “Đinh!” âm thanh một khi bạn đã đạt đến tầng trên cùng. Thực sự tốt!
X-Instagram
X-Instagram là một yếu tố tùy chỉnh Polyme kéo và hiển thị hình ảnh từ Instagram bằng thẻ. Yếu tố này làm cho toàn bộ quá trình dễ dàng hơn nhiều. Chúng tôi chỉ cần thêm phần tử giống như phần tử HTML thông thường và chỉ định từ khóa thẻ làm thuộc tính phần tử.
Và hãy để phép thuật bắt đầu!
CamanJS
CamanJS là một thư viện JavaScript tuyệt vời để thao tác hình ảnh. Nó đi kèm với một bộ tính năng mà bạn thường thấy trong trình chỉnh sửa hình ảnh. Bạn có thể biến hình ảnh mờ, đen trắng và thậm chí tăng độ tương phản.
ClusterizeJS
Clusterize.js là thư viện JavaScript sẽ tăng hiệu suất khi xử lý nhiều dữ liệu trong bảng. Khi bạn cuộn xuống một bảng với, giả sử, 5000 trong danh sách, thông thường trải nghiệm sẽ biến thành lag giật và giật. Các thư viện JavaScript này sẽ giải quyết vấn đề này, giúp cho hành động cuộn được thuận buồm xuôi gió.
Ngồi làm bài kiểm tra
Ngồi làm bài kiểm tra là tập hợp các câu hỏi để đánh giá kỹ năng và kiến thức của bạn về CSS3, HTML5 và JavaScript. Mỗi bài kiểm tra được đưa ra một số câu hỏi và thời gian giới hạn để hoàn thành tất cả các câu hỏi này. Đó là một nguồn tốt để tìm hiểu xem chúng tôi thực sự tốt như thế nào với các ngôn ngữ này.
Mũi tên HTML
Đây là một tập hợp các ký hiệu Unicode gốc đặc biệt mà bạn có thể nhúng vào HTML và CSS. Những ký tự này bao gồm Mũi tên, Tiền tệ và Dấu câu. Đôi khi bạn sẽ thấy rằng bạn không cần biểu tượng phông chữ để hiển thị các ký tự đó.
Nhấp nháy
Flickity là một thư viện JavaScript để hiển thị băng chuyền, phòng trưng bày hoặc thanh trượt trên trang web của bạn. Nó được tối ưu hóa cho màn hình cảm ứng; bạn có thể trượt băng chuyền dễ dàng bằng ngón tay hoặc bàn di chuột nếu bạn đang ở trên máy tính xách tay. Nó cũng đi kèm với một loạt các Tùy chọn cho phép tùy chỉnh đầy đủ theo bất kỳ cách nào bạn muốn.
Đánh máy
Formslab là một công cụ tiện dụng để tạo một poster kiểu Slab. Chỉ cần viết nội dung và chọn phông chữ, Formslab sẽ tạo ra poster ngay lập tức. Sau đó, bạn có thể tải xuống hoặc xuất bản nó trong Imgur.
MatchMedia
Matchmedia là một thư viện sao chép các truy vấn phương tiện CSS. Thư viện thực sự không mới, nhưng nó là một thư viện thực sự hữu ích mà tôi quyết định đưa vào danh sách. Nếu bạn cần thực hiện kịch bản dựa trên kích thước khung nhìn người dùng hoặc loại phương tiện thì đây là thư viện bạn muốn.
Sau đây là một ví dụ được sử dụng để chạy tập lệnh ở kích thước khung nhìn 320px và bên dưới:
if (matchMedia ('chỉ màn hình và (max-width: 320px)'). trận đấu) 
Sass Burger
Sass Burger đi kèm với Mixin cho phép bạn tạo một “bánh hamburger” biểu tượng và biến nó thành một dấu chéo với ít rắc rối hơn.
Marx
Marx là một tập hợp các quy tắc kiểu CSS để làm cho các kiểu phần tử nhất quán hơn. Nó có thể tùy chỉnh (với Sass), nhẹ và hoạt động tốt. Một thay thế tốt cho các công cụ thiết lập lại CSS phổ biến như Normalize.css.
CSS.js
CSS.js được sử dụng để phân tích các tệp CSS để khai báo kiểu. Thư viện ban đầu được sử dụng cho nhóm tại Jotform để xây dựng trải nghiệm WYSIWYG để chỉnh sửa biểu mẫu bằng CSS. Bây giờ họ đã mở nguồn cho tất cả chúng ta sử dụng. Đáng để tiết kiệm, chỉ trong trường hợp bạn cần nó sau.
