Tuoreet resurssit web-suunnittelijoille ja kehittäjille (maaliskuu 2019)

Viimeisten kuukausien aikana on tapahtunut paljon web-kehityksen maailmassa. Ensinnäkin uusi lohkopohjainen editori, koodinimeltään Gutenberg, on vihdoin yhdistetty WordPress 5.0: een. Se on todella suuri muutos sen alusta lähtien, koska se asettaa uuden pohjan WordPressille kehittyä tulevaisuudessa ja muuttaa tapaa, jolla kehittäjät laajentuvat WordPress-toiminnoille.

Toiseksi muutamat kollegamme kehittäjät ovat luoneet joitakin todella hyödyllisiä työkaluja, kuten sellaisia, jotka sallivat katso JSON terminaalissa ja pari React-kirjastoa, jotka voivat osoittautua suureksi avuksi web-suunnittelu- ja kehityshankkeissa.

Ja lopuksi, joitakin tehokkaimmista resursseja, viitteitä ja laajennuksia on käynnistetty, jotta voit päivittää projektejasi uudempien trendien mukaisesti.

Let's get kattavin luettelo tuoreita web-kehitys resursseja.

Gutenbergin käsikirja

Virallinen WordPress-käsikirja, jossa voit etsiä viitteitä suunnittelusta, koodin esimerkkejä lohkojen luomiseksi ja muut ohjeet osallistumaan hankkeeseen. Se on ensimmäinen viittaus Gutenbergin kanssa.

Estä rakennusteline

Lohkopohjaisen editorin avulla WP-CLI tarjoaa nyt kätevän tavan aloittaa Gutenberg-lohkon luominen uudella CLI-komennolla, wp rakennusteline. Voit luoda sen ja lisätä sen olemassa oleviin laajennuksiin ja teemoihin.

CGB

Toinen tapa käynnistää Gutenberg-lohko on helposti luoda Guten-lohko (CGB) tuottaa kattilan kehittää Gutenberg-lohko. Se koostuu nykyaikaisista työkaluista, kuten React.js, Webpack, ESLint, Babel jne. Parasta on, että sinun ei tarvitse määrittää mitään näistä työkaluista joten voit keskittyä vain koodin kirjoittamiseen.

Elementor Blocks Gutenbergille

WordPress-laajennus, jonka avulla voit lisää kaikki Elementor-mallit ja esikatsele sitä editorissa. Pluginissa on lukuisia muita yhteensopivuutta saumaton muokkauskokemus Elementorin ja Gutenbergin välillä. Katso tämä video nähdäksesi, miten se toimii.

Atomilohkot

Joukko Gutenberg-lohkoja, joiden kokoelma kasvaa. Tämän kirjoituksen aikana se tarjoaa “Postiruudukko” jonka avulla voit lisää verkkosivustosi viestien luettelo verkkoon. On myös a “Tunnistuslohko” joka, kuten nimikin kertoo, lisätä suosituksen sivulle. Tutustu tämän sivun lohkojen koko esikatseluun.

Estä Galleria

Kuvagallerian lisäämistä silmiinpistävä lohko, Block Gallery tarjoaa saumattoman kokemuksen lisätä kuvia viestiin. Yksinkertaisesti pudota kuvat, tyyli gallerian näyttö (muuraus-tyyli, karuselli tai koko näyttö), ja kaikki on asetettu. Se on tällä hetkellä pelkkä WordPressin paras Galleria-lohko.

CoBlocks

Sama kirjoittaja, joka on kehittänyt edellä mainitun Block-gallerian, CoBlocks-sarjan, koostuu useista lohkoista, jotka parantavat sivustosi sisältöä esimerkiksi Yhdistelmä, hinnoittelutaulukko, Gif, napsauttamalla-Tweet, ja lisää lohkoja lisätään.

StagBlocks

Toinen sarja Gutenbergin lohkoja. Plugin tuo useita mielenkiintoisia lohkoja, joita monet teistä arvostaisivat. Se sisältää Stat Blockin, jonka avulla voit muokata tilastoja virkoissasi ja sivuillasi. Verkkosivustokortti estää esikatsele verkkosivustoa hienolla Card-tyylillä. Koodilohko, joka antaa koodin korostetulla värillä.

Otter-lohkot

Myös kokoelma Gutenberg Blocks kuten “Google Maps Block” lisätä kartta, “Palvelulohko” että lisää palveluiden luettelo painamalla painiketta ruudukonäkymässä, ja “Mielipiteitä Area Block” lisätä luettelon suositteluista. Otter Block on kokoelma Gutenbergin lohkoja, joita yritykset ja teemakehittäjät arvostavat.

Advanced Gutenberg Blocks

