Свежие ресурсы для веб-дизайнеров и разработчиков (март 2019 г.)

За последние несколько месяцев в мире веб-разработки произошло много событий. Во-первых, новый блочный редактор под кодовым названием Гутенберг, наконец-то был объединен с WordPress 5.0. Это действительно большое изменение с момента его создания, поскольку оно закладывает новую основу для развития WordPress в будущем и изменит способ расширения возможностей WordPress для разработчиков..

Во-вторых, некоторые из наших коллег-разработчиков создали несколько действительно полезных инструментов, таких как один, который позволяет посмотреть JSON в терминале и пару библиотек React, которые могут оказать большую помощь в проектах веб-дизайна и разработки.

И, наконец, некоторые из наиболее эффективных ресурсы, ссылки и плагины был запущен, чтобы помочь вам обновить ваши проекты в соответствии с новыми тенденциями.

Давайте попадем в самый полный список свежих ресурсов веб-разработки.

Справочник Гутенберга

Официальный справочник WordPress, где вы можете найти ссылки на дизайн, примеры кода для создания блоков и другие, и руководство для содействия проекту. Это ваш первый опыт разработки с Гутенбергом.

Блок лесов

Благодаря блочному редактору WP-CLI теперь предоставляет удобный способ начать работу с создание блока Гутенберга с новой командой CLI, блок строительных лесов. Вы можете создать и включить его в существующие плагины и темы.

БГКП

Другой способ легко запустить блок Гутенберга - Создать блок Гутена (CGB) - инструмент для генерировать шаблон разработать блок Гутенберга. Он состоит из современных инструментов, таких как React.js, Webpack, ESLint, Babel и т. Д. Самое приятное, что вы не нужно настраивать какие-либо из этих инструментов так что вы можете просто сосредоточиться на написании своего кода.

Elementor Блоки для Гутенберга

Плагин WordPress, который позволяет вам вставить любые шаблоны Elementor и просмотреть его прямо в редакторе. Плагин поставляется с множеством других совместимостей, которые обеспечивают безупречный опыт редактирования между Элементором и Гутенбергом. Посмотрите это видео, чтобы увидеть, как оно работает в действии..

Атомные блоки

Набор блоков Гутенберга с растущим количеством коллекции. На момент написания этой статьи “Post Grid Block” что позволяет вам добавить список постов вашего сайта в сетке. Там также есть “Отзыв блок” который, как следует из названия, вставить отзыв на странице. Проверьте полный предварительный просмотр блоков на этой странице.

Блок Галерея

Привлекательный блок для вставки вашей галереи изображений. Блок Галерея обеспечивает удобство добавления изображений в ваше сообщение. Просто отбросьте изображения, задайте стиль отображения галереи (стиль масонства, карусель или полноэкранный режим), и все готово. На данный момент это просто лучший блок галереи для WordPress..

CoBlocks

Набор блоков того же автора, который разработал вышеупомянутую галерею блоков, CoBlocks состоит из нескольких блоков, которые улучшат содержание вашего сайта, например: Аккордеон, Таблица цен, Gif, Click-to-Tweet, и больше блоков, которые будут добавлены.

StagBlocks

Еще одна свита блоков Гутенберга. Плагин содержит множество интересных блоков, которые многие из вас оценят. Он включает в себя статический блок, который позволяет настраивать статистику в ваших сообщениях и страницах. Блок карты сайта, который будет предварительный просмотр сайта в модном стиле Card. Блок кода, который будет отображать код с выделенным цветом.

Блоки выдры

Кроме того, коллекция блоков Гутенберга, таких как “Блок Google Maps” вставить карту, “Наш Сервисный Блок” в вставить список услуг с помощью кнопки в виде сетки, а также “Блок Области Отзывы” вставить список отзывов. Otter Block - это коллекция блоков Gutenberg, которые по достоинству оценят компании и разработчики тем..

Усовершенствованные блоки Гутенберга

