I don't always write CoffeeScript, but when I do, I'm probably using jQuery too I always forget the syntax for stuff. So I'm going to write it all down here so I can reference it until I memorize it.

Note that the compiled example doesn't include the automatic closure around everything you get in CoffeeScript.

Safe jQuery Closure

So you can use the $ safely (common in WordPress):

(($) ->
      
    ) jQuery

(function($) {
    
    })(jQuery);

DOM Ready

$ ->
      console.log("DOM is ready")

$(function() {
      return console.log("DOM is ready");
    });

Call Method with No Params

$(".submit").click ->
      console.log("submitted!")

$(".submit").click(function() {
      return console.log("submitted!");
    });

Call Method with One Param

$(".button").on "click", ->
      console.log("button clicked!")

$(".button").on("click", function() {
      return console.log("button clicked!");
    });

Call Method With Multiple Params

$(document).on "click", ".button2", ->
      console.log("delegated button click!")

$(document).on("click", ".button2", function() {
       return console.log("delegated button click!");
    });

Params in the Anonymous Function

$(".button").on "click", (event) ->
      console.log("button clicked!")
      event.preventDefault()

$(".button").on("click", function(event) {
      console.log("button clicked!");
      return event.preventDefault();
    });

Returning False

$(".button").on "click", ->
      false

$(".button").on("click", function() {
      return false;
    });

A Simple Plugin

$.fn.extend
      makeColor: (options) ->
        settings = 
          option1: "red"
        
        settings = $.extend settings, options
        
        return @each () ->
          $(this).css
            color: settings.color

$.fn.extend({
      makeColor: function(options) {
        var settings;
        settings = {
          option1: "red"
        };
        settings = $.extend(settings, options);
        return this.each(function() {
          return $(this).css({
            color: settings.color
          });
        });
      }
    });

Using Plugin

$("a").makeColor
       color: "green"

$("a").makeColor({
      color: "green"
    });

Ajax

Note the string interpolation in there too, that's nice.

$.ajax
       url: "some.html"
       dataType: "html"
       error: (jqXHR, textStatus, errorThrown) ->
         $('body').append "AJAX Error: #{textStatus}"
       success: (data, textStatus, jqXHR) ->
         $('body').append "Successful AJAX call: #{data}"

$.ajax({
      url: "some.html",
      dataType: "html",
      error: function(jqXHR, textStatus, errorThrown) {
        return $('body').append("AJAX Error: " + textStatus);
      },
      success: function(data, textStatus, jqXHR) {
        return $('body').append("Successful AJAX call: " + data);
      }
    });

Animation

Two ways.

div.animate {width: 200}, 2000
    
    div.animate
      width: 200
      height: 200
      2000

div.animate({
      width: 200
    }, 2000);
    
    div.animate({
      width: 200,
      height: 200
    }, 2000);

Animation with Callback

div.animate
      color: red
      2000
      ->
        doSomething()

div.animate({
      color: red
    }, 2000, function() {
      return doSomething();
    });

Chaining

Not too much different.

$("input")
      .val("")
      .css
        'z-index': 5
      .removeClass "fart"

$("input").val("").css({
      'z-index': 5
    }).removeClass("fart");

Promises

The last line gets returned here when it doesn't really need to but whatever.

$.when(
      $.get("/feature/", (html) ->
        globalStore.html = html;
      ),
      $.get("/style.css", (css) ->
        globalStore.css = css;
      )
    ).then -> 
      $("<style />").html(globalStore.css).appendTo("head")
      $("body").append(globalStore.html)

$.when($.get("/feature/", function(html) {
      return globalStore.html = html;
    }), $.get("/style.css", function(css) {
      return globalStore.css = css;
    })).then(function() {
      $("<style />").html(globalStore.css).appendTo("head");
      return $("body").append(globalStore.html);
    });

Fat Arrow to Retain `this`

Otherwise inside the setTimeout you wouldn't have a reference to the button.

$(".button").click ->
      setTimeout ( =>
        $(@).slideUp()
      ), 500

$(".button").click(function() {
      return setTimeout(((function(_this) {
        return function() {
          return $(_this).slideUp();
        };
      })(this)), 500);
    });

Here's the lot of them in a Pen if you wanna tinker.

jQuery with CoffeeScript is a post from CSS-Tricks

