George Cave

Prototyping with Hardware and the Web

What if your Arduino could pretend to be a keyboard? Discover a simple, powerful, and slightly dangerous way to control any desktop app from your hardware.

Prototyping with Hardware and the Web
#1about 2 minutes

Connecting hardware prototypes to the browser

An overview of using browser APIs and common techniques to bridge the gap between physical hardware and web-based user interfaces.

#2about 6 minutes

Using Arduino for keyboard emulation to control software

Program an Arduino to act as a Human Interface Device (HID) to send keyboard commands and control any application without custom code.

#3about 3 minutes

Building a physical game controller with keyboard emulation

A live demonstration shows how to create a simple circuit with aluminum foil to play the Chrome Dino game by sending spacebar key presses.

#4about 7 minutes

Bidirectional communication with the Web Serial API

Learn how to use the Web Serial API and Streams API for two-way data transfer between a browser and hardware, demonstrated by building a musical instrument.

#5about 7 minutes

Wireless prototyping with the Web Bluetooth API

A walkthrough of connecting hardware wirelessly using the Web Bluetooth API, covering GATT services, characteristics, and a live audience-controlled demo.

#6about 2 minutes

Recommended hardware and a summary of techniques

A guide to selecting the right Arduino boards for keyboard emulation and Web Bluetooth, along with a summary comparing the different prototyping methods.

#7about 4 minutes

Audience Q&A on hardware and prototyping

The speaker answers audience questions about specific hardware like ESP32 and Raspberry Pi Pico, and the source for the stretchy sensor.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Crypto crime, EU regulation, and working while you sleep
01:15 MIN

Crypto crime, EU regulation, and working while you sleep

Fake or News: Self-Driving Cars on Subscription, Crypto Attacks Rising and Working While You Sleep - Théodore Lefèvre

Exploring bizarre headlines about IoT and robotics
00:38 MIN

Exploring bizarre headlines about IoT and robotics

Fake or News: Coding on a Phone, Emotional Support Toasters, ChatGPT Weddings and more - Anselm Hannemann

Building an accessible accordion with details and summary
05:59 MIN

Building an accessible accordion with details and summary

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
The year 3000, a brief history of Web Development25:30

The year 3000, a brief history of Web Development

Lorenzo Pieri

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

The State Of The Web43:11

The State Of The Web

Jeremy Keith

Design Principles For The Web29:11

Design Principles For The Web

Jeremy Keith

Mastering Keyboard Accessibility27:16

Mastering Keyboard Accessibility

Tanja Ulianova

Possibilities with Web Capabilities27:05

Possibilities with Web Capabilities

Rowdy Rabouw

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
Inside last week’s Dev Digest 198 . 🎂 30 years of JavaScript ⏰ How long is a JavaScript second 💻 Clean code in Angular 🤦‍♂️ AI makes different mistakes than humans 👨‍💻 In-browser and offline AI 🟠 Undocumented Hacker News features 🐋 DeepSeek censored...
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
CH
Chris Heilmann
Links and anchors: ancient HTML and JS magic in your browser
Have you ever wondered why you use an <a> element to add link to an HTML document? Paragraph is <p>, unordered list is <ul>, image is <img> but why <a> instead of <link>? Well, the reason is that the element both defines where to go to, but also an e...
Links and anchors: ancient HTML and JS magic in your browser

From learning to earning

Jobs that call for the skills explored in this talk.