Friska resurser för webbdesigners och utvecklare (januari 2018)

Det nya året 2018 är här. Om vi ​​tittar på utvecklingen i webbutveckling för fem år sedan, är det helt annorlunda än vad vi har idag. Idag finns det nya metoder, verktyg och till och med ett helt nytt paradigm Det förändrar hur vi bygger webbplatser idag - och VirtualDOM är en av dem.

DOM (Document Object Model) är en trädmodell som definierar hur en webbplats är strukturerad. Att välja, korsa och manipulera DOM kan vara en mycket dyr upprepa och kan hämma din webbplatss reningsprestanda.

Men i det här inlägget kommer vi inte att diskutera hur VirtualDOM fungerar, istället, tillsammans med de andra verktygen, kommer vi att titta in bibliotek som låter dig implementera VirtualDOM direkt. Låt oss kolla in dem.

MaquetteJS

En implementering av VirtualDOM som låter dig bygga vätskanvändargränssnitt som håller uppdateringen med data runt den. Det är en ren JavaScript och unopiniated bibliotek så är det möjligt att använd den tillsammans med ett syntetiskt språk som CoffeeScript, TypeScript och JSX. Ett bra alternativbibliotek till React.js; MaquetteJS är mycket mindre i storlek (endast 3kb) jämförbart.

ReDOM

Det här är en av mina favorit virtuella bibliotek, eftersom det är lätt att hämta det bara genom att titta på syntaxen. Med bara 2Kb, Du kan bygga en snabbleveranswebbplats eller anpassad HTML-komponent. Biblioteket består av två primära funktioner el, att skapa eller manipulera ett element, och montera för att lägga till det i ett valt element. Du kan ladda den i webbläsaren och serverns sida med NodeJS.

ReactiveJS

En templating UI-bibliotek för att bygga en mycket interaktiv webbapplikation. ReactiveJS är ursprungligen byggt för TheGuardian, och är byggt för att fungera över webbläsare och mobila enheter. så du kan lita på dess tillförlitlighet. ReactiveJS kommer också med många funktioner som behövs för moderna webbapplikationer direkt ute av rutan, som Scoped CSS, Custom Components, SVG och animering.

RiotJS

RitoJS är trevligt att arbeta med och mycket lättare att lära sig bibliotek för nybörjare som det tillåter att definiera en anpassad komponent med HTML-element och HTML-attributen medan de tidigare biblioteken kommer att tvinga att använda ren JavaScript-syntax.

RiotJS är kompatibel med Node.js-miljöer eller i webbläsarna, och kan vara a bra alternativ till Vue.js givet likheterna.

HyperHTML

hyperHTML, som namnet antyder, har prestanda när du gör och manipulerar DOM. Du kan använda den för att skapa anpassat element och webbkomponent. Det fungerar lika enkelt som jQuery där det kan användas i webbläsaren av laddar skriptet från CDN och åtkomst till hyperHTML. Inget behov av komplicerade verktyg.

Mithril

Så coolt som det låter är Mithril a kraftfullt JavaScript-bibliotek. Bortsett från VirutalDOM och komponenter, är Mithril också utrustad med Routing och XHR med vilken Du kan bygga webbsidor för en sida utan att förlita dig på något annat bibliotek. Benchmark visar att det överträffar några populära bibliotek som Vue.js, React.js och Angular.

SlimJS

SlimJS är ett JavaScript-bibliotek till bygga anpassad webbkomponent med hjälp av API för inbyggd webbkomponent. Eftersom det är byggt kring den inbyggda webbläsaren är SlimJS utrustad med a Polyfill som skjuter API i webbläsare som inte stöder det ännu. Det är en bra ram om du föredrar att anta det ursprungliga sättet.

VSVG

Medan den har liknande syntax till HTML, är SVG en annan sorts odjur med sina egna egenskaper. Detta bibliotek, som namnet antyder, kommer att göra tillåter dig att skapa och manipulera SVG på flugan.

EmotionSH

