Friske ressurser for webdesignere og utviklere (mars 2019)

Det har skjedd mye i løpet av de siste månedene i verden av webutvikling. For det første, den nye blokkbasert redaktør, kodenavnet Gutenberg, har endelig blitt slått sammen til WordPress 5.0. Det er en veldig stor forandring siden starten, da det setter et nytt fundament for WordPress å utvikle seg i fremtiden, og vil endre måten hvordan utviklere strekker seg for WordPress-funksjoner.

For det andre har noen av våre medarbeidere utviklet noen virkelig nyttige verktøy som en som tillater se JSON i terminal og et par React-biblioteker som kan vise stor hjelp i webdesign og utviklingsprosjekter.

Og til slutt, noen av de mest effektive ressurser, referanser og plugins har blitt lansert for å hjelpe deg med å oppdatere prosjektene dine i henhold til nyere trender.

La oss få den mest omfattende listen over nye webutviklingsressurser.

Gutenberg-håndboken

Den offisielle WordPress-håndboken hvor du kan slå opp referanser til designet, kode eksempler for å lage blokker og andre og en veiledning for å bidra til prosjektet. Det er din første referanse for utvikling med Gutenberg.

Blokker stillas

Med den blokkbaserte redaktøren gir WP-CLI nå en enkel måte å komme i gang med skaper en Gutenberg-blokk med en ny CLI-kommando, wp stillas blokk. Du kan opprette og inkludere den til eksisterende plugins og temaer.

CGB

En annen måte å enkelt starte opp en Gutenberg-blokk er Create Guten Block (CGB) er et verktøy til generer en boilerplate å utvikle en Gutenberg-blokk. Den består av moderne verktøy som React.js, Webpack, ESLint, Babel, etc. Den beste delen er at du trenger ikke å konfigurere noen av disse verktøyene så du kan bare fokusere på å skrive koden din.

Elementor Blokker for Gutenberg

Et WordPress-plugin som lar deg sett inn noen Elementor-maler og forhåndsvise det rett innenfor editoren. Pluggen kommer med mange andre kompatibiliteter som gir sømløs redigeringsopplevelse mellom Elementor og Gutenberg. Sjekk ut denne videoen for å se hvordan den gjør det.

Atomblokker

Et sett med Gutenberg blokker med et økende antall samlinger. På tidspunktet for denne skrivingen gir den “Post Grid Block” som tillater deg å Legg til en liste over innlegg på nettstedet ditt i et nettoppsett. Det er også en “Testimonial Block” som, som navnet antyder, å sette inn en referanse på siden. Sjekk ut de fulle forhåndsvisninger av Blokkene på denne siden.

Blokker Galleri

En iøynefallende blokk for å sette inn bildgalleriet, gir Block Gallery en sømløs opplevelse for å legge til bilder i innlegget ditt. Bare slipp bildene dine, stil gallerivisningen (Masonry-stil, Carousel eller Fullscreen), og det er alt satt. Det er for øyeblikket bare den beste Gallery Block for WordPress.

CoBlocks

En serie blokker fra samme forfatter som utviklet det ovennevnte Block Gallery, består CoBlocks av en rekke blokker som vil forbedre innholdet på nettstedet ditt med for eksempel Accordion, Prissetting Tabell, Gif, Click-to-Tweet, og flere blokker som skal legges til.

StagBlocks

En annen pakke med Gutenberg Blocks. Pluggen bringer en rekke interessante blokker som mange av dere vil sette pris på. Det inkluderer Stat Block som lar deg tilpasse statistikk i dine innlegg og sider. Nettstedskort som vil forhåndsvisning nettsted i en fancy kort-stil. Kodeblokk som vil gjengi kode med uthevet farge.

Otter Blocks

Også en samling av Gutenberg Blocks som “Google Maps Block” å sette inn et kart, “Vår Service Block” til sett inn en liste over tjenester med en knapp i en rutenettvisning, og “Testimonials Area Block” å sette inn en liste over testimonials. Otter Block er en samling av Gutenberg Blocks som bedrifter og temautvikler vil sette pris på.

Avanserte Gutenberg-blokker

