Webdesign

Nieuwe tools voor frontend development schieten als paddenstoelen uit de grond. Dit gaat zo snel dat het lastig en tijdrovend is om het bij te houden. Je moet immers ook gewoon je werk doen. Elke developer heeft dus zijn eigen favorieten die hij/zij in de dagelijkse praktijk gebruikt. Ben je benieuwd wat je mede-developer allemaal gebruikt? That’s where I come in!

Bij Byte werken we namelijk nauw samen met honderden developers van Nederlandse webdevelopmentbureau’s. En ons motto is dat niet iedereen zelf het wiel zou moeten uitvinden: kennisdeling staat hoog op onze agenda. Wij kunnen daar als bindende factor een unieke rol in spelen. Voor deze blog heb ik daarom een aantal developers gebeld met de vraag: “welke coole tool heb jij de afgelopen tijd ontdekt die iedere developer eigenlijk zou moeten gebruiken?” Hier komen de tips:

BrowserSync met Ngrok

Robin Poort van Perfect Web Team is een groot fan van de combinatie van BrowserSync met Ngrok, dit scheelt hem veel tijd tijdens het ontwikkelen. Browsersync is een gulp/grunt plugin die je lokale websites automatisch kan refreshen (dus zonder browser add-on) en over verschillende devices in-sync kan houden. Scrollen, klikken, JavaScript, alles in sync op meerdere browsers / devices tegelijkertijd. Met Ngrok kun je vervolgens je lokale website delen d.m.v. een (beveiligde) tunnel. Ngrok creëert een openbare URL (https://yourapp.ngrok.io) naar je lokale webserver. En wil je er zeker van zijn dat er geen ongewenste gasten meekijken? Dan kun je de tunnel gewoon beveiligen met HTTP authenticatie. Zo kunnen mensen aan de andere kant van de wereld ook jouw lokale website bekijken. Wat het extra cool maakt is dat je door de BrowserSync / Ngrok combinatie overal live-reloading hebt, dus zelfs op BrowserStack, IE8 en je mobiele telefoon. Zelfs al werk je met een oude testmachine. Zodra je naar de juiste url gaat heb je live-reload en sync.

Geen gezeik met de reload-knop

Dat veel developers het een probleem vinden om tijdens het development process steeds op de reload-knop te moeten drukken blijkt wel uit het feit dat ook Damar Anggorro van Whello hier een tip voor geeft. Hij gebruikt met veel plezier de tool Live Reload. Hierdoor wordt refreshen verleden tijd. Volgens hem zou geen enkele developer zonder Live Reload moeten werken.

Vanaf één locatie, met één handeling, al je thema’s bijwerken

“Wanneer je meerdere websites met hetzelfde thema aan het ontwikkelen bent kun je het jezelf een stuk makkelijker maken met WP Pusher” aldus Wietse Cats van Scab Webontwerp. Deze WordPress plugin maakt het mogelijk om vanaf één locatie alle thema’s met maar één handeling bij te werken. De plugin maakt een koppeling tussen Git en de betreffende websites. Dit geeft een enorme tijdwinst en werkt uiterst efficiënt.

Library Vue.js

Simon Blaauw van Doit Online Media raadt iedereen aan om met Vue.js te gaan werken. Dat is een gloednieuwe library die de mogelijkheid biedt tot “two way data-binding”. Kort gezegd, alle data-gerelateerde veranderingen aan het model worden direct doorgegeven aan de bijbehorende view(s) en vice versa. Het verschil met bijvoorbeeld angular.js is dat vue.js zeer flexibel en simpel is. Bovendien kan het zeer goed samen worden gebruikt met andere libraries. Tevens ondersteunt vue.js ook mixins en templates.

Creeër een uniek lettertype

Niels van Doorn van Netgemak maakt dankbaar gebruik van Glyphr Studio hiermee kan hij makkelijk online lettertypes maken of bestaande lettertypes bewerken. De meeste font design programma’s zijn heel erg complex of kosten veel geld. Glyphr Studio werkt een stuk makkelijker en is ook nog een gratis te gebruiken. Super handig als je een uniek lettertype wilt gebruiken op je website.

Nog een handige tool volgens Niels van Doorn: Wkhtmltopdf. Deze kan HTMl en / of CSS omzetten naar een PDf. Sommige hostingproviders (waaronder Byte) hebben dit al standaard geïnstalleerd op hun servers waardoor je er heel makkelijk gebruik van kunt maken.

Een gouden oude

Geen nieuwe tool, maar wel een die niet in de lijst zou mogen ontbreken volgens Simon Blaauw (Doit Online Media), is Foundation. Sinds de laatste update is Foundation er een stuk op vooruit gegaan; er zijn heel veel verbeteringen doorgevoerd en het heeft een heleboel nieuwe functionaliteiten gekregen. Het is een responsive front-end framework waarmee je eenvoudig en vooral sneller responsive websites kunt bouwen. Het fijne aan Foundation is dat het een hapklaar en gratis te downloaden product is. Het bevat een grid en losse elementen die vanaf hun website gedownload kunnen worden. Hiermee is er al een fundering voor de website aanwezig en door bestaande classes aan te roepen in combinatie met de eigen code wordt het maken van een responsive design een fluitje van een cent.

 

Tot zover de favoriete tools van onze partners die je zeker eens zou moeten proberen. Uiteraard zijn dit niet de enige handige tools, er zijn vast nog veel meer, maar dit zijn de ervaringen uit de praktijk. Des te nuttiger als je het mij vraagt. 😉

Heb je zelf nog aanvullingen op bovenstaande tools? Laat hieronder dan jouw tip achter.

Scan je eigen Magento shop op veiligheidslekken