Uued ressursid veebidisaineritele ja arendajatele (märts 2019)

Veebiarenduse maailmas on viimastel kuudel palju juhtunud. Esiteks, uus plokkipõhine redaktor, koodnimega Gutenberg, on lõpuks ühendatud WordPress 5.0-ga. See on tõesti suur muutus alates selle loomisest, sest see loob uue aluse WordPressile, et see tulevikus areneda ja muudab viisi, kuidas arendajad WordPressi funktsioonidele laienevad.

Teiseks, mõned meie kaastöötajad on loonud mõned tõesti kasulikud vahendid, näiteks need, mis lubavad vaata JSON terminali ja paar React'i raamatukogu, mis võivad osutuda suureks abiks veebidisaini- ja arendusprojektides.

Ja lõpuks, mõned kõige tõhusamad ressursid, viited ja pluginad on käivitatud, et aidata teil uuendada oma projekte vastavalt uuematele suundumustele.

Let's get kõige põhjalikum loetelu värske veebiarenduse ressursse.

Gutenbergi käsiraamat

Ametlik WordPressi käsiraamat, kus saate otsida viiteid disainile, koodide näited plokkide loomiseks ja teised projektis osalemise juhend. See on teie esimene viide Gutenbergi arendamiseks.

Tellingute blokeerimine

Plokipõhise redaktoriga pakub WP-CLI nüüd mugavat alustamist Gutenbergi ploki loomine uue CLI käsu abil, wp tellingute plokk. Saate selle luua ja lisada oma olemasolevatesse pluginatesse ja teemadesse.

CGB

Teine võimalus Gutenbergi ploki hõlpsaks käivitamiseks on luua Guteni plokk (CGB) genereerige katlakivi arendada Gutenbergi plokki. See koosneb kaasaegsetest vahenditest, nagu React.js, Webpack, ESLint, Babel jne. Parim osa on see, et ei pea neid tööriistu konfigureerima nii saate lihtsalt keskenduda oma koodi kirjutamisele.

Elementorblokid Gutenbergi jaoks

WordPress plugin, mis võimaldab teil sisestada kõik elemendimallid ja vaadake seda otse redaktoris. Plugin on varustatud arvukate teiste ühilduvustega, mis pakuvad õmblusteta muutmise kogemus Elementori ja Gutenbergi vahel. Vaadake seda videot, et näha, kuidas see toimib.

Aatomiplokid

Gutenbergi plokkide kogum, millel on järjest rohkem kogumisi. Selle kirjutamise ajal annab see “Ruudustiku postitus” mis võimaldab teil lisage oma saidi postituste loend ruudustikule. Seal on ka a “Soovitusblokk” mis, nagu nimigi ütleb, lisab lehele iseloomustuse. Vaadake selle lehe plokkide eelvaateid.

Blokeeri galerii

Pildigalerii lisamiseks pilkupüüdev plokk blokeerib galerii, mis võimaldab piltidele teie postitusele lisada pilte. Lihtsalt pange oma pildid välja, kujundage galerii kuva (müüritise stiil, karussell või täisekraan) ja see on kõik seatud. Praegu on see lihtsalt parim WordPressi galerii plokk.

CoBlocks

Sama autori plokkide komplekt, mis töötas välja ülalmainitud Blokeeringu Galerii, koosneb mitmetest plokkidest, mis parandavad teie saidi sisu näiteks Akordion, hinnakiri, Gif, klõpsa-Tweet, ja rohkem Blokse lisada.

StagBlocks

Teine Gutenbergi plokkide komplekt. Plugin toob kaasa mitmeid huvitavaid plokke, mida paljud teist hindaksid. See sisaldab Stat Blockit, mis võimaldab teil oma postituste ja lehtede statistikat kohandada. Veebilehekülje kaart blokeerib eelvaate veebilehe väljamõeldud kaardi stiilis. Koodiplokk, mis muudab koodi esiletõstetud värviga.

Otterplokid

Samuti kogutakse Gutenbergi plokke, nagu näiteks “Google Mapsi plokk” kaardi sisestamiseks, “Meie teenusepakett” kuni sisestage teenuste loend ruudustikuga nupuga, ja “Iseloomustused Area Block” iseloomustuste nimekirja lisamiseks. Otter Block on Gutenbergi plokkide kogum, mida ettevõtted ja teemaarendajad hindaksid.

Täiustatud Gutenbergi plokid

