The Front End Web Dev Playlist

Posted on 15 November, 2011 by mollydotcom

So last night I was enjoying a nice bottle of wine after dinner with friends and was hanging around Twitter talking music with folks. We got to the topic of Butthole Surfers, a band I adore. Specifically, the line “Invisibility is a relative thing . . .” from the song “Shame of Life” stood out as an obvious CSS joke, which I tweeted:

“invisibility is a relative thing” – Butthole Surfers. #thing{visibility: hidden; position: relative;} – CSS Working Group

Matthew Budd (@matthewbudd) responded, and in our subsequent chat he proposed the idea of a Front End Dev playlist. I love the idea, so I’m asking for your input. Here’s the way it works:

Pick a band, or song from a band, that you like to listen to when you’re working on Front End Web Dev tasks
Compose the band name, song name, or a phrase from a song in HTML, CSS, JavaScript, SVG – any Front End Web technologies (preferably open ones)
Submit your entry to the comment thread on this post
Win community love for your contributions and creativity

Most importantly, let’s have fun and create a really kick-ass playlist, which I will then use at conferences and workshops, and even use as content or code examples in slides – all properly cited and to be considered share-alike under CC licensing.

Ready? Set? GO!

32 thoughts on “The Front End Web Dev Playlist”

Syd Lawrence on 15 November, 2011 at 22:20 said:

saltNPepa = function() {
it = [];
it.push(‘real good’);
}

Reply ↓
Danimations on 15 November, 2011 at 22:32 said:

if (stop == true) {
hammerTime();
this.touchEnabled = false;
}

Reply ↓
MistyRose on 15 November, 2011 at 22:40 said:

“…show me the power child, I’d like to say / that I’m down on my knees today…” – Soundgarden

$(‘#powerChild’).show(2000, function () {
$(this).text(“I’m down on my knees today.”);
});

Reply ↓
whump on 15 November, 2011 at 22:45 said:

// Janelle Monáe
if (Math.max(them, you) === you || Math.min(them, you) === you) {
tightrope.call.keepOn(you);
}

// LMAO’s Party Rock Anthem
window.setInterval(function() {
me.shuffling().shuffling();
}, 24*60*60*1000);

// Blur meets JQuery
if (!otherway) {
$(them).bind(‘play’, function() {you.call.watch(them);});
}

Reply ↓
jkiel on 15 November, 2011 at 22:49 said:

#crazy {feeling: lonely; color: blue;}
#loveme {length: long-as-wanted;}
#worry {emotion: why; allow: yes}

Reply ↓
Dave Ferrick on 15 November, 2011 at 22:51 said:

var thoughtControl = 1;
var brick = 0;
while (thoughControl > 0) {
wall = wall + another[brick];
brick++;
}

Reply ↓
Matthew Budd on 15 November, 2011 at 22:52 said:

A couple from one I started before the post:

The Duke Spirit – This ship was built to last
Beastie Boys – Triple trouble (HTML, CSS, JS)

Reply ↓
Ben Buchanan on 16 November, 2011 at 04:47 said:

I listen to VNV Nation a lot. I guess that would make…

.victory:not(.vengeance) { pride: unbroken; words: unspoken; }

Or perhaps some Reverend Horton Heat:

♥

Reply ↓
- Ben Buchanan on 16 November, 2011 at 04:51 said:
  
  Aww it stripped out the markup. Let’s try again subbing in brackets…
  
  and Mols came in and escaped the characters, you’re welcome
  
  <big class=”rocket”> <abbr title=”Big Red Rocket Of Love”>♥</abbr></big>
  .rocket { color: red; }
  
  Rockabilly uses HTML 4.01, btw. Classic cars, classic markup. Big is totally legit
  
  Reply ↓
  - mollydotcom on 16 November, 2011 at 07:02 said:
    
    Ahem, Ben. Even more classic than that – <big> is actually from HTML 3.2!
mollydotcom on 16 November, 2011 at 07:06 said:

These are brilliant! Hilarious – keep at it kids. So much fun

Reply ↓
Matthew Budd on 16 November, 2011 at 12:44 said:

As I started an ACTUAL playlist on @grooveshark I’ve added everything so far into it, so here it is:

http://tinysong.com/p/4i9pf

It’d be a bit easier if you could include the actual Artist and Title as well as the jQuery/CSS/HTML
I knew Front End Devs had taste in music, apart from Hammer time, which I simply refuse to add!

Reply ↓
- mollydotcom on 16 November, 2011 at 22:39 said:
  
  Matthew: Excellent, and I agree re: MC Hammer but the jokes are funny
  
  Reply ↓
  - Matthew Budd on 17 November, 2011 at 16:10 said:
    
    That is totally true but I’ll leave the song itself out of the playlist, you don’t want people walking out of your workshops before they’ve begun
  - Danimations on 13 January, 2012 at 20:40 said:
    
    Whatever. You can’t touch this because it’s 2 legit 2 quit. Break it down!
Todd on 16 November, 2011 at 16:13 said:

function naughtyByNature(){
if (opp == true) {
youKnowMe();
}
}

Reply ↓
Todd on 16 November, 2011 at 19:08 said:

They Might Be Giants
Birdhouse in Your Soul

function tmbg(){
if (soul) {
birdhouse();
}
}
function birdhouse(){
if(!ballAndChain) drinkForTwo()
}

Reply ↓
mollydotcom on 16 November, 2011 at 22:41 said:

