Adventures in Website Design && Development – 4/4/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

As I promised last installment, we are getting back down to work. Though as fun as the push buttons were, they are unproductive and do not get you paid.

In this installment, our primary focus will be on automating your workflow primarily through use of Node.js and Grunt. However, we will also look at an “obscure” JavaScript library based on failed Microsoft products as a quick breather.

Release It!

Ever wish there was an easier way to publish a new release of your JavaScript library than having to update the version number, push to GitHub, tag it, make a zip archive download, then possibly have to go upload it to npm? Ever wonder what it would be like to publish a release in a matter of seconds using simple yes or no questions? Actually, you can! After installing Release It!, also available as a standalone Grunt plugin, proves releases do not have to be so tedious, especially if releases come early and often (as they should πŸ˜‰ ). After you specify a few details (GitHub credentials, repository details, stuff like that), that dream of yours can become a reality.

Release It!

With a number of configuration options (“assume default answers to questions”, anyone?) and rather active development, Release It! looks to be a promising tool for many developers. While I have not (yet) written a JavaScript library on which I could test Release It!, once I have one I will try this tool out for releasing. Just the thought of simple yes or no questions is quite intriguing. I wonder if such a tool exists for uploading to PyPI… πŸ˜›


Many beginning and small website designers and developers lack a key component for efficient development: previewing the site on multiple screen sizes. With the increase in mobile device usage continuing to skyrocket (the majority of this section was typed on a mobile device, for example), responsive and mobile website design has become more important than ever. However, not everyone has access to mobile devices with a variety of small screen sizes, or do they have access to huge 28″ 1600×1200 desktop monitors. I must be blessed to have access to a some different-sized screens and monitors (my laptop is a 15″ 1366×768, my Android device has an 1196×720 resolution, the shared desktop is 1080p, dad has a 4th generation iPod touch, so that runs at 480×360, and he also has an Android tablet with an unknown resolution), but there are always the select few I cannot test, such as newer and different Windows Phone and RT, Android, and iDevices. Thankfully, pageres helps fill that gap. After installing this Node.js tool and considering it magically take screenshots of your webpage at various screen sizes.


Example command and output (taken from GitHub project)


Example output (taken from GitHub project)

I ran CRTC and LANDSLIDES through pageres, and was overall quite surprised by the results. My media queries on LANDSLIDES were not working well on smaller screens, and I kept getting images of the GitHub Pages 404 page on account pageres normalizes the entered URL. Images are saved in PNG format in the working directory. Despite the example in the Readme, you can run it from the command line. Also, if you do not give any screen sizes, it will use the top 10 most popular screen sizes, as according to W3Counter. Needless to say, pageres has earned a permanent spot in my development toolkit.


I have been using Brackets-Node.js for about two weeks now and despite its early development status, it works very well. Once installed, a new Node.js menu item is added containing access to common commands (such as installing new devDependencies) and for running your Grunt tasks. Do not expect to perform any action that requires input, however. The console window displaying the output has no way to accept input. There are other shortcomings, but remember, it is still early in development. Things will improve over time with each version release. πŸ˜‰


Anyone remember Clippy, that personal assistant from the early years of Microsoft Office? What about Merlin the Magician or Rover from the Windows XP search function (which at one point was a security vulnerability issue)? All these are failed Microsoft technologies, much like the often-hyped but finally scrapped brand new WinFS file system that was supposed to ship with Windows Vista. Apparently the folks at Smore did. There must have been so much nostalgia for these animations and obscure JavaScript libraries that they combined the two as a “weekend project” to create Clippy.JS. Containing multiple original-looking animations and GIF-style design, all the aforementioned characters in addition to Links the Cat, and an API to manually trigger animations and even switch between characters. Clippy.JS may not be a useful library per se, but it sure makes for a quick entertainment break among all these work tools. πŸ˜›


One thing you should strive to do is keep your devDependencies up-to-date unless you have some good reason not too (examples would be how it might introduce changes your code base is not prepared for or it contains incompatibilities on a platform). For all other dependencies, there is grunt-dev-update. After some simple configuration, running grunt devUpdate will execute the task to update your devDependencies (which, by the way, is not the same as standard dependencies πŸ˜‰ ). I have used this for around a month now, and have only had issues with the some of the latest versions. I cannot say much more about this task, so I will awkwardly move on to the next item on the list. πŸ˜›


github-changes describes itself as a tool to

Generate a changelog based on merged pull requests or commit messages

I tested this particular tool on my LDR Importer project and the LUN Minifig Wizard and was quite pleased with the results. If you provide the -f parameter and a file name, the change log is saved to a nicely formatted Markdown file, perfect for dropping directly into the repository. There are many configuration options that should satisfy your fear of default options, and there are more options and updates in the works from what I gathered by looking at the branches and open issues. You may also be able to set it up as a Grunt task in the current form, but considering the active work on the 10-split-CLI-from-application-logic-so-this-can-be-used-programmatically branch, I have a feeling that is not yet possible. πŸ˜› Either way, github-changes is a useful tool for generating detailed change logs for your projects. Now if only there was a tool to generate more user-friendly change logs. πŸ˜›

There are plenty more tasks and tools I could write about, but these are the ones I choose for this installment. Hopefully your development workflow has become faster and more efficient now. πŸ™‚

Next installment of Adventures in Website Design && Development: producing neat, clean, and pretty code. πŸ˜€


2 thoughts on “Adventures in Website Design && Development – 4/4/14

Comments are closed.