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

Rất nhiều điều đã xảy ra trong vài tháng qua trong thế giới phát triển web. Thứ nhất, cái mới biên tập viên dựa trên khối, tên mã Gutenberg, cuối cùng đã được sáp nhập vào WordPress 5.0. Đó là một thay đổi thực sự lớn kể từ khi thành lập vì nó đặt nền tảng mới cho WordPress phát triển trong tương lai và sẽ thay đổi cách các nhà phát triển mở rộng cho các chức năng của WordPress.

Thứ hai, một vài nhà phát triển đồng nghiệp của chúng tôi đã tạo ra một số công cụ thực sự hữu ích như một công cụ cho phép xem JSON trong terminal và một vài thư viện React có thể chứng minh sự trợ giúp tuyệt vời trong các dự án thiết kế và phát triển web.

Và cuối cùng, một số hiệu quả nhất tài nguyên, tài liệu tham khảo và plugin đã được đưa ra để giúp bạn cập nhật các dự án của mình theo các xu hướng mới hơn.

Hãy cùng vào danh sách toàn diện nhất các tài nguyên phát triển web mới.

Cẩm nang Gutenberg

Cẩm nang WordPress chính thức nơi bạn có thể tra cứu tài liệu tham khảo cho thiết kế, mã ví dụ để tạo khối và những người khác và một hướng dẫn để đóng góp cho dự án. Đây là tài liệu tham khảo đầu tiên của bạn để phát triển với Gutenberg.

Khối giàn giáo

Với trình chỉnh sửa dựa trên khối, WP-CLI hiện cung cấp một cách thuận tiện để bắt đầu với tạo Khối Gutenberg bằng lệnh CLI mới, khối giàn giáo wp. Bạn có thể tạo và đưa nó vào các plugin và chủ đề hiện có của mình.

CGB

Một cách khác để dễ dàng khởi động khối Gutenberg là Tạo khối Guten (CGB) là một công cụ để tạo ra một cái nồi để phát triển một khối Gutenberg. Nó bao gồm các công cụ hiện đại như React.js, Webpack, ESLint, Babel, v.v ... Phần tốt nhất là bạn không cần cấu hình bất kỳ công cụ nào trong số này vì vậy bạn chỉ cần tập trung vào viết mã của bạn.

Khối nguyên tố cho Gutenberg

Một plugin WordPress cho phép bạn chèn bất kỳ mẫu Elementor nào và xem trước nó ngay trong trình soạn thảo. Plugin đi kèm với nhiều tính tương thích khác cung cấp kinh nghiệm chỉnh sửa liền mạch giữa Elementor và Gutenberg. Xem video này để xem nó hoạt động như thế nào.

Khối nguyên tử

Một tập hợp các khối Gutenberg với số lượng bộ sưu tập ngày càng tăng. Tại thời điểm viết bài này, nó cung cấp “Khối lưới bài” cho phép bạn thêm một danh sách các bài đăng của trang web của bạn trong một bố cục lưới. Cũng có một “Khối chứng thực” đúng như tên gọi của nó, để chèn một lời chứng thực trong trang. Kiểm tra các bản xem trước đầy đủ của các Khối trong trang này.

Khối thư viện

Một khối bắt mắt để chèn bộ sưu tập hình ảnh của bạn, Block Gallery cung cấp trải nghiệm liền mạch để thêm hình ảnh vào bài đăng của bạn. Chỉ cần thả hình ảnh của bạn, tạo kiểu cho màn hình bộ sưu tập (kiểu Masonry, Carousel hoặc Toàn màn hình), và tất cả đã được thiết lập. Hiện tại, nó chỉ đơn giản là Khối Thư viện tốt nhất cho WordPress.

CoBlocks

Một bộ các khối từ cùng một tác giả đã phát triển Thư viện khối đã đề cập ở trên, CoBlocks bao gồm một số Khối sẽ nâng cao nội dung trang web của bạn như, Accordion, Bảng giá, Gif, Nhấp để Tweet, và nhiều khối được thêm vào.

StagBlocks

