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

Trong bài viết này, chúng tôi giới thiệu một khung danh sách và các công cụ hướng đến phát triển web. Thật thú vị, tôi đã tìm thấy một vài trong số các công cụ và khung này đến từ các tập đoàn khổng lồ như Microsoft và Alibaba.

Đây là một dấu hiệu tốt, vì ngày càng nhiều công ty đang đóng góp cho nguồn mở và giúp định hình một Web tốt hơn. Chúng ta hãy xem những gì trong cửa hàng cho việc tổng hợp tháng này.

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

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ó.

CuteStrap

Một khung UI được xây dựng trên Sass. Nó đi kèm với tất cả các giao diện web phổ biến nhất như biểu mẫu, điều hướng và nút, cần có đủ trong nhiều trường hợp. Nếu bạn tìm thấy các khung phổ biến như Bootstrap và Foundation áp đảo, Dễ thương nhất có thể là một sự thay thế tuyệt vời cho bạn.

Kiểm tra HTML5

Kiểm tra HTML5 là một công cụ trực tuyến sẽ kiểm tra xem trình duyệt hỗ trợ các thông số kỹ thuật HTML5 mới nhất bao xa. Đây là một công cụ hữu ích cho những người tham gia gỡ lỗi và thử nghiệm các ứng dụng web hiện đại.

Calo trình duyệt

Calo trình duyệt là tiện ích mở rộng của Chrome đo trọng lượng trang web. Nó quét các tệp được tải và đóng góp của chúng vào tổng trọng lượng của trang. Một công cụ nhỏ bé tuyệt vời để giúp bạn tối ưu hóa hiệu suất trang web của bạn.

Cuối tuần

Cuối tuần là một khuôn khổ từ Alibaba để xây dựng các ứng dụng di động chỉ với HTML, CSS và JavaScript. Nó đi kèm với các Mô-đun, các thành phần UI, DevTools và CLI của riêng nó được thiết kế hướng tới môi trường di động và để tăng tốc độ phát triển.

Khung web của Microsoft (MWF)

Một khung từ Microsoft, các thành phần UI trong MWF được xây dựng dựa trên ngôn ngữ thiết kế hiện đại của Microsoft: phẳng, sạch sẽ và tối giản. Khung này, ngoài các thành phần UI, còn đưa ra hướng sử dụng Màu sắc, Kiểu chữ và Hoạt hình. Tôi nghĩ rằng Design Design Lite cuối cùng đã gặp một ứng cử viên bình đẳng.

Quan trọng

Quan trọng là một khung với một giao diện tối thiểu rất dễ chịu. Nó rất nhẹ, không có JavaScript và thực sự là Rogue - một cú pháp dựa trên Ruby.

Phông chữ

Phông chữ là một tiện ích mở rộng Photoshop miễn phí để dễ dàng quản lý và áp dụng hàng trăm Phông chữ của Google. Bạn có thể tìm kiếm phông chữ từ bên trong Photoshop, xem trước và áp dụng phông chữ thẳng vào thiết kế của bạn - hợp lý hóa quy trình làm việc của bạn.

Mưa phùn

Đây là một công cụ cho phép bạn xây dựng các mẫu UI hoặc hướng dẫn kiểu cho trang web của bạn. Nó sẽ tạo ra những thứ như màu sắc, kiểu dáng cơ bản hoặc bố cục cho các thành phần cũng như đoạn mã. Một trình tạo hướng dẫn kiểu như Mưa phùn sẽ cho phép bạn phù hợp với phong cách trang web của bạn.

InterCooler

InterCoolerJS là một thư viện JavaScript giúp việc áp dụng AJAX trên trang web của bạn dễ dàng như thêm các thuộc tính HTML. Nó đi kèm với một hướng dẫn mở rộng và nhiều ví dụ để giúp bạn bắt đầu sử dụng công cụ.

Picla

