Good morning from Düsseldorf! #btconf is about to start.
Subscribe
Public posts from @html5test@front-end.social
- Generator
- Mastodon v4.5.9
- Public lists
-
btconf 2026 speakers
- Fetched
Just arrived in sunny Düsseldorf for #btconf. First thing… I need to find something to eat. Anybody else already in town?
Is this too much stuff for a talk? Just wondering if I maybe overdid it…
Nah. Anyway too late now. I’m off for @btconf
I am bringing two laptops. One for Keynote, one for the demos.
Instead of switching video between the two I am using an Elgato screen capture device that takes the HDMI output of the demo machine and inserts it as live video in the Keynote slides.
Works really well.
My office is in utter chaos.
Tomorrow I am leaving for Düsseldorf for @btconf and I’ve never had so much tech to take with me.
The talk is done. Has been for a week. But this is me practicing the demos and figuring out the tech that I need to bring.
CSS is DOOMed
Tomorrow I will be the special guest on WeAreDevelopers Live 🎙️ where I will talk about my latest project: DOOM but fully rendered using CSS.
Most of my talk preparations follow this pattern:
1. Idea
2. Worry about having enough content
3. Worry more about finishing 20 minutes early
4. Make slides
5. Practice
6. Panic, because it is 20 minute over time
7. Remove about a third of my talk
8. Panic, because I removed all the good jokes...
HTML DOM in Canvas? No. DOOM-ception in Canvas.
Maybe I should be working on my slides for Friday, instead I'm at @smashingconf.com creating a playable DOOM terminal in my cssDOOM project. It is a Canvas with an iframe of cssDOOM. And... it works. You can play DOOM in DOOM.
First talk of the year is done: CSS is DOOMed, which was just a very last minute idea for the @smashingconf Jam Sessions.
10 minutes. No preparations. No slides. Off the cuff. But I had lots of fun playing cssDOOM and showing how it works under the hood.
Arrived in Amsterdam for @smashingconf and booked an apartment for the coming days.
But… I did not expect to step into a Rembrandt or Vermeer painting… 🤩
Is it just me, or has Keynote has become terrible to use lately. Copying text blocks changes the font.... Copy source code... pasting a table?!?!
On a side note, the flame thrower video – and this one with the smoke machine – were one of the funniest things I've ever filmed for a talk. Not part of the final cut, but several times during filming cars drove by, slowing down trying to assess what was happening... 😅
The code for this is open and available at https://github.com/NielsLeenheer/WebDmxController
Want to know more? I have an upcoming talk about this – no promises on a live demo of the flamethrower – at @btconf later this month.
Tickets are still available:
🎟️ https://beyondtellerrand.com/events/dusseldorf-2026
You can also connect MIDI controllers and gamepads which set classes when you push a button. So you can trigger the flamethrower from a button.
Connect a heart rate monitor too. So imagine a CSS animation that controls the speed of the fireballs... timed to your heart beat. Thermal runaway.
CSS Flamethrower 🔥
We definitely need dedicated CSS specification for this. The flamethrower is connected with DMX and WebUSB. All DMX devices including lamps and stage FX devices get a DOM element with an id. You can use CSS to set colours or... throw flames.
Over the last week I've fixed some cssDOOM issues and improved the gameplay to better match the original game. And the best part – because it is just a website, you don't have to download any updates.
Best browser to run this is still latest Firefox, with Safari a good second.
And on Friday there is The Web You Want event at the CMD in Amsterdam. I will be giving a proper talk about how I used CSS to draw a clock on an oscilloscope... No wait, about how I used WebAudio and blew up my oscilloscope. It's a free event, so join us! There may be lasers.
Next week is @smashingconf week. I've never been before and can't wait to be there as an attendee.
On Monday there is the Jam Session, where I will be giving a 10 minute run-through of cssDoom. No slides, just me playing DOOM and showing how I build it.
RE: https://mastodon.social/@btconf/116362469509964678
I am so honoured to be part of #btconf this year. This conference has been such a huge inspiration to me over the years. Been working on this talk for at least a year and expect chaotic energy with lots of weird and wonderful web experiments.
Smoke machine powered by CSS!
Fully based on web platform tech, such as WebUSB for the DMX connection and CSS for controlling everything.
My projects can sometimes get a little bit out of hand. Want to know more? Come see my talk at @btconf
Sometimes I feel like I have too many projects. I move from one to the other and old projects get ignored because I am working on something new and shiny.
But that chaos also helps me be creative and challenge me to improve my skills. But today I'm feeling like a mad professor. In a good way.
The core is just CSS – which acts as a state machine. Inputs set classes and custom properties. The output is just sampled computed styles from the DOM. Animations are defined in CSS. Buttons are setting classes with values or animations. The laser is tracing SVG elements.
I love the web.
This is one of the projects I've been obsessed with for the last year or so and it brings so much together. From heart rate monitors and Joy-Con gyroscopes to lasers and even flamethrowers.
BTW, the music is Dream Life by Ren & The Skinner Brothers – from my favourite album of last year.
Putting the final touches on audio input for the DMX/Laser controller project. It analyses the audio and sets a class every time it detects a beat. That allows animations to start, or lights to change colour or the laser to draw patterns.
Crazy that all of this is build using web technology.
Great! My clock now randomly thinks it is a VCR. And nobody knows how to set the time on a VCR so it just blinks 12:00.
Also it sometimes it forgets to reset after midnight so it goes from 23:59 to 24:00 to 25:00 and on.
And yes. I am using a round display for a square digital clock…
Don’t believe it? This is the actual code that gets rendered, sampled and send to the laser projector.