Browserlink.vim version 2.0

08-02-13

Heads up: Brolink.vim is now referred to as Browserlink.vim

It was late one night, I was bored, and my curiosity got the better of me. Within a few hours, I had it. Enter Brolink.vim

Brolink is my solution to a common problem I see with web development. Regardless of your editor and IDE, I see far too often the workflow of write some code, switch to the browser, refresh, decide if the changes are as desired, and switch back to editing in the event they are not. When dual monitors are thrown into the mix, along with the use of Alt-Tab, the workflow isn't too bad, but it certainly leaves a lot to be desired.

That's where Brolink comes in. I've always been a fan of the Chrome Dev Tools, especially for editing CSS, but it's simply not well suited for working on a project in its entirety. Sure, there are Chrome extensions and tools such as LiveReload that help improve the workflow, but I wanted something more customizable, more integrated with my editor, and with more capabilities.

Brolink works very simply. The plugin checks for when certain file types are saved, and performs the appropriate action. For example, my current hobby project has HTML and JS files that affect the page rendering. When I save those, the whole page needs reloading. But when I edit the CSS, I don't want to change the page state, so I have Brolink simply reload the CSS on change. It just makes sense that way.

It also is useful to me to be able to evaluate Javascript right from my console, using a scratch buffer. My pet Brolink allows to me select code and pass it to the DOM for an eval call.

At the end of the day, my workflow requires no extra steps. Open up Vim, open up the browser, and just code. My changes get updated automatically, with no need for pre-coding session setup.

Brolink has now hit version 2.0, which boosts the performance dramatically, and adds a few new options.

If you're curious, check it out on github for examples, instructions, and information on customizing it to fit your workflow.