Svježi resursi za web dizajnere i razvojne programere (ožujak 2019)
Mnogo se toga dogodilo u posljednjih nekoliko mjeseci u svijetu web razvoja. Prvo, novo urednik u bloku, pod kodnim nazivom Gutenberg, napokon je spojen u WordPress 5.0. To je doista velika promjena od svog osnutka jer postavlja nove temelje za WordPress da se razvija u budućnosti i da će promijeniti način na koji se programeri proširuju za WordPress funkcionalnosti.
Drugo, nekoliko naših kolega razvojnih inženjera stvorilo je neke zaista korisne alate kao što je onaj koji dopušta pogledajte JSON u terminalu i nekoliko React knjižnica koje mogu biti od velike pomoći u web dizajnu i razvojnim projektima.
I na kraju, neke od najučinkovitijih resursi, reference i dodaci su pokrenuti kako bi vam pomogli da ažurirate svoje projekte u skladu s novim trendovima.
Let's get na najopsežniji popis svježe web razvoj resursa.
Priručnik za Gutenberg
Službeni WordPress priručnik gdje možete potražiti reference za dizajn, primjeri kodova za izradu blokova i drugi i vodič za doprinos projektu. To je vaša prva referenca za razvoj s Gutenbergom.
Blokiraj skelu
Pomoću uređivača koji se temelji na blokovima, WP-CLI sada nudi prikladan način za početak stvaranje Gutenberg bloka s novom CLI naredbom, blok skele wp. Možete ga izraditi i uključiti u postojeće dodatke i teme.
CGB
Drugi način za jednostavno pokretanje Gutenberg bloka je Create Guten Block (CGB) je alat za generirati predložak razviti Gutenberg blok. Sastoji se od modernih alata kao što su React.js, Webpack, ESLint, Babel, itd. Najbolji dio je da vi ne morate konfigurirati nijedan od ovih alata tako da se možete jednostavno usredotočiti na pisanje koda.
Blokovi za elemente za Gutenberga
WordPress dodatak koji vam omogućuje umetnite predloške Elementora i pregledajte je u uređivaču. Dodatak dolazi s brojnim drugim kompatibilnostima koje pružaju besprijekorno uređivanje između Elementora i Gutenberga. Pogledajte ovaj videozapis da biste vidjeli kako to radi.
Atomski blokovi
Skup Gutenbergovih blokova s rastućim brojem zbirki. U vrijeme ovog pisanja, on pruža “Blok Post Post” što vam omogućuje dodajte popis postova svoje web-lokacije u rasporedu mreže. Tu je i a “Iskazni blok” koji, kao što ime implicira, da umetne izjavu unutar stranice. Pogledajte cijeli pregled blokova na ovoj stranici.
Blokiraj galeriju
Atraktivan blok za umetanje galerije slika, Block Gallery pruža besprijekorno iskustvo dodavanja slika u vaš post. Jednostavno ispustite slike, stilizirajte prikaz galerije (Masonry-style, Carousel ili Fullscreen) i sve je spremno. To je, u ovom trenutku, samo najbolji Blok Galerija za WordPress.
CoBlocks
Skup blokova istog autora koji je razvio gore navedenu galeriju blokova, CoBlocks se sastoji od određenog broja blokova koji će poboljšati sadržaj vaše web-lokacije s Harmonika, tablica određivanja cijena, Gif, klik-za-Tweet, i više blokova za dodavanje.
StagBlocks
Još jedan apartman Gutenbergovih blokova. Dodatak donosi brojne zanimljive blokove za koje bi mnogi od vas bili zahvalni. To uključuje Stat Block koji vam omogućuje da prilagodite statistiku unutar svojih postova i stranica. Blok web stranica koji će pregledajte web-lokaciju u otmjenom Card-stilu. Kodni blok koji će prikazati kod s istaknutom bojom.
Blokovi vidre
Također, zbirka Gutenberg blokova kao što je “Blok Google karata” za umetanje karte, “Naš servisni blok” do umetnite popis usluga s gumbom u mrežnom prikazu, i “Izjave kupaca” za umetanje popisa svjedočanstava. Otter Block je kolekcija Gutenbergovih blokova koje bi tvrtke i razvijatelji tema cijenili.
Napredni Gutenbergovi blokovi
Ovaj dodatak dolazi s pregršt napredni blokovi koji obogaćuju vaš sadržaj kao što je automatski generirani sadržaj, “Blokovi Giphy” uključiti GIF sliku s Giphy.com, “Unsplash Block” za umetanje slika s Unsplash.com, “Blok oglasnog bannera”, WooCommerce “Blok gumba za dodavanje u košaricu”, i još mnogo toga.
Blok Lab
Blok Lab olakšava programerima stvaranje Gutenberg bloka. Dodatak vam omogućuje registrirajte novi blok s korisničkim sučeljem i predloške u PHP-u. Ne morate čak ni učiti React.js.
EDD blokovi
Dodatak koji vam omogućuje prikaz proizvoda Easy Digital Downloads u Gutenbergovom uređivaču. Za razliku od korištenja kratkog koda, blok će prikazati prikaze proizvoda.
Test Gutenberg
Niste spremni instalirati Gutenberg plugin ili ažurirati svoju web-lokaciju na WordPress 5.0? Možete jednostavno učitajte ovu web-lokaciju da biste isprobali novi urednik.
Oblak Gutenberg
To je kao AppStore za Gutenbergove blokove. Središnje mjesto gdje možete doći Gutenberg Blokovi koji se mogu koristiti u WordPressu i Drupalu. Da, Drupal će također usvojiti Gutenbergovog urednika za njihovog urednika.
Primjeri Gutenberga
Githubov repozitorij uzoraka koda za izradu Gutenberg blokova. Ovdje možete pronaći najjednostavniji blok na složeniji primjer, kao što je onaj za stvaranje “Blok recepta” koja postavlja predložak u uređivaču koji korisnici mogu dodati recept sadržaj. Dobra referenca za one koji više vole učiti od stvarnih primjera, a ne udžbenika.
GutenbergJS
Gutenbergova verzija samo za JavaScript. Dostupan je kao NPM paket koji omogućuje integraciju Gutenberga u bilo koju JavaScript aplikaciju.
Onemogući Gutenberg
Iako Gutenberg donosi nove mogućnosti WordPressu, ali nisu svi spremni za njega. Ako vaše postojeće web-lokacije ne funkcioniraju dobro s Gutenbergom, možete instalirati ovaj dodatak. To vam omogućuje onemogućite Gutenberg urednika za određene postove, vrste postova, korisničke uloge, teme, kao i onemogućavanje Gutenbergovih stilskih listova u prednjem kraju.
Klasični uređivač
Alternativno, možete instalirati ovaj dodatak tako da možete nastaviti ažurirati na WordPress 5.0 dok zadržite koristeći stari klasični urednik. Ovaj dodatak bit će podržan do 2022.
ClassicPress
Druga alternativa je prebacivanje na WordPress vilicu, ClassicPress. ClassicPress se fokusira tvrtke, stabilnost i sigurnost. Kompatibilan je s WordPress dodatcima i planira donijeti nove zanimljive značajke u njihova buduća izdanja. Check-out naš post: ClassicPress: Alternativa WordPressu bez Gutenberg & React.js
Ubrzajte WordPress
Kako je WordPress postao tako velik; više od platforme za bloganje. Gutenberg je dodao neke dodatne količine, kodove, datoteke na vašu web-lokaciju koje mogu usporiti vašu web-lokaciju. Ovo je detalj koji možete uputiti kako bi vam pomogao u prepoznavanju bolnih točaka na vašoj web-lokaciji i adresiranju najnovijih najboljih praksi u industriji.
Pregled Visual Code koda preglednika
Uređivač vizualnog koda koji dodaje pravi preglednik koji pokreće Chrome bez glave unutar koda Visual Studio. To vam omogućuje pregledajte svoj rad u stvarnom vremenu u uređivaču koda i omogućuje značajke kao što je uklanjanje pogrešaka u uređivaču.
Bundlesize
Bundlesize je alat za zadržite JavaScript datoteku Objedinjavanje veličinu pod kontrolom. Možete odrediti maksimalnu veličinu svake od datoteka u paketu i upozorit će vas kada je riječ o određenoj maksimalnoj veličini. Bundlesize može biti integriran s CI uslugama kao što su TravisCI i CircleCI za besprijekornu primjenu tijeka rada u vašem projektu.
WP Emerge
Moderno WordPress tematski okvir koji se temelji na MVC obrascu. Ako ste navikli raditi s PHP okvirom poput Laravel-a i Slim-a, siguran sam da ćete zaista cijeniti ovaj okvir. Možete koristiti stvari kao što su Router i Controller, DI Container i Middlerware.
Svjetionik Bot
Uslužni alat koji vam omogućuje da pokrenete Lighthouse u CI usluzi koristeći Docker. To je izvrstan alat automatizirajte provjeru uspješnosti web-lokacije svaki put kada unesete novu izmjenu u kôd vaše web-lokacije.
Saznajte React App
Saznajte React App je resurs za učenje React.js. No, za razliku od drugih resursa, to bi trebalo biti instaliran lokalno na vašem računalu. Ona ne sadrži samo materijale za učenje, nego i kodove i interaktivne uzorke. Najbolji dio je da to možete učiniti dok ste izvan mreže nakon što je instaliran.
WP prihvaćanje
WP Acceptance je novi alat koji vam omogućuje da izvršite testove prihvaćanja. Jednostavno rečeno, testovi prihvaćanja su nizovi testovi za oponašanje ponašanja korisnika. Postoji nekoliko okvira za obavljanje ove vrste testa.
Međutim, ako prvenstveno radite s WordPressom, cijenit ćete ovaj alat za jednostavnu upotrebu jer je dizajniran i prilagođen tipičnim WordPress projektima..
Sjajan
JavaScript biblioteka za oponašajte refleksiju rasvjete na vašoj web-lokaciji kada se gledaju na mobilnom uređaju. Možete vidjeti demo na https://pqina.nl/shiny/. Važno je napomenuti da će raditi samo u mobilnim uređajima jer se oslanja na određeni API koji je dostupan samo na mobilnim uređajima.
Reagirajte Lucid
ReactLucid je alat koji će vam pomoći debug React i GraphQL aplikacije na interaktivniji način. Omogućuje vam da vidite hijerarhiju komponenti, promjene stanja / rekvizita unutar vaše React aplikacije kao i GraphQL shemu, upite i mutacije u stvarnom vremenu.
CSS značajke Toggle
Chromeovo proširenje koje vam omogućuje onemogućite određene značajke CSS-a u Chromeu. Pomoću toga možete vidjeti kako će se vaša web-lokacija prikazivati i ponašati kada određene značajke ne postoje. Vrlo je korisno za implementaciju novih CSS značajki koje možda nisu implementirane u svim preglednicima.
Blendy
Alat koji vam može pomoći prilagodite CSS načine miješanja pozadine sa svojom slikom. Možete pregledati načine miješanja, mijenjati boje i primijeniti gradijente. Možete koristiti slike iz programa Unsplash ili ih prenijeti s računala.
Reagirajte Elemental
Zbirka React elemenata koji djeluju odmah iz kutije. Nema vanjskog CSS-a za uvoz ili prilagodbu konfiguracija za dodavanje na Webpack. Ona dolazi s bitnim komponentama kao što su gumb, potvrdni okvir, SelectList, Tabs, Tooltip, i još mnogo toga.
FX
Ako često radite s JSON formatom, siguran sam da ćete cijeniti ovaj alat. fX je Alat naredbenog retka koji vam omogućuje vizualizaciju JSON podataka u terminalu s interaktivnim načinom. na način da možete proširiti ili sažeti podatke. fX može se instalirati preko NPM-a ili Homebrew-a.
Monica
Monica je u svojoj kategoriji. To je vrsta CRM-a (Customer Relationship Manager), ali nije namijenjena vašim klijentima, već vašim voljenima kao što su vaša obitelj i prijatelji.
Poput CRM-a, omogućuje vam praćenje stvari kao što su vaše aktivnosti s njima, i kada ste ih zadnji put nazvali itd. Čak i više, može se postaviti tako da vas podsjeti da pozovete nekoga s kim niste razgovarali neko vrijeme. Nazivaju je PRM (upravitelj osobnih odnosa).
Ionski okvir
Ionski okvir je već neko vrijeme prisutan. No, u posljednje vrijeme, napravila je veliki skok u svojoj funkcionalnosti. Sada ne samo da je sada brža nego ionska kompatibilan s dva okvira zvijezda u usponu: React.js i Vue.js.
To postavlja temelj za jonsku da bude okvirni agnostički alat. Dakle, ne samo da radi za određene okvire, nego može raditi i s novim, budući da se razvoj front-end-a razvija u budućnosti.
značajan
Značajna je aplikacija za bilježenje bilježaka. Za razliku od bilo koje druge slične aplikacije, ona ne dolazi s vlasničkim oblikovanjem, WYSIWYG-om ili drugim tipičnim zvončićima. Uređivač aplikacija uglavnom pokreće Markdown s okusom u Githubu. Bilješke su pohranjene u ravnu datoteku .doktor medicine kao i privitak. Jednostavno radi i jednostavno.
TipTap
TipTap je WYSIWYG editor izgrađen na vrhu ProseMirror s Vue.js. Osim nasljeđivanja brojnih značajki iz ProseMirror iz kutije, kao što je strašna Markdown podrška za sintaksu, TipTap donosi nekoliko modernih značajki kao što je Bubble Menu gdje se izbornik oblikovanja pojavljuje kada označavate tekst, značajku Sugestija gdje možete označiti ili spomenuti tekst. osobu unutar sadržaja i izvezite mogućnost izvoza sadržaja u JSON formatiranju.
Restplain
Restplain je WordPress plugin koji vam omogućuje jednostavno generiranje dokumentacije vaših WordPress REST API krajnjih točaka, uključujući prilagođene krajnje točke na vašoj web-lokaciji, kao i obavljanje API poziva iz dokumenata. Jedna stvar koju treba primijetiti je da se oslanja na shemu krajnje točke za generiranje dokumentacije, stoga provjerite jeste li dodali odgovarajuću shemu za prilagođene krajnje točke.
Reagirajte sadržaj za učitavanje
Reagirajte sadržaj za učitavanje je prilagođena komponenta React koja vam omogućuje prikaz rezerviranog mjesta za sadržaj dok se stvarni sadržaj učitava. To je slično vrsti utovarivača koju vidite na Facebooku i Instagramu .
mitsko
Mythic je WordPress početna tema s modernim najboljim praksama kao što su Injekcija, Pogledi i Kontroleri ovisnosti, kao i moderno alata kao što je upotreba Webpack, Sass, Linting, PHP7 minimalni zahtjev i BEM. To je sjajna tema za poboljšanje svoje vještine kao razvojnog programera teme.
Rafinirani Github
Proširenje preglednika za poboljšanje vašeg iskustva prilikom korištenja Githuba. Dodaje nekoliko praktičnih hotkeys-a, poboljšava neke izglede i korisnička sučelja, automatski dodaje vezu s problemima i PR-ovima, i mnogo više.
Otvoreni WC
Otvoreni WC je skup alata koji vam omogućuju stvaranje Custom Web Component. To uključuje glavnu knjižnicu za stvaranje web-komponente, generatori Yeoman brzo generirati “Otvoreni WC” projekt, koji uključuje skelu za testiranje, ostavlja dlačice, i nastavak integracije.
Otvoreni WC može biti dobra alternativa ako želite preferiraju implementaciju s izvornom značajkom weba radije nego pomoću okvira poput Vue.js ili React.js.
Gridsome
Gridsome je alat za izgradnju statičkih web-mjesta i web-aplikacija s Vue.js i GraphQL. To je u mogućnosti to hvataljka više toka podataka kao što je iz CMS kao što su WordPress i Drupal, lokalne datoteke kao što su Markdown ili Yaml, ili vanjski API poput AirTable i Contentful. Ovo je zaista odlična alternativa za Gatsby.js, pogotovo ako preferirate Vue.js preko React.js.
Preglednik
Ovo je preglednik kojeg je zamislio i sam izumitelj World Wide Weba, Tim Berners-Lee. To je jednostavan preglednik za prikaz HTML-a i ne prikazuje adresnu traku poput modernog preglednika, ali možete je pregledati navigacijom do Dokument> Otvori iz potpune reference dokumenta i zalijepite URL i kliknite Otvorena. Vidjet ćete kako će se vaša web-lokacija prikazivati s izvornim preglednikom.
raster
Raster je moderni mrežni okvir koji je izgrađen modernim HTML i CSS specifikacijama kao što je CSS Grid, CSS Custom Property (Varijabla) i prilagođeni element. Savršen okvir za one koji vole živjeti na rubovima.
Bačvar
Komponenta Vue.js za dodavanje vrtuljka ili klizača. Dostupan je i upotrebljiv putem dodirnog zaslona, tipkovnice, kotačića miša i druge pomoćne navigacije, podržava RTL i vertikalni smjer, proširivo i naravno odgovor.
