Make the Web Weird Again

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

The web is capable of way more than we might think. During this talk, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

FAQ

Elian is the lead developer at React Bricks, a CMS company that focuses on visual CMS with React Components. He is also an Astra maintainer and part of BGS, a conference organizing group.

React Bricks is a CMS company that provides a visual CMS using React Components.

BGS organizes conferences such as React Brussels, React Paris, and React Africa.

Elian is from Belgium and currently lives in Ghent.

Elian can be followed online at Elian Codes on all platforms, and his website is BlueSkiesElian.Codes.

Elian usually speaks about topics such as accessibility, performance, CSS, JavaScript, and Astra at conferences.

The theme of Elian's talk is 'The Weird Web,' where he explores fun and unconventional uses of web technologies.

Eelslap is a website that allows users to slap someone with an eel using mouse movements, showcasing the fun and weird side of the web.

The Battery Status API allows developers to access battery information such as level and charging status, and attach event handlers to these changes.

WebHID (Web Human Interface Devices) allows interaction with hardware devices via the web. Elian demonstrated using WebHID to manipulate colors on a webpage in response to hardware button presses.

Elian Van Cutsem
Elian Van Cutsem
29 min
13 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
I'm Elian, the lead developer at React Bricks, and today I will talk about the weird web and how we as developers have the power to make it even weirder. We can use APIs like the Battery Status API to manipulate websites based on battery levels, but we should also be cautious about its potential for misuse. Another interesting API is WebHID, which allows interaction with hardware devices through the web browser. Tejas introduces WebMIDI and demonstrates how it can be used to control web applications using MIDI devices. The speakers emphasize the importance of embracing the fun and weirdness of web development and encourage experimentation. They also discuss the tolerance for failure and the joy of pushing the limits in building unconventional projects. Overall, the Talk highlights the potential for creativity and innovation in web development.

1. Introduction to the Web and Myself

Short description:

I'm Elian, the lead developer at React Bricks. I'm also an Astra maintainer. I'm part of BGS, a conference organizing group. If you want to follow me online, I'm at Elian Codes on all platforms. Today, I will give you a talk that fits my cheerful personality.

The web can be weird. That's what I'm going to talk about today.

First of all, I already got an amazing introduction, but I'll do it myself again. I'm Elian, the lead developer at React Bricks, which is a CMS company, Visual CMS with React Components. It's very cool. I'm also an Astra maintainer. I used to work in the core team for a year. I'm part of BGS, which is a conference organizing group just very much like this one. We do React Brussels, React Paris, and now also React Africa, which is amazing. First conference in Africa. And I am from Belgium. I'm living in Ghent. Do I have fellow Belgians here? One. Hey! Good. Good. I'm already. Love it. Okay. Cool.

If you want to follow me online, I'm quite sure some of you are going to take pictures. Please tag me. I always find it very fun. I'm at Elian Codes on all platforms, just BlueSkiesElian.Codes, which is also my website.

So before I start here, over the past year, I've done a lot of events, a lot of conferences, a lot of meetups, and all of them were about very, very serious topics like accessibility, performance, CSS, whatever, JavaScript. Really cool, really cool, but also very serious. So I thought, like, don't get me wrong. I love giving all of those talks, especially about Astra and everything. I love it. But I thought today I will give you a talk that fits more to my personality, which is cheerful and joy and everything like that, funny. So you're all going to have fun.

2. The Weird Web and My Inspiration

Short description:

Today, I'm here to talk to you about the weird web. Ever since I was a little boy, I loved weird websites. One of my favorites was Eelslap, where you slap somebody with an eel. The web's weirdness inspires me to make it more fun.

That's my goal for today. Have fun! Yeah.

So today I'm here to talk to you about the weird web. Ever since I was a little boy, I was once long ago, I loved weird websites. Does anybody else have that experience? Like I was in school. I was a little kid. I had a computer with internet. I was lucky to be not that old nor that young that I was introduced to that. I loved it.

And I went to this website. Who remembers this one? A lot of you, right? And especially this one. This was my favorite one. If it's loading. Yes. That one. Nobody recognizes it? I'll quickly show it to you. It's called Eelslap. And basically the thing you do is slapping somebody with an eel. So this is just, it's images. But it basically tracks your movement of the mouse. Whoa. Right? Yeah, wow. I didn't build this. But it's pretty cool. I could do this for ages.

And so I was sitting there in my classes not paying attention, but just like doing this. And I got always, the teachers were always very angry with me because I was playing games. But they didn't understand that I loved like the weird web and how this still inspires me to today to make the web more fun. Let me get my slides back up here. So it's up to you.

3. The Power to Make the Web Weird

Short description:

Like we have the power. We are developers. We can make the web weird. Let's try some weird stuff and have fun. Arc Browser injects CSS variables into every website, allowing personalization. JavaScript APIs in browsers offer more possibilities. One such API is the battery status API.

Like we have the power. We are developers. We can make the web weird. So we might not know everything. So maybe let's just try a couple of weird stuff today so we can actually try stuff and have fun. And I hope you will have fun, I guess. I'm going to have fun.

So first of all, who uses Arc Browser? That's quite a lot of people, right? Yeah. Do you know that it actually injects CSS variables into every website you have? Like these are the ones. Don't mind me like showing my slides. I don't care. It's a little bit easier for me that way. It basically injects CSS color palette in every website.

I have a simple website here, which is just saying the word Arc. And it's black on white. Well, white on black, actually. And it doesn't show any color because those variables aren't there. And I set fallback values for that. But what happens if I go to my Arc and I open that same website? If I open that same website, it's actually green as well. And that's because my color scheme in Arc is green. So if I change that, I think it's somewhere here, edit theme colors. And I want it to be purple, for instance, my website will react to it. So this is a personalization that you can do on the web. Is it really useful? Well, not really, but not everything has to be. If it's fun, that's more than enough for me. But this was just CSS.

And CSS is one thing, but what if we can programmatically, like JavaScript-wise, we can do way more stuff because one program that we all use is the browser and the browser actually has a lot of APIs that we don't know? So let's take a look at some APIs that you might not have heard from. The battery status API, who has heard of it? Yeah, a couple. Who is actively using it? Kind of? No one really is, and that's a good thing. But it's very simple.

4. Exploring Battery Status API

Short description:

You can get battery information from the navigator and display the levels. It's easy to attach event handlers and add listeners. The page disappears as the battery drains, based on the battery level. No permission is required to read the battery, and event listeners can be added to monitor level changes.

It's basically on the navigator, you can just, hey, get me the battery info, and then you can display, you see the levels. You can also check if it's charging or not. But you can actually also attach event handlers to it. You add listeners.

So I'm quickly going to do that. Well, I already prepared the demo, obviously. And it's all in just vanilla JavaScript. I did build this in React at first, but then I was like, maybe I need to show the power of the web more because this is just an HTML file. Well, it's served with Vites, but it's an HTML file with a script, and that script is doing everything. There is no real React or framework going on.

So what do I have? I just have a div with a title, I have a P element, and I have the level. And it basically does what it says. This page will disappear as your battery drains. So you have 100% battery, the page is 100% visible. If you have zero battery, well, your laptop will be out, but the website will also not be there. And it's very simple to do, because I just ask the battery, well, the browser, hey, can I use the battery, please? And there is no permission required to read the battery, by the way. That's pretty strange, in my opinion, but it's how it is.

And then I just add an event listener to the level change. So if I show this visually, I should have that here. So I have the battery. So now it's green. It's green text. I didn't explain what that is. Well, basically, it's my cable here. So if I unplug that cable, it's red. Because it's not charging. Whatever that was. That was not the battery, I hope. The battery died. So this page is now 89% 98% visible.

5. The Power and Dark Side of Battery Status API

Short description:

The Battery Status API is simple but can be useful. It's available in most major browsers but not in Safari. It can be used to detect the battery level of the user's device and make adjustments accordingly. However, it can also be used for darker purposes, as demonstrated by the Die With Me chat app that only allows usage when the battery is below 5%.