Tämä plugin sisältää kourallisen kehittyneet lohkot rikastuttamaan sisältöä esimerkiksi automaattisen luodun sisällön, “Giphy-lohkot” sisällyttää GIF-kuva Giphy.comista, “Unsplash Block” lisätä kuvia Unsplash.comista, “Bannerimainoslohko”, WooCommerce “Add-to-Cart-painike”, ja paljon muuta.

Block Lab

Block Lab tekee kehittäjille helpon luoda Gutenberg-lohkon. Pluginin avulla voit rekisteröi uusi lohko käyttäjäystävällisellä käyttöliittymällä ja malleja PHP: ssä. Sinun ei tarvitse edes oppia React.js.

EDD-lohkot

Plugin, jonka avulla voit tehdä Easy Digital Downloads -tuotteita Gutenberg-editorissa. Toisin kuin lyhytkoodi, lohko näyttää tuotteen näkymät.

Testaa Gutenberg

Ei ole valmis asentamaan Gutenberg-laajennusta tai päivittämään sivustoasi WordPress 5.0: een? Voit yksinkertaisesti lataa tämä sivusto kokeilemaan uutta editoria.

Gutenbergin pilvi

Se on kuin AppStore Gutenberg Blocksille. Keskeinen paikka, josta voit saada Gutenberg-lohkot, joita voidaan käyttää WordPressissa ja Drupalissa. Kyllä, Drupal aikoo myös hyväksyä Gutenberg-editorin toimittajilleen.

Gutenbergin esimerkkejä

Githubin koodikappaleiden arkisto Gutenberg-lohkojen luomiseksi. Täältä löydät yksinkertaisin lohko monimutkaisempaan esimerkkiin, kuten sellainen, joka luo a “Reseptilohko” joka asettaa mallin editorissa, jotta käyttäjät voivat lisätä niitä resepti sisältöä. Hyvä referenssi niille, jotka haluavat oppia todellisista esimerkeistä eikä oppikirjasta.

GutenbergJS

Vain Gutenbergin JavaScript-versio. Se on saatavana NPM-pakettina, jonka avulla voit integroida Gutenbergin johonkin JavaScript-sovellukseen.

Poista Gutenberg käytöstä

Vaikka Gutenberg tuo uusia mahdollisuuksia WordPressille, mutta kaikki eivät ole valmiita siihen. Jos nykyiset sivustot eivät toimi hyvin Gutenbergin kanssa, voit asentaa tämän laajennuksen. Sen avulla voit poista Gutenberg-editori käytöstä tiettyjen viestien, postityyppien, käyttäjäroolien, teemojen ja Gutenberg-tyylitaulukoiden käytöstä etupäässä.

Classic Editor

Vaihtoehtoisesti voit asentaa tämän laajennuksen, jotta voit pitää päivityksen WordPress 5.0: een samalla, kun käytät vanhaa klassista editoria. Tätä laajennusta tuetaan vasta 2022 saakka.

ClassicPress

Toinen vaihtoehto on vaihtaa WordPress-haarukka, ClassicPress. ClassicPress on keskittynyt vakautta ja turvallisuutta. Se on yhteensopiva WordPress-laajennusten kanssa, ja se aikoo tuoda uusia mielenkiintoisia ominaisuuksia tuleviin julkaisuihinsa. Lähtöselvitys: ClassicPress: Vaihtoehto WordPressille ilman Gutenberg & React.js

Nopeuttaa WordPressia

Koska WordPress on tullut niin suureksi; enemmän kuin pelkkä blogging-foorumi. Erityisesti Gutenberg on lisännyt sivustollesi joitakin ylimääräisiä kuormia, koodeja, tiedostoja, jotka saattavat hidastaa sivustoasi. Tämä on yksityiskohta, jonka avulla voit tunnistaa sivustossasi olevat painopisteet ja käsitellä alan uusimpia parhaita käytäntöjä.

Visual Studio -koodin selaimen esikatselu

Visuaalisen koodin editori, joka lisää todellisen selaimen, jota käyttää Chrome Headlessin sisäinen Visual Studio Code. Näin voit esikatsele työsi reaaliajassa koodin editorin sisällä ja ottaa käyttöön toimintoja, kuten editorin virheenkorjausta.

Bundlesize

Bundlesize on työkalu säilytä JavaScript-tiedosto niputtaminen koko. Voit määrittää kunkin yhdistetyn tiedoston enimmäiskoon ja ilmoittaa siitä, kun se on määritetyn enimmäiskoon mukainen. Bundlesize voidaan integroida CI-palveluun, kuten TravisCI ja CircleCI, jotta työnkulku voidaan toteuttaa saumattomasti projektissasi.

WP Emerge

Moderni WordPress-teemakehys perustuu MVC-kuvioon. Jos olet tottunut työskentelemään PHP-kehyksen kanssa, kuten Laravel ja Slim, olen varma, että arvostat tätä kehystä. Voit käyttää esimerkiksi reitittimen ja ohjaimen, DI-kontin ja Middlerwaren asioita.