See plugin on kaasas käputäis täiustatud plokid, et rikastada teie sisu näiteks automaatselt loodud sisukord, “Giphy plokid” lisada GIF-pilt Giphy.com-st, “Unsplash Block” piltide lisamiseks Unsplash.com-st, “Bännerireklaami plokk”, WooCommerce “Add-to-cart nupu plokk”, ja palju muud.

Block Lab

Block Lab teeb arendajatele lihtsaks Gutenbergi ploki loomise. Plugin võimaldab teil registreerige uus plokk kasutajasõbraliku GUI-ga ja malle PHP-s. Sa ei pea isegi React.js-i õppima.

EDD plokid

Plugin, mis võimaldab teil muuta Easy Digital Downloads tooteid Gutenbergi redaktoris. Erinevalt lühikoodist kuvab plokk toote vaatamisi.

Test Gutenberg

Kas pole valmis Gutenbergi pistikprogrammi installima või saidi värskendamiseks WordPress 5.0-le värskendama? Sa võid lihtsalt Uue redaktori proovimiseks laadige see sait.

Gutenbergi pilv

See on nagu Gutenbergi plokkide AppStore. Keskne koht, kus saad Gutenbergi plokid, mida saab kasutada WordPressis ja Drupalis. Jah, Drupal võtab ka oma toimetajale vastu Gutenbergi toimetaja.

Gutenbergi näited

Githubeni koodiproovide hoidla Gutenbergi plokkide loomiseks. Siit leiad lihtsam plokk keerulisema näite jaoks, näiteks a “Retsepti plokk” mis määrab redaktoris malli lisamiseks retsept sisu. Hea viide neile, kes eelistavad õppida pigem tegelikest näidetest, mitte õpikust.

GutenbergJS

Gutenbergi ainult JavaScript-versioon. See on saadaval NPM-paketina, mis võimaldab teil integreerida Gutenbergi oma JavaScripti rakendusse.

Keela Gutenberg

Kuigi Gutenberg toob WordPressile uusi võimalusi, aga mitte kõik on selleks valmis. Kui teie olemasolevad saidid ei tööta hästi Gutenbergiga, saate selle plugina installida. See võimaldab teil keelake Gutenbergi redaktor teatud ametikohtade, postitüüpide, kasutajate rollide, teemade ja Gutenbergi stiililehtede keelamise eest.

Klassikaline redaktor

Teise võimalusena saate selle plugina installida, et saaksite värskendada WordPress 5.0-le, kasutades samal ajal vana klassikalist toimetajat. Seda pluginat toetatakse kuni 2022. aastani.

ClassicPress

Teine võimalus on minna WordPress-kettale, ClassicPress. ClassicPress keskendub stabiilsust ja turvalisust. See ühildub WordPressi pluginatega ja kavatseb oma tulevastes väljaannetes tuua uusi huvitavaid funktsioone. Meie postituse väljaregistreerimine: ClassicPress: Alternatiiv WordPressile ilma Gutenberg & React.js

Kiirendada WordPressi

Kuna WordPress on muutunud nii suureks; rohkem kui lihtsalt blogimise platvorm. Eriti Gutenberg on lisanud saidile mõned lisakoormused, koodid, failid, mis võivad teie saiti aeglustada. See on detail, mida saate viidata, et aidata teil tuvastada oma saidi valupunktid ja käsitleda seda tööstuse viimastest parimatest tavadest.

Visual Studio koodibrauseri eelvaade

Visuaalse koodi redigeerija, mis lisab reaalse brauseri, mis on varustatud Chrome'i peatajatega Visual Studio koodis. See võimaldab teil eelvaate oma tööd reaalajas paremal koodiredaktoris ja võimaldab selliseid funktsioone nagu redigeerimise silumine.

Bundlesize

Bundlesize on vahend hoidke oma JavaScript-faili sidumine suurus. Saate määratleda iga komplekteeritud faili maksimaalse suuruse ja see annab teile märku, kui see on määratud maksimaalse suuruse kohta või selle läbinud. Bundlesize'i saab integreerida CI teenusega, nagu TravisCI ja CircleCI, et teie projektis oleks sujuv tööprotsess..

WP Emerge

Moodne WordPress teema raamistik põhineb MVC muster. Kui oled harjunud töötama PHP raamistikuga, nagu Laravel ja Slim, olen kindel, et hindate seda raamistikku tõesti. Võite kasutada selliseid asju nagu marsruuter ja kontroller, DI konteiner ja Middlerware.

