Week 1
Ontwerp en maak voor een opdrachtgever een interface waar gebruikers blij van worden. Deze leertaak hoort bij sprint 11 "Pleasurable UI". Dit is een leertaak die je in een team uitvoert voor een opdrachtgever. Je leert hoe je met een team een interactieve website kan ontwerpen en maken.
Op maandag zijn we begonnen met het analyseren van de leertaak en een planning te maken, ook hebben we een projectboard gemaakt. Verder hebben we ook afspraken gemaakt hoe we te werk gaan.
Taken week 1: Responsive design + fetch Playlist toevoegen + redesign Homepage redesign
Maandag 13.05 planning + taakvaerdeling
Dinsdag 14.05 practicum + fectch klaar
Woensdag 15.05 begin homepage
Donderdag 16.05 Verder aan persoonlijke taken
Vrijdag 17.05 Pull request + branches - homepage af
Door code conventies op te stellen zorgen we ervoor dat het document overzichtelijk en geordend is.
Bij het inspringen hebben we afgesproken dat we het laten inspringen per element.
<div class="header-allstories">
<div class="header-title"><h3>All stories</h3>
<a href="/allstories"><p>Show all stories</p></a></div>
<form action="/" method="get">
<% language.forEach(language => { %>
<button title="language" type="button">
<img src="https://fdnd-agency.directus.app/assets/<%= language.flag %>" width="25" height="10"
onerror="this.onerror=null;this.src='Placeholder-2.png';" alt="language flag">
<%- language.language %>
</button>
<% }) %>
</form>
</div>
We gaan gebruik maken van comments waar het nodig is, bij JS is het een must, en bij CSS gebruiken we het om duidelijk te maken wat de code betekent en wat er wordt aangeroepen.
/* colourpalette */
/*--------b---w------ */
--white: #F5FAFF;
--black: hsla( 0, 0%, 0%,1);
Het CSS bestand delen we in door generieke css, de root, en font-face bovenaan in het document te zetten. Daaronder komt specifiekere css, voor de specifiekere css maken we gebruik van css nesting. Omdat nesting niet door elke browser wordt gesupport maken we ook gebruik van generieke css.
Bovenaan de pagina staat generieke CSS, dit staat zoveel mogelijk als DRY-code
* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: none; list-style: none;}
*::-webkit-scrollbar {display: none;}
h1, h2, h3,
h4, h5, h6 {
font-family: "poppins";
font-weight: 200;
color: var(--white);
}
Voor de specifiekere css maken we gebruik van nesting.
.sug-circle {
width: 580px;
height: 580px;
font-size: 0.8em;
letter-spacing: .2em;
animation: rotate-center 30s linear infinite both;
position: absolute;
z-index: 10;
text-transform: uppercase;
pointer-events: none;
svg {
display: block;
overflow: visible;
color: var(--white);
fill: var(--method-1-l);
font-family: var(--primary-font);
}
}
Bij de naamgeving van de bestanden maken we gebruik van onderkast en '-' tussen woorden in.
Bij classnames maken we gebruiker van een '-' tussen worden en maken we geen gebruik van bovenkast.
<section class="sug-playlist">
Bij de Javascript hebben we afgesproken dat comments een must is, hierdoor maken we het duidelijk voor elkaar wat er gebeurd bij het stukje code.
Met het ontwerpen zijn we begonnen met een sitemap/uml-diagram te maken van de pagina's hiermee maken we een duidelijk overzicht van de routes die we willen gebruiken. Vanuit de sitemap hebben we wireframes gemaakt van bepaalde pagina's (playlist, all-playlists, route via nav).
Daarna hebben Hadil en ik beide oriënterende schetsen gemaakt van de homepage omdat we daarvan een re-design willen doen. Na het bespreken van beide schetsen hebben we elementen en het design gekozen, na dit heeft Hadil hiervan een nette breakdown schets gemaakt.
Als laatste had ik een breakdown schets gemaakt van all-playlist pagina gemaakt, op deze pagina laten we boven aan de pagina zien welke playlist het meest recent is afgespeeld, daaronder komt een 1 columns layout van de gemaakte playlists van de user. Op desktop komt een grid, het ligt aan de grootte van het scherm hoeveel playlists naast elkaar staan. Onder aan de pagina komt een carousel van suggested playlists die de user kan 'liken' en toevoegen aan hun collectie van playlists.
Op dinsdag ben ik begonnen met het verder gaan bouwen van de clientside fetch.
if (request.body.actie === 'like') {
// posten naar directus..
fetch(`${apiUrl}/tm_likes/`, {
method: 'POST',
body: JSON.stringify({
user: 5,
playlist: request.body.id,
}),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
}).then((postResponse) => {
console.log(postResponse)
response.redirect(303, '/lessons')
})
} else if (request.body.actie === 'unlike') {
// deleten naar directus..
fetch(`${apiUrl}/tm_likes/${request.body.likeId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
We begonnen de dag met afspraken maken over pull-request en branches. Ik assign mijn pull-request naar Patrick en Misah.
Ik heb een nette schets gemaakt in Figma van de home-page zodat ik duidelijk mijn visie kan overbrengen aan mijn teamgenoten. Als achtergrond wil ik een dynamische achtergrond toevoegen en de circle laten roteren zodat het interactief en dynamisch is voor de eindgebruiker.
Op donderdag begon ik met het maken van het redesign van de home-page. Dit is het eindresultaat.
Wat willen jullie opleveren?
Een goede werkende responsive website met een homepage en een lessons-page met een clientside fetch. Onze focus ligt op enhancen, we willen PE als default zodat de website voor iedereen toegankelijk is.
Hoe ver zijn jullie?
Op dit moment hebben we een homepage redesign gemaakt, de lessons-page is grotendeels PE gemaakt, er moeten nog een aantal kleine aanpassingen zodat het PE de default is.
Wat moet er nog worden gedaan?
De lessons-page moet nog responsive worden gemaakt en een aantal aanpassingen om het helemaal PE te maken. Aan de homepage gaan we ook nog verder werken.
Hoe gaat de samenwerking? Wat gaat goed? Wat kan beter?
De samenwerking gaat tot nu toe goed. We hebben op maandag duidelijk afspraken en code conventies gemaakt waardoor het voor iedereen duidelijk is. Misschien kan de communicatie not wat beter en kunnen we misschien vaker standups doen zodat het duidelijk is waar iedereen mee bezig is.
Een website presenteren die meerdere animaties bevat maar wel PE is.
Responsive design, PE als default in de webpages.
Eerlijk voorop!
We verdelen de taken aan de begin van de week, hierdoor veranderd de dynamiek in het team en kunnen we beter feedback op elkaar geven. We doen een standup elke maandag, woensdag en vrijdag. We hebben afgesproken dat we taken kunnen verdelen op de maandag tijdens de standup, als het eventueel nodig is kunnen we nader de taken opnieuw verdelen tijdens latere standups.
Ook hebben we allemaal een persoonlijkheidstest gedaan om de strengths en weaknessen te identificeren van elkaar, hierdoor kunnen we beter inschatten wat we van elkaar verwachten en inzien hoe een persoon is. Ook laat het zien dat we te maken hebben met diversiteit en hiermee rekening kunnen houden.
Strenghts:
- Lisa -> Efficient, Energetic, Self-Confident, Strong-Willed, Strategic Thinkers & Charismatic and Inspiring;
- Hadil -> Diligent and Observant, Handy and Resourceful, Spontaneous, Direct and Authentic, Independent & Grounded;
- Patrick -> Analytical, Honest and Direct, Calm and Practical, Organized, Effective & Research-Oriented;
- Misah -> Independent, Dedicated, Strong-willed, Direct and Honest, Original & Open-Minded;
Weaknesses:
- Lisa -> Stubborn and Dominant, Intolerant, Impatient, Arrogant, Poor Handling of Emotions & Cold and Ruthless;
- Hadil -> Unapologetic, Insensitive, Private and Reserved, Easily Bored, Independent & Overly Skeptical;
- Patrick -> Stubborn, Unfocused, Dismissive of Emotions, Judgmental, Conflict-Averse & Easily Bored;
- Misah -> Inflexible and Stubborn, Judgmental, Combative, Disconnected, Dissatisfied & Impatient;
Doordat we allemaal verschillende strengst en weaknessess hebben we een aantal vragen beantwoord als voorbereiding van het samenwerken:
Welke strenghts in het team helpen om het doel te bereiken?
Door de diversiteit van elk teamlid, die gaat tot efficiëntie naar analytisch, zorgt iedereens eigen strenght ervoor om het doel te bereiken. Door het te combineren van de values, afspraken en onze strenghts toe te passen in het teamproject zijn wij ervan overtuigd dat wij hierdoor het doel gaan bereiken die wij voor ogen hebben.
Wat zijn potentiële valkuilen voor het project?
Doordat we niet echt vaak met elkaar hiervoor omgingen is de kans er dat er een voorval komt waarbij een miscommunicatie is. Om dit te voorkomen hebben we afgesproken dat we via de teams groepchat updates aan elkaar geven.
Dit hebben we vastgelegd in het projectboard.