Monthly Archives: August 2011

Great Performances: Wes Montgomery Live in ’65

This is why I love modern technology, specifically YouTube.

One day a while back I was noodling around online when I decided I wanted to listen to some music. Being lazy, I didn’t want to spend the few extra seconds opening up iTunes on my computer, so I zipped over to YouTube. I was in the mood for some jazz, and I realized that I had never seen any video of Wes Montgomery playing live. None. I knew there was some video out there, but I also knew it was pretty rare to see him in action, most likely due to his untimely death in 1968 at the age of 45.

So I typed in Wes Montgomery in the search box and let ‘er rip. And sure enough, within seconds I was watching Wes play, with that inimitable technique, right before my eyes. I was actually a little stunned. That’s Wes, I thought. Holy crap, that’s Wes. Had I seen this in my younger, practice-guitar-for-hours days, I would have grabbed my guitar and attempted to cop his thumb technique by starting and pausing the video on every frame until my eyes hurt. Instead, I just sat dumbfounded, watching a legend at work.

The video itself is a bit of an oddity. It is actually three separate sessions from 1965 while Wes was touring in Europe. Some of the dates are from London, some from Holland. The tunes run the gamut from up-tempo burners like Impressions and Four on Six, to mellow ballads like Here’s That Rainy Day. And of course there’s some blues.

The actual tunes don’t matter so much to me though. What matters is that it’s there. Wes Montgomery has influenced just about every modern guitarist in the world, and that’s not hyperbole. And I’m not just talking about jazz guitarists – consider Jimi Hendrix, Stevie Ray Vaughan, Joe Satriani, Steve Vai. Pat Metheny has called Wes the greatest guitarist of all time, and it’s hard to argue.  The fact that it’s possible to watch Wes play, play anything, is such a gift.

Metheny wrote the excellent liner notes for this DVD (wherein he calls him the greatest). You can read them on his website here.

Links

YouTube: Impressions Live

Amazon: Jazz Icons: Wes Montgomery Live in ’65

Advertisements

Building a JQuery Retinal Scanner

I have been having tons of fun working on the viral site for Erin Kellison’s Segue Institute. We’ve added lots of cool content to the site, and have plans to keep it going (and growing) for quite a while.

Maybe my favorite section of the site is the retinal scanner. It’s the second page you come to when you visit the site (the initial page is a login page). The Segue Institute is supposed to be a very high-tech facility, and the site experience is meant to be that of a Segue employee logging in to their secure website to poke around.

Probably one of the big reasons I like the scanner page so much is because it wasn’t planned. I was working on the main site navigation in the internal pages, and it was giving me fits. I was having a rough time trying to come up with something that was clean and clear to the user, but also fit with the high-tech theme. In a moment of frustration I decided to take a little break, and started brainstorming about various high-tech devices or designs that could work on the site. And immediately I knew we needed a retinal scanner. I started on it that very second, and after a few hours I had it. Gotta love inspiration.

So, on to the good stuff. The scanner is really quite simple. It consists of two images: (1) the scanner background with the sight lines and green radial gradient, and (2) the laser. I went with green because, well, it looked cool. The scanner background is nothing special, just some lines and a gradient on a transparent background. The laser is just a line of green to which I applied some filters for the blurs on the ends. I also added some noise to give it that fluttery sort of look that lasers get when they pass over objects.

The final pieces of the puzzle were two small text paragraphs: one static, with a simple message (“Please hold still”, heh heh) and one hidden, for display when the scanner is finished.

The HTML is again pretty simple. We have a “content” div wrapper, a div for the static message, a div for the hidden message (“auth”), and a div for the scanner (“scanPanel”).  NOTE: line breaks below are for display purposes only. AND ANOTHER THING: both “scanPanel” and “imgLaser” are positioned absolutely so that all the animations start and stop in the right place.

<div id="content">
  <div id="scanPanel" class="contentDiv">
    <img id="imgScanOverlay" src="img/scanbed.png" style="display: none;"/>
    <img id="imgLaser" src="img/scan.png" style="display: none; 
        position: absolute; top: 82px; left: 50px;"/>
  </div>
  <div>
    RETINAL SCAN IN PROGRESS...PLEASE HOLD STILL
  </div>
  <div id="auth" style="display: none;">
    AUTHORIZATION SUCCEEDED...LOADING DASHBOARD
  </div>
