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

Với CLI (Giao diện dòng lệnh), chúng tôi có thể hợp lý hóa và tự động hóa quy trình phát triển web. Và đó là lý do tại sao trong phần này, chúng tôi đã bao gồm khá nhiều CLI tuyệt vời mà bạn có thể cài đặt trên máy tính cục bộ của mình hoặc để chạy một số nội dung trên máy chủ. Trên hết, chúng tôi cũng bao gồm một vài Các công cụ PHP, tiện ích trình duyệt và thư viện JavaScript. 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ó.

Guetzli

Một bộ mã hóa mới từ Google cho phép nén hình ảnh xuống tới 35% từ kích thước ban đầu trong khi vẫn giữ được chất lượng. Đây là một bước đột phá khi các bộ mã hóa mã nguồn mở tương tự, chẳng hạn như JPEGOptim và jpegtran, được giới hạn chỉ 20% trên avarage. Tôi có thể thấy rằng sẽ có một số ứng dụng và plugin cho nền tảng CMS tích hợp Guetzli để tối ưu hóa các tệp JPEG.

Lộ trình phát triển

Đúng như tên gọi, Lộ trình của nhà phát triển là một Infographic về hành trình trở thành một nhà phát triển web. Có ba khóa học Front-end, Back-end và DevOps. Những lộ trình này giống như, một bản đồ; và là một tài liệu tham khảo tuyệt vời để xem chúng ta đang ở đâu, những gì chúng ta có thể đã bỏ lỡ và chúng ta sẽ đi đâu tiếp theo.

Netlify CMS

SmashingMagazine gần đây đã thực hiện một di chuyển táo bạo để bỏ WordPress và thử một cái gì đó hoàn toàn mới với một CMS mới gọi là Netlify CMS. Nó là một CMS mới được xây dựng dựa trên React.js và có thể được tích hợp với bất kỳ trình tạo trang tĩnh nào như Jekyll, Hugo và MiddleMan.

BadSSL

nó là một trang web để kiểm tra cấu hình SSL của bạn. BadSSL là một công cụ tiện dụng để thực hiện gỡ lỗi và lỗi trên SSL được cài đặt trên trang web của bạn.

Alix

Alix là một Tiện ích mở rộng của Chrome cho phép bạn kiểm tra khả năng truy cập trang web của bạn. Sau khi cài đặt và kích hoạt, plugin sẽ thêm một hộp lớp phủ trên một số thành phần trên trang đưa ra cảnh báo hoặc lỗi.

AR.js

AR.js là Các thư viện JavaScript không giống như các thư viện khác. Thư viện này cho phép chúng tôi tạo ra thực tế Augmented bằng công nghệ Web và đáng ngạc nhiên chạy rất nhanh trên điện thoại di động.

Xu hướng phản ứng

nó là một thành phần phản ứng từ Bapt để tạo biểu đồ Line đáng yêu thường để hiển thị xu hướng. Các thành phần có thể cấu hình; bạn có thể đặt độ dày của đường, màu sắc, độ dốc và độ mịn của đường cong. Bạn chỉ có thể sử dụng GUI để thuận tiện tạo mã thành phần.

Gitee

Một ứng dụng macOS để giám sát hoạt động Github của bạn ngay từ máy tính để bàn của bạn, Gitee thêm một mục mới trên thanh trạng thái hiển thị số lượng sao, người theo dõi và thông báo. Ngoài ra, bạn cũng có thể xem biểu đồ đẩy và cam kết của bạn trên một kho lưu trữ cũng như kho lưu trữ theo xu hướng vào tháng và tuần hiện tại. Đó là Github trên Desktop một cách ngắn gọn.

Dê

Dê là một CLI tiện dụng sẽ phân tích thư mục dự án của bạn và xác định các thư mục và tập tin để thêm vào .gitignore. CLI có thể được cài đặt thông qua NPM. Sau khi cài đặt, gõ bướu và thực hiện.

