Skip to main content Accessibility Feedback

How open source has helped me write better code

Three months ago, I released Kraken (yea, that just happened), a modular, open source boilerplate for front-end web developers.

It’s been exciting to see Kraken used as the starting point for other people’s projects. It’s been forked into a Ruby gem, with a Sass fork in the works as well.

But managing an open source project has also helped me write better code.

Writing code for other people #

Writing code that other people are going to use forces you to be more thoughtful.

I spend more time considering how a CSS class could be used (or reused) throughout the markup. I don’t use IDs for anything any more. I abstract as much as I can. I’ve gotten much better at writing modular, reusable OOCSS.

I document my code obsessively. I’m never left wondering, “Why is this class in my CSS again?” It’s right there, as a comment in the stylesheet. This has spilled over into my personal projects, too. It’s a great habit to develop.

(If you’re worried about the bloat this adds to the code, it gets stripped out in the minified production version.)

Thanks to open source, I launch projects faster. I used to waste time copying and pasting code from old projects into new ones, and then removing what I didn’t need. Now I just fork the latest Kraken repo and get on with it. I’ve built up a wonderful library of flexible, reusable code.

Open source has made me a better communicator. When you’ve been doing something for a while, you can forget that what’s obvious to you isn’t always obvious to others.

Kraken uses uses 100% relative sizing. There’s not a single px to be found in the stylesheet. It’s all ems and percentages. I thought, “How great! You just change the size of the body element and the whole site adjusts itself.”

And then someone asked me how you figure out em values from pixels. (I wrote a tutorial on that, if you’re interested.)

Get Involved in Open Source #

Getting involved is easy. Add some documentation to a bit of code you use often and add it to GitHub. It doesn’t have to be anything big.

FluidVidsJS is just 38 lines of code. Foldy (which got forked into the grid for Kraken) is only a 6-column grid. You can even remix someone else’s work. My first GitHub repo was a modified version of Foldy.

Open source will make you a better developer.

🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips