Nové zdroje pro webové designéry a vývojáře (březen 2019)

Ve světě vývoje webu se v posledních měsících stalo hodně. Za prvé, nové blokový editor, kódové označení Gutenberg, byl nakonec sloučen do WordPress 5.0. Je to opravdu velká změna od svého založení, protože vytváří nový základ pro vývoj WordPressu v budoucnu a změní způsob, jakým se vývojáři rozšíří o funkce WordPressu.

Za druhé, několik našich vývojářů vytvořilo několik opravdu užitečných nástrojů, jako je ten, který umožňuje zobrazit JSON v terminálu a několik knihoven React, které se mohou ukázat jako velká pomoc při tvorbě webových stránek a vývojových projektech.

A konečně, některé z nejúčinnějších zdroje, odkazy a pluginy byly spuštěny, aby vám pomohly aktualizovat vaše projekty podle novějších trendů.

Pojďme se dostat na nejobsáhlejší seznam čerstvých zdrojů rozvoje webu.

Gutenbergova příručka

Oficiální příručka WordPress, kde můžete vyhledat odkazy na design, příklady kódů pro vytváření bloků a další a návod, jak přispět k projektu. Je to vaše první reference pro vývoj s Gutenbergem.

Blokové lešení

S editorem založeným na blocích nyní WP-CLI poskytuje pohodlný způsob, jak začít vytvoření Gutenbergova bloku s novým příkazem CLI, wp lešení blok. Můžete jej vytvořit a zahrnout do stávajících pluginů a témat.

CGB

Dalším způsobem, jak snadno spustit Gutenbergův blok je Vytvořit Gutenův blok (CGB), je nástroj generovat varnou desku rozvíjet Gutenbergův blok. Skládá se z moderních nástrojů, jako jsou React.js, Webpack, ESLint, Babel, atd. Nejlepší je, že vy nemusíte konfigurovat žádný z těchto nástrojů takže se můžete jednoduše zaměřit na psaní kódu.

Elementor bloky pro Gutenberg

WordPress plugin, který vám umožní vložte všechny šablony Elementor a náhled je přímo v editoru. Plugin je dodáván s řadou dalších kompatibilit, které poskytují bezproblémové úpravy mezi Elementorem a Gutenbergem. Podívejte se na toto video a zjistěte, jak to dělá v akci.

Atomové bloky

Soubor bloků Gutenberg s rostoucím počtem sbírek. V době psaní tohoto článku poskytuje “Blok mřížky” který vám umožní přidat seznam příspěvků z vašeho webu v rozložení mřížky. K dispozici je také “Testimonial Block” které, jak název napovídá, vložit na stránku Testimonial. Podívejte se na úplné náhledy bloků na této stránce.

Galerie bloků

Blok Galerie, který je zajímavým blokem pro vložení galerie obrázků, umožňuje bezproblémové přidávání obrázků do příspěvku. Jednoduše odešlete své obrázky, styl zobrazení galerie (zednářský styl, kolotoč nebo celá obrazovka) a vše je nastaveno. Momentálně je to prostě nejlepší Galerie bloků pro WordPress.

CoBlocks

Sada bloků od stejného autora, který vyvinul výše uvedenou Galerii bloků, CoBlocks se skládá z několika bloků, které zvýší obsah vašich stránek, například Akordeon, cenová tabulka, Gif, Click-to-Tweet, a další Bloky, které mají být přidány.

StagBlocks

Další sada Gutenbergových bloků. Plugin přináší řadu zajímavých bloků, které by mnozí z vás ocenili. Obsahuje Stat Block, který umožňuje přizpůsobit statistiky v rámci vašich příspěvků a stránek. Webové stránky karty blok, který bude náhled stránky ve stylu karty. Kód Blok, který vykreslí kód se zvýrazněnou barvou.

Otter Blocks

Také, sbírka Gutenberg bloků takový jak “Blokovat Mapy Google” pro vložení mapy, “Náš servisní blok” na vložte seznam služeb pomocí tlačítka v zobrazení mřížky, a “Blok oblasti referencí” pro vložení seznamu referencí. Otter Block je sbírka Gutenbergových bloků, které by podniky a vývojář motivů ocenili.

