Skip to content
0:00 / 0:00

#ladybird#serenityos#andreaskling

Browser hacking: Let's make "Cookie Clicker" playable in Ladybird!

Andreas Kling

52K subscribers • 8 videos on Hallway

YouTube
  • Recommended by 2 people: 2 on Hacker News.
  • Presented by Andreas Kling, creator of SerenityOS
  • Linked in the descriptionSerenityOS/serenitySerenityOS/ladybird
  • May be out of date. The tools, versions or practices it shows have likely moved on.

Advanced. Deep dive for people who know the field.

14K views4 years ago2 recommendations

Web developmentSystems programmingHow browsers workC++Debugging

Andreas Kling debugs and fixes CSS and JS engine bugs in the Ladybird browser to make Cookie Clicker playable.

SerenityOS is open source on GitHub: github.com/SerenityOS/serenity Ladybird, too: github.com/SerenityOS/ladybird Follow me on Twitter: twitter.com/awesomekling Sponsor me on GitHub: github.com/sponsors/awesomekling Support me on Patreon: patreon.com/serenityos Donate via Paypal: paypal.me/awesomekling Discord: discord.gg/serenityos Merch: store.serenityos.org/ Intro/Outro music by Katalin Kult: youtube.com/watch?v=99jIkpLIgtw SerenityOS is a new operating system that we're building from scratch. serenityos.org

Why it's here

2 people recommend this

What people say. Highly recommended for showing how to isolate, reproduce, and debug complex browser engine bugs.

hopfogon Hacker News • Recommends

On “Early stages of Google Docs support in the Ladybird browser”

I love Andreas Kling's "Browser hacking" series on YouTube where he fixes various issues Ladybird has with specific websites. E.g: Fixing a CSS layout bug found by chessboard.js - link Let's make "Cookie Clicker" playable in Ladybird! - link to this video He's very good at articulating his thought progress and it's always really interesting to see how he reduces the bug down into a minimal reproducible example.

jonhermansenon Hacker News • Recommends

On “We're building a browser when it's supposed to be impossible”

Of course you are correct that supporting Twitter or any service is a moving target, so long as it changes. But that doesn't mean specific bugs can't be captured in a test case. Watch this video of Andreas doing exactly this, albeit for a simpler web app link to this video At one point, he deletes half the HTML file to isolate where in the site the problematic code is. In a way doing a kind of binary search. After a few iterations of this, he comes up with a very small case that exhibits the problem he's trying to solve. It's clear he knows his way around the codebase and where to make changes, but isolating these test cases is probably as important. And presumably if you fixed enough of these issues (…

_gabe_on Hacker News • Mentions

On “How I Program in 2024”

I can sympathize with the authors love/hate relationship with tests, but I can’t help feeling like it’s because we as developers so often test the completely wrong things. I don’t typically write tests, but they do make sense for a few cases (specifically end to end tests that look for well defined outputs from well defined inputs). I was inspired by Andreas Kling’s method of testing Ladybird, where he would find visual bugs, recreate the bug in a minimum reproducible example, fix the bug, then codify the example into a test and make sure the regression was captured in his test suite0. This led to a seemingly large suite of tests that enabled him to continue modifying the browser without f…