• Javascript

Waarom: Ik wil beter worden in Javascript.

Hoe: Ik ga kijken wat onze groep nodig heeft in het project te maken met javascript en dat proberen te implementeren.

Gedaan: Ik heb niet veel kunnen doen met Javascript, maar ik heb liquid.js gebruikt met if-statements en for-loops. Ik denk niet dat ik beter ben geworden, maar ik heb wel een nieuwe code geleerd.

• Ideeen Verworden

Waarom: Ik heb moeite met gedachten uitleggen aan andere mensen. Waardoor mijn ideeën moeilijk te begrijpen zijn en ik nerveuzer word.

Hoe: Ik ga schrijven wat ik wil zeggen voor een belangrijk gesprek. En notities schrijven over wat ik beter kon uitleggen.

Gedaan: Na mijn eerste gesprek met Sanne heb ik een idee gekregen. Type van tevoren wat ik wil zeggen tijdens belangrijke gespreken. Dus ik heb dat gedaan voor een gesprek en ik was duidelijk te begrijpen. Ik wou ook een paar keer zonder dat proberen, maar langzaam praten nadat ik nagedacht heb over mijn woorden. Dat ging ook goed en ik heb veel geleerd over communiceren.

Ik persoonlijk vond langzaam praten het beste voor mij.

• CSS art

Waarom: Ik vind dat ik oké ben met CSS, maar ik wil graag een dichtbij namaken, zo close mogelijk.

Hoe: Ik ga eerst het design bekijken dat iemand anders heeft gemaakt. Vragen voor advies en hoe ik dit zou doen. En dan het proberen te maken met een foto ernaast.

Gedaan: Ik heb mijn best gedaan om het design dat ik had gekregen zo goed mogelijk na te maken. Er was één irritant onderdeel waar ik veel moeite mee had, dus dat heb ik uiteindelijk niet gedaan. Ik heb ook constant om hulp gevraagd, en van Iris heb ik geleerd hoe grid werkt — en ik hou van grid!

• Hulp vragen

Waarom: Vragen stellen is iets waar ik altijd moeite mee heb gehad wanneer ik ergens tegenaan loop. Ik heb vaak het gevoel dat ik het niet goed kan uitleggen, en dat ik het zelf moet oplossen.

Hoe: Ik moet meer vragen durven stellen. Ik ga vragen wat mensen vinden van wat ik doe, of ik hun uitleg goed begrijp, en proberen minder bang te zijn om zwak over te komen.

Gedaan: Ik heb elke keer vragen gestelt als ik iets niet wist en dit hielp heel veel met het maken van mijn CSS gedeelte. Hierdoor heb ik contrast levels en Grid geleerd. Maar ook over hoe ik mijn andere leerdoelen kan aanpakken.

Ik heb gewerkt aan twee verschillende WCAG-problemen en geprobeerd voorbeelden te maken van hoe je de fouten uit de oude versie van hun website kunt verbeteren.

Een van de problemen was het standaardicoon dat werd gebruikt om de locatie van een parkeerplaats aan te geven. Ik heb hiervoor een blauw pijltje met een grote “P” gemaakt, in plaats van een rode cirkel die te veel opgaat in de achtergrond.

Ook hadden ze een contrastprobleem (dat ze eigenlijk nog steeds hebben) met hun paarse kleur op een zwarte achtergrond. Ik heb geprobeerd dit op te lossen door een iets lichtere paarse kleur te gebruiken. Alleen het veranderen van het zwart verbeterde het contrast namelijk niet.

Na onze meeting met de klant ben ik begonnen met het ontwerpen van statische pagina’s, zoals de contactpagina. Maar daarna kreeg ik een andere opdracht.

Die andere opdracht was het maken van de detailpagina. Ik probeerde een vereenvoudigde versie van het originele ontwerp te maken, maar die was niet zo goed gelukt. Na feedback van Victor (de technische ondersteuning die week) kreeg ik de opdracht om eerst de technische kant van de relaties via de API te laten zien. Ik maakte een dummyversie op zijn advies en liet die de volgende dag zien.

Daarna besloot Quy mij te helpen met uitleg over hoe componenten werken. Vervolgens kreeg ik de opdracht om te werken aan de linkerkant van de detailpagina, met de inhoud.

In het begin vond ik dit lastig, omdat ik niet goed wist hoe ik de HTML moest opbouwen. Gelukkig kwam Elton langs en bood zijn hulp aan. Hij is de hele tijd bij me gebleven en gaf me een goede aanpak om het aan te pakken.

Aan het einde van de week kreeg ik te horen dat mijn code goed was, maar dat het misschien beter zou zijn om Grid te gebruiken. Daarom besloot ik om Grid te gaan leren aan het begin van de volgende week.

