Čerstvé zdroje pre návrhárov webových stránok a vývojárov (marec 2019)

Veľa sa stalo v posledných mesiacoch vo svete vývoja webových aplikácií. Po prvé, nové blokový editor, s kódovým označením Gutenberg, bol nakoniec zlúčený do WordPress 5.0. Je to naozaj veľká zmena od svojho vzniku, pretože vytvára nový základ pre WordPress, ktorý sa bude vyvíjať v budúcnosti a zmení sa spôsob, akým sa vývojári rozšíria o funkcie WordPress.

Po druhé, niekoľko našich spolupracovníkov vytvorilo niektoré naozaj užitočné nástroje, ako to umožňuje zobraziť JSON v termináli a niekoľko knižníc React, ktoré sa môžu ukázať ako skvelá pomoc pri projektovaní webových stránok a vývojových projektoch.

A nakoniec, niektoré z najúčinnejších zdroje, referencie a pluginy ktoré vám pomôžu aktualizovať vaše projekty podľa nových trendov.

Poďme sa dostať na najkomplexnejší zoznam nových zdrojov rozvoja webu.

Gutenberg Handbook

Oficiálna príručka WordPress, kde môžete vyhľadať referencie pre dizajn, Príklady kódu pre vytváranie blokov a ďalšie a sprievodcu prispievaním k projektu. Je to vaša prvá referencia pre rozvoj s Gutenbergom.

Blokovanie lešenia

Vďaka editoru založenému na blokoch teraz WP-CLI poskytuje pohodlný spôsob, ako začať vytvorením bloku Gutenberg s novým príkazom CLI, wp lešenia. Môžete ju vytvoriť a zahrnúť do svojich existujúcich doplnkov a motívov.

CGB

Ďalším spôsobom, ako ľahko spustiť Gutenberg blok je Create Guten Block (CGB) je nástroj pre vytvorte štítok vytvoriť Gutenbergov blok. Skladá sa z moderných nástrojov ako sú React.js, Webpack, ESLint, Babel atď. Najlepšia časť je, že ste nemusíte nakonfigurovať žiadne z týchto nástrojov takže sa môžete jednoducho zamerať na písanie kódu.

Elementor Blocks pre Gutenberg

WordPress plugin, ktorý vám umožní vložte šablóny Elementor a prezerať ju priamo v editore. Plugin je dodávaný s mnohými ďalšími kompatibilnými funkciami bezproblémové spracovanie skúseností medzi Elementorom a Gutenberkom. Pozrite si toto video, aby ste zistili, ako to robí v akcii.

Atómové bloky

Súbor gutenbergských blokov s rastúcim počtom zbierok. V čase tohto písania poskytuje “Post Grid Blok” čo vám umožňuje pridať zoznam príspevkov na vašom webe v rozložení mriežky. Je tu tiež a “Svetelný blok” čo, ako to naznačuje názov, vložiť v rámci stránky svedectvo. Pozrite si úplné náhľady blokov na tejto stránke.

Blokovať Galériu

Pútavý blok na vkladanie obrázkovej galérie, Block Gallery poskytuje bezproblémový zážitok pri pridávaní obrázkov do vášho príspevku. Jednoducho pusťte svoje obrázky, štýl zobrazenia galérie (murivo-štýl, karusel alebo celá obrazovka), a to je všetko nastavené. V súčasnosti je to jednoducho najlepší blok Galérie pre WordPress.

CoBlocks

Súbor blokov od toho istého autora, ktorý vyvinul vyššie uvedenú blokovú galériu, tvorí CoBlocks niekoľko blokov, ktoré zlepšia obsah vášho webu, napríklad Akordeón, Cenová tabuľka, Gif, Click-to-Tweet, a ďalšie bloky, ktoré sa majú pridať.

StagBlocks

Ďalšia sada gutenbergských blokov. Plugin prináša množstvo zaujímavých blokov, ktoré si mnohí z vás ocenia. Obsahuje Stat Block, ktorý vám umožňuje prispôsobiť štatistiky vo vašich príspevkoch a stránkach. Blok webových kariet, ktorý bude ukážka stránky v štýle Card-štýlu. Kódový blok, ktorý vykreslí kód so zvýraznenou farbou.

Otter Blocks

Tiež kolekcia gutenbergských blokov, ako je “Bloky Máp Google” pre vloženie mapy, “Náš servisný blok” na vložte zoznam služieb pomocou tlačidla v zobrazení mriežky, a “Osvedčenia Area Blok” vložiť zoznam svedkov. Otter Block je kolekcia gutenbergských blokov, ktoré by podnikatelia a vývojári témy ocenili.