Picla là một plugin jQuery để hiển thị nhãn hình ảnh được lấy từ hình ảnh alt thuộc tính. Nó cung cấp một vài tùy chọn để cho phép bạn thêm kiểu dáng và chuyển động tùy chỉnh vào nhãn. Picla có thể được cài đặt làm phụ thuộc trang web của bạn với Bower.

IziModal

Đây là một plugin jQuery để hiển thị phương thức cửa sổ bật lên. IziModal có rất nhiều lựa chọn để cá nhân hóa. Bạn có thể, ví dụ, tùy chỉnh hình ảnh động, nội dung văn bản, màu sắc. Nó nhẹ, phản ứng nhanh và sẵn sàng cho võng mạc.

MegaBoilerplate

MegaBoilerplate là một trình tạo để thiết lập một ngăn xếp phát triển nhanh chóng. Truy cập trang web và chọn công cụ và thư viện nào (Node.js, HTML5, Vanilla JavaScript và Electron) mà bạn sẽ sử dụng làm cơ sở trang web của mình. Nó sẽ biên dịch và cấu hình tất cả những thứ bạn cần trong gói nén, sẵn sàng để tải xuống.

Tiếng hú

Thư viện JavaScript để hiển thị trình phát âm thanh hiện đại bằng API Web âm thanh, Tiếng hú hoạt động trong các trình duyệt cũ như IE9 và hỗ trợ nhiều codec âm thanh như MP3, WEBM, WAV. Rất nhiều tính năng, mô-đun và hoạt động không có thư viện bên ngoài.

Siêu nhân

Siêu nhân là một thư viện JavaScript nhỏ giúp các đối tượng nhúng đáp ứng, trong khi vẫn duy trì tỷ lệ ban đầu. Nó hỗ trợ một loạt các nguồn bao gồm Youtube, Flickr, Vine, VideoPress và DailyMotion. Xem bản demo.

CleaveJS

Tách là thư viện JavaScript tự động định dạng các giá trị trong đầu vào. Ví dụ, nó có thể thêm dấu phân cách trong đầu vào tiền tệ, thêm khoảng trắng trong đầu vào số Thẻ tín dụng hoặc thêm / trong đầu vào ngày. Sử dụng thư viện này để phục vụ trải nghiệm người dùng tốt hơn.

Lật điển hình

FlippingTypical cho phép bạn xem tất cả các phông chữ được cài đặt trên hệ thống của bạn. Tôi thấy ứng dụng này thuận tiện hơn so với sử dụng Sách chữ ứng dụng trong macOS. Tôi nhập văn bản ngẫu nhiên và xem phông chữ nào trên hệ thống của tôi trông đẹp nhất.

Bảng anh sang

Một IDE mới mà tôi nghĩ là đáng để khám phá. Nó bắt đầu như một dự án KickStarter, được hỗ trợ bởi Matt Mullenweg (người sáng lập WordPress) và cuối cùng là nguồn mở. Bạn có thể xem video này để biết IDE tuyệt vời như thế nào.

Máy nén

Máy nén là một ứng dụng web nén các tệp hình ảnh xuống kích thước nhỏ nhất mà không làm giảm chất lượng hình ảnh. Nó cũng hỗ trợ JPG, GIF, PNG và SVG. Ứng dụng này miễn phí.

Quét trang web của Microsoft

Đây là một công cụ tiện dụng của Microsoft để phân tích trang web của bạn cho các vấn đề như khả năng tương thích và khả năng truy cập của trình duyệt. Công cụ sẽ liệt kê một báo cáo cho bạn biết nếu có bất cứ điều gì không đúng về trang web của bạn và cách bạn có thể tiến hành giải quyết vấn đề. Hãy thử một lần!

Vô hiệu hóa blog

Plugin này, như tên của nó, sẽ loại bỏ các tính năng viết blog như Bài viết, Nhận xét và Nguồn cấp dữ liệu. Đây là plugin phù hợp với bạn nếu bạn không cần tính năng viết blog trong WordPress.