Friska resurser för webbdesigners och utvecklare (mars 2019)

Mycket har hänt under de senaste månaderna i webutvecklingsvärlden. För det första den nya blockbaserad redaktör, kodnamn Gutenberg, har äntligen blivit sammanslagna i WordPress 5.0. Det är en riktigt stor förändring sedan starten, eftersom den skapar en ny grund för att WordPress ska utvecklas i framtiden och kommer att förändra hur utvecklarna sträcker sig för WordPress-funktioner.

För det andra har några av våra medarbetare skapat några riktigt användbara verktyg som en som tillåter visa JSON i terminal och ett par React-bibliotek som kan visa stor hjälp i webbdesign och utvecklingsprojekt.

Och till sist, några av de mest effektiva resurser, referenser och plugins har lanserats för att hjälpa dig att uppdatera dina projekt enligt de nyare trenderna.

Låt oss få fram den mest omfattande listan över nya webbutvecklingsresurser.

Gutenberg Handbook

Den officiella WordPress handboken där du kan leta upp referenser för designen, kod exempel för att skapa block och andra och en guide för att bidra till projektet. Det är din första referens för att utvecklas med Gutenberg.

Blockera byggnadsställningen

Med den blockbaserade redaktören erbjuder WP-CLI nu ett bekvämt sätt att komma igång med skapa ett Gutenberg-block med ett nytt CLI-kommando, wp ställningsblock. Du kan skapa och inkludera det i dina befintliga plugins och teman.

CGB

Ett annat sätt att enkelt starta ett Gutenberg-block är Create Guten Block (CGB) är ett verktyg till generera en panna att utveckla ett Gutenberg-block. Den består av moderna verktyg som React.js, Webpack, ESLint, Babel, etc. Det bästa är att du behöver inte konfigurera något av dessa verktyg så du kan helt enkelt fokusera på att skriva din kod.

Elementorblock för Gutenberg

Ett WordPress-plugin som tillåter dig att sätt in Elementor mallar och förhandsgranska den direkt i redigeraren. Pluggen kommer med många andra kompatibiliteter som tillhandahåller sömlös redigeringsupplevelse mellan Elementor och Gutenberg. Kolla in den här videon för att se hur den går i aktion.

Atomblåsor

En uppsättning Gutenbergblock med ett växande antal samlingar. Vid tidpunkten för detta skrift tillhandahåller den “Post Grid Block” vilket tillåter dig att lägg till en lista med inlägg på din webbplats i en rutnätlayout. Det finns också en “Testimonial Block” som, som namnet antyder, sätter in en testimonial inom sidan. Kolla in de fullständiga förhandsgranskningarna av blocken på den här sidan.

Blockera galleriet

Ett iögonfallande block för att infoga ditt bildgalleri, Block Gallery ger en sömlös upplevelse för att lägga till bilder i ditt inlägg. Helt enkelt släppa dina bilder, utforma bildskärmen (Masonry-stil, Carousel eller Fullscreen), och det är helt klart. Det är just nu det bästa galleriblocket för WordPress.

CoBlocks

En serie block från samma författare som utvecklat det ovan nämnda Block Gallery, CoBlocks består av ett antal block som förbättrar webbplatsens innehåll med t.ex. Accordion, Prissättningstabellen, Gif, Click-to-Tweet, och fler block att läggas till.

StagBlocks

En annan serie Gutenberg Blocks. Pluggen ger ett antal intressanta block som många av er vill uppskatta. Det inkluderar Stat Block som låter dig anpassa statistik inom dina inlägg och sidor. Website Card Block som kommer förhandsgranskningswebbplats i en snygg kortstil. Kod Block som kommer att göra kod med markerad färg.

Otter Blocks

Också en samling av Gutenberg Blocks som “Google Maps Block” för att infoga en karta, “Vårt serviceblock” till infoga en lista med tjänster med en knapp i en rutnätvy, och “Testimonials Area Block” att infoga en lista med testimonials. Otter Block är en samling av Gutenberg Blocks som företag och temat utvecklare skulle uppskatta.

