Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 26 2014


February 24 2014

Sponsored post

February 17 2014


February 10 2014


February 03 2014


Designing Digital Strategies, Part 1: Cartography

As digital products and services come to comprise an increasingly important part of our everyday life, the division between the digital and the physical begins to blur. We can, for instance, see a washing machine on TV, read reviews of it online, purchase it on our phone, and have it installed by our local shop—all without leaving our computer. The sum total of these processes functions as a single, continuous experience. Designers can more prudently frame the experiences they create by incorporating ecosystem thinking into their process.

In 2011, the newly appointed CEO of Nokia, Stephen Elop, wrote:

The battle of devices has now become a war of ecosystems, where ecosystems include not only the hardware and software of the device, but developers, applications, ecommerce, advertising, search… location-based services, unified communications and many other things. Our competitors aren’t taking our market-share with devices; they are taking our market share with an entire ecosystem. This means we’re going to have to decide how we either build, catalyse or join an ecosystem.”

An ecosystem is the term given to a set of products, services, and people that function together in a symbiotic way. As an interaction designer working at a consultancy, I often meet clients who want to integrate all sorts of functionality into their digital solutions—email, Facebook, SMS—without really considering if that inclusion will actually add value for their users. Rather than unilaterally connecting all possible digital channels and launching a “family” of related products and services, designers need to determine ways in which ecosystems can act together in service of their client’s business goals.

Nike’s “plus” products work together to create something greater than the sum of their parts.

Designers do this through the creation of a digital strategy. Despite the fact that numerous voices suggest their creation, however, the actual details of creating one remains elusive. That’s where this two-part series comes in. In the first part we’ll review the elements that comprise an ecosystem as well as how to create an ecosystem map (a useful tool for facilitating a shared vision) by way of digital cartography. In the second part, we’ll see how ecosystem maps can be used to to develop digital strategies, helping companies fit together the various pieces that shape their digital puzzle.

The basics

The word ecosystem comes from biology wherein it describes a network of interacting organisms and their physical environment. From a technological standpoint, though, an ecosystem is better described as a network of people interacting with products or services. As Dave Jones defines them, ecosystems include:

  • users,
  • the practices they perform,
  • the information they use and share,
  • the people with whom they interact,
  • the services available to them,
  • the devices they use, and
  • the channels through which they communicate.

Ecosystem thinking, likewise, is the inquiry method used to analyze and understand ecosystems, both the problems they pose as well as the business opportunities they might present. Instead of focusing on a single product or service, however, designers who practice ecosystem thinking evaluate user behavior at the intersection of various inflection points. They ask:

  • Who are our users?
  • What practices do they perform?
  • What information do they need? (and where do they seek it?)
  • With whom do they interact?
  • What services are available to them?
  • What devices do they use?
  • Through what channels do they communicate?

Answers to these questions provide designers with all of the raw data they need in order to better understand the ecosystem in which they’re working. Turning that data into actionable information is the job of ecosystem maps.

An ecosystem map is simply a graphical representation of the relationships examined via ecosystem thinking. Ecosystem maps are closely related to other diagrams with which designers are likely familiar, including service blueprints, experience maps, and concept maps. They differ from these diagrams, however, in that ecosystem maps are optimized to aid in the creation of digital strategies.

A concept model that explains concept models (© Dan Brown, 2010)

Service designers Polaine, Løvlie, and Reason have arguably presented one of the best examples of an ecosystem map, however, without sufficient contextual knowledge it is difficult to understand the relationships their map presents between the “who,” “what,” “when,” “where,” “why,” and “how.”

That’s where digital cartography comes in.

Mapping an ecosystem

Digital cartography is an abductive, sensemaking process that, practically speaking, only requires time and permission to iterate. It boils down to five major activities:

  1. Understanding users and their goals;
  2. Mapping the activities (both known activities and “best guesses” as to the unknown activities) that users conduct in service of their goals;
  3. Mapping the information, services, devices and channels that users employ in service of their activities;
  4. Mapping the moments in which users perform their activities; and
  5. Narrowing down the discrete set of moments (or “experiences”) upon which the design team might focus.

The most useful outcome of digital cartography is not the map itself but the insights that the mapping process generates into the idiosyncrasies of users: their needs, their behaviours, and their perspectives. No map can really encompass the full complexity of an entire ecosystem; an illustration will always be a simplification of reality. However, the creation of simplified visual representations helps us to collaboratively forge paths in our digital world.

Creating a map

Like all user-centered design endeavors, digital cartography begins with research: interviews, observations, questionnaires, analyses of web site statistics, etc. This helps us to determine the goals towards which users are working as well as how users go about accomplishing their goals. Next we draw, or map, everything we know.

Don’t worry about getting everything right immediately. Ecosystem maps are useful both for structuring forthcoming research (finding out what needs to be examined) as well as for communicating the insights of the research that’s already been performed. Use a dry-erase board or a pencil and a piece of paper. It can also be useful to put the people and devices involved in a process, called actors, on individual post-it notes in order to move them around. This helps us to spatially reflect where actors fall in the process (left-to-right, top-to-bottom) as well as the relationships between them.

After spatially arranging the actors, have the team illustrate any/all of the activities undertaken by users as well as the information, services, devices, and channels they use for doing these activities. Next, cycle through the questions comprising ecosystem thinking: When do users perform activities? How do people send out invitations for, say, a birthday party? Who sends the invitations? How do they know who will come to the party?

It is easy to be overwhelmed with unknowns, especially in the beginning. Uncertainties (such as the order of certain events or the kind of channel that’s used for performing a specific activity), should be drawn as a “best guess” and marked with a questionmark for further investigation. Later, this information helps us to make a plan for how we can find out more about our ecosystem. For example, perhaps we could return to our research by conducting interviews with parents about how they usually invite children to their kid’s birthday party.

The final step is to determine the activities that our team will support through design. Not everything that is part of an ecosystem should be integrated into a digital product or service; it’s all about making strategic, informed choices. This helps us to distinguish “what is necessary” from what is “nice to have.” Moreover, it helps us determine which features might give our experience a competitive edge.

An example

