Friska resurser för webbdesigners och utvecklare (oktober 2017)

Denna månad kommer Fresh Resouces att vara lite annorlunda än föregående månader. Vi, webbutvecklare, lever i en snabbväxande industri, och jag har sett många meddelanden från några av de största tekniska företagen som Google, Microsoft, Firefox och PHP, vilket kommer att förändra hur vi bygger webben.

I denna delbetalning kommer hälften av vår lista att handla om dessa meddelanden. Så var redo att säga hej till framtiden!

Viktig bildoptimering

Det är en uttömmande artikel för att optimera en bild för webben skriven av Addy Osmani. Det är inte som andra skrivningar som rör sig om hur-till, eller det gör och inte bara.

Denna artikel går faktiskt dig genom de tekniska detaljerna samt vetenskap bakom optimeringen. Du hittar också noggrann information om flera optimeringsmetoder och bildformat, verktyg, tips och några exempel på verkligheten.

PHP 7.2

En omfattande referens om vad som kommer till PHP 7.2. Bortsett från tillägg som förbättrar PHP-applikationens prestanda, kommer PHP 7.2 också med avskrivningar där flera saker kommer att tas bort och bör inte längre användas.

I PHP 7,2 finns det två funktioner som ska avlägsnas nämligen create_function () och __autoload (). Om du är en webbutvecklare, granska din kod och göra nödvändiga ändringar. Jag har sett många WordPress-plugins som fortfarande använder dessa två funktioner.

API för webbdelning

Jag såg verkligen inte detta API på webben. Men som hälften av vår interaktion på webben handlar om “delning”, det här API-programmet kommer till stor del att göra saker lättare för webbutvecklare att bygga en inbyggd delningsupplevelse, särskilt på mobilplattformen.

Detta API är för närvarande endast tillgängligt i Google Chrome för skrivbord och Android. Kolla in denna Youtube-video för att se den i åtgärd.

Image Async Attribut

En annan sak som kommer att revolutionera webben är async attribut för img-elementet. I skrivande stund finns det en handfull tillvägagångssätt för ladda bild asynkront som innebär ett litet knep av JavaScript. Snart kan vi bara lägga till async = på på img element.

Firefox Quantum

Mozilla har aggressivt drivit uppdateringar till Firefox med några förbättringar, kodnamn “Projektkvantum”. Det innehåller Quantum CSS - en ny motor för extremt snabb CSS-rendering, ett nytt användargränssnitt och nya DevTools.

Utgåvan är få traktion i webbutvecklare och vissa har redan bytt huvud webbläsare till Firefox. Det finns mer att komma i detta projekt, inklusive Quantum DOM och WebRender. Ska vi se Node.js contender baserad på Firefox Quantum-motorn? Tja, kanske ja.

MS Edge för iOS och Android

Microsoft har just meddelat att släppa sin senaste webbläsare, Edge, till iOS och Android. Det betyder att det finns ytterligare en webbläsare för att dina webbplatser ska testa med.

Gutenberg

WordPress är för närvarande på ett ambitiöst projekt, koden heter Gutenberg. Gutenberg är en ansiktslyftning till WordPress-editor byggd nästan helt med JavaScript.

Vid denna tidpunkt är Gutenberg byggd med React men projektet överväger en annan ram som Preact, Vue eller något annat. Det är en komplicerad situation för nu. Så, för WordPress-utvecklare bygga teman och plugins, håll ögonen på projektet som det kommer att förändra hur vi bygger WordPress för alltid.

FoitFout

FoitFout är ett praktiskt verktyg för att jämföra två olika tillvägagångssätt så kallade FOIT and FOUT to ladda anpassade teckensnitt på webben. Med det här verktyget kan du emulera de två metoderna och bestämma vilken metod som passar bäst för din webbplats.

Vuera

Vuera är a JavaScript-bibliotek som låter dig använda Vue och React tillsammans. Du kan inkludera en Vue-komponent från en .vue eller använd en React-komponent i Vue. Ditt lag kan nu vara mer produktiv med vilken ram som helst som de föredrar att använda.

dragbar

“dragbar” är fantastiskt bibliotek från Shopify. Den är byggd ovanpå den inbyggda webbläsaren Drag-n-Drop API och låter dig få ett omfattande API att arbeta med. Om det inte ger något du behöver, kan du skriva en anpassad modul för att förlänga dess funktioner. Kolla in demoen för att se hur det fungerar.

FlowchartJS

Som namnet antyder är FlowchartJS a bibliotek som låter bygga ett flödesschema som i PowerPoint. På samma sätt kan du skapa olika former av diagram inklusive cirkel, ellips, kvadrat, diamant, triangel mm.

QuickBill

En lätt och Enkel webbapplikation för att skapa en faktura. Det använder inbyggd webbläsarteknik och API för att köra så inget konto behövs. Helt enkelt gå till webbplatsen, lägg till föremålen till fakturan och skapa PDF-filen. Det är allt!

Mocka

Mocka är en innehållsplatshållare som du kan använda för prototypning webbplats. Det är bara 500 byte och fullt anpassningsbart. Du kan enkelt inkludera det i ditt projekts CSS-fil genom att använda Sass mixin.

De CSS ger ett antal klasser Inklusive Mocka-media för att skapa en bildplatshållare, mocka rubrik att skapa en rubrik och Mocka-text för att skapa en godtycklig text.

VueStar

VueStar är en Vue-komponenten för att lägga till en gnistrande effekt när du klickar på en ikon, liknar vad Twitter gör med “hjärta” ikonen i mobilappen. Komponenten introducerar ett nytt element som heter vue-stjärna där du kan lägga till den i webbåldern. Och du är klar!

Grid Playground

CSS Grid introducerar ett nytt koncept på webben för att skapa en layout och det är lite komplicerat vid första anblicken med tanke på de många nya fastigheterna den har.

GridPlayground är i grunden a Mozilla-initiativet för att lära CSS Grid och att driva CSS Grid adoption vidarebefordra. Även Firefox ger ett nytt verktyg till DevTools för att inspektera Grid-layout.

Snippet Manager

“Snippet Manager” är en enkel app för att lagra och hantera kodutdrag. Du kan skapa ett nytt objekt, klistra in koden och ställa in punkten. Vid denna tidpunkt är inget för fint och det ger bara källkoden som du behöver sammanställa med hjälp av NPM.

Tabbed Interface

En bra genomgång vid byggande av progressiv och tillgänglig fliknavigering med minimal användning av JavaScript. En bra resurs för dem som vill lära sig mer om tillgänglig design.

SwissInCSS

SwissInCSS uppvisar flera klassiska schweiziska affischdesigner som använder ingen men CSS. Källkoden är tillgänglig i CodePen.