Свіжі ресурси для веб-дизайнерів і розробників (березень 2019)

Протягом останніх кількох місяців у світі веб-розробки сталося багато. По-перше, нове блок-редактор, під кодовою назвою Гутенберг, нарешті об'єднано в WordPress 5.0. Це дійсно велика зміна з моменту свого створення, оскільки вона створює нову основу для розвитку WordPress у майбутньому і змінить спосіб розширення розробників для функцій WordPress.

По-друге, деякі з наших колег-розробників створили деякі дійсно корисні інструменти, такі як той, який дозволяє перегляд JSON в терміналі та декілька бібліотек React, які можуть виявитися великою допомогою у проектах веб-дизайну та розробки.

І, нарешті, деякі з найбільш ефективних ресурси, посилання та плагіни були запущені, щоб допомогти вам оновити свої проекти відповідно до нових тенденцій.

Давайте розглянемо найповніший перелік свіжих ресурсів веб-розробки.

Довідник Гутенберга

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

Блоки лісів

За допомогою блочного редактора WP-CLI тепер надає зручний спосіб розпочати роботу створення блоку Гутенберга з новою командою CLI, wp scaffold block. Ви можете створити та включити його до існуючих плагінів і тем.

CGB

Іншим способом легко запустити блок Гутенберга є Create Guten Block (CGB) генерувати шаблон розробити блок Гутенберга. Він складається з сучасних інструментів, таких як React.js, Webpack, ESLint, Babel та ін. не потрібно налаштовувати будь-який з цих інструментів так що ви можете просто зосередитися на написанні коду.

Елементні блоки для Гутенберга

Плагін WordPress, що дозволяє вставте будь-які шаблони Elementor і перегляньте його безпосередньо в редакторі. Плагін поставляється з багатьма іншими сумісностями, які надають бездоганний досвід редагування між Елементором і Гутенбергом. Перегляньте це відео, щоб дізнатися, як він діє.

Атомні блоки

Набір блоків Гутенберга зі зростаючим числом колекцій. На момент написання цієї статті вона надає “Блок розміщення сітки” що дозволяє додайте список повідомлень вашого сайту в макеті сітки. Там також a “Відгук блоку” який, як випливає з назви, вставляти відгук у межах сторінки. Перегляньте повний перегляд блоків на цій сторінці.

Блок-галерея

Захоплюючий блок, щоб вставити галерею зображень, Block Gallery надає бездоганний досвід додавання зображень до вашої публікації. Просто поставте зображення, налаштуйте відображення галереї (стиль масонства, карусель або повноекранний), і все це налаштовано. Це, на даний момент, просто кращий блок галереї для WordPress.

CoBlocks

Набір блоків того ж автора, який розробив згадану вище Блок-галерею, CoBlocks складається з декількох блоків, які покращують вміст вашого сайту з такими, як Аккордеон, Таблиця ціноутворення, Gif, Натисніть, щоб Tweet, і більше блоків для додавання.

StagBlocks

Ще один набір блоків Гутенберга. Плагін приносить ряд цікавих блоків, які багато хто з вас оцінять. Вона включає в себе Stat Block, який дозволяє налаштовувати статистику в межах ваших повідомлень і сторінок. Блок картки сайту, який буде веб-сайт попереднього перегляду у вигаданому картковому стилі. Код Блоку, який буде відображати код з виділеним кольором.

Блоки видри

Крім того, колекція блоків Гутенберга, таких як “Блок Карт Google” , щоб вставити карту, “Наш блок послуг” до вставити список служб за допомогою кнопки у вигляді сітки, і “Відгуки Площа блоку” , щоб вставити список рекомендацій. Otter Block - це колекція блоків Гутенберга, які б були вдячні бізнесу та розробникам теми.

Розширені блоки Гутенберга

Цей плагін постачається з декількома розширені блоки для збагачення вашого вмісту наприклад, автоматично згенерований вміст, “Блоки гіпхі” включити зображення GIF з Giphy.com, “Unsplash Block” , щоб вставити зображення з Unsplash.com, “Банерний рекламний блок”, WooCommerce “Блок кнопки додавання до кошика”, і багато іншого.

Block Lab

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

Блоки EDD

Плагін, який дозволяє вам відтворювати продукти Easy Easy Downloads у редакторі Gutenberg. На відміну від короткого коду, блок відображатиме перегляди продуктів.

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

Не готовий до встановлення Gutenberg плагін або оновлення вашого сайту до WordPress 5.0? Можна просто завантажте цей сайт, щоб спробувати новий редактор.

Хмара Гутенберга