Một bộ khác của Khối Gutenberg. Plugin mang đến một số Khối thú vị mà nhiều bạn sẽ đánh giá cao. Nó bao gồm Stat Block cho phép bạn tùy chỉnh số liệu thống kê trong các bài đăng và trang của bạn. Khối thẻ trang web sẽ xem trước trang web theo kiểu thẻ ưa thích. Mã khối sẽ kết xuất mã với màu được tô sáng.

Rái cá khối

Ngoài ra, một bộ sưu tập các khối Gutenberg như “Khối Google Maps” để chèn bản đồ, “Khối dịch vụ của chúng tôi” đến chèn danh sách các dịch vụ bằng nút trong chế độ xem lưới, và “Khối chứng thực” để chèn một danh sách các lời chứng thực. Otter Block là một tập hợp các Khối Gutenberg mà các doanh nghiệp và nhà phát triển chủ đề sẽ đánh giá cao.

Khối Gutenberg tiên tiến

Plugin này đi kèm với một số ít Khối nâng cao để làm phong phú nội dung của bạn chẳng hạn như mục lục được tạo tự động, “Khối Giphy” để bao gồm hình ảnh GIF từ Giphy.com, “Khối Block” để chèn hình ảnh từ Bapt.com, “Khối quảng cáo biểu ngữ”, WooC Commerce “Khối nút thêm vào giỏ hàng”, và nhiều hơn nữa.

Phòng thí nghiệm khối

Block Lab giúp các nhà phát triển dễ dàng tạo Khối Gutenberg. Plugin cho phép bạn đăng ký một Khối mới với GUI thân thiện với người dùng và các mẫu trong PHP. Bạn thậm chí không cần phải học React.js.

Khối EDD

Một plugin cho phép bạn kết xuất các sản phẩm Tải xuống kỹ thuật số dễ dàng trong trình chỉnh sửa Gutenberg. Không giống như sử dụng Shortcode, khối sẽ hiển thị chế độ xem sản phẩm.

Kiểm tra Gutenberg

Chưa sẵn sàng để cài đặt plugin Gutenberg hoặc cập nhật trang web của bạn lên WordPress 5.0? Bạn có thể đơn giản tải trang web này để dùng thử trình soạn thảo mới.

Đám mây Gutenberg

Nó giống như một AppStore cho Gutenberg Blocks. Một nơi trung tâm nơi bạn có thể nhận được Khối Gutenberg có thể được sử dụng trong WordPress và Drupal. Vâng, Drupal cũng sẽ áp dụng trình soạn thảo Gutenberg cho biên tập viên của họ.

Ví dụ về Gutenberg

Kho lưu trữ Github của các mẫu mã để tạo Khối Gutenberg. Ở đây bạn có thể tìm thấy Chặn đơn giản nhất đến một ví dụ phức tạp hơn, chẳng hạn như một để tạo ra một “Công thức nấu ăn” trong đó thiết lập một mẫu trong trình chỉnh sửa để người dùng thêm công thức Nội dung. Một tài liệu tham khảo tốt cho những người thích học hỏi từ các ví dụ thực tế, hơn là một cuốn sách văn bản.

GutenbergJS

Phiên bản chỉ có JavaScript của Gutenberg. Nó có sẵn dưới dạng gói NPM cho phép bạn tích hợp Gutenberg vào bất kỳ ứng dụng JavaScript nào của bạn.

Vô hiệu hóa Gutenberg

Mặc dù Gutenberg mang đến những khả năng mới cho WordPress, nhưng không phải ai cũng sẵn sàng cho nó. Nếu các trang web hiện tại của bạn không hoạt động tốt với Gutenberg, bạn có thể cài đặt plugin này. Nó cho phép bạn vô hiệu hóa trình soạn thảo Gutenberg cho các bài đăng cụ thể, loại bài đăng, vai trò người dùng, chủ đề, cũng như vô hiệu hóa biểu định kiểu Gutenberg ở mặt trước.

Biên tập cổ điển

Thay phiên, bạn có thể cài đặt plugin này để bạn có thể tiếp tục cập nhật lên WordPress 5.0 trong khi tiếp tục sử dụng trình chỉnh sửa cổ điển cũ. Plugin này sẽ được hỗ trợ cho đến năm 2022.

