Geekiness

The Making of Vincent Knobil | MUSIC version 3

This post is going to delve into the gory details. You can cut to the chase and just visit the new version of my music site.

Still here? Proceed at your own risk.

How do you make your music available on the Internet when you’re a geeky songwriter?

Over the years, I’ve made it available on different platforms (Opsound, GarageBand (dead), SoundClick, Viinyl, SoundCloud, BandCamp, Dogmazic, etc., etc.)

These sites all have their pros and cons, and by definition, are impersonal.

So since the beginning of the Web, I’ve tried to serve my music up on my own site.

It started with some Flash players on my first site (over 10 years ago!).

Then, a couple of years ago, I decided to centralize the music that was scattered all over the web on a dedicated music site.

Because I like to design and code websites, I used all sorts of amusing tricks, like a parallax-scrolling background, a fixed logo with different sections sliding into place, an image slider to present song thumbnails, song popups, etc, etc.

My websites are an emanation of my creative self. While I care about usability, I don’t see my sites as mere marketing platforms. They are creations, for better or for worse.

In this case, the result was a bit too much of a (joyful) mess.

Then about a year ago, I built an iPhone web app, Pocket Vince, which uses HTML5 audio (no Flash allowed on iOS). I’ve wanted to redo my “regular” site using the same tech ever since.

So over time, I researched my options, and about a month ago, I took the plunge.

I had to overcome a lot of hurdles :

  • New design (while keeping the best of the v2 site, i.e. the randomized background color and motifs, and the simplicity of Pocket Vince).
  • Easy updating (updating my v2 site and PocketVince is horribly labor-intensive).
  • Less blabla. Direct access to music+lyrics.
  • Permalinks (so users could share links to individual songs). My v2 site was sorely lacking in this respect.
  • Converting all my .mp3 files to the OGG Vorbis format, since Firefox refuses to speak .mp3 (Fucker! And you don’t know how hard it is to find an .mp3 to .ogg converter for Mac).

I knew I could reause the Audio Player code from Pocket Vince pretty much as-is.

The big question was how to store and retrieve the song information (title, lyrics, backstory, cover image, audio file, etc.).

The obvious answer was a CMS of some kind. I used WordPress in the v2 site. But that seemed like overkill. I wanted something simpler (baking sites is all the rage these days).

I decided I would put the lyrics and stories in external files of some kind, which I’d call via AJAX (jQuery load() to be precise).

Then it occurred to me that my little Flash players stored the song info in little XML files. So why not use XML? As I looked into it…

…I stumbled on THE HOLY. FUCKING. GRAIL: XSLT.

XSLT files are like templates, which are used to specify WHAT XML content to display, and HOW to display it, on the fly.

So this snippet of XML:

<album>
	<name>A Great Album</name>
	<description>It really is a great album.</description>
</album>
<album>
	<name>A Lovely Album</name>
	<description>It really is a lovely album.</description>
</album>
...

Combined with this snippet of XSLT:

<xsl:for-each select="album">
	<h3><xsl:value-of select="name"/></h3>
	<p><xsl:value-of select="description"/></p>
</xsl:for-each>

Automagically outputs:

A Great Album

It really is a great album.

A Lovely Album

It really is a lovely album.

Best of all, this combo requires NO DATABASE, and no server-side language (PHP, ASP etc.). Indeed, all modern web browsers speak XML+XSL. So in the same way that your browser displays a pretty page when you feed it an HTML file and a CSS style sheet, it can render XML content processed through an XSL template.

I soon realized that given an exhaustive XML file and the appropriate XSL files, I could :

  • Generate the album+song list on the site.
  • Call up the right lyrics+story when listening to a song.
  • And even generate the playlist of MP3 files for a given album (with a little help from Javascript).

On. The. Fly.

And that’s exactly what I eventually managed to accomplish. No CMS. No database. The site just automagically assembles itself in real time.

If I fix a typo in the XML file, or add a song, boom, the site is updated.

I love this for the same reason real coders probably hate it: NO CODING REQUIRED!

Just markup.

But all along the way, I was confronted with my ignorance, and the fact that nobody on the InterWebs was using this technology in the way I wanted to.

I also needed a javascript (jQuery) plugin to bind XSLs to my XML. I built an entire first working version of the site with a plugin, only to discover that it broke under Internet Explorer 9.

I could go on and on, because I sweat every little detail, but there you have it: the first version of the third version of my music site.

I say first version, because XML+XSL open up many possibilities for additional features.

