Tijdens dit vak ben ik aan de slag gegaan met de Rubik's cube opdracht. Ik dacht eerst dat het niet zo veel voorstelde maar ik kwam er al gauw achter dat ik dit toch echt enorm heb onderschat. Ik vond het wel erg leuk en leerzaam om te doen.
Tijdens het maken van de Rubik's cube ben ik meerdere keren helemaal opnieuw begonnen omdat ik het toch naar mijn mening beter op een andere manier kon doen. Helemaal in het begin was ik begonnen met de kubus maken met alleen maar losse zijdes, dus niet blokjes (zoals het nu is). Dit werkte opzich prima maar maakte het een stuk ingewikkelder om mooie rotaties te krijgen, en daarnaast was de Rubik's cube 'hol'. Hierdoor zag het er ook niet zo mooi uit. Toen ik uiteindelijk had besloten om echt voor elk blokje een blokje te maken kwam er wat meer snelheid in. Ik had al gauw door hoe ik ze het beste kon positioneren, hier heb ik een formule voor gemaakt waarin ik veel gebruik heb gemaakt van CSS variabelen. Daarnaast heb ik een aantal 'instellingen' gemaakt waarmee je de transparantie, animatie en het patroon aan kunt passen. Daarnaast heb ik nog vier knoppen waarmee je de Rubik's cube kunt laten draaien (dit werkt ook met de pijltjestoetsen op het toetsenbord). Hiervoor het ik wel JavaScript gebruikt. De animaties van de Rubik's cube doe ik nu met media queries, dat was voor mij de meest logische manier om te laten zien hoe de blokjes kunnen roteren aangezien het (nog) niet werkt met JavaScript.
Ik wou erg graag de Rubik's cube echt laten werken met JavaScript, hier was ik ook aan begonnen maar het kostte me toch meer tijd dan ik had verwacht. En aangezien dit best wel buiten de scope van dit vak valt heb ik dat maar even opzij gezet en ben ik verder gegaan met (voor mij) nieuwe CSS technieken. Ik heb enorm veel geleerd hiervan, van calculaties en variabelen tot slimme selectoren en typografie. Meestal doe ik altijd een beetje dezelfde dingen met CSS, want voor de meeste websites heb je dit soort technieken niet echt nodig. Maar dit vak heeft zeker mijn ogen geopend voor wat er allemaal mogelijk is met CSS. Normaal gebruik ik ook vooral SCSS omdat dat iets sneller schrijft naar mijn mening, maar ik heb de kracht van (nieuwe) CSS functionaliteiten nu ook wel ontdekt, en ik denk dat ik nu minder snel SCSS zou gebruiken voor een wat kleiner project.
Dit is hoe ik ben begonnen met de Rubik's cube (alleen de losse zijdes):
Dit is het eindresultaat:
