Insights
🛠 Frontend development
Als grootste engelstalige Vue conferentie trekt VueJS Amsterdam developers uit elke hoek van de wereld aan. De meeste bezoekers hadden er aan het begin van de conferentie dus net een lange reis op zitten. Hierdoor kreeg de eerste spreker de grote verantwoordelijkheid om niet alleen een sterke eerste indruk achter te laten, maar ook om het publiek wakker te schudden. “Challenge accepted” dacht spreker Tim Benniks ongetwijfeld. Hij haalde namelijk alles uit de kast om de jetlag en vermoeidheid van elke aanwezige weg te blazen met zijn talk “Alive and Kicking”. Je kent de term Rockstar Developer wel, zo kan je Tim best omschrijven.
Het concept van de talk is als volgt: Wat als je als gitarist geen fortuin wilt uitgeven aan een versterker en oneindig veel pedalen? En wat als je dat probleem kan oplossen met dezelfde technologieën waar wij dagelijks mee aan de slag gaan? Het geheim zit in een klein zwart doosje die de analoge signalen van de gitaar omzetten naar digitale signalen (MIDI).
MIDI
MIDI staat voor Musical Instrument Digital Interface. Het is een communicatieprotocol die in de muziekindustrie gebruikt wordt om elektronische instrumenten, computers en andere toestellen die geluid maken of controleren te verbinden. MIDI berichten zijn een reeks digitale instructies die informatie over muzikale events overbrengen, zoals welke noot er gespeeld wordt, hoe hard die gespeeld wordt en wanneer die noot losgelaten wordt. Die informatie kan gebruikt worden om bijvoorbeeld software of zelfs lichtshows aan te sturen.
Met de komst van de Web MIDI API worden MIDI toestellen standaard in de meeste webbrowsers en besturingssystemen ondersteunt. Deze API is helaas een beetje onhandig en te low-level voor de meeste ontwikkelaars. Om efficiënter aan de slag te gaan met MIDI op het web gebruik je dus best de webmidi package.
:quality(90))
Tim maakte gebruik van deze tech door enkele liedjes in preset hoofdstukken op te delen. Beschouw het als karaoke voor gitaar. Hij speelt met zijn eigen gitaar de liedjes mee, en afhankelijk van het huidige hoofdstuk wordt er automatisch een andere preset toegepast op zijn versterker. Deze presets bepalen variabelen als volume en echo waardoor het geluid verandert, gaande van crunchy riffs tot oorverdovende solos.
Welk nummer is Tim Benniks aan het spelen?
Daarnaast wordt het digitale signaal van zijn gitaar ook in real-time gevisualiseerd op een HTML5 canvas. Dit verhief zijn talk van een indrukwekkend concert naar een verbluffend audiovisueel spektakel. Om extra indruk te maken besloot Tim om zijn talk ook nog eens interactief te maken. Het publiek kreeg namelijk de kans om te stemmen over welke liedjes hij zou spelen. Dankzij Supabase met GitHub authenticatie kwamen de stemmen live binnen, dus kon het publiek zien welk liedje het populairst was. Per stem verscheen er ook een stuiterende bal op het canvas. Leuk extraatje, je GitHub profielfoto te zien verschijnen in een auditorium met 1500 toeschouwers.
:quality(90))
:quality(100)){kind=small}
Manaus
Delen:
Insights
Meer inzichten
:quality(90))
🛠 Frontend development
Vue Amsterdam 2024: dag 1
Dag 1 van de jaarlijkse Vue Amsterdam conference.
:quality(90))
📱 PWA,🛠 Frontend development
PWA. Nu meer dan ooit.
De kloof tussen native en web wordt steeds kleiner. Dat bewijst ook de komst van Push Notifications voor web apps op het Home Screen (PWA’s) in iOS 16.4. Deze functionaliteit was al langer beschikbaar op Android, maar nu kunnen ontwikkelaars dit eindelijk voor beide platforms implementeren. Android en iOS samen hebben een marktaandeel van maar liefst 99% van alle mobiele gebruikers.
:quality(90))
💫 Motion,🛠 Frontend development
Motion Library
Om een aantrekkelijke en moderne UI te bekomen, is het animeren van een website van groot belang. Daarom hebben we bij Appeel gewerkt aan een animatie project “Motion library”. In dit project worden verschillende componenten van een website geanimeerd en de code ervan getoond om zo als inspiratiebron te dienen voor alle collega’s van Appeel.