project tech - GiiovanniK/blok-tech GitHub Wiki

Inhoudsopgave

Week 1

Git & Github

Ik heb al met Git & GitHub gewerkt op mijn vooropleiding en stages, dus de basics zoals pushen en pullen zijn al bekend bij mij. Het begrip Open Source was ook al bekend bij mij, maar de verschillende licenties en het verschil hiertussen nog niet, dus ik heb mij een beetje ingelezen hierover en vervolgens ook een licentie aangemaakt en toegevoegd aan de repository. Ook heb ik nog een README file toegevoegd en wat structuur gebracht in mijn wiki.

Terminal

Ik had ook al enige ervaring met de terminal vanwege mijn vooropleiding en hobby's, dus wist al aardig wat veelgebruikte commands, zoals cd, ls, mkdir, rm etc. Ik heb de tutorial van de terminal nog wel gevolgd als opfrisser voor de dingen die ik al wist en om nog wat nieuwe commands te leren. Zo wist ik nog niet het bestaan van '>' (overwrite) en '>>' (append). De code van het behalen van de terminal tutorial, ofwel een base64 encode van de GitHub username 😉: R2lpb3Zhbm5pSwo=

Het navigeren naar de desktop via terminal (WSL) op Windows was nog even een klein uitzoek werk, omdat deze een eigen root folder heeft, maar na een tijdje was het gelukt met de volgende command: cd /mnt/c/Users/[username]/Desktop/[map]

Concept

Matching app voor artiesten/muzikanten om op zoek te gaan naar bijvoorbeeld: vocalists/gitaristen/pianisten etc. om een samenwerking mee aan te gaan voor bijvoorbeeld een nummer of band.

Job stories

  1. Wanneer ik de matching app gebruik wil ik kunnen matchen op mijn voorkeuren, zodat ik kan vinden wat ik nodig heb.
  2. Wanneer ik op zoek ben naar anderen wil ik kunnen zien waarin hen gespecialiseert zijn, zodat ik een juiste keuze kan maken.
  3. Wanneer ik iemand heb gevonden die aansluit aan mijn voorkeuren wil ik contact kunnen opnemen, zodat een samenwerking gestart kan worden.
  4. Wanneer ik mijzelf als beschikbaar opgeef voor een project wil ik al mijn specificaties kunnen opgeven, zodat anderen, die opzoek zijn, een goede indruk krijgen.
  5. Wanneer ik heb gewerkt aan verschillende projecten wil ik deze kunnen laten zien op mijn profiel, zodat ik een goed portfolio heb op het platform.
  6. Wanneer ik de matching app wil gebruiken wil ik kunnen inloggen en registreren, zodat ik mijn specificaties kan opgeven en met anderen kan communiceren.

Gekozen job story: Wanneer ik de matching app gebruik wil ik kunnen matchen op mijn voorkeuren, zodat ik kan vinden wat ik nodig heb.

Requirement list

  • Filters voor het refinen van de resultaten op basis van voorkeuren en benodigdheden
  • Profiel + info
  • Communcatie functie (chat/form)
  • Audio playback voor previews van werk (portfolio)
  • Tags voor het refinen van genres, specialisaties etc. -> gebruiken voor search/filteren

Wireframe

Week 2

Ik heb de GIT Tutorial gevolgd, om zo GIT nog beter te begrijpen en uit mijn hoofd de belangrijkste functies te kennnen, zoals git add ., git commit -m "" en git push/git pull. Verder heb ik de structuur van mijn README neergezet en deze aangevuld waar dat al kan.

Week 3

Code Editor

Ik gebruik als code editor al een hele lange tijd VS Code. Hiervoor gebruikte ik een tijdje (vooral in het begin van mijn opleiding AO) Notepad++. Best wel snel overgestapt naar VS Code. Ik vind de community support heel relaxed en ik vind de UI ook heel goed. Het is overzichtelijk en bevat veel verschillende opties, zodat je de editor naar jouw wensen kan aanpassen. Er zijn ook veel verschillende community extenties beschikbaar die bepaalde functies wat gebruiksvriendelijker maken en veel automatiseren. Zelf gebruik ik altijd een dark mode theme, omdat ik dit relaxder vindt voor mijn ogen. Voor de rest heb ik niet echt iets aangepast aan mijn VS code instellingen, alles in zo'n beetje default.

Linters & Formatters

Zelf had ik al in mijn VS Code ESLint geïnstalleerd. Dit is een linter voor JavaScript die checkt op formatting en code fouten en bied je dan ook code fixes aan. Ook heb ik Prettier al een tijdje geïnstalleerd en deze checkt specifiek op fouten in de formatting van HTML, CSS & JavaScript. Deze checkt bijvoorbeeld op fouten met indents(TABjes) en closures van functies etc. Dit werkt goed voor JavaScript files, maar minder goed voor HTML en CSS files. Om dit op te lossen heb ik onderzoek gedaan naar een formatter die wel goed is in HTML en CSS bestanden formatteren. Ik ben uit gekomen op Beautify. Deze extensie is goed in het formatteren van HTML en CSS bestanden.

Wat nadelen die voort zijn gekomen uit deze twee formatters zijn.

  • Prettier doet de formatting automatisch op save van het bestand, Beautify is een handmatige actie die je moet uitvoeren door rechter muisknop te klikken op je document en dan Format Document.
  • Prettier voor JavaScript. Beautify voor HTML en CSS.

Extensies

Verder gebruik ik ook nog de extensie Live Server. Dit zorgt ervoor dat HTML pagina's automatisch ververst worden op aanpassing. (soort nodemon voor HTML). Op dit project niet echt relevant. Ook heb ik Markdown All in One geïnstalleerd die helpt bij het opmaken van markdown supported files, zoals de README.

CLI's

Verder gebruik ik voor de GIT functies eigenlijk altijd de Ubuntu terminal voor Windows also known as Windows Subsystem for Linux (WSL). Voor mijn project de ingebouwde VS code command line (CMD) gebruikt om npm packages te installeren en alles wat betrekking heeft tot het project runnen.

Bronnen

Microsoft. (2016, April 14). Visual Studio Code - Code Editing. Redefined. Microsoft - VS Code. https://code.visualstudio.com/ Visual Studio Marketplace. (n.d.). Marketplace Visual Studio Code. https://marketplace.visualstudio.com/VSCode