Sometimes finding your place in OSS is totally accidental. This is the story of envinfo: an environment information gathering and debugging tool. It’s how I found my place in open source, and this is where I’m going with it from here.
The best ideas are the simplest; and this notion becomes no more clear than when you have one of those ideas. Well, you really can’t get any more simple than envinfo. It may be a useful tool, but is nothing more than a conglomeration of
--version commands. It didn’t take expert level technical skills to write, and the code is nothing incredible to behold. Yet, it was necessary, and fills a gap in the tech community that somehow we all didn’t see. Here it is:
Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.
Issue reporting on GitHub
A few months ago, I was reading through React Native issues on GitHub, and I noticed often critical debugging information was missing. Come on guys, how hard is that? Type
node --version into your terminal. Well that’s the point - it’s not hard, but it can be tedious. But we are engineers; it’s in our job descriptions to simplify complex things, or shorten tedious tasks. So, I wrote a PR for React Native that does exactly this. I changed the CLI to call those commands all in one spot, and updated the issue template to say run
Environment: OS: macOS High Sierra 10.13 Node: 8.9.4 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.9.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: 3.0 AI-171.4443003 Packages: (wanted => installed) react: ^16.3.0-alpha.1 => 16.3.0-alpha.1 react-native: 0.54.1 => 0.54.1
Easy peasy. But here was the problem. My PR sat waiting for review for several weeks. And let’s be honest - this was not a flashy new feature, or a critical bugfix. Such is life when you work on boring developer experience tools. But, the React Native maintainers are incredibly busy, doing amazing work, so I rethought my plan. More projects could benefit from something like this. I thought perhaps adding this code directly into the react native cli was not the way to go. Creating my own package would streamline PRs like this, and it could give me a lot more control.
Learning from the best: Ionic CLI
Some projects already have an info or diagnostics command: in fact I got the idea from Ionic.
ionic info was the first time I had a really excellent environment debugging experience, and I hoped to recreate that in a generic package. This is how envinfo was born. Its aim is to quickly get development environment information, make it easy to use and simple to integrate with anyone’s tools.
Here it is: envinfo
React, Jest, Styled-Components, oh my.
Once I wrote the package and got it merged in React Native, that’s when everything changed. I realized I was a contributor to React Native, but knew next to nothing about it - and didn’t really have to in order to help. I started filing issues in other projects that I used that were high traffic and I felt could benefit from a streamlined issue reporting process. Soon enough, Create React App, Expo, Solidarity, Styled Components and Jest were all using envinfo in some way, and the maintainers were stoked.
Love it! Please send a PR :)
This is great, want to put the PR in?
I’m not going to lie, I was more than a little excited. These were framework writers that I had always looked up to. They liked my idea, and best of all, they had ideas on how to make it better!
Dan Abramov, a React core contributor and the author of Redux, gave me the idea to look for duplicate packages in the
Gant Laborde (the creator of Solidarity, a project based environment checker) gave me the idea for, and even a PR for, checking Android SDK versions.
While discussing adding envinfo to Jest’s issue template, I had the idea to create project specific presets. This would cut down on the number of commands people will have to type or copy/paste.
Now, for new projects, create a new preset in envinfo, and this is all you might have to do:
$ npx envinfo@latest --preset styled-components System: OS: macOS High Sierra 10.13 CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Binaries: Node: 8.9.4 Yarn: 1.3.2 npm: 5.6.0 Browsers: Chrome: 65.0.3325.146 Firefox: 58.0 Safari: 11.0 npmPackages: styled-components: wanted: ^3.1.6 installed: 3.1.6 babel-plugin-styled-components: wanted: ^1.5.1 installed: 1.5.1
But envinfo can do a lot more than just that. In fact, envinfo can do quite a lot. Try this in a React Native project directory:
$ npx envinfo@latest --all System: OS: macOS High Sierra 10.13 CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Free Memory: 1.13 GB Total Memory: 16.00 GB Shell: /usr/local/bin/bash - 4.4.12 Binaries: Node: 8.9.4 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.9.0 Virtualization: Docker: 17.12.0-ce, build c97c6d6 Parallels: 13.3.0 Virtualbox: 5.2.6r120293 VMware Fusion: 10.1.1 SDKs: iOS: Platforms: iOS 11.0, macOS 10.13, tvOS 11.0, watchOS 4.0 Android: Build Tools: 27.0.3 API Levels: 26 IDEs: Android Studio: 3.0 AI-171.4443003 Atom: 1.23.3 VSCode: 1.21.0 Sublime Text: Build 3143 Xcode: Xcode 9.0 Build version 9A235 Languages: Bash: 4.4.12 Go: 1.9.3 Elixir: 1.6.2 PHP: 7.1.7 Python: 2.7.10 Ruby: 2.3.3p222 Browsers: Chrome: 65.0.3325.146 Chrome Canary: 67.0.3368.0 Firefox: 58.0 Firefox Developer Edition: 57.0 Firefox Nightly: 58.0a1 Safari: 11.0 Safari Technology Preview: 11.1 npmPackages: babel-jest: wanted: 22.4.1 installed: 22.4.1 babel-preset-react-native: wanted: 4.0.0 installed: 4.0.0 jest: wanted: 22.4.2 installed: 22.4.2 react-test-renderer: wanted: ^16.3.0-alpha.1 installed: 16.3.0-alpha.1 react: wanted: ^16.3.0-alpha.1 installed: 16.3.0-alpha.1 react-native: wanted: 0.54.1 installed: 0.54.1 npmGlobalPackages: create-react-native-app: 1.0.0 envinfo: 4.2.1 exp: 49.2.2 install-subset: 3.0.0 lerna: 2.7.1 npm: 5.6.0 npm-check-updates: 2.14.0 react-native-cli: 2.0.1 solidarity: 2.0.2
Wow, that’s a lot of information. Some of it is easy to find. Some of it is tricky to find, especially across platforms. Some of it simply has never been coalesced into this format before. Speaking of formats, you can use yaml, json, or even markdown as an output. Handy.
$ npx envinfo@latest --preset jest --markdown ## System: - OS: macOS High Sierra 10.13 - CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz ## Binaries: - Node: 8.9.4 - Yarn: 1.3.2 - npm: 5.6.0 ## npmPackages: ### jest: - wanted: 22.4.2 - installed: 22.4.2
Your place in Open Source
So what am I saying with this? Don’t feel like you need to write some flashy new framework that does all the things. Don’t feel like you have to know everything about a project to be able to contribute. Start with a simple idea, or a simple problem and solve it. It doesn’t have to be beautiful. It doesn’t have to be impressive or complex, but it has to be useful. Remember that there is no need to implement everything all at once.
envinfo is neither beautiful, nor complex, and I’ve mostly written it while waiting for other projects to build. But, it’s simple, effective and now part of many major projects, has 600,000+ monthly downloads and is catching on fast. If you think of something you want to see in envinfo, file an issue, or send a PR!