Old sknoblog (2003–2011)

Out with the old, in with the new

sknoblog has only seen sporadic action lately (like, for the last 2 years!). I’ve been blogging elsewhere (in French).

I’m going to try to repatriate some of my recent froggy blogging here, while separating the old, dead sknoblog archive from the new, alive and kicking sknob/blog.

Most of the new stuff will be in French. Sorry. C’est la vie.

13. January 2013 by sknob
Destination: Site News | Leave a comment

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

Happy Birthday


(Click to enlarge)

See also:
February 13, 2011
September 23, 2010
February 13, 2010
September 23, 2009
February 13, 2009

27. September 2011 by sknob
Destination: Drawings | 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

Happy Birthday


(Click to enlarge)

See also:
September 23, 2010
February 13, 2010
September 23, 2009
February 13, 2009

13. February 2011 by sknob
Destination: Drawings | 3 comments

Penelope Petticue

When the shit hits the fan, celebrate life and love by writing a smutty little pop song such as Penelope Petticue.

22. January 2011 by sknob
Destination: Making Music, Songs | 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

Déboussolé, the video

03. January 2011 by sknob
Destination: Multimedia Authoring, Songs | Leave a comment

“Le chant du crabe” Rehearsal Video

20. October 2010 by sknob
Destination: Making Music, Songs | Leave a comment

Le chant du crabe

Listen to the demos of the music I was commissioned to write for Le chant du crabe, an upcoming play by Compagnie nonante-trois, my brother’s theater company in Lausanne, Switzerland.

  • Suis-moi is to be sung by a siren (presumably by a female actress).
  • Un manteau is a proof of concept for an operatic version of the first song. It features a trio between the siren, Capitaine Cancer and the main character, Malloy. I sing all the parts in the demo. The other version is included to spare you my voice.

14. October 2010 by sknob
Destination: Making Music, Songs | Leave a comment

← Older posts