Majakka Bot

Apuohjelma, jonka avulla voit käyttää Lighthouse-sovellusta CI-palvelussa Dockerin avulla. Se on hyvä työkalu automatisoi sivustosi suorituskyvyn tarkistus joka kerta, kun painat uutta muutosta sivustosi koodiin.

Lue React App

Learn React App on resurssi React.js: n oppimiseksi. Mutta toisin kuin muut siellä olevat resurssit, tämän pitäisi olla asennettu paikallisesti tietokoneeseen. Se ei sisällä pelkästään oppimateriaaleja, vaan myös koodaa ja interaktiivisia näytteitä. Parasta on, että voit tehdä sen offline-tilassa, kun se on asennettu.

WP-hyväksyntä

WP Acceptance on uusi työkalu, jonka avulla voit tehdä hyväksymiskokeita. Yksinkertaisesti sanottuna hyväksymiskokeet ovat sarja testit jäljittelemään käyttäjän käyttäytymistä. Tämäntyyppisen testin suorittamiseksi on olemassa useita kehyksiä.

Jos kuitenkin työskentelet pääasiassa WordPressin kanssa, arvostat tätä työkalua helppokäyttöisyyden vuoksi, koska se on suunniteltu ja räätälöity tyypillisten WordPress-projektien tarpeisiin.

Kiiltävä

JavaScript-kirjasto jäljitellä valaistuksen heijastusta sivustossasi, kun katsot mobiililaitteella. Voit tarkastella demoa osoitteessa https://pqina.nl/shiny/. On syytä huomata, että se toimii vain mobiililaitteessa, koska se perustuu tiettyyn sovellusliittymään, joka on käytettävissä vain mobiililaitteissa.

Reagoi Lucidiin

ReactLucid on työkalu, joka auttaa sinua debug React ja GraphQL-sovellukset vuorovaikutteisemmin. Sen avulla voit tarkastella React-sovelluksen komponenttihierarkiaa, tila- / rekvisiitta-muutoksia sekä reaaliaikaisia ​​GraphQL-kaavioita, kyselyjä ja mutaatioita.

CSS-toiminnot Vaihda

Chrome-laajennus, jonka avulla voit poista tiettyjen CSS-ominaisuuksien käytöstä Chromessa. Tämän avulla voit nähdä, miten sivustosi tekee ja käyttäytyy, kun tiettyjä ominaisuuksia ei ole. Aivan hyödyllistä auttaa sinua toteuttamaan uusia CSS-ominaisuuksia, joita ei ehkä toteuteta kaikissa selaimissa.

Blendy

Työkalu, joka voi auttaa sinua muokkaa CSS-taustasekoitustiloja kuvan kanssa. Voit esikatsella sekoitusmuotoja, vaihtaa värejä ja soveltaa gradientteja. Voit käyttää Unsplash-kuvia tai ladata ne tietokoneesta.

Reagoi alkuaine

Kokoelma React-elementtejä, jotka toimivat aivan laatikon ulkopuolella. Ei ulkoista CSS: tä tuoda tai muokata Webpackissa lisättäviä kokoonpanoja. Siinä on olennaiset komponentit, kuten Button, Checkbox, SelectList, Tabs, Tooltip ja paljon muuta.

FX

Jos käsittelet usein JSON-muotoiltua, olet varma, että arvostat tätä työkalua. FX on komentorivityökalun avulla voit visualisoida JSON-tiedot Terminalissa interaktiivisella tilassa. siten, että voit laajentaa tai pienentää tietoja. FX voidaan asentaa NPM: n tai Homebrewin kautta.

Monica

Monica on aivan omassa luokassaan. Se on eräänlainen CRM (Customer Relationship Manager), mutta se ei ole tarkoitettu asiakkaallesi vaan rakkaillesi, kuten perheellesi ja ystävillesi.

CRM: n tapaan se sallii sinun seurata toimintojasi, kuten heidän kanssaan, ja kun viimeksi soitit heille jne. Vielä enemmän, se voidaan asettaa muistuttamaan sinua soittaa jonkun, jota et ole puhunut jonkin aikaa. He kutsuvat sitä PRM (Personal Relationship Manager).

Ionic Framework

Ionic-kehys on ollut jo jonkin aikaa. Mutta viime aikoina se on tehnyt melkoisen harppauksen sen toiminnassa. Nyt ei vain, että se on nopeampi, mutta Ionic on nyt yhteensopiva kahden nousevan tähtikehyksen kanssa: React.js ja Vue.js.

Tämä luo maahan sen, että ioni on a puitteet agnostiikkaan. Ei vain se, että se toimii tietyissä kehyksissä, vaan se voi myös toimia uusien kanssa, sillä etupään kehitys kehittyy tulevaisuudessa.

