Tumblr Staff: Dashboard API: Part 1»

Get it while it’s hot!

Dashboard posts are now accessible from the Tumblr API, and there’s a shit-ton more coming to the API over the next few weeks days.

While I’m sure you guys will concoct plenty of things we haven’t even begun to imagine, the things we’re super-excited to see are any

This calls for celebration.

Tagged as: tumblr API

Video Camera Glasses»

I’m so psyched that this is now a financially viable consumer good. I would love to show people what a day of school is like.

Tagged as: gadgets
Sister Suvi

Longlegs by Sister Suvi

[Flash 9 is required to listen to audio.] 140 Plays

I am just now discovering that Sister Suvi is dead. I wish I could have seen them live.

One day, someone will write a book about all the bands that did not quite make it. They will travel the world, from Rio to Austin to Irkutsk, and ask the people: “What was your greatest band that never was?” The author will collect stories, testimonies, oral histories of the indie-rockers, folk-singers and go-go crews that exploded listeners’ hearts right open—and then called it quits. The tale of all the groups that only live on in legend.

Sing a song for Sister Suvi at McSweeney’s

Of all the bands I’ve listened to in my short human tenure, Sister Suvi is the best that never was. Their one and only album, Now I Am Champion, is still available for purchase here.

Tagged as: music sister suvi

Tesla Motors Goes Public»

So this is exciting:

The IPO filing on Friday from the six-year-old start-up, best known for its $109,000 all-electric Roadster, marks the first public offering from a U.S. automaker since Henry Ford’s Ford Motor Co made its share debut in 1956.

Tagged as: tesla innovation
Last time I checked, coffee did not look like that.

Last time I checked, coffee did not look like that.

Too Epic is Reborn»

Screenshot of the new Too Epic home page

The former iteration of my home page was underwhelming at best. It made abysmal use of Google App Engine’s offerings to the point that my GAE account had been reduced to a free, low-latency static file server (which is by no means a bad thing).

But alas, my bank account balance is running low: I figured I should have a nice place to refer potential freelance clients to. So I took a few days out of my winter break to come up with a new design and get to work creating it. Going into the project, I had a few explicit goals:

  1. It had to be purple.
  2. It would serve as a lightweight portfolio with screenshots of past work.
  3. The underlying content would come from tumblr (that link is not much of a sight to behold for the time being).

Initially, I tried just implementing the site as a tumblr template and loading the rest of the content (twitter, flickr, last.fm, AIM) through JavaScript with some simple $.getJSON calls. After a few days of private use, I decided this method was too unreliable:

  • Twitter’s JSON API failed to return the data I asked for about 30% of the time.
  • Users with JavaScript disabled would wind up not seeing half the site.
  • Tumblr occasionally goes down a few minutes for maintenance, and I’d rather have as much uptime as possible.

So, with these observations in mind, I returned to my former mistress, App Engine, who welcomed me with outstretched arms. I am by no means a proficient Python programmer, but I was able to hack together a passable backend that stores incoming data at regular intervals.

The end result is something that hopefully looks decent and renders reliably. I’m using a ton of experimental CSS, some of which is webkit exclusive for the time being: custom scrollbars and -webkit-transitions come to mind. The redesign should, however, hold together in most modern browsers. I have not even tried visiting in IE; I’m guessing it won’t be too colorful, seeing as most of the colors are in rgba.

I’m prone to borrow and experiment with ideas unapologetically, but I must give credit where credit is due:

  • All the pretty icons come from Glyphish.
  • Much inspiration and background-texture theft from Meagan Fisher’s post on 24 ways.
  • The heading typeface, League Gothic, comes from the League of Movable Type, purveyor of prime open source fonts.
  • @font-face embedding was vastly simplified by Font Squirrel.
  • jQuery will forever hold a special place in my heart.
  • Tumblr might be somewhat to blame for my obsession with faux picture frames.
  • The ever helpful Hao Lian ensured that I didn’t make any fatal Python blunders.

