Friss források a webes tervezők és fejlesztők számára (2019. március)

Sokat történt az elmúlt hónapokban a webfejlesztés világában. Először is az új blokk-alapú szerkesztő, Gutenberg, végül beolvadt a WordPress 5.0-ba. Ez egy igazán nagy változás a kezdetektől fogva, mivel új alapot teremt a WordPress számára, hogy a jövőben fejlődjön, és megváltoztatja a fejlesztők WordPress funkcióira való kiterjesztésének módját.

Másodszor, néhány fejlesztőnk néhány olyan hasznos eszközt hozott létre, amely lehetővé teszi Nézd meg a JSON-t a terminálban és néhány React könyvtár, amely nagy segítséget jelenthet a webes tervezési és fejlesztési projektekben.

És végül, néhány a leghatékonyabb erőforrások, hivatkozások és bővítmények elindították a projektek frissítését az újabb trendek szerint.

Töltsük fel a legmodernebb frissítési források listáját.

Gutenberg kézikönyv

A hivatalos WordPress kézikönyv, amelyen hivatkozásokat találhat a designra, kód példák blokkok létrehozásához és mások és egy útmutató a projekthez való hozzájárulás érdekében. Ez az első referencia a Gutenberg-szel való fejlesztéshez.

Blokk állvány

A blokk-alapú szerkesztővel a WP-CLI most kényelmes módot kínál a kezdéshez Gutenberg blokk létrehozása egy új CLI paranccsal, wp állványblokk. Létrehozhatja és hozzáadhatja a meglévő bővítményekhez és témákhoz.

CGB

Egy másik módja annak, hogy könnyen elindíthassuk a Gutenberg blokkot a Create Guten Block (CGB) eszköz generál egy kazánlapot Gutenberg blokk kialakítása. Modern eszközökből áll, mint például a React.js, a Webpack, az ESLint, a Babel, stb. nem kell ezeket az eszközöket konfigurálni így egyszerűen összpontosíthat a kód írására.

Elementor blokkok Gutenberg számára

A WordPress bővítmény, amely lehetővé teszi illessze be az Elementor sablonokat és szerkessze azt a szerkesztőben. A bővítmény számos más kompatibilitással is rendelkezik zökkenőmentes szerkesztési élmény Elementor és Gutenberg között. Nézze meg ezt a videót, hogy megtudja, hogyan működik a műveletben.

Atomblokkok

Egy sor Gutenberg blokkok egyre több gyűjtemény. Ennek az írásnak az időpontjában az “Hálózati blokk” amely lehetővé teszi adjon hozzá egy listát a webhelyének hozzászólásaihoz rács elrendezésben. Van még egy “Testimonial Block” amely - ahogyan azt a neve is jelzi - egy beszámoló beillesztése az oldalon. Nézze meg a Blokkok teljes előnézetét ezen az oldalon.

Blokk Galéria

A képgaléria beillesztésének szemet gyönyörködtető blokkja, a Blokk Galéria zökkenőmentes élményt nyújt képei hozzáadásához a bejegyzéséhez. Egyszerűen törölje a képeket, stílusolja meg a galéria megjelenítését (kőműves stílus, karusszel vagy teljes képernyős), és ez minden beállítva. Jelenleg a WordPress számára a legjobb Galéria blokk.

CoBlocks

Egy ugyanabból a szerzőből származó blokkcsomag, amely a fent említett Blokk Galériát fejlesztette ki, a CoBlocks számos blokkból áll, amelyek javítják a webhely tartalmát, például Korrózió, árképzési táblázat, Gif, kattintás-to-Tweet, és még több blokkot kell hozzáadni.

StagBlocks

A Gutenberg-blokkok egy másik csomagja. A plugin számos érdekes blokkot hoz, amelyeket sokan értékelnének. Ez magában foglalja a Stat blokkot, amely lehetővé teszi a statisztikák testreszabását az üzenetek és az oldalakon. Honlapkártya blokk, amely majd előnézeti weboldalt képzeletbeli kártya-stílusban. Kódblokk, amely kiemelt színnel jelzi a kódot.

Felső blokkok

A Gutenberg blokkok gyűjteménye, mint például a “Google Térkép blokk” térkép beillesztéséhez, “Szolgáltatásblokkunk” nak nek a szolgáltatások listájának beillesztése egy rácsnézetből álló gomb segítségével, és “Ajánlások Területi blokk” az ajánlások listájának beillesztése. Az Otter Block a Gutenberg-blokkok gyűjteménye, amelyet a vállalkozások és a témafejlesztő értékelnének.

Fejlett Gutenberg blokkok