Ik vroeg aan Iris hoe Grid werkt en besloot om het eerst te testen via CodePen. Ik maakte een eenvoudige oefening met blokken van verschillende groottes. Dit gaf me een goed idee van hoe Grid werkt en hoe ik mijn originele code kon verbeteren.

Ik ben vervolgens begonnen met het omzetten van mijn Flexbox-code naar Grid, en heb geprobeerd het ontwerp zo veel mogelijk hetzelfde te houden als voorheen.

.object-container {
        background-color: rebeccapurple;
        border-radius: 5px;

        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 1fr 1fr auto auto;
        grid-template-areas:
            "empty title"
            "rels rels"
            "img text"
            "date date";
}

Na het aanpassen van de objectcomponent naar Grid kreeg ik de taak om de relationele tags te maken.

{% for rel in relations %}
 {% if rel.node.name %}
  <li>
   {% comment %} <p class="person tag">{{ rel.node.name }}</p> {% endcomment %}
   {% render 'server/components/Rel-tag/relTag.liquid', rel: rel.node.name %}
  </li>
 {% endif %}
{% endfor %}

Daarna heb ik geprobeerd de namen van de relaties aan te passen afhankelijk van bepaalde factoren, omdat ze anders allemaal “Exhibition” heten. Ook wilde ik de achtergrondkleur van de relatietags aanpassen.

{% for rel in relations %}
 {% if rel.node.name %}
  <li>
   {% if rel.node.title_en != null and rel.node.title_en != "" or if rel.node.title_nl != null and rel.node.title_nl != ""%}
   {% assign text = rel.node.title_en | default: rel.node.title_nl %}
   {% else %}
   {% assign text = rel.node.name %}
   {% endif %}
   {% render 'server/components/rel-tag/rel-tag.liquid', rel: text, class_name: rel.type %}
  </li>
 {% endif %}
{% endfor %}

Deze week heb ik het logo van Framer Framed toegevoegd in SVG-formaat. De kleur daarvan kon worden aangepast met fill. Maar na ons eerste gesprek met Cas deze week heb ik het weer verwijderd, omdat Cas het logo linksboven op een andere manier wilde.

Verder heb ik gewerkt aan een paar losse problemen die ik graag wilde afronden.

Ten eerste wilde ik een slugify-functie maken voor de relaties, zodat er connecties gemaakt konden worden. Maar uiteindelijk besloten we om dat toch niet te doen. Tijdens dit proces ontdekte ik iets leuks in Liquid.

Ik had eerst gekeken hoe je een slugify maakt in JavaScript, maar na 1,5 dag zoeken en proberen naast mijn andere werk, kwam ik erachter dat je in Liquid gewoon {{ string | slugify }} kunt gebruiken. Superhandig!

function slugify(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim leading/trailing white space
  str = str.toLowerCase(); // convert string to lowercase
  str = str.replace(/[^a-z0-9 -]/g, '') // remove any non-alphanumeric characters
           .replace(/\s+/g, '-') // replace spaces with hyphens
           .replace(/-+/g, '-'); // remove consecutive hyphens
  return str;
}

const title = "The Quick Brown Fox Jumps Over The Lazy Dog!";
const slug = slugify(title);
console.log(slug); // "the-quick-brown-fox-jumps-over-the-lazy-dog"

{{ String | slugify }}

Daarna heb ik gewerkt aan het centreren van de tekst als er geen afbeelding aanwezig is op de detailpagina. In de CSS paste ik vervolgens het grid aan zodat de tekst beter uitkomt.

{% if assets.size > 0 %}
<img src="{{ assets[0].origin }}" alt="" />
{% endif %}
{% if event.content_nl != "" %}
<div class="object-content">{{ event.content_nl }}</div>
{% elsif event.content_en %}
<div class="object-content">{{ event.content_en }}</div>
{% endif %}
<div class="time-content hapje">
<time class="year tag">17-05-2024</time>
</div>

Dan in de CSS word de grid aangepast om daar reking mee te houden om text beter te maken. Ik heb hetzelfde principe gebruikt om een detailpagina anders te laden als er geen relaties aan de rechterkant zijn.

Na ons gesprek met Cas waren er een paar simpele aanpassingen die ik kon doen om de website te verbeteren.

Ik heb de titel naar links geplaatst, de datum rechtsonder, en ervoor gezorgd dat relaties die eerst niet zichtbaar waren, nu wel getoond worden. (Dat was een vreemde bug zonder duidelijke reden.)

Ook heb ik ervoor gezorgd dat het tijd-element alleen wordt weergegeven als die er daadwerkelijk is, bijvoorbeeld niet bij artiesten.

Verder heb ik een bug die ik per ongeluk had veroorzaakt, opgelost na een halfuur zoeken. Daarna dacht ik nog na over wat we met de content kunnen doen, zoals bijvoorbeeld alle HTML eruit strippen, maar uiteindelijk heb ik alleen de line-height aangepast voor betere leesbaarheid.