Этот плагин поставляется с горсткой расширенные блоки для обогащения вашего контента такие как автоматически сгенерированное оглавление, “Giphy Blocks” включить GIF-изображение с Giphy.com, “Unsplash Block” вставить изображения с Unsplash.com, “Баннерная реклама”, WooCommerce “Блок кнопок "Добавить в корзину"”, и многое другое.

Блок Лаборатория

Block Lab облегчает разработчикам создание блока Гутенберга. Плагин позволяет вам зарегистрировать новый блок с удобным графическим интерфейсом и шаблоны в PHP. Вам даже не нужно изучать React.js.

Блоки EDD

Плагин, который позволяет отображать продукты Easy Digital Downloads в редакторе Гутенберга. В отличие от использования Шорткода, блок будет отображать виды товаров.

Тест Гутенберга

Не готовы установить плагин Gutenberg или обновить свой сайт до WordPress 5.0? Вы можете просто загрузите этот сайт, чтобы опробовать новый редактор.

Облако Гутенберга

Это как AppStore для блоков Гутенберга. Центральное место, где вы можете получить Блоки Гутенберга, которые можно использовать в WordPress и Drupal. Да, Drupal также собирается принять редактор Гутенберга для своего редактора.

Гутенберг Примеры

Github хранилище примеров кода для создания блоков Гутенберга. Здесь вы можете найти Самый простой блок на более сложный пример, такой как тот, чтобы создать “Блок рецептов” который устанавливает шаблон в редакторе для пользователей, чтобы добавить рецепт содержание. Хороший справочник для тех, кто предпочитает учиться на реальных примерах, а не из учебника.

GutenbergJS

Версия только для JavaScript Гутенберга. Он доступен в виде пакета NPM, который позволяет интегрировать Гутенберга в любое ваше приложение JavaScript.

Отключить Гутенберга

Хотя Гутенберг приносит новые возможности в WordPress, но не все к этому готовы. Если ваши существующие сайты не работают с Gutenberg, вы можете установить этот плагин. Это позволяет вам отключить редактор Гутенберга для определенных сообщений, типов сообщений, пользовательских ролей, тем, а также отключить таблицы стилей Гутенберга в интерфейсе.

Классический редактор

Кроме того, вы можете установить этот плагин, чтобы вы могли постоянно обновляться до WordPress 5.0, продолжая при этом использовать старый классический редактор. Этот плагин будет поддерживаться до 2022 года.

ClassicPress

Другой альтернативой является переключение на форк WordPress, ClassicPress. ClassicPress фокусируется на бизнес, стабильность и безопасность. Он совместим с плагинами WordPress и планирует добавить новые интересные функции в их будущих выпусках. Ознакомьтесь с нашим постом: ClassicPress: альтернатива WordPress без Gutenberg & React.js

Ускорение WordPress

Как WordPress стал таким большим; больше, чем просто платформа для блогов. Гутенберг, в частности, добавил некоторые дополнительные загрузки, коды, файлы на ваш сайт, которые могут замедлить ваш сайт. Это деталь, к которой вы можете обратиться, чтобы помочь вам определить болевые точки на вашем сайте и использовать новейшие передовые практики в отрасли..

Visual Studio Code Browser Предварительный просмотр

Редактор Visual Code, который добавляет настоящий браузер на базе Chrome Headless внутри кода Visual Studio. Это позволяет вам Предварительный просмотр вашей работы в режиме реального времени прямо в редакторе кода и включает такие функции, как отладка в редакторе.

Bundlesize

Bundlesize - это инструмент для сохраните свой файл JavaScript отправка одной посылкой размер в чеке. Вы можете определить максимальный размер каждого вашего связанного файла, и он будет предупреждать вас, когда он достигнет или превысит заданный максимальный размер. Bundlesize можно интегрировать со службой CI, такой как TravisCI и CircleCI, для беспрепятственного развертывания рабочего процесса в вашем проекте..

WP Emerge

