Friske ressurser for webdesignere og utviklere (april 2018)

Denne måneden så vi noen få kunngjøringer fra bemerkelsesverdige navn i tech. For eksempel åpnet Apple et nytt databasesystem, ga Google ut et nytt verktøy for å måle nettsiden din på mobil, og Github med et gratis kurs for å komme i gang med Git, Github og koding generelt.

Også i dagens innlegg vil jeg også har en rekke nye verktøy som for tiden stiger. La oss hoppe videre til det vi har mer på listen.

VuePress

Et nytt verktøy fra skaperen av Vue, VuePress er a statisk nettsted generator designet med Vue.js i tankene. Den genererer og pre-gjør statisk HTML for hver side, og kjører som et SPA (enkeltsidig applikasjon). Den leveres med noen funksjoner utenom boksen, inkludert muligheten til å legge til Google Analytics-ID, søke, neste og forrige navigasjon, sidebar og PWA.

IMG-2

Et JavaScript-bibliotek som introduserer en egendefinert element, img-2. Det nye elementet legger til en rekke optimeringer som ikke følger standarden img element, forbedre hvordan bildet lastes for brukerne. Med det egendefinerte elementet blir bildet pre-cached, det også lat belastning bildene og tjenestene kommer fra cachen bare når bildene går inn i brukerens visningsport. Sjekk ut demoen.

tabler

Et elegant Dashboard / Admin Panel basert på Bootstrap 4. Dashbordet inneholder forhåndsdefinerte komponenter som diagrammer, skjemaer, gallerier, et pristabell og et fint samling av egendefinerte ikoner. Et flott utgangspunkt for å la utviklere bygge et administrasjonspanel raskt. Sjekk ut demoen!

DayJS

DayJS JavaScript-bibliotek for å formatere datoer og tider. Enda mer, DayJS har lignende APIer til Moment.js, men det er bare vekt 2Kb i størrelse. Gitt det, kan det være en godt alternativ til Moment.js, hvis du vil ha en lettere bibliotek, men opprettholde kunnskap om det du allerede har kjent.

UnifiedArchive

Et PHP-bibliotek for å håndtere komprimerte filer, UnifiedArchive støtter et bredt spekter av formater, inkludert RAR, Zip, Gzip, Tar, og mange andre kompresjonstyper. Med dette biblioteket kan du arkivere og pakke ut filer eller kataloger. Det gir en håndfull APIer for å manipulere filer etter at den er hentet fra arkivet. UnifiedArchive er tilgjengelig som komposerpakke.

Github Learning Lab

Github har nettopp annonsert en gratis kurs som dekker primært Git i Github. Det er 5 kurs for øyeblikket hvor du kan lære noen praktiske ting som hvordan du bruker Github å være vert for kodene dine, hvordan du bruker Github-sider å få et gratis nettsted eller en blogg for prosjektet ditt, og hvordan du håndterer flettekonflikter som er vanlige for å skje når du jobber med mange utviklere på et prosjekt.

WordPress UnitTest DOM Parser

Et fint tips fra Takayuki Miyauchi på testing DOMElement når du utfører UnitTest i WordPress applikasjoner. Jeg personlig fant dette veldig nyttig; håper du finner det samme.

Popmotion

Et JavaScript-bibliotek for en buttery jevn animasjon på nettet, “Popmotion” Gir en API kalt Fysikk som lar deg lage med nesten virkelige animasjonseffekter. Det er uåpnet; biblioteket bare utdata verdier basert på det spesifikke settet av konfigurasjonen. Dette lar deg bruke disse utgangene til å animere ethvert medium, inkludert CSS, SVG, Three.js og til og med React.js.

Driver.js

Et JavaScript-bibliotek som lar deg “kjøre” brukerfokus på en side. Dette er spesielt nyttig hvis du vil presentere bestemte funksjoner eller veilede dem til bestemte oppgaver på siden. Driver.js er bare 4 KB i størrelse, tilpassbar og tastaturvennlig.

Erstatt animert GIF med video

GIF er overalt, etter å ha gjort en flott komme tilbake. Men problemet med GIF er at det vanligvis er veldig stort. Det er sløsing med båndbredde, men grafikkvalitet er ofte forferdelig. Dette retningslinje fra Google viser hvordan “video” Kan erstatte GIF for å vise animert grafikk.

Tekstmaske

Et JavaScript-bibliotek til forvandle teksten som krever spesiell formatering som et telefonnummer, valuta eller et kredittkortnummer. Når brukeren skriver inn, blir teksten automatisk omformet til riktig formatering som forbedrer brukeropplevelsen. TextMask kan brukes med React, Vue, eller bare ren gammel JavaScript.

Sammenlign Mobile Site Speed

Dette er et annet nyttig verktøy fra Google. Dette verktøyet tillater deg å sjekk nettstedets hastighet når du laster fra mobilen og anslå total tap av inntekter når nettsiden laster sakte. Du kan velg land og hastighet hvorav nettstedet ditt vil bli testet mot.

VueNut

En utvikling følgesvenn når du bygger et webprogram med Vue.js og Vuex, gjør VueNut det lettere å utforske data lagret og lar deg manipulere dataene under utviklingen enkelt. Kule ting!

FoundationDB

Nylig Apple laget FoundationDB åpen kildekode i Github. Det er en nøkkelverdierpar databasesystem som lover skalerbarhet og ytelse. Det er kult å ha big tech-selskaper som begynner å bruke åpen kildekode for sine produkter.

eventyrbøker

StoryBooks er et verktøy til Bygg en React-komponent i isolasjon. Den gir et brukergrensesnitt i nettleseren slik at du kan se de forskjellige tilstandene til hver komponent så vel som test komponentene.

GhostText

En nettleserutvidelse som vil synkroniser hva du skriver i nettleseren til teksteditoren din eller vice versa. Jeg fant dette til slutt nyttig hvis du vil kunne skrive på et nettsted med bekvemmeligheten og funksjonene til kodeditoren din. GhostText er tilgjengelig for Chrome, Firefox og Opera.

COALA

Coala er en CLI gir et grensesnitt for linting og fikserings kode uansett hvilket språk som brukes. Du kan bruke Coala i en kodeditor, integrere den med en CI (Kontinuerlig Integrasjon), og tilpasse den med en konfigurasjonssyntax i .coafile. Coala støtter mange språk som CSS, JavaScript, PHP, og du kan finne mer i denne katalogen.

ReactStrap

ReactStrap er en samling av Bootstrap 4 komponenter transformert til gjenbrukbare React komponenter. Hvis du vil modernisere den gamle Bootstrap-baserte nettsiden din, er dette biblioteket noe du kanskje vil se på.

Reacto

Et annet React-relatert verktøy, Reacto er en IDE bygget på toppen av Electron og designet for å utvikle webapplikasjoner med ReactJS. Dette ser veldig bra ut hvis utviklingen din primært dreier seg om ReactJS.

PicoJS

Et JavaScript-bibliotek som muliggjør ansiktsdeteksjon. Den fungerer med et stillbilde eller fra det integrerte kameraet. Det er veldig fascinerende hvordan webteknologien utvikler seg de siste årene.