As a UX researcher, I’m always looking for novel ways to present information to the different audiences I work for. My collaborators and clients aren’t limited to UX designers, software developers and UI visual designers.

I regularly conduct studies for executives who are responsible for business strategy, product planning, operations, sales and marketing, and professional education. At the conclusion of each study, my challenge is to create a final deliverable tailored to a specialized audience.

In the past, my user-research deliverables have consisted of short videos, concept feedback, games, workshops, competitor audits, strategy documents, customer journey maps and very detailed personas. It was only recently that I thought a comic book would make a fine user-research deliverable. Sure, it might seem strange to create a comic book in a staid corporate environment, where they are thought of primarily as light entertainment. But it’s not strange at all.

A comic book can be used to visualize scenarios. (Large preview)

Comic books are actually a very effective means of communicating difficult concepts to diverse audiences. Why? Because a comic book uses pictures, words and actions to make tricky topics easy to follow and understand. In contrast, a typical UX wireframe, strategy deck or functional specification document will often use “tech speak” and special shapes to communicate ideas.

In fact, sequential art, in the form of comic books, has been used in the US to effectively communicate a range of complex topics, such as military equipment maintenance in the 1950s. A prime example is PS Magazine, written by Will Eisner.

PS Magazine, an example of sequential art.

In 2006, Sid Jacobson and Ernie Colón wrote The 9/11 Report: A Graphic Adaptation to illustrate, “word for word the original report… even including the Commission’s final report card.” In October 2011, the U.S. Centers for Disease Control and Prevention (CDC) published “Preparedness 101: Zombie Apocalypse” to explain how to act in the face of a major “plague.” And in 2012, Kevin Cheng applied methods of sequential art to illustrate the process of planning for new technology products in See What I Mean.

In this article, I will discuss why I created a comic book to help a group of executives explore a business scenario that has multifaceted problems and is set in an imaginary future. I will also talk about how the comic book helped the executives experience the strategic and emotional impact of the problems and how it helped them noodle over possible solutions. Finally, I’ll provide some guidelines for UX designers who would like to use comics or sequential art to illustrate open-ended business scenarios.

Problem

Let’s start with a thorny concept most of us have heard of: cybercrime. It’s a mature industry with an extensive professionally run underground economy. As you might know, the cybercrime economy is based on the development and distribution of sophisticated tools to carry out large-scale fraud attacks, consumer-data breaches and politically motivated distributed denial-of-service (DDoS) attacks. These attacks on financial institutions, retailers and governmental agencies result in the loss of billions of dollars every year.

Now, imagine that you’re a managing director at a large corporation. You’re going about your normal business day when… BAM! The corporate website goes down; you learn that the call center is being flooded by panicked customers; and members of the media are calling you to comment on the surge of negative comments on your Twitter page. What should you do first? How are you going to respond to this crisis and return your business’ functions to their normal state?

These and other questions were running through my clients’ minds. They wanted to investigate how they might be affected by a hypothetical cybercrime, and they were asking questions. “What if we lost electricity?” “What if we lost control of the website or our mobile apps?” “What if sensitive customer data were stolen?” “What would we do?” Instead of waiting for a crisis to occur so that they could learn from the school of hard knocks, they decided to simulate a handful of devastating “What ifs” ahead of time in the form of a game.

Tools

Fortunately for my client, games that simulate business processes have been around for a while — since the 1950s, in fact. Business-simulation games enable facilities managers, operations directors, IT managers and even business students to explore a potential crisis, test their response, identify intelligence gaps and try out recovery plans before facing the crisis — whatever it might be — in real life.

While these games tackle serious problems, they are fun and thought-provoking and can generate a great deal of insight in just a few hours of play. Let’s look at a few games that enable organizations to enter and play inside possible futures.

• Table-talk role-playing games are a form of role-playing game. Each player takes on the role of a character whose choices shape the direction and outcome of the game. Players determine the actions of their characters, describe their characters’ actions through speech and have the freedom to improvise as the game progresses.
• Business war games simulate the moves and counter-moves in a commercial setting. Unlike military war games or fantasy war games, which can take place hundreds of years in the past, business war games are usually set in the present.
• Crisis-management drills have teams and participants practice aspects of an emergency response plan and prepare them for more extensive exercises — or the real event. Schools, hospitals and businesses generally conduct evacuation, shelter-in-place and lockdown drills with a large number of participants (including employees, students, staff, healthcare providers, firefighters and law enforcers) to demonstrate the steps they should take in an emergency.
• Scenario-based planning games allow organizations to test out and make flexible long-term plans. A game requires participants to act out possible yet very uncomfortable scenarios in today’s world. The plausible outcomes challenge assumptions, uncover blind spots and align people around common goals. A scenario-based planning game was used by my client to explore a hypothetical cybercrime event.

