Samen coderen

Ik kan me zo presenteren tegenover mijn teamgenoten dat mijn ideeën beter overgebracht worden. Hiermee verbeter ik mijn communicatie vaardigheden binnen een team. Ik stem met het team de code-structuur en naming conventions etc af, zo kan ik beter effectief samenwerken met gedeelde code. Aan het eind van de meesterproef heb ik code geschreven dat past bij de afspraken binnen het team en ik heb mijn Ideeën zo overgebracht dat het in overweging is gebracht door de andere teamgenoten.

Expirimetele CSS

Aan het eind van de Meesterproef heb ik actief geëxpirimenteerd met moderne CSS-functionaliteiten die ik tijdens de minor heb gezien zoals anchor-positioning, :has() en container queries. Ik documenteer wat wel en niet heeft gewerkt om bewust beter te worden in CSS.

Ideeën schetsen

Ik wil leren om meerdere concepten en visuele uitwerkingen te maken voor het project. Door een aantal verschillende ideeën visueel te schetsen en/of prototypen per uitdaging, wil ik mijn proces onderbouwen en het uiteindelijke ontwerp beter kunnen beargumenteren. Zo kom ik tot een doordachter eindproduct en leer ik beter omgaan met ontwerp-iteraties.

Aan het begin van deze week zijn wij de debrief gaan voorbereiden voor de opdrachtgever, hierbij hebben we een aantal vragen opgesteld. Tijdens de brief zelf zijn deze niet van teopassing gekomen aangezien de opdrachtgever al een duidelijk verhaal had gehouden over do opdracht. Hij heeft tijdens de debrief de keuze gegeven tussen twee opdrachten:

• Opdracht 1: Ontwerp en bouw een ‘mirror’ van de huidige WordPress website van Framer Framed wat als doel heeft om de website zo toegankelijk mogelijk te maken.

• Opdracht 2: Ontsluiting van het bestaande digitale archief van Framer Framed voor een specifieke doelgroep met specifieke eisen op het gebied van toegankelijkheid.

Toen we terug kwamen van de debrief kwamen we er heel snel op uit om voor opdracht 2 te gaan aangezien opdracht 1 niet bij minor past. De opdrachtgever had opdracht 1 echter wel als prioriteit aangegeven dus we moesten deze week een argumentatie gaan vormen om duidelijk te maken dat opdracht 1 niet passend is als meesterproef.

Ons idee voor opdracht 2 was om een ontsluiting te maken van de huidige Framer-framed database gericht op toegankelijheid voor blind/slechtzienden die een screenreader en gebruikers die genoodzaakt zijn om alleen toetsenbord navigatie te gebruiken.

vanuit het idee dat we opdracht 2 gaan uitvoeren heb ik samen met het team een aantal ideeën uitgeschetst. Ik heb zelf ook een aantal schetsen gemaakt van hoe de flows er uit zou kunnen zien.

Deze week ben ik ook begonnen met de database onderzoeken. Ik wou het voorelkaar krijgen om data op te halen en bruikbaar te maken. Ik kwam al gelijk een aantal obstakels tegen, namelijk:

• Er zitten img, iframe en video hard gecodeerd in de content van de database.
• We kunnen niet gemakkelijk bij afbeeldingen van relaties van een object.
• Het is nog niet duidelijk hoe we door de database kunnen navigeren om alle benodigde data voor ons ontwerp op te halen.

Om het eerste probleem op te lossen heb ik gebprobeerd de HTML code die in de cotnent staat te parsen en de elementen te filteren die we niet in het eindproduct willen hebben. Hiervoor heb ik de HTML parser NPM package gebruikt.

function extractImages(htmlString) {
  const imgRegex = /<img[^>]+src="([^">]+)"[^>]*>/gi;
  const imgMatches = [];
  let match;

  // Verzamel alle <img> tags en hun src
  while ((match = imgRegex.exec(htmlString)) !== null) {
    imgMatches.push({
      tag: match[0],   // hele <img ...>
      src: match[1],   // alleen de src
    });
  }

  // Verwijder <img> tags uit de originele content
  const contentWithoutImages = htmlString.replace(imgRegex, '');

  return {
    content: contentWithoutImages.trim(),
    images: imgMatches.map(i => i.src),
  };
}

app
  .use(logger())
  .use('/', sirv('dist'))
  .listen(3000, () => console.log('Server available on http://localhost:3000'));

app.get('/', async (req, res) => {
  const allEvents = [];
  let year = 2005;
  const currentYear = new Date().getFullYear();

  while (year <= currentYear) {
    const url = `https://archive.framerframed.nl/api/get-by-year/${year}/0/200`;
    try {
      const response = await fetch(url);
      const json = await response.json();

      if (json.events && json.events.length > 0) {
        console.log(`Data gevonden voor ${year}`);

        for (const event of json.events) {
          const htmlContent = event.node.content_en || '';
          const root = parse(htmlContent);

          // img tags verzamelsen
          const imgElements = root.querySelectorAll('img');
          const imgSources = imgElements.map(img => img.getAttribute('src'));

          // img verwijder uit content
          imgElements.forEach(img => img.remove());

          // overgebleven content opslaan
          event.node.cleaned_content = root.toString().trim();
          event.node.extracted_images = imgSources;
        }

        allEvents.push(...json.events);
      } else {
        console.log(`Geen data voor ${year}`);
      }
    } catch (error) {
      console.error(`Fout bij ophalen van ${year}:`, error);
    }

    year++;
  }

  const types_nl = new Set();
  const types_en = new Set();
  allEvents.forEach(event => {
  if (event.node?.type_en) types_en.add(event.node.type_en);
  if (event.node?.type_nl) types_nl.add(event.node.type_nl);
  });
  console.log('Alle unieke types:', Array.from(types_nl));
  console.log('Alle unieke types engels:', Array.from(types_en));

  const html = await engine.renderFile('server/views/index.liquid', { allEvents });
  res.send(html);
});