Friske ressurser for webdesignere og utviklere (juni 2015)
Kan du tro at denne serien har kjørt i nesten 3 år? På den korte tiden har vi omtalt minst 30 lister over de ferskeste ressursene for webdesignere og utviklere. Og vi skal fortsette med en ny samling for juni.
I denne kompilasjonen ser vi på noen få JavaScript-biblioteker for å vise skyveknapper, glattere rulling for datatabeller, en kul heis effekt for en bla-til-topp-knapp og mer.
La oss sjekke dem ut.
Middels stil Bekreft
Medium har blitt rost for sin design; Oppsettet og brukergrensesnittet synes å ha vært tenkt grundig. På toppen av det inspirerer det også webutviklere til å utvikle enten JavaScript- eller CSS-biblioteker for å gjenskape brukergrensesnittet. Middels stil Bekreft er et JavaScript-bibliotek som ligner popup-vinduet eller dialogboksen i Medium.
Pingvin
Penguin er et nytt front-end-rammeverk som du kan bruke som grunnlag for nettstedene dine. Med verktøy som Grunt og Sass, kan du enkelt legge til eller fjerne biblioteker eller CSS som du ikke trenger ut av rammen, og gjør det så lett som mulig. Det er også et godt alternativ for Bootstrap og Foundation.
Elevator.js
Har du sett den knappen på et nettsted som lar deg skyve opp til toppen av siden? De fleste knappene tar deg bare til toppen, men med Elevator.js får du en glidende akselerasjonseffekt som ligner en heis, musikken og den “Ding!” lyd når du har nådd toppetasjen. Veldig fint!
X-Instagram
X-Instagram er et Polymer-tilpasset element som trekker og viser bilder fra Instagram etter tag. Dette elementet gjør hele prosessen mye lettere. Vi legger bare til elementet som et vanlig HTML-element og angir tagordet som elementattributtene.
Og la magien begynne!
CamanJS
CamanJS er et flott JavaScript-bibliotek for bildemanipulering. Den leveres med et funksjonssett som du vanligvis vil finne i et bilderedigeringsprogram. Du kan slå bildet uskarpt, svart og hvitt, og til og med øke kontrasten.
ClusterizeJS
Clusterize.js er JavaScript-bibliotek som vil øke ytelsen når det gjelder mye data i tabeller. Når du ruller ned et bord med, si 5000 på listen, vil opplevelsen vanligvis bli laggy og jerky. Disse JavaScript-bibliotekene vil løse dette problemet, noe som gjør rulleaktiviteten jevn seiling hele veien.
Sett testen
Sett testen er en samling spørsmål for å evaluere din ferdighet og kunnskap om CSS3, HTML5 og JavaScript. Hver test er gitt en rekke spørsmål og begrenset tid for å fullføre alle disse spørsmålene. Det er en god kilde for å finne ut hvor bra vi egentlig er med disse språkene.
HTML piler
Dette er en samling av spesielle native Unicode-symboler som du kan legge inn i HTML og CSS. Disse tegnene inkluderer piler, valuta og tegnsetting. Du vil finne at noen ganger trenger du ikke skrifttypeikon for å vise disse tegnene.
Flickity
Flickity er et JavaScript-bibliotek for å vise karuseller, gallerier eller skyveknapper på nettstedet ditt. Den er optimalisert for berøringsskjerm; Du kan glide karusellene uten problemer med en finger, eller styreflaten hvis du er på en bærbar datamaskin. Det kommer også med en haug med alternativer som gir full tilpasning på en måte du liker.
Typeslab
Typeslab er et praktisk verktøy for å lage en plakatplattform. Bare skriv inn innholdet og velg skrifttypen, Typeslab vil generere plakaten umiddelbart. Du kan deretter laste den ned eller publisere den i Imgur.
MatchMedia
Matchmedia er et bibliotek som replikerer CSS media spørringer. Biblioteket er ikke så rent faktisk, men det er et veldig nyttig bibliotek som jeg bestemte meg for å sette på listen. Hvis du trenger å gjøre skript basert på brukervisningsstørrelsen eller medietypen, er dette biblioteket du vil ha.
Følgende er et eksempel som brukes til å kjøre skript i en 320px og under visningsstørrelse:
hvis (matchMedia ('bare skjerm og (maks bredde: 320px)'). kamper)
Sass Burger
Sass Burger kommer med en Mixin som lar deg lage en “hamburger” ikonet og slå det inn i et kryssmerke med mindre stress.
Marx
Marx er en samling av CSS-stilregler for å gjøre elementstiler mer konsistente. Det er tilpassbart (med Sass), lett, og virker ut av esken. Et godt alternativ til allerede populære CSS reset verktøy som Normalize.css.
CSS.js
CSS.js brukes til å analysere CSS-filer for stildeklarasjon. Biblioteket ble opprinnelig brukt til teamet på Jotform for å bygge en WYSIWYG-opplevelse for formredigering med CSS. Nå har de åpnet det for at vi alle skal bruke. Verdt å spare, bare hvis du trenger det senere.