Browser syncing – CSS injection

“…so I just save my code here, and the browser auto-magically displays my new changes…without me refreshing the page……no you’re gonna have to run that by me again…”

So recently I stumbled upon a blog post and got quite excited reading about the witchcraft you can achieve playing with Socket.IO, and in particular with a plugin utilising said witchcraft called Browser-Sync.

I’m running it as a Grunt plugin and it works a treat. For me, it’s very handy when running the same page in several different browsers, especially content that might take a while to drill down to after a normal page refresh (such as modal popups, async journeys etc.)

I just save my scss file, compass compiles my css, browser-sync looks at all the browsers open and injects the new code. Boom!

“What about the IE browsers I’m running on a vm?” I hear you say. No problem, it’ll do those too. I use virtualbox to run my IE8 machine and it works perfectly.

As well as css, it can also live-inject jpg & png files AND it will also watch for changes on js, html and php type files, but those will require a standard browser refresh – which browser-sync does for you.

In short, I think it’s a really useful tool and it has stayed in my dev env.

I must admit though, every now and again I did find myself refreshing the browser manually without even knowing I’d done it due to the habitual ‘ctl + s, alt tab, f5’ procedure we all have tattooed to our inner skull!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s