In het kort

De teams van design en development van Nexwork nemen op 8 oktober deel aan het Hacktoberfest! Op deze dag gaan zij een bijdrage leveren aan de software van het Umbraco CMS. Lees snel verder om te ontdekken wat deze dag inhoudt.

Hacktoberfest

Hacktoberfest is een evenement rondom de ontwikkeling van open source software, dat loopt van 1 oktober tot en met 31 oktober 2020. Het wordt georganiseerd door Digital Ocean, Intel en Dev.to. Een deelname aan de Hacktoberfest challenge is mogelijk door een pull request te maken (dit is een verzoek tot het wijzigen van code) op open source software. Dit betekent dat iedereen, van student tot ervaren developer, mee kan doen.

Bij het indienen van 4 of meer pull requests in de maand oktober, is de Hacktoberfest challenge afgerond. De eerste 70.000 deelnemers die de challenge afronden krijgen ook een beloning. Ze kunnen kiezen tussen een T-shirt of het planten van een boom. Naast het bijdragen aan de open source software, kan een deelnemer ook iets goeds doen voor het milieu.

Open source software

Open source software (OSS) is software waarvan de broncode publiekelijk beschikbaar is. Vaak is deze software ook gratis te gebruiken. Een belangrijk gegeven bij OSS is dat een gebruiker ook kan bijdragen aan de code. Dit wordt vaak zelfs aangemoedigd. Tijdens zo’n hackathon leer je als developer ook hoe de software intern werkt.

Je bekijkt deze pagina misschien met Chrome of Firefox en maak je zoal gebruik van open source software.

Bijdragen aan OSS gebeurt vaak via een pull request (PR). De werkwijze hierbij is dat een deelnemer een kopie van de broncode neemt en dan de wijzigingen uitvoert. Wanneer de wijzigingen klaar zijn, stuurt de deelnemer een PR naar de onderhouder van de broncode. Deze kan de wijzigingen dan beoordelen en eventueel opnemen in de broncode.

Dit kan een bugfix zijn, maar ook het inbouwen van een volledig nieuwe feature. Maar ook het bijwerken van documentatie telt mee voor Hacktoberfest. Kennis van programmeren is dus geen vereiste om mee te doen aan Hacktoberfest.

Visual Hackathon

Nexwork hackathon

De design en development teams van Nexwork gaan zich tijdens Hacktoberfest focussen op het bijdragen aan de software die we dagelijks inzetten voor onze klanten. Op 8 oktober organiseren we een hackathon waarbij onze developers zich de hele dag zullen focussen op het bijdragen aan het Umbraco CMS. Het team van design zal de eerste opstart doen, waarbij zij de atomen en componenten gaan ontwikkelen die het development team nodig heeft. Daarnaast zullen zij het gehele designproces versneld uitvoeren, vanaf het uitdenken van een oplossing tot het testen en optimaliseren daarvan. Uiteraard gebeurt dit in nauwe samenwerking met het development team. Zo ondersteunen en helpen zij elkaar waar dat nodig is. Uiteindelijk heeft de hackathon één doel: de software voor onze klanten verbeteren! Een mooie bijkomstigheid is dat we ook bijdragen aan het milieu.

Tijdens deze hackathon zullen we regelmatig updates plaatsen in onze Instagram Stories, volg ons hier om op de hoogte te blijven!

Hackathon-mockup

Eindresultaat

Gedurende de dag hebben de expertises design en development samengewerkt om een fictief project te ontwikkelen. Voor aanvang werd er input van de wereldwijde Umbraco-community gevraagd via GitHub Discussions. Daaruit kwam het plan op een Umbraco starter kit op te zetten met één duidelijk doel: best practices in een project gieten voor een non-profit organisatie. Er is gekozen om een website template te maken, waarmee non-profit organisaties gemakkelijk en gratis een website kunnen opzetten. Het uitgangspunt hierbij was mobile first. Omdat het doneren een van de belangrijkste functies is, wordt dit zo makkelijk mogelijk gemaakt.

Design

Samen met Development zijn Femke en Ronald gestart met het opstellen van een functionaliteitenlijst. Welke essentiële functionaliteiten zijn er nodig voor een non-profit organisatie? Daarna is er in een snel tempo een wireframe uitgewerkt die vervolgens volledig gedesigned is. Door middel van een 8px grid en een UI-system kan development snel en effectief het design vertalen naar een werkende website. Aan de hand van componenten kunnen de functionaliteiten gemakkelijker ingezet worden over verschillende pagina's. 

Er is gekozen om binnen het timeframe een mobiele versie uit te werken van het design. Meer dan de helft van internetgebruikers bezoekt websites via een mobiel apparaat. De mobile first aanpak is daarom ook zeer geschikt voor dit project.

Development

Waar er voorheen altijd gebruik werd gemaakt van Bootstrap, heeft het team van front-end development de nieuwe methode Tailwind getest. Bij Bootstrap zit een developer vaak vast aan componenten die al opgemaakt zijn. Hierdoor moet er nog losse css worden geschreven om deze layout aan te passen. Met Tailwind maakt men gebruik van een set classes om een layout op te maken. Daarna is er de keuze om zelf herbruikbare componenten te maken. Tailwind werkt meer vanuit de gedachte van atomic design, beginnen vanuit het kleinste element.

Het backend team heeft tijdens de hackathon de basis van de Visual Studio solution opgezet en daarnaast een sourcecontrol en buildchecks zodat de contributies via pull requests snel kunnen verkopen. Sourcecontrol is versiebeheer en met build checks zorgen we ervoor dat iemand die een pull request doet, geen code stuk maakt. Verder is er een aangezet gemaakt in de algemene Umbraco setup van diverse soorten documentatie. Nu is het project in handen van de community!

Wil jij zelf graag meebouwen aan dit project? Dat kan! Klik hier voor de details.