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?!?!
Niels Leenheer
CTO of Salonhub. Creator of https://html5test.com, writes at https://nielsleenheer.com, team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Posts
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Next week is @smashingconf@mastodon.social 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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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@mastodon.social
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
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…
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Take a Joy-Con and connect it with WebHID, draw a picture in the air and capture it with the sensors. Create an SVG path and insert in the DOM. Apply CSS styling. Sample the DOM and use WebUSB to convert to ILDA and send it to a laser projector.
I created the worlds most complicated laserpointer…
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Spending my Saturday morning soldering components for my BadClock because even if I look at it sideways, it falls apart. And not intentionally.
I am bit scared to plug it in because Raspberry Pi’s are not cheap. And I already have a proper smoke machine.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
I’m speaking at 3 conferences this quarter with 3 new talks:
17 April
How I blew up my 1980s Oscilliscope with WebAudio at https://the-web-you-want.org
27 - 28 April
The Web Beyond the Edges of the Browser Window at https://beyondtellerrand.com
11 - 12 June
CSS Doom Lasers at https://cssday.nl
Get your tickets now!
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Beyond Tellerrand @btconf@mastodon.social is happening again on April 27 and 28th in Dusseldorf. And a little birdie told me a certain someone is going to show off their BadClock™ and much more. Lasers. Yes. Lasers and smoke and more...
Tickets:
🎟️ https://beyondtellerrand.com/events/dusseldorf-2026/tickets
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
I'm so in love with this new menu for my BadClock™. I feel like I am doing character animation instead of coding. The clock is starting to get a personality.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
This is my paper clock. It prints a line with the current time every minute. Or sometimes it draws an analog clock. And if it doesn’t feel like it, it just draws a random doodle.
It also has an unhinged mode where every minute is… well never helpful.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
I got a question about my BadClock™: don't the gears destroy themselves when you move the hands independently. Of course not. It is a digital clock. It doesn't have gears. Don't be silly.
There is a risk of winding it up too much though. It locks up the whole gear mechanism and all that energy...
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Does your clock really need a full Box2D physics model. No. But is does make it a lot more fun.
This is my BadClock™.
It runs late when you don’t wind it. Hands fall off when you’re too rough and it forgets how DST works. So it may adjust your clock in the wrong direction. Or not. Who knows.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
Hey! Looks like I’m on Hackernews and the comments are… actually pretty on point and positive. Wow! 🤩
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CSS is DOOMed!
I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.
Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
CTO of Salonhub. Creator of https:// html5test.com , writes at https:// nielsleenheer.com , team @FronteersConf, Google Developers Expert, Invite me to speak at your event.
So happy to be back on the CSS Day stage this June with so many other fantastic speakers. And I can't wait to show what I've been working on the last year or two. Yes it will be about Doom, Lasers and CSS, and so much more. ✨
I do feel I've hit peak talk title with "CSS Doom Laser".