Denne plugin kommer med en håndfull avanserte blokker for å berike innholdet ditt for eksempel den automatisk genererte innholdsfortegnelsen, “Giphy Blocks” å inkludere GIF-bilde fra Giphy.com, “Unsplash Block” å sette inn bilder fra Unsplash.com, “Bannerannonseblokk”, WooCommerce “Add-to-Cart Button Block”, og mye mer.

Block Lab

Block Lab gjør det enkelt for utviklere å lage en Gutenberg-blokk. Pluggen lar deg registrer en ny blokk med en brukervennlig GUI og maler i PHP. Du trenger ikke engang å lære React.js.

EDD-blokker

Et plugin som lar deg lage Easy Digital Downloads-produkter i Gutenberg-editoren. I motsetning til bruk av kortnummer, vil blokken vise produktvisninger.

Test Gutenberg

Ikke klar til å installere Gutenberg plugin eller oppdatere nettstedet ditt til WordPress 5.0? Du kan bare Last inn dette nettstedet for å prøve den nye editoren.

Gutenberg Cloud

Det er som en AppStore for Gutenberg Blocks. Et sentralt sted hvor du kan få Gutenberg Blokker som kan brukes i WordPress og Drupal. Ja, Drupal kommer også til å vedta Gutenberg-redaktøren for deres redaktør.

Gutenberg Eksempler

Et Github-lager av kodeprøver for å lage Gutenberg Blocks. Her finner du enkleste blokk til et mer komplekst eksempel, som for eksempel å lage en “Oppskrift blokk” som setter en mal i redaktøren for brukere å legge til oppskrift innhold. En god referanse for de som foretrekker å lære av virkelige eksempler, snarere enn en tekstbok.

GutenbergJS

JavaScript-bare versjonen av Gutenberg. Den er tilgjengelig som en NPM-pakke som lar deg integrere Gutenberg i et av JavaScript-programmene dine.

Deaktiver Gutenberg

Selv om Gutenberg gir nye muligheter til WordPress, men ikke alle er klare til det. Hvis de eksisterende nettstedene dine ikke fungerer bra med Gutenberg, kan du installere dette pluginet. Det tillater deg å deaktiver Gutenberg-editoren for bestemte innlegg, posttyper, brukerroller, temaer, samt deaktivere Gutenberg stilark i frontend.

Classic Editor

Alternativt kan du installere dette pluginet slik at du kan holde deg oppdatert til WordPress 5.0 mens du fortsetter å bruke den gamle klassiske editoren. Denne plugin vil bli støttet til 2022.

ClassicPress

Et annet alternativ er å bytte til en WordPress gaffel, ClassicPress. ClassicPress fokuserer på bedrifter, stabilitet og sikkerhet. Det er kompatibelt med WordPress plugins, og det planlegger å bringe nye interessante funksjoner i sine fremtidige utgivelser. Sjekk ut innlegget vårt: ClassicPress: Alternativ til WordPress uten Gutenberg & React.js

Fremskynde WordPress

Som WordPress er blitt så stor; mer enn bare en blogging plattform. Gutenberg, spesielt, har lagt til noen ekstra belastninger, koder, filer til nettstedet ditt som kan bremse nettstedet ditt. Dette er en detalj som du kan referere til for å hjelpe deg med å identifisere smertepoengene på nettstedet ditt og adressere det til de nyeste beste praksisene i bransjen.

Visual Studio Code Browser Preview

En Visual Code Editor som legger til en ekte nettleser drevet av Chrome Headless i Visual Studio Code. Dette tillater deg å forhåndsvise arbeidet ditt i sanntid rett inne i kodeditoren og aktiverer funksjoner som feilsøking i editor.

Bundlesize

Bundlesize er et verktøy til Hold JavaScript-filen din bundling størrelse i sjakk. Du kan definere maksimal størrelse på hver av den medfølgende filen, og den vil varsle deg når den er om eller bestått av den definerte maksimale størrelsen. Bundlesize kan integreres med en CI-tjeneste som TravisCI og CircleCI for sømløs distribusjon av arbeidsflyt i prosjektet ditt.

WP Emerge

