Learning to code is like learning any other craft, the right tools and workflows can make all the difference.
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?
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
<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
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.
CMD + s to see the effects within milliseconds, and repeat.
Thanks to LiveReload my workflow is faster and more enjoyable than ever.