Friske ressourcer til webdesignere og udviklere (marts 2019)
Der er sket meget i løbet af de sidste par måneder i webudviklingsverdenen. For det første den nye blokbaseret editor, kodenavnet Gutenberg, er endelig blevet slået sammen til WordPress 5.0. Det er en rigtig stor ændring siden starten, da det sætter et nyt fundament for, at WordPress udvikler sig i fremtiden, og vil ændre måden, hvordan udviklere udvider til WordPress-funktionaliteterne.
For det andet har et par af vores medhjælpere skabt nogle rigtig nyttige værktøjer som en, der tillader det se JSON i terminal og et par reaktionsbiblioteker, der kan vise sig stor hjælp i webdesign og udviklingsprojekter.
Og endelig, nogle af de mest effektive ressourcer, referencer og plugins er blevet lanceret for at hjælpe dig med at opdatere dine projekter i henhold til de nyere trends.
Lad os få den mest omfattende liste over nye webudviklingsressourcer.
Gutenberg Håndbog
Den officielle WordPress-håndbog, hvor du kan kigge op henvisninger til designet, kode eksempler til oprettelse af blokke og andre og en vejledning til at bidrage til projektet. Det er din første reference til udvikling med Gutenberg.
Bloker stillads
Med den blokbaserede editor giver WP-CLI nu en bekvem måde at komme i gang med oprettelse af en Gutenberg-blok med en ny CLI-kommando, wp stillads blok. Du kan oprette og inkludere det til dine eksisterende plugins og temaer.
CGB
En anden måde at nemt starte en Gutenberg-blok er Create Guten Block (CGB) er et værktøj til generer en kedelplade at udvikle en Gutenberg-blok. Den består af moderne værktøjer som React.js, Webpack, ESLint, Babel osv. Det bedste er, at du behøver ikke at konfigurere nogen af disse værktøjer så du kan bare fokusere på at skrive din kode.
Elementor Blokke til Gutenberg
Et WordPress-plugin, der giver dig mulighed for Indsæt Elementor skabeloner og se det direkte i editoren. Plugin leveres med mange andre kompatibiliteter, der giver problemfri redigering oplevelse mellem Elementor og Gutenberg. Tjek denne video for at se, hvordan den gør det.
Atomiske blokke
Et sæt Gutenberg blokke med et stigende antal indsamlinger. På tidspunktet for denne skrivning giver den “Post Grid Block” som giver dig mulighed for Tilføj en liste over indlæg på dit websted i et gitterlayout. Der er også en “Testimonial Block” som, som navnet antyder, at indsætte en testimonial inden for siden. Tjek de fulde forhåndsvisninger af Blocks på denne side.
Bloker Galleri
En iøjnefaldende blok for at indsætte dit billedgalleri, Block Gallery giver en problemfri oplevelse for at tilføje billeder til dit indlæg. Du skal bare slippe dine billeder, stil galleriets display (Masonry-stil, Carousel eller Fullscreen), og det er helt klart. Det er i øjeblikket simpelthen den bedste Gallery Block til WordPress.
co-blokke
En serie blokke fra den samme forfatter, der udviklede det ovennævnte Block Gallery, CoBlocks består af en række blokke, der vil forbedre dit indhold på webstedet med f.eks. Accordion, Prissætningstabel, Gif, Click-to-Tweet, og flere blokke skal tilføjes.
StagBlocks
En anden pakke Gutenberg Blocks. Pluginet giver et antal interessante blokke, som mange af jer ville sætte pris på. Det inkluderer Stat Block, som giver dig mulighed for at tilpasse statistikker inden for dine indlæg og sider. Website Card Block som vil preview hjemmeside i en fancy kort-stil. Kode Blok, som vil gøre kode med fremhævet farve.
Otter Blocks
Også en samling af Gutenberg Blocks som f.eks “Google Maps Block” at indsætte et kort, “Vores Service Block” til Indsæt en liste over tjenester med en knap i en rutenvisning, og “Testimonials Area Block” at indsætte en liste over udtalelser. Otter Block er en samling af Gutenberg Blocks, som virksomheder og temaudvikler ville sætte pris på.
Avancerede Gutenberg blokke
Denne plugin kommer med en håndfuld af avancerede blokke for at berige dit indhold f.eks. den automatisk genererede indholdsfortegnelse, “Giphy Blocks” at inkludere GIF billede fra Giphy.com, “Unsplash Block” at indsætte billeder fra Unsplash.com, “Banner Ad Block”, WooCommerce “Add-to-Cart Button Block”, og meget mere.
Block Lab
Block Lab gør det nemt for udviklere at oprette en Gutenberg Block. Med plugin kan du registrer en ny blok med en brugervenlig GUI og skabeloner i PHP. Du behøver ikke engang at lære React.js.
EDD-blokke
Et plugin, der giver dig mulighed for at lave Easy Digital Downloads produkter i Gutenberg editor. I modsætning til brug af kortnummeret viser blokken produktvisninger.
Test Gutenberg
Ikke klar til at installere Gutenberg plugin eller opdatere dit websted til WordPress 5.0? Du kan simpelthen Indlæs dette websted for at prøve den nye editor.
Gutenberg Cloud
Det er som en AppStore for Gutenberg Blocks. Et centralt sted hvor du kan få Gutenberg Blocks, der kan bruges i WordPress og Drupal. Ja, Drupal vil også vedtage Gutenberg-redaktøren for deres redaktør.
Gutenberg Eksempler
Et Github-lager af kodeprøver for at skabe Gutenberg Blocks. Her kan du finde enkleste blok til et mere komplekst eksempel, som den til at skabe en “Opskrift Blok” som sætter en skabelon i editoren for brugere at tilføje opskrift indhold. En god reference til dem, der foretrækker at lære af rigtige eksempler, snarere end en lærebog.
GutenbergJS
JavaScript-kun versionen af Gutenberg. Den er tilgængelig som en NPM-pakke, som giver dig mulighed for at integrere Gutenberg i et af dine JavaScript-applikationer.
Deaktiver Gutenberg
Selvom Gutenberg bringer nye muligheder til WordPress, men ikke alle er klar til det. Hvis dine eksisterende websteder ikke fungerer godt med Gutenberg, kan du installere dette plugin. Det giver dig mulighed for deaktiver Gutenberg-editoren til bestemte indlæg, posttyper, brugerroller, temaer, samt deaktivere Gutenberg stylesheets i front-end.
Classic Editor
Alternativt kan du installere dette plugin, så du kan holde dig opdateret til WordPress 5.0, mens du fortsætter med at bruge den gamle klassiske editor. Dette plugin understøttes til 2022.
ClassicPress
Et andet alternativ er at skifte til en WordPress gaffel, ClassicPress. ClassicPress fokus er på virksomheder, stabilitet og sikkerhed. Det er kompatibelt med WordPress plugins, og det planlægger at bringe nye interessante funktioner i deres fremtidige udgivelser. Tjek vores indlæg: ClassicPress: Alternativ til WordPress uden Gutenberg & React.js
Fremskynde WordPress
Som WordPress er blevet så stor; mere end blot en blogging platform. Gutenberg har især tilføjet nogle ekstra belastninger, koder, filer til dit websted, der kan bremse dit websted. Dette er en detaljer, som du kan henvise til, hjælper dig med at identificere smertepunkterne på dit websted og henvende dig til den nyeste bedste praksis i branchen.
Visual Studio Code Browser Preview
En Visual Code Editor, der tilføjer en reel browser, der drives af Chrome Headless inden for Visual Studio Code. Dette giver dig mulighed for Forhåndsvisning af dit arbejde i realtid lige inde i kodeditoren og aktiverer funktioner som in-editor debugging.
Bundlesize
Bundlesize er et værktøj til Hold din JavaScript-fil bundling størrelse i tjek. Du kan definere den maksimale størrelse af hver af din bundtede fil, og den vil advare dig, når den er omkring eller bestået den definerede maksimale størrelse. Bundlesize kan integreres med en CI service som TravisCI og CircleCI til problemfri implementering af workflow i dit projekt.
WP Emerge
En moderne WordPress tema ramme baseret på MVC mønster. Hvis du er vant til at arbejde med en PHP-ramme som Laravel og Slim, er jeg sikker på, at du virkelig vil sætte pris på denne ramme. Du kan bruge ting som Router og Controller, DI Container og Middlerware.
Lighthouse Bot
Et hjælpeværktøj, der giver dig mulighed for at køre fyr i en CI-tjeneste ved hjælp af Docker. Det er et godt værktøj til automatiser din website præstation checkup hver gang du skubber en ny ændring til din hjemmeside kode.
Lær React App
Learn React App er en ressource til at lære React.js. Men i modsætning til de andre ressourcer derude, bør dette være installeret lokalt i din computer. Det indeholder ikke kun læringsmaterialer, men også kode og interaktive prøver. Det bedste er, at du kan gøre det, mens offline, når det er installeret.
WP Acceptance
WP Acceptance er nyt et værktøj, der giver dig mulighed for at udføre accepttest. For at sige det, er Acceptance Tests en serie af tests til at efterligne brugeradfærd. Der er en række rammer derude til at udføre denne type test.
Men hvis du primært arbejder med WordPress, vil du sætte pris på dette værktøj for nem brug, da det er designet og skræddersyet til de typiske WordPress-projekter, der er behov for.
Skinnende
Et JavaScript-bibliotek til emulere belysningsrefleksion på dit websted, når det ses på mobilenhed. Du kan se demoen på https://pqina.nl/shiny/. Det er værd at bemærke, at det kun vil fungere i mobilenheden, da den afhænger af en bestemt API, der kun er tilgængelig i en mobilenhed.
Reag Lucid
ReactLucid er et værktøj til at hjælpe dig debug React og GraphQL applikationer på en mere interaktiv måde. Det giver dig mulighed for at se komponenthierarkiet, state / rekvisitter ændringer inden for din React applikation samt GraphQL skemaet, forespørgsler og mutationer i realtid.
CSS Funktioner Skift
En Chrome-udvidelse, der giver dig mulighed for deaktiver visse CSS-funktioner i Chrome. Med dette kan du se, hvordan dit websted vil gøre og opføre sig, når visse funktioner ikke findes. Ganske nyttigt at hjælpe dig med at implementere nye CSS-funktioner, der muligvis ikke implementeres i alle browsere.
Blendy
Et værktøj, der kan hjælpe dig Tilpas CSS baggrundsblandingsfunktioner med dit billede. Du kan forhåndsvise blandingstilstande, ændre farver og anvende gradienter. Du kan bruge billeder fra Unsplash eller uploade det fra computeren.
Reakt Elemental
En samling af React-elementer, der virker lige ud af kassen. Ingen ekstern CSS til at importere eller tilpasse konfigurationer, der skal tilføjes på Webpack. Den leveres med vigtige komponenter som knappen, afkrydsningsfeltet, valgliste, faner, værktøjstip og meget mere.
FX
Hvis du ofte beskæftiger dig med JSON-formateret, er jeg sikker på, at du vil sætte pris på dette værktøj. FX er en kommandolinjeværktøj, der giver dig mulighed for at visualisere JSON-data i Terminal med interaktiv tilstand. på en måde, som du kan udvide eller sammenbruge dataene. FX kan installeres via NPM eller Homebrew.
Monica
Monica er helt i sin egen kategori. Det er en slags CRM (Customer Relationship Manager), men menes ikke til din kunde, men for dine kære som din familie og venner.
Som en CRM kan du holde øje med ting som dine aktiviteter med dem, og når du sidst ringede til dem osv. Endnu mere kan det indstilles til at minde dig om at ringe til en person, du ikke har talt med i et stykke tid. De kalder det en PRM (Personal Relationship Manager).
Ioniske ramme
Ioniske rammer har faktisk eksisteret i et stykke tid. Men i det seneste har det gjort et stort spring i sin funktionalitet. Nu ikke kun det er hurtigere, men ionisk er nu kompatibel med to stigende stjernerammer: React.js og Vue.js.
Dette lægger grunden til, at ionisk er en ramme agnostisk værktøj. Så det er ikke kun det, der fungerer for bestemte rammer, men kan også arbejde med de nye, da front-end-udviklingen udvikler sig i fremtiden.
Bemærkelsesværdig
Bemærkelsesværdigt er et notesbemærket skrivebordsprogram. I modsætning til enhver anden lignende app, kommer den ikke med proprietær formatering, WYSIWYG eller andre typiske klokker og fløjter. Det app editor er primært drevet af Github-flavored Markdown. Noter gemmes i en flad fil .md filer samt vedhæftet fil. Det virker bare og simpelt.
Tiptap
TipTap er en WYSIWYG editor bygget oven på ProseMirror med Vue.js. Bortset fra at arve en række funktioner fra ProseMirror ud af boksen, som den fantastiske Markdown-syntax-understøttelse, bringer TipTap nogle moderne funktioner som Menu Bubble, hvor formateringsmenuen vises, når du fremhæver tekst, forslaget, hvor du kan mærke eller nævne en person inden for indholdet og eksporterer evnen til at eksportere indhold i JSON formatering.
Restplain
Restplain er et WordPress-plugin, der giver dig mulighed for nemt at generere dokumentation af dine WordPress REST API-slutpunkter, herunder de brugerdefinerede endepunkter på dit websted såvel som laver et API-opkald indefra docs. En ting at bemærke er, at den er afhængig af endpoint-skemaet for at generere dokumentationen, så sørg for at du har tilføjet et ordentligt skema for dine brugerdefinerede slutpunkter.
Reag Content Loader
Reag Content Loader er en brugerdefineret komponent, der giver dig mulighed for at vise indholdspladsholderen, mens det faktiske indhold bliver indlæst. Det ligner den type læsser, du ser på Facebook og Instagram .
Mythic
Mytisk er et WordPress starter tema med moderne bedste praksis som afhængighed Injection, Views og Controllers, samt moderne værktøj som brugen af Webpack, Sass, Linting, PHP7 minimumskrav og BEM. Det er et godt tema at udnytte din færdighed som temaudvikler.
Raffineret Github
En browserudvidelse for at forbedre din oplevelse, når du bruger Github. Det tilføjer flere handy hotkeys, forfiner nogle layouts og brugergrænseflader, tilføjer automatisk link til problemer og PR'er og meget mere.
Åbent toilet
Åbent toilet er et sæt værktøjer, der giver dig mulighed for at oprette brugerdefineret webkomponent. Det omfatter hovedbiblioteket til at oprette en webkomponent, Yeoman generatorer til hurtigt at generere en “Åbent toilet” projekt, der omfatter stillads til testning, linting, og fortsætter integrationen.
Åbent toilet kan være et godt alternativ, hvis du vil foretrækker implementering med en native web-funktion snarere end at bruge en ramme som Vue.js eller React.js.
Gridsome
Gridsome er en værktøj til at opbygge statiske hjemmesider og webapplikationer med Vue.js og GraphQL. Det er i stand til at håndtere flere datastrømme, såsom fra CMS som WordPress og Drupal, en lokal fil som Markdown eller Yaml, eller ekstern API som AirTable og Contentful. Dette er et rigtig godt alternativ til Gatsby.js, især hvis du foretrækker Vue.js over React.js.
Browseren
Dette er browseren som forestillet af World Wide Web opfinder selv, Tim Berners-Lee. Det er en simpel browser til at gengive HTML og viser ikke en adresselinje som en moderne browser, men du kan se ved at navigere til Dokument> Åben fra fuld dokumentreference og indsæt i en webadresse og klik Åben. Og der vil du se, hvordan dit websted vil gøre med den oprindelige browser.
Raster
Raster er en moderne grid ramme, der er bygget med moderne HTML og CSS specifikation som CSS Grid, CSS Custom Property (Variable) og brugerdefineret element. En perfekt ramme for dem der kan lide at leve på kanterne.
Hooper
En Vue.js komponent til at tilføje en karrusel eller skyder. Den er tilgængelig og brugbar via Touch, Keyboard, Mouse Wheel og anden hjælpefunktion, den understøtter RTL og vertikal retning, udvidelig og selvfølgelig svar.
