Development‐life cycle(DLC)
Welcome to the Portfolio wiki!
03/04/2024
Ik moet binnen 4 weken een portfolio website maken met Express, nodeJS en een headless CMS waar ik Hygraph voor heb gekozen. Ik wil voor dit project 1 pagina maken die toegankelijk en responsive is. Ik moet hier mijn skills kunnen zien en links naar projecten waar ik aan gewerkt heb. Ook moet er een about me komen die uitlegt wie ik ben en wat mijn hobby's bijvoorbeeld zijn.
Waarom ik voor Hygraph heb gekozen is omdat ik hier eerder mee heb gewerkt en er veel documentatie online over te vinden is.
Voor het opstarten van het project heb ik in mijn oude projecten gekeken voor de structuur en deze 2 links gebruikt om de server kant klaar te zetten: https://hygraph.com/blog/working-with-expressjs-and-hygraph en https://expressjs.com/en/starter/hello-world.html.
Dit is de command die ik heb gebruikt om alle benodigde packages te installeren:
npm install awesome-graphql-client node-fetch express
Om de app lokaal te laten draaien gebruik je deze command:
node index.js
Omdat ik awesome-graphql-client gebruik was het nodig om een andere versie van node fetch te installeren:
npm install node-fetch@2
Hiermee zorgde ik ervoor dat hij compatible is met de dependecies van awesome-graphql-client.
Ook moest ik ejs installeren:
npm i ejs
Nu kon ik mijn code laten draaien en zag ik "Hello world" in beeld.
Ik ben begonnen met het maken van een projectboard om all mijn taken er in te zetten. Ik heb de Moscow en de DLC aan de taken toegevoegd maar heb ook planning poker toegepast op elke taak. Zo ziet mijn projectboard er uit:
Hierbij nog de link naar mijn projectboard: https://github.com/users/modous/projects/7/views/1?visibleFields=%5B%22Title%22%2C%22Assignees%22%2C%22Status%22%2C87257315%2C87257317%2C87257316%2C87257318%2C%22Labels%22%5D
- Duidelijke benamingen
- Semantische HTML
- Comments bij code waar nodig
- Duidelijke git commits/PR's
04/04/2024
Ik heb voor het beginnen met ontwerpen eerst even rond gekeken voor inspiratie. Ik heb daarvoor deze link gebruikt: https://colorlib.com/wp/best-portfolio-websites/
Daarna kreeg ik een idee om de hele achtergrond te vullen met een selfie en op de voorgrond allemaal informatie te plaatsen. Ook wou ik een link er in hebben die doorverwees naar mijn Github, om zo ook mijn werk te kunnen bekijken.
Dit is de eerste versie van mijn figma schets:
Ik heb daarna nog een figma schets gemaakt met alle details en wat extra aanpassingen. Ik heb hier gelijk een breakdown van gemaakt:
Ook leek het me een goed idee om een 2e pagina te maken met een display aan al mijn gerichte werk. Ik heb dit in stukjes gedesigned. Zo zie je hier mijn header:
En hier een voorbeeld van hoe ik wil dat mijn 2e pagina er uit ziet:
Hier alles op 1 plaatje:
Ik ben na het krijgen van de feedback die ik kreeg nog een keer gaan schetsen om te kijken hoe het er uit zou zien:
Hierna ben ik de aanpassingen gaan toepassen.
04/04/2024
Ik ben begonnen met het opzetten van mijn project en heb daarvoor allerlei mappen en files aangemaakt. Hierna heb ik een index.js file aangemaakt waar ik express importeer, de url en key van Hygraph koppel, de data uit Hygraph ophaal en de port klaarmaak.
Ik heb een dotenv bestand aangemaakt en daar mijn Hygraph url en key in gestopt die ik zo importeer in mjn index.js:
require("dotenv").config();Dit is hoe je de express module importeert en een nieuwe express app aanmaakt:
// Import the express module
const express = require("express");
// Create a new express app
const app = express();Daarna zet ik een nieuwe graphQL client op die zo geconfigureerd is dat hij verbinding maakt met de hygraph URL en ook geef ik de key mee zodat hij toegang heeft tot de URL:
const { AwesomeGraphQLClient } = require("awesome-graphql-client");
const fetch = require("node-fetch");
const client = new AwesomeGraphQLClient({
endpoint: process.env.HYGRAPH_URL,
fetch,
headers: {
Authorization: `Bearer ${process.env.HYGRAPH_KEY}`,
},
});Ook stel ik in wat voor template hij moet renderen. Ik kies hier voor EJS, dit zorgt ervoor dat hij mijn .ejs bestanden op de juiste manier leest:
// Set ejs as the template engine
app.set("view engine", "ejs");Hier maak ik een GET route for mijn index page die dus de query van Hygraph ophaalt. Als de data niet correct wordt opgehaald krijg je een nieuwe pagina met een error message te zien:
// Create a GET route for the index
app.get("/", async function (_, res) {
try {
const query = `
{
people {
age
birthdate
fullname
id
title
aboutMe {
text
}
}
}
`;
const { people } = await client.request(query);
res.render("index", { people });
console.log(people);
} catch (error) {
console.error("Error fetching data:", error);
// Handle the error appropriately, perhaps render an error page
res.status(500).send("Error fetching data");
}
});En als laatst stel ik de poort nummer in(in dit geval 8000) en start ik de Express app waarbij ik de poort aanroep:
// Set the port number for express to listen on
app.set("port", process.env.PORT || 8000);
// Start express, using the port number previously set
app.listen(app.get("port"), function () {
// Log a message in the console and provide the port number
console.log(`Application started on http://localhost:${app.get("port")}`);
});20-04-2024
Ik heb na het maken van een nieuwe design toch gekozen om voor een 2e pagina te gaan waar ik mijn werk kan laten zien. Ik heb hiervoor een work page aangemaakt in mijn views map en heb in de index.js file een nieuwe route moeten maken voor work. Ook moest ik voor deze pagina nog extra data ophalen. In dit geval de images voor elk project wou ik ook vanuit Hygraph halen. Dit is hoe ik de route heb uitgewerkt in de index.js file:
app.get("/work", async function (_, res) {
try {
const query = `
{
people {
fullname
age
birthdate
id
title
aboutMe {
text
}
image {
url
}
project1 {
url
}
project2 {
url
}
project3 {
url
}
}
}
`;
const { people } = await client.request(query);
// Render the 'work' template and pass the 'people' object to the 'head.ejs' partial
res.render("work", { people });
} catch (error) {
console.error("Error fetching data:", error);
// Handle the error appropriately, perhaps render an error page
res.status(500).send("Error fetching data");
}
});Ook heb ik een button waarmee ik terug wou gaan naar de homepage. Ik heb hier ook een route voor gemaakt:
app.get("/goback", function (req, res) {
res.redirect("/");
});18/04/2024
Ik heb na het analyseren van mijn code toch even gekeken hoe ik mijn code beter kon maken. Ik merkte dat ik in de HTML mijzelf aan het herhalen was in de work pagina. Ik heb toen gekozen hier een for loop van te maken.
Ik moest hiervoor eerst een nieuwe schema maken op Hygraph. Dit is hoe ik mijn project schema heb opgesteld:
Ik heb toen in de content 3 nieuwe entry's gemaakt van mijn projecten:
In de code heb ik toen 2 nieuwe query's aangemaakt.
De projectQuery:
En de peopleQuery:
Hierna zorg ik ervoor dat ik beide objecten render in de work pagina omdat mijn header natuurlijk nog uit data van people bestaat.
Nadat ik klaar was met het klaarzetten van de data ben ik een for loop gaan schrijven met de juiste data:
<% projects.forEach(function(project) { %>
<article class="work-article">
<h2 class="work-title"><%= project.title %></h2>
<a href="<%= project.url %>" target="_blank">
<img class="work" src="<%= project.image.url %>" alt="" />
</a>
</article>
<% }); %>Ik schrijf zo veel minder code en het is veel netter op deze manier. Hier zie je hoe mijn code eerst was:
<article class="work-article">
<h2 class="work-title">My todo app</h2>
<a href="https://github.com/modous/Todo-challenge" target="_blank"
><img class="work" src="<%= people[0].project1.url %>" alt=""
/></a>
</article>
<article class="work-article">
<h2 class="work-title">My we love web app</h2>
<a href="https://github.com/modous/i-love-web-app" target="_blank"
><img class="work" src="<%= people[0].project2.url %>" alt=""
/></a>
</article>
<article class="work-article">
<h2 class="work-title">My FDND Squad page app</h2>
<a
href="https://github.com/modous/connect-your-tribe-squad-page"
target="_blank"
><img class="work" src="<%= people[0].project3.url %>" alt=""
/></a>
</article>23-04-2024
Voor het live zetten van de website heb ik gekozen voor Vercel. Alleen liep ik wel tegen een paar problemen aan voor hij uiteindelijk live kon.
Nadat ik alles gemerged had met de main heb ik op Vercel het project geïmporteerd:
het portfolio project gekozen:
Hierna de HYGRAPH_URL en HYGRAPH_KEY toegevoegd:
Hierna kon ik de omgeving opstarten alleen kreeg ik een 404 error die ik niet lokaal kreeg. Ik heb toen op internet opgezocht wat het probleem zou kunnen zijn. Ik heb toen deze link gevonden: https://stackoverflow.com/questions/72584745/having-problem-deploying-express-server-on-vercel-404-page-not-found
Hier wordt verteld dat ik mijn index.js file in een api folder moet hebben en ik daarom die error kreeg. Dit heb ik toen gedaan maar heb daarnaast ook voor de zekerheid een vercel.json bestand aangemaakt en daar deze guide gevolgd: https://vercel.com/guides/using-express-with-vercel
Zo ziet mijn vercel.json bestand er uit, je ziet hier dat mijn destination "api/" is:
Ook moest ik de routes veranderen in mijn codes en heb zo de package.json aangepast en api/ toegevoegd voor de correcte path:
In mijn index.js file moest ik ook weer correct pathe naar mijn css files:
Nadat dit allemaal was gebeurd kon ik de website succesvol live zetten, hier een link naar mijn website: https://portfolio-five-eosin-78.vercel.app/
10-04-2024
Ik ben begonnen met het opzetten van mijn project en heb daarna een PR aangemaakt en hem laten checken door Mokhtar:
Hier een voorbeeld van de comments die hij heeft achtergelaten. Ook zie je dat ik een commit heb gemaakt en zijn gevraagde feedback heb toegepast:
21-04-2024
Ik heb na het maken van een pull request weer de link gedeeld met studenten van FDND Agency. Ik kreeg feedback van David en ben toen door alles heen gegaan en alle feedback netjes toegepast:
21-04-2024
Ik heb eerst een lighthouse test gedaan toen ik klaar was met het bouwen van mijn website, dit is wat er uit kwam:
Ik scoor 100% op performance:
Dit zijn alle metrics:
Voor accessibility scoor ik 91:
Ik ben door mijn website gaan tabben en kon gemakkelijk overal bijkomen. Zo ziet een hover van een tab er uit:
Mijn website ziet er op elke browser hetzelfde uit dankzij mijn reset.css file van JoshW Comeau: https://www.joshwcomeau.com/css/custom-css-reset/
Chrome:
Safari:
Ook heb ik de website getest op mijn samsung galaxy s22 ultra op verschillende browsers.
Chrome:
Samsung Browser:
Verder heb ik getest of alles responsive was. Dit was inderdaad zo het geval.
Dit is wat je ziet op een breedte boven de 600px:
De padding wordt aangepast en ook worden de links onder de naam weergeven wanneer de schermbreedte onder de 600px is:
This is the result of the pagespeed insight test:
The biggest issue is the size of my images:
I also didnt have alt tags for my links:
