Make the Web Weird Again

Rate this content
Bookmark

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.

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.

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.

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.

QnA

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.
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.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
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 WorkshopFree
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
Featured WorkshopFree
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
Featured WorkshopFree
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
Featured 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.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.