Современный Каркас темы WordPress, основанный на шаблоне MVC. Если вы привыкли работать с PHP-фреймворком, таким как Laravel и Slim, я уверен, что вы действительно оцените этот фреймворк. Вы можете использовать такие вещи, как Router and Controller, DI Container и Middlerware..

Маяк Бот

Утилита, позволяющая запускать Lighthouse в службе CI с помощью Docker. Это отличный инструмент для автоматизировать проверку производительности вашего сайта каждый раз, когда вы вносите новое изменение в код вашего сайта.

Приложение Learn React

Learn React App - это ресурс для изучения React.js. Но в отличие от других ресурсов, это должно быть установлен локально на вашем компьютере. Он содержит не только учебные материалы, но также код и интерактивные образцы. Самое приятное то, что вы можете сделать это в автономном режиме, как только он установлен.

Принятие WP

WP Acceptance - это новый инструмент, который позволяет проводить приемочные испытания. Проще говоря, приемочные тесты представляют собой серию тесты для имитации поведения пользователя. Существует ряд платформ для выполнения этого типа теста..

Однако, если вы в основном работаете с WordPress, вы по достоинству оцените этот инструмент за простоту использования, так как он разработан и адаптирован к типичным потребностям проектов WordPress..

блестящий

Библиотека JavaScript для эмулировать отражение света на вашем сайте при просмотре на мобильном устройстве. Вы можете посмотреть демо в https://pqina.nl/shiny/. Стоит отметить, что он будет работать только на мобильных устройствах, поскольку использует определенный API, который доступен только на мобильных устройствах..

Реагировать Lucid

ReactLucid - это инструмент, который поможет вам отлаживать приложения React и GraphQL более интерактивным способом. Он позволяет вам видеть иерархию компонентов, изменения состояния / реквизита в вашем приложении React, а также схему, запросы и мутации GraphQL в режиме реального времени..

Функции CSS Toggle

Расширение Chrome, которое позволяет вам отключить некоторые функции CSS в Chrome. Благодаря этому вы можете увидеть, как ваш сайт будет отображаться и вести себя, когда некоторые функции не существуют. Весьма полезно, чтобы помочь вам реализовать новые функции CSS, которые могут быть реализованы не во всех браузерах.

Blendy

Инструмент, который может помочь вам настроить режимы наложения фона CSS с вашим изображением. Вы можете просматривать режимы наложения, изменять цвета и применять градиенты. Вы можете использовать изображения из Unsplash или загрузить его с компьютера.

Реагировать Элементаль

Коллекция элементов React, которые работают прямо из коробки. Нет внешнего CSS для импорта или настройки конфигурации для добавления в Webpack. Он поставляется с необходимыми компонентами, такими как кнопка, флажок, список выбора, вкладки, всплывающая подсказка и многое другое.

FX

Если вы часто имеете дело с форматом JSON, я уверен, что вы оцените этот инструмент. FX это инструмент командной строки, который позволяет визуализировать данные JSON в терминале с интерактивным режимом. таким образом, что вы можете расширить или свернуть данные. FX может быть установлен через NPM или Homebrew.

Моника

Моника вполне по своей категории. Это своего рода CRM (менеджер по работе с клиентами), но он предназначен не для вашего клиента, а для ваших близких, таких как ваша семья и друзья.

Как и CRM, он позволяет вам отслеживать такие вещи, как ваши действия с ними, а также когда вы в последний раз звонили им и т. Д. Более того, он может напоминать вам о необходимости звонить кому-то, с кем вы не разговаривали в течение некоторого времени. Они называют это PRM (менеджер по личным отношениям).

Ionic Framework

Ионная структура фактически была вокруг некоторое время. Но в последнее время он сделал довольно большой скачок в своей функциональности. Теперь не только то, что это быстрее, но Ionic сейчас совместим с двумя восходящими звездами: React.js и Vue.js.

Это закладывает основу для Ionic, чтобы быть каркасный инструмент. Таким образом, он не только работает для определенных сред, но также может работать с новыми, так как развитие фронт-энда будет развиваться в будущем..