I’m sure I’ve overlooked a few, but so it goes. Now, if you’ll humor me, here’s something I’m proud of that I haven’t really seen elsewhere. Despite having a Python-powered backend rendering the initial page, I’ve got my script checking for new content every 30 seconds, so if I happen to be listening to a song or posting a tweet or getting onto AIM when you visit, the page will dynamically update in (almost) real time. Feel free to poke around and critique the source code.

I have a few novel ideas for making good use of the tumblr-powered content. Stick around long enough and I might even get around to realizing them. In the meantime, please send comments, questions, amorous solicitations, and potential freelance website work my way via email.

Tagged as: site tumblr design
Scrollbars, as it turns out, are a bit complicated. I thought this diagram might help.
Visit webkit.org for an extensive list of relevant pseudo elements and classes.

Scrollbars, as it turns out, are a bit complicated. I thought this diagram might help.

Visit webkit.org for an extensive list of relevant pseudo elements and classes.

Tagged as: webkit css

Emergent Trend: Custom Scrollbars

The recent redesigns of maxvoltar.com and orderedlist.com both feature a design subtlety that I haven’t formerly seen in the wild (omitting webkit.org):

Minute as they may seem, the custom scrollbars are a nice touch, offering the designer that much more control over the viewing experience (provided you’re using Chrome or Safari, of course). I’m guessing we’ll start seeing many more sites donning custom scrollbars as we move into 2010.

If you’re interested in how the effect is achieved, here are the relevant bits of CSS for hiding the default scrollbar (extracted from Maxvoltar’s stylesheet):

// the @media stuff is for viewers on mobile devices
 
html {
    overflow: hidden;
}
 
@media only screen and (max-device-width:480px) {
    html {
        overflow: auto;
    }
}
 
body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px; // could be a different value
    overflow-y: scroll;
    overflow-x: hidden;
}
 
@media only screen and (max-device-width:480px) {
    body {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        overflow: auto;
    }
}

Beyond that, it’s just a matter of styling the scrollbars to your liking. Check out Ordered List’s style sheet as a starting point.

For whatever reason, in-page scrollbars don’t play nice with some of Safari’s keyboard shortcuts (command up/down, spacebar), but page up/down still function as expected.

I guess I’ll start counting down the days before this becomes as commonplace and abused as rounded corners. The irony of it all is that Internet Explorer was actually the first to implement scrollbar styling. We’re ten years late to the party.

Update: Looks like Ordered List has removed their custom scrollbar for the time being. I think it might be my fault.

Tagged as: design css
Version 3 of the Compatriot theme is now available with infinite scrolling, keyboard navigation, and music posts with album artwork. Enjoy.

Version 3 of the Compatriot theme is now available with infinite scrolling, keyboard navigation, and music posts with album artwork. Enjoy.

Tagged as: compatriot tumblr theme

Showtime, the iPhone web app»

mrgan:

Nial Giacomelli has done a bang-up job with Showtime, his web app for keeping track of your favorite TV shows. It’s not fabulous “for a web app”, it’s fabulous period.

John Gruber has two fair and true complaints about it:

  1. Scrolling (it’s slow even at maximum speed.)
  2. The ON/OFF toggle switch has to be tapped (instead of the deeply satisfying native ability to slide it as well.)

As someone who’s into iPhone web apps, I’m going to side with Nial and focus on the positive.

The latter problem, the toggle, is fully solvable. There’s no technical reason this can’t be done with Javascript; it’s just not a ton of fun recreating native behaviors (who am I kidding - yes it is, sometimes!) If Nial doesn’t fix this soon, I’ll take a crack at it. But here’s the punchline: when it’s fixed, it’ll be fixed on everyone’s copy of Showtime the next time they launch it. How much would SDK developers give up to gain that ability?

The former problem - scrolling - may be trickier, or even unsolvable (or not!) It’s a bummer. But, I can live with it. I know Nial’s developing this with a pocket knife and a can of plumber’s putty, so I’m granting him a generous handicap.

iPhone-style checkboxes with touch events are entirely feasible. There’s even a jQuery plugin available to do just this. I’ve never used it in a project myself, but their demo page works as expected on my phone, dragging and all.

Oh, and Showtime’s not so bad either.

Tagged as: webapp iphone jquery
loading

Loading more posts...

Following: