Пресни ресурси за уеб дизайнери и разработчици (март 2019 г.)
Много неща се случиха през последните няколко месеца в света на уеб разработките. Първо, новото блоков редактор, кодово име Гутенберг, най-накрая се сля с WordPress 5.0. Това е наистина голяма промяна от самото му създаване, тъй като създава нова основа за развитието на WordPress в бъдеще и ще промени начина, по който разработчиците се разширяват за функционалностите на WordPress..
Второ, някои от нашите колеги разработчици са създали някои наистина полезни инструменти, като например тази, която позволява преглед на JSON в терминал и няколко библиотеки на React, които могат да се окажат от голяма полза при проектирането и разработването на уеб сайтове.
И накрая, някои от най-ефективните ресурси, препратки и приставки са стартирани, за да ви помогнат да актуализирате проектите си в съответствие с новите тенденции.
Да вземем най-изчерпателния списък от свежи ресурси за уеб разработки.
Наръчник на Гутенберг
Официалният наръчник на WordPress, където можете да намерите справки за дизайна, примери за създаване на блокове и други и ръководство за принос към проекта. Това е първата ви справка за развитие с Гутенберг.
Блокиране на скеле
С блоковия редактор, WP-CLI вече предоставя удобен начин да започнете създаване на блок Gutenberg с нова команда CLI, wp скеле блок. Можете да я създадете и включите в съществуващите приставки и теми.
CGB
Друг начин за лесно стартиране на блок от Гутенберг е Create Guten Block (CGB) генериране на шаблон да се разработи блок на Гутенберг. Състои се от съвременни инструменти като React.js, Webpack, ESLint, Babel и др. не е необходимо да конфигурирате нито един от тези инструменти така че можете просто да се съсредоточите върху писането на кода.
Елементни блокове за Гутенберг
WordPress плъгин, който ви позволява въведете шаблони за Elementor и го прегледайте в редактор. Приставката идва с много други съвместимост, които осигуряват безпроблемно редактиране между Елементор и Гутенберг. Разгледайте този видеоклип, за да видите как се прави в действие.
Атомни блокове
Набор от блокове на Гутенберг с нарастващ брой колекции. По време на това писане, тя предоставя “Блок след решетка” което ви позволява да добавите списък с публикации на сайта си в мрежа. Има и a “Атестационен блок” което, както подсказва името, да вмъкне препоръка в страницата. Вижте пълните прегледи на блоковете на тази страница.
Блокирайте галерията
Атрактивен блок за вмъкване на вашата галерия с изображения, Block Gallery осигурява безпроблемно преживяване за добавяне на изображения към публикацията ви. Просто оставете снимките си, създайте галерия (Masonry-style, Carousel или Fullscreen) и всичко е готово. Това е, в момента, просто най-добрият галерия блок за WordPress.
CoBlocks
Набор от блокове от същия автор, който е разработил гореспоменатата Block Gallery, CoBlocks се състои от няколко блока, които ще подобрят съдържанието на сайта ви с такива Акордеон, Таблица за ценообразуване, Gif, Click-to-Tweet, и още Блокове за добавяне.
StagBlocks
Друг пакет от блокове на Гутенберг. Плъгинът носи редица интересни блокове, които много от вас биха оценили. Тя включва Stat Block, който ви позволява да персонализирате статистиката във вашите публикации и страници. Карта на уеб сайта, която ще бъде Визуализация на уебсайта в изискан Card-стил. Код, който ще визуализира код с подчертан цвят.
Видра блокове
Също така, колекция от блокове на Гутенберг като “Блок на Google Карти” , за да вмъкнете карта, “Нашият сервизен блок” да се вмъкнете списък с услуги с бутон в изглед на мрежата, и “Препоръки Площ блок” за вмъкване на списък от препоръки. Otter Block е колекция от блокове на Гутенберг, които биха оценили фирмите и разработчиците на теми.
Разширени блокове на Гутенберг
Този плъгин идва с шепа напреднали блокове за обогатяване на съдържанието ви като автоматично генерираното съдържание, “Giphy блокове” да включите GIF изображение от Giphy.com, “Премахване на блока” да вмъкнете изображения от Unsplash.com, “Банер рекламен блок”, WooCommerce “Блок с бутони за добавяне към количката”, и много повече.
Block Lab
Block Lab улеснява разработчиците да създават блок на Гутенберг. Приставката ви позволява регистрирайте нов блок с удобен за потребителя GUI и шаблони в PHP. Дори не трябва да научите React.js.
EDD блокове
Плъгин, който ви позволява да визуализирате продуктите на Easy Digital Downloads в редактора на Gutenberg. За разлика от използването на Shortcode, блокът ще показва изгледи на продуктите.
Тест Гутенберг
Не сте готови да инсталирате Gutenberg plugin или да актуализирате сайта си с WordPress 5.0? Можете просто заредете този сайт, за да изпробвате новия редактор.
Облак Гутенберг
Това е като AppStore за Gutenberg Blocks. Централно място, където можете да получите Гутенберг Блокове, които могат да се използват в WordPress и Drupal. Да, Drupal ще приеме и редактора на Гутенберг.
Примери на Гутенберг
Github хранилище на кодови образци за създаване на блокове на Гутенберг. Тук можете да намерите най-простия блок за по-сложен пример, като този за създаване на “Блок Рецепти” който задава шаблон в редактора за добавяне от потребителите рецепта съдържание. Една добра референция за тези, които предпочитат да се учат от реални примери, а не от учебник.
GutenbergJS
Версията на Гутенберг, само за JavaScript. Той е достъпен като NPM пакет, който ви позволява да интегрирате Gutenberg във всяко от вашите JavaScript приложения.
Изключете Гутенберг
Въпреки че Гутенберг носи нови възможности за WordPress, не всеки е готов за него. Ако съществуващите ви сайтове не работят добре с Гутенберг, можете да инсталирате този плъгин. Това ви позволява деактивирайте редактора на Гутенберг за определени публикации, типове публикации, потребителски роли, теми, както и деактивиране на стиловете на Гутенберг в предния край.
Класически редактор
Алтернативно, можете да инсталирате този плъгин, така че можете да поддържате актуализация на WordPress 5.0, докато продължавате да използвате стария класически редактор. Този плъгин ще бъде поддържан до 2022 година.
ClassicPress
Друга алтернатива е да преминете към WordPress вилица, ClassicPress. Фокусът на ClassicPress е включен стабилността и сигурността. Той е съвместим с WordPress плъгини и планира да донесе нови интересни функции в бъдещите си версии. Вижте нашия пост: ClassicPress: Алтернатива на WordPress без Gutenberg & React.js
Ускорете WordPress
Тъй като WordPress е станал толкова голям; повече от просто платформа за блогове. Gutenberg, особено, е добавил някои допълнителни товари, кодове, файлове на вашия сайт, които могат да забавят вашия сайт. Това е детайл, който можете да споменете, за да ви помогнат да идентифицирате точките за болка на сайта си и да ги адресирате към най-новите добри практики в индустрията.
Визуализация на Visual Studio Code Browser
Редактор на визуален код, който добавя истински браузър, задвижван от Chrome без глава в Visual Studio Code. Това ви позволява визуализирайте работата си в реално време направо в редактора на кодове и дава възможност за отстраняване на грешки в редактора.
Bundlesize
Bundlesize е инструмент за запази своя JavaScript файл групиране размер под контрол. Можете да определите максималния размер на всеки от вашите пакети и ще ви предупреди, когато става въпрос за или е преминал определения максимален размер. Bundlesize може да се интегрира с CI услуга като TravisCI и CircleCI за безпроблемно разгръщане на работния процес във вашия проект.
WP Emerge
Модерна WordPress тема рамка на базата на MVC модел. Ако сте свикнали да работите с PHP рамка като Laravel и Slim, сигурна съм, че наистина ще оцените тази рамка. Можете да използвате неща като Router и Controller, DI Container и Middlerware.
Ботуш на фара
Помощен инструмент, който ви позволява да стартирате Lighthouse в CI услуга, използвайки Docker. Това е чудесен инструмент автоматизирайте проверката на ефективността на уебсайта си всеки път, когато въведете нова промяна в кода на уебсайта си.
Научете приложението Реагирайте
Научете React App е ресурс за изучаване на React.js. Но за разлика от другите ресурси там, това трябва да бъде инсталиран локално във вашия компютър. Той не само съдържа учебни материали, но и кодира и интерактивни образци. Най-добрата част е, че можете да го направите, докато е офлайн, след като е инсталиран.
Приемане на WP
WP Acceptance е нов инструмент, който ви позволява да извършвате тестове за приемане. Казано просто, тестовете за приемане са поредица от тестове за емулиране на потребителското поведение. Има няколко рамки за извършване на този тип тест.
Въпреки това, ако работите предимно с 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, Tabs, Tooltip, и много повече.
FX
Ако често се занимавате с JSON форматиране, сигурен съм, че ще оцените този инструмент. FX е инструмент за команден ред, който ви позволява да визуализирате JSON данни в терминал с интерактивен режим. по начин, който позволява да разширите или свиете данните. FX може да се инсталира чрез NPM или Homebrew.
Моника
Моника е доста собствена категория. Това е един вид CRM (Customer Relationship Manager), но не е предназначен за вашите клиенти, а за вашите близки като вашето семейство и приятели.
Подобно на CRM, тя ви позволява да следите неща като дейностите си с тях, когато сте ги наричали последно и т.н. Още повече, че може да бъде настроено да ви напомня да се обадите на някого, с когото не сте говорили за известно време. Наричат го PRM (мениджър за лични отношения).
Йонна рамка
Йонийската рамка е съществувала от известно време. Но напоследък тя направи голям скок в своята функционалност. Сега не само, че сега е по-бързо, но и йонно съвместими с две рамки на изгряваща звезда: React.js и Vue.js.
Това поставя основата за йонийски да бъде рамков агностичен инструмент. Така че не само, че работи за определени рамки, но може да работи и с новите, тъй като развитието на front-end се развива в бъдеще.
забележителен
Забележително е приложението за писане на бележки. За разлика от всяко друго подобно приложение, то не идва със собствено форматиране, WYSIWYG или други типични звънци и свирки. Най- Редакторът на приложения се захранва главно от Markdown с вкус на Github. Бележките се съхраняват в плосък файл .MD файлове, както и прикачения файл. Тя просто работи и е проста.
TipTap
TipTap е WYSIWYG редактор, изграден на върха на ProseMirror с Vue.js. Освен наследяването на редица функции от ProseMirror от кутията, като страхотната синтаксична поддръжка на Markdown, TipTap носи няколко модерни функции като Bubble Menu, където менюто за форматиране ще се появи, когато се маркира текст, функцията Suggestion, където можете да маркирате или споменете лице в съдържанието и го експортира възможност за експортиране на съдържание в JSON форматирането.
Restplain
Restplain е WordPress плъгин, който ви позволява лесно да генерирате документация за вашите крайни точки на WordPress REST API, включително потребителските крайни точки на вашия сайт, както и осъществяване на API извикване от документите. Едно нещо, което трябва да се отбележи е, че разчита на схемата за крайни точки, за да генерира документацията, затова се уверете, че сте добавили подходяща схема за персонализираните си крайни точки..
Реагирайте зареждането на съдържание
Реагирайте зареждането на съдържание е персонализиран компонент React, който ви позволява да показвате контейнер за съдържание, докато се зарежда действителното съдържание. Подобен е на типа на товарача, който виждате във Facebook и Instagram .
митичен
Mythic е стартерна тема на WordPress с модерни най-добри практики, като инжектиране на зависимост, изгледи и контролери, както и модерни инструменти като използването на Webpack, Sass, Linting, PHP7 минимално изискване и BEM. Това е страхотна тема, за да изравните уменията си като разработчик на теми.
Изтънчен Github
Разширение на браузъра, за да прецизирате опита си, когато използвате Github. Той добавя няколко удобни клавишни комбинации, усъвършенства някои оформления и потребителски интерфейси, автоматично добавя връзка към проблеми и PR, и много повече.
Отворен WC
Open WC е набор от инструменти, които ви позволяват да създавате персонализиран уеб компонент. Тя включва основната библиотека за създаване на Web Component, Yeoman генератори за бързо генериране на “Отворен WC” проект, който включва скелето за тестване, linting, и продължава интеграцията.
Open WC може да бъде добра алтернатива, ако искате предпочитат реализация с родна уеб функция вместо да използва рамка като Vue.js или React.js.
Gridsome
Gridsome е a инструмент за изграждане на статични уеб сайтове и уеб приложения с Vue.js и GraphQL. Той е в състояние да се справи с множество потоци от данни, като например от CMS като WordPress и Drupal, локален файл като Markdown или Yaml, или външен API като AirTable и Contentful. Това е наистина чудесна алтернатива на Gatsby.js, особено ако предпочитате Vue.js над React.js.
Браузърът
Това е браузърът, представен от самия изобретател на World Wide Web, Тим Бърнърс-Лий. Това е прост браузър за изобразяване на HTML и не показва адресна лента като модерен браузър, но можете да прегледате, като се придвижите до Документ> Отваряне от пълния документ и поставете в URL и кликнете отворено. И там ще видите как сайтът ви ще се визуализира с оригиналния браузър.
растер
Raster е модерна рамка, изградена с модерни HTML и CSS спецификации като CSS грид, CSS персонализирана собственост (променлива) и персонализиран елемент. Перфектна рамка за тези, които обичат да живеят по ръбовете.
бъчвар
Компонент Vue.js за добавяне на въртележка или слайдер. Той е достъпен и използваем чрез Touch, Keyboard, Mouse Wheel и друга помощна навигация, поддържа RTL и вертикална посока, разширява се и разбира се.
