Do you feel comfortable in a text editor, but not so much in the terminal? Then this might be the series for you! In User-friendly front-end articles, I’ll be outlining ways to streamline the front-end development process in ways that don’t involve terminals, compilers, or endless chains of libraries.
Don’t get me wrong, those things are great. However, we’re not all full-time developers. It can take more time to figure out which libraries to use, how to make them build properly, and so on, than to just download a .zip file or two, extract them, and then just build the darned site ourselves.
So this is for the people who don’t always know what they’re doing. This is for those of us who muddle through the process of building static sites and basic CMS themes on a fairly regular basis.
The tools, apps, add-ons, and processes that I’ll be featuring will be simple things, designed to make your life just that much easier, with little or no learning curve.
Emmet Livestyle
With that out of the way, let’s talk about Emmet Livestyle.
Coming from the guys who gave us Emmet, the plugin that makes writing HTML and CSS take a lot less time, Livestyle is all about making front-end development smoother.
The basic concept is this: You write some HTML. Save the file, refresh the browser. Now, you write some CSS. While you write that CSS, the browser gets updated, live, with your changes.
See something that looks a little off? Open up your browser’s element inspector. Find the troublesome CSS property, and change it in the inspector to see if you can make it work. Oh look, it worked!
You head back to your text editor, and the changes you made in the inspector are already there, waiting to be saved.
So basically, a lot of the saving and refreshing, a lot of extra clicks and key-presses, really, are entirely eliminated from your workflow. Doing this with dual monitors, browser on one, text editor on the other, can make you feel the full effect.
Emmet Livestyle also works with Sass and LESS, by the way; you’ll still need an external compiler to save the changes, but it all works smoothly.
Installation and setup
Step 1: install the app
Currently, Emmet Livestyle is only available on Windows and Mac, because it needs to run as a third-party app, with corresponding plugins in both the browser, and your text editor. Linux support may yet come to us, though.
Download the main app from their site, and install it. Note that if you’re on Windows, LiveStyle may ask for network permissions when it is first run. You want to allow network access for some features to work.
Step 2: install the browser plugin
Currently, the only browser plugin is for Chrome.
The good news is that I have tested it on other Chrome-based browsers, like Vivaldi, and it works just fine. All you need is to be able to install extensions from the Chrome Web Store.
Just search for Emmet Livestyle there, and you’re good to go.
Step 3: install the text editor plugin
The only officially supported text editor is currently Sublime Text. You can install the plugin through the Package Manager add-on, or attempt a manual install.
You don’t have to drop money on Sublime Text, though. There is a beta plugin for Atom.
Step 4: use a local server
Emmet Livestyle has issues with local HTML files opened manually in the browser. If you’ve been doing this for a while, chances are good that you’re using a local HTTP server in any case. If you aren’t, I recommend Fenix (for Windows users).
This tiny app can make little web servers out of any folder on your computer. I’ve personally tested this with Emmet Livestyle, and it worked for me.
Conclusion
It’s a fair bit of setup, but not overly complex. Though the limited platform, browser, and text editor support may be frustrating for some, this project shows great promise.
Having used it myself, I can say it sped up my HTML and CSS work by quite a bit. I’d say it’s worth taking ten minutes to half an hour to get it all running smoothly.