Thank you, Tejas. And it's very simple, and I'm doing a lot of stupid things with it. Like this is not really useful, right? But it can be useful. It's available across most major browsers, not in Safari. It's actually available in Firefox, but they spoof it with fake data, because they think it's a violation of privacy. And in some ways, I agree.

Is it useful? Yes. In a way. Because imagine you have a lot of GPU work being done on your website. Now you can actually detect, hey, this person's website, well, this person's laptop, isn't that full? Maybe we should tone it down and use less battery. Yeah, wow, exactly. But actually, it also has very dark things. Like for instance, this is a project by a fellow Belgian of mine, Dries de Poorten, and it basically is called Die With Me. So this is a chat app, but you can only use it if your percentage is below 5%. So you can chat with your friends or with people randomly across the world who also have a dying phone. So it's fun, but the thing is, what if we take like a really dark turn?

6. The Dark Side of Battery Status API and WebHID

Short description:

The Battery Status API can be used for darker purposes, such as manipulating prices on e-commerce sites based on a user's low battery level. However, it can also be used for practical purposes, like sending notifications to users to save their work when their battery is low. Another interesting feature is WebHID, which allows interaction with human interface devices through the web browser. It can be used to control devices and trigger actions, but caution should be exercised to avoid misuse.

eBay, whatever, Amazon, and suddenly you can detect, hey, this person only has 10% battery left that should last around maybe 20 minutes. Let's push some sales and let's make the prices a little bit more high, because maybe he still needs to purchase something, but his phone is going to die. Well, that's a very dark turn, but it's totally and technically possible. I hope you all don't do that. Don't use it for that.

What I use it for, for instance, I work at a CMS company. We don't have autosave for that. So I can send a notification, hey, your website is, well, I'm detecting that your battery is almost dead. Maybe you should save.

For instance, WebHID, Web Human Interface Devices. Who has used it? Nobody. Wow. Okay, cool. I'm going to show you some cool shit then. It's very simple. It's just devices, a web navigator, get the HID devices, and then you just get the device and you can interact with that device. And I'll show you some examples. Again, I'm doing stupid shit with it, but I'll explain afterwards if it's actually useful and where it is.

So I have this audio interface here. That's the thing that makes the sound, right? That's my sound interface that I use for sound, but it's also a WebHID device. So I'm just connecting to that one because that was easier. As you can see, I have already a couple of things with me. So Volt 2, that's what it's called. I'm going to connect to it. And now I'm really going to turn the sound off, because if I touch it and it goes off, that's annoying for you all. This WebHID title is actually populated with variables, HSL, which is a CSS way of calculating colors in a big round. But what I can do, I have four buttons on here. And if I touch them, I can actually alter those colors because it's just an event listener on some hardware buttons. I'm using it for stupid shit. Don't do that.

7. Exploring WebHID for Hardware Interaction

Short description:

You can use WebHID to interact with hardware devices through the web browser and control actions on your website. By adding event listeners and manipulating registers, you can change colors and perform various tasks using JavaScript. This feature is not only useful for adding interactivity to websites but also has potential applications for accessibility and hardware integration, such as using PlayStation controllers with WebHID.

Don't do that. But it's a cool thing on how you can actually do it. So now it's not visible because none of my colors are turned on. Now I turn on the red. I turn on the blue, whatever, all those colors. So is it difficult to do? Not at all. Let me get my code up for you. So WebHID, there we go. There is some annoying thing, and that is you have to read registers because you're interacting with hardware. It's sometimes a little bit more advanced, but luckily these days we have AI to solve that for you. I did it manually and mostly by just pressing the buttons and seeing what works. So I just add an event listener to click, which connects to the device, blah, blah, blah. The device opens. Then I can actually use the input device. And what do I do? I just do an on input something, basically. I get the register number and everything. And how I do that is not really interesting. It's mostly this code, and it's very shitty. But what I can do is that you can see there are equals randomized number, B equals randomized number. So every time I push a button, it's going to return me a random value, and I inject that value into my HSL color. And that code is right here. And it's pretty easy. So basically I just take the style, add the style, and do it all with JavaScript. And then suddenly we have a website that can change colors. Is it useful? Of course it is. Is it useful for the shit I do? No. But definitely it's useful because what if you have 3D on your website or maybe somebody that has accessibility issues? Maybe they can use hardware to interact with the web directly without a keyboard or with something else. For instance, PlayStation controllers. If you've ever done something, yeah, you can connect them to WebHID. Good Tejas.

