    
|
|
|
|
|
In a series of tutorials, I’m going to help you get started with Grunt, an open source JavaScript task runner that will automate some of your web development tasks.
This nifty JavaScript library will notably speed up and improve your web development processes, and also help you sidestep common human errors.
My intention with this Grunt tutorial series is to get you to experience the same productivity and efficiency improvements I’ve gained through this useful, but little-known open source JavaScript tool.
Here’s the outline of this three-part Grunt tutorial series:
Let’s start this tutorial series with some basic information about Grunt and how it can help speed up your web development workflow.
When I started my job as a front-end web developer at CDNify (we’re a content delivery network aimed at web developers, startups, and digital agencies) I had absolutely no idea what Grunt was or how it could significantly improve my development workflow.
Months down the road, and I’m now using Grunt every single day. I can’t imagine my front-end web development workflow without it now.
In short, Grunt is an open source JavaScript project that automates repetitive tasks you often have to do as a web developer.
Grunt can automate tasks like minification, unit testing, and preparing your files and website assets for production use. Grunt does this by wrapping these processes up into tasks.
A few more examples of common Grunt tasks are:
Anything that has the potential to be automated can be done with Grunt.
You can configure Grunt to watch certain files for changes, and then build the results on the fly.
When used in a team environment, Grunt can help every person in that team write code that adheres to the same standards/style guides.
Details such as controlling the indentation of code can now be a strict process, as a whole build will fail if any part throws an error.
For example, when indenting code, you could automatically enforce the use of spaces instead of tabs (or vice versa, depending on your preferences), which will ensure that the whole team has the same configuration. When they push code to the repository, it’s in the expected format.
Used in conjunction with your favorite code-quality tools (for example, JSHint), Grunt will help you catch sloppy code such as missing semicolons, braceless control statements, unused variables, and trailing whitespace. This is excellent for discovering human errors as well as disallowing valid, but badly written, JavaScript.
To get the most out of Grunt, you should first know (or learn about) the following.
In order to use a tool such as Grunt effectively, you will need to have at least a basic understanding of the terminal. You’ll need to be familiar with the command line interface (CLI) for the file system you use.
You should be able to navigate confidently to a folder on your system and run commands within it.
Here are tutorials and resources that will get you started on learning how to use CLIs on your own computer:
However, note that you’ll need to be familiar with the CLI of the SSH client you use to connect to your remote web server if you want to use Grunt on web projects. One popular SSH client for Windows and Linux is PuTTY. (Learn how to use PuTTY by reading its docs).
Don’t be put off; you’ll see that the CLI is very simple once you start using it. It’s also a very powerful tool, and knowing how to use it effectively can speed up your workflow on its own.
Although not technically required in order to use Grunt, Grunt works best in an environment where version control is important.
Using Grunt for a small static website that is likely to be updated infrequently may be considered overkill. Any web development project that’s larger than that should be version-controlled. And large web development projects are where Grunt becomes critical and extremely useful.
Read this list of Git tutorials for beginners or this introductory guide to Git to help you get started with Git, a popular version control system.
I’ll run through the general steps of installing Grunt, which is a process that relies on Node.js (an open source development platform for network applications).
In order to install Grunt, Node.js must first be installed or available in your dev environment (which could your computer) or your web server.
Currently, Node.js version 0.8.0 and up is the supported version.
Download and install Node.js by first going to:
The official Node.js Download Page has various options for you, such as a Windows installer, a Mac OS installer, Linux binaries, and the source code.
If you need help installing Node.js, read the following tutorial:
Installing Node.js allows us to install Grunt using Node.js’s package manager, called npm.
Next, you need to install Grunt and its dependencies. We will install Grunt using Node.js’s npm.
Learn how to install Grunt with npm by reading this tutorial:
Grunt’s Command Line Interface (CLI) allows you to run Grunt in any directory.
We can install Grunt’s CLI with this npm command:
npm install -g grunt-cli
You may need to prefix the command with sudo on OS X, *nix, BSD, etc., or run your command shell as Adminstrator on Windows to install Grunt’s CLI.
Note that installing the CLI doesn’t install the Grunt task runner itself, as each project may wish to use a different version of Grunt. (In this tutorial, we’ll be using Grunt 0.4x.)
Instead, the CLI acts as a bridge between your Gruntfile (more on this in a bit) and the version of Grunt installed locally to your project.
Now that you have Grunt installed, let’s go over the basics of how to use it in a web development project.
To use Grunt in a web development project, we need two files: package.json and a Gruntfile (e.g. Gruntfile.js).
package.json is a JSON file. This file should be located in your project’s root directory.
Project information and settings are specified in package.json, such as the project name, version, author, and if it’s a private project or not.
package.json also contains what are known in the Node.js nomenclature as devDependencies. devDependencies are items you need for your project. In this sense, Grunt will be an item listed under devDependencies, along with the Grunt plugins you want to use for the project (I’ll talk about this later).
Here’s an example template for a package.json file:
{
"name" : "Project Name",
"version" : "version number",
"author" : "Your Name",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
}
By specifying the project’s dependencies in package.json, we can use npm to install them for us automatically simply by running the following command in our project’s directory:
npm install
Running that command will give us an output like this:
npm http GET https://registry.npmjs.org/grunt
npm http 304 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/dateformat/1.0.2-1.2.3
npm http GET https://registry.npmjs.org/colors
npm http GET https://registry.npmjs.org/coffee-script
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/iconv-lite
npm http GET https://registry.npmjs.org/findup-sync
npm http GET https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/js-yaml
npm http GET https://registry.npmjs.org/hooker
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/nopt
npm http GET https://registry.npmjs.org/which
npm http GET https://registry.npmjs.org/rimraf
npm http GET https://registry.npmjs.org/underscore.string
npm http GET https://registry.npmjs.org/eventemitter2
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/dateformat/1.0.2-1.2.3
npm http GET https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz
npm http 304 https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/colors
npm http 304 https://registry.npmjs.org/iconv-lite
npm http 304 https://registry.npmjs.org/findup-sync
npm http 304 https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/js-yaml
npm http 304 https://registry.npmjs.org/hooker
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/which
npm http 304 https://registry.npmjs.org/rimraf
npm http 304 https://registry.npmjs.org/underscore.string
npm http 200 https://registry.npmjs.org/coffee-script
npm http 304 https://registry.npmjs.org/eventemitter2
npm http 200 https://registry.npmjs.org/nopt
npm http 200 https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/abbrev
npm http GET https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/argparse
npm http GET https://registry.npmjs.org/esprima
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/abbrev
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/argparse
npm http 304 https://registry.npmjs.org/esprima
npm http GET https://registry.npmjs.org/underscore
npm http 304 https://registry.npmjs.org/underscore
grunt@0.4.1 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── colors@0.6.0-1
├── hooker@0.2.3
├── async@0.1.22
├── eventemitter2@0.4.12
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── lodash@0.9.2
├── findup-sync@0.1.2 (lodash@1.0.1)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── nopt@1.0.10 (abbrev@1.0.4)
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
└── js-yaml@2.0.5 (esprima@1.0.3, argparse@0.1.15)
The Gruntfile is the main configuration file for the project, and specifies what tasks Grunt should run and what files in the project they affect.
Your project’s Gruntfile can be a JavaScript file (Gruntfile.js) or CoffeeScript file (Gruntfile.coffee).
In this tutorial, we’ll be using JavaScript.
At its most basic form, the Gruntfile should contain the following:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
initConfig is where the dependency options are specified. Each Grunt plugin is configured using a JSON object (with some exceptions).
Some plugins allow more than one configuration to be loaded. For example, there may be a specific set of experimental JavaScript that uses a different library to jQuery, and so that library must be predefined instead of jQuery in the JSHint configuration. (We will look at this in more detail in the third part of this Grunt tutorial series.)
registerTask can be specified more than once. The default task is run when Grunt is executed in the command line, and so this should contain common setup tasks.
At this point, if you run Grunt successfully, it will generate the following output:
Done, without errors.
Now we have a project skeleton which will become useful once we use some plugins.
A key feature of Grunt is the use of Grunt plugins. Grunt plugins are referred to as gruntplugins in the Grunt nomenclature.
gruntplugins are user-contributed modules that will help you automate tasks without having to write your own task scripts.
For example, you can use the grunt-contrib-compress gruntplugin to compress and optimize the file sizes of your project files.
To use the plugin in a project, these are the steps to take:
devDependency object in package.json
loadNpmTasks function in the project’s GruntfileregisterTask function in the project’s Gruntfilenpm install to install Grunt and the pluginHere’s the sample source code for using the grunt-contrib-compress gruntplugin in your project.
{
"name" : "My Sample Project",
"version" : "1.0",
"author" : " Ben Briggs",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0",
"grunt-contrib-compress" : "~0.5.2"
}
}
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.registerTask('default', [compress]);
};
Grunt plugins are actually just npm modules that follow the gruntplugin template. You can find gruntplugins on the npm registry by browsing modules tagged with "gruntplugin" or at the official Grunt Plugins page. There are currently over 300 listed gruntplugins.
In this tutorial, this is what we covered:
In the next tutorial in this Grunt tutorial series, we will go hands-on and apply what we’ve discussed here by creating a simple project using modern front-end development techniques paired with Grunt.
This is the three-part Grunt tutorial series outline:
To ensure that you get notified when the next parts of this tutorial series is published, follow @sixrevisions on Twitter and/or Like the Six Revisions Facebook page.
Ben Briggs is a front-end developer at CDNify, a content delivery network designed for startups and developers. He’s passionate about modular CSS, preprocessors and optimization. Find Ben on Twitter: @ben_eb.
The post Speed Up Your Web Development Workflow with Grunt appeared first on Six Revisions.
]]>
 |