Avancerade Gutenberg Blocks

Denna plugin kommer med en handfull avancerade block för att berika ditt innehåll till exempel den automatiskt genererade innehållsförteckningen, “Giphy Blocks” att inkludera GIF-bild från Giphy.com, “Unsplash Block” att infoga bilder från Unsplash.com, “Banner Ad Block”, WooCommerce “Knappen Block-till-korg”, och mycket mer.

Block Lab

Block Lab gör det enkelt för utvecklare att skapa ett Gutenberg-block. Med plugin kan du registrera ett nytt block med en användarvänlig GUI och mallar i PHP. Du behöver inte ens lära dig React.js.

EDD-block

En plugin som låter dig göra Easy Digital Downloads-produkter i Gutenberg-redigeraren. Till skillnad från att använda kortnumret kommer blocket att visa produktvyer.

Testa Gutenberg

Är du inte redo att installera Gutenberg-plugin eller uppdatera din webbplats till WordPress 5.0? Du kan helt enkelt ladda den här sidan för att prova den nya redigeraren.

Gutenberg Cloud

Det är som en AppStore för Gutenberg Blocks. En central plats där du kan få Gutenberg Blocks som kan användas i WordPress och Drupal. Ja, Drupal kommer också att anta Gutenberg-redaktören för deras redaktör.

Gutenberg-exempel

Ett Github-förråd av kodprover för att skapa Gutenberg Blocks. Här hittar du enklast Block till ett mer komplext exempel, som den som skapar en “Recept Block” som sätter en mall i redigeraren för användare att lägga till recept innehåll. En bra referens för de som föredrar att lära sig av riktiga exempel, snarare än en textbok.

GutenbergJS

Den JavaScript-bara versionen av Gutenberg. Den är tillgänglig som ett NPM-paket som låter dig integrera Gutenberg i någon av din JavaScript-applikation.

Inaktivera Gutenberg

Även om Gutenberg ger nya möjligheter till WordPress, men inte alla är redo för det. Om dina befintliga webbplatser inte fungerar bra med Gutenberg kan du installera det här plugin. Det tillåter dig att inaktivera Gutenberg-redigeraren för specifika inlägg, posttyper, användarroller, teman, samt inaktivera Gutenberg stylesheets i fronten.

Classic Editor

Alternativt kan du installera det här plugin så att du kan hålla dig uppdaterad till WordPress 5.0 medan du fortsätter använda den gamla klassiska redigeraren. Denna plugin kommer att stödjas fram till 2022.

ClassicPress

Ett annat alternativ är att byta till en WordPress gaffel, ClassicPress. ClassicPress fokuserar på företag, stabilitet och säkerhet. Det är kompatibelt med WordPress plugins och det planerar att få nya intressanta funktioner i sina framtida utgåvor. Kolla in vårt inlägg: ClassicPress: Alternativ till WordPress utan Gutenberg & React.js

Snabba upp WordPress

Som WordPress har blivit så stor; mer än bara en bloggplattform. Gutenberg har speciellt lagt till några extra belastningar, koder, filer till din webbplats som kan sakta ner din webbplats. Det här är en detalj som du kan hänvisa till för att hjälpa dig att identifiera smärtpunkterna på din webbplats och ta itu med den senaste bästa praxis i branschen.

Preview för Visual Studio Code Browser

En visuell kodredigerare som lägger till en riktig webbläsare som drivs av Chrome Headless inom Visual Studio Code. Detta gör att du kan förhandsgranska ditt arbete i realtid precis inuti kodredigeraren och aktiverar funktioner som debugging i editor.

Bundlesize

Bundlesize är ett verktyg till behåll din JavaScript-fil buntning storlek i kontrollen. Du kan definiera den maximala storleken på var och en av din medföljande fil och den kommer att varna dig när den är om eller passerat den definierade maximala storleken. Bundlesize kan integreras med en CI-tjänst som TravisCI och CircleCI för sömlös utplacering av arbetsflöde i ditt projekt.

WP Emerge

