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

Den här månaden såg vi några meddelanden från anmärkningsvärda namn i tech. Till exempel öppnade Apple ett nytt databassystem, Google släppte ett nytt verktyg för att mäta din webbplatshastighet på mobilen och Github med en fri kurs för att komma igång med Git, Github och kodning i allmänhet.

Också i dagens inlägg kommer jag också har ett antal nya verktyg som för närvarande stiger. Låt oss hoppa vidare till vad vi har mer på listan.

VuePress

Ett nytt verktyg från skaparen av Vue, VuePress är a statisk platsgenerator utformad med Vue.js i åtanke. Det genererar och förbereder statisk HTML för varje sida, och körs som ett SPA (enkelsidigt program). Den levereras med vissa funktioner utanför kartongen, inklusive möjligheten att lägga till Google Analytics ID, sök, nästa och föregående navigering, sidofält och PWA.

IMG-2

Ett JavaScript-bibliotek som introducerar en anpassat element, img-2. Det nya elementet lägger till ett antal optimeringar som inte följer standarden img element, förbättra hur bilden laddas för användarna. Med det anpassade elementet kommer bilden att förkagas, det också lat belastning bilderna och tjänsten kommer från cachen bara när bilderna kommer in i användarens visningsport. Kolla in demoen.

Tabler

En elegant Dashboard / Admin Panel baserat på Bootstrap 4. Instrumentpanelen har färdiga komponenter som diagram, formen, gallerier, ett prissättningstabell och ett bra insamling av anpassade ikoner. En bra utgångspunkt för att låta utvecklare bygga en administratörspanel snabbt. Kolla in demoen!

DayJS

DayJS JavaScript-bibliotek för att formatera datum och tider. Ännu mer, DayJS har liknande API till Moment.js, men det är bara vikt 2Kb i storlek. Med tanke på det kan det vara en bra alternativ till Moment.js, om du vill ha ett lättare bibliotek, behåll ännu bekantskap med vad du redan har känt.

UnifiedArchive

Ett PHP-bibliotek för att hantera komprimerade filer stödjer UnifiedArchive ett brett utbud av format inklusive RAR, Zip, Gzip, Tjära, och många andra kompressionstyper. Med det här biblioteket kan du arkivera och extrahera filer eller kataloger. Det ger en handfull API för att manipulera filer efter det har hämtats ur arkivet. UnifiedArchive finns som kompositörspaket.

Github Learning Lab

Github har just meddelat en fri kurs som huvudsakligen täcker Git i Github. Det finns 5 kurser just nu när du kan lära dig några praktiska saker som hur man använder Github att vara värd för dina koder, hur man använder Github-sidor att få en gratis webbplats eller blogg för ditt projekt, och hur man hanterar Sammanslagningskonflikter som är vanliga att hända när du arbetar med många utvecklare på ett projekt.

WordPress UnitTest DOM Parser

Ett bra tips från Takayuki Miyauchi på testa DOMElement när du utför UnitTest i WordPress-applikationer. Personligen fann jag det här verkligen användbart; hoppas du hittar det samma.

Popmotion

Ett JavaScript-bibliotek för en smörjig smidig animering på webben, “Popmotion” tillhandahåller ett API som heter Physics som låter dig skapa med animationseffekter i närheten av verkligheten. Det är oöppnat; biblioteket helt enkelt utgångar värden baserade på den specifika uppsättningen av konfigurationen. Det här låter dig använda dessa utgångar för att animera något medium, inklusive CSS, SVG, Three.js och även React.js.

Driver.js

Ett JavaScript-bibliotek som tillåter dig att “kör” användarens fokus på en sida. Det här är särskilt användbart om du vill presentera specifika funktioner eller vägleda dem till specifika uppgifter på sidan. Driver.js är bara 4 KB i storlek, anpassningsbar och tangentbordsvänlig.

Ersätt animerad GIF med video

GIF är överallt, efter att ha gjort en bra kom tillbaka. Men problemet med GIF är det är vanligtvis mycket stort. Det är slöseri med bandbredd, men grafisk kvalitet är ofta hemskt. Detta riktlinje från Google visar hur “Video” kan ersätta GIF för att visa animerad grafik.

Text Mask

Ett JavaScript-bibliotek till Förvandla texten som kräver särskild formatering som ett telefonnummer, valuta eller ett kreditkortsnummer. När användaren skriver in kommer texten automatiskt att omvandlas till lämplig formatering som förbättrar användarupplevelsen. TextMask kan användas med React, Vue, eller bara ren gammal JavaScript.

Jämför mobilsidans hastighet

Detta är ett annat användbart verktyg från Google. Det här verktyget tillåter dig att kolla din webbplats hastighet när du laddar från mobilen och uppskatta den totala intäktsförlusten när webbplatsen laddas långsamt. Du kan välj land och hastighet varav din webbplats kommer att testas mot.

VueNut

En utvecklingskompis när man bygger en webbapplikation med Vue.js och Vuex, gör VueNut det lättare att utforska den lagrade dataläget och låter dig enkelt manipulera data under utvecklingen. Coola saker!

FoundationDB

Nyligen skapade Apple FoundationDB öppen källkod i Github. Det är en nyckelvärdespar databasystem som lovar skalbarhet och prestanda. Det är coolt att stora tech företag börjar ägna sig åt öppen källkod några av sina produkter.

Sagoböcker

StoryBooks är ett verktyg till bygga en React-komponent i isolation. Det ger ett användargränssnitt i webbläsaren så att du kan se olika tillstånd för varje komponent såväl som testa komponenterna.

GhostText

En webbläsareutvidgning som ska synkronisera vad du skriver i webbläsaren till din textredigerare eller tvärtom. Jag fann det här i sista hand användbart om du vill kunna skriva på en webbplats med bekvämligheten och funktionerna i din kodredigerare. GhostText är tillgängligt för Chrome, Firefox och Opera.

Coala

Coala är en CLI ger ett gränssnitt för linting och fixeringskod oavsett vilket språk som används. Du kan använda Coala inom en kodredigerare, integrera den med ett CI (Kontinuerlig Integration) och anpassa den med en konfigurationssyntax i .coafile. Coala stöder många språk som CSS, JavaScript, PHP, och du kan hitta mer i den här katalogen.

ReactStrap

ReactStrap är en samling av Bootstrap 4-komponenter transformerade till återanvändbara React-komponenter. Om du vill modernisera din gamla Bootstrap-baserade webbplats är det här biblioteket något du kanske vill undersöka.

Reacto

Ett annat React-relaterat verktyg, Reacto är en IDE byggd på Electron och konstruerad för att utveckla webbapplikationer med ReactJS. Det här ser väldigt praktiskt ut om din utveckling primära kretsar runt ReactJS.

PicoJS

Ett JavaScript-bibliotek som möjliggör ansiktsdetektering. Den fungerar med ett stillbild eller från den integrerade kameran. Det är verkligen fascinerande hur webbtekniken utvecklas under de senaste åren.