Let's Get Active: Speed Up Your Drupal Themeing ProcessLet's Get Active: Speed Up Your Drupal Themeing Process

Categories:

I remember back when Macromedia Dreamweaver made active web development accessible to the average designer. It allowed for live, active updating of site code in a preview window that eliminated the time-eating process of manually refreshing the browser after making code changes. Fortunately, we now have the power to do the same thing and use our own preferred coding tools. Today, I'm going to go over some options for front end developers that will allow you to see styling changes in the browser without manually refreshing. Some of these tools provide different functionality and benefits, try them out and see what saves you the most time.

 

Live.js

This is the simplest of the solutions to implement. To install you can either grab the module or you can download the script directly and add it into your .info file. What this script does is run continuously and asks the server if any changes have been made to the page's CSS files. When it detects this it reloads the page automatically so you don't have to refresh your browser. I've read that Live.js does not work with PHP files, but for some reason my installation script reloaded my browser every 3 seconds or so automatically, which means it showed PHP code updates as well. I'm not sure if this will be the case in all environments, but if it does that means you can edit template files as you need. Be weary making PHP updates, if your code has an error and you save the document the browser will throw an error page. Live.js doesn't operate on error pages.

Note that it will not flush caches or do anything on the administrative end, so adding new templates or changing the .info files will need to be manually flushed. Outside of that this module has the potential to save a lot of time, particularly in dual-monitor setups where you have your favorite code or text editor on one screen and the browser on the other.

 

Refresh

Refresh is a standalone module for Drupal that enables automatic page refreshing at a standard interval. This is set at the per-node level, meaning you configure a set amount of seconds on the node edit form, and then the page will refresh on that node only. This has the benefit of allowing you to make CSS edits on a live site without a site-wide refreshing script. Only you have to have access to the active page. There are permissions available for this module as well, meaning you can safely install it on active site with multiple users without having to worry about potential issues. Otherwise, it's functionality is a simple page refresh, meaning you are free to update PHP and CSS files to see updates.

 

Reloadr

Reloadr works similarly to the other 2 scripts above, only it uses a php file to monitor the local filesystem for file changes. Once it sees a change in the modification date on any file, it preforms a browser refresh. Note that it does require some PHP knowledge to configure (setting the file system paths and the frequency of checks), but its another good lightweight solution for development.

 

Brackets

A standalone code editor, Brackets is an Open Source program that has the benefit of showing updates without even having to save your working file first. It's a lightweight solution for a standalone program, so you don't get the sheer number of options of something like Notepad++, but the main benefit is for front-end development at any rate. It does include some useful widgets like popup color wheels, code hinting, and tag matching. This tool is promising because of the frequency of updates for various platforms (currently about once every 3 weeks), they currently support Windows, OSX, Linux32 and Linux64.

 

Live Reload

Live Reload is a fully-integrated development solution that uses a standalone program and browser extension/plugin/addon to "watch" a filesystem for file saves and then updates the browser live. The drawback to this is clearly the standalone application that you must run on your development machine. The mac version is also $10 (windows alpha version is currently free), so that may be a point of contention for some developers. For those who are not keen on using a browser extension, you can install the LiveReload module and get full functionality in all browsers (including mobile ones). For those using SASS and LESS, Live Reload will compile your files for output automatically.

 

Emmett LiveStyle

LiveStyle is a tool that is still in beta, but promises to deliver a "best of both worlds" approach to front end development. The developer notes that the issue with many third party styling clients is that it's easy to get out of sync after a site goes into production. LiveStyle does not require local versions of working files. It requires a javascript snippet on site and a browser extension for Chrome to operate. Like Live Reload, this provides a truly live update without requiring file saves to show updates. There are some other situations where this tool may be more beneficial, you can read about its implementation on the developer's website. Be weary however, when this project comes out of beta it will cost money.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.