Majakas Bot

Kasuliku tööriist, mis võimaldab käivitada Lighthouse'i CI-teenuses Dockeri abil. See on suurepärane vahend automatiseerige oma veebisaidi toimivuse kontroll iga kord, kui vajutate uue veebisaidi koodi muutmise.

Loe rakendust Rakenda

Learn React Rakendus React.js õppimiseks on ressurss. Kuid erinevalt teistest sealsetest ressurssidest peaks see olema arvutisse installitud. See sisaldab mitte ainult õppematerjale, vaid ka koodi ja interaktiivseid proove. Parim osa on see, et saate seda teha võrguühenduseta, kui see on installitud.

WP aktsepteerimine

WP aktsepteerimine on uus tööriist, mis võimaldab teil teha aktsepteerimise teste. Lihtsalt öeldes on aktsepteerimiskatsete seeria testid, et jäljendada kasutaja käitumist. Sellist tüüpi testide läbiviimiseks on olemas mitmeid raamistikke.

Siiski, kui te töötate peamiselt WordPressiga, siis hindate seda tööriista kasutamise lihtsuse pärast, kuna see on loodud ja kohandatud tüüpilistele WordPressi projektidele..

Läikiv

JavaScripti teek mobiilseadmes vaadates valgustuse peegeldust oma veebilehel jäljendama. Demot saab vaadata aadressil https://pqina.nl/shiny/. Väärib märkimist, et see töötab ainult mobiilseadmes, kuna see tugineb teatud API-le, mis on saadaval ainult mobiilseadmetes.

Reageeri Lucid

ReactLucid on abivahend debug React ja GraphQL rakendused interaktiivsemalt. See võimaldab teil näha komponendi hierarhiat, oleku / rekvisiitide muutusi React rakenduses, samuti GraphQL skeemi, päringuid ja mutatsioone reaalajas.

CSS funktsioonid Lülita sisse

Chrome'i laiendus, mis võimaldab teil keelata teatud CSS-i funktsioonid Chrome'is. Selle abil saate näha, kuidas teie veebisait muudab ja käitub teatud funktsioonide puudumisel. Väga kasulik on aidata teil rakendada uusi CSS-funktsioone, mida ei pruugi kõikides brauserites rakendada.

Blendy

Tööriist, mis võib teid aidata kohandage oma pildiga CSS-taustade segu režiime. Saate vaadata segamisrežiime, muuta värve ja rakendada gradiente. Saate kasutada Unsplashi pilte või laadida need arvutisse.

Reageeri Elemental

React elementide kogum, mis töötavad otse karbist välja. Ühtegi välist CSS-i, et importida või kohandada veebipakendis lisatavaid konfiguratsioone. Sellega kaasnevad olulised komponendid nagu nupp, märkeruut, SelectList, vahekaardid, Tooltip ja palju muud.

FX

Kui tegelete sageli JSON-vorminguga, siis olen kindel, et hindate seda tööriista. fx on käsurea tööriist, mis võimaldab teil visualiseerida JSONi andmeid terminalis interaktiivse režiimiga. nii, et saate andmeid laiendada või kokku lüüa. fx saab paigaldada NPM või Homebrew kaudu.

Monica

Monica on oma kategoorias. See on omamoodi CRM (Customer Relationship Manager), kuid ei ole mõeldud teie kliendile, vaid teie lähedastele, nagu teie perele ja sõpradele.

Sarnaselt CRM-iga võimaldab see teil jälgida oma tegevusi, nagu teie tegevused, ja kui sa viimati neid kutsusid jne. Veelgi enam, see võib seada meelde, et teile meelde kutsuda kedagi, kellega pole rääkinud. Nad nimetavad seda PRM-ks (Personal Relationship Manager).

Iooniline raamistik

Iooniline raamistik on juba mõnda aega olnud. Kuid viimasel ajal on see oma funktsionaalsuses üsna suureks hüppeks teinud. Nüüd mitte ainult, et see on kiirem, kuid iooniline on nüüd ühildub kahe tõusva tärniga: React.js ja Vue.js.

See loob maapinna, kus ioonid on a raamistiku agnostikavahend. Nii et mitte ainult seda, et see toimib konkreetsete raamistike puhul, vaid võib töötada ka uute süsteemidega, kuna tuleviku areng areneb tulevikus.

Märkimisväärne