Let’s continue using the example of an event-organizing application in order to illustrate how an actual act of digital cartography might unfold.

When organizing an event, people usually begin by discussing how, when, and where the event should take place. One person might take on the responsibility of securing the event space and sending out invites. Invitees might then contact the organizer to RSVP. Next, the organizer might wish to delegate tasks to the people who are attending (such as bringing stuff, preparing food and so on.) After the event, attendees might opt to send thank-you notes or share pictures from the event.

The ecosystem map, shown below, does not include all the activities that take place around an event, but it does include the more salient ones.

An ecosystem map for an event-planning application. I chose a circular presentation to indicate how the success of the app relied on repeated use.

The map also shows how activities are performed through the use of icons: invitations, questions and responses can be submitted through regular mail, e-mail, text message, in person, over the phone, or through Facebook. Timeframes for the various activities appear as green, dotted lines. In this case, I chose to use large timeframes as the timing varies a great deal across different types of events (planning a wedding might take six months, whereas planning a night out at the movies might take hours).

The inner circle of the map shows the activities that the app currently supports; the other circle shows what’s on our minds. Deciding what to do during an event and sharing photos are but two examples of countless activities that users might perform during the course of organizing an event. This division—what users do vs. what we support—is an excellent jumping off point as we formulate our digital strategy.

The map is not the territory

I have found the use of ecosystem maps to be very valuable when working with clients. I encourage readers to draw their own maps and share their experience of applying ecosystem thinking in their design projects.

Understanding ecosystems adds a whole new dimension to designing consistent user experiences across different types of media. So far I have explained what an ecosystem is and how we can draw ecosystem maps. Yet, it is not really about the map, but where it might take us. In the next (final) part of this series, we’ll see how to use ecosystem maps as tools, informing the creation of digital strategies.

The post Designing Digital Strategies, Part 1: Cartography appeared first on UX Booth.


January 27 2014


January 21 2014


Realizing Empathy, Part 1: Art

For as long as I can remember, I’d considered art to be the antithesis of design. But after spending four years studying both the visual and performing arts, I’ve come to recognize how prejudiced this point of view was. I’ve realized that by incorporating art into our lives we can not only develop our own empathy but also rethink the ways in which design can impact the lives of others.

My story begins over a decade ago. From 1999 to 2008 I worked at MAYA Design, taking part in commercial human-centered design projects and research into the future of human-computer interaction. The research, in particular, was fascinating, conducted around the idea that we’d soon be surrounded by trillions of computers of all shapes and sizes, that there had to be a conscious effort to consider how people would deal with such a future.

By my seventh year there, though, I started to feel that something was missing. I didn’t know what, so I asked some of my mentors what I should do. One piece of advice stuck out: Leave behind what you have to explore something you don’t know, something that scares you.

Soon thereafter, a chance encounter with an artist suggested to me that the best way to follow my mentors’ advice was to attend a traditional art school. Her argument went:

  • My undergraduate degree was in computer science;
  • I had zero training in art; and
  • I considered art to be useless bullshit.

As surprising as it was, it seemed to make sense. To be sure, however, I decided to take a couple of night classes at a nearby art institute to validate my logic. I took the classes, and, before I knew it, I was applying for art school.

From 2008 to 2012 I immersed myself in the visual and performing arts programs at both the Rhode Island School of Design and Brown University. Most of my time was spent in the wood/metal shop, the rehearsal room, or the dance studio. What I learned from this experience was that realizing empathy is at the core of the creative process. Moreover, as I reflected on this experience through writing, I began to wonder how we, as designers, can go beyond presenting people with products and services that are “usable, useful, and desirable” and towards empowering them with the choice to become artists of their own lives—exploring who they are, who others are, and how we are all interrelated.

In this three-part series, I’d like to dive more deeply into some of the events that led to my epiphany. Part one (the part you’re currently reading) will explore the direct relationship between making art and realizing empathy. Part two will suggest how, in becoming aware of this relationship, we can develop our own ability to empathize and practice it more deliberately throughout our design practice. Part three will invite readers to share and discuss how we, as a community, might shape the future of design through the lens of empathy.

My prejudice

I’ve met quite a few people who say art is self-indulgent, that it’s a product of “ego.” I was one of them, in fact. I argued that design was good and noble whereas art was not. Why? Because designers practiced empathy. In retrospect, however, this was nothing more than a reflection of my own insecurity and a lack of empathy for artists.

My perspective started to shift during my very first foray into art, in a class called “Drawing From Observation.” There we were asked to draw a nude model. Given my lack of training, what I drew—understandably—looked like crap. Hoping the instructor would teach me how I could do better, I raised my hand and asked the teacher for help. After taking one look at my drawing, though, she told me that the problem was not my technique but that I was not drawing what I was seeing.

Hm? Who the hell was she kidding?! Of course I was drawing what I was seeing! When I protested as to the absurdity of her comment, she simply told me that that was all she was going to tell me. Needless to say, I was frustrated. My drawing looked like crap and, what’s more, my teacher refused to teach me how to draw. What a horrible teacher, I thought. This kept on for several classes. Though I wasn’t going to give up, I was unable to shake the feeling that I had, in fact, missed something.

Then, toward the end of the semester, I had an epiphany: it occurred to me that I’d been trying to fit the form of the nude model into a set of preconceived shapes I had constructed in my head. In other words, I was trying to draw what I thought an “arm” or a “leg” should look like. I was not drawing what I was seeing! More precisely, I wasn’t even seeing the model so much as glancing at him in order to make snap judgements.

This epiphany was just the beginning. Once I realized this, I decided to create a new way of drawing. I let go of my desire to draw familiar shapes and instead made marks of varying darkness all over the canvas. Maybe it was my interest in physics, but I thought: perhaps my perception of “light,” as opposed to shape, will provide a more pure way of seeing.

This felt weird; as if I didn’t know what I was doing. The human figure didn’t show up immediately, but after a while it did:

The first drawing I had ever done that remotely resembled what was actually in front of me.

