When I have time, I enjoy building quick frontend prototypes. I can use this time to kill two birds with one stone: stay sharp with my technical skills and push the boundaries of what we can accomplish with frontend tech. With Emsi's API platform, I have more data and functionality at my fingertips than I could ever ask for. But as great as data and APIs are, it's not always easy for a non-technical user to see the value. Code examples and JSON strings don't excite the imaginations of most people.

That's where visual prototypes come in, especially for data-heavy applications. The right interface can showcase the power of a backend while the wrong interface can obscure it. That's one of the reasons I enjoy building data interfaces: it unlocks the value hidden behind the scenes.

Most recently I enjoyed building an interface to showcase the natural language processing behind Emsi's new skill extraction. This technology can identify words and phrases within text that represent specific skills. The first version of the prototype was simple: given a paragraph of text, underline the skills found:

...but what if the underlines could appear dynamically, as you type? Like spellcheck?

...and then you could click on the words to see information about the skill:

We may have gotten carried away. After all, we ended up with a dynamic rich text editor, interactive highlights, a sidebar data display, a bunch of painstaking animations for the micro-interactions (the sliding underlines are my favorite)... and I suppose what we were after at first, a demo of skills extraction.

But I think it takes that level of polish, animations and all, for the the interface to actually get out of your way and let the backend shine through.

By the time we finished, we had a whole website dedicated to demonstrating the backend. You can try the extractor for yourself here.