CoffeepunJS

Recently I got interested in how Twitter enables users to embed tweets in their personal webpage. After clicking on “Embed Tweet”, a dialog pops up with a snippet of HTML you can copy and paste into your site, like so:

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Kobe on the Blue Ridge Parkway... <a href="http://t.co/s1VoQXOVld">pic.twitter.com/s1VoQXOVld</a></p>— Gregory Garrett (@gcgarrett) <a href="https://twitter.com/gcgarrett/status/642774905612713984">September 12, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

The first bit is a standard blockquote that contains the content of the tweet, a link to the media included in the tweet (in this case, because the tweet I'm embedding has a picture of my dog), attribution to the author, a link to the tweet, and the date it was tweeted. However, it doesn't look much like the preview Twitter shows you:

Kobe on the Blue Ridge Parkway... pic.twitter.com/s1VoQXOVld

— Gregory Garrett (@gcgarrett)

September 12, 2015

vs.

And that's because of that script tag at the end. If you download the file it's pretty sizable, including a promise library even, but in essence it does something pretty straight forward: it creates an iframe tag with src set to the Twitterfied embedded tweet, and then replaces the blockquote with the iframe!

From tiny writing desks to giant painting studios, the only thing all of these creative studios have in common is that they inspired their successful inhabitants to create greatness.

Recently I have been reading Ethan Marcotte's "Responsive Web Design", an excellent little book about not just the technical aspects of designing a responsive website, but the philosophy behind it as well. It has gotten me pretty energized about creating responsive web pages, something I strive for in my work. However, I realize that before reading the book I was very much stuck in a pixel mindset. This panel needs to be 256 pixels wide, that button needs to be 32 pixels tall, that kind of thing.

So now I want to create a truly responsive website, to but the theory into practice. To think of the design in terms of percentages, not pixels, and to think of how that site will be interacted with on multiple device types. I have also been inspired a lot by Luke Wroblewski's ideas about designing for mobile first, so in creating my responsive website I want to put some of those concepts into practice as well. As luck would have it, a friend of mine recently linked a wonderful little tool for testing out webpages and multiple devices: http://www.responsinator.com/

So, what website will I be designing, you might ask? Why, my own, of course! Right now my personal website is not very aesthetically pleasing or responsive, as can be seen from responsinator: