CSS & JS Auto-Refreshing with Live.js
30I want to share a fantastic little tool that I’ve only recently come across; Live.js, written by Martin Kool.
This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them.
That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time.
A lot of text editors offer HTML previews and such, but they only work for plain .html pages. The great thing about Live.js is that it works on any webpage, including a working WordPress theme.
Live.js for WordPress Plugin
I have put together a (very!) simple plugin for WordPress to make things that little bit easier. You can download it here (Rename the folder to “pbd-livejs” once you unzip it), or view it on Github.
It automatically adds Live.js to your theme, but only when you are logged in and working locally. You should never use this script on a live site, and the plugin ensures you won’t.
It also keeps the script out of your theme code, which is good because it’s purely for development. There is no need for it to be present in the files on your server.
One final note is that although Live.js also supports sensing HTML changes, I have disabled this. With it enabled, your webpage essentially “flashes” as it loads every second or two.
Let me know if you try it out, or if you’ve used Live.js before already!
Enjoy this post? You should follow me on Twitter!
That is awesome. I’m going to have to test this out :)
Let me know how you get on Pippin! It’s such a simple little file, but a really ingenious idea. I tried it once and was instantly hooked.
Thanks for the share Michael! Had heard about this but somehow assumed it was something complex, can’t wait to try it out :)
That’s great to hear Jean, hope you get on well with it!
I was wondering why you didn’t use wp_enqueue_script
it’s because of the automatic versioning and the #css,js
Spot on there Paul!
When you use wp_enqueue_script, you get a URL like this:
script.js?ver=1.1
Even if you leave it blank. Unfortunately, the parameters have to be passed in by adding # to the end of the URL, so it doesn’t work with that style of script tag.
Wow, great script and very usefull plugin. I love the animation when the changes appear. This makes developpig sites 1 step easier.
Thanks for sharing.
I totally agree there. The update is so smooth that it’s actually a pleasure to use, not just useful.
That smoothness is the reason I recommend disabling the HTML refreshing like I’ve done in the plugin. It’s just not worth it.
Nice post. Thank you for taking the time to publish this information very useful! I’m still waiting for some interesting thoughts from your side in your next post thanks!
Hi Michael thanks for the post, definately going to be checking this out this week! Will let you know how I got on..
Thanks
@Michael I will check now :)
thanks for sharing man! I was looking for that ;)
Will surely check that in details for live js. thanks for your useful information.
This seems like a real timesaver! Here’s the funny thing though – to find these little helpers you have to spend time searching the web (it was by chance I found this website) …so I had to spend time to save time?
I need some more information about CSS
thanks infonya….
i’m totaly aggre with u
Reply Thijs van Iersel
Because the very best business on earth, Nike focused on creating finest sports activity shoes or boots regarding atheletes in numerous sports activity locations. Hottest celebrities just like Kobe Bryant, Lebron David along with CHEMICAL Ronaldo furthermore turn coming from Adidas to be able to Nike business, since words regarding Nike character, Nike developers purpose diverse locations and also followers to create shoes or boots regarding Kobe, Lebron and also Michael jordan. Determination since Kobe Bryant, which take into account because the wizard baseball participants inside NBA historical past,
Hi, this is great post. It’s very much useful for me and web designers
Nice post…!
Thanks Michael for sharing this resource. It will speed up development time.
Thanks Michael for the download link. The tools is great.
Great post about this. I’m surprised to see someone so educated in the matter. I am sure my visitors will find that very useful.
Nicely done, sir. I hadn’t expected the Twit-encoding to use real words, even if together they amount to nonsense. A fun toy, in any event.
Thanks for posting …..
about css js auto refreshing with live..
post more..
That’s a creative answer to a dfiifuclt question
This download is amazing. Saved me hours of work! Thanks for sharing
Thanks for sharing this. Sometimes it can be a pain working in WordPress and waiting for all the backend files to load up every time you want to make an edit to a page.
thanks problogdesign
very nice
thank blogprodesin
template is useful
Wao, Its amazing and tremendous. I’m just gonna use it on my blog.