Category Archives: Viget

How to Build Your Own Alexa Service

With the recent introduction of Amazon and Google products that provide Ironman-esque voice control functionality, we’ve been wondering lately what this means for the future of human computer interactions. Always on the lookout for emerging technology to get ahead of, we decided to put a project together to see what these little devices are capable of.

read more

Using Microcosm Presenters to Manage Complex Features

We made Microcosm to help us manage state and data flow in our JavaScript applications. We think it’s pretty great. We recently used it to help our friends at iContact launch a brand new email editor. Today, I’d like to show you how I used one of my favorite features of Microcosm to ship a particularly gnarly feature.

In addition to adding text, photos, and buttons to their emails, users can add code blocks which let them manually enter HTML to be inserted into the email. The feature in question was to add server-side code santization, to make sure user-submitted HTML isn’t invalid or potentially malicious. The logic is roughly defined as follows:

  • User modifies the HTML & hits “preview”;
  • HTML is sent up to the server and sanitized;
  • The resulting HTML is displayed in the canvas;
  • If the code is unmodified, user can “apply” the code or continue editing;
  • If the code is modified, user can “apply” the modified code or “reject” the changes and continue editing;
  • If at any time the user unfocuses the block, the code should return to the last applied state.

Here’s a flowchart that might make things clearer (did for me, in any event):

This feature is too complex to handle with React component state, but too localized to store in application state (the main Microcosm instance). Fortunately, Microcosm gives us the perfect tool to handle this scenario: Presenters.

Using a Presenter, we can build an app-within-an-app, with a unique domain, actions, and state, and communicate with the main repository as necessary.

First, we define some Actions that only pertain to this Presenter:

const changeInputHtml = html => html
const acceptChanges = () => {}
const rejectChanges = () => {}

We don’t export these functions, so they only exist in the context of this file.

Next, we’ll define the Presenter itself:

class CodeEditor extends Presenter {
  setup(repo, props) {
    repo.addDomain('html', {
      getInitialState() {
        return {
          originalHtml: props.block.attributes.htmlCode,
          inputHtml: props.block.attributes.htmlCode,
          unsafeHtml: null,
          status: 'start'
        }
      },

The setup function is invoked when the Presenter is created. It receives a fork of the main Microcosm repo as its first argument. We invoke the addDomain function to add a new domain to the forked repo. The main repo will never know about this new bit of state.

Now, let’s instruct our new domain to listen for some actions:

      register() {
        return {
          [scrubHtml]: this.scrubSuccess,
          [changeInputHtml]: this.inputHtmlChanged,
          [acceptChanges]: this.changesAccepted,
          [rejectChanges]: this.changesRejected
        }
      },

read more

What UX Designers Can Learn From IKEA

I recently moved and ended up buying a lot of IKEA furniture. While assembling the different pieces, I began to notice how IKEA devises their instructions to gently lead builders through complex tasks. 

One of the customer’s first interactions with an IKEA product will be to build it, and this experience will likely shape the customer’s lasting impression of both that piece of furniture and IKEA as a brand. This is a high-stakes interaction, and there are so many places where it could go so wrong. Poorly-written instructions may very well end with the customer either throwing up their hands or throwing a hammer at the piece in frustration.

read more

Bringing Research Home

Any designer who has created a personal portfolio site knows that your toughest client is always yourself. Recently, we have felt particularly sympathetic to the plight of designing for yourself because we have been taking an introspective look at our own site and messaging.

We wanted to understand how potential clients perceive and evaluate Viget in their search for an agency partner and the role that our website plays in shaping that impression. We wanted to see our brand and our site through the lens of a potential client, a person getting a first introduction to Viget. To do that, we applied the same research methods we employ for client projects to our own questions.

read more

Learn How ESPN Used Interactive Data to Chronicle LeBron’s Journey

Today we kick off one of the most anticipated NBA Finals in history – the 3rd year in a row pitting the Cavaliers against the Warriors. It also means that one of basketball’s greatest players, LeBron James, is once again at the center of professional basketball’s biggest stage. Earlier this season, LeBron became one of the NBA’s top 10 all-time scorers.

In order to capture the drama of the accomplishment and help fans analyze it, ESPN wanted to create an engaging and interactive experience powered by data. They turned to the data visualization experts at Viget to give life to this idea. We concepted, designed, and developed a dynamic, stats-based story that tracks LeBron’s rise from rookie to one of the best of all time. It even uses Kevin Pelton’s SCHOENE projection system to predict when he might make it to the No. 1 spot.

read more