PaperTweets

A Pop-up Card Tweet Creator in under 10k

Hand deliver your tweet in a pop-up card.

Or create one from your biggest idol and put it on display on your desk for passersby to admire. You are about to be very, very cool.

10kApart

10 kilobytes is not a lot of space. A tiny image for example. But it could also be a pretty substantial amount of text (or code). And with the ability to pull in as much data as possible from APIs, it gets pretty exciting. That’s what pulled me into the 10kApart competition this year… “I want to be the kutiman of APIs,” I thought. My elaborate plans of weaving disparate streams of data from APIs of photos, videos, song lyrics…etc. etc. into a beautiful fabric, well, didn’t manifest. And then I decided to help users create something fun they could print out. A gimmick for sure, but something physical that could be handed to a friend. Long story short, I coded for a few days in a row, finished a few minutes before the gong sounded, and PaperTweets emerged from its shell. a little egg with a chain :)

The Flow

A quick rundown on what the app does (you could also just try it). PaperTweets:

COLOURlovers

You probably ♥ colors, palettes and patterns too, and the people who create and participate in COLOURlovers share their favorites with all of us. They even have a great API that’s improved over the years. BIG thanks to their team. Really glad they remained alive and relevant after Kuler hit the scene.
  1. Asks the User for a Sender’s twitter handle
  2. Connects to the Twitter API and grabs the user’s profile image
  3. Takes the average color of the image
  4. Finds the nearest match to that color in the colourLovers’ database
  5. Searches for palettes using that color again with the colourLovers’ API
  6. Asks the User to select a palette
  7. Asks the user for a message of proper Tweet length
  8. Creates a hidden, printable template from the elements above
  9. And finally prompts the user to print out the PaperTweet – instructions are printed inside the template.

Getting to know the <CANVAS>

Because of the size limitation, the bird and other visual elements needed to be generated in the <CANVAS>. I went with a very simple but bold, vector-based style to accommodate the constraint. Still I hadn’t done too much in the Canvas yet, so there were things to learn.

I first drew the bird with vector tools in Photoshop and then recreated the bezier curves in the Canvas. I was happily surprised by how it came out. Below I’ve redrawn the bird using (the amazing) paper.js which was an easy port of the native Canvas code. Check out their tutorials and examples.

See that bird yonder? Toy with its vectors below & even make it fly.

Having now created that, it seems it wouldn’t be all that difficult to build a web app for drawing vectors that could then export <CANVAS> (or optionally paper.js) snippets, fresh and ready to pop into any ol’ page. Useful? And is it already floating out there in the github ether? Hmm…

@media print

@media screen

@media print

The @media print styles fully hide all of the site’s contents and instead show a printable template above. Step by step directions are printed in the top left. The bars of color form the body of the card, folded in half along the dotted line. Two vertical slices in the card on the right allow the bird to “pop up.”

When the user finally decides to print, they should print out only the PaperTweet template. But what is on the screen at that time is an interactive card representing the one they have just created, followed by a print button and a bunch of descriptive text.

I’ve always assumed that @media print styles were there to reformat text and make sure white text on a non-printed image background was not going to be invisible on paper. And mainly it is.

I realized that I could create both the on screen and printable views (containing drastically different content) and then toggle which is “display:block;” or “display:none;” with a simple @media print style definition. The screen sees one view, and the printer sees the other.

Probably someone has done this before (or many times), but I thought I was pretty clever:)

TypeKit

TypeKit was the only competition-sanctioned way to bring in rich fonts without immediately going over the 10k restriction, and it was my first time using the service. Google hadn’t quite beefed up their webfont silos yet, and I imagine someone on the 10kApart team was playing footsie with someone at TypeKit. Regardless, I was very happy to be able to bring in Etica Display.

3D Transforms

The 3D transforms that you will see if you have a WebKit enabled browser are something new in this version – an extra goodie I’d been hoping to fit into the original version. In the end, I didn’t have the time, or spare bytes, to squeeze it in. I was pushing the limit on both counts. This was a good initial 3d experiment for me (chronologically it came before my FishBird cube).

Good times

It’s fun to try and tackle something like this every once and a while, trying to dodge and weave various limitations. Plus I’m pretty psyched to have rediscovered paper.js and used it for this write-up – I’m definitely looking forward to exploring it some more. Thanks to @jayunit for reminding me:) Good night everyone. Time to catch up on some sleep.




let
me know
what you think
just remember i have feelings too

*