Rozšírené Gutenbergove bloky

Tento doplnok obsahuje niekoľko rozšírené bloky na obohatenie vášho obsahu ako napríklad automaticky generovaný obsah, “Giphy Bloky” zahrnúť obrázok GIF od spoločnosti Giphy.com, “Blok pre odblokovanie” vložiť obrázky z Unsplash.com, “Bannerová bloková reklama”, WooCommerce “Blok tlačidla Pridať do košíka”, a oveľa viac.

Blokovať laboratórium

Block Lab uľahčuje vývojárom vytvorenie Gutenbergovho bloku. Plugin vám umožňuje zaregistrovať nový blok pomocou užívateľsky príjemného grafického rozhrania a šablóny v PHP. Nemusíte sa ani učiť React.js.

EDD Blocks

Plug-in, ktorý vám umožňuje vykresliť produkty Easy Digital Downloads v Gutenbergovom editore. Na rozdiel od používania Shortcode sa v bloku zobrazia zobrazenia produktu.

Test Gutenberg

Nie ste pripravení nainštalovať Gutenberg plugin alebo aktualizovať svoje stránky na WordPress 5.0? Môžete to jednoducho načítajte túto stránku a vyskúšajte nový editor.

Gutenberg Cloud

Je to ako AppStore pre Gutenberg Blocks. Centrálne miesto, kde sa môžete dostať Gutenberg Blocks, ktoré môžu byť použité v aplikáciách WordPress a Drupal. Áno, Drupal bude tiež prijímať Gutenbergov editor pre ich editora.

Príklady Gutenberg

Github úložisko vzoriek kódu na vytvorenie Gutenbergových blokov. Tu môžete nájsť najjednoduchšie Zablokujte komplexnejší príklad, ako napríklad vytvoriť “Recept Blok” ktorý nastavuje šablónu v editore, ktorý majú používatelia pridávať recept Obsah. Dobrý odkaz pre tých, ktorí sa radšej učia z reálnych príkladov, a nie ako učebnice.

GutenbergJS

Verzia programu Gutenberg iba pre jazyk JavaScript. Je k dispozícii ako balík NPM, ktorý vám umožňuje integrovať Gutenberg do ľubovoľnej aplikácie JavaScriptu.

Zakážte Gutenberg

Hoci Gutenberg prináša nové možnosti do WordPress, ale nie všetci sú pripravení na to. Ak vaše existujúce stránky nefungujú správne s Gutenbergom, môžete nainštalovať tento doplnok. Umožňuje to zakázať editor Gutenberg pre konkrétne príspevky, typy príspevkov, používateľské role, témy, ako aj vypnutie štýlov Gutenberg v prednej časti.

Klasický editor

Prípadne môžete nainštalovať tento doplnok, aby ste mohli aktualizovať program WordPress 5.0, pričom budete stále používať starý klasický editor. Tento doplnok bude podporovaný do roku 2022.

ClassicPress

Ďalšou alternatívou je prepnutie na vidlicu WordPress, ClassicPress. Zaostrené funkcie ClassicPress sú zapnuté podnikov, stability a bezpečnosti. Je kompatibilný s doplnkami WordPress a plánuje priniesť nové zaujímavé funkcie do svojich budúcich verzií. Odhláste náš príspevok: ClassicPress: Alternatíva k WordPress bez Gutenberg & React.js

Speed-up WordPress

Ako sa WordPress stal tak veľkým; viac než len blogovacia platforma. Najmä Gutenberg pridal na vaše stránky niekoľko ďalších záťaží, kódov a súborov, ktoré môžu spomaliť vaše stránky. Toto je detail, ktorý môžete spomenúť, aby ste pomohli identifikovať bolestivé miesta na vašich stránkach a osloviť ich najnovšie najlepšie postupy v tomto odvetví.

Ukážka prehliadača kódov Visual Studio

Editor Visual Code, ktorý pridáva skutočný prehliadač poháňaný aplikáciou Chrome Headless v rámci kódu Visual Studio. To vám umožní ukážte svoju prácu v reálnom čase priamo v editore kódov a umožňuje funkcie, ako je napríklad ladenie editora.

Bundlesize

Bundlesize je nástroj pre Udržujte svoj súbor JavaScript zväzovanie Veľkosť zaškrtnutá. Môžete definovať maximálnu veľkosť každého z balíčkov súboru a upozorní vás, keď ide o definovanú maximálnu veľkosť alebo ju prejde. Bundlesize je možné integrovať do služby CI ako TravisCI a CircleCI pre bezproblémové nasadenie workflow vo vašom projekte.

WP Emerge

