Verse hulpbronnen voor webontwerpers en ontwikkelaars (maart 2016)

In ons laatste deel hebben we ons gericht op de verschillende Javascript- en CSS-bibliotheken om betere websites en webtoepassingen te bouwen. Deze maand hebben we meer bibliotheken aan te bevelen naast een kleine focus op typografie.

In deze ronde van de serie kijk je naar een paar JS-bibliotheken die je kunt gebruiken, maar ook een verzameling tips, een heel lang essay over typografie, een kleurengenerator en een licht frontend raamwerk. Zonder verder oponthoud, laten we ze eens bekijken.

Klik voor meer bronnen

Ontdek onze volledige verzameling aanbevolen bronnen en de beste beschikbare hulpmiddelen voor webontwerp en -ontwikkeling.

JS Tips

JS Tips is een verzameling JavaScript-tips, waarvan sommige ronddraaien syntaxis, wat over code efficiëntie en prestaties, en enkele anderen zijn specifiek voor een framework zoals AngularJS. Nieuwe tips worden dagelijks toegevoegd en er zijn momenteel 50 uitgegeven tips. Het is in wezen een must-bladwijzer site voor elke webontwikkelaar.

Vagrant Manager

Vagrant Manager is GUI-applicatie om Vagrant te besturen. Soortgelijke MAMP, waar u Vagrant kunt stoppen of uitvoeren en kunt zien welke Vagrant momenteel wordt uitgevoerd. De app is beschikbaar voor OS X en voor Windows. Als je niet zeker weet wat Vagrant is, bekijk dan onze vorige post over Hoe WordPress lokaal te installeren met Vagrant.

Bulma

Bulma is een frontend raamwerk. Het pakket bevat enkele gemeenschappelijke UI-componenten van het web zoals navigatie, dropdown en (natuurlijk) het raster dat volledig is gebouwd met Flexbox. De enige functie ontbreekt (althans voorlopig) is de JavaScript-componenten. Bulma-componenten zijn veel slanker in vergelijking met Bootstrap, maar het zou voldoende moeten zijn om een kleine maar representatieve website te bouwen.

Gutenberg

Vernoemd naar Johannes Gutenberg, de uitvinder van de massale pers. Gutenberg is een verzameling van stijlregels voor een juiste typografische instelling op internet. De stijlregels stellen de basislijn, lettergrootte en schaal en lijnhoogte in. Een geweldige stijlbibliotheek om uw website-inhoud er veel beter uit te laten zien.

OkayNav

OkayNav is een jQuery om een responsieve navigatie te bouwen, maar niet zomaar een nieuwe. De plug-in heeft een iets andere kijk op responsief ontwerp: als de viewport wordt verkleind naar kleiner, is elk menu dat geleidelijk samengevoegd in een pictogram om de beperkte viewport-grootte te tolereren. Klinkt cool, niet??

Nieuwe webtypografie

De Nieuwe webtypografie is een diepgaand, eye-openend essay over typografie. Het bespreekt de stijlen uit de begintijd van boeken tot de huidige manier van bouwen en consumeren op het web. Goed onderbouwd met meerdere illustraties, en volledig gerefereerd, het is een lang artikel van Robin Rendle, maar zeker de moeite van het lezen waard om een beter begrip van typografie te krijgen.

Kleur Veilig

Kleur Veilig is een kleurengenerator-palet voor het web. Anders dan tools die we eerder in deze serie hebben genoemd, genereert ColorSafe alleen kleur die voldoet aan de WCAG-standaard voor kleurtoegankelijkheid.

Toegankelijk modaal dialoogvenster

Dit is een kleine (slechts ~ 0.5 kb) JavaScript-bibliotheek voor bouw een modaal dialoogvenster. Omdat ze toegankelijk zijn, kunnen gebruikers eenvoudig met een toetsenbord en muis door het dialoogvenster openen, sluiten en navigeren. Het pakket is gewoon kaal JavaScript, geen stilering, dus je kunt vrijelijk het dialoogvenster modal vormen zoals jij dat wilt.

Mo.js

Mo.js is een compleet pakket JavaScript-animatiebibliotheek. Het wordt geleverd met een aantal presets, zodat u de animatie snel kunt instellen en uitvoeren. Het is modulair, waardoor u onnodige functionaliteit kunt verwijderen, evenals vloeiend en soepel. Omdat het een frisse nieuwe bibliotheek is, is de documentatie helaas nog niet klaar (voorlopig).

deeltjes

Deze bibliotheek voegt zwevende deeltjesnetwerken toe aan uw website, gewoon om uw website er meteen koeler uit te laten zien. De deeltjes reageren op de cursorbeweging. De reacties en andere elementen zoals kleuren, afstand en vorm kunnen via de opties worden geconfigureerd.