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.

Maandag 13 mei

Analyseren

Planning

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

---

Code conventies

Door code conventies op te stellen zorgen we ervoor dat het document overzichtelijk en geordend is.

Inpringen

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>

Comments

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);

Annotatie css

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.

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);
}

nesting css

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);
       }
     }

Naamgeving

Bij de naamgeving van de bestanden maken we gebruik van onderkast en '-' tussen woorden in.

Classnames

Bij classnames maken we gebruiker van een '-' tussen worden en maken we geen gebruik van bovenkast.

    <section class="sug-playlist">

Javascript annotatie

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.

Ontwerp

Sitemap + wireflow

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.

Dinsdag 14 mei

Bouwen

Woensdag 15 mei

Analyseren

We hebben afspraken gemaakt over pull-request, ik assign mijn pull-request naar Patrick en Misah.