8. Introducing WebMIDI and Personal Reflections

Short description:

Tejas introduces WebMIDI and asks the audience about their familiarity with MIDI. He connects his phone and switches to his hotspot for a smoother experience. Despite some internet issues, he shares a bit about himself as a DJ and his love for parties in Berlin.

Tejas knows his stuff. But then WebMIDI. Who knows MIDI in general? OK, good, good. A couple of people. Yeah, there. Cool. OK, nice.

WebMIDI. Well, I'll connect my phone again for this. Quickly. Hoping the Wi-Fi works. OK, I'm quickly going to switch to my hotspot. That's going to be a little bit easier.

So how are you all doing today? Good? Better than my internet, it seems. OK. With a little bit of luck, it should come up now. It doesn't. OK, well, oh, it does right when I need it. OK, perfect. It's very slow, and I don't know why. But I'll do it like this. So this is me. For the people that know me better, this is four, five years ago. I don't know.

The people that know me a little bit better, I am a DJ. They know I love partying. I love Berlin, as well. Good parties. I like them. It's a lot of fun.

9. Tejas's Hobbies and Discovering MIDI

Short description:

Tejas talks about his hobbies and how he started working full-time. He shares his love for vinyl and guitars, and his growing collection. Tejas mentions his interest in the techno world and his purchase of a 303 and an RD-6. He explains his need for a groove box and a keyboard to control them. Ultimately, he realizes the importance of MIDI in the web browser context.

So I have hobbies, just like all of you. And in 2022, I started working full-time. And I was spending eight hours a day behind my computer. Well, at least, because I was very active in open source. So, of course, like, well, no, you do way more than eight hours a day because you love it or you hate it, whatever. You still do more.

So I decided to go all in on, well, not necessarily all in, but I used more vinyls because I don't want to be busy with screens and everything. So then I bought a guitar because I was like, hey, it's a lot of fun to be able to play. I didn't know how, but I learned. And you do the thing that every guitar player does. If you can play one guitar, you buy another one. So that's my second guitar. And then I bought a third one and a couple of extra speakers. And then I bought a fourth one, I think. Well, I have a couple. But I wanted more because, well, as awesome as guitars are, it's not really my jam. I'm Belgian, so I'm very much of the techno world.

So I bought a 303, which is like a typical, very acid bass line, techno, mainly, and an RD-6, which is a drum computer. I bought those, and then I was like, hmm, I probably need a groove box. So I bought the groove box, and you can already see like my apartment is kind of transforming. My girlfriend is very much not happy with that, but that's her problem. So then I bought a Keylab, which is a very big keyboard to be able to control them all and keep them in sync.

So long story short, I have to move because my apartment is getting a little bit too small. That happened. But there is no screen. That's what was important to me. There is no screen, there is just one thing. And that's a clock. And the cool thing is that clock is called MIDI, and we can use it in the web browser context, which is pretty crazy. Because when I first read, hey, I can do this via the browser, it didn't make sense.

10. Setting up Devices and Connecting MIDI

Short description:

Tejas explains the setup of the devices and how they are connected. He mentions the USB-C connection of the audio interface to his laptop and the use of a MIDI cable between devices. Tejas highlights the functionality of the MIDI cable in synchronizing the beats per minute. He also mentions adding a video and the compatibility of the setup with most browsers.