Game On

“We’ve been hacked!” Fourteen executives and administrators from across the business assembled in a conference room and were divided into three teams to tackle a scenario involving a data-loss crisis. One team represented the media, another represented the business, and the third became the hacker. The game took place over several hours one afternoon under the direction of a scenario master, who ran the game and recorded moves, decisions and dialog in the spreadsheet pictured below.

A spreadsheet is a way to record moves, decisions and dialog. (Large preview)

Comic Book

Once the data-loss game was played through, participants were scrambling for an easy way to:

• revisit team moves, decisions and dialog for future reference;
• look at each problem separately and brainstorm new solutions;
• share ideas for particularly thorny solutions with a wider audience.

I suggested that a comic book would be a natural solution to these needs. It would be easy to create, use, reproduce and share among the small group of players. I knew that storyboards and comics had been used successfully by UX professionals to illustrate user scenarios when designing interfaces. My book would be a slight departure in that it would illustrate an open-ended business scenario that involves multiple people with conflicting goals and no clear outcome. The book would be a thinking tool. It would not offer any clean workflows or happy endings.

A storyboard of thumbnail sketches is a way to design the story. (Large preview)

Because I had been involved in planning the scenario game, I knew which artifacts to gather: the playing cards, the transcript of moves and dialog, and the list of team members, stakeholders and game goals. I translated the transcript of moves and dialog into 60 thumbnail-sized sketches. While this might sound like a lot of work, it took only four hours to complete, and the entire story fit onto four pieces of 11 × 17-inch (or A3) paper. This storyboard, or “wireframe,” made it easy for the scenario master and I to quickly arrange the scenes into a sequence that matched the overall flow of the game.

I designed each page to be a standalone worksheet that focuses on a particular problem encountered during the game, the people involved and the decisions they made. For example, the page below illustrates the probing questions of the media team and the reaction of the business team. For those of you wondering about the time required to ink the final pages, it was about one hour per page.

Each page also contains an “Insights” panel, sized to hold small sticky notes, which players can affix during future brainstorming sessions. (Large preview)

From start to finish, the book took two weeks to complete, following these basis phases:

• thumbnail the entire story: 4 hours
• sketch 12 pages in pencil: 3 days
• color 12 pages and print the dialog in black ink: 5 days
• copy and bind 15 books on 8.5 × 11-inch (or A4) paper at a local copy shop: 3 hours

The completed 13-page comic book consists of an introduction to the game, a list of participants, the game’s events and a few blank pages at the end for notes. Because the book was designed as a thinking tool rather than a set of recommendations, the players may remove worksheets from the book and pin them on a wall during future brainstorming sessions.

Lessons Learned

While the mechanics of creating the comic book were fairly easy, I learned a few things about designing a comic book to illustrate business scenarios, which you might find useful.

Characters and Settings

• Use role “archetypes,” instead of realistic depictions of participants.
• Give the characters believable names, but avoid using participants’ real names.
• Avoid making participants feel like a joke. No one wants to be the “ugly duck.”
• Portray all participants making rational decisions. Even “bad guys” are rational. No one is “stupid.”
• Depict real furnishings and equipment used by participants in their daily work.

Each page focuses on a specific problem encountered by the players. (Large preview)

Action and Emotion

• Exaggerate emotion to help players remember their feelings months later.
• Include small visual jokes or inside jokes known to the participants. It’ll lighten the mood.
• Show characters taking action, no matter how small.
• Create interstitial people and events to bridge gaps in action.

Each page depicts the emotional and factual environment encountered by the players. (Large preview)

Production

• Keep the comic short and sweet. Ten to fifteen pages are easier to create and to consume.
• Work closely with the scenario master to refine and focus the narrative.
• Test your penciled pages with a few participants to verify story flow and feelings.

Reality Check

