3. Bouwen
Ik heb clips toegevoegd aan mijn Kennisclips-component voor Visual Thinking. Hygraph was al gemaakt door een docent en bevatte bijna alle velden. In ieder geval was voor de kennisclips een veld al aangemaakt, omdat Charley wilde dat de kennisclips in Hygraph werden opgenomen voor het geval zij iets wilde aanpassen.
In Hygraph was specifiek een "Assets Knowledgeclips"-veld aangemaakt.
In dat veld heb ik de YouTube-link van Charley toegevoegd door de link te kopiëren vanuit de 'use in code'-optie op YouTube en deze in te voegen. Echter, bij implementatie kreeg ik een vreemd resultaat dat niet werkte. Wanneer ik op de link klikte, werd de YouTube-video niet correct weergegeven, wat tot enige vertraging leidde in mijn voortgang.
Dat heb ik in eerste instantie met JavaScript gedaan, maar Charley wilde het graag in Hygraph hebben, en ik wilde de Progessive Enhancement (PE) verbeteren. Dus, ik dacht dat ik dit gewoon moest oplossen. Mijn JavaScript-code werkte goed omdat ik al andere inhoud van de categorieën ophaalde; het probleem lag alleen bij de kennisclips. Ik heb dit getest met een console.log en ontdekte dat er iets misging met de kennisclips link.
Voor hulp heb ik Joost geraadpleegd, en dit was de feedback die ik ontving:
Bij de feedback waren er voorbeelden van videotags en hoe deze geïmplementeerd konden worden.
Elke keer dat ik met het videocomponent werkte, ondervond ik veel fouten en kreeg ik meldingen dat mijn apparaat of server dit niet ondersteunde. Hierover had ik veel vragen, en ik had het gevoel dat ChatGPT me niet helemaal goed kon helpen. Daarom ben ik op donderdag naar Suus gegaan, en hier is wat we hebben gedaan:
Suus vertelde dat ze onlangs een YouTube-link had toegevoegd voor een van haar klanten en dat het videocomponent niet de oplossing is. Ze adviseerde me om niet in het Assets-veld te werken, maar in plaats daarvan een gewoon linkveld te gebruiken. We hebben geprobeerd dit te wijzigen (van Assets naar Field), maar dat zou betekenen dat we het veld moesten verwijderen. Dus hebben we eenvoudigweg een linkveld aangemaakt, specifiek voor de YouTube-link. Ik heb deze link opgehaald in de playground en toegevoegd aan mijn page.svelte. Toen heb ik deze werkende link in een iframe geplaatst, en daarmee was het probleem opgelost!
import { gql } from "graphql-request";
import { hygraph } from "$lib/utils/hygraph.js";
export async function load() {
let query = gql`
query VisualThinking {
categories(first: 10) {
title
youTubeLink
content {
html
}
}
}
`;
return await hygraph.request(query);
}Nu staat alles in Hygraph, en de Platform Experience (PE) is verbeterd. Dit is nu gunstiger voor Charley en de eindgebruiker.
De tekenmethode detailpagina's waren allemaal desktop first gebouwd. Vanuit hier moesten ze responsive worden op elk device. Dat is niet bepaald fijn werken, omdat je allemaal bestaande code weer opnieuw moet gaan verschuiven, ergens moet zetten en nieuwe code erbij moet schrijven. Dit vond ik best ingewikkeld, omdat mobile first gewoon veel makkelijker is naar mijn ervaring. Ik ben aan de slag gegaan en heb opnieuw moeten beginnen met mobile first. Veel gepuzzeld, maar uiteindelijk is het me gelukt om de beschrijving, stappenplan en voorbeelden pagina's responsive te krijgen.
Beschrijving
Zie hier het mobile first code deel:
/* ---MOBILE--- */
@media (max-width: 31em) {
.line {
padding-left: 2rem;
}
.h1-detail {
padding-left: 2rem;
}
h1 {
font-size: 2rem;
}
nav {
width: auto;
float: left;
margin-top: 4.5em;
margin-left: -11.5em;
padding: 5px 0;
overflow-x: scroll;
white-space: nowrap;
}
nav::-webkit-scrollbar {
display: none;
}
.flex-b {
padding-left: 2rem;
padding-right: 2rem;
}
.template-url {
display: flex;
justify-content: center;
width: 330px;
height: 230px;
margin-top: 3em;
box-shadow: 1px 1px 10px 5px rgb(244, 244, 244);
}
.text {
margin-left: -15em;
margin-top: 16rem;
min-width: 15em;
font-size: 1rem;
font-family: var(--vtSecondaryFont);
color: var(--vtSec-DarkBlue);
}
}Stappenplan
Zie hier het tablet code deel:
/* tablet */
@media (min-width: 31em) and (max-width: 68em) {
.line {
padding-left: 2rem;
}
.h1-detail {
padding-left: 2rem;
}
h1 {
font-size: 2rem;
}
nav {
width: auto;
float: left;
margin-top: 2.5em;
margin-left: -11.5em;
padding: 5px 0;
overflow-x: scroll;
white-space: nowrap;
}
.navmain {
background-color: var(--vtGrey-10);
margin-top: -2em;
}
nav::-webkit-scrollbar {
display: none;
}
.template-url {
display: flex;
justify-content: center;
width: 420px;
height: 300px;
margin-top: 3em;
margin-left: 3em;
box-shadow: 1px 1px 10px 5px rgb(244, 244, 244);
}
.flex-s {
margin-left: -35em;
margin-top: 24rem;
min-width: 15%;
font-size: 1rem;
font-family: var(--vtSecondaryFont);
color: var(--vtSec-DarkBlue);
}
}Voorbeelden
Ook voor de tekenruimte waren ze vorig jaar desktop first begonnen. Hier was Tobias begin dit jaar mee bezig, maar ik heb deze taak van hem op me genomen. Ik ben opnieuw schetsen gaan maken voor een responsive pagina. Hier ben ik ook weer mobile first begonnen.
In de laatste foto zie je dat ik een andere tekentool heb gemaakt. Deze kan je uitklappen. Hier is hij uitgeklapt. Dit is alleen bedoelt voor desktop scherm, want anders paste het bijna niet meer op het kleine tekenscherm van een mobile scherm. Zie hier de code van het mobile first stukje:
/* ---MOBILE--- */
@media (max-width: 31em) {
.inputComponent {
display: none;
}
.labeltekst {
font-family: var(--vtPrimaryFont);
margin: auto 0;
display: flex;
justify-content: center;
align-items: center;
margin-top: 2em;
margin-left: 0em;
}
.container {
width: 100vw;
margin-top: 3em;
}
#toolbar {
margin-left: 2.5em;
margin-right: 1em;
width: 60%;
height: 12em;
}
.drawing-board{
border-radius: 25px;
border: none;
background-color: var(--vtGrey-10);
box-shadow: var(--vtGrey-50) 1px 1px 20px 1px;
margin: 1em;
height: 30em;
width: 90%;
}
#toolbar input {
width: 50%;
height: 3em;
border-radius: 4px;
margin: 0em;
}
}