Tools

De tools die ik gebruik veranderen eigenlijk constant. Dit komt enerzijds omdat de tools zelf veranderen, ze verdwijnen, worden vervangen door modernere of verbeteren. Aan de andere kant vraagt elk project om zijn eigen toolset. Een site met 1 pagina is minder complex dat een site met een grote database of een betaalsysteem. Ook maakt het uit of je in een team werkt of alleen.

pug logo

PUGis een preprocessor voor html. pug vereenvoudigt en versneld het schrijven van html. Je kan werken met layouts en mixins. Je hebt met een layout file 1 bestand voor je algemene opmaak, dit bestand kan je dan in al je html bestanden terug laten komen. Mocht je iets willen aanpassen dan gebeurt dit in alle html bestanden waarin je je layout bestnd aanroept. Je kunt in pug Javascript gebruiken (pug is Javascript). Je kunt dus werken met variabelen, if-statemens, loops en functies. Erg handig!!

sass logo

Sassis ook een preprocessor maar dan voor CSS. Met Sass heb je veel meer mogelijkheden dan met css. Je beschikt over variabelen (bijvoorbeeld voor kleuren of lettertypes) over mixins en formules. Ook kan je je css opdelen in blokken of partials, dit is heel prettig voor het overzicht. Dit wordt uiteindelijk weer samengevoegd tot een css bestand.

bem logo

BEMof block element modifier is een systeem om het gebruik van css te versimpelen. Elk block wat gestyled moet worden krijgt een classnaam. Door deze naamconventie wordt het gemakkelijker om goede classnamen te maken die gemakkelijk terug te vinden zijn. Je krijgt eigenlijk blokken css.

es6 logo

ES6Javascript is een dynanische taal, steeds komen er functies bij en verdwijnen er dingen. De laatste grote verandering is ES6. Door deze aanpassingen wordt de taal uitgebreider en gemakkelijker te gebruiken. De laatste updates van alle grote browsers ondersteunen de nieuwe specs, de ouder helaas niet altijd. Wil je toch ES6 gebruiken en ook oudere browsers ondersteunen gebruik dan Babel.

babel logo

Babelis een Javascript compiler. Jij gebruikt ES6 Javascript en Babel vertaald dit naar de oude syntax die oudere browser ook begrijpen.

emmet logo

Emmetof block element modifier is een systeem om het gebruik van css te versimpelen. Elk block wat gestyled moet worden krijgt een classnaam. Door deze naamconventie wordt het gemakkelijker om goede classnamen te maken die gemakkelijk terug te vinden zijn. Je krijgt eigenlijk blokken css.

eslint logo

Eslintis een tool om er voor te zorgen dat je code voldoet aan een bepaalde standaard. Zeker in teams zorgt dit er voor dat iedereen dezelfde stijl gebruikt. Je kan zelf stijlen bepalen of je gebruikt een stijl-guide. De guide van AirBnb is er bijvoorbeeld eentje. Mochten er stijlen zijn die je niet prettig vindt dan kun je die per project of globaal aan of uit zetten.

npm logo

npmof Node Package Manager is een bibliotheek vol met Javascript code. Wil je bijvoorbeeld een image-slider en heb je niet de kennis of de tijd om deze te bouwen dan is er hier eentje te vinden die je kan gebruiken en kan aanpassen naar eigen wens.

webpack logo

webpackis een buildtool. Of eigenlijk een systeem dat wat zaken voor je automatiseerd. Bijvoorbeeld je Sass omzetten naar CSS en deze meteen door een minifier halen. Of al je Javascript bestanden samenvoegen tot 1 compact bestand. En ook heel handig je browser verversen als je ergens een aanpassing hebt gedaan.

vscode logo

vscodeof Visual Studio Code. Voor code schrijven heb je een editor noidig. Een simpele text-editor volstaat, maar wil je meer dan heb je een echte code-editor nodig. Vscode is degene die ik op dit moment gebruik. Je hebt dan alles in 1 en je kunt hem volledig naar je hand zetten qua kleuren, iconen en plugins. Het beste is om er een paar te proberen om zo te kijke welke jij prettig vindt.