This isn’t to say that my new way of drawing was the “right” one or that my old one was “wrong;” there are certainly many different ways of drawing. It is to say, though, that when I became aware of my own biases and assumptions, and made a conscious, deliberate effort to choose to see and experience the nude model in a different way, I was then able to create and develop a personally new method of expressing. The method was foreign and strange and, yet, somehow, very natural. It was obvious in hindsight.

To be extra clear, this wasn’t so much a change in method as a change in attitude from which the method arose. When the attitude with which I “saw” the nude model shifted, I began to feel that I was no longer just seeing the “object” of my drawing, but rather that I was embodying his form through the arm I used to draw. That the boundary between myself and the model had blurred. There is a saying in Korean that goes “호흡을 맞추다.” Literally translated, it means to “match each other’s breathing;” figuratively, to “collaborate as one.” That is exactly how the act of drawing started to feel. And it was this ability—to connect with, experience, and see the model in a different way—that fundamentally affected my ability to draw.

Rethinking empathy

If it’s not readily obvious what the connection is between how I came to learn to draw and how we come to realize empathy with people, the following video may help:

When we hear the word empathy, we often make one of several assumptions: that it’s “just” a feeling; that it’s about our relationship to other human beings; or that it’s something that happens to us, passively, like falling in love at first sight. All of these are incomplete.

First, it’s important to distinguish between the words “empathy” and “empathizing.” I use the word empathy not to refer to a feeling, but to the relational potential we have to empathize. (I say “relational” because this potential can vary from relationship to relationship, from moment to moment.) I use the word empathizing, on the other hand, to refer to a period of time in which we feel as though we are embodying or understanding the context of an “other.” (This moment or duration is usually marked by a sense of connection/oneness.)

Empathy as the potential we have to go from point A to B.
Empathizing as a subjective experience made possible by empathy.

Second, empathizing is not “just” feeling. We live in a time where we’re told that there is a clear separation between emotion and reason, body and mind, thought and feeling. While separating these can be useful from a conceptual standpoint (i.e. when treating trauma patients to rewire how they feel in association to how they think), the latest advancements in the embodied mind theory, by the likes of Francisco Varela, Humberto Maturana, Antonio Damasio, and George Lakoff, suggest that these kinds of distinctions are nothing more than false dichotomies. My research suggests that it is far more accurate to talk about empathizing as a form of embodiment.

Embodiment includes sensing, knowing, thinking, and understanding in addition to feeling. It is an integrated mind and body experience. And because empathizing connotes embodiment, it’s subjective; it varies from person to person, from moment to moment, from context to context. It has less to do with what the actual biological or neurological make up of what the “other” is but, instead, is comprised of our perception of that “other.” (This is why many of us can empathize with characters in novels. Some of us can even empathize with plants and/or animals. In fact, excellent low-level programmers will go so far as to empathize with computers, although the term more popularly used in that context is “grokking.”) This means that the quality of understanding that arises from realizing empathy is never perfect (to achieve this would require some objective method of verification, an impossibility for subjective experience).

Third, we often think of empathizing with other human beings as a “natural” process, but it actually depends upon a number of requirements: empathizing with other human beings is only possible if they are sufficiently expressive in their use of language (written, verbal, non-verbal including facial expressions, or gestures), for example. Further, even if the other does a fantastic job of expressing themselves, that expression is no good if I lack the requisite attitude, knowledge, sensitivity, or experience to derive meaning from those expressions. Finally, my ability to realize empathy may be lost if I am simply too stimulated in the moment or lack the peace of mind to derive meaning from my perception.

Realizing empathy is the deliberate process of going from point A to B.

Fourth, while empathy can be realized passively and involuntarily, we can also realize it deliberately. This is precisely how I learned to draw. My ability to draw was not a product of self-indulgence; it was a product of realizing empathy. If self-indulgence was ever involved, it was precisely that which prevented me from learning. The same was true of my relationship to my friend mentioned in the video above. The same is true of conducting user research. Learning, observing, interviewing, and drawing are all different forms of realizing empathy.


In closing, I’d like to ask you, dear reader, to take some time to think about the connection between the process of me learning to draw and me coming to empathize with my friend. I hope this article gives you enough of a starting point to spark a dialogue in the comments, below.

In the next article I will describe a more explicit analogy between the creative process and the process of realizing empathy, opening up a deeper dialogue around the process of Design.

The post Realizing Empathy, Part 1: Art appeared first on UX Booth.

January 20 2014


January 13 2014


10 Useful Screen Capture Websites

Advertise here with BSA

As a web designer, I’m always finding useful ways to use website screenshots to benefit my work, and streamline my workflow. Whether I’m creating mood boards, presenting concepts to a client, comping up web templates, or just collecting examples for inspiration, a useful method for capturing multiple screenshots comes in handy. I’ve listed below, in no particular order, a collection of useful screen capturing websites that I use on a regular basis, along with they’re specific benefits.

1. Snapito

In comparison to other sites, it’s quick, and offers a selection of multiple capture sizes. This interface is relatively simple to use, as well.




2. Site2pic

This site doesn’t include many sizing option (actually, none at all), but it’s quick, and easy.




3. Shrink The Web

This site offers a free, and pro version — I’ve used both. The free version is great for quick and easy screen grabs, while the pro version offers an extra set of added benefits, like custom sizing, and designation of file type.




4. Thumbshots

This site offers paid, and unpaid version, along with many levels of functionality and benefits. The only downside is you have to create an account.




5. Websnapr

This site offers free small and micro screenshots, but requires a premium account if you wish to capture larger images. But, it’s quick and easy.




6. Web-Capture

It’s free, and easy to use, and allows you to choose from a number of different file extensions, including SVG graphics.



7. Screenshots

Simple to use, and offers multiple screenshot images to select from. The only downside, screenshots are not always available from more obscure sites.



8. Brow Shot

This site has a relatively easy to use interface, and is really quick. It takes quality, full resolution screenshots, but occasionally, I have trouble withe the custom sizing feature.



9. Page Peeker

This site is a little different, in that it specializes in producing website thumbnails and preview images. Nonetheless, still a useful tool for the right job.



10. ctrlq

It’s simple, stripped down, and might be a beta version, but it get’s the job done in a pinch. And apparently, 137,ooo people like it on Facebook.


