Process - MrSmarto/Anime-Smarty GitHub Wiki

Ik heb een mooie octocat gemaakt :)

In deze eerste les zijn we geintroduceerd aan het CLI(Terminal). Via de CLI hebben we homebrew gedownload en vervolgens daarme "Git" gedownload. Git gaan we gebruiken om met meerdere personen aan een project te kunnen werken ook wel een "version control" programma. Tijdens het gebruik van Git gebruiken we voornamelijk 4 codes:

• 1. git pull
• 2. git add
• 3. git Commit
• 4. git Push

CLI = Command line Interfact
Deze commands worden er gebruikt.

Ik heb ook voor het eerst met markdown gewerkt. Dit begrijp ik eigenlijk nu al best goed.

In week twee moesten wij opzoek gaan naar populaire repositories op Github. Om onderzoek te doen naar hoe zo'n populaire readme is opgebouwd.

Ik kwam op de volgende repositories:

1. [chatGPT] (https://github.com/f/awesome-chatgpt-prompts)
2. [30 days JS] (https://github.com/Asabeneh/30-Days-Of-JavaScript)
3. [Chess] (https://github.com/timburgan/timburgan)
4. [Help Ukraine] (https://github.com/sindresorhus/awesome)

Dingen die ze overeen hebben:

• Bugs
• Snelle handleiding
• Geen complete documentatie in de README. Maar wel in de WIKI.
• Inhoudsopgave
• Links naar meer info
• Plaatjes
• Specificaties / Installatie
• Licentie
• (Screenshots als voorbeeld)

Git in het algemeen is een systeem/protocol. Waardoor je versie beheer voor je code kan toepassen.

1. Mocht je een fout maken, kan je heel gemakkelijk je vorige versie terug halen.
2. Maakt het makkelijk om samen te werken.

Je code staat ergens centraal. En door GIT te gebruiken kan je gemakkelijk code naar je lokale device te brengen en daar bepaalde veranderingen maken. In dit geval staat mijn code op github. Git werkt dus niet alleen met Github, het zou dus met allerlei verschillende soorten programma's zoals github kunnen werken.

1. Git Pull Hier haal je de data van de algemene plek waar de data is opgeslagen (github).

2. Git Add (Git remove mocht je een bestandje willen verwijderen) Zodra je jouw wijzingen hebt gemaakt. Add je deze in je lokale device als een soort pakket.

3. Git Commit Als je tevreden bent met het pakket dat je hebt gemaakt dan commit je.

4. Git Push Als laatste stuur je het nieuwe pakket dat je zelf hebt aangepast naar github. Waar andere personen dan weer verder kunnen werken met jouw code.

Je kan dus ook via visual studio code met GIT werken. Het is handig om eerst met de CLI te werken, zodat je de commando's leert. Vervolgens is het handig om bijvoorbeeld met VSC te werken.

De opdrachten die we in de eerste les hebben gemaakt.

Belangrijke inputs die ik heb gebruikt tijdens deze les:

• [mkdir = maak een mapje]
• [ls = laat een lijst zien]
• [cd = ga naar een map]
• [touch = maak een bestand aan]
• [git branch = om in de main branch van je github te komen]
• [git add . = maakt bestanden klaar]
• [git status = te controleren zijn klaar gezet]
• [git commit -m 'Dit het bericht' = een beschrijving geven aan de verandering]
• [git push = het bestand versturen naar github]
• [(github naam en wachtwoord opgeven)]
• [Token wachtwoord aanmaken op github (BRON: Quinten Kok]

Over het algemeen worden dependencies gebruikt voor pakketten die nodig zijn om het project te laten functioneren, terwijl devDependencies worden gebruikt voor pakketten die alleen nodig zijn tijdens de ontwikkeling. Door deze twee soorten afhankelijkheden te scheiden, kan je het project geordend houden en voorkom je dat onnodige pakketten in de productieomgeving worden geïnstalleerd.

1. Instillatie locatie Global dependecies worden op je computer geïnstalleerd terwijl local dependencies lokaal in je rojectdirectory worden geïnstalleerd.

2. Beschikbaarheid Global dependecies zijn geberuikbaar voor alle projecten op je computer, terwijl local dependencies specifiek zijn voor het project waarin ze zijn geïnstalleerd en alleen door dat project kunnen worden gebruikt.

3. De versie/updates Global dependecies orden meestal gebruikt voor tools die je in meerdere projecten gebruikt en hebben daarom ook een stabiele versie die zelden wordt veranderd. Terwijl local dependencies specifiek zijn voor het project en vaak een versiebereik hebben dat vaker wordt bijgewerkt.

4. Gebruik Global dependecies zijn meestal op zichzelf staande tools, zoals code-editors of hulpprogramma's. Terwijl local dependencies meestal pakketten zijn waarvan je project afhanekelijk is om te worden uitgevoerd.

Dit zijn een paar voorbeelden:

1. De applicatie opstarten Voorbeeld: "start": "node app.js"

2. De applicatie bouwen voor productie Voorbeeld: "build": "webpack --mode production"

3. Bepaalde test runnen Voorbeeld: "test": "mocha tests/**/*.js"

4. Een ontwikkelserver starten met automatisch herladen: Voorbeeld: "nodemon app.js"

5. je code 'linten' Voorbeeld: "lint": "eslint src/**/*.js"

Client (request)

• De actie van de user
• Is vaak op de web browser
• wilt een response back

Server (response)

• Een maschine die wacht op een aanvraag
• Stuurt de response terug naar de gebruiker

Request = de url die je in je browser invoert response = de html maar ook css, plaatjes etc

Metadata wordt opgeslagen in de header. Daaruit kunnen we uitlezen of een request is gelukt. Headers kan je ook goed customizen, zelfs besplissen wat voor content type je mee stuurt etc.

[Express] (https://expressjs.com/)

• app.get() is used to define a route for the HTTP GET method. When a client makes a GET request to a specific URL, the function you pass to app.get() will be executed.

• app.listen() is used to start the Express application listening for incoming requests on a specific port. When you call app.listen(), the application starts listening for incoming requests, and any routes you have defined using app.get() will be executed when the corresponding URLs are requested.

In summary, the app instance is a representation of an Express application, which provides a set of properties and methods that you can use to define the behavior of your web application. app.get() and app.listen() are examples of such properties and methods that are available on the app instance, and they allow you to define routes and start the application listening for incoming requests, respectively.

Eigenlijk heb ik in deze week ES6 geintroduceert gekregen. Ik vindt het super interessant maar wel echt lastig. Ik ben benieuwd hoe aankomende weken gaan verlopen.

Hoe zouden we progressive enhancement kunnen toepassen op ons eigen project? Daarnaast hebben we ook veel voorbeelden en live demo's gekregen van Robert. Als laatste hebben we kunnen zien hoe API's toegepast kunnen worden op een website.

• What type of component is it (design pattern)

• How is it enhanced with CSS

• What client-side JavaScript is used?

• Does it use a web api?

• Does it work with JavaScript disabled?