|
12345 |
- title: First Timers Only
- url: https://medium.com/@kentcdodds/first-timers-only-78281ea47455
- hash_url: 51ba770c8e8142bac33da33354fad29b
-
- <p name="5e84" id="5e84" class="graf graf--p graf-after--figure">I’ve started doing something recently that’s been really rewarding. I’m the maintainer of <a href="https://github.com/formly-js/angular-formly" data-href="https://github.com/formly-js/angular-formly" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">angular-formly</a> a fairly popular library for forms with <a href="https://angularjs.org/" data-href="https://angularjs.org/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">AngularJS</a>. I’ve committed a lot of code and the library has <a href="https://github.com/formly-js/angular-formly/graphs/contributors" data-href="https://github.com/formly-js/angular-formly/graphs/contributors" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">33 contributors</a> right now. For at least five of these contributors, it was their first time contributing to an open source library.</p><p name="6e0f" id="6e0f" class="graf graf--p graf-after--p">I’ve tried really hard to make it easy to contribute to angular-formly. I’ve done all of the common things an open source project maintainer does and some less common things…</p><ul class="postList"><li name="6882" id="6882" class="graf graf--li graf-after--p">Set up the (often ignored) <a href="https://github.com/formly-js/angular-formly/blob/master/CONTRIBUTING.md" data-href="https://github.com/formly-js/angular-formly/blob/master/CONTRIBUTING.md" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">CONTRIBUTING.md</a></li><li name="fb79" id="fb79" class="graf graf--li graf-after--li">Try hard to organize the code and comment where necessary</li><li name="34af" id="34af" class="graf graf--li graf-after--li">Add an <a href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&q=label%3Aup-for-grabs+" data-href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&q=label%3Aup-for-grabs+" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">up-for-grabs</a> label (and angular-formly is now on <a href="http://up-for-grabs.net/#/" data-href="http://up-for-grabs.net/#/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">up-for-grabs.net</a>)</li><li name="aa06" id="aa06" class="graf graf--li graf-after--li">Add a githook (using <a href="http://npm.im/ghooks" data-href="http://npm.im/ghooks" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">ghooks</a>) that runs the tests and checks coding standards with <a href="http://eslint.org/" data-href="http://eslint.org/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">eslint</a> so people don’t have the frustration of going back and forth on the PR.</li><li name="2ebe" id="2ebe" class="graf graf--li graf-after--li">Use <a href="https://docs.npmjs.com/misc/scripts" data-href="https://docs.npmjs.com/misc/scripts" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">npm scripts</a> so people don’t have to understand or globally install any build tools</li></ul><p name="4a03" id="4a03" class="graf graf--p graf-after--li graf--trailing">I’ve even recorded <a href="https://www.youtube.com/watch?v=QOchwBm9W-g&index=5&list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH" data-href="https://www.youtube.com/watch?v=QOchwBm9W-g&index=5&list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">screencasts</a> to demonstrate how to get things setup. But what I didn’t realize was that there was still something missing…</p></div></div></section><section name="7700" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="bed7" id="bed7" class="graf graf--p graf--leading">A few months back, angular-formly got a <a href="https://github.com/formly-js/angular-formly/pull/211" data-href="https://github.com/formly-js/angular-formly/pull/211" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">pull request</a> from <a href="https://github.com/koenweyn" data-href="https://github.com/koenweyn" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Koen Weyn</a> who wanted to fix some IE8 compatibility issues with the project. He submitted a good PR (<a href="https://help.github.com/articles/using-pull-requests/" data-href="https://help.github.com/articles/using-pull-requests/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">pull request</a>), we iterated on it a little bit, and it got merged. He mentioned to me that it was his first ever GitHub pull request. That was a neat experience. It was cool to be a part of someone’s first ever open source code contribution.</p><p name="2e6e" id="2e6e" class="graf graf--p graf-after--p">It wasn’t until a few months later that I had an idea. While developing <a href="https://github.com/formly-js/angular-formly/issues/343" data-href="https://github.com/formly-js/angular-formly/issues/343" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">a new feature</a> doing TDD (<a href="https://wikipedia.org/wiki/Test-driven_development" data-href="https://wikipedia.org/wiki/Test-driven_development" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Test Driven Development</a>) all the way (and loving it), I finished the tests and was about ready to start on the implementation. Then I had a thought: “Why don’t I let someone else work on this? I know exactly what I’d do. I could do some hand-holding and help someone contribute to open source for the first time.”</p><p name="d442" id="d442" class="graf graf--p graf-after--p">Small tangent… I’m a happy father of two. When teaching or playing with my kids, sometimes I have to ask my daughter to give her brother a chance to answer a question. Many people are eager to please and help out. So when I throw out a soft-ball to my son, if I don’t ask my daughter to let her little brother answer, she’ll spout out the answer and he’ll have a harder time learning/feeling the satisfaction of answering. I think that sometimes we adults can behave the same way.</p><p name="e4ff" id="e4ff" class="graf graf--p graf-after--p">So I decided to commit the tests, but skipped (so the build wouldn’t fail) (using `describe.skip` from <a href="http://mochajs.org/" data-href="http://mochajs.org/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Mocha</a>), then I pushed them up and added <a href="https://github.com/formly-js/angular-formly/issues/343#issuecomment-111495740" data-href="https://github.com/formly-js/angular-formly/issues/343#issuecomment-111495740" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">this comment</a> to the issue:</p><figure name="9fec" id="9fec" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 555px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 79.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*wxgfHTwncBrevEKSy-NGKA.png" data-width="793" data-height="629" data-action="zoom" data-action-value="1*wxgfHTwncBrevEKSy-NGKA.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*wxgfHTwncBrevEKSy-NGKA.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*wxgfHTwncBrevEKSy-NGKA.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*wxgfHTwncBrevEKSy-NGKA.png"></noscript></div></div></figure><p name="eabf" id="eabf" class="graf graf--p graf-after--figure">Make it is easy as possible. Say exactly where the code needs to go and recommend a good approach.</p><p name="5b49" id="5b49" data-align="center" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">The hard part of getting into open source for the first time isn’t the implementation of a feature, but figuring out how to actually contribute code.</em></p><p name="9ec5" id="9ec5" class="graf graf--p graf-after--p">So I explain exactly what to do in the issue, and then I blasted it out on <a href="https://twitter.com/kentcdodds/status/609354862074052608" data-href="https://twitter.com/kentcdodds/status/609354862074052608" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Twitter</a>, <a href="https://gitter.im/formly-js/angular-formly" data-href="https://gitter.im/formly-js/angular-formly" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Gitter</a>, and <a href="http://angularbuddies.com/" data-href="http://angularbuddies.com/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Slack</a>:</p><figure name="31ec" id="31ec" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer"><IFRAME width="700" height="250" src="/media/3159ec0b422894ca5ef604a6ab4e7e07?postId=78281ea47455" data-media-id="3159ec0b422894ca5ef604a6ab4e7e07" allowfullscreen frameborder="0"></IFRAME></div></div></figure><p name="2220" id="2220" class="graf graf--p graf-after--figure">It wasn’t long before I had several people reach out to me on all three mediums asking if they could take a swing at it. Finally with <a href="https://github.com/formly-js/angular-formly/pull/351" data-href="https://github.com/formly-js/angular-formly/pull/351" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">this PR</a>, <a href="https://github.com/stevebluck" data-href="https://github.com/stevebluck" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Stephen Bluck</a> took his first step into the open source community.</p><p name="e7ea" id="e7ea" class="graf graf--p graf-after--p graf--trailing">It felt awesome! So I looked for opportunities to do this some more. I’ve had the chance to do this <a href="https://github.com/formly-js/angular-formly/issues/358#issuecomment-115251096" data-href="https://github.com/formly-js/angular-formly/issues/358#issuecomment-115251096" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">three</a> <a href="https://github.com/formly-js/angular-formly/issues/398#issuecomment-125195897" data-href="https://github.com/formly-js/angular-formly/issues/398#issuecomment-125195897" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">more</a> <a href="https://github.com/formly-js/angular-formly/issues/410#issuecomment-127227984" data-href="https://github.com/formly-js/angular-formly/issues/410#issuecomment-127227984" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">times</a> and it’s been rewarding for both me and the contributor each time. The project now has a <a href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&q=label%3Afirst-timers-only+" data-href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&q=label%3Afirst-timers-only+" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">first-timers-only</a> label for this purpose. Shoutouts go to <a href="https://github.com/douglas-mason" data-href="https://github.com/douglas-mason" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Douglas Mason</a>, <a href="https://github.com/DevanB" data-href="https://github.com/DevanB" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Devan Beitel</a>, and <a href="https://github.com/bmacheski" data-href="https://github.com/bmacheski" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Brian Macheski</a> for taking up the challenge. For those of you who haven’t had a chance yet, don’t worry, there’s definitely more to come…</p></div></div></section><section name="6e5c" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="244c" id="244c" class="graf graf--p graf--leading">Now, could I have finished it quicker and moved on my way if I’d just done it myself? Of course. But that’s not what it’s all about as an open source contributor. It’s fun delivering good software that helps other people, but also realize that there are tons of people out there who just don’t know where to get started.</p><p name="902d" id="902d" class="graf graf--p graf-after--p">Some of you may be asking yourself, “what if I (and other lib users) don’t want to wait days for the feature?” From my experience, people are eager to try it out. At least one PR (sometimes several) is submitted, iterated on, and merged within a matter of a few hours.</p><p name="3261" id="3261" class="graf graf--p graf-after--p graf--trailing">I’ve thought back on <a href="https://github.com/playframework/playframework/pull/616" data-href="https://github.com/playframework/playframework/pull/616" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">my first pull request</a>. It was nothing spectacular. It was really small. I learned how to use git and GitHub. It gave me an opportunity to figure out what contributing feels like. That’s a rewarding feeling. As open source project maintainers, we are empowered with the ability to help newcomers feel this for the first time and contribute back. Let’s do it!</p></div></div></section><section name="268f" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="e5fe" id="e5fe" class="graf graf--h3 graf--leading">A small plea</h3><p name="d4de" id="d4de" class="graf graf--p graf-after--h3">If you are an open source project maintainer, give this a shot. Add the label <strong class="markup--strong markup--p-strong">first-timers-only </strong>to your project so people can find it <a href="https://github.com/search?utf8=%E2%9C%93&q=label%3Afirst-timers-only+is%3Aopen&type=Issues&ref=searchresults" data-href="https://github.com/search?utf8=%E2%9C%93&q=label%3Afirst-timers-only+is%3Aopen&type=Issues&ref=searchresults" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">here</a>. You might also consider referencing <a href="http://makeapullrequest.com" data-href="http://makeapullrequest.com" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">makeapullrequest.com</a>. I think that we can be more friendly to newcomers in the open source community. You never know, you may find a new main contributor to the project or even a new life-long friend. Either way, the more people we get into open source the better. And by being open like this, we’re helping “<a href="http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx" data-href="http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Bring Kindness back to Open Source</a>.”</p>
|
