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.
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.
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. 😉
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. 😀