Cổ điển

Một cách khác là chuyển sang một ngã ba WordPress, ClassicPress. ClassicPress tập trung vào kinh doanh, ổn định và an ninh. Nó tương thích với các plugin WordPress và nó có kế hoạch mang lại các tính năng thú vị mới trong các bản phát hành trong tương lai của họ. Kiểm tra bài đăng của chúng tôi: ClassicPress: Thay thế cho WordPress mà không có Gutenberg & React.js

Tăng tốc WordPress

Khi WordPress đã trở nên quá lớn; không chỉ là một nền tảng viết blog Gutenberg, đặc biệt, đã thêm một số tải, mã, tệp bổ sung vào trang web của bạn có thể làm chậm trang web của bạn. Đây là một chi tiết mà bạn có thể tham khảo để giúp bạn xác định các điểm đau trên trang web của mình và giải quyết nó theo các thực tiễn tốt nhất mới nhất trong ngành.

Xem trước trình duyệt mã Visual Studio

Trình chỉnh sửa Visual Code bổ sung một trình duyệt thực được cung cấp bởi Chrome Headless bên trong Visual Studio Code. Điều này cho phép bạn xem trước công việc của bạn trong thời gian thực ngay bên trong trình chỉnh sửa mã và cho phép các tính năng như gỡ lỗi trong trình chỉnh sửa.

Gói

Gói là một công cụ để giữ tệp JavaScript của bạn bó kích thước trong kiểm tra. Bạn có thể xác định kích thước tối đa của mỗi tệp được gói và nó sẽ thông báo cho bạn khi nó về hoặc vượt qua kích thước tối đa được xác định. Gói có thể được tích hợp với một dịch vụ CI như TravisCI và CircleCI để triển khai liền mạch quy trình làm việc trong dự án của bạn.

Xuất hiện WP

Một hiện đại Khung chủ đề WordPress dựa trên mẫu MVC. Nếu bạn đã từng làm việc với một khung công tác PHP như Laravel và Slim, tôi chắc chắn bạn sẽ thực sự đánh giá cao khung này. Bạn có thể sử dụng những thứ như Bộ định tuyến và Bộ điều khiển, DI Container và Middlerware.

Ngọn hải đăng Bot

Một công cụ tiện ích cho phép bạn chạy Hải đăng trong dịch vụ CI bằng Docker. Đó là một công cụ tuyệt vời để tự động hóa kiểm tra hiệu suất trang web của bạn mỗi khi bạn thay đổi mã trang web mới.

Tìm hiểu ứng dụng React

Tìm hiểu Ứng dụng React là một tài nguyên để tìm hiểu React.js. Nhưng không giống như các tài nguyên khác ngoài kia, điều này nên được cài đặt cục bộ trong máy tính của bạn. Nó không chỉ chứa các tài liệu học tập mà còn mã và các mẫu tương tác. Phần tốt nhất là bạn có thể làm điều đó khi ngoại tuyến sau khi được cài đặt.

Chấp nhận WP

WP Acceptance là một công cụ mới cho phép bạn thực hiện các bài kiểm tra chấp nhận. Nói một cách đơn giản, Kiểm tra chấp nhận là một loạt kiểm tra mô phỏng hành vi người dùng. Có một số khung ra khỏi đó để thực hiện loại thử nghiệm này.

Tuy nhiên, nếu bạn chủ yếu làm việc với WordPress, bạn sẽ đánh giá cao công cụ này vì dễ sử dụng vì nó được thiết kế và phù hợp với các dự án WordPress điển hình cần.

Sáng bóng

Một thư viện JavaScript để giả lập phản chiếu ánh sáng trên trang web của bạn khi xem trên thiết bị di động. Bạn có thể xem bản demo trong https://pqina.nl/shiny/. Điều đáng chú ý là nó sẽ chỉ hoạt động trong thiết bị di động vì nó phụ thuộc vào một API nhất định chỉ có sẵn trong thiết bị di động.

