Everyday Learning Tools

I find simple, practical code examples very important for learning new things. Tools like Rx Marbles, Promisees, and MetaJS blow me away. But I can’t move past these examples until I can integrate the concept. Connect it to something else I know and test a hypothesis about how the two components will interact. Often, that means cloning some repos, installing some dependencies, or building a project. That can get messy.

Script sharing tools like Codepen let me include external resources. But I have some problems with this approach:

1. I’m limited by the tool’s runtime (although support for Babel is growing ).
2. I often need a CDN version of the library I want to include .
3. If the CDN version exists, it probably needs to be browserified.

I don’t do this in my own code. I just install the dependency and import it.

That leads me to two exciting projects, replem and tonic that I have started to use daily. These tools let me combine different things directly from npm. I like the tonic approach when I’m surfing the web or someone’s api docs. I started working on a script that might become a bookmarklet or a chrome plugin. Let me know if you’d like to help or have some implementation ideas to make this easy for beginners.

(This example was made to include lodash by default but I’d like to make this dynamic). To try it out, paste the snippet into the console of a site with a code block you want to play with. Select the codeblock (or part of it) and “copy” (Ctrl+C). It should move the block to a new tab wrapped with tonic. You may have to allow popups .

Also, please let me know if you find issues with particular syntax highlighters. I’ve tested it with highlight on a jekyll site, embedded gists, and mdn’s code samples but I know there are many others.