I’ve been working on a project for Stein IAS that’s basically a questionnaire which is accompanied by some lovely SVG animations. It’s one of the best projects I’ve ever worked on and I’m looking forward to showing it off once it’s live.

The questionnaire requires the user to fill out sections in order and they’re unable to progress until the previous section has been complete. I coded all this up but each time I refreshed the page I was having to fill out all the sections in order to debug/check/build the thing.

came up with the idea of having a shortcut key that would open all the panels at once, making both our lives (FE & BE) much easier. He took the idea one step further and we set about adjusting our grunt setup that included a dev.js file which is included in the dev grunt setup, but is omitted when running the deploy task. Jordan has linked all the build tasks to run on server deployment so that it all works seamlessly each time we push to git.

Very simple but a really really cool idea. That way you can safely add any JS into the dev file without the worry of it being deployed to the live site.

The dev.js file could be helpful for the following:

• Cutting down the process, e.g. filling out a form
• Console.log()’s / Alerts
• Speeding up animations etc to work faster
• Passing/overwriting different variables quickly

The idea reminded me of Harry Robert’s ‘Shame CSS’ stylesheet that became really popular. This is the same but for JS, and it’s not necessarily for hacks.

So yeah it wasn’t my idea but I’ve introduced it into Base as I think it’s a very useful thing to have if needs be.

You can check the gruntfile out here. Have a look how it’s set up so it only works on the default grunt task. It is omitted from the deployment. One thing to consider is the order in which the JS runs, obviously think about anything that runs before/after the dev.js as you could potentially have an adverse/unhelpful effect.

Special thanks to Jordan for the idea!

• Article
• JS/jQuery
• Learning
• Web Design