Ez a bővítmény egy maroknyi fejlett blokkok a tartalom gazdagításához például az automatikus generált tartalomjegyzék, “Giphy blokkok” a GIF-képet Giphy.com-ból, “Unsplash blokk” képek beillesztése az Unsplash.com webhelyről, “Banner hirdetés blokk”, WooCommerce “Add-to-Cart gombblokk”, és még sok más.

Blokklaboratórium

A Block Lab megkönnyíti a fejlesztők számára a Gutenberg blokk létrehozását. A bővítmény lehetővé teszi regisztráljon egy új blokkot egy felhasználóbarát GUI-val és sablonok PHP-ben. Nem kell még megtanulnia a React.js-t.

EDD blokkok

Olyan bővítmény, amely lehetővé teszi az Easy Digital Downloads termékek megjelenítését a Gutenberg-szerkesztőben. A rövid kódtól eltérően a blokk a termék nézeteket jeleníti meg.

Teszt Gutenberg

Nem áll készen a Gutenberg plugin telepítésére, vagy a webhely frissítésére a WordPress 5.0-ra? Egyszerűen töltse be ezt az oldalt, hogy kipróbálja az új szerkesztőt.

Gutenberg felhő

Olyan, mint egy AppStore a Gutenberg blokkokhoz. Egy központi hely, ahol lehet A WordPress és a Drupal programban használható Gutenberg blokkok. Igen, Drupal is elfogadja a Gutenberg-szerkesztőt a szerkesztőknek.

Gutenberg példák

Gutub-kódot tartalmazó Github-tároló a Gutenberg-blokkok létrehozásához. Itt megtalálhatja a legegyszerűbb blokk egy összetettebb példához, például az a, amelyik a “Receptblokk” amely egy sablont állít be a szerkesztőben a felhasználók számára recept tartalom. Jó referencia azok számára, akik inkább a valódi példákból tanulnak, mint a tankönyvből.

GutenbergJS

A csak Gutenberg JavaScript-verziója. Ez NPM csomagként érhető el, amely lehetővé teszi a Gutenberg integrálását bármelyik JavaScript alkalmazásába.

Gutenberg letiltása

Bár Gutenberg új lehetőségeket kínál a WordPress számára, de nem mindenki készen áll rá. Ha a meglévő webhelyek nem működnek jól a Gutenberg-szel, akkor telepítheti ezt a bővítményt. Ez lehetővé teszi tiltsa le a Gutenberg-szerkesztőt bizonyos bejegyzések, bejegyzés típusok, felhasználói szerepek, témák, valamint a Gutenberg stíluslapok letiltása az előlapon.

Klasszikus szerkesztő

Másik lehetőségként telepítheti ezt a bővítményt, így frissítheti a WordPress 5.0-t, miközben továbbra is használja a régi klasszikus szerkesztőt. Ezt a bővítményt 2022-ig támogatják.

ClassicPress

Egy másik alternatíva, hogy átváltson egy WordPress villára, a ClassicPress. A ClassicPress fókuszok be vannak kapcsolva vállalkozások, stabilitás és biztonság. Ez kompatibilis a WordPress bővítményekkel, és új érdekes funkciókat tervez a jövőbeli kiadásaiban. Távozás: ClassicPress: A WordPress alternatívája Gutenberg & React.js nélkül

A WordPress felgyorsítása

Mivel a WordPress olyan nagy lett; több, mint egy blogolási platform. Különösen a Gutenberg hozzáadott néhány extra terhelést, kódot, fájlt a webhelyéhez, ami lelassíthatja webhelyét. Ez egy olyan részlet, amelyre hivatkozhat, hogy segítsen azonosítani a webhelyén található fájdalompontokat és kezelni a legújabb legjobb gyakorlatokat az iparágban.

Visual Studio kódböngésző előnézete

Egy Visual Code szerkesztő, amely valódi böngészővel bővíti a Chrome Headless-et a Visual Studio kódban. Ez lehetővé teszi előnézeti munkáját valós időben közvetlenül a kódszerkesztő belsejében, és lehetővé teszi az olyan funkciókat, mint a szerkesztő hibakeresése.

Bundlesize

A Bundlesize egy eszköz tartsa meg a JavaScript-fájlt árukapcsolás méretben. Megadhatja a csomagban lévő összes fájl maximális méretét, és figyelmezteti Önt, ha a megadott maximális méretről van szó. A Bundlesize integrálható egy olyan CI szolgáltatással, mint a TravisCI és a CircleCI a munkafolyamat zökkenőmentes telepítéséhez a projektben.

WP Emerge

A modern WordPress téma keretrendszer az MVC minta alapján. Ha megszoktál egy olyan PHP keretrendszerrel dolgozni, mint Laravel és Slim, biztos vagyok benne, hogy igazán értékelni fogja ezt a keretet. Használhat olyanokat, mint a Router és a Controller, a DI Container és a Middlerware.