Moderný WordPress tematický rámec založený na modeli MVC. Ak ste zvyknutí pracovať s rámcami PHP, ako sú Laravel a Slim, som si istý, že tento rámec skutočne oceniate. Môžete použiť veci ako Router a Controller, DI Container a Middlerware.

Maják Bot

Užitočný nástroj, ktorý vám umožňuje spustiť Lighthouse v službe CI pomocou Docker. Je to skvelý nástroj automatizujte kontrolu výkonnosti webových stránok zakaždým, keď stlačíte novú zmenu kódu svojho webu.

Naučte aplikáciu Reakt

Aplikácia Learn React je zdroj na naučenie React.js. Ale na rozdiel od iných zdrojov tam by to malo byť lokálne nainštalované v počítači. Obsahuje nielen učebné materiály, ale aj kódy a interaktívne vzorky. Najlepšie je, že to môžete urobiť aj offline, akonáhle je nainštalovaný.

WP Acceptance

WP Acceptance je nový nástroj, ktorý vám umožňuje vykonávať akceptačné testy. Jednoducho povedané, akceptačné testy sú sériou testy na napodobnenie správania používateľa. Existuje celý rad rámcov na vykonanie tohto typu testu.

Avšak, ak pracujete predovšetkým s WordPress, oceníte tento nástroj pre jednoduché používanie, pretože je navrhnutý a prispôsobený typickým projektom WordPress.

lesklý

Knižnica JavaScript emulujte odraz svetla na vašich webových stránkach pri pohľade na mobilné zariadenie. Demo môžete zobraziť na adrese https://pqina.nl/shiny/. Stojí za zmienku, že bude fungovať len v mobilnom zariadení, pretože sa spolieha na určité rozhranie API, ktoré je k dispozícii iba v mobilných zariadeniach.

Reagujte na Lucid

ReactLucid je nástroj, ktorý vám pomôže ladiace aplikácie React a GraphQL interaktívnejším spôsobom. Umožňuje zobraziť hierarchiu komponentov, zmeny stavu / rekvizít v rámci vašej aplikácie React, ako aj schému GraphQL, dotazy a mutácie v reálnom čase.

Funkcie CSS Prepnúť

Rozšírenie prehliadača Chrome, ktoré vám umožňuje zakázať určité funkcie služby CSS v prehliadači Chrome. Týmto spôsobom môžete vidieť, ako bude vaša webová stránka vykresľovať a správať sa, keď určité funkcie neexistujú. Pomerne užitočné, ktoré vám pomôžu implementovať nové funkcie CSS, ktoré nemusia byť implementované vo všetkých prehliadačoch.

blend

Nástroj, ktorý vám môže pomôcť prispôsobte režimy kombinácie pozadia CSS s vašim obrázkom. Môžete si prezrieť režimy miešania, meniť farby a aplikovať gradienty. Môžete použiť obrázky z programu Unsplash alebo ich odovzdať z počítača.

Reagujte Elemental

Zbierka prvkov React, ktoré fungujú priamo mimo škatuľky. Žiadne externé CSS na importovanie alebo prispôsobenie konfigurácií na pridanie do Webpacku. Dodáva sa s najdôležitejšími komponentmi, ako sú tlačidlo, políčko Checkbox, SelectList, záložky, popiska a mnoho ďalších.

FX

Ak sa často zaoberáte formátovaním JSON, určite oceníte tento nástroj. fx je a nástroj príkazového riadku, ktorý vám umožňuje vizualizovať údaje JSON v termináli s interaktívnym režimom. takým spôsobom, že môžete údaje rozbaliť alebo zbaliť. fx môže byť nainštalovaný cez NPM alebo Homebrew.

Monica

Monica je úplne na vlastnej kategórii. Je to druh CRM (Customer Relationship Manager), ale nie je určený pre vášho zákazníka, ale pre svojich blízkych ako je vaša rodina a priatelia.

Podobne ako CRM vám umožňuje sledovať veci, ako sú vaše aktivity s nimi, a keď ste ich naposledy nazvali atď. A ešte viac, môže byť nastavené tak, aby vám pripomenul zavolať niekomu, s kým ste sa s niekým rozprávajú. Hovorí to PRM (Personal Relationship Manager).

Iónový rámec

Iónová štruktúra bola na chvíľu vzdialená. Ale v poslednej dobe to urobilo docela veľký skok v jeho funkčnosti. Teraz nie je len to, že je rýchlejšie, ale teraz je ionizmus kompatibilný s dvoma rastúcimi hviezdicovými rámcami: React.js a Vue.js.

To vytvára základ pre iontové, aby boli a rámcový agnostický nástroj. Takže nielen to, že funguje pre konkrétne rámce, ale môže pracovať aj s novými, pretože vývoj vpredu sa vyvíja v budúcnosti.