En moderne WordPress tema rammeverk basert på MVC mønsteret. Hvis du er vant til å jobbe med et PHP-rammeverk som Laravel og Slim, er jeg sikker på at du virkelig vil sette pris på dette rammeverket. Du kan bruke ting som Router og Controller, DI Container og Middlerware.

Lighthouse Bot

Et verktøy som lar deg kjøre fyr i en CI-tjeneste ved hjelp av Docker. Det er et flott verktøy for automatiser nettstedet ditt ytelse checkup hver gang du trykker på en ny endring til nettstedskoden din.

Lær React App

Learn React App er en ressurs for å lære React.js. Men i motsetning til de andre ressursene der ute, bør dette være installert lokalt i datamaskinen. Det inneholder ikke bare læringsmateriell, men også kode og interaktive prøver. Den beste delen er at du kan gjøre det mens du er offline når den er installert.

WP-godkjenning

WP Acceptance er nytt et verktøy som lar deg utføre godkjenningstester. For å si det enkelt, er Acceptance Tests en serie av tester for å etterligne brukeradferd. Det finnes en rekke rammer der ute for å utføre denne typen test.

Men hvis du primært jobber med WordPress, vil du sette pris på dette verktøyet for enkel bruk som det er designet og skreddersydd for de typiske WordPress-prosjektene trenger.

Skinnende

Et JavaScript-bibliotek til etterligne lysrefleksjon på nettstedet ditt når det vises på mobilenhet. Du kan se demoen på https://pqina.nl/shiny/. Det er verdt å merke seg at det bare vil fungere i mobilenhet som det er avhengig av en bestemt API som bare er tilgjengelig i en mobilenhet.

Reakt Lucid

ReactLucid er et verktøy for å hjelpe deg feilsøk React og GraphQL applikasjoner på en mer interaktiv måte. Det lar deg se komponenthierarkiet, state / rekvisitaendringer i React-applikasjonen, samt GraphQL-skjemaet, spørringene og mutasjonene i sanntid.

CSS-funksjoner Bytt

En Chrome-utvidelse som lar deg deaktivere visse CSS-funksjoner i Chrome. Med dette kan du se hvordan nettstedet ditt vil gjengi og oppføre seg når visse funksjoner ikke eksisterer. Ganske nyttig for å hjelpe deg med å implementere nye CSS-funksjoner som kanskje ikke implementeres i alle nettleserne.

Blendy

Et verktøy som kan hjelpe deg tilpasse CSS bakgrunnsblandingsmodusene med bildet ditt. Du kan forhåndsvise blandemoduser, endre farger og bruke gradienter. Du kan bruke bilder fra Unsplash eller laste den opp fra datamaskinen.

Reakt Elemental

En samling av React-elementer som fungerer rett ut av esken. Ingen ekstern CSS for å importere eller tilpasse konfigurasjoner for å legge til på Webpack. Den kommer med viktige komponenter som knappen, avkrysningsboksen, velglisten, fanene, verktøylinjen og mye mer.

FX

Hvis du ofte jobber med JSON-formatert, er jeg sikker på at du vil sette pris på dette verktøyet. fx er en kommandolinjeverktøy som lar deg visualisere JSON-data i Terminal med interaktiv modus. på en måte som du kan utvide eller kollapse dataene. fx kan installeres via NPM eller Homebrew.

Monica

Monica er ganske på sin egen kategori. Det er en slags CRM (Customer Relationship Manager), men er ment ikke for kunden din, men for dine kjære som din familie og venner.

Som en CRM kan du holde oversikt over ting som dine aktiviteter med dem, og når du sist ringte dem osv. Enda mer kan det settes på å minne deg om å ringe noen du ikke har snakket om i en stund. De kaller det en PRM (Personal Relationship Manager).

Ionisk ramme

Ionisk rammeverk har faktisk eksistert en stund. Men i det siste har det gjort et ganske stort hopp i funksjonaliteten. Nå er det ikke bare at det er raskere, men ionisk er nå kompatibel med to stigende stjernerammer: React.js og Vue.js.

Dette legger grunnen til at ionisk skal være a rammeverk agnostisk verktøy. Så det er ikke bare det som fungerer for bestemte rammer, men kan også jobbe med de nye som utviklingen av frontendene utvikler seg i fremtiden.