Bot világítótorony

Olyan segédeszköz, amely lehetővé teszi, hogy a Lighthouse-t futtassa a CI szolgáltatásban a Docker segítségével. Ez egy nagyszerű eszköz automatizálja a webhely teljesítményének ellenőrzését minden alkalommal, amikor új változtatást hajt végre a webhely kódjához.

Ismerje meg az React alkalmazást

Ismerje meg a React alkalmazást. De ellentétben a többi erőforrással, ez kell lennie telepítve van a számítógépen. Nemcsak tanulási anyagokat tartalmaz, hanem kódol és interaktív mintákat is tartalmaz. A legjobb rész az, hogy offline állapotban tudod csinálni, ha telepítve van.

WP elfogadása

A WP Acceptance új eszköz, amely lehetővé teszi az elfogadási tesztek elvégzését. Egyszerűen fogalmazva, az Elfogadási tesztek sorozata tesztek a felhasználói viselkedés utánzására. Számos keretrendszer létezik az ilyen típusú tesztek elvégzésére.

Ha azonban elsősorban a WordPress-szel dolgozik, akkor értékelni fogja ezt az eszközt a könnyű használatért, mivel azt a tipikus WordPress projektekhez tervezték és testre szabják..

Fényes

A JavaScript könyvtár a mobileszközön történő megtekintéskor emulálja a világítási gondolkodást a webhelyén. A demót a https://pqina.nl/shiny/ címen tekintheti meg. Érdemes megjegyezni, hogy csak mobilkészülékben fog működni, mivel egy olyan API-ra támaszkodik, amely csak egy mobileszközökön érhető el.

Reagál Lucid

A ReactLucid egy eszköz, amely segít debug React és GraphQL alkalmazások interaktívabb módon. Lehetővé teszi, hogy a React alkalmazáson belül láthassa az összetevő hierarchiáját, az állapot / javítások változásait, valamint a valós idejű GraphQL sémát, lekérdezéseket és mutációkat.

CSS funkciók Váltás

Egy Chrome-kiterjesztés, amely lehetővé teszi bizonyos CSS-funkciók letiltása a Chrome-on. Ezzel láthatja, hogy a webhely hogyan fog megjelenni és viselkedni fog, ha bizonyos funkciók nem léteznek. Elég hasznos, hogy segítsen új CSS-funkciók megvalósításában, amelyek nem minden böngészőben megvalósíthatók.

Blendy

Egy eszköz, amely segít testreszabhatja a CSS háttérmódokat a képpel. Előnézetben megtekintheti a keverési módokat, módosíthatja a színeket és a színátmeneteket. Használhatja az Unsplash képeit, vagy töltheti fel a számítógépről.

Reagál Elemental

React elemek gyűjteménye, amelyek közvetlenül a dobozból működnek. Nincs külső CSS a Webpack-hoz hozzáadandó konfigurációk importálásához vagy testreszabásához. Jellemzőkkel rendelkezik, mint a gomb, a jelölőnégyzet, a SelectList, a Tabs, a Tooltip, és még sok más.

FX

Ha gyakran foglalkozik a JSON formázással, biztos vagyok benne, hogy értékelni fogja ezt az eszközt. fx egy parancssori eszköz, amely lehetővé teszi a JSON adatok megjelenítését a terminálon interaktív módban. oly módon, hogy kiterjeszthesse vagy összecsukja az adatokat. fx az NPM vagy a Homebrew segítségével telepíthető.

Monica

Monica teljesen saját kategóriájába tartozik. Ez egyfajta CRM (Ügyfélkapcsolat-kezelő), de nem az Ön ügyfele, hanem a szeretteit, mint a családját és barátait jelenti..

A CRM-hez hasonlóan lehetővé teszi, hogy nyomon követhesse azokat a dolgokat, mint a tevékenysége velük, és amikor utoljára hívták őket stb. Még több, beállítható arra, hogy emlékeztesse Önt arra, hogy valakit hívjon, akivel egy ideig nem beszélt. PRM-nek hívják (Personal Relationship Manager).

Ionikus keretrendszer

Az ionos keretrendszer valójában már egy ideje van. De az utóbbi időben igen nagy ugrást ért el a funkcionalitásában. Most már nem csak, hogy gyorsabb, de most már az Ionic kompatibilis két emelkedő csillagkerettel: React.js és Vue.js.

Ez megteremti a földet, hogy az ionos legyen a keret agnosztikus eszköz. Tehát nem csak az, hogy bizonyos keretrendszereken működik, hanem az újokkal is együtt dolgozhat, mivel a front-end fejlesztés a jövőben fejlődik.

