Diving into Browser Development: My First Contribution to Ladybird

The Journey Begins... Again

I love hacking away at side projects. Anybody that has visited this site or knows me personally can safely assume I'm working on something in my spare time. I think it's one of the best ways to learn programming and — it's just fun! However, sometimes hacking alone can get pretty isolating. For me anyway. Well, how can you get the best of both worlds? Hack away but with people. I personally think one of the most satisfying ways to do this is to contribute to open source projects.

The Again Bit

What do I mean by the journey begins again? This would suggest I did contribute to open-source at some point in time, which turns out is a true statement.¹ When I started wanting to become a software engineer, I came across all these cool tools that people/companies built and gave out for others to use. I thought, that was so empowering. I wanted to help contribute to the open source tools that I use, and if it make me a better software engineer in the process then awesome!

The Second Beginning

But what about this new beginning? Let me explain. I've always enjoyed systems programming and low-level computer concepts. I thought loads of systems software is written in c++ so why not learn that. As I do when I learn any language, I buy a textbook² and try read about the basics and then do some exercises.

I also like to start a project, as programming is not a spectator sport. You gain the most from doing. But I didn't want to start hacking alone again. So I thought why not find a cool open source project to contribute to as a way to learn? I decided Ladybird, an independent browser built from scratch, might be a good option.

Why Ladybird?

Nailing down the why of doing something usually leads to good results. There are a few facets to the "why" of choosing to work on this project. The most uninteresting part of it is that by day, I'm a full stack software engineer. Well, I suppose by night I also do the same thing, as I constantly hack on this site. Nonetheless, it's clear I work with web technologies a lot.

Being able to peel another layer off the onion and understand how a browser works by contributing to a project trying to build one will undoubtedly make me a better software engineer when it comes to web technologies. I'll get first hand experience revealing exactly how these technologies interact with the browser.

This to me is the obvious, utilitarian answer. The more interesting reason, is simply that I think the project and its history is fucking awesome. Ladybird was originally part³ of SerenityOS, an operating system built from scratch by Andreas Kling whilst aiding his recovery from drug addiction. The fact that its humble beginning's started in a cabin in the woods⁴ with Andreas hacking the thing together over a six month period, makes the story all the much more legendary. I also loved that the project's genesis was driven by an aesthetic component too. I love design and I thought trying to capture the zeitgeist of the nineties through the medium of an OS was a great way to give character to the project.

Now SerenityOS is a large open source project with thousands of contributors and has been in my opinion a success. I truly believe one of the best parts of being a hacker, is living the hacker ethic and the success of this project has been a direct application of principle six⁵. I wanted to get involved and try work on something with the people associated with this area of software.

So given that I'd figured out the why it was time to step off the sidelines and get into it!

How I Made My First Contribution

I'd like to preface this with: I am a complete beginner on how browsers are built and c++. Given these two pretty important facts meant that this was/is an intimidating project for me. But we all start somewhere — I thought I'd take it one step at a time. I cloned the repo, joined the Discord channel and built Ladybird and just started playing around with it.

I watched YouTube videos about browser internals, tracked the GitHub issues and engaged with discussion on the Discord with any questions I had. Everybody on the channel was responsive, nice and helpful. I'd try explore the code, figure out how all the parts interact and day after day it got a little bit clearer.

I'd always been interested with typography, so I was exploring the code related to fonts and I came across a comment:

// https://drafts.csswg.org/css-font-loading/#dom-fontfaceset-add
WebIDL::ExceptionOr<JS::NonnullGCPtr<FontFaceSet>>
FontFaceSet::add(JS::Handle<FontFace> face)
 
  // FIXME: Do the actual spec steps

and I thought why not. One of the great things about the Ladybird code is that it's really clear what is referencing the spec⁶. The next step was to get stuck in! I fired up the spec docs and tried to figure out how to implement those steps in the context of the codebase and after some review it culminated in my first PR.

It was exciting and rewarding to see my change go in. I was happy I was able to make progress quicker than I anticipated. People often say open-source can be addictive⁴ (in a good way!) and I'm keen to keep trying to gain more experience and understanding in this strange new world of browser hacking.

What Next?

Well, more hacking. But I also wanted to make this post as a way to track and document my progress. Maybe I'll make a post after my 50th commit (if I get there) or a feature I implement or a really nasty (but interesting) bug I helped fix. Whatever and whenever that moment is I'll know and I'll feel the need to write about it.

If you are reading this and you don't know if you want to contribute to open source or don't think you can do it, screw that! Find something that nags at your curiosity, get stuck in and after some hard work you'll get there. Or just come join the Ladybird community. Happy hacking :)

A big thanks to Deirdre Murray-Wallace and Sam Atkins for reviewing this post and making it better.