I-love-web
- Wat is een datamodel en hoe maak je die van een website
- Hoe kan ik medestudenten (jaar 1) het beste feedback geven en issues schrijven
- Hoe kan gestructureerd werken in meerdere githubs en 1 projectboard
👩🎓 Wat ik heb geleerd: Hoe je een project opzet met een projectboard gelinkt aan issues
-
Wij zijn begonnen met een nieuw project, Bieb in bloei, voor de opdrachtgever Buurtcampus Amsterdam Oost. Wij hebben daarvoor uitgezocht welke repo, (1) zie repo we moeten gebruiken en we hebben het projectboard van Bieb in bloei aangevuld, zie (2)projectboard .
-
Met ons team hebben we een Teamcanvas ingevuld, zodat we een beter inzicht krijgen in elkaars sterke en zwakke punten, en wat iedereen graag wil leren. Zie Teamcanvas
-
Wij hebben contact opgenomen met de opdrachgever voor een afspraak voor de debriefing. Daarna hebben wij alvast de debriefing voorbereid.
-
Ik ben bezig geweest aan mijn i-love-web, om hiervoor een website te maken, ik had in mijn personcard een opzetje gezet, maar dit ga ik toch voortzetten op deze repo. > zie oude werk en live zite
-
Ontwerp idee:
- foto van schets komt hier nog...
-
👩🎓 Wat ik heb geleerd: Wat DRY aanpak ook alweer betekent😅... Dont Repeat Yourself
- Briefing gehouden met Joost (contact gehad met opdrachtgever), Zie debriefing 1
- Codeconvies afgesproken, Zie codeconvensies
- Werkzaamheden: Epic > Stories > User-stories > Taken > Planning Poker en MoSCoW, Zie projectboard
👩🎓 Wat ik heb geleerd: Hoe je een datamodel maakt van een website
-
Tijdens de les kregen wij als groepje de opdracht om van de website die op het bord stond een wireframe te maken. In die wireframe moesten we aangeven wat statische en dynamische data is.
-
-
We hebben met ons groepje een Wireframe gemaakt van de website Bieb in bloei, we hebben daarna de wireframe verdeeld in statische data en dynamische data. Zie wireframes onder het data model
-
Ook hebben wij een sitemap gemaakt van de website Zie github
-
We zijn daarna bezig geweest met een data model te maken van de website https://bieb-in-bloei.vercel.app/. Zie data model
👩🎓 Wat ik heb geleerd: Hoe je dynamisch data in een component kunt zetten en kunt uitladen
- Kleuren gekoppelt aan de sprints (component)
-
- i-love-web live gezet > https://i-love-web-xi.vercel.app/
- Onderzoek gedaan naar Harry > Zie issue
-
👩🎓 Wat ik heb geleerd: Hoe je feedback kunt geven aan eerste jaars
- Vandaag was ik aan de beurt voor het mentorgroepje. Ik ben gaan kijken naar het werk van eerste jaars uit mijn groepje. Er waren maar 2 leerlingen uit mijn groepje en daarvan had er 1 werk gemaakt.
- Zie issues die ik heb ingeschoten voor de leerlingen
- Daarna heb ik naar hun bewijslast in portflow gekeken van Arman en Senne en heb ik feedback gegeven.
- Vervolgens hebben we met ons bieb-in-bloei groepje feedback gekregen over de opzet van ons project, die best heel aardig was. Enige echte feedback punt was dat we bij het spelen van planning-poker echt een basislijn moeten stellen zodat we op 1 lijn zitten voor de rest van de punten. Zie issue
- Hoe werk je met branches in github op een branch
- Leervraag 2
- Leervraag 3
👩🎓 Wat ik heb geleerd:
- Docs FDND discussion ingevuld
- Hoorcollege gehad over Sveltekit principes, over Structute, routing, error handling, data loading, library en components.
- Justus vertelde over een custom error-page pagina (+error.svelte), dit lijkt mij handig om toe te passen in mijn project. Ook vertelde hij over +layout.svelte, dat dit op elke pagina komt, en de tussenruimte met
<slot/>dit wil ik ook toepassen. - Standup gehouden met groepje, Zie standup
👩🎓 Wat ik heb geleerd:
- Ik ben bezig geweest om Harry uit de code te halen en dit te implementeren in ons project. Om er te kijken hoe alles werkt heb ik dit voor nu gedaan in mijn i-love-web pagina.
- Ik heb van Harry een component gemaakt en werk met
data-moodom een mood te geven, zodat ik dit kan koppelen aan de bijbehorendesvg.- Voorbeeldje van Harry:
-
👩🎓 Wat ik heb geleerd:
- Vandaag zijn we bezig geweest met Design Critique, in groepjes van 6 hebben wij elkaar Design Critique gegeven en ontvangen.
- Feedback (1)
- Feedback (2)
- Feedback (3), aan Ellenoor gegeven, hun issues stonden niet aan, dus heb ik het via teams naar haar gestuurd.
- Ontvangen feedback:
- Stand up gedaan Zie standup
- Naar opdrachgever geweest, daar hebben we de debriefing besproken en eventuele vragen gevraagd. Wij zijn naar de locatie gegaan van de buurtcampus oost OBA. We zagen daar ook de stekjesbieb (foto 1) en de geveltuin (was voor de OBA).
-
👩🎓 Wat ik heb geleerd:
- Ik ben bezig geweest met nieuwe branches aanmaken, ik liep hier alleen tegen aan, want kreeg niet de code te zien. Heb dit gevraagd aan mijn teamgenoten en bleek dat ik het niet in de goede branch had gedaan
- Gekeken hoe we Harry leuk in kunnen laden.
- Zie Figma bestand foto
-
-
👩🎓 Wat ik heb geleerd:
- We ♥ Web met Nicolas gevolgd
- De We ♥ Web vond ik erg interessant en leuk om te zien wat je allemaal kunt doen met animaties, hij heeft erg leuke projecten gemaakt, vooral met leuke interacties en animaties.
- We hebben een Code/Design Review gehouden, wij keken naar het project van DD Agency. Bekijk hieronder de issues die wij hebben ingeschoten.
- Code/Design Review gehad van Suus en Koop, we hebben vragen gesteld over de temperatuur code en een code probleem. Hiervan hebben we een issue in geschoten.
📅 Maandag 30 sep
src, routes en app.html > moet je hebben voor een sveltekit applicatie
src: Staat alles watsveltekitnog moet uitvoeren en nog mee moet doenstatic: Hier hoeftsveltekitniks mee (public)- Static bestanden zoals afbeeldingen horen niet in je library (Uitzondering SVG als herbruikbaar component)
lib-> bibliotheek voor je bestandenlib/Server.js-> Voor inloggegevens bijvoorbeeld of api keys (veilig)routes: Staan je pagina’s in + dynamische routes [dynamic routing]staticbestanden zoals afbeeldingen horen niet in je library (Uitzondering SVG als herbruikbaar component).env-> Geheimen bestanden.env.example: API URL, secrets etc -> Stuur je wel naar GithubPackage.json: Pakket om te installeren??svelte.config.js-> svelte dingen (adapters bijv.)vite.config.js-> build tool?package.json-> hoesveltekitdraait
Handig: workbench editor management VSCode -> medium zetten zie je src/routes bv extra
+layout.svelte: je kunt layouts nesten, layouts handig voor het hergebruiken van pagina’s met andere data die je kan wisselen.
Belangrijk om vanaf het begin een goeie routing te hebben, dit kan met [dynamic] en static
+error.svelte-> als echt alles de soep in loopt ga naar error.html, dit staat naast je app.html
-
+page.js -
+page.server.js->asyncverplicht load wordt uitgevoerd moment datpage.sveltegeparsed wordt -
Om variabelen te gebruiken is export nodig.
Export let dataConsole.log.(data)<p>data.foo</p>
-
.env
- Public api url
- API_KEY (topgeheim)
- Top voor api’s
-
+page.server.js->import { public api url } from ‘$env/static/public’=== best
-
Doe dit met
private api key=== niet best (server side mag dit wel)dienie im
Voorbeeld:
<script>
let name= ‘word’
$: shout = name + ‘ rocks!’
</script>
<input bind:value={name}
<h1>Hello {name}</h1>
- shout = geen bind (bijna logisch) -> reactive
- $: shout = name + ‘rocks’ ->>>> reactive! 🤯🤯🤯🤯
Index.js -> verzameling van componenten die er zijn
- Export lijstje
- Je kan in import componenten opsommen
Import {Header, Footer} from ‘$lib’
De meeste framework projecten ondersteunen componenten.
— /routes/+page.svelte
‹script>
import {Component} from '$lib'
</script>
‹Component answerToLife= {42} />
— /lib/Component.svelte
< script>
export let answerToLife;
</script><p>The answer is {answerToLife}</p>- Started developing 2012
- Fancy term for dev with an eye for creativity
- Uses all available tools to solve creative and technical issues
- Websites/apps/installations
- JS, CSS, WebGL, processing, Unity, GanAi, LLM At the core: Code, design, motion and interactivity
- Create anticipation and surprise
- Support the narrative and set the mood
- Engage the user
- Solve a design or technical challenge
- The design had to follow a specific atmosphere
- Using animations to show the arch fitting the atmosphere of the website/brand
- The animations/arch also shows an image/video that fits in the atmosphere
- The button next to the arch helps with showing the user the arch is more than just an animation
- All animations are smooth, that helps with typography and keeping the user content
- Animations help create playfulness and they will remember the website better after a playful experience
- Highlighting text with a VoiceOver …..
- Having text like discover should be used when there is something to discover
- Loading animation example, its a heart, it should beat because that is what a heart does. Little things like this make a website playful/fun.
- When scrolling there are sliding animations that creates anticipation when scrolling through the website.
- Highlighting words makes the user focus on words you want to stand out.
- Text animations in the carrousel (?) references the user to specific places.
- Small bits of motion like moving icons make a website playful, the user should be able to interact with them, playfulness on a website says something about a brand.
- Areas -> sections that bounce
- The map section has a small loader appearing
- Hover animations help the user stay entertained and you can show more content
- Email input for a newsletter
- Show the user something actually worked
- When the user enters their email and presses the button they get some feedback from the button showing the arrow pointing downwards, things like this really help the user experience
WePresent x Olafur - Coming soon - with WeTransfer
- Text animation that slowly reveals the text -> helps with making the user read the text because they get curious
- The second animation should be a user activated animation, like scrolling through the website
- When the user does this they have interacted with the website
- Shouldn’t always be full of animations but when you have the freedom
- Cities have different times —> Show it differently!
- Bold text animations
- Use blur in css to reveal things on scroll
- On the shop page
- Scroll animation so the user can play with the content
- When playing the user is more interested in the content
- Small detail the further away the content is, the more blurry it is
- On hover the blur is completely gone
- Make sure your animations work because your name is on a website, people relate a broken website with your name.
- Architecture -> blueprints
- Make the entire website look like a blueprint.
- Show how the architect draws their project —> You can show that process on the website.
- A mountain is 3d, show a 3d image/file on the website so people can relate to the height of a mountain when looking at mountain gear.
- They didn’t want to lose the focus, visitors should focus on the art, animations should be subtle
- Its always a nice touch to make animations subtle
- In this case the video is the main focus/eyecatcher, the small text animations are just nice, not the focus
- Opacity is nice?
- Position sticky, small animations, to keep things organised and stop text in table from overlapping.
- Think of animations and interactions as an extension to an original intent
- Be open minded
- Ask yourself what it brings and ask for feedback
- Be ready to spend a lot of time on it
- Hoe haal ik data uit Hygraph en implementeer ik dit in de code?
- Hoe zorg ik ervoor dat ik me aan de code conventies houdt, tip?
- Hoe stel ik een goede pull request op en wat is nou een goede pull request?
👩🎓 Wat ik heb geleerd: Hoe je data haalt uit Hygraph en dit implementeert in de code
- Talk gehad van Justus over Project methodiek, over waterfall en agile.
- Waterfall: Hele uitvoerige project documentatie
- Agile:
- In de ochtend eerder naar school gegaan om samen te werken met Rutger voor Harry (plantjes mascotte). Rutger was hiervoor bezig met het weer API en ik met harry in de code zetten. We zijn vandaag bezig geweest om dit samen toe te voegen.
- We hebben Harry op de homepagina en stekjesdetail pagina toegevoegd. Ook hebben we dit gekoppeld aan de data uit Hygrapgh en hebben we een nieuwe data toegevoegd in Hygraph hiervoor (Joost gedaan).
- Ik ben ook bezig geweest met stekjes pagina collecite, het is nu volledig klikbaar en ik heb een overlay + hover toegevoegd.
👩🎓 Wat ik heb geleerd:
- Vandaag hebben we het eerst gehad over hoe we de sprint-review in moeten gaan. Hoe we dingen moeten afronden en hoe we een sprint-review netjes moeten doen en documenteren. Dat hebben we als groepje gedocumenteerd Zie issue (link nog toevoegen)
- Daarna hebben we mrt mediahuis elkaar van feedback voorzien, we hielden een oefen sprint-review > zie feedback mediahiuis
👩🎓 Wat ik heb geleerd:
- Branch pullrequest gemaakt en laatste controle gedaan voor de website (link nog toevoegen)
- Sprint review met de opdrachtgever.
👩🎓 Wat ik heb geleerd:
- Als mentor voor de eerste jaar, ik heb ze geholpen met het maken van een roadmap. In het begin hebben we de DLC’s opgeschreven en daarbij de passende principes en taken. Daarna zijn zij zelfstandig bezig geweest met hun roadmap en zat ik er bij voor vragen
- Kampvuursessie gehouden met het team > link kampvuursessie