You need a box like this, by the way. It's not that you can just plug a USB in. And I will show you actually how this is connected so it makes a little bit more sense. I'm just going to see if I can use OBS for that to check if my phone can do that.

What do I want? Can I see my screen? Nope. Doesn't look like it. Well, that's sad for you. You cannot see it. I'll explain it. So how this works, it's basically all of these devices, there is no USB. There is USB ports, but I'm not using them. There is one, and that's in the audio interface. The audio interface is connected via USB-C to my laptop. And basically, it gets two input lines of audio, sound, and that audio sound is going to go to those two speakers.

How that's connected, that's their problem, not mine. And it seemed to work. We tried it before. And I actually have a MIDI cable here, which is connected from this device to this device. And basically, what this will do is it will tell it, like, hey, I'm playing at this much beats per second or per minute BPM. And this one will then react to that one and will know how fast it should play the notes. That's basically all it does. The cool thing is I can connect this up to the internet like this, and I'm going to. First thing I did was add a video. And the video is Mr. Rick. And Mr. Rick, oh, by the way, that's maybe a thing I should have mentioned. I think I have it somewhere here. It works in most browsers. That doesn't matter, blah, blah, blah.

11. Controlling the Web with MIDI and Flashing Colors

Short description:

Tejas explains how he can control the web by pressing MIDI buttons, playing a looping video, and manipulating data from the clock. He also describes hooking up his channels to create sounds and the resulting flashing colors.

Flashing colors. So if you have some kind of seizure, disease thing, be aware. What happens is I can connect to that clock. And I already am in my browser, well, in the console. But when I press play, I can play a Rick Astley video. So I can control the web just by pressing MIDI buttons.

And how that works, it's actually, well, it's not easy, but it's not that hard as well. It's just a very simple looping video, which has a source, Rick.mp4, whatever, with the ID Rickdance. And what I'm going to do, all of this code is just connecting to the device, making sure you can interact with the device and everything. But basically I can connect here the Rickdance, blah, blah, blah. And I can check what data is coming in.

And in the case of the clock, the clock starts at 250. That's the binary code, whatever. And 250 to stop it. So when I go, you see that I console log there. So what I do is when I press play, you will see that it sends out 250. When I stop, it's going to make it 255. If I stop again, it's going to do the same thing. So very easy. But the interesting thing is what if I am at a disco and I want my own lights. They have pretty good lights, but I can actually bring my own.

So what I did is I hooked up my six channels here, I have six, to HSL again, and I'm going to widen and use that spectrum to create sounds. So if I now... Now I should have sound. Okay, this is just a simple hi-hat. And you can see flashing colors, by the way. I'm making you aware. If I then add another sound in, the colors are changing. You can see the channels. That's a snare.

12. Sequencing and Controlling Web Applications

Short description:

Tejas explains how you can use a keyboard to sequence stuff and change the visual representation of your webpage based on the music you're playing. He also highlights the fun and flexibility of connecting various devices to control web applications, such as changing color opacity or exposure in Photoshop. These capabilities are just the tip of the iceberg, as there are many more APIs available for advanced web development.

But we can also use a keyboard. So what if we hook them all up together and actually start to sequence stuff? Your whole webpage can change visually and represent the music you're actually playing. In this case, live. So let me find something here, like a good Belgian bass line.

Okay, okay, not bad, not bad. I can use that. Let me put on a sequencer. And now we suddenly have way more bass. Ah, there we go. And Rick was dancing with us. Thank you, Rick. Thank you, thank you. But maybe... Thank you for the applause. But maybe also let's give the AV team an applause because they made this happen with me. Thank you.

So, is it useful? But it is a lot of fun though. It is a lot of fun. Because all of this is connected and I can connect with basically one USB-C cable and one audio interface. But imagine that you can actually bring that to the web. For instance, Photoshop on the web is a thing now. What if I can press a note and it will actually change the color opacity of some filter? Or you can change your exposure. Something like that. It's way cheaper than an Elgato Stream Deck for instance. But it's pretty cool. And these are just some of the APIs. There is way, way more. And the web is very advanced and we know some things work in Chrome and don't work otherwise. But that's not important. Normally, and especially when I...