Pokročilé Gutenbergovy bloky

Tento plugin je dodáván s hrstkou pokročilé Bloky pro obohacení vašeho obsahu například automaticky generovaný obsah, “Giphy bloky” zahrnout obrázek GIF z Giphy.com, “Unsplash Block” vkládat obrázky z Unsplash.com, “Blok reklamních bannerů”, WooCommerce “Blok tlačítka Add-to-Cart”, a mnohem více.

Blokovat laboratoř

Blok Lab usnadňuje vývojářům vytvořit Gutenbergův blok. Plugin vám umožní zaregistrovat nový blok s uživatelsky přívětivým GUI a šablony v PHP. Nemusíte se ani naučit React.js.

Bloky EDD

Plugin, který vám umožní vykreslit produkty Easy Digital Downloads v editoru Gutenberg. Na rozdíl od použití Shortcode, blok zobrazí zobrazení produktu.

Test Gutenberg

Není připraven nainstalovat plugin Gutenberg nebo aktualizovat vaše stránky na WordPress 5.0? Můžete jednoduše Načíst tento web vyzkoušet nový editor.

Gutenberg Cloud

Je to jako AppStore pro Gutenbergovy bloky. Centrální místo, kde se můžete dostat Gutenbergovy bloky, které lze použít ve WordPressu a Drupalu. Ano, Drupal také přijme editora Gutenberga pro jejich editora.

Gutenbergovy příklady

Github repository ukázek kódu vytvořit Gutenberg bloky. Zde najdete Nejjednodušší Blok na složitější příklad, jako například vytvořit “Blok receptů” , který nastavuje šablonu v editoru pro uživatele recept obsah. Dobrý odkaz pro ty, kteří dávají přednost poučení z reálných příkladů, spíše než textové knihy.

GutenbergJS

Pouze Gutenbergova verze JavaScriptu. Je k dispozici jako balíček NPM, který umožňuje integrovat Gutenberg do libovolné aplikace JavaScript.

Zakázat Gutenberg

Ačkoli Gutenberg přináší nové možnosti WordPressu, ale ne každý je na to připraven. Pokud vaše stávající stránky s Gutenbergem nefungují správně, můžete tento plugin nainstalovat. To vám umožní vypněte editor Gutenberg pro konkrétní příspěvky, typy příspěvků, role uživatelů, témata a také zakázat styly Gutenberg v frontendu.

Klasický editor

Alternativně si můžete nainstalovat tento plugin, takže si můžete udržovat aktualizované na WordPress 5.0 a zároveň používat starý klasický editor. Tento plugin bude podporován do roku 2022.

ClassicPress

Další alternativou je přepnout na vidlici WordPress, ClassicPress. Zaměřuje se na ClassicPress podniků, stability a bezpečnosti. Je kompatibilní s pluginy WordPress a plánuje přinést nové zajímavé funkce v jejich budoucích verzích. Podívejte se na náš post: ClassicPress: Alternativa k WordPress bez Gutenberg & React.js

Zrychlete WordPress

Jak WordPress stal se tak velký; více než jen blogovací platforma. Zvláště Gutenberg přidal na váš web nějaké další zátěže, kódy, soubory, které mohou váš web zpomalit. Jedná se o detail, který vám může pomoci identifikovat body bolesti na vašich stránkách a oslovit je nejnovějšími osvědčenými postupy v oboru.

Visual Studio Code Prohlížeč náhledu

Editor vizuálních kódů, který přidává skutečný prohlížeč podporovaný aplikací Chrome Headless uvnitř kódu Visual Studio. To vám umožní náhled vaší práce v reálném čase přímo v editoru kódu a umožňuje funkce, jako je ladění v editoru.

Bundlesize

Bundlesize je nástroj Udržujte svůj soubor JavaScript svazkování velikost. Můžete definovat maximální velikost každého ze svazkovaných souborů a upozorní vás na to, kdy se jedná o definovanou maximální velikost. Bundlesize může být integrována se službou CI, jako je TravisCI a CircleCI, pro bezproblémové nasazení pracovního postupu ve vašem projektu.

WP Emerge