Phản ứng Lucid

ReactLucid là một công cụ giúp bạn gỡ lỗi ứng dụng React và GraphQL theo cách tương tác hơn. Nó cho phép bạn xem phân cấp thành phần, thay đổi trạng thái / đạo cụ trong ứng dụng React của bạn cũng như lược đồ GraphQL, truy vấn và đột biến trong thời gian thực.

Tính năng CSS Chuyển đổi

Tiện ích mở rộng Chrome cho phép bạn vô hiệu hóa một số tính năng CSS nhất định trong Chrome. Với điều này, bạn có thể thấy trang web của mình sẽ hiển thị và hoạt động như thế nào khi các tính năng nhất định không tồn tại. Khá hữu ích để giúp bạn triển khai các tính năng CSS mới có thể không được triển khai trong tất cả các trình duyệt.

Hỗn hợp

Một công cụ có thể giúp bạn tùy chỉnh chế độ hòa trộn nền CSS với hình ảnh của bạn. Bạn có thể xem trước các chế độ pha trộn, thay đổi màu sắc và áp dụng độ dốc. Bạn có thể sử dụng hình ảnh từ Bapt hoặc tải nó lên từ máy tính.

Phản ứng nguyên tố

Một bộ sưu tập các phần tử React hoạt động ngay lập tức. Không có CSS ​​bên ngoài để nhập hoặc tùy chỉnh cấu hình để thêm trên Webpack. Nó đi kèm với các thành phần thiết yếu như Nút, Hộp kiểm, Chọn danh sách, Tab, Tooltip và nhiều hơn nữa.

Ngoại hối

Nếu bạn thường xuyên làm việc với định dạng JSON, tôi chắc chắn bạn sẽ đánh giá cao công cụ này. fx là một công cụ dòng lệnh cho phép bạn trực quan hóa dữ liệu JSON trong Terminal với chế độ tương tác. theo cách mà bạn có thể mở rộng hoặc thu gọn dữ liệu. fx có thể được cài đặt qua NPM hoặc Homebrew.

Mônica

Monica là khá trên thể loại riêng của mình. Đó là một loại CRM (Trình quản lý quan hệ khách hàng) nhưng không dành cho khách hàng của bạn mà dành cho những người thân yêu như gia đình và bạn bè của bạn.

Giống như một CRM, nó cho phép bạn theo dõi những thứ như hoạt động của bạn với chúng và khi bạn gọi chúng lần cuối, v.v. Thậm chí, nó còn có thể được đặt để nhắc bạn gọi cho ai đó mà bạn chưa nói chuyện trong một thời gian. Họ gọi nó là PRM (Quản lý quan hệ cá nhân).

Khung ion

Ionic framework đã thực sự được một thời gian. Nhưng gần đây, nó đã có một bước nhảy lớn trong chức năng của nó. Bây giờ không chỉ nhanh hơn mà giờ Ionic cũng vậy tương thích với hai khung sao đang tăng: React.js và Vue.js.

Điều này đặt xuống mặt đất để Ionic là một công cụ bất khả tri. Vì vậy, nó không chỉ hoạt động cho các khung cụ thể mà còn có thể được làm việc với các khung mới khi sự phát triển phía trước phát triển trong tương lai.

Đáng chú ý

Đáng chú ý là một ứng dụng máy tính để bàn ghi chú. Không giống như bất kỳ ứng dụng tương tự khác, nó không đi kèm với định dạng độc quyền, WYSIWYG hoặc các loại chuông và còi thông thường khác. Các trình chỉnh sửa ứng dụng chủ yếu được cung cấp bởi Markdown có hương vị Github. Ghi chú được lưu trữ trong một tập tin phẳng .md tập tin cũng như các tập tin đính kèm. Nó chỉ hoạt động và đơn giản.

TipTap

TipTap là trình soạn thảo WYSIWYG được xây dựng dựa trên ProseMirror với Vue.js. Ngoài việc kế thừa một số tính năng từ ProseMirror, chẳng hạn như hỗ trợ cú pháp Markdown tuyệt vời, TipTap mang đến một vài tính năng hiện đại như Menu Bubble, nơi menu định dạng sẽ xuất hiện khi tô sáng văn bản, tính năng Gợi ý nơi bạn có thể gắn thẻ hoặc đề cập một người trong nội dung và xuất khả năng xuất nội dung ở định dạng JSON.