QnA

Embracing the Fun and Weirdness of Web Development

Short description:

Elyon shares the importance of keeping web development fun and the value of open source projects. He encourages publishing libraries and embracing the weirdness of the web. Elyon also discusses the tolerance for failure when building unconventional projects and emphasizes the joy of experimentation.

Well, it very much relates to my work at Astro. I say use the platform. Like, Astro is very much a platform first thing. It's fun and that's what makes our jobs fun. Because this very much relates to my open source story. Like, open source is awesome and it's fun.

But the problem is that it very much, like we hosted a panel about it, it can very much start to feel like a burden. And the thing is, what I always say, publish your libraries. Let other people have fun with it. Do something, like for instance the eelslap one. It's so simple. Well, it made me smile. It made me happy. Our job is supposed to be fun. We're eight hours a day doing our job. Please let's keep it fun as well. It's very important to me. Keep the web weird.

I'm Elyon. Thank you very much. APPLAUSE The first is, do you find you have a different tolerance for failure when building weird or silly projects? Do you ever give up? And if yes, maybe... All the time. What are some of the projects that failed? Basically, one is these. I just showed them to you and you're finding it fun because it's a conference talk. But if you're at home, nobody's going to use this. And that doesn't matter because I had fun building it and if I then publish it and nobody uses it, that wasn't my expectation. So I don't care that much. But not just in terms of publishing, but in terms of building stuff. Do you ever have ideas and just go, well, that didn't work. Ditch it.

Tolerance for Failure and Pushing the Limits

Short description:

Elyon discusses the tolerance for failure in building unconventional projects and the joy of experimentation. He shares insights on finding inspiration and using platform and web APIs to generate ideas. Elyon also addresses the compatibility challenges of implementing unique features like arcs and color variables across different browsers.

Is that tolerance different? Yeah, totally, because you're having way more fun. And even figuring out if it's going to work is a lot of fun for me. Because I was just playing music and actually I didn't care that much about the whole thing being awesome, looking good or working. I just had fun. Have you had any projects that have just straight up failed out? Not really, actually. Most of the times, I find a way of doing it, even if it's very hacky. But yeah, mostly I find my way.

Lovely. Thank you. Next question. How do you get inspired? The person who submitted said, I feel like I lack creativity. Yeah, it's a hard thing, but I think it typically strikes me whenever I'm not necessarily bored at work, but when you're like sitting there, not having fun, then I'm like, oh, you know what should be fun. And then I start developing that idea and that idea becomes another idea and that becomes another idea. But getting inspired, I mean, it takes a lot of, I don't know, luck. I noticed in your talk you spoke a lot about using the platform and web APIs, even if there isn't great support for it. Is that a tool you use in order to create ideas? It depends.

Because for instance, with Azure, you're not going to publish APIs that nobody uses and that isn't generally well supported. But for fun projects, it doesn't really matter if it doesn't work on my phone. Or maybe it does, but not on that mobile phone. That doesn't matter too much, but in my day-to-day life, yeah, I'm not going to... Well, now I know all of those APIs and I actually use some of them in my work. So I think that's a cool thing. Yeah, and of course you gave the example of the battery in the Cache API, right? I really appreciated that you gave a real-world non-silly example, right? Yeah, yeah, yeah. Alright, so you did kind of address this slightly in your talk, but it is worth asking again. Even if your ideas are weird, how do you even if weird, how do you feel about things like arcs, color variables, when they aren't supported anywhere else? Yeah, well, first of all, your website should be, well, if it's like a production website, it should be accessible and the same experience everywhere, ideally. But in the case of arc, it's a fun thing, right? It's personalization in a fun way and it's just injecting CSS variables. That's not too bad, but the problem is when, of course, that starts to differ very much across different browsers and there isn't a standard, then it becomes very annoying. But luckily in the case of arc, you can just detect as well, like is it arc or is it something else? In that case, I might just do a fallback normally. I never really, well, I did actually once did my personal website with that, but then I removed it again because I wanted all users to have the same experience and I think that's generally the best way before having fun, exploit the fuck out of it. Push it to its limits.

