Experiment: The Viewport Viewer

As a little experiment, while I redesign my own site, I decided to create a ‘Viewport Viewer

It’s a little tool that’ll load up a site in an iframe and let you re-size the iframe to some specifics, like an iPhone, or iPad in portrait mode. Go play with it and see.

It’s pretty straight forward: enter your URL, then toggle between sizes as you see fit. If your site is responsive it should fit in the iframe with out any issues.

It’s by no means meant to replace actual hardware testing with your sites, but it is quite handy during the initial phases of your responsive web development.

There are some downsides to it, however. One that I can think of is that it does not utilize ‘min-device-width‘ or ‘max-device-width‘, or any other ‘device‘ related queries. Because, well, it’s all in a browser and not on a device.

Anyway, there’s the tool, hopefully it’s of some use to you. If not, oh well. It’s been useful to me.


There’s Something about FITC Toronto…

On the days of April 23rd to April 25th, 2012, I attended a few various sessions at FITC Toronto. At the time the amount of information I was consuming was a little bit of overload. However, now that things have sunk in, I’d like to reflect upon it.

HTML5 Gaming

One of my primary goals of the conference was to cozy up to the idea of HTML5 gaming. It’s definitely a big thing that you can’t ignore.  The concept of being able to write a game and deploy it wherever an HTML5 capable browser exists is somewhat exciting.

First up on my list was “HTML5: My Life in the Trenches” with Grant Skinner. For the most part Grant introduced the audience to a nifty set of tools called CreateJS – which I think has great potential to become a solid standard for HTML5 gaming libraries. As you can see from some of the featured demos on the CreateJS site, developers are already building a great array of types of games. They’re fast, well done, and with the tools used they maintain compatibility across platforms that support HTML5.

Next up was “My Adventures in HTML5 Gaming” with Jesse Freeman. Jesse’s focus was more oriented towards the design of games and making what you want. When it comes to actually designing, you shouldn’t be afraid to share your ideas with others. You should document every little feature you want, even if it’s not realistic at the time. Also, don’t be afraid to just re-create something you like. It’s one of the best ways to learn. Jesse’s primary HTML5 library of choice is ImpactJS (he’s also selling a book about it), a full featured canvas and game engine. It’s $99, one time, per developer license fee might keep people away from it.

In both presentations it was made clear to me, albeit indirectly, that Adobe’s direction is definitely moving away from Flash as a final distribution format.  They’re re-tooling and adding the ability to export Flash and related assets directly into HTML5 libraries and resources.  These resources can be easily leveraged by any awesome HTML5/JavaScript library.

Overall, both HTML5 related talks were pretty good.  They definitely opened my eyes to newer tools and technologies with some innovative ways to use them.

Aware, Phsyical, Wearable, and Interactive Things

Another one of my favourite things of late is the ability to have things that are aware. Whether it’s my phone being aware that I’m in the office or at home; or my couch aware that I’m sitting on it; or the ability for my computer to detect that I turned on my Apple TV and ask me “Hey, Darryl, do you want me to turn your TV to Input5?” where I say yes and it does it.  But I digress. These potential things are just too awesome.

There were a few presentations that I saw that I felt were right up this alley. “NFC: Thinking Creatively Beyond Mobile Payments” with Pearl Chen was one such eye opener. The idea of using NFC to tag food storage containers and connect it to recipes in Evernote was one such awesomeness.  Another being a ‘smart’ case for your phone, which can detect via NFC the orientation of your device and set it’s ring tone to a certain way. It’s pretty damn cool.

Hey Ellie, What are You?” with Matt Fisher was a pretty awesome display of how you can leverage open source projects to create your own. With his home brew always-on voice command recognition system a la HAL or Jarvis (Iron Man), the potential for home automation and home awesomeness is endless. This one presentation alone filled my melon with so many ideas. My Evernote cupeth floweth over.

A Window to the Physical” with Peter Nitsch was all about going beyond digital, on screen, glass interfaces. His talk ventured into the realm of “the internet of things”, a world of connected and aware devices. He touched on a lot of greatness like how affordable and accessible DIY physical hardware (arduino, 3d printing, prototyping) has become.  And literally, if you can think of something, you can likely make a prototype these days without much cost.  The concepts presented really work into my overall desire to make something using things that are aware and things that can interact with other things.

The most interactive presentation was Marvin.  Marvin was just hanging out in the lobby for the entire time. He wasn’t really presenting anything.  I don’t think a lot of people realized what Marvin was.  A giant bear-like creature that for the most part just had people sitting on it.  Until people realized the sign that said “Run and Jump on Marvin…” Then the fun began.  As it turns out, Marvin was loaded up with some sensors and he detected a good pounce and hug.  When that happened, the bigger the pounce the bigger the “smile-works” show was above him.  You can see the videos below. It’s silly little cool things like this that make me love technology.


When it all comes down to putting all these incredible technological things together it takes time and process. And that’s where a talk titled “The rapid prototyping, creative incubating, lean startup.” by Hoss Gifford comes in to play.  He explained a lot about process that they use at OneMethod.  Everything starts with an idea and gets a time limit. A two month incubation time limit. If you cannot take your idea to a working prototype in that time, it should likely be back-burnered.  The main reasoning is that everyone’s passion around a project is at a high during the early stages and as time goes on that high can fall down drastically, so they jump on another new project with a fresh new high.  Not to say all projects should be thrown out; but the amount of attention you should give it is directly related the initial feedback and response of your prototype.

The prototype itself should be as lean as you can make it.  The most minimal, working product you can get to market that does what you want.  Time to market is typically critical. In this digital age if you sit on your idea and “make it perfect” over many months or even years, chances are the technology you’ve built it on, or the social buzz that you were banking on has likely moved on.

Overall, I found most of the sessions at FITC Toronto 2012 to be very well rounded. There were many other sessions that I attended with mixed impressions and little take-away. These ones though, they really hit home. Together, each of the sessions I have mentioned will all play a little (or big?) part in how I operate my future initiatives.  I’ve got a lot of crazy ideas. I can see the process.  Now if only I can find the time.

And Finally, Some Useless Content 😉