Filteren & maps

Week 12

Vandaag hebben we van Justus een korte les gehad over het filteren en maps in Javascript. Hij was aan het live coden met ons en liet ons zien wat er bij elke stap gebeurde.

Client-side scripting for UX

Week 14

Op maandag 6 mei hebben we van Krijn een les gehad over view transitions. Dit wordt nog niet door elke browser ondersteunt, maar Krijn zegt dat het over een jaar waarschijnlijk veel meer ondersteund zal zijn, dus hij wil ons dit meegeven.

Wanneer je iets selecteert dan zou een stuk content langer worden en die nieuwe content laten zien, zonder dat het verschuift. Dit geeft met maar een paar regels code een hele cleane transition.

Verder heeft hij nog wat uitgelegd over loading states.

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, en ik zag een aantal animaties die ik graag zou willen gebruiken en aanpassen in 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

Week 15

Fronteers bestaat sinds 2007. In het begin begonnen ze met makkelijke onderwerpen, maar dit werd al steeds moeilijker en zelfs bijna backend. Fronteers BE bestaat sinds 2010.

Upcoming event: 12 september, Utrecht, Fronteers NL meetup

Ze zoeken nog speakers en hosts zoals fdnd. Op Fronteers.nl staat alle info. Cyd Stumpel en Jad Joubran zullen wat vertellen.

Justus

Justus heeft wat uitleg gegeven over fdnd en dat we de enige hbo frontend opleiding in Nederland zijn. De tweede is onderweg. Hij vertelt dat we voor bedrijven werken.

3 juli is de expo, dus kom kijken.

Verder legt hij wat zaken uit die fdnd doen, zoals projecten met andere bedrijven, wie de co-teachers zijn en wat we tijdens het programma doen.

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

Bij haar stage heeft ze gewerkt aan een opdracht voor de website van 'Wereldvrede'. Dit beviel goed en hier besefte ze dat ze creative developer wilde gaan worden.

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?

Is het een beetje leuk om naar te kijken?

Nieuwe opdracht

Laatst kreeg Cyd een bericht van iemand voor een nieuwe opdracht.

The brief

Iemand wilde nieuwe portfolio.

The sketch

Cyd ontving een ontwerp van hoe het er ongeveer uit zou moeten gaan zien.

The debrief

Cyd wilde wat dingen aanpassen en stuurde terug: 'Wat als we dit zo gaan doen en dat doen we anders?'

De client vond het goed!

Tips

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

Overig Cyd heeft bijna alles op Wordpress gemaakt.

Ze gebruikt veel:

• 3js
• Gsap

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