Friske ressurser for webdesignere og utviklere (januar 2018)

Det nye året 2018 er her. Hvis vi ser på fremdriften i webutvikling for fem år siden, er det helt annerledes enn det vi har i dag. I dag er det nye metoder, verktøy og til og med et helt nytt paradigme som endrer måten vi bygger nettsteder på i dag - og VirtualDOM er en av dem.

DOM (Document Object Model) er en tremodell som definerer hvordan et nettsted er strukturert. Velge, krysse og manipulere DOM kan være en veldig dyr oppretting og kan hindre nettstedets ytelsesytelse.

Men i dette innlegget vil vi ikke diskutere hvordan VirtualDOM fungerer, i stedet, sammen med de andre verktøyene, vil vi se nærmere på biblioteker som lar deg implementere VirtualDOM med en gang. La oss sjekke dem ut.

MaquetteJS

en implementering av VirtualDOM som lar deg bygge fluid brukergrensesnitt som holder oppdatert med dataene rundt den. Det er en ren JavaScript og unopiniated biblioteket er det derfor mulig å bruk den sammen med et syntetisk språk som CoffeeScript, TypeScript og JSX. Et flott alternativt bibliotek til React.js; MaquetteJS er mye mindre i størrelse (bare 3 kB) sammenlignbart.

ReDOM

Dette er en av mine favoritt VirtualDOM-biblioteker, da det er lett å plukke det opp bare ved å se på syntaksen. Med bare 2Kb, du kan bygge en rask gjengivelse webside eller egendefinert HTML-komponent. Biblioteket består av to primære funksjoner el, å opprette eller manipulere et element, og mount for å legge det til et valgt element. Du kan laste den i nettleseren og server-siden med NodeJS.

ReactiveJS

En templering UI-bibliotek for å bygge svært interaktiv webapplikasjon. ReactiveJS ble opprinnelig bygget for TheGuardian, og er bygd for å fungere på tvers av nettlesere og mobile enheter. slik at du kan stole på påliteligheten. ReactiveJS kommer også med mange funksjoner som trengs for moderne webapplikasjon rett utenfor boksen, for eksempel Scoped CSS, egendefinerte komponenter, SVG og animasjon.

RiotJS

RitoJS er hyggelig å jobbe med og mye lettere å lære bibliotek for nybegynnere som det tillater definisjon av en egendefinert komponent med HTML-element og HTML-attributter mens forrige biblioteker vil tvinge til å bruke rent JavaScript-syntaks.

RiotJS er kompatibel med Node.js miljø eller i nettleserne, og kan være a godt alternativ til Vue.js gitt liknende.

HyperHTML

hyperHTML, som navnet tilsier, har ytelse når du gjengir og manipulerer DOM. Du kan bruke den til å lage egendefinert element og webkomponent. Det fungerer like enkelt som jQuery, der det kan brukes i nettleseren av laster skriptet fra CDN og får tilgang til hyperHTML. Ingen behov for komplisert verktøy.

Mithril

Så kult som det høres, er Mithril a kraftig JavaScript-bibliotek. Bortsett fra VirutalDOM og komponenter, er Mithril også utstyrt med Routing og XHR som Du kan bygge enkeltsidet webapplikasjon uten å stole på noe annet bibliotek. Benchmark viser at det overgår noen populære biblioteker som Vue.js, React.js og Angular.

SlimJS

SlimJS er et JavaScript-bibliotek til bygge tilpasset webkomponent ved hjelp av den innfødte Web Component API. Siden det er bygget rundt den opprinnelige nettleseren, er SlimJS utstyrt med a polyfill som shims API i nettleser som ikke støtter det ennå. Det er et flott rammeverk hvis du foretrekker å adoptere den innfødte måten.

VSVG

Mens den har lignende syntaks til HTML, er SVG en annen slags beist med sine egne kjennskaper. Dette biblioteket, som navnet antyder, vil lar deg lage og manipulere SVG i fly.

EmotionSH