примечательный

Примечательным является заметка настольного приложения. В отличие от любого другого подобного приложения, оно не имеет проприетарного форматирования, WYSIWYG или других типичных наворотов. редактор приложений в основном работает на GitHub со вкусом Markdown. Заметки хранятся в плоском файле .Мэриленд файлы, а также вложения. Это просто работает и просто.

TipTap

TipTap - это WYSIWYG-редактор, созданный поверх ProseMirror с Vue.js. Помимо наследования ряда функций от ProseMirror из коробки, таких как потрясающая поддержка синтаксиса Markdown, TipTap предлагает несколько современных функций, таких как «Пузырь меню», в котором появляется меню форматирования при выделении текста, функция «Предложение», в которой можно отметить или упомянуть человек в контенте, и экспортировать возможность экспорта контента в формате JSON.

Restplain

Restplain - это плагин WordPress, который позволяет легко создавать документацию по конечным точкам WordPress REST API, включая настраиваемые конечные точки на вашем сайте, а также сделать вызов API из документации. Следует отметить, что для создания документации используется схема конечной точки, поэтому убедитесь, что вы добавили правильную схему для своих пользовательских конечных точек..

React Content Loader

React Content Loader является пользовательским компонентом React, который позволяет отображать заполнитель содержимого во время загрузки фактического содержимого. Это похоже на тип загрузчика, который вы видите на Facebook и Instagram .

Mythic

Mythic - это начальная тема WordPress с современными лучшими практиками, такими как внедрение зависимостей, представления и контроллеры, а также с современными инструментами, такими как использование Webpack, Sass, Linting, PHP7 минимальное требование и БЭМ. Это отличная тема, чтобы повысить уровень своего мастерства как разработчика тем.

Изысканный Github

Расширение браузера для улучшения вашего опыта при использовании Github. Он добавляет несколько удобных горячих клавиш, уточняет некоторые макеты и пользовательские интерфейсы, автоматически добавляет ссылки на проблемы и PR, и многое другое.

Открытый туалет

Open WC - это набор инструментов, позволяющих создавать пользовательские веб-компоненты. Она включает в себя основную библиотеку для создания веб-компонента, генераторы Yeoman для быстрой генерации “Открытый туалет” проект, который включает в себя строительные леса для тестирования, пыление, и продолжает интеграцию.

Открытый туалет может быть хорошей альтернативой, если вы предпочитаю реализацию с нативной веб-функцией вместо того, чтобы использовать фреймворк, такой как Vue.js или React.js.

Gridsome

Gridsome это инструмент для создания статических веб-сайтов и веб-приложений с Vue.js и GraphQL. Он может обрабатывать несколько потоков данных, таких как CMS, такие как WordPress и Drupal, локальный файл, такой как Markdown или Yaml, или внешний API, такой как AirTable и Contentful. Это действительно отличная альтернатива Gatsby.js, особенно если вы предпочитаете Vue.js React.js.

Браузер

Это браузер, как и предполагал сам изобретатель Всемирной паутины Тим Бернерс-Ли. Это простой браузер для рендеринга HTML и не показывает адресную строку, как современный браузер, но вы можете просмотреть, перейдя к Документ> Открыть из полной ссылки на документ и вставьте в URL и нажмите открыто. И там вы увидите, как ваш сайт будет отображаться с оригинальным браузером.

растр

Raster - это современная сеточная инфраструктура, построенная на основе современных спецификаций HTML и CSS, таких как CSS Grid, CSS Custom Property (Variable) и пользовательский элемент. Идеальный каркас для тех, кто любит жить по краям.

бондарь

Компонент Vue.js для добавления карусели или слайдера. Он доступен и доступен через сенсорное управление, клавиатуру, колесо мыши и другие вспомогательные средства навигации, он поддерживает RTL и вертикальное направление, расширяемый и, конечно, отклик.