Friske ressourcer til webdesignere og udviklere (oktober 2017)

Denne måned vil Fresh Resouces være lidt anderledes end de foregående måneder. Vi, webudviklere, lever i en industri med hurtige forandringer, og jeg har set mange meddelelser fra nogle af de største teknologibedrifter som Google, Microsoft, Firefox og PHP, hvilket vil ændre måden vi bygger internettet.

I denne rate vil halvdelen af ​​vores liste omhandle disse meddelelser. Så vær klar til at sige goddag til fremtiden!

Væsentlig billedoptimering

Det er en udtømmende artikel for at optimere et billede til internettet skrevet af Addy Osmani. Det er ikke som andre opskrivninger, der drejer sig om how-to, eller gør og ikke alene.

Denne artikel går faktisk igennem de tekniske detaljer samt videnskab bag optimeringen. Du finder også grundige oplysninger om flere optimeringsmetoder og billedformater, værktøjer, tips og nogle egentlige eksempler.

PHP 7.2

En omfattende Henvisning til, hvad der kommer til PHP 7.2. Bortset fra tilføjelser, der forbedrer PHP applikations ydeevne, kommer PHP 7.2 også med afskrivninger, hvor flere ting vil blive fjernet og bør ikke længere bruges.

I PHP 7.2 er der to funktioner, der vil blive depreceret nemlig create_function () og __autoload (). Hvis du er en webudvikler, Gennemgå din kode og foretag de nødvendige ændringer. Jeg har set mange WordPress-plugins, der stadig bruger disse to funktioner.

Web Share API

Jeg forstod ærligt ikke, at denne API kom på nettet. Men som halvdelen af ​​vores interaktion på internettet handler om “deling”, denne API vil i høj grad gøre ting lettere for webudviklere at opbygge en indbygget delingsoplevelse, især på den mobile platform.

Denne API er i øjeblikket kun tilgængelig i Google Chrome til skrivebord og Android. Tjek denne Youtube video for at se den i aktion.

Image Async Attribut

En anden ting, der vil revolutionere internettet er async attribut til img elementet. På tidspunktet for skrivningen er der en håndfuld tilgang til Indlæse billedet asynkront, der indebærer et lille trick af JavaScript. Snart vil vi kun kunne tilføje async = på på img element.

Firefox Quantum

Mozilla har aggressivt skubbet opdateringer til Firefox med nogle forbedringer, kode-navngivet “Projekt Quantum”. Det omfatter Quantum CSS - en ny motor til ekstremt hurtig CSS-gengivelse, en ny brugergrænseflade og nye DevTools.

Udgivelsen er få trækkraft i webudviklere og nogle har allerede skiftet deres hovedbrowser til Firefox. Der er mere at komme ind i dette projekt, herunder Quantum DOM og WebRender. Skal vi se Node.js contender baseret på Firefox Quantum-motor? Nå, måske ja.

MS Edge til iOS og Android

Microsoft har netop meddelt at Slip den nyeste browser, Edge, til iOS og Android. Det betyder, at der er en browser til, at dine websites kan teste med.

Gutenberg

WordPress er i øjeblikket på et ambitiøst projekt, koden hedder Gutenberg. Gutenberg er en facelift til WordPress editor bygget næsten helt med JavaScript.

På dette tidspunkt er Gutenberg bygget med React men projektet overvejer en anden ramme som Preact, Vue eller noget andet. Det er en kompliceret situation for nu. Så for WordPress-udviklere opbygge temaer og plugins, hold øje med projektet som det vil ændre måden vi bygger WordPress for evigt.

FoitFout

FoitFout er et praktisk værktøj til at sammenligne to forskellige metoder, såkaldt FOIT and FOUT til Indlæse brugerdefinerede skrifttyper på internettet. Med dette værktøj kan du efterligne de to metoder og bestemme hvilken tilgang der passer bedst til dit websted.

Vuera

Vuera er a JavaScript-bibliotek, der giver dig mulighed for at bruge Vue og React sammen. Du kan inkludere en Vue-komponent fra en .vue eller brug en React komponent i Vue. Dit hold kan nu være mere produktiv med nogen ramme at de foretrækker at bruge.

Draggable

“Draggable” er fantastisk bibliotek fra Shopify. Det er bygget oven på native browser Drag-n-Drop API og giver dig en omfattende API til at arbejde med. Hvis det ikke giver noget, du har brug for, kan du skrive en brugerdefineret modul til at udvide dets funktionaliteter. Tjek demoen for at se, hvordan det virker.

FlowchartJS

Som navnet antyder, er FlowchartJS en bibliotek, der gør det muligt at opbygge et flowchart som i PowerPoint. På samme måde kan du oprette forskellige former for diagram, herunder cirkel, ellipse, firkant, diamant, trekant osv.

QuickBill

En letvægts og simpel webapplikation for at oprette en faktura. Det bruger native browser teknologier og API'er til at køre, så ingen konto er nødvendig. Du skal blot gå til hjemmesiden, tilføje elementer til fakturaen og generere PDF-filen. Det er det!

Mocka

Mocka er en indholdspladsholder, som du kan bruge til prototypeside. Det er kun 500 byte og kan tilpasses fuldt ud. Du kan nemt medtage det i projektets CSS-fil ved at bruge Sass mixin.

Det CSS giver en række klasser inklusive Mocka-media at oprette en billedpladsholder, Mocka-overskrift at oprette et overskrift og Mocka-tekst at oprette en vilkårlig tekst.

VueStar

VueStar er en Vue-komponent for at tilføje en mousserende effekt, når du klikker på et ikon, ligner hvad Twitter gør med “hjerte” ikonet i deres mobilapp. Komponenten introducerer et nyt element ved navn vue-stjerne hvor du kan tilføje den i webalderen. Og du er færdig!

Gitter Legeplads

CSS Grid introducerer et nyt koncept på nettet for at opbygge et layout, og det er lidt komplekst ved første øjekast givet de mange nye ejendomme, den har.

GridPlayground er stort set a Mozilla initiativ til at undervise CSS Grid og at skubbe CSS Grid adoption fremad. Selv Firefox bringer et nyt værktøj til DevTools til at inspicere Grid layout.

Snippet Manager

“Snippet Manager” er en simpel app til at gemme og administrere kodeuddrag. Du kan oprette et nyt element, indsætte koden og indstille punktet. På dette tidspunkt er intet for fancy, og det giver kun kildekoden, som du skal kompilere ved hjælp af NPM.

Tabbed Interface

En stor Gennemgang ved bygning af progressiv og tilgængelig fane navigation med minimal brug af JavaScript. En stor ressource for dem, der ønsker at lære mere om tilgængelig design.

SwissInCSS

SwissInCSS udstiller flere af klassiske schweiziske plakatdesigner uden brug af CSS. Kildekoden er tilgængelig i CodePen.