A web developer may know better about what sublime text is actually capable of. So, no need to discuss it here. The one thing I kept searching for in Sublime Text or in any similar light weight program was the ability to show the result as soon as you type. But still unable to find it, so the only option left was to use online tools like JsFiddle or JsBin. But what if we are offline? We have to type the code in our HTML or whatever file, save it, switch to browser, refresh the page to get the results. Some people say it's not that hard; maybe they are right. But what if we can skip or should I say AUTOMATE the saving and refreshing part. Sounds good? So quit wasting the time and see the power of Sublime Text.
Alright! Let's Begin.
>> Run Sublime Text.
>> Create a new file and paste this code in it. I found this code over here.
import sublime_plugin>> Save it as a .py (python) file. For example, Autosave.py
class SaveOnModifiedListener(sublime_plugin.EventListener):
def on_modified(self, view):
view.run_command("save")
What it actually do is, it saves the file after every keystroke. So, whatever you type will be saved immediately.
>> Move this newly created file to, user folder in sublime text directory. For example,
C:\Program Files\Sublime Text\Data\Packages\User
Installation directory and folder doesn't matter, it could be anywhere. The main thing is to place this .py file in the user folder.
>> Almost done. Create 3 new files in Sublime Text. One for html, one for CSS and one for JavaScript. You can skip this part, but it will give a fancy look to our editor, and we can place our relevant code to get immediate results.
>> Link your CSS and JavaScript to your html file. You know how :)
>> Now to the last magic trick. In your html file, add this line to the top.
<meta http-equiv="refresh" content="0.5">
>> This will refresh the page after every half (0.5) second. You will barely notice it. So, no need to refresh the page in our browser. If you are working on transition and animations, then change it to 3 seconds or so.
>> In Sublime Text you adjust the number of rows or columns if you like. You will find it under view menu. Here is what you can achieve with this.
.png)
.png)
.png)
.png)
>> Now you have the power of Sublime Text and the Live Preview, well! Almost Live Preview.
DON'T FORGET:
- Remove this line when you are done coding and using the code on your website.
<meta http-equiv="refresh" content="0.5">
- If you don't want to use the autosave.py, simply remove it from that folder or place it in safe place for further use.
PS: There are many other TECHNICAL solutions out there. But this one is easy to implement especially for beginners like me.
0 Comments