Colophon:

  • CSS written with CSSEdit.
  • Graphics made and processed with Fireworks CS3.
  • HTML, javascript, XML and XSL written with BBEdit.
  • There are dedicated XML editors out there, but they are HIDEOUS. If and when I do this again, I will buy Xmplify.
  • froogaloop jQuery plugin to control the Vimeo videos.
  • XML/XSL Transform by DAER Systems, a jQuery plugin to handle the XML + XSL binding with JQuery. Many thanks to Jason Iles for his help !

31. December 2011 by sknob
Destination: Geekiness, Multimedia Authoring | Leave a comment

My OS X Lion Post

I’ve been using OS X Lion for about a month now.

I took the plunge when iOS 5 and OS X 10.7.2 came out.

Executive summary

I like it.

If you’re interested in knowing why, read on.
Continue Reading →

19. November 2011 by sknob
Destination: Geekiness | Leave a comment

OS X Lion killed Mail.app To Do’s

My fabulous task management workflow is dead in the water.

Which is why I haven’t updated to Lion and will not do so until it can’t be avoided.

Fuck!

18. August 2011 by sknob
Destination: Geekiness | 1 comment

Task Management with Mail.app : Smart & Fabulous Update.

My fabulously simple and smart task management workflow using Mail.app is now even smarter and fabulouser thanks to the added elegance and power of Alarms, a great utility which I encourage you to check out.

Now if only Mr. Alarms could write an iPhone/iPad app that allowed me to see my Apple Mail/iCal alarms on the go, I would be eternally grateful (and would gladly pay for the privilege).

13. April 2011 by sknob
Destination: Geekiness | Leave a comment

“Pocket Vince” iPhone Web App

pocket vince screenshot

Those damn Muses. First, they got me to create a site for my music, which was scattered all over the Web.

This time, they got it into their pretty little heads that I should create an iPhone-optimized version (because my particular muse, wanted “Vincent in my Pocket” she said, and she happens to own an iPhone).

Muses tend to be pretty insistent and convincing creatures, so I thought “what the hell”, there’s no harm in looking into the matter, right?

WRONG!

I quickly found out that there are several JavaScript/CSS bundles that simplify the gruntwork and handle basic features.

iWebKit for instance will let you get an iPhone-optimized website off the ground pretty quickly. I tried it, and it worked as advertised.

But I’m a perfectionist (or an idiot if you prefer), and I knew that one could code iPhone Web Apps (as opposed web-sites), that behave a lot like native iPhone apps.

jQTouch is a prime contender in this space. And that’s what I went with.

I’m only a Sunday programmer, but again, I had something basic working fairly quickly. Yet as any programmer knows, the devil is in the details.

Initially, I thought I’d let the user click on a song, which would launch the standard iPhone media-player (this worked in iWebKit). I quickly discovered that for whatever reason, jQTouch didn’t allow that.

I therefore delved into the new HTML5 audio spec, and again, had something basic working in no time. But when I started organizing songs into albums, the behavior of the audio was erratic and buggy. It would sometimes cut off when I changed screens, sometimes not. I spent hours and days on this bug, in total OCD mode. I tried several GitHub forks of jQTouch, to no avail, and in utter frustration and despair, just gave up on the whole thing.

The muses were disappointed, but they were also relieved, after hearing me bitch the whole time.

Unfortunately, the damn thing was still simmering in the back of my mind, and one night, I actually dreamt of a solution to my bug. It turned out it didn’t work, but as I was fucking with the code trying to do something totally unrelated, the audio bug VANISHED. I quickly understood why, and recognized that I had actually been close to fixing it dozens of times.

Victory was at hand.

I had a nice beta, except for one, last, pesky detail.

When you click on an item in jQTouch, you get a nice, smooth, sliding animation into the next screen, just like in native apps. But after entering more songs into the beta, I soon became obsessed with an annoying jump to the top of the current screen before sliding into the next one.

Here again, I spent a crazy amount of time trying to fix it, which I finally did, by borrowing bits of code from different development versions of jQTouch. (It is ironic that while the sliding animation is a big jQTouch selling point, none of the versions actually get it quite right. For more details, look here).

The end-result is something that feels solid when you save a Web Clip to your iPhone home screen, and a little flakier but pretty damn stable if you just run it in Safari.

You can try it here.

If you don’t have an iPhone handy, it works well in Safari for Mac. For some reason, the jQTouch sliding behavior doesn’t work in Chrome (Mac), even though it uses the same browser engine as Safari. It won’t work in Firefox, because it only supports the .ogg audio format in its implementation of HTML5 audio. I don’t know and don’t care if it works with any version of Internet Explorer. It might even work on some Android phones. No promises, but feel free to let me know.