Märkimisväärne on märkmete tegemise töölaua rakendus. Erinevalt teistest sarnastest rakendustest ei ole see varustatud vormindusega WYSIWYG ega muudele tüüpilistele kelladele ja viledele. The rakenduse redaktorit kasutab peamiselt Github-maitsega Markdown. Märkmed salvestatakse kindlasse faili .md failid ja manus. See toimib lihtsalt ja lihtsalt.

TipTap

TipTap on WYSIWYG redaktor, mis on ehitatud ProseMirrori peal Vue.js. Lisaks ProseMirrori arvukate funktsioonide pärimisele kastist, näiteks awesome Markdowni süntaksitoetusest, toob TipTap kaasa mõned kaasaegsed funktsioonid, nagu menüübubbleer, kus teksti esiletõstmisel ilmub vormindamise menüü, soovituse funktsioon, kus saab märkida või märkida isik, kes on sisu sees, ja eksportige võime eksportida sisu JSON-vormingus.

Taastage

Restplain on WordPressi plugin, mis võimaldab teil hõlpsasti luua oma WordPress REST API lõpp-punktide dokumente, sealhulgas teie saidi kohandatud lõpp-punkte ja API-kõne tegemine dokumentidest. Üks asi, mida tuleb märkida, on see, et dokumentide loomiseks tugineb lõpp-skeem, nii et veenduge, et olete lisanud oma kohandatud lõpp-punktide jaoks sobiva skeemi.

Reageerige sisu laadijale

Reageerige sisu laadijale on React kohandatud komponent, mis võimaldab kuvada sisu kohahoidjat tegeliku sisu laadimise ajal. See on sarnane laadijale, mida näete Facebookis ja Instagramis .

Mütiline

Müütiline on WordPressi algus teema, mis sisaldab kaasaegseid parimaid tavasid, nagu sõltuvussissepritse, vaateid ja kontrollereid, samuti kaasaegseid tööriistu, näiteks Veebipakett, Sass, Linting, PHP7 miinimumnõue ja BEM. See on suurepärane teema oma oskuste kui teemaarendaja taseme tõstmiseks.

Rafineeritud Github

Brauseri laiendus, mis täiustab teie kogemusi Githubi kasutamisel. See lisab mitmeid käepäraseid kiirklahve, täiustab mõningaid paigutusi ja kasutajaliideseid, lisab automaatselt lingi probleemidele ja PR-dele ning palju muud.

Avatud WC

Avatud WC on tööriistade kogum, mis võimaldab teil luua kohandatud veebikomponendi. See sisaldab pearaamatukogu, et luua veebikomponent, Yeomani generaatorid, et luua kiiresti “Avatud WC” projekt, mis sisaldab katsetamiseks tellinguid, lintimine, ja jätkab integratsiooni.

Avatud WC võib olla hea alternatiiv, kui soovite eelistavad rakendamist kohaliku veebifunktsiooniga selle asemel, et kasutada raamistikku nagu Vue.js või React.js.

Gridoom

Gridoom on a tööriist staatiliste veebisaitide ja veebirakenduste loomiseks Vue.js ja GraphQL abil. See suudab käsitleda mitut andmevoogu, näiteks CMS-i nagu WordPress ja Drupal, kohalik fail nagu Markdown või Yaml või väline API nagu AirTable ja Contentful. See on tõesti suurepärane alternatiiv Gatsby.js-ile, eriti kui eelistate Vue.js'i üle React.js.

Brauser

See on brauser, mida näeb ennast World Wide Web leiutaja, Tim Berners-Lee. See on lihtne brauser HTML-i esitamiseks ja ei näita aadressiriba nagu kaasaegne brauser, kuid saate seda navigeerida Dokument> Avatud täieliku dokumendi viitenumbrist ja kleepige URL-i ja klikkige Ava. Ja seal näete, kuidas teie sait algse brauseriga teeb.

Raster

Raster on kaasaegne võrgusüsteem, mis on ehitatud kaasaegse HTML- ja CSS-spetsifikatsiooniga, nagu CSS Grid, CSS Custom Property (Variable) ja kohandatud element. Täiuslik raamistik neile, kes soovivad servadel elada.

Hooper

Carouseli või liuguri lisamiseks Vue.js komponent. See on ligipääsetav ja kasutatav Touchi, klaviatuuri, hiireratta ja muu abistava navigeerimise kaudu, toetab RTL-i ja vertikaalset suunda, laiendatavat ja muidugi vastust.