Verse hulpbronnen voor webontwerpers en ontwikkelaars (juni 2015)

Kun je geloven dat deze serie bijna drie jaar loopt? In die korte tijd hebben we ten minste 30 lijsten met de nieuwste bronnen voor webontwerpers en -ontwikkelaars getoond. En we gaan dit volhouden met een nieuwe compilatie voor juni.

In deze compilatie kijken we naar een paar JavaScript-bibliotheken voor het weergeven van schuifregelaars, vloeiender scrollen voor gegevenstabellen, een koel lifteffect voor een scroll-naar-top-knop en meer.

Laten we ze eens bekijken.

Mediumstijl bevestigen

Medium is geprezen om zijn ontwerp; de lay-out en de UI lijkt grondig te zijn nagedacht. Bovendien inspireert het ook webontwikkelaars om JavaScript- of CSS-bibliotheken te ontwikkelen om de UI te repliceren. Mediumstijl bevestigen is één JavaScript-bibliotheek die lijkt op de pop-up of het dialoogvenster in Medium.

pinguïn

Penguin is een nieuw front-end framework dat je als basis van je websites zou kunnen gebruiken. Met tools als Grunt en Sass kunt u gemakkelijk bibliotheken of CSS toevoegen of verwijderen die u niet uit het framework nodig hebt en het zo licht mogelijk maken. Het is ook een goed alternatief voor Bootstrap en Foundation.

Elevator.js

Heb je die knop in een website gezien waarmee je naar de bovenkant van de pagina kunt gaan? De meeste knoppen brengen u naar de top, maar met Elevator.js krijgt u een glijdend versnellingseffect vergelijkbaar met een lift, de muziek en de “Ding!” geluid zodra je de bovenste verdieping hebt bereikt. Echt heel leuk!

X-Instagram

X-Instagram is een aangepast Polymer-element dat afbeeldingen van Instagram per tag kan weergeven en weergeven. Dit element maakt het hele proces een stuk eenvoudiger. We voegen eenvoudigweg het element toe net als een normaal HTML-element en specificeren het trefwoord van de tag als de elementattributen.

En laat de magie beginnen!

CamanJS

CamanJS is een geweldige JavaScript-bibliotheek voor beeldmanipulatie. Het wordt geleverd met een functieset die u vaak zou vinden in een beeldeditor. U kunt vervaging van de afbeelding, zwart en wit, en zelfs het contrast vergroten.

ClusterizeJS

Clusterize.js is een JavaScript-bibliotheek die de prestaties verhoogt wanneer het om veel gegevens in tabellen gaat. Terwijl je naar beneden scrolt in een tabel met bijvoorbeeld 5000 in de lijst, zal de ervaring normaalgesproken laggy en schokkerig worden. Deze JavaScript-bibliotheken zullen dit probleem aanpakken, waardoor de scrollactie soepel verloopt.

Zit de test

Zit de test is een verzameling vragen om je vaardigheden en kennis over CSS3, HTML5 en JavaScript te evalueren. Elke test krijgt een aantal vragen en een beperkte tijd om al deze vragen te beantwoorden. Het is een goede bron om te ontdekken hoe goed we echt zijn met deze talen.

HTML-pijlen

Dit is een verzameling speciale eigen Unicode-symbolen die u kunt insluiten in HTML en CSS. Deze tekens omvatten pijlen, valuta en interpunctie. Je zult merken dat je soms geen lettertypepictogram nodig hebt om die karakters weer te geven.

Flickity

Flickity is een JavaScript-bibliotheek om carrousels, galerijen of schuifregelaars op uw website weer te geven. Het is geoptimaliseerd voor touchscreen; je kunt moeiteloos de carrousels schuiven met een vinger, of het trackpad als je op een laptop zit. Het komt ook met een hele reeks opties die volledige aanpassing mogelijk maken op elke gewenste manier.

Typeslab

Typen is een handig hulpmiddel om een ​​poster van het Slab-type te maken. Schrijf gewoon de inhoud en kies het lettertype, Typeslab genereert de poster meteen. Je kunt het dan downloaden of publiceren in Imgur.

MatchMedia

Matchmedia is een bibliotheek die CSS-mediaquery's repliceert. De bibliotheek is eigenlijk niet zo fris, maar het is echt een nuttige bibliotheek die ik besloot om op de lijst te zetten. Als u scripting moet uitvoeren op basis van de grootte van het gebruikersportaal of mediatype, is dit de gewenste bibliotheek.

Het volgende is een voorbeeld dat wordt gebruikt om een ​​script uit te voeren in een 320px en kleiner dan de viewport-grootte:

 if (matchMedia ('alleen scherm en (max-width: 320px)'). komt overeen)  

Sass Burger

Sass Burger wordt geleverd met een Mixin waarmee je een “Hamburger” pictogram en verander het in een dwarsteken met minder ruzie.

Marx

Marx is een verzameling CSS-stijlregels om elementstijlen consistenter te maken. Het is aanpasbaar (met Sass), lichtgewicht en werkt uit de doos. Een goed alternatief voor reeds populaire CSS-resettools zoals Normalize.css.

CSS.js

CSS.js wordt gebruikt om CSS-bestanden te parseren voor stijlverklaring. De bibliotheek werd aanvankelijk gebruikt voor het team van Jotform om een ​​WYSIWYG-ervaring te bouwen voor het bewerken van vormen met CSS. Nu hebben ze het open source voor iedereen. Moeite waard om te bewaren, voor het geval u het later nodig heeft.