03. January 2011 by sknob
Destination: Geekiness | Leave a comment

You DON’T Need to Tame your Inbox

There are a gazillion articles out there in the vaporworld about taming your email inbox, reaching “inbox zero”, and nearly as many anal-retentive task-management strategies, à la GTD, to achieve this holy grail of neat-freakness (or is it freak-neatness?).

Never mind that these strategies sold as universal remedies against chaos are heavily culturally biased, as some cultures are actually capable of managing a little chaos, and sometimes even welcome it.

No, the point I want to make, as a follow-up to my recent post on simple task management with Mail.app, is that there is absolutely, positively, no need whatsoever to tame your inbox, achieve inbox zero, apply complex GTD strategies to systematically handle and dispatch incoming emails according to a strict set of rules, or any other such nonsense.

None.

Because really, folders are just so yesterday, and storage space is nearly infinite.

So who cares if your inbox isn’t empty?! The only thing that matters, is being able to find stuff when you need it.

So let me tell you about my Inbox. As I write this, it contains 30,602 messages. That’s right. Thirty thousand six hundred and two messages.

i0-001.jpg

But you know what? I couldn’t care less, because I never actually set foot in my inbox!

I use Smart Folders in Mail.app, and Labels in Gmail. I can therefore easily see all e-mails from client X by going into the corresponding Smart Folder in Mail.app or label in Gmail.

But I only rarely do that.

In Mail.app, I’ve set up the follwing Smart Mailboxes:

i0-003.jpg

  • New Mail only shows me unread e-mails
  • Today shows me all incoming and outgoing e-mails of the day
  • Yesterday shows me all incoming and outgoing e-mails of the previous day

For everything else, I simply use search. Because searching in the actual content (and attachments!) of over thirty thousand emails in Mail.app is instantaneous.

i0-010.jpg

I can find a quote I sent to a client 5 years ago in less time that it takes to read this sentence or enunciate Gee Tee Dee.

So even though I usually exchange at least 50 emails a day, most of the time, I just need to handle this frightening amount of chaos:

i0-009.jpg

That’s it!

A few technical, behind the scenes tidbits are available after the break.

Continue Reading →

20. February 2010 by sknob
Destination: Geekiness | Leave a comment

Task Management with Mail.app

I have to juggle dozens of short-term to-do items at any given time, so I need a process that is fast and practical, so that things don’t fall through the cracks. I stopped relying on my memory a long time ago.

Fast and practical in this case means simple. I like simple.

So my process relies on a single application : Apple’s Mail.app.

It goes like this :

  1. I receive an email, say like this one, that contains an action item
  2. todo01.png

  3. I highlight the relevant action item in the message body
  4. todo02.png

  5. I right click and select New Todo (Leopard users, click on the ToDo button in the toolbar)
  6. todo03.png

  7. I tweak the Todo header text (I prefix my todo’s with little codes, as in T: for Translation) and add an alarm if necessary (red circly-arrowy thingy)
  8. todo04.png

Thats it. It takes a couple of seconds to create a todo.

Now, to make this even more practical required two extra (one-time) steps:

  1. I created smart mailbox in Mail that displays all of my incomplete Todos.
  2. todo06.png

  3. I created a separate mail-viewer window (File > New Viewer Window). I selected my smart mailbox, then hid the sidebar (View > Hide Mailboxes) and hid the toolbar (View > Hide Toolbar). The result is a second Mail window that is always open and only shows my ToDos.
  4. todo07.png

From this window:

  • I can click on the yellow check boxes to mark an item as done.
  • I can click on the little grey arrow to open the original email message, reply to the message and attach my deliverables to the reply.

Todo? Tada!

08. January 2010 by sknob
Destination: Geekiness | 2 comments

I did it again…

I bought the new iPhone 3G S today. On launch day. I know…

I skipped the iPhone 3G, so the feature-gap with my G1 iPhone made the upgrade worth it. The Geekette, bless her geeky soul, encouraged me to go for it (she should be getting the old iPhone, which is better than her old Nokia, but I know that was only a secondary consideration…).

I already covered an iPhone OS 3.0 killer feature a few days ago, and I won’t go nuts like when I unwrapped the revolutionary original iPhone.

