no.hideout-lastation.com
Paradis For Designere Og Utviklere


Opprett Device Mockups i nettleser med DeviceMock

Du kan finne mange gratis online mockups på nettet, alt fra PSD til Sketch-filer. Men hva om du raskt kunne bygge enhetsmockups på flyet i nettleseren din?

Vel, takk til folkene på rm-labo, kan du! Deres gratis jQuery-plugin, DeviceMock.js, lar deg vikle en vektor enhet rundt et hvilket som helst sideelement, ved hjelp av enkle JavaScript og SVGer.

Så, hvordan fungerer dette akkurat?

Vel, først trenger du en kopi av jQuery og en versjon av DeviceMock-plugin fra GitHub . Dette kommer med en JS-fil, CSS-fil, og noen SVG-filer for å lage de faktiske enhetene.

Du kan målrette mot hvilken som helst type element på siden, fra et enkelt bilde til en hel div, eller til og med et innebygd element, for eksempel en iframe. Dette betyr at du kan til og med bygge en kul mini-nettleser rett på nettstedet ditt med en iframe til en annen side.

Dette pluginet støtter fem forskjellige enhetstyper :

  1. nettleser
  2. smart~~POS=TRUNC
  3. Tablett
  4. Desktop
  5. Laptop

Alle disse mockups bruker flat design stiler siden de er bygd med SVGs. Og alle ser ganske ut som Apple-enheter, for eksempel at smarttelefonen er en klone på iPhone, og skrivebordsbeskjermen ser iøynefallende ut som en iMac.

Alle disse vektorene er enkle å legge til, og de fungerer i hver nettleser med SVG-støtte .

Du kan til og med endre egenskaper som mockup størrelse, tema (hvit / svart) og orientering (stående landskap).

Hvis du bruker nettleserens mockup, kan du til og med spesifisere en dummy-URL i adressefeltet. Dette er en morsom måte å legge til enda mer tilpasning.

Gitt dette biblioteket vil ikke være nyttig for alle, men det løser et nisjeproblem som mange UI / UX-utviklere møter når prototyping.

Hvis du vil vite mer, kan du gå til GitHub-siden eller sjekke ut live-nettstedet for en aktiv demo.

Linting JavaScript med JSHint

Linting JavaScript med JSHint

Linting i dataprogrammering er prosessen med statisk analysekode for å finne problemer som feil syntaks og bruk av kode . Verktøyet som brukes til linting, kalles lint eller linter . En av linters tilgjengelig for JavaScript i dag er JSHint.JSHint er tilgjengelig for flere plattformer. Det elektroniske nettverktøyet som de fleste av oss er kjent med, er på jshint.com

(Tekniske og design tips)

40 ting du ikke visste, har navn

40 ting du ikke visste, har navn

Visste du at symbolet "sovende 8" du kjenner som uendighetssymbolet er en lemniscate? Det er ikke et viktig stykke informasjon, men for meg er det interessant å vite at matematikere plager å gi navn til disse symbolene.Og hvorfor ville de ikke? Navnene er viktige - de sparer oss mye tid.I dette innlegget finner du en liste over ting vi bruker dusinvis av ord for å beskrive fordi vi ikke vet hva de skal kalle dem . p

(Tekniske og design tips)