Sveži viri za spletne oblikovalce in razvijalce (marec 2019)

V zadnjih nekaj mesecih se je v svetu razvoja spletnih strani zgodilo veliko. Prvič, novo urednik na osnovi blokov, pod kodnim imenom Gutenberg, je bil nazadnje združen v WordPress 5.0. To je res velika sprememba od svoje ustanovitve, saj postavlja nove temelje za WordPress, da se bo razvijal v prihodnosti in bo spremenil način, kako se razvijalci razširjajo za funkcionalnosti WordPressa.

Drugič, nekaj naših sodelavcev je ustvarilo nekaj resnično koristnih orodij, kot je tisto, ki to omogoča si oglejte JSON v terminalu in nekaj knjižnic React, ki se lahko izkažejo za veliko pomoč pri oblikovanju spletnih strani in razvojnih projektih.

In nazadnje, nekateri najbolj učinkoviti viri, reference in vtičniki so vam pomagali pri posodabljanju vaših projektov glede na nove trende.

Pojdimo na najbolj izčrpen seznam svežih virov za razvoj spletnih strani.

Priročnik Gutenberga

Uradni WordPress priročnik, kjer si lahko ogledate reference za oblikovanje, primeri kod za ustvarjanje blokov in drugi ter vodnik za prispevanje k projektu. To je vaša prva referenca za razvoj z Gutenbergom.

Blokiraj skel

Z urejevalnikom, ki temelji na blokih, WP-CLI zdaj zagotavlja priročen način za začetek ustvarjanje Gutenbergovega bloka z novim ukazom CLI, blok gradbenih odrov. Ustvarite ga lahko in ga vključite v obstoječe vtičnike in teme.

CGB

Drug način za preprosto zagon Gutenbergovega bloka je Create Guten Block (CGB) ustvarite predlogo razviti Gutenberški blok. Sestavljen je iz sodobnih orodij, kot so React.js, Webpack, ESLint, Babel itd. Najboljši del je, da ni treba konfigurirati nobenega od teh orodij tako da se lahko preprosto osredotočite na pisanje kode.

Elementorni bloki za Gutenberg

WordPress plugin, ki vam omogoča vstavite vse predloge Elementor in ga predogledite v urejevalniku. Vtičnik prihaja s številnimi drugimi združljivostmi, ki zagotavljajo brezhibno urejanje med Elementorjem in Gutenbergom. Oglejte si ta videoposnetek in si oglejte, kako deluje.

Atomski bloki

Niz Gutenbergovih blokov z vedno večjim številom zbirk. V času tega pisanja, zagotavlja “Blok po pošti” ki vam omogoča dodajte seznam objav v spletnem mestu v postavitvi mreže. Obstaja tudi a “Priporočni blok” ki, kot že ime pove, vstavi izjavo znotraj strani. Oglejte si celotne predoglede blokov na tej strani.

Blokiraj galerijo

Ogledni blok za vstavljanje vaše galerije slik omogoča Block Gallery, da brezhibno doda slike v objavo. Preprosto spustite slike, slog prikažite galerijo (Masonry-style, Carousel ali Fullscreen) in vse je nastavljeno. To je trenutno najboljši galerijski blok za WordPress.

CoBlocks

Komplet blokov istega avtorja, ki je razvil zgoraj omenjeno galerijo Block, je sestavljen iz številnih blokov, ki bodo izboljšali vsebino vašega spletnega mesta z Harmonika, Tabela za določanje cen, Gif, Klikni za objavo, in več Blokov, ki jih je treba dodati.

StagBlocks

Še ena zbirka Gutenberg blokov. Vtičnik prinaša številne zanimive bloke, ki bi jih mnogi izmed vas cenili. Vključuje Stat Block, ki vam omogoča, da prilagodite statistiko znotraj vaših objav in strani. Spletna kartica blok, ki bo spletna stran za predogled v elegantni kartični slog. Code Block, ki bo prikazal kodo z označeno barvo.

Bloki vidre

Tudi zbirka Gutenberg blokov, kot je “Blok Google Zemljevidov” , da vstavite zemljevid, “Naš servisni blok” do vstavite seznam storitev z gumbom v mrežnem pogledu, in “Pričevanja Območni blok” vstavite seznam pričevanj. Otter Block je zbirka Gutenberških blokov, ki bi jih podjetja in razvijalci teme cenili.

Napredne Gutenbergove bloke

