Worldwide Creative JS+Web Celebration
4:00AM – 4:09AM
Let's get started!
4:09AM – 4:37AM
Navigating a website mostly involves typing on a keyboard and swiping on a trackpad or touchscreen. However, a few recent tools developed around motion tracking are unlocking the ability to interact with web interfaces using gestures and computer vision.
4:37AM – 5:10AM
After a decade of responsive design, responsive no longer just means adapts to your screen size. Nowadays, websites can adapt to many different user preferences, device capabilities and even situational changes. They do this with media queries, feature policies and even through CSS variables. Kilian explains what that means for your development workflow and how you can use these capabilities to provide a better experience for your users and truly respond to their preferences.
5:19AM – 5:20AM
Jack Handey or Dylan Schiemann, you decide
5:20AM – 5:42AM
5:42AM – 6:19AM
Not being able to go out and use the normal distractions might be a good time to take stock and look at what we have. You could re-arrange your cupboards and wardrobes or order all those USB cables you collected over the years. Or you could take a look at what tools and tool options are available to us as developers these days. In this quick talk Chris Heilmann will take you on a tour of the Chromium developer tools universe and point out some things that are useful but may have slipped under the radar in our quest to always find the next new thing.
6:28AM – 6:31AM
Jack Handey or Dylan Schiemann, the debate continues.
6:31AM – 7:11AM
“Do you play games?”.... Duh! “Ever thought of building one yourself?”...Yes, but, umm...
The innate nature of games, in general, is to seem difficult to build. With lots of moving pieces involved (quite literally), game development seems like it’s restricted to devs who’ve dipped their feet deep into the holy waters of networking, mathematics, graphics, and the like. However, with the web evolving ever so rapidly and with all the new protocols and libraries that have spanned in the recent years, it’s now super simple to get started with building browser-based multiplayer games.
In this talk, we’ll understand the architecture, system design, networking protocols, and caveats to keep in mind if you’d like to get started with building multiplayer browser-based games, all while playing a multiplayer version of a classic retro.
7:11AM – 7:46AM
Many talks about performance focus on how you can improve your websites speed. This is really helpful if you know you have a performance problem however it will not help you identify whether there is a problem in the first place. This talk is slightly different, it focuses on how you can gather data yourself, helping you understand if you have a problem and what impact it is having on your users.
7:46AM – 8:26AM
"Can you have it show order data across multiple monitors by tomorrow?"
This is the story of that one time Ramon was contracted to build a point of sale system in 3 weeks, using Vue.js, a Raspberry Pi, and a thermal printer. It was a chaotic but educational journey, with valuable takeaways!
8:26AM – 8:58AM
Enjoy an incredible live coding + music performance with Mynah Marie!
8:58AM – 9:30AM
It all started with a colon and parenthesis. That simple smiley face brought us emojis and then animojis. What if we could bring those digital representations of our tone & sentiment to life in the real world? Join us as we learn from Geppetto's Guide to Living Puppets and build an animatronic puppet that mimics our movements using the Vonage Video API, Azure Functions, Particle IoT devices and yes, an animatronic puppet.
9:31AM – 10:10AM
How do you tune an oscillator or pitch an audio file up? How do I make an octave with more than 12 notes in it? What are the mathematics behind instrument tuning anyway? If you've ever asked yourself these questions or you just want find out why I asked them, join me for a brief tour of music theory and code.
10:10AM – 10:55AM
In VR, with an advanced headset, one can explore a scene by walking in the real world. We’re often limited to the size of the room we’re in but the VR world can go on forever!
When you add a virtual method for moving around the scene, it lets users explore your VR scene even if their headset or their environment doesn’t allow them to walk around. This is sometimes called locomotion or teleportation. In this session we'll explore locomotion with WebXR by building a scene using VR controllers to explore the virtual environment.
10:55AM – 11:28AM
Digital Funny Man Joe Hart shows off a couple of new interactive video games and parody games while imploring you to join him on his ridiculous journey of building small niche games for people and groups you love.
11:36AM – 11:41AM
HalfStack Interviewer Tony Edwards explains a proper solution to a proper British problem.
11:41AM – 12:19PM
Dylan writes songs about code, writes code about songs, and he's been called 'software's answer to Weird Al'. Join Dylan Beattie for a unique live musical performance. Classic rock hits from the Beatles to Bon Jovi, lovingly refactored, packed with nerdy jokes, and performed live - with lyrics on screen so you can all sing along. You'll laugh, you'll cry, you might even dance.
12:19PM – 1:00PM
Do you scroll through TikTok, amazed at the goofy, yet complicated dance moves featuring today's youths? Those kids are popping off while you're sitting around, coding SQL queries. Fortunately, we are technologists, and there's no problem we can't solve, including getting better at TikTok dancing. In this talk, Jen will show you how she perfected her moves by building PoseDance, your friendly TikTok trainer. We'll discuss how Jen leveraged PoseNet, which allows you to pinpoint body motion and draw a 'skeleton' on a video. Combined with a webcam mapping your own dance skeleton, a bit of math to compare the matching points, Azure functions to authenticate a user, and PlayFab as a game-friendly backend to keep scores and create a leaderboard, you've got the perfect quarantine pastime, making a perfect fool of yourself in front of a webcam. Come dance with Jen!
Jen is a Google Developer Expert and a Cloud Advocate Lead at Microsoft with over 20 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
1:00PM – 1:28PM
Together, we will go through how Joe setup my IoT Litter Box from start to finish. Including how to setup Node.js on a Raspberry Pi and how to connect sensors to a Raspberry Pi and how to read the sensor inputs with Node.js.
1:28PM – 1:31PM
1:39PM – 2:10PM
The title says it all
2:10PM – 2:37PM
In this talk we will live code a small application built off of one of Rahat's pre-built API's, a list of our favorite R&B songs from the 90's. We will be combining run-time GraphQL using Apollo and build time GraphQL using Gatsby to create R&B GraphQL a truly dynamic PWA.
2:37PM – 2:45PM
Jack Handey or Dylan Schiemann, you decide
2:53PM – 2:57PM
JS-inspired rap by Rahat
2:57PM – 4:05PM
Creating music or visuals on the fly using code is fun. But is it more than that? Can we find deeper implications in the practice of live coding than pure entertainment? Is it possible to express “human emotions” using algorithms? In this talk, Mynah Marie will give an overview of the particularities of the creative process when using a programming language as a medium of expression. She’ll also give an overview of various creative approaches and the motivations for choosing one over another. Finally, she’ll take a closer look at concrete benefits that the practice of live coding can bring, on an individual scale as well as on a community level and open up the discussion about potentials and possibilities for the future.
4:05PM – 4:33PM
The Future Looks Fabulous! Chelsea Klukas has been working at the intersection of Fashion and Technology for over 8 years. Her in fashion work includes projection mapping, sensors, and new hardware development for augmenting human expression through wearables. Learn how MakeFashion and Lumen Couture have developed, and the journey of working with artists, rapid prototyping, and bringing far-out concepts to market.
4:35PM – 4:38PM
Jack Handey or Dylan Schiemann, the debate concludes.
4:38PM – 5:17PM
Building custom data visualizations with full international support is not always easy.
This past year, Naomi has worked to add new data visualizations features and modify legacy visualizations, for an international audience - on her team at Adobe. It’s been a learning process to correctly format strings, numbers, dates, times, currencies, calendars, x/y axis, and more!
5:17PM – 6:30PM
JS Party’s don’t-call-it-jeopardy game show where 3 contestants put their web dev knowledge to the test. Can you out-wit our “expert” panel? Play along to find out!
6:30PM – 7:01PM
Before Minecraft there was Age of Empires - and the scenario editor. The editor allowed players to create custom maps for single and multi player use. What was originally a simple system for map design was wildly extended by players - to include flying dragons, health and management systems, RPG style games and even rudimentary source protection. The engine supported none of this.
7:01PM – 7:32PM
Can we build full 3D worlds using only CSS? Do we need to wait for widespread WebGL2 and webGPU adoption before we start building our next project?
We will delve deep into the inner workings of CSS and 3D transformations, and explore how to build complex and fast web experiences with common place APIs. We could have been doing it all this time! We will also explore how the browser's rendering pipeline works and how we can structure our JS code for achieving realtime performance.
7:32PM – 7:42PM
Amie's background is in Game Programming and Simulation and she started her career at Marvel Studios, working on Captain America and X-Men Destiny. She's a full time software developer and active in the maker, LEGO, hacker and cosplay communities, and continues to obsess over new technologies.
7:42PM – 7:44PM
Quick recap before the final music performance
7:44PM – 8:18PM
Experience this incredible live coding music ensemble featuring David Ogborn (Dundas, Canada, @_dktr0), Eldad Tsabary (Montreal, Canada, @eldadtsabary), Abhinay Khoparzi (Allahabad, India, @khoparzi), Shelly Knotts (Newcastle Upon Tyne, UK, @shelly_knotts), Chiho Oka (Tokyo, Japan, @chihooka, Jessica Rodriguez (Hamilton, Canada, @Jessica31249273, Melandri Laubscher (Cape Town, South Africa), Celeste Betancur (Medellín, Colombia), and Mynah Marie (@EarthAbigail)!
Ada Rose Cannon