Learning to code is like learning any other craft, the right tools and workflows can make all the difference.
Three weeks ago I became a student at Hack Reactor, a 12-week immersive coding program focused on full-stack Javascript development. Prior to class I had only superficial knowledge/experience with Javascript, mostly in the form of jQuery. Over the past 3 weeks my knowledge has expanded by leaps and bounds every hour of every day.
Over the coming weeks I’ll be sharing some of what I learn, my experience at Hack Reactor and the projects I’m working on. To start here’s a tool I recently picked up to make my learning/coding workflow more efficent.
A Faster Workflow?
In my previous forays into Javascript I’ve always found it a difficult language to write, test and debug. Thankfully there are many tools available these days - JSLint, Chrome Developer Tools and even a standalone browser for developers.
But the act of writing, saving, loading and editing (and repeating) has always seemed repetitive, even unnecessary to me. Chrome’s Dev Tools has some features to help on this front but not to the extent I hoped for.
LiveReload to the Rescue
Earlier this week I mentioned my frustration to Hack Reactor instructor and co-founder Doug Calhoun and he pointed me in the direction of LiveReload.
LiveReload is a tool that watches for changes to files and reloads pages in your browser. It comes in many forms - a Mac App, a Javascript <script> file you can include in your web pages, or as a browser extension.
I went with the latter due to it’s ease of implementation.
No More Reloading
First I installed the LiveReload plug-in for Sublime Text. The plug-in handles the ‘watch’ part - watching for changes to my Javascript, HTML or CSS files.
Next I installed the LiveReload Chrome extension. The extension handles the ‘reload’ side of things.
The combo of the plug-in and extension allows me to edit a file and watch the changes appear instantly in my browser.
A Real Example
On a recent toy problem the benefits of LiveReload become very apparent. I created a simple HTML page containing a few Mocha/Chai tests and a <script> tag to include my .js. I pulled this up in my browser, revealing my current code was failing some of the tests.
Then I opened my .js file in Sublime and started working on my function. With each CMD + s (aka save) the changes were reflected in the HTML test file. All without having to reload the browser page.
Edit code, CMD + s to see the effects within milliseconds, and repeat.
Thanks to LiveReload my workflow is faster and more enjoyable than ever.
Comments