Performing at the Afterparty and Weird Projects

Short description:

Elyon discusses not having a SoundCloud and the goal of having fun while playing music without recording or publishing it. He also shares his idea of building a setup at home to control his workflow and mentions the weird projects he has done, such as the WebMidi and installing Raspberry Pi Zero into a Furby.

Alright, a question from Christina here. Will you perform tonight at the afterparty? Daria, am I? No, I don't know. No, I'm not, but you can ask me for next year. The people want to. I hear it. Very nicely done. Alright, so there's a few similar ones. Could you share your SoundCloud? I actually don't have one. What? What do you put under all your viral tweets? Well... Not your SoundCloud it turns out. No, actually I don't really publish music. I think there is only one person here has heard my music and it's Attila. I don't know where he is. But he has heard some of my music and that's it. I don't really publish it because that's not my goal. My goal is to have fun while playing and that's the thing about the no screen thing. I'm not recording anything really. I'm just there in the moment enjoying it and then afterwards I put it back down and I start doing something else. That also reminds me a little bit of a question in the previous talk around like will you open source this work that you've done? Because there's actually a whole bunch more that goes into that and that isn't our goal. The goal is we're using it for us.

Alright, what is the weirdest thing you have built for fun? Honestly, I think this is. Like the WebMidi one is pretty weird. I wanted actually the thing that I wanted to do is to make sure that my whole setup at home that I can connect it with one cable and then can control my whole workflow like approve PRs by pressing buttons or playing a certain tune. That seems like a lot of fun but I haven't got the time to build it yet fully but I have ideas. Have you seen the TikToker I think who's building like a cutting mat with an overlay on top of it and they're calling it Jarvis and they can talk to it and change the size of the stuff. Really? That sounds cool. Super cool. I once built a thing which was ripping apart a Furby and installing Raspberry Pi Zero into it and then getting it to say obscene things. Yeah. There's a lot of fun stuff out there especially like once you start going into the hardware world like Raspberry Pis and Arduinos and everything.

Astro and Web HID API

Short description:

Astro is generally the best way to build websites. Web HID is a wired API that is easier to use and more supported compared to Web Bluetooth. Support for Web HID in hardware is increasing, but it is not widely supported in all browsers.

You can do a lot. Yeah, absolutely. Alright. We've got time for a couple more questions and we've got more than we can ask. This question, I'm not sure how relevant it is and I feel like you might be biased but is Astro the best way to build anything on the web? It depends on what you're building of course but generally if I build a website I'll go with Astro. Yeah. If I was you too to be honest.

Alright, so this is a question about one of the APIs you spoke about. How is Web HID different from Web Bluetooth? They both wirelessly connect to external devices. No, Web HID is wired. Oh is it? Yeah, it works over USB basically and Web HID as I believe it is just better and generally more supported but Bluetooth is old and unreliable and hard to do whereas Web HID is actually quite easy like as in the APIs. What's the support like for Web HID in terms of hardware? Is it common or do you have to seek it out? No, it depends. It's getting more and more common especially Playstation controllers already have it. Xbox doesn't. It's coming more and more but the problem still is that it's not generally supported in all browsers so why would they support it in all devices?

Alright, last question which I really like actually from Christos here. What is the weirdest native API you've used at work so far? Not for fun home projects. At work I'm not allowed to. No, I'm kidding. I can but yeah I think the battery API is I found out that way but generally I don't use that much weird APIs actually at work since it's a CMS so you kind of have to make sure it works otherwise I'll have complaints. Now it's time to make it weird. Alright, join me in giving Elliot a huge round of applause for the last talk of the day. Thank you so much. Thank you. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
A Look Ahead at Web Development in 2025
JSNation US 2024JSNation US 2024
32 min
A Look Ahead at Web Development in 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Watch video: Fighting Technical Debt With Continuous Refactoring
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.