Đặt lại

Restplain là một plugin WordPress cho phép bạn dễ dàng tạo tài liệu về các điểm cuối API REST của WordPress bao gồm các điểm cuối tùy chỉnh trên trang web của bạn cũng như thực hiện cuộc gọi API từ trong tài liệu. Một điều cần lưu ý là nó dựa vào lược đồ điểm cuối để tạo tài liệu, vì vậy hãy đảm bảo rằng bạn đã thêm một lược đồ phù hợp cho các điểm cuối tùy chỉnh của mình.

Phản ứng tải nội dung

Phản ứng tải nội dung là một thành phần tùy chỉnh React cho phép bạn hiển thị giữ chỗ nội dung trong khi nội dung thực tế đang được tải. Nó tương tự như loại trình tải mà bạn thấy trên Facebook và Instagram .

Huyền thoại

Mythic là một chủ đề khởi đầu WordPress với các thực tiễn tốt nhất hiện đại như Dependency Injection, Lượt xem và Bộ điều khiển, cũng như các công cụ hiện đại như sử dụng Webpack, Sass, Linting, PHP7 yêu cầu tối thiểu và BEM. Đây là một chủ đề tuyệt vời để nâng cao kỹ năng của bạn như một nhà phát triển chủ đề.

Github tinh chế

Một tiện ích mở rộng trình duyệt để tinh chỉnh trải nghiệm của bạn khi sử dụng Github. Nó thêm một số phím nóng tiện dụng, tinh chỉnh một số bố cục và giao diện người dùng, tự động thêm liên kết đến các vấn đề và PR, và nhiều hơn nữa.

Mở WC

Open WC là một bộ công cụ cho phép bạn tạo Thành phần Web tùy chỉnh. Nó bao gồm thư viện chính để tạo Thành phần Web, trình tạo Yeoman để nhanh chóng tạo một “Mở WC” dự án, bao gồm giàn giáo để thử nghiệm, xơ vải, và tiếp tục hội nhập.

Mở WC có thể là một lựa chọn tốt nếu bạn thích triển khai với tính năng web gốc thay vì sử dụng một khung như Vue.js hoặc React.js.

Gridsome

Gridsome là một công cụ xây dựng các trang web và ứng dụng web tĩnh với Vue.js và GraphQL. Nó có thể xử lý nhiều luồng dữ liệu như từ CMS như WordPress và Drupal, một tệp cục bộ như Markdown hoặc Yaml hoặc API bên ngoài như AirTable và Contentful. Đây là một sự thay thế thực sự tuyệt vời cho Gatsby.js, đặc biệt nếu thích Vue.js hơn React.js.

Trình duyệt

Đây là trình duyệt được hình dung bởi chính nhà phát minh World Wide Web, Tim Berners-Lee. nó là một trình duyệt đơn giản để kết xuất HTML và không hiển thị thanh địa chỉ như trình duyệt hiện đại nhưng bạn có thể xem bằng cách điều hướng đến Tài liệu> Mở từ tài liệu tham khảo đầy đủ và dán vào một URL và nhấp vào Mở. Và ở đó bạn sẽ thấy trang web của bạn sẽ hiển thị như thế nào với trình duyệt gốc.

Raster

Raster là một khung lưới hiện đại được xây dựng với đặc tả HTML và CSS hiện đại như CSS Grid, CSS Custom property (Biến) và phần tử tùy chỉnh. Một khuôn khổ hoàn hảo cho những người thích sống ở rìa.

Hooper

Một thành phần Vue.js để thêm Carousel hoặc Slider. Nó có thể truy cập và có thể sử dụng thông qua Touch, Bàn phím, Bánh xe chuột và điều hướng trợ giúp khác, nó hỗ trợ RTL và hướng dọc, có thể mở rộng và tất nhiên là đáp ứng.