Oud medewerker | 18 juli 2018
Front-end webdevelopment is een groot vakgebied. Er zijn duizenden manieren om een website te maken en daarbij horen evenveel verschillende tools om mee te werken. In dit artikel benoem ik vijf tools die mij in het verleden goed zijn bevallen en waar ik bij ByYourSite veel gebruik van maak.
Bootstrap werd door Twitter ontwikkeld om consistente ontwerpen te kunnen aanbieden. Het is een zogenaamd ‘responsive framework’ wat bedoeld is om snel website lay-outs te kunnen maken die zich aanpassen aan verschillende schermformaten en er hetzelfde uitzien in verschillende browsers. Bij ByYourSite maken we voor verschillende klanten al langer gebruik van Bootstrap. Sinds 30 april 2017 is versie 4 uit.
jQuery is een javascript library die in de webwereld erg bekend is. Het is bedoeld om scripts aan de client-side mee te schrijven (de kant die een gebruiker ziet als hij naar jouw website gaat). Het is een efficiënte tool welke veel features bevat die het schrijven van JavaScript code veel simpeler maakt (maar de echte die-hard programmeurs kunnen natuurlijk ook zonder).
Jouw website moet natuurlijk zijn eigen huisstijl hebben. De manier waarop deze huisstijl wordt doorgevoerd is via een stylesheet. Dit is een lijst met stijlregels die bepalen welke kleuren, fonts, lay-outs en dergelijke op jouw website mogelijk gemaakt worden. Deze lijst is geschreven in CSS.
SASS staat voor Syntactically Awesome StyleSheets en is een zogenaamde preprocessor voor CSS. Het voegt zaken toe, zoals variabelen en het nesten van verschillende regels, mixins en inline imports. Dit betekent dat je als developer betere en overzichtelijkere stylesheets kan schrijven. Daarnaast is de syntax vrijwel identiek aan CSS (met een paar verschillen) waardoor er eenvoudig aan te wennen is als je al CSS beheerst.
Greensock, of specifieker hun animatieplugin TweenMax, ken ik nog uit de goede oude tijd toen Flashplayer nog een ‘ding’ was op internet. Deze animatie plugin is origineel uitgebracht als plugin voor Flash, maar is daarna overgezet naar een JavaScript versie. Het is een extreem efficiënte plugin met meerdere gave features, zoals drawSVGPlugin, SplitText en TimelineMax. Omdat het zo makkelijk in het gebruik is, het stabiele animaties teruggeeft, een grote mate van controle geeft over het eindresultaat en makkelijk te leren is, gebruik ik deze plugin met veel plezier voor onze klanten.
Websites moeten goed werken op verschillende devices. Hiervoor bestaat Browserstack, wat naar eigen zeggen “the only testing infrastructure you need” is. Browserstack kan meerdere devices simuleren, zoals Android en iOS toestellen, tablets en verschillende windows versies. Het heeft daarbij per device nog weer een onderverdeling in welke veelgebruikte browsers op dat device beschikbaar zijn. Omdat het een betrouwbare weergave geeft van hoe jouw website er op dat specifieke device uitziet, is het hiermee mogelijk om de website grondig te kunnen testen op device en responsive issues.
Deze bovenstaande tools zijn wat mij betreft een aanrader op het gebied van front-end webdevelopment en testen. Het is natuurlijk geen volledige lijst en voor elke tool zijn legio alternatieven te vinden. De genoemde tools zijn mij in het verleden goed bevallen en gebruiken wij actief binnen ByYourSite.