En modern WordPress-temastrukturen baserad på MVC-mönstret. Om du är van att arbeta med en PHP-ram som Laravel och Slim, är du säker på att du verkligen kommer att uppskatta denna ram. Du kan använda saker som Router och Controller, DI Container och Middlerware.

Lighthouse Bot

Ett verktyg som låter dig köra fyr i en CI-tjänst med Docker. Det är ett bra verktyg för automatisera din webbplats prestanda checkup varje gång du trycker på en ny ändring till din hemsida kod.

Lär dig React App

Lär dig React App är en resurs för att lära dig React.js. Men till skillnad från andra resurser där ute, borde det vara installerad lokalt i din dator. Det innehåller inte bara inlärningsmaterial utan kodar också och interaktiva prover. Det bästa är att du kan göra det medan offline när det är installerat.

WP Acceptance

WP Acceptance är nytt ett verktyg som låter dig utföra acceptanstest. För att uttrycka det enkelt är Acceptance Tests en serie av tester för att emulera användarbeteende. Det finns ett antal ramar där ute för att utföra denna typ av test.

Men om du arbetar främst med WordPress, uppskattar du det här verktyget för enkel användning eftersom det är utformat och skräddarsydd för de typiska WordPress-projekten behöver.

Skinande

Ett JavaScript-bibliotek till emulera ljusreflektion på din webbplats när den ses på mobilenhet. Du kan se demo på https://pqina.nl/shiny/. Det är värt att notera att det bara kommer att fungera i mobilenhet eftersom den är beroende av ett visst API som endast är tillgängligt i en mobilenhet.

React Lucid

ReactLucid är ett verktyg som hjälper dig felsöka React och GraphQL applikationer på ett mer interaktivt sätt. Det låter dig se komponenthierarkin, status / rekvisita förändringar inom din React-applikation samt GraphQL-schemat, frågorna och mutationer i realtid.

CSS Funktioner Växla

En Chrome-förlängning som tillåter dig att inaktivera vissa CSS-funktioner i Chrome. Med detta kan du se hur din webbplats kommer att göra och uppträda när vissa funktioner inte existerar. Ganska användbart för att hjälpa dig att implementera nya CSS-funktioner som inte kan implementeras i alla webbläsare.

Blendy

Ett verktyg som kan hjälpa dig Anpassa CSS-bakgrundsblandningslägen med din bild. Du kan förhandsgranska blandningslägen, ändra färger och tillämpa gradienter. Du kan använda bilder från Unsplash eller ladda upp den från datorn.

Reakt Elemental

En samling av React-element som fungerar direkt ur lådan. Ingen extern CSS för att importera eller anpassa konfigurationer för att lägga till på Webpack. Den kommer med viktiga komponenter som knappen, kryssrutan, listrutan, flikar, verktygstips och mycket mer.

FX

Om du ofta hanterar JSON-formaterad, är jag säker på att du kommer att uppskatta detta verktyg. fx är en kommandoradsverktyg som låter dig visualisera JSON-data i Terminal med interaktivt läge. på ett sätt som du kan expandera eller kollapsa data. fx kan installeras via NPM eller Homebrew.

Monica

Monica är ganska egen. Det är en sort av CRM (Customer Relationship Manager) men menas inte för din kund men för dina nära och kära som din familj och dina vänner.

Som en CRM kan du hålla reda på saker som dina aktiviteter med dem och när du senast ringde dem osv. Ännu mer kan det sättas på att påminna dig om att ringa någon som du inte har pratat med på ett tag. De kallar det en PRM (Personal Relationship Manager).

Joniska ramverket

Ioniska ramar har faktiskt funnits en stund. Men på senare tid har det gjort ett ganska stort hopp i sin funktionalitet. Nu är det inte bara det det är snabbare, men joniska är nu kompatibel med två stigande stjärnramar: React.js och Vue.js.

Detta lägger grunden för att joniska är en ramar agnostiskt verktyg. Så det är inte bara det som fungerar för vissa ramar men kan också arbeta med de nya som utvecklingen i framsidan utvecklas i framtiden.

