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
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.
Dit hebben we vastgelegd in het projectboard.