Hilton About Pages

About the Project

It’s 2015. You have a client that tells you that they would like you to build landing pages for their site using the following restrictions:

• Must function within the standard site wrapper
• Must support Internet Explorer 8
• The site wrapper loads jQuery 1.4
• Must follow WCAG 2.0 A accessibility standards
• No server-side coding available
• Must not contain forms

And my personal favorite:

• All developed code will be reside in a single text block in the client’s CMS, meaning that all JavaScript, CSS, and HTML needs to be referenced from the middle of the page. So… no CSS references in the header and all JavaScript will run prior to jQuery loading.

From a developer’s perspective, it sounds super sexy, no? Yeah, I didn’t think so, either. At this point you are probably asking, “Why is she highlighting this project?” Read on.

The designers like to design long pages full of various functionality. The project managers like to compress schedules so that development times are short. My challenge was to create a project that, with all the restrictions above, could still have multiple developers working on it simultaneously, while having the final deliverable packaged as one file, without turning into a source code management conflict nightmare. I also wanted to institute a process that we could use over and over as we built more pages for more brand properties.

The highlight of this project was in its efficiency.

The Solution

Grunt task manager to the rescue!

I broke down the page based on its subsections and created separate HTML, LESS, and JavaScript files for each module, as well as a global CSS file for shared elements. I created a “controller” HTML file that defined which HTML, CSS, and JavaScript elements to include in the compiled HTML file for development, and which to add/remove for release. I created two Grunt processes, default and release, for the two different builds.

Development Processes

For the purposes of development, I had a Grunt process watch as the individual sections’ LESS and HTML files changed and recompiled the browser-viewable page. For this build, the client’s site header and footer were included to ensure that there were no conflicts with the styling. I did not minify anything at this stage so that line numbers would remain relevant for debugging.

Distribution Processes

Once everything was ready for release the HTML compiler stripped out the site header and footer, and replaced the individual CSS and JavaScript files with single minified CSS and JavaScript file references.

It then created an empty distribution directory in the project (emptying it of its contents if the folder already existed) and copied only the relevant files into that directory.

All done with just the “grunt release” command. Magic!

Summary

What we ended up with was a highly efficient system that allowed multiple developers to work on the project simultaneously, and a release process that ensured we would all release files the same way to the client’s developers regardless of who released the files.