Friske ressourcer til webdesignere og udviklere (april 2018)

Denne måned så vi nogle meddelelser fra bemærkelsesværdige navne i tech. For eksempel offentliggjorde Apple et nyt databasesystem, Google udgivet et nyt værktøj til at måle din webshastighed på mobilen, og Github med et gratis kursus for at komme i gang med Git, Github og kodning generelt.

Også i dagens indlæg vil jeg også har en række nye værktøjer, der i øjeblikket er på vej. Lad os hoppe videre til, hvad vi har mere på listen.

VuePress

Et nyt værktøj fra skaberen af ​​Vue, VuePress er a statisk site generator designet med Vue.js i tankerne. Det genererer og pre-gør statisk HTML for hver side, og kører som et SPA (enkeltstående applikation). Den leveres med nogle funktioner uden for boksen, herunder evnen til at tilføje Google Analytics ID, søgning, næste og tidligere navigation, sidebjælke og PWA.

IMG-2

Et JavaScript-bibliotek, der introducerer en brugerdefineret element, img-2. Det nye element tilføjer et antal optimeringer, der ikke følger standarden img element, forbedre hvordan billedet er indlæst til brugerne. Med det brugerdefinerede element bliver billedet forudcached, det også doven belastning billederne og tjenerne kommer kun fra cachen, da billederne kommer ind i brugerens visningsport. Tjek demoen.

Tabler

Et elegant Dashboard / Admin Panel baseret på Bootstrap 4. Dashboardet indeholder præfabrikerede komponenter som diagrammer, formularer, gallerier, en prissætningstabel og en god indsamling af brugerdefinerede ikoner. Et godt udgangspunkt for at lade udviklere hurtigt opbygge et administrationspanel. Tjek demoen!

DayJS

DayJS JavaScript-bibliotek til at formatere datoer og tider. Endnu mere, DayJS har lignende API'er til Moment.js, men det er kun vægt 2Kb i størrelse. I betragtning af det kunne det være en godt alternativ til Moment.js, hvis du gerne vil have et lettere bibliotek, skal du alligevel holde dig bekendt med det, du allerede har kendt.

UnifiedArchive

Et PHP bibliotek til at håndtere komprimerede filer understøtter UnifiedArchive en bred vifte af formater, herunder RAR, Zip, Gzip, Tar, og mange andre kompressionstyper. Med dette bibliotek kan du arkivere og udtrække filer eller mapper. Det giver en håndfuld API'er til at manipulere filer efter at den er hentet fra arkivet. UnifiedArchive er tilgængelig som Composer-pakke.

Github Learning Lab

Github har netop annonceret a gratis kursus dækker primært Git i Github. Der er 5 baner i øjeblikket hvor du kan lære et par praktiske ting som hvordan man bruger github at være vært for dine koder, hvordan man bruger Github sider at få et gratis websted eller en blog til dit projekt, og hvordan man styrer flettekonflikter, der er almindelige at ske, når du arbejder med mange udviklere på et projekt.

WordPress UnitTest DOM Parser

Et godt tip fra Takayuki Miyauchi på teste DOMElement, når du udfører UnitTest i WordPress applikationer. Jeg personligt fandt dette virkelig nyttigt; håber du finder det det samme.

Popmotion

Et JavaScript-bibliotek til en buttery glat animation på nettet, “Popmotion” giver en API kaldet fysik, der giver dig mulighed for at oprette med en nær virkelighed animation effekter. Det er uoprettet; biblioteket simpelthen outputs værdier baseret på det specifikke sæt af konfigurationen. Dette giver dig mulighed for at anvende disse udgange til at animere ethvert medium, herunder CSS, SVG, Three.js og endda React.js.

Driver.js

Et JavaScript-bibliotek, der giver dig mulighed for “køre” bruger fokus på en side. Dette er især nyttigt, hvis du vil introducere specifikke funktioner eller lede dem til specifikke opgaver på siden. Driver.js er bare 4 KB i størrelse, kan tilpasses og tastaturvenlig.

Udskift animeret GIF med video

GIF er overalt, efter at have lavet en god kom tilbage. Men problemet med GIF er, at det er normalt meget stort. Det er spild af båndbredde, men den grafiske kvalitet er ofte forfærdelig. Dette retningslinje fra Google viser hvordan “video” kan erstatte GIF for at vise animeret grafik.

Tekstmaske

Et JavaScript-bibliotek til omdanne teksten, der kræver speciel formatering som et telefonnummer, valuta eller et kreditkortnummer. Når brugeren skriver ind, bliver teksten automatisk omdannet til den passende formatering, der forbedrer brugeroplevelsen. TextMask kan bruges sammen med React, Vue eller bare plain old JavaScript.

Sammenlign Mobile Site Speed

Dette er et andet praktisk værktøj fra Google. Dette værktøj giver dig mulighed for Tjek din hjemmeside hastighed, når du læser fra mobil og estimer det samlede tab af indtægter, når hjemmesiden lægges langsomt. Du kan vælg land og hastighed hvoraf dit websted vil blive testet mod.

VueNut

En udviklingskammerat, når man opbygger en webapplikation med Vue.js og Vuex, gør VueNut det nemmere at udforske data lagret og giver dig mulighed for nemt at manipulere dataene under udviklingen. Seje ting!

FoundationDB

For nylig lavede Apple FoundationDB open source i Github. Det er en key-value pair database system det lover skalerbarhed og ydeevne. Det er cool at have big tech virksomheder begynder at bruge til at åbne kilde nogle af deres produkter.

storybooks

StoryBooks er et værktøj til bygg en React komponent i isolation. Det giver et brugergrænseflade i browseren, så du kan se de forskellige stater i hver komponent såvel som test komponenterne.

GhostText

En browserudvidelse, der vil synkroniser hvad du skriver i browseren til din teksteditor eller omvendt. Jeg fandt dette i sidste ende nyttigt, hvis du gerne vil kunne skrive på en hjemmeside med bekvemmeligheden og funktionerne i din kodeditor. GhostText er tilgængelig for Chrome, Firefox og Opera.

Coala

Coala er en CLI giver en grænseflade til linting og fastgørelseskode uanset hvilke sprog der anvendes. Du kan bruge Coala inden for en kode editor, integrere den med en CI (Continuous Integration) og tilpasse den med en konfigurationssyntax i .coafile. Coala understøtter mange sprog som CSS, JavaScript, PHP, og du kan finde flere i denne mappe.

ReactStrap

ReactStrap er en samling af Bootstrap 4 komponenter transformeret til genanvendelige React komponenter. Hvis du gerne vil modernisere din gamle Bootstrap-baserede hjemmeside, er dette bibliotek noget, du måske vil se på.

Reacto

Et andet React-relateret værktøj, Reacto er en IDE bygget oven på Electron og designet til udvikling af webapplikationer med ReactJS. Dette ser virkelig godt ud, hvis din udvikling primært drejer omkring ReactJS.

PicoJS

Et JavaScript-bibliotek der muliggør ansigtsdetektering. Det fungerer med et stillbillede eller fra det integrerede kamera. Det er virkelig fascinerende, hvordan webteknologien udvikler sig i løbet af de sidste par år.