pozoruhodný

Pozoruhodná je aplikácia na vytváranie poznámok. Na rozdiel od inej podobnej aplikácie nie je k dispozícii vlastné formátovanie, WYSIWYG alebo iné typické zvončeky a píšťaly. Editor aplikácií je hlavne napájaný značkovačom Githubom. Poznámky sú uložené v plochom súbore .md ako aj prílohu. Jednoducho to funguje.

TipTap

TipTap je WYSIWYG editor postavený na vrchole ProseMirror s Vue.js. Okrem toho, že zdieľa niekoľko funkcií z ProseMirror mimo škatuľky, ako napríklad úžasná podpora syntaktickej značky Markdown, TipTap prináša niekoľko moderných funkcií, akými sú napríklad bubliny v ponuke, kde sa pri formátovaní zvýrazní ponuka formátovania, funkcia Návrh, kde môžete označiť alebo spomenúť osoba v rámci obsahu a exportovať schopnosť exportovať obsah vo formáte JSON.

Restplain

Restlein je doplnok WordPress, ktorý vám umožňuje ľahko vytvárať dokumentáciu vašich koncových bodov API WordPress REST vrátane vlastných koncových bodov na vašich stránkach, rovnako ako uskutočnenie volania API z dokumentov. Treba poznamenať, že na vygenerovanie dokumentácie sa spolieha na schému koncového bodu, preto sa uistite, že ste pridali správnu schému pre vlastné koncové body.

Reagovať obsah Loader

Reagovať obsah Loader je vlastná súčasť React, ktorá vám umožňuje zobraziť zástupný symbol obsahu počas načítania aktuálneho obsahu. Je to podobné ako nakladač, ktorý vidíte na Facebooku a Instagram .

Mythic

Mythic je WordPress štartovacia téma s najnovšími najlepšími postupmi, ako je Dependency Injection, Views a Controllers, rovnako ako moderné nástroje ako je použitie Webpack, Sass, Linting, PHP7 minimálna požiadavka a BEM. Je to skvelá tému, aby ste zvýšili svoje zručnosti ako tvorca motívov.

Rafinovaný Github

Rozšírenie prehliadača, pomocou ktorého môžete zdokonaliť svoje skúsenosti pri používaní služby Github. Pridá niekoľko klávesových skratiek, upravuje niektoré rozloženia a používateľské rozhrania, automaticky pridá odkaz na problémy a PR a oveľa viac.

Otvorené WC

Otvorené WC je sada nástrojov, ktoré umožňujú vytvárať vlastné webové komponenty. Obsahuje hlavnú knižnicu na vytvorenie komponentov Web Component, Yeoman, ktoré rýchlo generujú “Otvorené WC” projekt, ktorý zahŕňa lešenie pre testovanie, nepĺzne, a pokračuje v integrácii.

Otvorené WC môže byť dobrou alternatívou uprednostňuje implementáciu s natívnou webovou funkciou skôr ako pomocou rámca ako Vue.js alebo React.js.

Gridsome

Gridsome je a nástroj na vytváranie statických webových stránok a webových aplikácií pomocou Vue.js a GraphQL. Je schopný zvládnuť viaceré dátové toky, napríklad z CMS, ako sú WordPress a Drupal, lokálny súbor ako Markdown alebo Yaml alebo externé API ako AirTable a Contentful. Toto je naozaj skvelá alternatíva k Gatsby.js, najmä ak preferujete Vue.js cez React.js.

Prehliadač

Toto je prehliadač, ako to predpokladá vynálezca World Wide Web sám, Tim Berners-Lee. Je to jednoduchý prehliadač na vykreslenie HTML a nezobrazuje panel s adresou ako moderný prehliadač, ale môžete si prezrieť navigáciou na Dokument> Otvoriť z úplného odkazu na doklad a vložte do adresy URL a kliknite na tlačidlo Otvorené. A tu uvidíte, ako bude vaša stránka zobrazovať s pôvodným prehliadačom.

raster

Raster je moderný rámec mriežky, ktorý je postavený s modernými špecifikáciami HTML a CSS, ako je CSS Grid, vlastná vlastnosť CSS (variabilná) a vlastný prvok. Perfektný rámec pre tých, ktorí chcú žiť na okraji.

Hooper

Komponent Vue.js na pridanie karuselu alebo posuvníka. Je prístupná a použiteľná prostredníctvom dotyku, klávesnice, myši a ďalších pomocných navigácií, podporuje RTL a vertikálny smer, rozširujúce sa a samozrejme odpoveď.