Fortunately, my client was open to the idea of a comic book, and I was given the time to create one. But what if you are not in this situation? What if you’d like to illustrate a business problem in a comic-book format but your client or boss is skeptical or you feel that your drawing skill is limited or you simply lack the time? Consider this:

• Can you distill an aspect of the problem into one small storyboard of five to six thumbnails? If yes, then take five to ten minutes to create a mini-storyboard on one piece of paper, and use that to discuss the problem with your client. As most UX’ers already know, getting a client to respond to sketches is easier than getting them to visualize an idea using words. To sell the idea of a comic, use a comic. However, if the problem can’t really be “seen” or “felt” by people, then the problem is likely not a good candidate for a comic book.
• Are the people involved in the business problem moving through space, exchanging information or moving their bodies in some way? Stick figures or clothespin people will convey basic action and facial expressions just fine to trigger empathy in the reader. You can also use photographs with word bubbles to communicate activity, intent and dialog. But if you want to present more facial, emotional or physical detail in order to immerse the client in the problem, then you’ll need to make more detailed drawings.
• In the time it takes to create one wireframe of a website landing page, you can sketch five to six thumbnails of a story. The trick is to limit your initial sketching to just a few minutes. Show a quick sketch and get a response from your client before proceeding down the road of more detail. You may find that a quick sketch is fine and just needs a bit of cleaning up in order to be presentable. Indeed, a single page is pretty easy to create, but if you fancy developing an entire book, even of modest length, then you’ll need to budget at minimum a week or two.

The data-loss comic book turned out to be a very effective way to illustrate the events that unfolded during the scenario-based planning game. It captured the game play better than a written report, video or slide deck could have. And it provided the participants with a way to relive particular moments of the game and to revisit their decisions and ideas.

The next time you’re looking for an effective way to communicate a complex topic, consider making a comic book!

(al, ml, il)

The post Boardroom Comics: A Business-Scenario Visualization Tool For Executives appeared first on Smashing Magazine.

The Cascading Style Sheets (CSS) Working Group has published two Working Drafts today:

• CSS Grid Layout Module Level 1. This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.
• CSS Generated Content for Paged Media Module. Books and other paged media often use special techniques to display information. Content may be moved to or generated for special areas of the page, such as running heads or footnotes. Generated content within pages, such as tab leaders or cross-references, helps readers navigate within and between pages.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Learn more about the Style Activity.

Today W3C published the final report of the fourth Web and TV Workshop that was held 12-13 March 2013 in Munich, Germany. Around 130 participants from 22 countries represented 84 organizations discussed hybrid TV, multi-screen and other web media topics such as testing, audio, accessibility, metadata and performance.

The report summarizes the discussion of possible future steps as follows:

• Synchronization of video and (meta) data, video & audio
• Testing devices based on web technologies
• Rendering and control of linear video using <video>
• Miscellaneous gaps around delivery & rendering of IP video
• Discovery and communication between two UAs or a UA and another device/service
• Performance measurement (benchmarks) for web technologies/animation
• Accessibility features
• Pluggable CDM for EME

Outcomes of the workshop and subsequent follow-up discussions include the creation of the TV Control API Community Group and work towards transitioning the Second Screen Presentation Community Group to a Working Group to establish a new W3C standard. There is also new activity around testing, accessibility and performance requirements for the TV industry.

W3C is very grateful to IRT for hosting and helping with this event, and NBCUniversal for additional sponsorship. This work is also supported by the EU FP7 project MediaScape.

Those interested in following this work are invited to join the Web and TV Interest Group or follow discussions on its public mailing list.

(Flickr photo by David Martyn Hunt)

Successful freelancers know that the key to keeping a great gig is staying organized, meeting deadlines, and doing great work. They also know that it’s easier said than done.

Being a freelancer — or just having the freedom to work from home — has plenty of perks. Setting your own schedule, working in your pajamas, and getting a load of laundry done in between tasks are just a few of the benefits that people who work remotely enjoy. But working from home — or the coffee shop, or the beach — comes with even more distractions than perks, and before you know it, you may find yourself procrastinating and falling behind.

It isn’t just freelancers enjoying the perks of remote work, and struggling to stay on task. As Tom Ashbrook said on the May 2 edition of NPR’s On Point, “Now, work and the workplace are going free agent. To a corner of Starbucks. Or anywhere.” Today, even employees with 9-to-5 jobs have the option to work from home. But working in an unstructured environment can be challenging for some.