Nevertheless, I’ll share a few impressions in case you’re curious (and even if you’re not):

  • The 3G S is very noticeably a lot much faster, in every respect. The UI is like liquid butter (as opposed to just plain butter).
  • The Maps + Compass combo is incredible (or will be on the rare occasions that I’m somewhere that I don’t know like the back of my hand). The way the pins on the Map move in 3D space while the map rotates to show your direction is worth it in itself, though.
  • The touch to focus feature of the camera makes a world of difference. And I’m sure I can find a use for video recording (and the Video Stabilization feature in iMovie ’09).
  • I called the person with the weirdest last name I know (mine) using the (French version of) Voice control. Worked like a charm.
  • Even though MMS and Tethering are both available on launch in France, I haven’t tried either yet. Might be useful in a pinch (<— iPhone humor).

Finally, I thought I would indulge in a frivolous little experiment:

iphoneab2.jpg
“Still life with cashews and guitar pick and iPhone 3G S” shot with original iPhone

iphoneab1.jpg
“Still life with cashews and guitar pick and original iPhone” shot with iPhone 3G S

Confusing, isn’t it?

19. June 2009 by sknob
Destination: Geekiness, User Interface Design | Leave a comment

iPhone 3.0 Killer Feature

iphone30.jpg

I installed iPhone OS 3.0 a little ahead of schedule (ahem) on my 1st generation iPhone 2G.

I can’t comment on the features that will only work on the iPhone 3G S (yet), but as for the rest, I have to say that for me, the feature that stands out was somewhat unexpected: search.

You see, the iPhone application launchpad was designed before the iPhone SDK, the App Store, and 50,000 apps hit the cloud. While it’s fun to flick the screens left and right, it’s a royal pain in the ass to rearrange your app icons in a meaningful way, if like me, you have 7 or 8 screens worth of apps (x 16 apps per page…)

When Apple previewed iPhone 3.0 a few months ago, I was hoping for radical change in this regard, and the Spotlight Search feature seemed like a lame response.

I was wrong.

After playing with iPhone OS 3.0 for a short while, I think I can safely say that I couldn’t care less about my giant messy heap of half-sorted apps anymore. It takes fewer taps to swipe left from the main home screen to reveal the search keyboard, type a couple of letters, and tap the app, email, calendar event, song or contact of interest, than to flick through the Home pages.

And that means I’m a happier iPhone geek.

Update: I noticed that when you’re on the main home screen, you can press on the physical Home button to go to the Spotlight Search screen, and back.

13. June 2009 by sknob
Destination: Geekiness, User Interface Design | Leave a comment

Double-O-Geek

I’m not at liberty to tell you what I was doing in Cupertino, California all last week.

Let’s just say that while a certain company was unveiling its new offerings in the opening Keynote to an annual World Wide Developer’s Conference, I was driving back to San Francisco Airport, to fly home to Paris.

But caving in to my geeky vanity, I’ve posted a little picture… After the jump.

Continue Reading →

10. June 2009 by sknob
Destination: Geekiness | Leave a comment

Electric Cars, in B flat

inbb.jpg

Many years ago, while daydreaming, which I do a lot, I was thinking about how to solve a very real and big problem with electric cars (besides autonomy). They are so silent, that pedestrians, cyclists and other vehicles don’t hear them coming.

And so I thought to myself that electric cars should emit noise of some kind, but that it should be as pleasant as possible. Like, say, music.

I further imagined that there should be some rules (automatically picked-up over the airwaves by the vehicles), so that the electric cars would always be playing in the same key (maybe a minor key to commemorate a sad occasion, a bright major key to celebrate something positive, etc., or different keys according to the weather, the time of day, the density of traffic, the unemployment rate, whatever…)

It wouldn’t matter what the rhythmic structure might be, or the timbre or character of the sound of each electric vehicle. The more varied, the better, so that despite the single key, there would be all kinds of interesting polyrhythms and orchestrations going on.

On occasion, I’ve actually been stupid enough to mention this idea to people. They usually stared back at me with a mixture of fear and pity.

Maybe they—and you—will think I’m slightly less batty after listening to In Bb 2.0.

In Bb 2.0 is a collaborative music and spoken word project conceived by Darren Solomon.

Different individuals record videos of themselves playing different instruments and/or devices in B flat. The videos are displayed in a mosaic and you can start/stop each video individually at any time.

Play with the page for a couple of minutes. The result may surprise you. It is remarkably pleasing to the ear.

It didn’t surprise me. Because it is exactly what I imagined for my crazy musical electric car idea…

16. May 2009 by sknob
Destination: Geekiness, Making Music, Surfin' | Leave a comment

I was on Facebook for 24 hours

The title says it all.

02. May 2009 by sknob
Destination: Geekiness, Surfin' | 1 comment

← Older posts