Gỡ lỗi CSS

DebugCSS là một Tiện ích thả xuống CSS cho phép bạn phân tích và xác thực đầu ra CSS của bạn trên trình duyệt. Nó hoạt động khá giống với Alix, khi bạn tải biểu định kiểu debugCSS hoặc sử dụng bookmarklet, nó làm nổi bật các yếu tố trên trang gây ra lỗi hoặc cảnh báo.

EagleJS

EagleJS là một Thư viện JavaScript để tạo bản trình bày tương tự RevealJS. EagleJS khác nhau theo một số cách; nó được xây dựng bằng Vue.js, khung công tác JavaScript MVC và sử dụng Pug như hệ thống khuôn mẫu để xây dựng slide.

BootstrapTour

Một Thư viện JavaScript để xây dựng các hướng dẫn bật lên bằng cách sử dụng thành phần Bootstrap. Các hướng dẫn bật lên thường xuất hiện để người dùng mới hướng dẫn họ qua giao diện ứng dụng, các tính năng mới và để hiển thị các mẹo. Đây là một thư viện hoàn hảo nếu trang web của bạn được xây dựng với Bootstrap..

Gạch

Gạch là một thư viện JavaScript được thiết kế để xây dựng giao diện người dùng ứng dụng web. Bạn sẽ tìm thấy một số thành phần phổ biến như Lịch, Menu và Biểu mẫu trong số các thành phần được đóng gói, Nó cũng đi kèm với một "lưu trữ-indexeddb" thành phần cho phép bạn lưu trữ dữ liệu về phía máy khách bằng IndexedDB.

OctoTree

OctoTree là một tiện ích tuyệt vời cho phép duyệt mã nguồn và tệp trên Github với cấu trúc Tree như trong IDE hoặc trình chỉnh sửa mã. Nó đi kèm như một tiện ích bổ sung cho Chrome, Safari, Firefox và Opera và có sẵn trên kho bổ trợ chính thức của họ. Octotree hỗ trợ kho lưu trữ Github của tư nhân và doanh nghiệp.

Thông báo Github

Một tiện ích mở rộng Github hữu ích khác cho Chrome. Sau khi cài đặt, bạn sẽ có thể nhận thông báo ngay cả khi bạn hiện không ở trên trang Github. Một plugin tuyệt vời nếu bạn muốn ở trong vòng lặp với kho lưu trữ của bạn.

Người triển khai

Deployer là một công cụ để triển khai các trang web PHP của bạn. Nó hoạt động với một số khung và nền tảng phổ biến bao gồm WordPress, Drupal, Magento, Laravel và CodeIgniter. Với công cụ này, bạn có thể soạn công thức nấu ăn của riêng bạn, một phần lệnh để chạy trong khi triển khai. Nó đi kèm với Phục hồi Tính năng cho phép bạn quay lại phiên bản trước trong trường hợp bị lỗi.

PHPStan

Một CLI để quét các tệp PHP để tìm lỗi mà không thực hiện thời gian chạy. Điều này có nghĩa là bạn không cần môi trường PHP đầy đủ để gỡ lỗi các tệp PHP trong dự án của bạn.

Nồi hơi NGINX

Một tập hợp các cấu hình Nginx phổ biến bao gồm Bộ nhớ đệm cuối, giới hạn tốc độ kết nối và yêu cầu và một số thực tiễn tốt nhất khác để tăng tốc trang web của bạn và điều chỉnh tốc độ cho lưu lượng truy cập.

Bong bóng

Bubbly là một dòng lệnh tuyệt vời mà bạn có thể cài đặt trên máy chủ của mình để tạo, quản lý và gia hạn chứng chỉ với Let Encrypt. Dopending SSL giờ trở nên dễ dàng hơn rất nhiều.

Lưới bánh quế

Tuy nhiên, một khung lưới CSS khác được xây dựng với Flexbox mà tôi nghĩ bạn nên xem xét.