I do find it curious how many devs opt for JavaScript solutions over CSS or HTML. Telling, don’t ya think?

Reply ↓
Alan Gresley on 18 November, 2011 at 08:03 said:

I may have misunderstood what you meant after reading some of the replies. My son has a band which has written a good song (considering my taste in music) and I want to create a CSS3 animation opera to accompany it. I would like to push the coding right to the edge by using CSS gradients with transition, and other things (element constructs) moving around in all types of rotations. This music itself would guide me. I need to learn how to use and element.

Reply ↓
Alan Gresley on 18 November, 2011 at 08:05 said:

I need to learn how to use the <audio> element. The last reply had the code stripped

Reply ↓
- mollydotcom on 18 November, 2011 at 20:16 said:
  
  That sounds extremely creative, Alan. I’d say GO FOR IT! You’ll learn a lot in both CSS and the HTML5
  
  Reply ↓
Grigory V on 20 November, 2011 at 22:49 said:

// Nine Inch Nails
<head style=”-webkit-appearance: hole”>

// Bad Religion
while (Math.random > 0.5) {
truth.strangeness > fiction.strangeness;
}

// you know this song, Molly
while (1 == 2) {
you.knowledge.how_to_look_through_other_peoples_eyes = true;
}

Reply ↓
- mollydotcom on 26 November, 2011 at 08:53 said:
  
  I totally get it, awesome! Now give it to me in four lines of code. (dare )
  
  Reply ↓
Ben Allen on 26 November, 2011 at 00:00 said:

var you = { worse:0, face: document.getElementByID(‘#face’)};

try{
drugs(); // the drugs don’t work
} catch(e){
you.worse++; // they just make you worse and worse
} finally {
showFace(you); //but I know i’ll see your face again
}

Version of The Verve – The drugs don’t work. A wee bit to abstract possibly.

Reply ↓
- mollydotcom on 26 November, 2011 at 08:55 said:
  
  Again, simplify your script. Can you?
  
  I can’t, I suck at JavaScript. I’m counting on ya!
  
  Mols
  
  Reply ↓
  - Ben Allen on 26 November, 2011 at 12:03 said:
    
    Haha challenge accepted. Not as error preventative but:
    
    var you = { worse:0, face: document.getElementByID(‘#face’)};
    
    if(drugsWork() === false){ //The drugs don’t work
    you.worse++; //they just make you worse and worse
    }
    showFace(you); //but I know I’ll see your face again
Matthew Budd on 27 November, 2011 at 23:13 said:

All added to the playlist:

http://tinysong.com/p/4i9pf

I have to say I’m impressed with myself for figuring them all out (I think). Keep em comin, keep em comin!

Reply ↓
Chandra Nalaani on 28 November, 2011 at 02:39 said:

function weDidntStartTheFire(){
var itWasAlwaysBurning = $(“#sinceTheWorldsBeenTurning”);
// we didn’t start the fire
// no we didn’t light it
var butWeTriedToFightIt = ["birth control", "Ho Chi Minh", "Richard Nixon back again", "Moonshot", "Woodstock", "Watergate", "punk rock", "Begin", "Reagan", "Palestine", "terror on the airline", "Ayatollah's in Iran", "Russians in Afghanistan", "Wheel of Fortune", "Sally Ride", "heavy metal", "suicide", "foreign debts", "homeless vets", "AIDS", "crack", "Bernie Goetz", "hypodermics on the shores", "China's under martial law", "rock and roller cola wars", "I can't take it anymore"];
$.each(butWeTriedToFightIt, function(intIndex, objValue){
itWasAlwaysBurning.append(
$(“” + objValue + “”)
);
});
}
//

Reply ↓
- Chandra Nalaani on 28 November, 2011 at 02:48 said:
  
  Forgot about the character stripping :/ Better: git://gist.github.com/1398850.git
  
  Reply ↓
  - Chandra Nalaani on 28 November, 2011 at 02:52 said:
    
    Sigh: gist.github.com/1398850
Chandra Nalaani on 28 November, 2011 at 21:37 said:

// More! Why can’t real work be like this?
// http://bit.ly/soXuxF

$(document).ready(function() {
$(‘#sayYes’).click(function() {
alert(“If you think that you should speak what you feel”);
alert(“For the artists still keepin’ it real”);
});
$(‘#sayNo’).click(function() {
alert(“If you’re fed up and ready to brawl”);
alert(“Then say no way y’all, no way y’all”);
});
});

Reply ↓
Matthew Budd on 4 December, 2011 at 15:30 said:

<div id="you"></div>

<div class="her-potatoe">cold</div>

<div class="her-potatoe">hot</div>
<div class="her-potatoe">hot</div>
<div class="her-potatoe">cold</div>
<div class="her-potatoe">hot</div>

<div class="her-potatoe">cold</div>
<div class="her-potatoe">hot</div>
<div class="her-potatoe">hot</div>
$(document).ready(function() {
var lastPotatoe = $(’her-potatoe’).length – 1;

$("her-potatoe").each(function(i){
var hotOrCold = $(this).text();

if(hotOrCold == ‘hot’){
$(’#you’).animate({top: ‘-=50′}, 100, function() {});

}
if(i == lastPotatoe){
alert(’Fully Elevated!’);
}
});

});

Reply ↓

@mollydotcom

Open All Night

32 thoughts on “The Front End Web Dev Playlist”

Leave a Reply Cancel reply