Moderní WordPress téma rámec založený na MVC vzoru. Pokud jste zvyklí pracovat s frameworkem PHP jako Laravel a Slim, jsem si jist, že tento rámec opravdu oceníte. Můžete použít věci jako Router a Controller, DI Container a Middlerware.

Maják Bot

Nástroj, který umožňuje spustit Lighthouse ve službě CI pomocí Docker. Je to skvělý nástroj automatizujte kontrolu výkonu svých webových stránek při každém stisknutí nové změny kódu vaší webové stránky.

Learn React App

Learn React App je zdroj, který se může naučit React.js. Ale na rozdíl od jiných zdrojů tam, to by mělo být nainstalován lokálně v počítači. Obsahuje nejen učební materiály, ale také kódové a interaktivní vzorky. Nejlepší je, že to můžete udělat, když je offline nainstalován.

Přijetí WP

WP Acceptance je nový nástroj, který umožňuje provádět akceptační testy. Jednoduše řečeno, Acceptance Tests je série testuje chování uživatelů. Tam je množství rámců ven k provedení tohoto typu testu.

Nicméně, pokud primárně pracujete s WordPressem, oceníte tento nástroj pro snadné používání, protože je navržen a přizpůsoben typickým projektům WordPressu..

Lesklý

Knihovna JavaScript emulovat odraz světla na vašich webových stránkách při prohlížení na mobilním zařízení. Demo si můžete prohlédnout na adrese https://pqina.nl/shiny/. Stojí za zmínku, že bude fungovat pouze v mobilním zařízení, protože se spoléhá na určité rozhraní API, které je dostupné pouze v mobilních zařízeních.

Reagovat Lucid

ReactLucid je nástroj, který vám pomůže debug React a GraphQL aplikace interaktivnějším způsobem. Umožňuje vám zobrazit hierarchii komponent, změny stavu / rekvizit v aplikaci React, stejně jako schéma, dotazy a mutace v reálném čase..

Funkce CSS Přepíná

Rozšíření Chrome, které vám umožní zakázat určité funkce CSS v prohlížeči Chrome. S tímto můžete vidět, jak se vaše webové stránky budou vykreslovat a chovat se, když určité funkce neexistují. Poměrně užitečné pro implementaci nových funkcí CSS, které nemusí být implementovány ve všech prohlížečích.

Blendy

Nástroj, který vám může pomoci přizpůsobit režimy prolnutí CSS pozadí obrazem. Můžete zobrazit režimy prolnutí, změnit barvy a použít přechody. Můžete použít obrázky z Unsplash nebo nahrát z počítače.

Reagovat Elemental

Kolekce prvků React, které fungují ihned po vybalení z krabice. Žádné externí CSS importovat nebo upravovat konfigurace přidat na Webpack. Dodává se se základními komponenty, jako jsou tlačítka, zaškrtávací políčka, SelectList, karty, popisy nástrojů a mnohem více.

FX

Pokud často pracujete s formátem JSON, určitě oceníte tento nástroj. fx je nástroj příkazového řádku, který umožňuje vizualizovat data JSON v terminálu s interaktivním režimem. způsobem, že data můžete rozbalit nebo sbalit. fx lze instalovat přes NPM nebo Homebrew.

Monica

Monica je ve své vlastní kategorii. Je to druh CRM (Customer Relationship Manager), ale není určen pro vašeho zákazníka, ale pro vaše blízké, jako je vaše rodina a přátelé.

Stejně jako CRM vám umožňuje sledovat věci, jako jsou vaše aktivity s nimi, a když jste je naposledy volali atd. Ještě více, může být nastaven tak, aby vám připomínal, abyste zavolali na někoho, s kým jste nemluvili. Říkají tomu PRM (Personal Relationship Manager).

Iontový rámec

Iontový rámec byl už nějakou dobu kolem. Ale v poslední době, to udělal docela velký skok v jeho funkčnosti. Teď nejen, že je rychlejší, ale iónová je teď kompatibilní se dvěma rostoucími hvězdami: React.js a Vue.js.

Toto položí půdu pro Ionic být a rámcového agnostického nástroje. Takže nejen to, že funguje pro konkrétní rámce, ale může také pracovat s novými, protože vývoj frontendu se v budoucnu vyvíjí..