Establishing a routine that works for you is integral to working remotely. Luckily, plenty of workers have come before you, and they are happy to share their tips for staying on task.

1. Plan Ahead

Nancy Davis Kho

Based out of Oakland, Calif., Nancy Davis Kho is a freelance writer and columnist for EContent. Like many freelancers, she understands the importance of sticking to a schedule.

“My number one piece of advice is to plan your workday the night before,” she says. “I use Outlook like crazy to manage and prioritize even the smallest tasks, so as soon as I start in the morning, I know exactly how I’m going to tackle things and in what order, and I try really, really hard to never let a task slip by a day.”

Davis Kho also finds that keeping busy keeps her mind from wandering. “I find the need to sort of overload myself; otherwise it’s too easy to get tempted by the siren song of Facebook and Twitter,” she says. If her hands go idle, she’s more likely to get distracted and end up falling behind.

Loving your work helps, too, says Brad Harris, a software engineer at Yahoo who works from his home in Denver.

“For me, setting up a schedule of when I start and end work for the day has been crucial,” Harris says. “I don’t see staying on task as much of a problem if you genuinely enjoy what you do. Rather, it’s hard to put work down at times because it’s so accessible. Having a specific time of day where I’m ‘done,’ even if that means putting work away for a few hours until dinner is over and kids are in bed, has helped me keep it from creeping in too much.”

Part of planning ahead is prioritizing — deciding what needs to get done now and what can wait until tomorrow. Kho says, “When I prioritize, I start with the jobs that pay. If I do have to let something slip, I’d rather it be something I’m not directly earning money on (i.e. backing up files, reading someone else’s blog and commenting, returning a call to the pharmacy.)”

2. Find the Tools that Work for You

Ron Miller

One of the wonderful things about technology is that there is a tool (or an app) for just about everything. Just like Davis Kho uses her Outlook to create a task list, other freelancers rely on tools to stay organized and focused. Ron Miller, a freelance writer and enterprise reporter for TechCrunch, swears by Evernote — but he also likes a good old notepad.

“I use Evernote to organize my content so I have quick access to notes and related articles and such on any device and I’m a big believer in lists,” Miller says. “I still haven’t found an electronic listing tool that I like as much as simply writing one at the beginning of each day and checking off things as I go.”

Carolina K. Reid, a freelancer who is working on a startup in on-demand housing, relies on a truly unusual tool: an egg timer. Reid says she uses the kitchen gadget “just to keep on track and devote x-amount of time per day in a week — minimum 30 minutes and no distractions.”

Harris has one must-have tool that may seem a bit unusual at first, but also ingenious: “Bose noise-canceling headphones are a must if you have kids at home. They’re pricy, but well worth it in my opinion.” But Harris also has tips for people who have to stay in touch with co-workers in an office — or in their own homes — during the workday.

“We use a team chat tool called HipChat, which is super-helpful for staying up to speed with what the team is doing. There are other solutions, but something similar is extremely helpful if you are a team with remote workers,” Harris says.

3. Get Out of the Office

One of the biggest perks of working from home is the ability to pick up your laptop and work from anywhere. That may sound counterproductive, but there can be a lot of distractions in your house. Whether you have kids running around the house, or the temptation to turn on the TV is too strong, sometimes it can be smart to get out of your home office — though it isn’t for everyone.

Carolina Reid

Some people enjoy heading down to the local coffee house to grab a beverage and to bury themselves in their work. But be sure that you’ve planned your day to suit itself to a few hours at the coffee shop or the library.

Reid says, “I like the coffee shop idea but I am too fundamentally social not to look up… Also I get on the phone a lot, setting up interviews, and calling for copies of reports or books. So I like to be able to make calls from a quiet place.”

For people who aren’t cutout for business in the coffee shop, there are other options. Co-working spaces are on the rise. According to the Bureau of Labor Statistics, freelancers, independent contractors and the like will make up 40 percent of the workforce by 2020. By allowing freelancers to rent as much or as little office space and time as they need — while providing all the important amenities like Wi-Fi — co-working spaces are filling the gap between the home office and the cubicle farm.

The post Working from Home? 3 Tips to Staying on Task appeared first on Treehouse Blog.