Це схоже на AppStore для блоків Гутенберга. Центральне місце, де можна дістатися Блоки Гутенберга, які можна використовувати в WordPress і Drupal. Так, Drupal також збирається прийняти редактора Гутенберга для свого редактора.

Приклади Гутенберга

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

GutenbergJS

Версія Gutenberg лише для JavaScript. Він доступний як пакет NPM, який дозволяє інтегрувати Gutenberg у будь-яку з ваших додатків JavaScript.

Вимкнути Гутенберг

Хоча Гутенберг приносить нові можливості WordPress, але не всі готові до нього. Якщо існуючі сайти не працюють добре з Гутенбергом, ви можете встановити цей плагін. Це дозволяє вимкніть редактор Гутенберга для окремих публікацій, типів публікацій, ролей користувачів, тем, а також для вимкнення таблиць стилів Гутенберга в інтерфейсі.

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

Крім того, ви можете встановити цей плагін, щоб ви могли постійно оновлюватися до WordPress 5.0, використовуючи старий класичний редактор. Цей плагін буде підтримуватися до 2022 року.

ClassicPress

Іншою альтернативою є перехід на вилку WordPress, ClassicPress. Фокусується функція ClassicPress бізнесу, стабільності та безпеки. Він сумісний з плагінами WordPress, і він планує принести нові цікаві можливості в їхніх майбутніх випусках. Ознайомтесь з нашою посадою: ClassicPress: Альтернатива WordPress без Gutenberg & React.js

Прискорення WordPress

Як WordPress став таким великим; більше, ніж просто платформа для блогів. Гутенберг, особливо, додав додаткові навантаження, коди, файли на ваш сайт, які можуть уповільнити ваш сайт. Це подробиця, на яку ви можете звернутися, щоб допомогти вам визначити крапки на своєму сайті та звернутися до неї з останніми кращими практиками в галузі.

Попередній перегляд коду Visual Studio

Редактор візуального коду, який додає справжній веб-переглядач, керований Chrome Headless в коді Visual Studio. Це дозволяє перегляньте свою роботу в реальному часі безпосередньо всередині редактора коду та надає такі функції, як налагодження в редакторі.

Бандазі

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

WP Emerge

Сучасний Тема WordPress заснована на шаблоні MVC. Якщо ви звикли працювати з PHP-структурою, як Laravel і Slim, я впевнений, що ви дійсно оціните цю структуру. Ви можете використовувати такі речі, як маршрутизатор і контролер, DI контейнер і Middlerware.

Маяк Бот

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

Дізнайтеся, як реагувати на додаток

Learn React App - це ресурс для вивчення React.js. Але, на відміну від інших ресурсів, це має бути встановлено локально на вашому комп'ютері. Вона не тільки містить навчальні матеріали, але також кодує та інтерактивні зразки. Найкраще, що ви можете зробити це в автономному режимі після його встановлення.

Прийняття WP

WP Acceptance є новим інструментом, який дозволяє виконувати тести прийому. Простіше кажучи, Acceptance Tests - це серія тести для емуляції поведінки користувача. Існує декілька рамок для виконання цього типу тестів.

Однак, якщо ви працюєте в основному з WordPress, ви оціните цей інструмент для простоти використання, оскільки він розроблений і адаптований до типових проектів WordPress..

Блискучий

Бібліотека JavaScript для емулювати відображення освітлення на вашому веб-сайті при перегляді на мобільному пристрої. Ви можете переглянути демонстрацію в https://pqina.nl/shiny/. Варто відзначити, що він буде працювати тільки в мобільних пристроях, оскільки він спирається на певний API, який доступний тільки на мобільних пристроях.

Реакція Lucid

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

Перемикання функцій CSS

Розширення Chrome, що дозволяє вимкнути певні функції CSS у Chrome. За допомогою цього пункту ви зможете побачити, як ваш веб-сайт відображатиметься та діятиме, коли певних функцій не існує. Досить корисно, щоб допомогти вам реалізувати нові функції CSS, які не можуть бути реалізовані у всіх браузерах.

Blendy

Інструмент, який може допомогти вам налаштуйте режими суміщення CSS з зображенням. Можна переглядати режими накладання, змінювати кольори та застосовувати градієнти. Ви можете використовувати зображення з Unsplash або завантажити їх з комп'ютера.

Реакція Elemental

Колекція елементів React, які працюють прямо з коробки. Немає зовнішніх CSS для імпорту або налаштування конфігурацій для додавання в Webpack. Він поставляється з основними компонентами, як кнопка, прапорець, SelectList, вкладки, підказки, і багато іншого.

FX