Ta vtičnik prihaja s peščico napredni bloki za obogatitev vaše vsebine kot je samodejno ustvarjeno kazalo vsebine, “Bloki Giphy” vključiti sliko GIF iz Giphy.com, “Unsplash Block” za vstavljanje slik iz programa Unsplash.com, “Pasica oglasnega bloka”, WooCommerce “Blok gumba za dodajanje v košarico”, in še veliko več.

Blok Lab

Blok Lab omogoča razvijalcem, da ustvarijo blok Gutenberg. Vtičnik vam omogoča registrirajte nov blok z uporabniku prijaznim uporabniškim vmesnikom in predloge v PHP. React.js sploh ne potrebujete.

Bloki EDD

Vtičnik, ki vam omogoča, da izdelate izdelke Easy Digital Downloads v urejevalniku Gutenberg. Za razliko od uporabe kratke kode bo blok prikazoval poglede izdelka.

Test Gutenberg

Ni pripravljen za namestitev Gutenberg vtičnika ali posodobitev spletnega mesta na WordPress 5.0? Lahko preprosto naložite to spletno mesto, da preizkusite nov urejevalnik.

Gutenberški oblak

To je kot AppStore za Gutenbergove bloke. Osrednji kraj, kjer lahko pridete Gutenberg Bloki, ki se lahko uporabljajo v WordPress in Drupal. Da, Drupal bo tudi sprejel Gutenbergovega urednika za njihovega urednika.

Gutenbergovi primeri

Githubov repozitorij kodnih vzorcev za ustvarjanje Gutenberg blokov. Tukaj lahko najdete Najpreprostejši blok za bolj zapleten primer, kot je tista za ustvarjanje “Blok receptov” ki v urejevalniku nastavi predlogo za dodajanje uporabnikom recept vsebine. Dobra referenca za tiste, ki se raje učijo iz resničnih primerov, kot pa besedila.

GutenbergJS

Različica Gutenberga, ki je samo za JavaScript. Na voljo je kot paket NPM, ki vam omogoča integracijo Gutenberga v katerokoli vašo JavaScript aplikacijo.

Onemogoči Gutenberga

Čeprav Gutenberg prinaša nove možnosti za WordPress, vendar niso vsi pripravljeni na to. Če obstoječa spletna mesta z Gutenbergom ne delujejo dobro, lahko namestite ta vtičnik. To vam omogoča onemogočite Gutenbergovega urejevalnika za določene objave, vrste objav, uporabniške vloge, teme in onemogočite Gutenbergove slogovne sloge v sprednjem delu.

Classic Editor

Namesto tega lahko namestite ta vtičnik, tako da boste lahko posodabljali WordPress 5.0, medtem ko uporabljate stari klasični urejevalnik. Ta vtičnik bo podprt do leta 2022.

ClassicPress

Druga možnost je preklop na WordPress vilice, ClassicPress. Osvetlitev ClassicPress je vklopljena podjetja, stabilnost in varnost. Združljiv je z vtičniki za WordPress in načrtuje, da bo v prihodnje izdaje prinesel nove zanimive funkcije. Oglejte si naš post: ClassicPress: Alternativa WordPressu brez Gutenberg & React.js

Pospešite WordPress

Ker je WordPress postal tako velik; več kot le spletna platforma. Gutenberg, še posebej, je dodal nekaj dodatnih obremenitev, kode, datoteke na vaše spletno mesto, ki lahko upočasnijo vaše spletno mesto. To je podrobnost, ki jo lahko uporabite, da vam pomaga ugotoviti, kakšne so točke bolečine na vašem spletnem mestu in jo naslovite z najnovejšimi najboljšimi praksami v industriji.

Predogled pregledovalnika kod Visual Studio

Urejevalnik vizualne kode, ki dodaja pravi brskalnik, ki ga poganja Chrome brez glave znotraj kode Visual Studio. To vam omogoča predogled dela v realnem času desno znotraj urejevalnika kode in omogoča funkcije, kot je odpravljanje napak v urejevalniku.

Bundlesize

Bundlesize je orodje za obdržite svojo JavaScript datoteko združevanje preverite velikost. Določite lahko največjo velikost vsake datoteke v paketu, ki vas bo opozorila, ko gre za določeno velikost. Bundlesize je mogoče integrirati s storitvami CI, kot sta TravisCI in CircleCI, za nemoteno uporabo delovnega toka v vašem projektu..

WP Emerge