Pozoruhodný

Pozoruhodný je desktop-desktop aplikace. Na rozdíl od jiných podobných aplikací, není dodáván s vlastní formátování, WYSIWYG, nebo jiné typické zvonky a píšťalky. editor aplikace je hlavně poháněn Github-flavored Markdown. Poznámky jsou uloženy v plochém souboru .md soubory a přílohy. Prostě to funguje a je to jednoduché.

TipTap

TipTap je editor WYSIWYG postavený na vrcholu ProseMirror s Vue.js. Kromě zdědení několika funkcí od ProseMirror mimo krabici, jako je například úžasná podpora syntaxe Markdown, TipTap přináší několik moderních funkcí, jako je Menu Bubble, kde se nabídka formátování objeví při zvýraznění textu, funkce Suggestion, kde můžete označit nebo zmínit osoby v obsahu a exportovat schopnost exportovat obsah ve formátu JSON.

Restplain

Restplain je plugin WordPress, který vám umožní snadno generovat dokumentaci vašich koncových bodů API aplikace WordPress REST včetně vlastních koncových bodů na vašich stránkách a také volání API z dokumentů. Je třeba poznamenat, že generování dokumentace závisí na schématu koncového bodu, takže se ujistěte, že jste přidali správné schéma pro vlastní koncové body..

Reagovat Content Loader

Reagovat Content Loader je Vlastní komponenta React, která umožňuje zobrazit zástupný symbol obsahu při načítání skutečného obsahu. Je to podobné typu zavaděče, který vidíte na Facebooku a Instagramu .

Mýtické

Mythic je úvodní téma WordPressu s moderními osvědčenými postupy, jako je závislost injekcí, pohledů a řadičů, stejně jako moderní nástroje, jako je použití Webpack, Sass, Linting, PHP7 minimální požadavek a BEM. Je to skvělé téma, aby se vaše dovednosti jako vývojář tématu.

Rafinovaný Github

Rozšíření prohlížeče pro zdokonalení vašich zkušeností při používání Githubu. Přidává několik praktických klávesových zkratek, vylepšuje některá rozvržení a uživatelská rozhraní, automaticky přidává odkaz na problémy a PR a mnohem více.

Otevřené WC

Open WC je sada nástrojů, které umožňují vytvářet vlastní webovou komponentu. Obsahuje hlavní knihovnu pro vytvoření webové komponenty, Yeoman generátory rychle generovat “Otevřené WC” projektu, který zahrnuje lešení pro testování, obložení, a pokračuje v integraci.

Otevřené WC může být dobrou alternativou, pokud byste preferují implementaci pomocí nativního webového prvku místo použití rámce jako Vue.js nebo React.js.

Gridsome

Gridsome je a nástroj pro tvorbu statických webových stránek a webových aplikací pomocí Vue.js a GraphQL. Je schopen zpracovávat více datových toků, například z CMS, jako je WordPress a Drupal, lokální soubor jako Markdown nebo Yaml, nebo externí API jako AirTable a Contentful. Toto je opravdu skvělá alternativa k Gatsby.js, obzvláště jestliže preferují Vue.js přes React.js.

Prohlížeč

Toto je prohlížeč, jak si představoval sám vynálezce World Wide Web, Tim Berners-Lee. To je jednoduchý prohlížeč pro vykreslení HTML a nezobrazuje panel s adresou jako moderní prohlížeč, ale můžete si jej prohlédnout pomocí navigace Dokument> Otevřít z úplného odkazu na dokument a vložte adresu URL a klikněte otevřeno. A tam uvidíte, jak se vaše stránky vykreslí s původním prohlížečem.

Raster

Raster je moderní grid framework, který je postaven na moderních HTML a CSS specifikacích jako CSS Grid, CSS Custom Property (Variable) a custom element. Perfektní rámec pro ty, kteří rádi žijí na hranách.

Hooper

Komponenta Vue.js pro přidání karuselu nebo posuvníku. Je přístupný a použitelný prostřednictvím Touch, Keyboard, Mouse Wheel a další asistenční navigace, podporuje RTL a vertikální směr, rozšiřitelný a samozřejmě odezvu.