Let’s say you wanna open source a little thing…

Let’s say you’ve written a super handy little bit of JavaScript. Nice! Well done, you. Surely, the world can benefit from this. A handful of people, at least. No need to keep this locked up. You’ve benefitted from open source tremendously in your career. This is the perfect opportunity to give back!

Let’s do this.

You’re going to need to chuck it into a GitHub repo. That’s like table stakes for open source. This is where people can find it, link to it, see the code, and all that. It’s a place you can push changes to if you need to.

You’ll need to pick a license for it. If the point of this is “giving back” you really do need to, otherwise, it’s essentially like you have the exclusive copyright of it. It’s somewhat counter-intuitive, but picking a license opens up usage, rather than tightening it.

You’ll need to put a README in there. As amazingly self-documenting you think your code is, it isn’t. You’ll need some plain-language writing in there to explain what your thing is and does. Usage samples are vital.

You’ll probably wanna chuck some demos in there, too. Maybe a whole `/demos/` directory so the proof can be in the pudding.

While you’ve made some demos, you might as well puts some tests in there. Those go hand-in-hand. Tests give people who might use your thing some peace of mind that it’s going to work and that as an author you care about making sure it does. If you plan to keep your thing updated, tests will ensure you don’t break things as you make changes.

Speaking of people using your thing… just how are they going to do that? You probably can’t just leave a raw function theThing () in `the-thing.js`! This isn’t the 1800’s, they’ll tell you. You didn’t even wrap an IIFE around it?! You should have at least made it a singleton.

People are going to want to const theThing = require("the-thing.js"); that sucker. That’s the CommonJS format, which seems reasonable. But that’s kinda more for Node.js than the browser, so it also seems reasonable to use define() and return a function, otherwise known as AMD. Fortunatly there is UMD, which is like both of those at the same time.

Wait wait wait. ES6 has now firmly arrived and it has its own module format. People are for sure going to want to import { theThing } from './the-thing.js';, which means you’re going to need to export function theThing() { }.

So what should you do here? Heck if I know. I’m sure someone smart will say something in the comments.

Whatever you decide though, you’ll probably separate that “module” concern away from your authored code. Perhaps a build process can help get all that together for you. Perhaps you can offer your thing in all the different module formats, so everybody is happy. What do you use for that build process? Grunt? Gulp? Too old? The hip thing these days is an npm script, which is just some terminal commands put into a `package.json` file.

While your build processing, you might as well have that thing run your tests. You also might as well create an uglified version. Every library has a `the-thing.min.js`, right? You might as well put all that auto generated stuff into a `/dist/` folder. Maybe you’ll even be super hip and not check that into the repo. If you want this thing, you grab the repo and build it yourself!

Still, you do want people to use this thing. Having the public repo isn’t enough, it’s also going to need to go on npm, which is a whole different site and world. Hopefully, you’ve done some naming research early, as you’ll need to name your package and that must be unique. There is a variety of other stuff to know here too, like making sure the repo is clean and you’ve ignored things you don’t want everyone to download with the package.

Wait what about Yarn? Isn’t that the new npm or something? You might want to publish there too. Some folks are hanging onto Bower as well, so you might wanna make your thing work there too.

OK! Done! Better take a quick nap and get ready for the demands to start rolling in on the issues board!

Just kidding everything will be fine.


Let’s say you wanna open source a little thing… is a post from CSS-Tricks

CSS-Tricks

Add a Comment

Your email address will not be published. Required fields are marked *

21