huomattava

Merkittävä on muistiinpanotyöpöytäohjelma. Toisin kuin mikään muu vastaava sovellus, siinä ei ole omaa muotoilua, WYSIWYG: ää tai muita tyypillisiä kelloja ja pilliä. sovelluseditori on pääasiassa Github-maustettu Markdown. Muistiinpanot tallennetaan tasaisessa tiedostossa .md tiedostoja sekä liitetiedostoja. Se toimii vain ja yksinkertaisesti.

TipTap

TipTap on WYSIWYG-editori, joka on rakennettu ProseMirrorin päälle Vue.js. Lukuun ottamatta useita ProseMirrorin ominaisuuksia, kuten awesome Markdown-syntaksitukea, TipTap tuo muutamia moderneja ominaisuuksia, kuten Menu Bubble, jossa muotoiluvalikko tulee näkyviin, kun teksti korostetaan, ehdotustoiminto, jossa voit merkitä tai mainita henkilö, joka on sisällön sisällä, ja viedä kyky viedä sisältöä JSON-muotoilussa.

Restplain

Restplain on WordPress-laajennus, jonka avulla voit helposti luoda WordPress REST API-päätepisteiden dokumentaatioita, mukaan lukien sivustosi mukautetut päätepisteet. API-puhelun tekeminen asiakirjoista. Yksi asia on huomata, että se luottaa päätepohjakaavioon luodakseen asiakirjat, joten varmista, että olet lisännyt oikean kaavion mukautetuille päätepisteille.

Reagoi sisällön lataaja

Reagoi sisällön lataaja on React mukautettu komponentti, jonka avulla voit näyttää sisällön paikanvaraajan, kun varsinainen sisältö ladataan. Se on samanlainen kuin Facebookissa ja Instagramissa näkyvä kuormaaja .

Myyttinen

Myyttinen on WordPress-aloitusaihe, jossa on nykyaikaisia ​​parhaita käytäntöjä, kuten riippuvuuspuristus, näkymät ja ohjaimet, sekä moderni työkalu, kuten Webpack, Sass, Linting, PHP7 vähimmäisvaatimus ja BEM. Se on loistava teema tasoittaa taitosi teemankehittäjänä.

Puhdistettu Github

Selainlaajennus, jolla voit tarkentaa Githubia käyttävää kokemusta. Se lisää useita käteviä pikanäppäimiä, tarkentaa joitakin ulkoasuja ja käyttöliittymiä, lisää automaattisesti linkkejä ongelmiin ja PR-palveluihin sekä paljon muuta.

Avaa WC

Open WC on joukko työkaluja, joiden avulla voit luoda mukautetun Web-komponentin. Siihen kuuluu pääkirjasto, joka luo Web-komponentin, Yanoman-generaattorit, jotka tuottavat nopeasti “Avaa WC” hanke, joka sisältää testaustelineet, pölyämistä, ja jatkaa integraatiota.

Avoin WC voi olla hyvä vaihtoehto, jos haluat mieluummin toteuttaa natiivi web-ominaisuus sen sijaan, että käytettäisiin sellaista kehystä kuin Vue.js tai React.js.

Gridsome

Ruudukko on a työkalu staattisten verkkosivustojen ja web-sovellusten rakentamiseen Vue.js: n ja GraphQL: n avulla. Se pystyy käsittelemään useita tietovirtoja, kuten CMS: stä, kuten WordPress ja Drupal, paikallinen tiedosto kuten Markdown tai Yaml tai ulkoinen API, kuten AirTable ja Contentful. Tämä on todella hyvä vaihtoehto Gatsby.jsille, varsinkin jos mieluummin Vue.js yli React.js.

Selain

Tämä on selain, joka on nähty World Wide Web-keksijän itse, Tim Berners-Lee. Se on a yksinkertainen selain HTML: n näyttämiseksi ja ei näytä osoitepalkkia kuin nykyaikainen selain, mutta voit tarkastella navigoimalla kohtaan Asiakirja> Avaa koko asiakirjan viitteestä ja liitä URL-osoite ja napsauta Avata. Ja näet, miten sivustosi tekee alkuperäisen selaimen.

Raster

Raster on nykyaikainen ruudukon kehys, joka on rakennettu moderneilla HTML- ja CSS-spesifikaatioilla, kuten CSS Grid, CSS Custom Property (Variable) ja mukautettu elementti. Täydellinen kehys niille, jotka haluavat elää reunoilla.

Hooper

Vue.js-komponentti, jolla voit lisätä karuselli- tai liukusäätimen. Se on käytettävissä ja sitä voidaan käyttää kosketusnäytön, näppäimistön, hiiren pyörän ja muun avustavan navigoinnin avulla, se tukee RTL- ja pystysuuntaista suuntaa, laajennettavaa ja tietenkin vastausta.