Workshops - RayanSp/vervoerregio-amsterdam GitHub Wiki

Filteren & maps

Week 12

Vandaag heeft Justus wat uitgelegd over het filteren en maps in Javascript. Hij heeft daarnaast ook in code een voorbeeld gegeven van hoe je dit zou kunnen gebruiken.

Client-side scripting for UX

Week 14

Op maandag 6 mei heeft Krijn laten zien hoe je view transitions kan toepassen. Het is erg simpel te implementeren en kan je website 'likeable' maken. Helaas wordt dit nog niet door elke browser ondersteund. Toch wilde hij dit even laten zien, omdat in de toekomst dit wel iets zou kunnen worden.

De view-transitions kan je erg simpel houden met een kleine fade bij een page-transition, maar het kan ook complex worden met state transitions.

Verder heeft hij nog wat uitgelegd over loading states, dit is iets wat ik wil toepassen bij een form die ik ga bouwen.

Hij heeft ons uitgelegd dat het slim is om loading state buttons te gebruiken. Op deze manier is het voor de gebruiker gelijk duidelijk dat de pagina nog aan het laden is.

GSAP -Plugin

Week 14

Tijdens de GSAP workshop van Cyd hebben we verschillende voorbeelden gezien van hoe je GSAP kunt gebruiken om prachtige animaties te maken. We hebben deze voorbeelden getest in CodePen. Dit is iets wat ik in combinatie met view-transitions graag zou willen gebruiken voor mijn portfolio.

Progressive enhanced forms

Week 15

Joost heeft een talk gegeven over hoe je op basis van html en sveltekit functies een goede progressive enhanced formulier kunt maken. Hierbij gaf hij ons handige tips om te gebruiken;

use:enhance. Dit is een functie van sveltekit, waardoor er goed gekeken wordt naar progressive enhancement.

Constraint validation voor het stijlen van error meldingen van forms.

Form states (progressive disclosure). Een formulier die meer uitklapt als je dingen intypt.

Check code conventies van andere bedrijven.

Hosting javascript schrijven (js boek David lezen).

Fronteers meeting

Week 15

Cyd

In 2018 is Cyd van de HVA met de opleiding CMD afgestudeerd. Tijdens de studie heeft Cyd stage gelopen bij (Maties?), tegenover Artis. Hier kon ze elke dag naar leuke diertjes kijken.

In 2020 is ze begonnen met freelancen. Tussendoor heeft ze nog 5 maanden bij Lamalama gewerkt, maar hierna kreeg ze opeens veel klussen aangeboden.

Verder heeft ze meegedaan aan Awwwards en is ze daar nu ook jury. In september mag ze mee naar Valencia hiervoor.

Momenteel geeft ze dus les bij de fdnd opleiding, waar ze dit samen doet met oude CMD docenten.

Cyd laat een aantal voorbeelden van haar werk zien en vertelt ons dat er veel saaie animaties zijn en dat dit beter kan.

Ze vertelt over de Disney design principes:

  • Squash en strech
  • Anticipatie
  • Staging
  • Slow in slow out
  • Follow through and overlapping actions
  • Exaggeration

Tijdens het maken van een animatie is het handig om een styleguide te hebben en om je aan de volgende drie vragen te houden:

Is het herkenbaar? Bij het maken voor de website van Talpa heeft Cyd een aantal regels opgesteld om zich hieraan te houden. Dit hielp haar.

Is het bruikbaar? Is de content te belangrijk voor een gekke animatie? Of is de animatie iets te vervelend? (Een beetje mag wel)

Is het mooi/fijn?

Tips

  • Practice makes perfect
  • When in doubt chous ease out
  • Less is more
  • Be consistent not repetative

Jad

Jad gaat iets vertellen over de View transitions. Hij doet momenteel aan Web performance consulting. Hij werkt veel met Javascript, typescript, html & css.

Ai bot

Onlangs heeft Jad een wandeling gedaan in het zuiden van Limburg. Hier hebben ze een keer een Hotel geboekt en na de boeking kreeg hij een whatsapp bericht van de AI bot van het hotel. Hiermee ging hij een beetje spelen en kijken wat hij allemaal kon. Hij was de bot aan het spammen en vroeg veel dingen over code. De bot reageerde allemaal antwoorden terug. Op een gegeven moment kreeg hij een medewerker in de chat die vertelde dat ze alles mee kon lezen.

View transitions api

Wat is het?

  • Easily transition two states of the dom
  • Two snap shots and animating them

Live coding

Jad heeft de title veranderd en nu kan hij gaan animeren. De browser maakt screenshots en met de view transition kan je deze in elkaar laten animeren. Als je hem tussendoor op pauze zet dan zie je dat de view transition eroverheen zit. We animaten eigenlijk alleen maar images.

Cards animating

Browser maakt 4 screenshots. Old en nieuw van de root (alles?) en de heading (title). Jad liet ons zien hoe je als je een card delete dat je met view transitions een andere card er weer overheen kon laten sliden. Dit deed hij met keyframes.

Overig

  • Startviewtransition kan dark naar light mode veranderen.
  • Er komt een nieuwe pagina als je op een link klikt. Er komt een circel die groter wordt omheen naar de nieuwe pagina. De rondjes worden groter met clippath.

Andere scenarios

  • Css grid
  • Back button nav

Conclusie

  • Flexibele api

Future work

  • View transitins for multuple page apps
  • View tranistion type

References and inspiration

  • Bramus talks