Contacteer ons: +32(0)9 391 46 26 of info@newance.be

De 5 must-reads van backend-developer Pieter-Jan

Geschreven op 15/03/2018 door Pieter-Jan - Development

Zelfontplooiing en vernieuwing is belangrijk bij Newance. We krijgen de tijd en de ruimte om aan learning te doen, inspiratie te vinden of onze werkwijze te optimaliseren. In het kader van een project maar soms ook om mee te zijn met trends op het vlak van webontwikkeling. Of gewoon uit interesse.

Backend-developer Pieter-Jan deelt graag de artikels met je die hem deze week geïnspireerd, geboeid of iets bijgebracht hebben.

1. A Complete Guide to Flexbox

Als backend-developer kan het al eens gebeuren dat ik snel een block moet positioneren. Waar het vroeger zoeken was naar een manier om iets proper verticaal uit te lijnen, is dit sinds een tijdje makkelijk op te lossen met Flexbox. Dit artikel staat vaak open in m'n browser en in samenwerking met de makkelijke tailwindcss classes is het nu super gemakkelijk om zaken uit te lijnen.

See the Pen Flexbox & Tailwind CSS classes by Pieter-Jan Claeysens (@PieterxJan) on CodePen.

2. Should you use let, var or const?

Wanneer ik deze week een stuk JavaScript code samen met Joachim aan het overlopen was, merkte ik op dat hij gebruik maakte van let in plaats van var. Dit artikel legt duidelijk het verschil uit tussen deze twee manieren om een variabele te declareren. Ook const komt aan bod.

3. Building a Modal Component with Vue.js

Voor een webapplicatie die in ontwikkeling is hadden we een modal nodig om een formulier te tonen. Enkele dagen later kwam er een nieuw formulier bij die ook in een modal moest getoond worden. Dus stelde ik me meteen de vraag hoe we een modal zo herbruikbaar mogelijk te kunnen maken. Dit artikel zette me goed op weg om één modal-component te maken die dan gebruikt zou worden voor de verschillende formulieren in te renderen.

Verder haalde ik hier een goeie manier uit om ervoor te zorgen dat een modal moet sluiten als je naast de modal zelf klikt. Het principe is zo dat je een mask legt over je ganse viewport en onder de modal. Als daarop geklikt wordt sluit je de modal. Om te vermijden dat je click propageert als je op de modal zelf klikt, plaats je @click.stop op de modal zelf.

See the Pen Herbruikbare VueJS modal component by Pieter-Jan Claeysens (@PieterxJan) on CodePen.

4. Tailwind plugin system released

Deze week lanceerde Adam Wathan een nieuwe versie van z'n Tailwind CSS framework: Tailwind v0.5.0. De meest in het oog springende feature is de plugins-functionaliteit. Waar je vroeger de utility-classes op elke button moest herhalen kan je nu een plugin aanmaken die alle classess bundelt.

5. Debouncing and Throttling Explained Through Examples

Onlangs programmeerde ik een autocomplete functie. Bij elke toetsaanslag voerde ik een query uit die resultaten toonde in een dropdown. Maar ik merkte dat ik bij het woord voetbal maar liefst 7 zoekopdrachten ging uitvoeren over een periode van nog geen seconde. Veel te veel dus en dit kon beter. Ik kwam terecht op Lodash, een JavaScript library die enkele handige functies voorziet. Twee daarvan zijn debounce en throttle. Beide functies zorgen ervoor dat we controle hebben over hoe vaak we een stuk code uitvoeren.

De debounce functie zorgt ervoor dat we een stuk code pas uitvoeren als er voor x-tijd geen event meer is geweest. Bij throttle wordt het stuk code maximaal één keer per x-tijd uitgevoerd. Niet zo makkelijk om uit te leggen, daarom hieronder een snippet als voorbeeld. Klik zo snel mogelijk op beide knoppen en merk op hoe beide functies hiermee omgaan. Debounce licht pas op als er één volle seconde gepasseerd is zonder click. Bij throttle licht het veld elke seconde op.

See the Pen Debounce vs Throttle by Pieter-Jan Claeysens (@PieterxJan) on CodePen.

Deel deze tip:

Tip is geschreven door Pieter-Jan Claeysens

Back-end developer. Programmeert graag gebruiksvriendelijke websites. Won met Sint-Truiden de Champions League in Football Manager.

Plaats een reactie

Wordt niet weergegeven op de website.

Plaats een reactie

Wordt niet weergegeven op de website.