These are only a handful of the available web screenshot tools available, and I always recommend exploring on your own to find the perfect tool for you and your workflow. There are also a number of downloadable screenshot software programs, with a wider array of features and functionality. But, if you’re looking for quick, fast and free, quality web screenshots, these are some of the best I’ve come across, so far.

Advertise here with BSA


January 06 2014


December 30 2013


December 27 2013


Coding With Koding

Cloud IDEs have been around for a little while now, and they have been pretty good for things like pair programming, or cases where you want to code consistently no matter where you are. Koding just came out of private beta, and they would like to take this notion a couple steps further, with their “cloud ecosystem”.

In this article we will take a look at what Koding is, as-well as some of the benefits you can get from using it.

Koding is kind of hard to explain, because there isn’t really a product similar to it on the market. So to better illustrate all of its moving parts, let’s split the service up and begin with the development environment.

The Development Environment

When you sign up to Koding, out of the box you get your own sub-domain ( your own VPS, and some built in web apps to manage your new resources.

Through the admin, you have the ability to create other sub-domains on top of your current URL and spin up new VPSs all through an easy to use UI.

The Dev Dashboard


Now these VMs are not your average micro instances that a lot of services offer, these are full fledged VMs with access to eight processors and a full GB of RAM so you can easily run just about any app, and if you want to play around with things like cluster setups or networks, you can easily spin up multiple instances for just $5 a month.

So in terms of processing power, these instances can potentially be as powerful as your own computer, and they are definitely better than loading a local virtual machine.

What the people over at Koding are trying to do is empower developers to learn through experimentation and just try things that they wouldn’t necessarily want to try locally, or just don’t have the resources to do it.

These instances initialize in a matter of seconds, and if you make mistakes and break some system files, you can easily just re-initialize the server and it will restore everything under the home folder. Essentially, you’ll have a new instance but all the files you created in the home folder are preserved.

Another thing they provide, which is actually a pretty big deal in some situations, is root access to all your servers. Koding is a very transparent service, you get a VM and you can literally do whatever you want with it. Anything you can do with a standard VPS, you can do with their VMs.

OS & Languages

As for the instances themselves, they come with Ubuntu installed, and pretty much every language I can think of, including:

  • PHP
  • GO
  • Node.js
  • Ruby
  • Perl
  • Haskell

Among others, so you are pretty much good to go out of the box.


With Koding, you sort of have two layers of applications. You have the VM, which like I mentioned, you can run anything you want on, but besides that, you have ‘Koding Apps’ which are web-apps that run on Koding itself and through them you can manage all of your Koding resources.

Some of the default apps you have available to you are things like admin panels for databases or frameworks and editors for code and images. The default code editor that comes pre-installed is the Ace code editor for regular development, or Firepad if you want to work collaboratively via the teamwork app.


Besides all these really cool apps, you have the ability to create your own. They are written using plain JavaScript (CoffeScript) and the KD framework (from Koding). Now because they have just come out of beta, there isn’t really a start-to-finish documentation site up yet, but there are two Koding apps available (kodepad and app maker) which are built to give you a sort of structure, with examples. Besides those, I’d advise searching Github for “.kdapp” and just looking at how other apps were built to get an idea of what sort of things are possible and how to accomplish them.

Altogether, it sort of has the feeling of a cloud “operating-system” where you have the VMs as resources but the Koding apps allow you to manage your resources and set them up just the way you like. This means if your company has a sort of boilerplate setup, you can create a kdapp which will configure a new VM with the files and software you need, and then whenever you spin up a new instance your app can configure it just the way you like.

Additionally, kdapps can be a standalone tool which just modifies files like the Ace editor, or image editors that are available. This means if you put in the time, you can essentially build your own dev environment, with all the custom tools which make you more efficient at building apps.

Everything I have mentioned up to now really only covers half of what Koding is, and that is the development environment part. Koding also has a social/organizational side of it, which compliments the development features and sort of boosts the platforms value.

Developer Community

By default, when you sign up to Koding, you are added to the Koding “group”; all the features, like the activity notifications, topics, code-snippets, etc.. are all coming from this default group. It’s kind of cool to get all the updates from users around the world, and you can filter by topic by going to the topics page and selecting something you are interested in. But where these features really show potential is when you create your own group.

Koding Topics Page

If you use Koding as a group, then you can take advantage of all these features to easily see what your colleagues have done, get updates and snippets from them, and filter all the posts by project using the topics as tags.

In a group, you can create shared VMs which multiple users can have access to, or credit users in the group money so they can create their own VMs and work privately.

It’s one of those situations where they probably could’ve just released the cloud development environment, the social network, or the project management, and it would have fit a market; but having them all work together and for free, is something to really think about.

I have been saying a lot of positive things about cloud environments, but there are some drawbacks when comparing them to developing locally which are worth at least mentioning.

Cloud vs. Local Development


One of the main things is that you aren’t really getting what I would call an IDE. For example, if you take a look at the Ace editor, it’s a great editor, but when you stack it up against a full fledged IDE like PhpStorm, they don’t compare. Ace is merely a code editor while PhpStorm contains all the tools you would need from testing to refactoring, all in one app.

The other drawback is simply latency, now compared to other web IDEs I haven’t had too much of an issue with this on Koding, but still, it doesn’t compare to a local setup. When you perform an action like opening a document, it could sometimes take a second to open.

So to summarize, developing online may not have all the tools you are used to working with, and it may not be as fast as doing it locally. But when you develop locally, you lose out on the powerful VMs and all the project management / social features.

Luckily you don’t have to make a choice. Editing code online is always possible so you don’t have to sacrifice on that front, but if you prefer coding locally with your own tools, you have full SSH access to your machines. So whether you want to use FTP, SCP, GIT, or any other kind of tool to transfer your changes to the server, you are given those options just like a standard VPS.

Setting Up SSH & Rsync

Now, I have already covered how to setup a bare GIT repo to deploy to your server, so it’s redundant to cover that process again, but let’s take a look at setting up your Koding account with an SSH key and using rsync to transfer your project to and from Koding.

For the unfamiliar, rsync is a utility for transferring large projects to and from your computer. Where it kind of differs from something like SCP, and the reason it’s good at working with large projects, is that it will scan the files both locally and remotely and only transfer the files that have changed. If you are working on any kind of project, you are going to have some framework system files, some boilerplate code, images, etc.. and you don’t really want to send them on every request, so rsync is a really good choice for stuff like this.

It’s not as good as GIT, you don’t get any form of version control, but if you are using Koding as a test environment and you just want to throw files up, or pull them down, rsync is the tool for the job.

The first step is pretty simple and it’s to get SSH setup; you just need to grab your public key (on a Mac you can run cat .ssh/ | pbcopy from a terminal window to copy the key) and then add it to your account page on Koding. The next thing you need to do is configure your computer to connect. Koding requires you to use their proxy as a tunnel to your server, so on a Unix based system, you can just create a file named ‘config‘ with the following inside (you need to replace this with your Koding username):

Host *
    User <username>
    ProxyCommand ssh nc %h %p

If you are on a Windows system, refer to their guide to see how to setup the proxy using Putty.

With that in place, you can run:

ssh vm-<vm number>.<username>

So for example, using my username, on the first default VM (which is number 0) you would run the following:


If all went well, you should connect and see the Koding terminal message. If it doesn’t want to connect, make sure you added the public key and make sure the VM is on in Koding (your VMs turn off when you haven’t used them for about 20 minutes).

With that setup, we can now create a local project. We don’t really need anything fancy here, so for this example I am just going to create a simple hello world HTML file inside a blank directory:

        <title>Koding Demo</title>
        <h1>Hello rsync</h1>

Save this file inside your projects folder and then run:

rsync -rvza --delete ./ vm-<vm number>.<username>

This will copy the entire contents of the current local folder to the remote directory deleting any remote files that are not in the current folder. If you ever make changes remotely, you can easily pull them down by reversing the paths like so:

rsync -rvza vm-<vm number>.<username> ./

Now these commands are a bit long, and if you plan on developing in this manner, you are going to want to create some shortcuts. One simple way is to just create bash aliases, but you may have multiple servers, and for each you would need an alias for each direction, so let’s just create a simple bash script which can accept the VM number along with the username, and the desired direction you want the files to go, and it will perform the transfer.

Bash Primer

I’m not going to cover all of Bash’s syntax, just the parts we need for this script.

First we need the variables, inside a bash script you define variables by typing name=value. For example, if we wanted to set a variable that contains a message, we would type:


There shouldn’t be any spaces around the equals sign for it to work. Once set, you can then retrieve the value of a variable by typing its name with a dollar sign before it. So to print the above variable’s value, we would type:

echo $message

Besides the variables that you define and set, you can use a couple of global variables that are set by your environment. These may be different according to your setup, but the ones we will be using are $USER for the currently logged in user and $PWD for the current folder. You can see what variables are in your environment by adding printenv to your code. This will print out all the environment’s current variables.

The next thing our script will need, is to be able to accept command line arguments. This is actually really easy to do, as they become numbered variables. So $1 represents the first parameter, $2 is the second and so on.

The last thing we will need to use in our script are if statements. These are similar to how you would write an if statement in most programming languages, with a few noticeable quirks:

if [ expression ]
    do something here
    do something else here

In bash scripts you have the expression between a pair of square brackets, and you have to leave a space between the brackets and the expression. You should also note that the then line is a requirement. The last difference, which is a little different, and is found in other bash structures is the fi keyword. Basically you just type the if backwards, it’s the same for a switch statement for example, you start the switch block with case and then you end it with esac (case reversed).

So with this information, let’s construct a simple script to help us upload and download our code to Koding:

Building Our Script

To begin, we need the whole-shebang to tell the computer to run it as a shell script and then I will create a simple helper function which will tell the user how to use this command:


function koding_usage
    echo "Usage: koding [push|pull] <vm_number> <username>"
    exit 1

If you are new to exit codes, 0 means it exited successfully and is the default returned when a script finishes, whereas anything else is an exit code for when an error has occurred. So if this function gets called, it means that the script wasn’t used correctly and we will exit with an error code.

Next, we need to make sure the arguments were passed in correctly and in the process, collect them and store them in some helper variables:

if [ "$1" = "" ]; then
    echo "Command Required"

if [ "$1" != "push" ] && [ "$1" != "pull" ]; then
    echo "You Can Only push or pull"

if [ "$2" = "" ]; then
    echo "VM Number Required"

if [ "$3" = "" ]; then

In this code, we are making four different checks:

  1. we check if there is a first parameter
  2. we check to make sure the first parameter is either ‘push‘ or ‘pull
  3. we make sure there is a second parameter
  4. we check whether the third parameter was set

In the first three if statements, if there was an issue we echo out a message and then call our helper method from above. For the last one though, if no username was supplied we will just use the currently logged in user’s username. So if your computer’s username is the same as your Koding username, you can leave the last parameter off.

The last thing we need to do, is actually run the rsync commands based on the command requested (push or pull):

if [ "$command" = "push" ]; then
    rsync -rvza --delete $PWD/ vm-$vmnumber.$
    rsync -rvza vm-$vmnumber.$ $PWD

You can see we are just placing the variables we collected (along with the current folder $PWD) right into the command. Since this is a shell script, you can just place shell commands straight in, like I did above

Now save the file and name it koding and then make it executable (you can do this by running chmod +x koding) and last but not least, move this file to your bin folder:

mv koding /usr/local/bin/

If you did everything correctly, you should be able to run koding and see our usage message come up. So now you can make a quick change to the example project above and simply run:

koding push 0

Assuming you don’t need the username property, and your current folder will be transferred as the Web directory on your server, named vm-0. The same goes for if you make changes online, you can cd into the local project folder and run:

koding pull 0

And you will receive all the updates.


Koding is a really powerful tool for prototyping and learning through experimentation. It has really cool social and project management capabilities and being able to code with someone else, live, can make a huge difference when you are trying to debug some code. Not to mention this all being free, means there really isn’t a reason you wouldn’t want to use this.

I really like the idea of having kd apps which run outside the VMs and I think it will be cool to see where people will take that and what kind of tools people will build.

You can sign up to Koding by visiting

Thank you for reading, I hope you enjoyed it, if you have any questions feel free to leave me a comment down below, on twitter or via the Nettuts+ IRC channel (#nettuts on freenode).

December 26 2013


The Benefits & Drawbacks to CSS Resets

Advertise here with BSA

CSS is a well-known language used for styling a website layout and various elements on the page. The specifications have evolved throughout CSS2 and into CSS3, creating a much simpler development process. Resets are used to clear out default browser settings so that each project will be rendered with the same baseline interface.

css code resets paper featured photo

However these resets will sometimes create problems you never thought about. Removing default properties like padding and borders may lead to adverse effects on input fields and other similar page items. In this article I want to share my own perceptions about the benefits and drawbacks of creating web projects with CSS resets.

Why Reset?

The primary goal of resetting elements is to remove discrepancies between different web browsers. Font sizes and line heights are two great examples which tend to differ between browsers and Operating Systems. You will save time debugging and it grants you more control to manipulate the standard HTML elements.

With absolutely no margins or padding you will have elements stacked right up against each other. This means you’ll also be required to define your own values, but I see this as a higher form of control over the layout(rather than a nuisance).

Simply stated, I get more value out of resetting the document than not. So this is my particular reasoning for sticking with it. Plus I get to learn first-hand about browser bugs and how to fix them accurately. Resets can be a blessing or a curse, and sometimes both. But in my opinion they are worth the effort when you’re consistently building new web projects from scratch.

Why Ignore Resets?

I’d say the first reason to ignore CSS resets would be larger file sizes. Granted the modern web can handle large bandwidth limits so this really shouldn’t be a deterrent. CSS resets can range anywhere from 1-10KB extra into your stylesheet. I feel it’s worthwhile because you now have a tightly-knit page that should appear identical in almost every browser.

Another reason not to use CSS resets would be the obfuscated design of generic page elements. By removing all the standard properties you are left with a very basic starting point. Some developers thrive in this simplicity, while others would rather keep everything in its natural state.

If you prefer a homogeneous design without stripping out the basic CSS properties I would recommend a more detailed framework such as Normalize or Twitter Bootstrap. Normalize is meant to be a reset which provides simple formatting instead of bare bones whitespace – Bootstrap takes this to another level with predefined CSS classes and JS components.

bootstrap v3 library getting started page

I want to state that using any simple browser unification CSS will save you a lot of development time. If you’re hesitant just try out samples on a new web project to see how it works. Bootstrap is perfect for beginners and comes with some easy-to-read documentation. Once you have a framework that you enjoy using it gradually becomes apart of your daily workflow.

Sample CSS Codes

There are so many libraries to mention for CSS resets. If you’re nervous to get started I must highly recommend Twitter Bootstrap – even though it isn’t a true reset library you can learn more about the benefits of consistent page elements.

Many developers will create their own CSS resets built from a template of existing code snippets. I created my own resets from Eric Meyer’s sample and have been updating the snippet every-so-often. If you want something easier try removing the default margin/padding properties from all elements with this code:

* { margin: 0; padding: 0; }

There are more efficient ways to handle resets, but when just getting started you should play around as much as possible. Try to understand the purpose behind each declaration and how this affects various web browsers.

Another sample you might try is the HTML5 reset stylesheet on HTML5 Doctor. It goes more into detail regarding specific page elements. For example if we wanted to support the old deprecated italic/bold tags I would append these lines into my stylesheet:

b,strong { font-weight: bold; }
i,em { font-style: italic; }

This is just a small example but it demonstrates my point accurately. The more time you spend building websites, the more you’ll run into these problems such as font styling and layout positioning. If you save code snippets in your development IDE it’ll be easier to generate your own CSS resets and customize them for each new project.

Advancing Trends

SASS and other similar technologies allow developers to create templates and variables within CSS. You compile resets and stylesheets for individual projects at will, based on what you need for the layout design. I feel we are nearing the dawn of a new age for the web design industry. Powerful innovation coupled with newer technologies may provide a more uniform method for building superb websites.

css resets library open source webpage webapp 2013

Please take a look at CSS Reset whenever you get the chance. It contains a small compilation of the most popular CSS resets and libraries for getting started. You can also read through their helpful CSS tutorials to learn about resets and other web design techniques.

Beyond this point you may find yourself captivated with CSS libraries. Open source code has become very popular amongst developers because we all learn & share together as a community. Take this opportunity to read through some other posts and familiarize yourself with CSS resets, CSS UI libraries, and prototypical browser resets for a cleaner default layout.

Related Articles


There is no absolute right or wrong answer when it comes to browser resets. Each developer will have his or her own procedure which gets the job done. CSS resets can save you a lot of time matching a duplicate experience for each web browser. Just keep in mind these resets may not be necessary for every website and you should begin to understand the purpose of individual CSS libraries over repeated use.

Advertise here with BSA

December 23 2013


December 16 2013


Easy Ways to Contribute to Open-source Projects

When the jQuery project first started, I remember how passionate the team was about helping developers use the jQuery JavaScript library. It was a labor of love with all of us putting in countless numbers of hours, day and night, to help grow the project and the developer community. And we did those for free because we just loved doing it. But as the project grew, so did the expectations from the community in terms of features and support. And this is where most open-source efforts fail to scale.

I think most developers that put out OSS software do it for altruistic reasons wanting to give back to the community something that may solve a critical problem.

As community needs grow, you need to find ways to have more time to focus on features. You can do this by growing your team but that’s not always a solution. On the jQuery project, we increased team size and delegated work but even so, being a volunteer-based effort meant the project was reliant on other people’s availability. And with all of us having full-time jobs and many with family responsibilities, I can say that we managed to accomplish a lot with very little availability.

The other option that manifested was the ability to fund time to focus on working on specific tasks. This typically came in the form of sponsorships from name-brand companies that had made substantial internal investments into jQuery and wanted the project to succeed. This actually worked well because it allowed team members to be able to specifically focus on meeting the community needs and focus their abilities on the tough areas that required a lot of dedicated attention.

Now please don’t think this just came about overnight. It took a long time before anyone wanted to contribute to the project and proving the value of the effort was the critical component to that. jQuery is an important part of many sites and products but that following developed over years of hard work and consistency and is not the norm for most OSS projects. And most OSS projects will never enjoy the level of success and notoriety jQuery has simply because of timing or even being “too niche”.

And there’s absolutely nothing wrong with that. I think most developers that put out OSS software do it for altruistic reasons wanting to give back to the community something that may solve a critical problem. So how do these projects get a leg up like the jQuery project did?

Let’s explore this.

OSS Consumers vs. Contributors

I’ve not met someone (both offline and online) who hasn’t used some open-source software. That’s a pretty big deal because it shows that OSS is everywhere. Developers rely on it to start-up their next great idea. Companies leverage it to lower costs. And governments use it to ensure their meeting the needs of their communities. To say it’s pervasive would be an understatement.

The one thing I’ve felt for a long time, though, is that there’s a definite imbalance between consumers and contributors. The ease with which someone can grab a piece of OSS software and run with it due to flexible licensing and little to no cost makes it incredibly easy to forget that someone out there is actually writing and supporting that software. If you simply consume without considering the time, effort and costs involved in that piece of software, there’s a strong likelihood that down the road you’ll be impacted when the project fails. The road to OSS is littered with failed and abandoned projects created by developers with all the right intentions but just didn’t have the resources to keep it going.

How to Give Back

It’s not to say that you need to go all-in like Facebook did with PHP but there are many ways of helping a project from which you’ve taken something that’s valuable to you and your business. Some low hanging fruit are:

  • Contribute code – Most projects use GitHub which makes creating pull requests insanely easy
  • Contribute time – Projects are always looking for people to help with documentation, support and evangelism
  • Write a blog post – Easy enough to write something that makes using a tool easier for others
  • Ask your employer for time – If you’re using a piece of OSS software at work, ask your employer for company time to contribute back
  • Ask your employer to donate back code – Along the same lines, if you’re extending functionality consider contributing it back under the same license of the project

Many projects have pages similar to this that explain specifically how to contribute.

If for whatever reason you can’t offer any of these, you should consider helping to fund some of these efforts. “How?” you ask.

Donating Online

There have been platforms springing up that are designed to solve this problem and we’re going to take a look at two of the most populars ones.

Bountysource – The OSS Projects Funding Platform


Recently, I came across a fundraiser for RVM (Ruby Version Manager). If you’ve ever coded in Ruby on Rails, then I’m pretty sure you know how important RVM is. Unfortunately, it’s main sponsor was ending its support and the project needed to find another sponsor so they took to a novel site called Bountysource which aims to provide a funding platform for open-source software.


I found this totally awesome because there really wasn’t a resource like this for the jQuery project (or MooTools, Prototype, et al) that could allow a project to spin up a fundraising page with all the tools to collect donations. And of course, it allows individuals to browser projects they’d like to help fund and donate via PayPal or Google Wallet.

What really impressed me is that fact that a project can list out the things they want to accomplish and through crowdsourcing, the community can help to fund the completion of the specific features through developer payouts (called a “bounty”). So say that you really wanted $.Deferred functionality in Zepto.js. You could contribute to the feature request to entice the community to implement and once it’s done, the bounty would be paid out to the person(s) who did it.


The service addresses the need of the project, even to the point of breaking down the bounties to specific tasks and values but also allows the community to decide what’s important and fund the development of that feature. It’s a bit of a KickStarter for open-source. Very cool.

Gittip – Crowdfunding People Who Inspire You


Gittip is a service I found out about because of John Resig. He’s been a real advocate of the service and that says a lot.


To quote John:

I saw a great opportunity for the development team at Khan Academy to give back to the Open Source community in ways that were not just code-related.

It’s very different from Bountysource in that it’s meant to offer small weekly cash gifts to individuals that you feel are providing you a value. You can give any amount you want up to $100 per week. This is actually a great resource for those single-man projects where the lone coder is adding features, answering support emails and working the community. It might seem inconsequential but even donating five dollars per week to that developer may be what he/she needs to ensure they know their work is appreciated.

There are over 650 communities listed on Gittip and choosing one will display all of the top givers and receivers:


This also allows you to drill-down into individual profile pages to allow you to contribute to some who inspires you:


And in keeping inline with its OSS ethos, Gittip even allows you to checkout its source code via its Github repo.

More “Do” than “How”

The point of this article is to drive home the importance of contributing back to open-source. If you’re a consumer, then you should seriously evaluate how valuable that library or tool is to you and figure out how to support it. If the project isn’t on Bountysource or Gittip, why not reach out to the project owner and ask them to join so you can donate.

And just because you may not be interested in contributing code doesn’t mean you can’t leverage other skills to help a project grow. In my opinion, the single biggest need of an open-source project are people who know how to work with a community. Soft skills are so important and from my experiences, sorely lacking.

The main thing is that there really is no excuse not to contribute back when you find something valuable. Just because it’s “free” doesn’t mean that a lot of investment wasn’t placed into it and if you don’t support it, it may just go away some day.


December 10 2013


Notification Design Strategies

If your inbox is anything like mine, it’s littered with unwanted notifications from companies begging for attention. Gmail has done a great job of making it easy to separate important messages from automated notifications; however some organizations refuse to make it easy to control the emails we receive. What can notification designers do to make things right?

Interacting with most websites is simple: we sign up, we sign in, and, occasionally, we give websites a bit of our time and attention. Maybe we share a preference or two. In return, those sites provide us with not only useful information (in the short term), but also notifications and other recurring updates (in the long term). This functionality is nothing new. It’s often convenient.

Until it isn’t, that is.

What can designers do to make things better? In this article, we’ll review some examples of websites that allow users to control both the type and the frequency of the notifications users receive (to their user’s benefit as well as their detriment). Along the way, we’ll discuss alternative ways that our companies might provide value to their audience.

Quality over quantity

If you love it, set it free. If if returns, it was meant to be.


It’s a big, scary world out there for product managers. Allowing users to control the quantity of email notifications that they receive requires product managers to first trust that their users will return. Users will only do that, of course, if our products or services provide long-term value rather than merely grabbing (and squandering) attention.

Luckily, there are plenty of ways that the design of our notification can do just that. I recommend giving attention to the following five things:

  1. Say what you mean
  2. Give users a choice
  3. Relegate (some) interactions in the email itself
  4. Remind users of additional actions, especially time—sensitive ones
  5. Provide a digest

1. Say what you mean

The CAN-SPAM law specifically forbids sending an email to someone who has previously unsubscribed. In response, some website owners have deliberately obfuscated the unsubscribe process, often requiring users to sign in to receive fewer emails: e.g. “Don’t want to receive email notifications? Adjust your message settings.”

Consider Yipit. The company made a good first impression when it launched. As an aggregator of the bargains appearing on “daily deal” sites such as Groupon, LivingSocial, etc., YipIt promised to provide in an at-a-glance summary of deals.

When I signed up, however, I had login issues that their support team was unable to resolve. This would have been bad enough on its own. The kicker came when I discovered that—even though I couldn’t log in—I continued to receive email announcements! When I clicked on the “unsubscribe” option at the bottom of an email, it took me to a login page, not an “unsubscribe” page.

The bottom of the Yipit email, offering an opportunity for me to “unsubscribe.”

How frustrating. As a result, YipIt provided me a poor, inconsistent, confusing interaction. Unsubscribe buttons should never yield a dead end.

2. Give users a choice

When President Barack Obama ran for re-election, his campaign team specifically targeted emails based on “big data” about American voters. This meant that, at the peak of the election season, his team sometimes sent out as many as four or five emails a day. That’s quite a lot of email!

Rather than risk losing the support of subscribers who may have perceived the campaign’s increase in frequency as an increase in spam, the campaign team simply made better use of the page upon which users landed when they clicked the unsubscribe button. There, the team provided recipients with a way to adjust the frequency with which they received emails. Smart.

Next consider ThinkGeek, a website for nerdy gifts. Designers at the company recognized the simple—yet—nonetheless—profound fact that people likely get a lot of email during the holidays. So last year they provided an option for subscribers to pause their email notifications (or “temporarily unsubscribe”) until the holiday season passes:

In addition to providing users with a choice—always a welcome addition—both the Obama campaign and ThinkGeek designed smart ways for their less voracious users to stay on top of thingswithout feeling overwhelmed.

3. Relegate (some) interactions in the email itself

Zendesk, a web—based customer support system, provides both customer support representatives (CSRs) and users alike with a special kind of email. Rather than require that they make a roundtrip to a website to continue their conversation, Zendesk emails allow CSRs and users to simply reply to their email “above this line.” This effectively makes what would be a unique interaction (between a CSR, a user, and into something as easy as replying to an email.

Pragmatically speaking, this doesn’t save users more than a few seconds. But it’s the thought that counts. Both CSRs and users don’t need to recall their login information in order to get things done.

4. Remind users of additional actions, especially time—sensitive ones

Time—sensitive notifications are more likely to be seen as helpful, rather than annoying.
Instacart aims to be the “Amazon Prime of grocery delivery.” Instead of having one, big warehouse of groceries (like some failed dot—com era startups), Instacart trains a fleet of personal shoppers to go to local stores and deliver groceries.

Immediately after the company delivers a user’s groceries, Instacart sends an email notification to that customer informing him or her that their order is complete. This is more just a notification, though, as the email also provides users with several actions they might take in response: users can rate their order, leave a tip, report a problem, and refer a friend. If the user is satisfied with the order and doesn’t want to do anything else, he or she will still receive value from the final confirmation.

What a user sees right after the grocery delivery is complete: logical next steps.

For more information on keeping a list of subscribers happy, see Mailchimp’s Best Practices for Lists page. In particular, the company suggests segmenting subscribers by groups. This allows companies to send more—targeted emails which, in turn, lowers the likelihood that their users will feel overwhelmed. Additionally, Mailchimp recommends sending “relevant content” because if your email isn’t interesting to the user, the user might report your email as spam — and that’s not good for business.

RelayRides is a peer—to—peer car sharing platform that allows you to borrow your neighbor’s car. RelayRides sends lots of updates (many of which I do not mind) at logical times and related to my actions on the site. When I reserve a car, the quality of my job or vacation may depend on that car reservation, so I am very happy to receive an email and a text message updating me about my reservation.

Finally, don’t confuse time—sensitive interactions with promotions, which may be time—sensitive with regards to the company but not necessarily time—sensitive with regards to the user. In contrast to the relatively frequent text messages I receive when I rent a car from RelayRides, RelayRides does send me promotional emails. The difference is that they send the promotional emails infrequently.

5. Provide a digest

Finally, never forget the value of something as simple as a summary.

Content—rich sites such as Learnist, a place where experts curate content to help beginners learn, should provide users with an option to stay informed even if they don’t have the time to browse everything the site contains. With regards to Learnist, I found that the site interesting but overwhelming. It simply required too much of my time to find specific information. If I were able to pick a few topics of interest, however, and receive digests, my Learnist emails wouldn’t find their way to trash, as they usually do.

Content—heavy websites might consider two email options: one where users can see either a series of thumbnails with lots of content (as Learnist currently does), or another that provides users with an in—depth, blog—like summary of a particular topic. Whereas the former requires a bit more time to fully explore, the latter is much easier to browse “on the go.” This is especially important with regards to mobile access where connectivity can be an issue .

A great example of digests comes from the Nieman Journalism Lab. Longer in word count but more dense in the amount of information they contain, Nieman’s digests are filled with attractive images and short, informative sentences.

A more natural notification experience

Allowing users to control the frequency of email notifications about a product will improve the overall user experience. Whether we provide different options for notification content, through a different channel, offer different content entirely, or shift some attention to offline outreach, users appreciate the freedom from spam. Lastly, we must always consider the bigger picture. Thinking about what challenges users face, and what the platform solves, will guide all the decisions we make. Then our communications can truly be about quality, and not quantity.

The post Notification Design Strategies appeared first on UX Booth.

December 09 2013

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...