Bemerkelsesverdig

Bemerkelsesverdig er et notatbordsskriveprogram. I motsetning til andre lignende apper, kommer den ikke med proprietær formatering, WYSIWYG eller andre typiske klokkene og fløyter. De App editor er hovedsakelig drevet av Github-flavored Markdown. Notater lagres i en flat fil .md filer samt vedlegget. Det fungerer bare og enkelt.

TipTap

TipTap er en WYSIWYG-editor bygget på toppen av ProseMirror med Vue.js. Bortsett fra å arve en rekke funksjoner fra ProseMirror ut av boksen, for eksempel den fantastiske Markdown-syntaxstøtten, bringer TipTap noen moderne funksjoner som menyboblen der formateringsmenyen vil vises når du fremhever tekst, Forslag-funksjonen der du kan merke eller nevne en person innenfor innholdet, og eksportere evnen til å eksportere innhold i JSON-formatering.

Restplain

Restplain er et WordPress-plugin som lar deg enkelt generere dokumentasjon av dine WordPress REST API-endepunkter, inkludert de egendefinerte endepunktene på nettstedet ditt, så vel som lage en API-samtale fra dokumentene. En ting å merke seg er at den er avhengig av sluttpunktsskjemaet for å generere dokumentasjonen, så sørg for at du har lagt til et riktig skjema for dine egendefinerte sluttpunkter.

Reager innholdslaster

Reager innholdslaster er en Reage-tilpasset komponent som lar deg vise innholdsplassholderen mens det faktiske innholdet lastes inn. Det ligner på typen laster som du ser på Facebook og Instagram .

Mythic

Mytisk er et WordPress starter tema med moderne beste praksis som Dependency Injection, Views og Controllers, samt moderne verktøy som bruk av Webpack, Sass, Linting, PHP7 minimumskrav, og BEM. Det er et flott tema for å utjevne din ferdighet som temautvikler.

Refined Github

En nettleserutvidelse for å finjustere opplevelsen din når du bruker Github. Den legger til flere praktiske hurtigtaster, forfiner noen layouter og brukergrensesnitt, legger automatisk til kobling til problemer og PR, og mye mer.

Åpen WC

Åpent WC er et sett med verktøy som lar deg lage tilpasset webkomponent. Det inkluderer hovedbiblioteket for å lage en webkomponent, Yeoman generatorer for raskt å generere en “Åpen WC” prosjekt, som inkluderer stillas for testing, linting, og fortsetter integrering.

Åpen toalett kan være et godt alternativ hvis du vil foretrekker å implementere med en innfødt webfunksjon heller enn å bruke et rammeverk som Vue.js eller React.js.

Gridsome

Gridsome er en verktøy for å bygge statiske nettsteder og webapplikasjoner med Vue.js og GraphQL. Det er i stand til å håndtere flere datastrømmer som fra CMS som WordPress og Drupal, en lokal fil som Markdown eller Yaml, eller ekstern API som AirTable og Contentful. Dette er et veldig godt alternativ til Gatsby.js, spesielt hvis du foretrekker Vue.js over React.js.

Nettleseren

Dette er nettleseren som forutsatt av verdensomspennende oppfinner selv, Tim Berners-Lee. Det er en enkel nettleser for å gjengi HTML og viser ikke adresselinjen som en moderne nettleser, men du kan vise ved å navigere til Dokument> Åpne fra full dokumentreferanse og lim inn en URL og klikk Åpen. Og der ser du hvordan nettstedet ditt vil gjengis med den opprinnelige nettleseren.

raster

Raster er et moderne gridramme som er bygget med moderne HTML og CSS-spesifikasjon som CSS Grid, CSS Custom Property (Variable) og egendefinert element. Et perfekt rammeverk for de som liker å leve på kantene.

Hooper

En Vue.js-komponent for å legge til en karusell eller skyveknapp. Den er tilgjengelig og brukbar via Touch, Keyboard, Mouse Wheel og annen assistent navigasjon, den støtter RTL og vertikal retning, utvidbar, og selvfølgelig svar.