Friske ressurser for webdesignere og utviklere (oktober 2017)

Denne måneden vil Fresh Resouces være litt annerledes enn de foregående månedene. Vi, webutviklere, lever i en industri med rask forandring, og jeg har sett mange kunngjøringer fra noen av de største teknologibedrifter som Google, Microsoft, Firefox og PHP, noe som vil forandre måten vi bygger på. nettet.

I denne delen vil halvdelen av vår liste være om disse kunngjøringene. Så vær klar til å hilse på fremtiden!

Viktig bildeoptimalisering

Det er en uttømmende artikkel for å optimalisere et bilde for nettet skrevet av Addy Osmani. Det er ikke som andre oppskrivninger som dreier seg om how-to, eller gjør og ikke bare.

Denne artikkelen går deg faktisk gjennom de tekniske detaljene så vel som vitenskap bak optimeringen. Du finner også grundig informasjon om flere optimaliseringsmetoder og bildeformater, verktøy, tips og noen virkelige eksempler.

PHP 7.2

En omfattende referanse om hva som kommer til PHP 7.2. Bortsett fra tillegg som forbedrer PHP-applikasjonsytelsen, kommer PHP 7.2 også med avskrivninger der flere ting skal fjernes og bør ikke lenger brukes.

I PHP 7.2, er det to funksjoner som skal bli deprecated nemlig create_function () og __autoload (). Hvis du er en webutvikler, gå gjennom koden din og foreta nødvendige endringer. Jeg har sett mange WordPress-plugins som fortsatt bruker disse to funksjonene.

Web Del API

Jeg så ærlig ikke at denne APIen kom til nettet. Men som halvparten av samspillet vårt på nettet handler om “deling”, Denne API-en vil i stor grad gjøre ting lettere for webutviklere å bygge en opprinnelig delingsopplevelse, spesielt på mobilplattformen.

Denne API-en er for tiden bare tilgjengelig i Google Chrome for skrivebord og Android. Sjekk ut denne Youtube-videoen for å se den i aksjon.

Image Async Attributt

En annen ting som vil revolusjonere nettet er async attributt for img-elementet. På tidspunktet for skriving er det en håndfull tilnærminger til Last inn bildet asynkront som innebærer et lite lurt med JavaScript. Snart vil vi bare kunne legge til Async = på på img element.

Firefox Quantum

Mozilla har aggressivt presset oppdateringer til Firefox med noen forbedringer, kodenavnet “Prosjekt Quantum”. Det inkluderer Quantum CSS - en ny motor for ekstremt rask CSS-rendering, et nytt brukergrensesnitt og nye DevTools.

Utgivelsen er får traksjon i webutviklere og noen har allerede byttet hovedleseren til Firefox. Det er mer å komme inn i dette prosjektet, inkludert Quantum DOM og WebRender. Skal vi se Node.js contender basert på Firefox Quantum-motor? Vel, kanskje ja.

MS Edge for iOS og Android

Microsoft har nettopp annonsert til Slett sin nyeste nettleser, Edge, til iOS og Android. Dette betyr at det er en nettleser for at nettsteder skal teste med.

Gutenberg

WordPress er for tiden på et ambisiøst prosjekt, koden heter Gutenberg. Gutenberg er en ansiktsløftning til WordPress editor bygget nesten helt med JavaScript.

På dette punktet er Gutenberg bygget med React men prosjektet vurderer et annet rammeverk som Preact, Vue eller noe annet. Det er en komplisert situasjon for nå. Så, for WordPress utviklere bygge temaer og plugins, hold øynene på prosjektet som det vil forandre måten vi bygger WordPress for alltid.

FoitFout

FoitFout er et praktisk verktøy for å sammenligne to forskjellige tilnærminger såkalt FOIT and FOUT to last tilpassede skrifter på nettet. Med dette verktøyet kan du etterligne de to tilnærmingene og bestemme hvilken tilnærming som passer best for nettstedet ditt.

Vuera

Vuera er en JavaScript-bibliotek som lar deg bruke Vue og React sammen. Du kan inkludere en Vue-komponent fra en .vue eller bruk en React-komponent i Vue. Teamet ditt kan nå være mer produktiv med noe rammeverk som de foretrekker å bruke.

flyttbare

“flyttbare” er fantastisk bibliotek fra Shopify. Den er bygget på toppen av den native nettleseren Drag-n-Drop API og lar deg få en omfattende API for å jobbe med. I tilfelle det ikke gir noe du trenger, kan du skrive en tilpasset modul for å forlenge funksjonalitetene. Sjekk ut demoen for å se hvordan det fungerer.

FlowchartJS

Som navnet antyder, er FlowchartJS a bibliotek som gjør det mulig å bygge flytskjema som i PowerPoint. På samme måte kan du opprette ulike former for diagram, inkludert sirkel, ellipse, firkant, diamant, trekant, etc..

QuickBill

En lett og Enkel webapplikasjon for å opprette en faktura. Den bruker innfødte nettleserteknologier og APIer til å kjøre, slik at ingen konto er nødvendig. Bare gå til nettsiden, legg til elementene i fakturaen, og generer PDF-filen. Det er det!

mocka

Mocka er en innhold plassholder som du kan bruke til prototyping nettsted. Det er bare 500 byte og fullt tilpassbart. Du kan enkelt inkludere den i prosjektets CSS-fil ved å bruke Sass mixin.

De CSS gir en rekke klasser gjelder også Mocka-media å opprette et bildeplassholder, mocka rubrikken å opprette et overskrift, og mocka-tekst for å lage en vilkårlig tekst.

VueStar

VueStar er en Vue-komponent for å legge til en glitrende effekt når du klikker på et ikon, ligner på hva Twitter gjør med “hjerte” ikonet i mobilappen deres. Komponenten introduserer et nytt element som heter vue-stjerners hvor du kan legge den til i nettalderen. Og du er ferdig!

Grid Playground

CSS Grid introduserer et nytt konsept på nettet for å bygge en layout og det er litt komplekst ved første øyekast gitt de mange nye egenskapene den har.

GridPlayground er i utgangspunktet a Mozilla-initiativ for å undervise CSS-nettverket og å presse CSS Grid-adopsjon fremover. Selv Firefox bringer et nytt verktøy til DevTools for å inspisere Grid layout.

Utklippsbehandling

“Utklippsbehandling” er en enkel app for å lagre og administrere kodestykker. Du kan opprette et nytt element, lime inn koden og sette punktet. På dette punktet er ingenting for fancy, og det gir bare kildekoden som du må kompilere ved hjelp av NPM.

Tabbed Interface

En stor gjennomgang gjennom bygging av progressiv og tilgjengelig flippnavigasjon med minimal bruk av JavaScript. En stor ressurs for de som ønsker å lære mer om tilgjengelig design.

SwissInCSS

SwissInCSS utstiller flere av klassiske sveitsiske plakatdesigner uten å bruke CSS. Kildekoden er tilgjengelig i CodePen.