What does it take to craft a great product? For those of us who design and build apps, websites and software, a great product means one that delights its users. But digital product development is a complex beast.
Delivering a successful product requires multidisciplinary teams to efficiently work through varying opinions and conflicting views and, ultimately, to gather behind a common vision with a focused plan. This is a challenging act of team management and collaboration, requiring such audacity that it’s no surprise that the average success rate of a startup bringing a new product or service to market is one out of four.
Maintaining focus on a singular vision during software development projects is not easy, especially for designers. Designers are often required to deprioritize the overall product vision in favor of lower-level work — we’re asked to consider every edge case, rather than optimize for a few essential ones. We end up in the weeds of wireframes and UI specifications, thinking through details such as gestural interactions, affordances and user flows.
What can designers, or any team member for that matter, do to increase the overall quality and success rate of the products we craft and to elevate our team’s batting average? An answer lies in the way artists and composers have worked for centuries to create paintings and music — by focusing on a singular, finite element that unifies the whole: a motif.
In art, music and even design, a motif is a singular, finite element that unifies the whole.
In art, literature and music, the word “motif” is often used to describe a salient, recurring element that has symbolic significance. Across artistic media, a motif is a small atomic unit that inspires everything else. In paintings, the motif could be a color, mood or message to be communicated. In music, a motif could be a set of notes, a melody or a rhythm. The great compositions and symphonies of the 19th and 20th centuries are masterpieces in which every note connected back to the motif.
In 1937, during the Spanish Civil War, Italian and German forces devastated Guernica, a small defenceless Spanish town. The bombing shocked and inspired many artists, including Pablo Picasso, who later painted a mural named after the desecrated village. The motif of Picasso’s work is the tragedy of war, and from a singular anti-war sentiment came a painting you could look at for hours because of its complexity — layers of symbolism, hidden images, bodies, animals and fire, all frozen in form on a massive canvas.
A portion of Pablo Picasso’s painting Guernica. (View the full painting.)
Similarly, Beethoven’s Fifth Symphony is a classic example of the whole stemming from a single unit. The very first four notes of the symphony — three short, one long — are the genetic material from which the other thousands of notes stem. This motif is then transposed and transformed continuously through all four movements of the symphony. You can see this transformation in a visualization of the first movement, and follow how the motif gives the music a sense of unity and inevitability.
A visualization of the first movement of Ludwig van Beethoven’s Fifth Symphony. (Watch the video.)
This concept of inevitability in music is often echoed in discussions of industrial design when we talk about an object or experience feeling “undesigned” — that is, having a level of quality and a perfection that would not benefit from any edits or changes. Jonathan Ive reiterates this in the film Objectified:
“A lot of what we seem to be doing in a product like [the iPhone] is actually getting design out of the way. And I think with that sort of reason — and they’re not just arbitrary shapes — it feels almost inevitable. It feels almost undesigned. It feels almost like, “Well, of course it’s that way. Why would it be any other way?””
This sense of designed inevitability is what Picasso, Beethoven and others achieved in the arts by focusing on motif.
A motif in a digital product is something iconic and often part of the very first interaction a user has, as in the case of Vine. Vine’s motif is “capturing six-second video clips.” That’s the focal point of the product. So, making a looping six-second video clip the very first screen that new users see was a great design decision. The motif of Vine, as with Twitter, is a simple interaction that becomes part of every aspect of the product.
The log-in screen for Vine on the iPhone is a looping video.
Quite similarly, do you remember your very first interaction with the iPhone? The first thing most new users do when picking up the device for the first time is slide to unlock. Swiping horizontally is also the gesture to navigate apps on the home screen; it’s the motif of the iPhone.
Before the iPhone, most consumers had only interacted with touchscreens at kiosks or with stylus-driven devices, and they had been accustomed to tapping and pressing rather than swiping. The decision to make a swipe the first interaction is the cornerstone of the iPhone’s brilliance: It introduces the motif right out of the box.
A poorly designed motif, on the other hand, can be a product’s Achilles heel. If you use LinkedIn, then you’re probably a job seeker, a recruiter or a professional networker. These three user types on LinkedIn all center on a common product motif: the professional profile page. Yet, for years now, LinkedIn’s search-indexed public profiles have been poorly designed. Small startups, including Vizualize.me and ResumUp, have exploited this to their advantage, building products that are differentiated from another’s lack of focus.
Behind every great product ever made was someone who championed the motif, whether consciously or not. This could have been a designer, a developer or perhaps a small team within the larger group.
Designers are best poised to “own” the motif, because design is so intrinsically linked to product vision and direction. However, at the end of the day, what is crucial is not the role, but collaboration and stewardship. Everyone who works on a team can elevate the quality of the product they are helping to build by championing the motif. Below are three key ways to do so.
Think about your product and try to identify the most critical, singular element of the whole? Like LinkedIn’s career profiles, a product motif will span user types and apply to every customer. The motif will be as simple and small as a single screen or interaction. Identify that outstanding element, and build agreement and understanding across the team. When you find yourself in the weeds of wireframes or feature creep, use the motif as a guide to help the whole team regain focus.
Like the iPhone’s slide to unlock, a product’s motif can unify an experience. From first use to navigation to lower-level screens, the motif should be infused throughout the customer’s experience. By making it a part of the on-boarding experience in particular, you’ll help to welcome new users in a natural, unforced way, rather than having to rely on instructional coaching screens or tutorials.
We all understand that iterating through multiple versions and gathering user feedback to refine a product will lead to more relevant, useful experiences. But how do you decide what part of a product to spend the most effort on? The motif will form the basis of your marketing — that quintessential part of the customer experience and the part that people will use and see the most. If you are going to polish any one aspect of a product out of the gate and continually refine it, the motif should be it.
(al)
© Ross Popoff-Walker for Smashing Magazine, 2013.
]]>
Creating a brand is a tough task. There’s a lot of work and research that goes into it, and even more time that’s required. With building a brand, you also have to be very aware of the fine line there is with creating a gimmick or joke, as those don’t tend to have lots of longevity.
There are many ways to approach branding and rebranding: you can focus on the numbers and research; you can focus on customers or bottom lines; but after your approach, you have to make moves. And I believe the best way to build a brand is with design. Let’s break down this line of thinking.
Let’s first correct the misconception that a brand is a logo. I’ve heard this many times before and I cringe at the thought. A brand is typically signified or recognized by their logo. This is usually one of the first things done by a brand or business — they come to designers and get their logo created. It’s a great thing to do, but not the only thing there is to do.
People are visual. In order to create a recognizable brand, you have to tap into that fact. It’s not just about a logo but also about consistencies. It’s your company colors and fonts. It’s your icons, slogans and just the all around look. If you’re employed at a professional company, you don’t wear t-shirts, you wear suits to work. It’s all that type of visual consistency that goes into a brand.
Much like celebrities — they are their own brand and rely heavily on visuals. What do you they wear? What do they look like? Even, what events do they attend? Think of someone like a Ke$ha or Lady Gaga, we’d be extremely surprised if they showed up to an awards ceremony in a beautiful ball gown. That’s because they have a clear visual brand.
Think of companies as well. If you’re shopping at Target, for example, and happen to be wearing a red shirt and tan khakis, you may get stopped and asked about inventory. Why? Because they have a visual brand that goes from a very recognizable logo to the way their employees are dressed.
With design, you have the ability to control what people see and how they see and remember your brand. A logo is great, but an entire identity is much better.
One thing I’ve noticed about job titles as of late is half of them are asking you to do things completely unrelated to them. For example, some receptionists are required to essentially be office managers and customer sales representatives. Some administrative assistants are asked to be sales people and graphic designers. Some web designers are required to be — well, web developers and programmers. The jurisdiction of many titles has started to expand with the needs of the company and what individuals must know to do their job.
When it comes to branding, I believe this is something that’s required. For one, if you’re trying to build a brand and try to hire a bunch of different people for the sake of having a bunch of different titles, you’ll probably end up real broke, real quick. On the other hand, you want to have people who understand brand building and not just how to shoot up a website in a given amount of time.
In my opinion, brands are businesses that put their connection with the customer first. Brands are humanized businesses and should be developed as such. So for example, I may not just have any web designer or developer create my site, but I’m definitely going to have an interaction designer or at least someone who understands those concerns. An interaction designer is someone who strives to create useful and usable products or services. Their understanding comes down to user-centered design and how real users access the web. That person is going to help my brand make sense and be easy to access online.
I’m not just hiring someone who is a market researcher, but I’m going to hire someone who takes the research and uses it to help strengthen my connection with customers and not bottom lines. It’s imperative that brands gather groups of employees that aren’t going to do a job, but are going to help design a way to interact with customers.
If you’re anything like me, you tend to have a new idea to go with each new day. I find it to be a huge gift and curse type of situation, but it is a wonderful thing when you’re able to actually bring forth the idea.
In any industry, if I sit down and begin talking to you merely about an idea I have, you may be interested, but you’re not that enthused. You’ll also end up leaving the whole idea to your own imagination; what it looks like, how it’s packaged, how it’s used even. With design, I have the ability to create examples and prototypes. These examples will more than likely get you more interested because you can actually see them. Whether I used a 2D or 3D interpretation, you have less misconceptions.
Prototypes are helpful if you’re attempting to build a brand and if you are looking for some type of funding. If you take a look at some of the best Kickstarter campaigns, you’ll see what I mean. They usually have prototypes which get people way more interested and invested. They can see it and they can imagine themselves or a friend using it, rather than using their own imagination, which may be wrong.
Not only have these prototypes gotten funding, but they’ve gotten together a small following of individuals who are invested in this brand. Now they’re sharing and talking about what is essentially only an idea. Prototypes invoke the same types of enticement for customers already invested in brands. People do this with mobile phones, shoes, etc.
Controlling your ideas with design is totally possible with prototyping.
You may or may not have heard of what some people call ‘design thinking.’ It’s basically a way of thinking where you approach problem solving creatively. After all, design is a method of problem solving and should be treated as such. Design thinking means our problems aren’t solved with solutions of the past, but with creativity and an interest for the customer and brand. This also means business people, accountants, managers, and the like can all be designers when they use design as a way to solve their problems.
Why would you do this? Because design has lots of power and control. It controls what you feel, visualize and often where you go. Responsible brands use this to create connections and establish themselves with consumers. If a business wants that connection, that business has to have a deep understanding for design, creativity and innovation.
Some of our favorite brands today utilize design thinking and/or have CEO’s that put design first. Think of Steve Jobs or Dieter Rams. A guy like Mark Zuckerberg isn’t flourishing right now because he’s thinking about the bottom line and not interaction. The idea is not to break your business up into different design projects, but to make it all one big problem that’s approached creatively.
I cannot stress how powerful good design is. It’s more powerful than any type of marketing scheme or promotional technique I’ve seen in a while. Brands that are successful today know it and are using design to flourish and practically take over the world. Changing your business to a brand is as simple as learning good design and design thinking.
What are your thoughts about design’s role in creating brands? What brands have you built? Let us know in the comments.
| 8 Downloadable Web Design Courses – 90% off! |  |
|
|
|
|
StrongLoop is making a move to become the premier software supplier for Node.js developers which includes their latest acquisition of the Node.js monitoring capability from NodeFly.
]]>