Dear Jack

http://www.hulu.com/watch/288577

I just realized I’m the same age as Andrew McMahon when he was diagnosed with Leukemia.

Watch the Dear Jack documentary if you haven’t already. It’s 67 minutes about a 22 year old Andy McMahon that was admitted to the hospital as a Leukemia patient the same day he finished mastering Jack’s Mannequin’s first album, Everything in Transit.

Today on his blog, Andy announced that Jack’s Mannequin is going to play their last concert on November 11.

At the heart of this change is the closing of a very important chapter in my life, one that is no doubt close to all of us. On November 11th, in Los Angeles at the 3rd annual Dear Jack benefit, my band and I will perform our last set as Jack’s Mannequin.

[soundcloud url=”http://api.soundcloud.com/tracks/19834118″ params=”” width=”100%” iframe=”true” /]

HTML Examples Plugin Demo

I worked on a plugin this weekend for storing HTML demos in WordPress. This is still a work in progress, but I think it’s pretty cool so I wanted to post a video showing what I’ve got so far.

When you write a new demo, you get fields for HTML, CSS, and Javascript. There’s also an option to select from a few libraries that are already including in WordPress to load on the page. On the post page, the HTML, CSS, and Javascript are inserted where the_content() is called.

The syntax highlighter used here is CodeMirror. You can find the code for HTML Examples on Github.

Spotify vs. Rdio

I’ve been a happy Spotify user since Memorial Day weekend 2012 when I discovered that a friend had signed up for the premium service. They were offering a 30 day trial, so I decided to try it out. It was kind of amazing. And it got better when I had to migrate over to a new MacBook Air. The billboard playlists, collaborative playlists, Last.fm integration — all super awesome, not to mention the massive music collection I now had access to.

I also had an Rdio account. Just the free one, but I had an account. I noticed Daniel Bachhuber followed me, which made me realize that there were actually a bunch of people I knew using Rdio. So I followed a couple people.

https://twitter.com/danielbachhuber/status/236574519081455616

Here’s the thing — I didn’t really understand this when Daniel first asked why I switched, but having Spotify so locked into Facebook is kind of a deal breaker for me. I had just come to expect that the “People” tab in Spotify was useless. I didn’t really care about what most of those people were listening to and there’s no way to do anything about that. Not only that, the only way to follow someone on Spotify is to friend them up on Facebook. It’s kind of unfortunate because without looking at my notes, I feel like Spotify is the better service. The reality is that they both do almost exactly the same thing in every way with a bunch of tiny differences. So I’ll share the differences that I found between the two. There’s no way this is a complete list, but it’s the stuff I found right away, so probably most of the stuff that’s important to me — for what that’s worth. This is directly from my notes, so the order I noticed these in might be interesting.

Spotify

  • Billboard playlists, but I found a pretty good Billboard Country playlist on Rdio as well. The one on Spotify is actually maintained by Billboard, which is cool.
  • Starred playlist. The work around for this in Rdio is to create a playlist called “Starred” and add songs to it. The nice thing about the Spotify starred playlist is the extra UI — you can see which songs are starred and which aren’t immediately and it’s one action instead of three to add something to that playlist.
  • Spotify Play Button – It looks way better than the Rdio embedable widget and works as a remote for the app.
  • Apps. I already touched on this a bit with the Billboard playlists, but Spotify has apps and some of them are really pretty awesome.
  • Filter. ⌘F lets you filter a playlist to find the song you’re looking for. Blows my mind a bit that Rdio doesn’t have this.
  • Local collection. Neither of them have every song I want to listen to. The Beatles are nowhere to be found. On Spotify I can just use the Beatles music that I already have in iTunes and play it in Spotify. It even syncs to Spotify on my iPhone.
  • Playlist folders
  • Boxee app. With airplay, I probably wouldn’t use the Boxee app as much anyway, but it’s kind of cool that it exists.
  • Rdio mini player. I don’t find it super useful and they completely hijack the maximize button to take you to the mini player. Even holding option while you click the maximize button doesn’t make it work like it’s supposed to.

Rdio

  • Collaborative playlists. So, they both have collaborative playlists, but Rdio does them better — I think. As far as I can tell, there’s no way to limit who can collaborate on a playlist with you on Spotify. On Rdio, you get an extra option betwen ‘Just Me’ and ‘Everyone’ — ‘Only people that I follow’.
  • Play history. Here’s a simple one that I can’t find anywhere in Spotify. Rdio has it though!
  • Web app! You can log into Rdio from anywhere with an internet connection and play music. Also, feels like a web app. You get used to it fast, but it’s blatantly obvious that the desktop app is just a Web View of the the Rdio website, which it turns out is better than no native app at all.
  • Family plan. If you need that sort of thing, Rdio offers discounts for people with multiple accounts.
  • Sign in to Last.fm once. For reasons I don’t understand, you have to sign into Last.fm every time you install a Spotify app. It doesn’t work at all on the Spoify Boxee app
  • “Find a song to add to this playlist”. There’s a box at the top of every Rdio playlist to search for songs and add them directly to the playlist.

Conclusion

Spotify is the better music player. If you don’t care about social, that’s the place to start. Unfortunately it’s completely off limits for people without Facebook accounts. It would be nice if there was a way to hide the “People” menu, which is only there to make you think Spotify is social. Spotify’s real social strategy is to just let Facebook handle it.

Tweet Posts

I deleted all my old Twitter archives the other day, which meant I was hardly using any of Twitter Tools1. Then, I launched the new version of joshbetz.com and I can do all kinds of fun stuff with post formats, but Twitter Tools still says “New blog post:” when I publish anything. So I threw together something that does exactly what I want and nothing that I don’t.

https://twitter.com/joshbetz/status/236145418709372928

It’s not super customizable. There’s some logic to tweet a bit differently depending on what the post format is, but it’s all hard-coded. For a new quote, for example, it will say something like “New quote: http://wp.me/123456”.

One goal I have is to rewrite the Twitter OAuth API helper to use more of the WordPress HTTP functions instead of relying on cURL directly. I’m always happy to accept pull requests on GitHub. The plugin is also available in the WordPress.org repository.


  1. I would normally link to the plugin, but I see that it hasn’t been updated in over two years and you get a nice big yellow warning when you visit the page. 

v11

Version 11.1

I realize that I was just writing about v10 four-and-a-half months ago. I liked it, but I haven’t done a ton of front-end work lately and I was itching to work on something. I started working on this probably six or seven weeks ago. It made its first public appearance on Dribble on July 14th. There’s a ton going on here, so I’m going to try and break it down a bit here.

Navigation

When I finally had something I wanted to build, I started with the main navigation. My first thought was to do it in CSS. The only sticking point is the darker yellow shadow on the bottom. It’s not even that hard to do, just a bunch of dropshadows. The way I did it looks pretty horrible in Safari, though, and not much better in Chrome. I’m going to look into this again when I get a minute because it would be awsome for customization. I’d love to be able to put an option in the customizer that lets you pick the nav color.

Mixins

So, I used Compass for this. Compass is the best reason for using SASS right now, in my opinion. Instead of maintaining your own list of mixins, which is likely to become out of date quickly, you can use Compass. It’s open source and used by tons of people.

And with SASS 3.2, there are some really cool things you can do with @media queries. For me, the following mixins made this theme easier to code and should make it much easier to maintain.

@mixin breakpoint($point) {
    @if $point == mid {
        @media (min-width: 800px) { @content; }
    }
    @else if $point == large {
        @media (min-width: 1170px) { @content; }
    }
}

@mixin retina() {
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { @content; }
}

Post Formats

This theme supports Standard, Link, Image, Video, Audio, Quote, and Status formats. Links still link to some external site or article. Image, Video, and Audio posts display extra content above the post title. Quote and Status posts are pretty straight forward, but it’s worth noting that they don’t have titles.

I’m still managing these with the Crowd Favorite Post Formats plugin.

Widgets

There are a couple of built in widgets. The biography widget, currently at the top of the sidebar, is available. It asks for an email address and will automatically pull your gravatar and profile information. The social icons are another widget that are part of this theme. Currently there are icons for Twitter, Dribbble, Forrst, Github, Google+, Facebook, LinkedIn, LastFM, Skype, Flickr, Vimeo, and WordPress.

WordPress.org Theme Directory

I’m going to submit this to the Theme Directory. The only thing I haven’t quite figured out yet is how to handle the navigation on mobile. The problem is that you can’t reliably set more than one level of sub-menus right now. Since they expand out to the right, eventually stuff is being drawn outside the page. I have some ideas for this, so hopefully I can get that figured out in the next week and get this thing up for review.

Since there’s no good way of distributing themes with specific TypeKit typefaces, I added some Google Fonts fallbacks that can be enabled in the customizer.

Theme Customizer

There are a few things you can specify in the customizer. The copyright notice starts you with a format of “© {yyyy}”. I replace the “{yyyy}” pattern with the current year. Hopefully it’s not super confusing, but I’m not replacing any other pattern so “{yy}” isn’t going to get you the last two digits of the current year or anything.

Google Fonts can be enabled, as I mentioned previously.

The background image or color can also be specified. The default is what I have set here, but you can upload your own image or pick your own color too.

Notes

  • I stole the awesome ❮ and ❯ arrows from Chexee.
  • The Wisconsin glyph in the footer is from StateFace.
  • Retina, baby. The entire thing has been written to take advantage of a retina screen. And it’s nice.
  • There’s a bunch of stuff from _s in here. Take a look. That’s the place to start.
  • The current breakpoints are at 650px, 800px and 1170px.

  1. Honestly, I don’t even remember how I came up with this number. It seems unreasonable. But I’m pretty sure I counted at some point.