De 10e editie van CSS Day komt er aan, en het is de bedoeling dat we iets speciaals ontwerpen voor de website voor deze gelegenheid. We zijn compleet vrij om bestaande data te gebruiken, en om designen/developen zoals we willen. Het is natuurlijk wel van belang dat het niet een statische webpagina is met overal stukjes tekst, maar iets out-of-the-box. In 3 dagen tijd krijgen we de optie om in teams een product op te leveren. Om het nog spannender te maken krijgen het winnende groepje kaartjes voor de CSS Day van dit jaar.
Na het college van Krijn zijn we meteen aan de slag gegaan met brainstormen. We overwogen welke gegevens we wilden presenteren en hoe we deze op een aantrekkelijke manier konden vormgeven. Hierbij maakten we enkele schetsen en analyseerden we bestaande mediaproducten, zoals Spotify Wrap of YouTube Rewind. We keken naar verschillende platforms die een samenvatting bieden van het gebruik van een specifiek onderwerp gedurende het jaar.
We hebben het .JSON-bestand doorgenomen en verschillende datatypes geanalyseerd, waaronder de sprekers, bijbehorende video's, het aantal views, de betrokken landen en het aantal bezoekers. Met deze gegevens als uitgangspunt streven we ernaar een samenhangend geheel te creëren dat niet alleen de data nauwkeurig weergeeft, maar er ook uniek en creatief uitziet. We hebben gekozen voor de volgende aantal data's waarmee we eventueel zouden kunnen werken:
- Sprekers
- Bezoekers
- Views
- Jaartal
- Kleur
Data-blobs zijn stukken informatie waar elk 'blobje' gegevens uit het .JSON-bestand bevat. De grootte van deze blobs verschilt per jaar, afhankelijk van factoren zoals het aantal behandelingen van specifieke onderwerpen. Ze bewegen ook op de interface en zweven in verschillende richtingen. Maar er kleven ook nadelen aan. Hoe zouden mobiele gebruikers moeten navigeren? Moeten ze eerst klikken om te begrijpen waar de blob over gaat?
Met de CSS-SLOTMACHINE kan de gebruiker door aan de hendel te trekken een combinatie genereren die vervolgens de gebruikersinterface aanpast op basis van de verstrekte informatie. Hoewel het op het eerste gezicht puur toeval lijkt, is alles in werkelijkheid al aan elkaar gekoppeld, waardoor het een illusie creëert bij de gebruiker. De drie opties zijn: het jaartal, de spreker en eventueel het aantal views of een ander gegevensobject. Deze drie items zijn met elkaar verbonden, maar we zullen het zo implementeren dat het lijkt alsof alles willekeurig is gerangschikt, terwijl er in werkelijkheid een algoritme achter zit.
Na het bespreken van wat het meest effectief leek, gaven we de voorkeur aan de CSS Slotmachine. Nu moesten we beslissen wat er daarna moest gebeuren. De gebruiker trekt aan de hendel van de gokautomaat, maar wat gebeurt er vervolgens? Verandert de gebruikersinterface volledig? Wordt er ergens naar beneden gescrold of worden we naar een andere pagina geleid? Dit was de volgende stap in ons proces, dus besloten we opnieuw een aantal ideeën te schetsen.
Maandag begon ik direct aan het schrijven van de HTML. Ik had al een goed beeld voor hoe het logo in beeld zou moeten komen aan de hand van animaties. Ik deelde CSS en Day door twee, en daar tussen zou dan de slotmachine komen waar Kevin aan werkte. Aan het begin liep alles nog soepel maar ik wilde het ook graag responsive hebben dus veranderde ik display: flex naar display: grid
.
prototype-kevin-hackathon.mp4
Maandag hield ik mij vooral bezig met het bedenken en schetsen van ideeën die in ons opkwamen, om zo visueel te zien hoe het eruit kwam te zien. Daarnaast keken we door de data om te zoeken naar interessante invalshoeken. Ook was ik maandag bezig met het proberen om de slotmachine 3D te maken en heb ik de lever die de slotmachine deed draaien gemaakt.
Het 3D maken van de slotmachine was nog niet zo gemakkelijk om te doen. Met een eerder voorbeeld dat Sanne had gemaakt tijdens de les probeerde ik dit, maar het vervelende was dat niet elke "slot" dezelfde aantal items erin kon hebben zitten. Er waren bijvoorbeeld 20 landen en maar 10 kleuren. Daardoor hebben we het 3D maken van de slotmachine een beetje laten vallen en hebben we eerst gefocust op het maken van een "platte" slotmachine.
Dinsdag begon ik toch nog eens een keer om de slotmachine 3D te maken. Ik kwam dit keer verder maar toch tegen problemen aan waardoor ik te veel tijd kwijtraakte. Ik heb voor het proces ook nog even een XD prototype opgezet zodat de werking duidelijk was wat we wilden bereiken. In de middag heb ik Ali en mijn branche gemerged waardoor het "bovenste gedeelte" van ons idee al aardig af was.
Nadat ik de merge met Ali en mijn Branche had gedaan, kregen we wat problemen met het schalen van de slotmachine, hij moest wel responsive zijn! Hierdoor had ik Sanne nog om hulp gevraagd en die heeft een andere opzet gemaakt van hoe je de slotmachine random kunt laten draaien waardoor de responsiviteit met CSS kon worden opgelost. Leertip: Laat CSS de berekening doen en niet met JS gaan stylen. Daarna nog wat merge probleempjes gehad met de "main" branche maar gelukkig kon Tristan me daarbij helpen. Had achteraf niet gehoeven, want had het blijkbaar wel goed gedaan alleen iets over het hoofd gezien.
Woensdag was ik bezig met nog wat kleine tweaks aan het "bovenste gedeelte" van de slotmachine en met het maken van eigen icoontjes voor in de slotmachine. In de middag heb ik Bart geholpen met het animeren van het Logo van CSS Day. Bij iedere keer dat je de slotmachine laat draaien willen we namelijk de kleur die bij dat jaar past. En daarna heb ik Ali geholpen om zijn lay-out van het "onderste gedeelte" over te zetten naar zijn eigen branche.
Vandaag ging eigenlijk alles wel goed, we hebben aan het eind van de dag al het werk samen gemerged wat wel voor wat merge conflicts zorgde maar die hebben we opgelost en nu werkt het zoals bedoeld.
Donderdag was het vooral de puntjes op de i. Ik was eerst bezig met wat kleine aanpassingen te maken aan de lay-out en vervolgens heb ik ervoor gezorgd dat wanneer je de hendel naar beneden trekt, deze automatisch naar het onderste gedeelte gaat. Daarna heb ik samen met Ali zijn deel met het mijne gemerged.
Ik kreeg als taak het fetchen van de data en deze sorteren om jaar en landen.
Wat ik gedaan heb Alle data laden
Ik heb via JavaScript een fetch gedaan om alle data van het externe JSON bestand in te laden. Dit is gelukt.
fetch('https://cssday.nl/data/speakers.json')
.then(response => response.json())
.then(data => {
allData = data
})
.catch(error => {
console.error('Error fetching data:', error)
})Een jaartal selecteren op land of/en jaartal
<label for="year-select">Filter by Year:</label>
<select id="year-select">
<option value="">Alles</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>Mijn doel voor vandaag is dat ik alleen de landen te zien wil hebben van het jaartal dat geselecteerd is. Ook wil ik de lijst van de personages dynamisch inladen met alleen bepaalde gegevens lijst maken van de personen (ul) persoon komt in een (li) naam(h2) const speakerYear = document.createElement("h1"); foto (img) titel (h3) description (p)
const speakersList = document.createElement('ul');
data.forEach(speaker => {
const speakerItem = document.createElement('li');
let speakerDetails = speaker.name;
if (speaker.talk && speaker.talk.title) { // Adjusted to access the title property
speakerDetails += ` - "${speaker.talk.title}"`; // Using the title
}
// If there are other properties you wish to display, access them similarly
speakerItem.textContent = speakerDetails;
speakersList.appendChild(speakerItem);
});Svg kleur veranderen blij klik door de kleur van het jaar
document.getElementById('year-select').addEventListener('change', () => {
const selectedYear = document.getElementById('year-select').value;
const fill = yearColors[selectedYear];
document.querySelectorAll('svg').forEach(svg => {
svg.style.fill = fill;
});
Bij een nieuwe klik gaat de kleur weg en komt deze erna weer terug met een box shadow
svgAnimation.forEach(path => {
path.classList.remove('new-color')
})
setTimeout(() => {
document.documentElement.style.setProperty('--svg-color', colours[randomYear.index])
svgAnimation.forEach(path => {
path.classList.add('new-color')
})
}, 1000)Mergen Aan het einde van de dag zijn we alle 4 de codes van iedereen gaan mergen