HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

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

Andreas Kling2 HN recommenders · recommended in 2 months, 2022-2024
YouTube
15K views · 4 years ago · tutorial · evergreen

In a long live-coding session, Andreas Kling works on making the Cookie Clicker game playable in the Ladybird browser from SerenityOS. He tracks down bugs in the browser engine and fixes them.

HN loves the Browser hacking series for its clear debugging method of reducing bugs to minimal reproductions, which people say influenced their own testing.

Web developmentSoftware practice, open source & careersCompilers, interpreters & program analysis#ladybird#serenityos#c++#browserengine#livecoding

3 comments from Hacker News

@_gabe_2024 · in “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 suite[0]. This led to a seemingly large suite of tests that enabled him to continue modifying the browser without fear of regressing somewhere. I used this method of testing while I was writing a code highlighter that used TextMate grammars. Since TextMate grammars have a well defined output for some input of code + grammar, I was able to mimic that output in my own code highlighter and then compare it to TextMate’s output for testing purposes. I wrote a bunch of general purpose tests, then ran into a bunch of bugs where I would have mismatched output. As I fixed those bugs, I would add the examples to my test suite. Anyways, my code highlighter was slow, and I wanted to re-architect it to speed it up. I was able to completely change the way it worked with complete confidence. I had broken tests for a while in the middle of the refactor, but eventually I finished the refactor. As I started to fix the b

CitesView on HN
@jonhermansen2023 · in “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 ▶ 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 (while following the specs), 99% of the modern web should work just fine.

RecommendsView on HN
@hopfog2022 · in “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! - ▶ 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.

Strongly recommendsView on HN
Let's prototype a JavaScript JIT compiler!1:21:25

Let's prototype a JavaScript JIT compiler!

Andreas Kling
49K views • 3 years ago
Interactive programming Flappy Bird in ClojureScript6:22

Interactive programming Flappy Bird in ClojureScript

Bruce Hauman
55K views • 12 years ago
Let's port Diablo to SerenityOS!1:19:39

Let's port Diablo to SerenityOS!

Andreas Kling
82K views • 5 years ago
How We Solved the Worst Minigame in Zelda's History24:32

How We Solved the Worst Minigame in Zelda's History

Linkus7
1.1M views • 6 years ago
Servo Architecture: Safety and Performance45:05

Servo Architecture: Safety and Performance

linux conf au 2017 - Hobart, Australia
12K views • 9 years ago
How I Fixed a 10 Year Old Guitar Hero Bug Without the Source Code12:09

How I Fixed a 10 Year Old Guitar Hero Bug Without the Source Code

ExileLord
404K views • 9 years ago
MarI/O - Machine Learning for Video Games5:58

MarI/O - Machine Learning for Video Games

SethBling
11.5M views • 11 years ago
Servo: Building a Parallel Browser43:29

Servo: Building a Parallel Browser

Linux.conf.au 2015 -- Auckland, New Zealand
23K views • 11 years ago
Humans can't read URLs. How can we fix it? - HTTP 20320:21

Humans can't read URLs. How can we fix it? - HTTP 203

Chrome for Developers
59K views • 6 years ago
Debugging The Web (Chrome Dev Summit 2016)31:25

Debugging The Web (Chrome Dev Summit 2016)

Chrome for Developers
144K views • 10 years ago
Progressive Performance (Chrome Dev Summit 2016)35:42

Progressive Performance (Chrome Dev Summit 2016)

Chrome for Developers
34K views • 10 years ago
Bruce Hauman - Developing ClojureScript With Figwheel45:31

Bruce Hauman - Developing ClojureScript With Figwheel

ClojureTV
56K views • 11 years ago
"Stop Writing Dead Programs" by Jack Rusher (Strange Loop 2022)43:04

"Stop Writing Dead Programs" by Jack Rusher (Strange Loop 2022)

Strange Loop Conference
468K views • 4 years ago
Live ClojureScript Game Editor5:27

Live ClojureScript Game Editor

ibdknox
34K views • 14 years ago
Miguel de Icaza: Swift Godot: Fixing the Multi-million dollar mistake  #GodotCon202354:53

Miguel de Icaza: Swift Godot: Fixing the Multi-million dollar mistake #GodotCon2023

Godot Engine
27K views • 3 years ago
Glitch Tokens - Computerphile19:29

Glitch Tokens - Computerphile

Computerphile
353K views • 3 years ago
Google I/O 2011: Chrome Dev Tools Reloaded43:33

Google I/O 2011: Chrome Dev Tools Reloaded

Google for Developers
107K views • 15 years ago
!!Con 2020 - Playing Breakout… inside a PDF!! by Omar Rizwan8:16

!!Con 2020 - Playing Breakout… inside a PDF!! by Omar Rizwan

!!Con
4K views • 6 years ago
CppCon 2017: Louis Brandy “Curiously Recurring C++ Bugs at Facebook”52:01

CppCon 2017: Louis Brandy “Curiously Recurring C++ Bugs at Facebook”

CppCon
158K views • 9 years ago
ClojureScript for Skeptics - Derek Slager41:09

ClojureScript for Skeptics - Derek Slager

ClojureTV
72K views • 10 years ago