Moderno Tematski okvir WordPress temelji na vzorcu MVC. Če ste navajeni delati z okvirom PHP, kot je Laravel in Slim, boste zagotovo cenili ta okvir. Uporabite lahko stvari, kot so Router in Controller, DI Container in Middlerware.

Svetilnik Bot

Pomožno orodje, ki vam omogoča zagon Lighthouse v CI storitvi z uporabo Dockerja. To je odlično orodje avtomatizirajte pregled uspešnosti vaše spletne strani vsakič, ko vnesete novo spremembo kode kode.

Naučite se React App

Learn React App je vir za učenje React.js. Toda za razliko od drugih virov tam, bi to moralo biti v računalniku. Ne vsebuje le učnih gradiv, ampak tudi kodira in interaktivne vzorce. Najboljši del je, da lahko to storite brez povezave, ko je nameščen.

Sprejem WP

WP Acceptance je novo orodje, ki vam omogoča izvajanje testov sprejemljivosti. Preprosto povedano, Preizkusi sprejemanja so serija testov za posnemanje vedenja uporabnikov. Obstajajo številni okviri za izvedbo te vrste testov.

Vendar, če ste predvsem delate z WordPress, boste cenili to orodje za enostavnost uporabe, saj je zasnovan in prilagojen tipičnim WordPress projektom..

Shiny

Knjižnica JavaScripta za posnemajte refleksijo svetlobe na vaši spletni strani, če jo gledate na mobilni napravi. Predstavitev si lahko ogledate v https://pqina.nl/shiny/. Treba je omeniti, da bo deloval le v mobilnih napravah, saj temelji na določenem API-ju, ki je na voljo samo v mobilnih napravah.

Reagirajte Lucid

ReactLucid je orodje, ki vam pomaga Odpravljanje napak za aplikacije React in GraphQL bolj interaktivno. Omogoča vam, da vidite hierarhijo komponent, spremembe stanja / rekvizitov v vaši aplikaciji React ter shemo GraphQL, poizvedbe in mutacije v realnem času..

Funkcije CSS Preklopi

Razširitev za Chrome, ki vam omogoča onemogočite nekatere funkcije CSS v Chromu. S tem lahko vidite, kako se bo vaše spletno mesto upodabljalo in obnašalo, ko nekatere funkcije ne obstajajo. Zelo uporabno, da vam pomaga pri uvajanju novih funkcij CSS, ki morda niso izvedene v vseh brskalnikih.

Blendy

Orodje, ki vam lahko pomaga prilagodite načine mešanja ozadja CSS s svojo sliko. Lahko si ogledate načine mešanja, spremenite barve in uporabite prelome. Slike iz programa Unsplash lahko uporabite ali prenesete iz računalnika.

Reagirajte Elemental

Zbirka elementov React, ki delujejo neposredno iz škatle. Ni zunanjega CSS-ja za uvoz ali prilagoditev konfiguracij za dodajanje v Webpack. Na voljo je z bistvenimi komponentami, kot so gumb, potrditveno polje, izbirni seznam, zavihki, namig in veliko več.

FX

Če pogosto uporabljate obliko JSON, boste zagotovo cenili to orodje. fx je Orodje za ukazno vrstico, ki omogoča prikaz podatkov JSON v Terminalu z interaktivnim načinom. na način, da lahko razširite ali strnite podatke. fx lahko namestite preko NPM ali Homebrew.

Monica

Monica je precej v svoji kategoriji. To je vrsta CRM (Customer Relationship Manager), vendar ni namenjena vašim strankam, temveč vašim bližnjim, kot so vaša družina in prijatelji.

Tako kot CRM vam omogoča, da spremljate stvari, kot so vaše dejavnosti z njimi, ko ste jih nazadnje klicali itd. Še več, nastavite ga lahko tako, da vas opomni, da pokličete nekoga, s katerim niste že dolgo govorili. Imenujejo ga PRM (Manager za osebne odnose).

Ionski okvir

Ionski okvir je že nekaj časa prisoten. Toda v zadnjem času je naredil velik skok v svoji funkcionalnosti. Zdaj pa ni samo, da je zdaj hitrejša, ampak ionska združljiva z dvema ogrodjema vzhajajočih zvezd: React.js in Vue.js.

To določa podlago za jonsko, da je orodje za diagnostiko okvirja. Torej ne samo, da deluje za določene okvire, temveč lahko sodeluje tudi z novimi, saj se razvoj vnaprej razvija v prihodnosti..