</div>

The javascript is where the magic happens. It all starts with a call to loadPanel(), which simply fades in the scanner div. Then the callback method, showScanner(), kicks off a series of animations:

  1. the scanner background is faded in
  2. the laser image is faded in
  3. the laser image’s “top” CSS property is animated to 390px, over a 2.5 second duration. Notice that here we are using the jquery easing plugin to get the effect that the scanner is speeding up through the center, and slowing down at the bottom. There are a bunch of options available here…basically I just tried them and picked the one that felt right.
  4. The laser is animated again, this time back up to the top. Again the easing plugin does its thing.
  5. The laser image is faded out
  6. The callback from the fadeout locates the hidden message and fades it in
  7. Finally, the callback from the fade in does a redirect to the main site. Whew!
NOTE: you could reduce all the nesting below by setting up individual functions for each of the callbacks, however I kind of prefer it this way, it’s easier to visualize what’s going on. Plus, once you minify it, who cares about nesting anyway?
$(document).ready(function () {
  loadPanel($("#scanPanel"))
});

loadPanel = function (panel) {
  panel.fadeIn(500, showScanner)
};

showScanner = function () {
  $("#imgScanOverlay").stop().fadeIn(1800, function () {
    $("#imgLaser").fadeIn(500, function () {
      $(this).animate({ top: "390px" }, 2500, "easeInOutQuint", function () {
        $(this).animate({ top: "82px" }, 2500, "easeInOutQuint", function () {
          $(this).fadeOut(1000, function () {
            $("#auth").fadeIn(1000, function () {
              redirect()
            })
          })
        })
      })
    })
  })
};

redirect = function () {
  setTimeout("window.location = 'dashboard.html';", 2000)
};

So that’s pretty much it. The one thing that I wish I could do with this is make the scanner appear more 3-D when it is animated. Perhaps by animating the width or thickness of the “laser” through its path. Sounds like a fun project for another day.

See the full effect at the SegueInstitute website.

Enjoy!


Great Songs: Three Little Birds

Song: Three Little Birds

Song performed by: Bob Marley & the Wailers

Album: Exodus (also included on Legend)

When I was a kid, maybe 8 years old, I really liked the song “Matthew” by John Denver. It’s a good song, somewhat melodramatic, but I mostly liked it because my name is Matthew. I don’t remember how it got started, but I recall for a few weeks my dad and I used to sit on the couch in our living room, put the song on the stereo, and sing the song together. It wasn’t really a planned bonding moment, it was just one of those random things kids and parents do together and then kind of move on to something else. It’s one of my most cherished childhood memories, and one of the earliest concrete memories I have where music is the focal point.

Flash forward to a few months ago, and I’m burning a CD for my own kids to listen to in the car. I put Three Little Birds on there just for the heck of it – they know the song a bit because it’s featured in a Nick Jr. short animation. We go for a drive to the store. The song comes on. I start singing along: “Don’t worry about a thing…’cause every little thing’s gonna be alright”. Slowly, tentatively, so do my kids. I sing a little louder. They follow suit. Soon we are all singing full voice together. The song ends and we all laugh. I am so full of joy I can’t stand it.

Wikipedia and other sources tell us that the origin of Three Little Birds is disputed. Some say it was written about some of Marley’s backup singers; others say it was about actual birds that fluttered around Marley’s back door. The true story matters little. What matters is the feeling. Others have written about uplift, or elevation (here and here)…I believe this song is the perfect embodiment of this emotion. It is pure inspiration, pure hope and love. This is one of those songs that has the power to lift the soul. In many ways Three Little Birds is a symbol of the things that Bob Marley stood for, and Marley is also a symbol of what Three Little Birds stands for.

Three Little Birds is now a standard in our house. I sing it to the girls at bedtime (along with Little Wing and Blackbird and Summertime). The song is now an indelible piece of my memories, and hopefully my kids’ too.

Three Little Birds Links

YouTube

Amazon (single – mp3)

Amazon (Exodus album – mp3)

Amazon (Exodus album – CD)

Amazon (Legend album – mp3)

Amazon (Legend album – CD)


%d bloggers like this: