Does this look different? Whelp, I've graduated from the free tier of TinyLetter.com (limited to 5,000 subscribers) and moved to ButtonDown.email! A big thank you to my Patreons who make this possible!
Participating in open source has been awesome for me. It has made me and the stuff I make better. A common question that I get from folks is how to go about learning an open source codebase and understand other's code.
In my blog post "Open Source Stamina", I make an important observation:
You contribute best to something you use regularly.
So while it can be a lot of fun to just jump into any open source project and help out. Sustainable contributions are best found in projects that you use on a regular basis. You have a better understanding of the use cases of the code which will help you understand the code better.
Some steps
Here's a sequence of events I go through when I'm trying to learn or contribute to an open source project:
Contributing Guidelines
Look at the contributing guidelines first! This can be found in the READEME.md or a CONTRIBUTING.md file in the project. If it doesn't exist, then file an issue and ask the maintainer to either make one or give you an idea of what they expect out of contributions.
Project setup
When you set up the project on your computer, make sure that you first install the dependencies and that the tests pass (if there are any). For JavaScript projects, you can mostly do:
- clone repo
npm installnpm test
If all that works then you're ready to go. The last thing you want to do is clone a repo with failing tests, make your change, and think that your change is the reason the tests are failing! This has happened to me :-(
Follow the code
Next, I try to follow the code in my head starting at the entry point where I'm interested in (like a function call, or a CLI with a certain argument). This can be intimidating for bigger projects, but it's not as bad as you might think.
In my blogpost "What open source project should I contribute to?" I talk a little bit about how to find where the code is for a specific API.
Break things
Reading and running the tests is also useful. Breaking things can also be a helpful way to learn a codebase.
Log and step through
It's a tried and true debugging mechanism: console.log is a great way to learn a codebase. š Even better if you can run it in the browser DevTools that's also great. Read more about NodeJS debugging in Chrome DevTools
One other thing you might try is running the project's code in the context of your application. I talk about this a fair amount in my blog post from a few weeks ago "Spelunking in node_modules š·".
Conclusion
Something else that I've found helpful is to ask someone on the project to walk me through some part of the code. I try to make it worth their time by offering to record our conversation and make it publicly available. This is appealing to maintainers because having material out there for new contributors to watch is very helpful. Here are some examples:
- Why, What, and How of React Fiber with Dan Abramov and Andrew Clark
- React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov
- JavaScript & React Testing with Jest
- Contributing to ReactJS
I hope this is helpful! Good luck!
Learn more about Open Source from me:
- How to Contribute to an Open Source Project on GitHub (on egghead.io, absolutely free!)
- How to Write an Open Source JavaScript Library (on egghead.io, absolutely free!)
- Creating an Open Source JavaScript Library on Github (on Frontend Masters, subscribers only).
- My Talks - I've got several about open source
Things to not miss:
- The Node.js Project Introduces Latest Release Line: Node.js 10.x
- Zeit Day - Some awesome talks I'm looking forward to check out myself!
Some tweets from this last week:
Ok, I'm going to try @code for a solid week without vim mode and see how that goes. Wish me luck. ā 26 Apr 2018 (This is going remarkably well and I didn't even have to abandon vim mode! amVim is awesome!
7 years of open source. github.com/kentcdodds ā 28 Apr 2018
I'm re-recording my advanced react patterns course for @eggheadio and I'm totally using @codesandboxapp to do it š) ā 23 Apr 2018
Take your Render Prop component (like a React.createContext consumer) and make a Higher Order Component with this handy function: gist.github.com/kentcdodds/ab6 ā¦ ā 26 Apr 2018
This week's blog post is "Pure Modules". It's the published version of my newsletter from 2 weeks ago. If you thought it was good, go ahead and give it some claps (šx50) and a retweet:
Special thanks to my sponsor Patreons: Hashnode
P.S. If you like this, make sure to subscribe, follow me on twitter, buy me lunch, support me on patreon, and share this with your friends š
š Hi! Iām Kent C. Dodds. I work at PayPal as a full stack JavaScript engineer. I represent PayPal on the TC39. Iām actively involved in the open source community. Iām an instructor on egghead.io, Frontend Masters, and Workshop.me. Iām also a Google Developer Expert. Iām happily married and the father of four kids. I like my family, code, JavaScript, and React.