Opazno

Opazna je namizna aplikacija za pisanje. Za razliko od drugih podobnih aplikacij, ne prihaja z lastniškim oblikovanjem, WYSIWYG ali drugimi tipičnimi zvonci. The urejevalnik aplikacij večinoma poganja Markdown z okusom Github. Beležke so shranjene v ravno datoteko .md kot tudi prilogo. Samo deluje in preprosto.

TipTap

TipTap je urejevalnik WYSIWYG, zgrajen na vrhu ProseMirror z Vue.js. Poleg podedovanja številnih funkcij iz ProseMirror iz škatle, kot je odlična podpora sintakse Markdown, TipTap prinaša nekaj sodobnih funkcij, kot je Bubble Menu, kjer se bo pojavil meni za oblikovanje, ko bo poudarjeno besedilo, funkcija Predlog, kjer lahko označite ali navedete osebe v vsebini in izvozite možnost izvažanja vsebine v oblikovanju JSON.

Občutite

Restplain je WordPress vtičnik, ki vam omogoča enostavno ustvarjanje dokumentacije vaših WordPress REST API končnih točk, vključno s končnimi točkami po meri na vašem spletnem mestu, klic API iz dokumentov. Opozoriti je treba, da se pri izdelavi dokumentacije zanaša na shemo končnih točk, zato se prepričajte, da ste za končne točke po meri dodali pravilno shemo.

Reagirajte vsebino Loader

Reagirajte vsebino Loader je komponenta »React custom«, ki omogoča prikaz vsebine vsebine, medtem ko se dejanska vsebina nalaga. Podobno je tipu nakladalnika, ki ga vidite na Facebooku in Instagramu .

Mitsko

Mythic je zagonska tema za WordPress s sodobnimi najboljšimi praksami, kot so odvisnost od injiciranja, pogledi in krmilniki, kot tudi moderno orodje, kot je uporaba Webpack, Sass, Linting, PHP7 minimalne zahteve in BEM. To je odlična tema za izboljšanje vaše sposobnosti kot razvijalec teme.

Rafiniran Github

Razširitev brskalnika za izboljšanje vaše izkušnje pri uporabi Githuba. Dodaja več priročnih hotkeys, izpopolnjuje nekaj postavitev in uporabniških vmesnikov, samodejno dodaja povezavo do vprašanj in PR-jev ter še veliko več.

Odprt WC

Odprti WC je nabor orodij, ki vam omogočajo ustvarjanje spletne komponente po meri. Vključuje glavno knjižnico za ustvarjanje spletne komponente, generacije Yeomanov za hitro ustvarjanje “Odprt WC” projekt, ki vključuje oder za testiranje, linting, in nadaljevanje integracije.

Odprti WC je lahko dobra alternativa, če bi raje izvajajo z izvirno spletno funkcijo namesto uporabe okvira, kot je Vue.js ali React.js.

Gridsome

Gridsome je a orodje za izdelavo statičnih spletnih mest in spletnih aplikacij z Vue.js in GraphQL. To je sposoben ravnati več tokov podatkov, kot so iz CMS, kot so WordPress in Drupal, lokalno datoteko, kot so Markdown ali Yaml, ali zunanji API, kot AirTable in Contentful. To je res odlična alternativa za Gatsby.js, še posebej, če imate raje Vue.js nad React.js.

Brskalnik

To je brskalnik, ki si ga je zamislil izumitelj svetovnega spleta, Tim Berners-Lee. Je preprost brskalnik za upodabljanje HTML-ja in ne prikaže naslovne vrstice, kot je sodoben brskalnik, vendar si lahko ogledate tako, da se pomaknete na Dokument> Odpri iz celotne reference dokumenta in prilepite URL in kliknite Odprto. In tam boste videli, kako se bo vaše spletno mesto upodabljalo z izvirnim brskalnikom.

Raster

Raster je sodoben mrežni okvir, ki je zgrajen s sodobno specifikacijo HTML in CSS, kot je CSS Grid, CSS Custom Property (spremenljivka) in element po meri. Odličen okvir za tiste, ki radi živijo na robovih.

Hooper

Komponenta Vue.js za dodajanje vrtiljaka ali drsnika. Dostopna je in uporabna prek Touch, tipkovnice, kolesca miške in druge pomožne navigacije, podpira RTL in navpično smer, razširljivo in seveda odziv.