Hilton About Pages
Efficient and consistent processes and methodologies for integrating content into the various Hilton properties’ websites.
Efficient and consistent processes and methodologies for integrating content into the various Hilton properties’ websites.
A
GIT
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:
And my personal favorite:
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.
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.
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.
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!
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.