EmotionSH er CSS-in-JS-rammeverk som du kanskje trenger når du bygger nettstedet med VirtualDOM. Dette tillater deg å levere kun biter av CSS som trengs på nettstedet ditt, og du kan oppdater dynamikken dynamisk uten å være convulted med klassenavn og spesifisitet som stilen er scopped til bare komponenten den er brukt på.

Reager Starter Kit

Hvis du har fulgt nettet de siste par årene, finner du React (nesten) hvor som helst. Dette er en 5 kortvideo kurs introduksjon av React. Hvis du vil holde tritt med bransjen, kan dette være det rette stedet å komme i gang.

Elements

Elementer er en samling av iOS-komponenter for å lage iOS-app prototype i Skisse. Den er bygget av folket av Sketch og blitt oppdatert med iPhone X-brukergrensesnitt.

Modaal

Modaal er et JavaScript-bibliotek bygget med tilpasning i tankene. Det har vært bekreftet for “WCAG 2.0 nivå AA-støtte” det (tror jeg) mest tilgjengelig “modal” bibliotek i dag. Det er lett, jQuery-kompatibel, og kan brukes til bilder, videoer og til og med Instagram. Videre vil dette korte kurset fra Google hjelpe deg med å komme i gang med Web Accessibility, og hvorfor det er viktig.

WordPressify

En NPM-pakke som lar deg få en WordPress-utviklingsmiljø oppe i løpet av få minutter. Det er alt satt opp med moderne verktøy som Gulp, LiveReload, PostCSS, Babel slik at du kan fokusere på å utvikle prosjektet ditt rett og slett innstille konfigurasjonen.

Lando

Lando er også et praktisk verktøy for å spinne opp et utviklingsmiljø raskt og enkelt, mye som å WordPressify som vi nettopp har nevnt ovenfor. Men i stedet for Node.js tar det fordel av Docker en lett containerisering teknologi, og det gir mer fleksibilitet i løpet av stabelen du vil bruke i utviklingen din.

For eksempel kan du spesifiser PHP-versjonen, aktiver XDebug, og installer Komponist.

WP-Docklines

WP-Docklines er en samling av bilder som du kan bruke som utgangspunkt for å utføre kontinuerlig integrasjon og levering for WordPress-temaer og -puiner i tjenester som Bitbucket, CircleCI og Gitlab. Hvert bilde er buntet med verktøy som vanligvis trengs når du utvikler WordPress for eksempel PHP Code Sniffer, PHPUnit og WP-CLI.

WP-Locker

WP-Locker er Docker Compose konfigurasjon for å spinne et WordPress utviklingsmiljø på bare få minutter. Det er sett opp med Apache, MySQL og phpMyAdmin og siden den utvider WP-Docklines-bildet, utfører den også de ekstra verktøyene på bildet utenom boksen.

Ganske enkelt type bin / start å la det, konfigurere lokal vert og installer plugins og temaer du har konfigurert i konfigurasjonsfilen.

Docusaurus

Et annet åpen kildekode-initiativ fra Facebook, Docusaurus er et verktøy for å lage en dokumentasjonsside for prosjektet ditt. Bygget med React and Markdown, kan du enkelt komponere dokumentasjon, vedlikeholde den og til og med lage en blogg for nettstedet ditt, og publiser den til Github Pages.

VSCode Yo

Yeoman er en nodepakke som lar deg starte opp prosjektet raskt velge prefabrikkerte stillas som passer dine prosjekter. Hvis du bruker Visual Studio Code, vil dette pluginet strømlinjeforme oppstartsprosessen ytterligere, slik det gjør det mulig kjøre “yo” kommando rett fra vinduet Visual Studio Code.

BluebirdJS

Et JavaScript-bibliotek som lar deg bruke Love, avvente, async i dag i alle nettlesere; sa det virker til og med i Netscape. Love er et av de sterkeste punktene i de nyeste JavaScript-spesifikasjonene som ville gjør koden din slankere, lesbar og lett vedlikeholdt.

penere

Prettier er et verktøy til format koden din slik at den samsvarer med kodens standard for språket. Det vil omskrive koden fra scracth som følger regelen slik at du og ditt lag kan være mer produktiv i stedet for å diskutere over kodeskrivestiler.