Jelentős

A figyelemre méltó egy jegyzetfüzet alkalmazás. A többi hasonló alkalmazással ellentétben nem rendelkezik saját formázással, WYSIWYG-vel vagy más tipikus harangokkal és sípokkal. A Az alkalmazásszerkesztő főként a Github-ízű Markdown. A jegyzeteket egy lapos fájlban tárolja .md fájlokat, valamint a mellékletet. Csak működik és egyszerű.

TipTap

A TipTap egy WYSIWYG szerkesztő, amelyet a ProseMirror tetején építettek a Vue.js. Amellett, hogy a ProseMirror-ról számos funkciót örököl a dobozból, mint például a félelmetes Markdown szintaxis-támogatás, a TipTap néhány olyan modern funkciót hoz létre, mint például a Menu Bubble, ahol a formázás menü jelenik meg a szöveg kiemelésénél, a Javaslat funkció, ahol a javaslatok funkciója jelölhető vagy említhető egy személy a tartalomban, és exportálja a a JSON formátumban lévő tartalom exportálásának képessége.

Restplain

A Restplain egy WordPress plugin, amely lehetővé teszi a WordPress REST API végpontjainak könnyen dokumentálását, beleértve a webhelyén szereplő egyéni végpontokat, valamint API-hívás kezdeményezése a dokumentumokból. Megjegyzendő, hogy a dokumentáció létrehozásához a végpont sémára támaszkodik, ezért győződjön meg róla, hogy megfelelő sémát adott hozzá az egyéni végpontokhoz.

Reagáljon a tartalom betöltőre

Reagáljon a tartalom betöltőre egy React egyéni összetevő, amely lehetővé teszi a tartalmi helyőrző megjelenítését a tényleges tartalom betöltésekor. Ez hasonlít a Facebookon és Instagramon látható betöltő típusához .

Mythic

A mitikus a WordPress starter témája, a modern bevált gyakorlatokkal, mint például a függőségi befecskendezés, a nézetek és a vezérlők, valamint a korszerű szerszámok, mint pl. Webpack, Sass, Linting, PHP7 minimumkövetelmény, és a BEM. Ez egy nagyszerű téma, hogy felkészítse a készségeket témakör-fejlesztőként.

Finomított Github

A böngészőbővítmény a Github használatával kapcsolatos tapasztalatok finomítására. Több praktikus gyorsbillentyűt ad hozzá, finomítja néhány elrendezést és felhasználói felületet, automatikusan hozzáadja a problémákat és PR-ket, és még sok más.

Nyitott WC

A nyitott WC egy olyan eszközkészlet, amely lehetővé teszi az egyéni webes összetevők létrehozását. Ez magában foglalja a főkönyvtárat is, hogy létrehozzon egy Web Component, Yeoman generátort, hogy gyorsan generáljon egy “Nyitott WC” projekt, amely magában foglalja a vizsgálati állványt, bolyhosodé, és folytatja az integrációt.

A nyitott WC jó alternatíva lehet, ha szeretné előnyben részesíti a natív webes szolgáltatással való végrehajtást inkább a Vue.js vagy a React.js-hoz hasonló keretrendszer használata helyett.

Gridsome

A rácsos a eszköz statikus webhelyek és webalkalmazások létrehozásához a Vue.js és a GraphQL segítségével. Több adatfolyamot képes kezelni, például a CMS-től, mint a WordPress és a Drupal, a helyi fájl, mint például a Markdown vagy a Yaml, vagy külső API, mint az AirTable és a Contentful. Ez egy igazán nagyszerű alternatíva a Gatsby.js-ra, különösen, ha inkább Vue.js-t szeretne React.js felett.

A böngésző

Ez a böngésző, amit maga a World Wide Web feltaláló látott el, Tim Berners-Lee. Ez egy egyszerű böngésző a HTML megjelenítéséhez és nem jelenít meg olyan címsort, mint egy modern böngésző, de megtekintheti a navigációt Dokumentum> Nyissa meg a teljes dokumentum hivatkozást és beilleszt egy URL-be, és kattintson a gombra Nyisd ki. És látni fogja, hogy webhelye hogyan fog megjelenni az eredeti böngészővel.

Raster

A raszter egy modern rácskeret, amely modern HTML és CSS specifikációkkal épül fel, mint például a CSS Grid, a CSS Custom Property (Variable) és az egyéni elem. Tökéletes keret azok számára, akik élnek a széleken.

Bodnár

A Vue.js összetevő egy karusszel vagy csúszka hozzáadásához. Ez elérhető és használható a Touch, billentyűzet, egérkerék és egyéb segítő navigáció segítségével, támogatja az RTL és a függőleges irányt, kiterjeszthető és természetesen válaszol.