EmotionSH är CSS-in-JS-ramverket som du kan behöva när du bygger webbplats med VirtualDOM. Detta gör att du bara kan leverera bitar av CSS som behövs på din webbplats och du kan uppdatera stilen dynamiskt utan att bli convulerad med klassnamn och specificitet eftersom stilen sköts till endast den komponent den appliceras på.

React Starter Kit

Om du har följt webben de senaste åren hittar du React (nästan) var som helst. Det här är en 5 kortfilm som introducerar React. Om du vill fortsätta med branschen, kan det vara rätt plats att komma igång.

element

Element är en samling av iOS-komponenter för att skapa iOS-app prototyp i Sketch. Det är byggt av folket av Sketch och uppdaterats med iPhone X-gränssnittet.

Modaal

Modaal är ett JavaScript-bibliotek byggt med tillförlitlighet i åtanke. Det har varit verifierad för “WCAG 2.0 nivå AA stöd” det (tror jag) mest tillgänglig “Modal” bibliotek idag. Dess lätt, jQuery-kompatibel, och kan användas för bilder, videoklipp och till och med Instagram. Dessutom kommer den här korta kursen från Google att hjälpa dig att komma igång med Web Accessibility och varför det är viktigt.

WordPressify

Ett NPM-paket som låter dig få en WordPress-utvecklingsmiljö på gång i några minuter. Det är upplagt med moderna verktyg som Gulp, LiveReload, PostCSS, Babel så att du kan fokusera på att utveckla ditt projekt i stället för att ställa in konfigurationen.

Lando

Lando är också ett användbart verktyg för att snabbt och enkelt skapa en utvecklingsmiljö WordPressify som vi just har nämnt ovan. Men i stället för Node.js tar det Fördelen med Docker är en lätt behållare teknik och det ger mer flexibilitet i takt med den stack du vill använda i din utveckling.

Till exempel kan du Ange PHP-versionen, aktivera XDebug och installera Kompositör.

WP-Docklines

WP-Docklines är en samling av bilder som du kan använda som baslinje för att utföra kontinuerlig integration och leverans för dina WordPress-teman och pluins i tjänster som Bitbucket, CircleCI och Gitlab. Varje bild är buntad med verktyg som vanligtvis behövs när man utvecklar WordPress som PHP Code Sniffer, PHPUnit och WP-CLI.

WP-Locker

WP-Locker är Docker Komponera konfiguration för att snurra en WordPress-utvecklingsmiljö på bara några minuter. Det är konfigureras med Apache, MySQL och phpMyAdmin och eftersom den utökar WP-Docklines-bilden, utförs den också extra verktyg på bilden utanför boxen.

Helt enkelt typ bin / start att låta det, konfigurera lokal värd och installera plugins och teman som du har konfigurerat i konfigurationsfilen.

Docusaurus

Ett annat open-source-initiativ från Facebook, Docusaurus är ett verktyg för att skapa en dokumentationswebbplats för ditt projekt. Byggd med React och Markdown kan du enkelt komponera dokumentation, behålla den och till och med skapa en blogg för din webbplats, och publicera den till Github Pages.

VSCode Yo

Yeoman är ett nodpaket som gör att du snabbt kan starta projektet välja prefabricerade ställningar som passar dina projekt. Om du använder Visual Studio-kod, kommer det här pluginet att effektivisera startprocessen ytterligare, som det gör att du kan springa det “yo” kommando direkt från fönstret Visual Studio Code.

BluebirdJS

Ett JavaScript-bibliotek som låter dig använda Löfte, vänta, async idag i alla webbläsare; sa att det ens fungerar i Netscape. Löfte är en av de starkaste punkterna i de senaste JavaScript-specifikationerna som skulle gör din kod smalare, läsbar och lätt underhållbar.

Sötare

Prettier är ett verktyg för Formatera din kod för att överensstämma med språkets kodningsstandard. Det kommer att skriva om din kod från scracth som följer regeln så att du och ditt lag kan vara mer produktiv istället för att debattera över kodskrivningsstilar.