July 31, 2013

A HTML Microformat for Open Badges

Sometimes a person wanders by the #badges IRC channel and asks us how to issue a badge.

The response usually involves asking the user what kind of technical expertise they have; if they’re a programmer, we point them at the specification. If they’re not, well, we usually point them to a place like badg.us or credly.

... Read more

January 17, 2013

On Enforcing Mandatory Code Review

Many software projects enforce mandatory code reviews, even for their most senior developers. While I’ve mentioned before that code reviews can be very useful, I also think that mandatory code reviews among trusted members of a software team can have a number of downsides.

... Read more

December 5, 2012

Building Experiences That Work Like The Web

Much has been said about the greatness of the Web, yet most websites don’t actually work like the Web does. And some experiences that aren’t even on the web can still embody its spirit better than the average site.

Here are three webbish characteristics that I want to see in every site I use, and which I try my best to implement in anything I build.

... Read more

April 26, 2012

Learning and Grammatical Forgiveness

HTML is a very interesting machine language because, like human languages, most things that interpret it are very forgiving.

For instance, did you know that the following HTML is technically invalid?

<video>
  <source src="movie.mp4"></source>
</video>

... Read more

March 31, 2012

Prototyping Presentations

Presentations take a long time to make. Particularly when I’m just conceptualizing my presentation, it takes a lot of work to record myself talking, use a tool to sync it with the proper visuals, and then repeat the recording and syncing process as I iterate on the content. I recently made a simple tool called Quickpreso to make the process of “prototyping” a presentation quicker, and more like writing a simple HTML page. ... Read more

March 26, 2012

Storything Interactive Prototype

Last week I merged the Webmaking Tutorial Prototype with the Webmaking 101 for Journalists prototype we made during our three day sprint in NYC in February. The result, which is code-named Storything, is currently hosted at storything.toolness.org. Give it a try! The design for this prototype is based on Jess Klein’s instructional overlay mockups. A separate two-pane editor for example snippets is included in the movie frame; my hope here is that by setting the tutorial movies in an actual editing environment, users will obtain a better understanding of how to use our tool. ... Read more

March 9, 2012

Webmaker Tutorial Prototyping

Recently I’ve been playing around with creating interactive tutorials that teach people how to create things on the Web. Check out this prototype. At the end of a movie-like tutorial, you’ll be given a challenge to write your first bit of HTML. At any time, you can use the scrubber at the bottom-right to review any part of the tutorial; anything you’ve typed so far in the challenge is undone while you’re scrubbing, and is automatically re-applied once you’re back at the challenge. ... Read more

August 15, 2011

Hacking The Web With Interactive Stories

I recently made The Parable of The Hackasaurus, which is a game-like attempt to make web-hacking easy to learn through a series of simple puzzles in the context of a story. The parable is really more of a proof-of-concept that combines a bunch of different ideas than an actual attempt at interactive narrative, though. The puzzles don’t actually have anything to do with the story, for instance. But I wanted an excuse to do something fun with the vibrant art that Jessica Klein has made for the project, while also exploring possibilities for the Hack This Game sprint and giving self-directed learners a path to understanding how the Hackasaurus tools work. ... Read more

© Atul Varma 2017