Anmärkningsvärd

Anmärkningsvärt är ett anteckningsbordsprogram. Till skillnad från alla andra liknande appar, kommer den inte med proprietär formatering, WYSIWYG eller andra typiska klockor och visselpipor. De Appredaktör drivs huvudsakligen av Github-flavored Markdown. Anteckningar lagras i en platt fil .md filer samt bilagan. Det fungerar bara och enkelt.

TipTap

TipTap är en WYSIWYG-redaktör byggd ovanpå ProseMirror med Vue.js. Bortsett från att få en rad funktioner från ProseMirror ut ur rutan, till exempel den fantastiska Markdown-syntaxstöd, ger TipTap några moderna funktioner som menybubblan där formateringsmenyn kommer att visas när du markerar text, förslaget där du kan märka eller nämna en person inom innehållet och exportera förmåga att exportera innehåll i JSON-formatering.

Restplain

Restplain är ett WordPress-plugin som gör att du enkelt kan skapa dokumentation för dina WordPress REST API-ändpunkter, inklusive de anpassade ändpunkterna på din webbplats samt gör ett API-samtal från dokumenten. En sak att notera är att den bygger på slutpunktschemat för att generera dokumentationen, så se till att du har lagt till ett ordentligt schema för dina anpassade slutpunkter.

Reagera Content Loader

Reagera Content Loader är en React-anpassad komponent som låter dig visa innehållsplatshållare medan det faktiska innehållet laddas. Det liknar typen av lastare som du ser på Facebook och Instagram .

Mythic

Mytisk är ett WordPress-starttema med moderna bästa metoder, såsom Dependency Injection, Views och Controllers, samt moderna verktyg som användning av Webpack, Sass, Linting, PHP7 minimikrav och BEM. Det är ett utmärkt tema för att jämföra din skicklighet som temat utvecklare.

Raffinerad Github

En webbläsareutvidgning för att förfina din upplevelse när du använder Github. Det lägger till flera praktiska snabbtangenter, fördrar vissa layouter och användargränssnitt, lägger automatiskt till länk till problem och PR, och mycket mer.

Öppen toalett

Öppna WC är en uppsättning verktyg som låter dig skapa en anpassad webbkomponent. Det innehåller huvudbiblioteket för att skapa en webbkomponent, Yeoman-generatorer för att snabbt generera en “Öppen toalett” projekt, vilket inkluderar byggnadsställningen för testning, luddning, och fortsätter integrationen.

Öppna WC kan vara ett bra alternativ om du skulle föredra att implementera med en inbyggd webbfunktion snarare än att använda en ram som Vue.js eller React.js.

Gridsome

Gridsome är a verktyg för att bygga statiska webbplatser och webbapplikationer med Vue.js och GraphQL. Det kan hantera flera dataströmmar som från CMS som WordPress och Drupal, en lokal fil som Markdown eller Yaml, eller externt API som AirTable och Contentful. Detta är ett riktigt bra alternativ till Gatsby.js, speciellt om du föredrar Vue.js över React.js.

Webbläsaren

Det här är webbläsaren som föreslagits av World Wide Web-uppfinnaren själv, Tim Berners-Lee. Det är en enkel webbläsare för att göra HTML och visar inte en adressfält som en modern webbläsare men du kan visa genom att navigera till Dokument> Öppna från fullständig dokumentreferens och klistra in i en URL och klicka på Öppna. Och där ser du hur din webbplats kommer att göra med den ursprungliga webbläsaren.

raster

Raster är ett modernt rutnätverk som är byggt med modern HTML och CSS-specifikation som CSS Grid, CSS Custom Property (Variable) och anpassat element. En perfekt ram för dem som gillar att leva på kanterna.

Hooper

En Vue.js komponent för att lägga till en karusell eller slider. Den är tillgänglig och användbar genom Touch, Keyboard, Mouse Wheel och annan assistentnavigering, den stöder RTL och vertikal riktning, utökningsbar och naturligtvis svar.