Якщо ви часто маєте справу з форматом JSON, я впевнений, що ви оціните цей інструмент. fx є інструмент командного рядка, який дозволяє візуалізувати дані JSON в терміналі з інтерактивним режимом. таким чином, що ви можете розширити або згорнути дані. fx може бути встановлений через NPM або Homebrew.

Моніка

Моніка цілком за своєю категорією. Це свого роду CRM (Customer Relationship Manager), але призначений не для вашого клієнта, а для ваших близьких, як ваша родина та друзі.

Як CRM, він дозволяє відстежувати такі речі, як ваша діяльність з ними, і коли ви їх називаєте останнім часом. Навіть більше, вона може бути налаштована, щоб нагадати вам, щоб подзвонити комусь, з ким ви не розмовляли з часом. Вони називають це PRM (менеджером персональних відносин).

Ionic Framework

Іонні рамки дійсно існували деякий час. Але останнім часом вона зробила досить великий стрибок у своїй функціональності. Зараз не тільки те, що це швидше, але іонно зараз сумісні з двома рамками зірки: React.js і Vue.js.

Це закладає основу для іонної бути рамковий агностичний інструмент. Тому не тільки, що він працює для певних фреймворків, але й може працювати з новими, оскільки розвиток front-end розвивається в майбутньому.

Примітно

Звертає на себе увагу робота з настільними програмами. На відміну від будь-якого іншого подібного додатку, він не постачається з фірмовим форматуванням, WYSIWYG або іншими типовими наворотами. The Редактор програм використовується в основному за допомогою Markdown зі смаком Github. Нотатки зберігаються у плоскому файлі .md файли, а також вкладення. Це просто працює і просто.

Підказка

TipTap - це редактор WYSIWYG, побудований на вершині ProseMirror з Vue.js. Крім успадкування ряду функцій з ProseMirror з коробки, таких як дивовижна підтримка синтаксису Markdown, TipTap приносить кілька сучасних функцій, таких як меню Bubble, де меню форматування з'явиться під час виділення тексту, функція "Пропозиція", де можна помітити або згадати особи в межах вмісту та експортувати можливість експортувати вміст у форматі JSON.

Обгрунтувати

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

Реагуйте завантажувач вмісту

Реагуйте завантажувач вмісту є користувацьким компонентом React, який дозволяє відображати вміст вмісту вмісту під час завантаження фактичного вмісту. Це схоже на тип навантажувача, який ви бачите на Facebook і Instagram .

Міфічний

Mythic - це тема для початківців WordPress з сучасними передовими методами, такими як ін'єкція залежностей, перегляди та контролери, а також сучасні інструменти, такі як використання Webpack, Sass, Linting, PHP7 мінімальні вимоги і BEM. Це чудова тема, щоб вирівняти свою майстерність як розробника теми.

Вишуканий Github

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

Відкритий туалет

Відкритий WC - це набір інструментів, що дозволяють створювати власний веб-компонент. Вона включає в себе основну бібліотеку для створення Web Component, генератори Yeoman для швидкого створення “Відкритий туалет” проект, який включає в себе риштування для тестування, linting, і продовжує інтеграцію.

Відкритий туалет може бути гарною альтернативою, якщо ви надають перевагу реалізації за допомогою власної веб-функції замість того, щоб використовувати рамки, такі як Vue.js або React.js.

Gridsome

Gridsome - це інструмент для створення статичних веб-сайтів і веб-додатків з Vue.js і GraphQL. Він здатний обробляти декілька потоків даних, наприклад, з CMS, як WordPress і Drupal, локальний файл, як Markdown або Yaml, або зовнішній API, як AirTable і Contentful. Це дійсно чудова альтернатива Gatsby.js, особливо якщо ви віддаєте перевагу Vue.js над React.js.

Браузер

Це браузер, як передбачено самим автором World Wide Web, Тімом Бернерсом-Лі. Це простий браузер для візуалізації HTML і не відображає адресний рядок, як сучасний веб-переглядач, але ви можете переглядати його, перейшовши до Документ> Відкрити з повного посилання на документ і вставте URL-адресу та натисніть відчинено. І там ви побачите, як ваш сайт буде відображатися з оригінальним браузером.

Растрові

Растр - це сучасний фреймворк, який побудований на сучасних специфікаціях HTML і CSS, таких як CSS Grid, CSS Custom Property (Змінна) і користувальницький елемент. Ідеальна основа для тих, хто любить жити по краях.

Хупер

Компонент Vue.js для додавання каруселі або повзунка. Він доступний і доступний через Touch, Keyboard, Mouse Wheel та іншу допоміжну навігацію, він підтримує RTL і вертикальний напрямок, розширюваний і, звичайно, відповідь.