Skip to content

Instantly share code, notes, and snippets.

@mattborn
Last active August 29, 2015 14:04
Show Gist options
  • Save mattborn/6351a34d29250ecd4519 to your computer and use it in GitHub Desktop.
Save mattborn/6351a34d29250ecd4519 to your computer and use it in GitHub Desktop.
Bands.

Everything we listened to in high school.

Changelog

  • Nevermind.
  • Add basic front-end markup, styles + scripts.
{
"bands": [
{
"name": "3 Doors Down",
"era": "Middle School",
"genre": "Alternative",
"tracks": [
{
"title": "Kryptonite",
"date": "2000-01-17",
"yotube": "xPU8OAjjS4k"
}
]
},
{
"name": "30 Seconds to Mars",
"era": "College",
"genre": "Alternative"
},
{
"name": "311",
"era": "Growing Up",
"genre": "Alternative",
"tracks": [
{
"title": "Amber",
"date": "2002-07-23",
"youtube": "SUFSB2plwzM"
}
]
},
{
"name": "The Academy Is...",
"era": "College",
"genre": "Emo",
"label": "Fueled by Ramen",
"albums": [
{
"title": "Almost Here",
"year": "2005"
}
]
},
{
"name": "Adema",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Giving In",
"date": "2001-07-03",
"youtube": "QTOKnYNI3tU"
}
]
},
{
"name": "AFI",
"era": "Middle School",
"genre": "Emo",
"albums": [
{
"title": "Sing the Sorrow",
"year": "2003"
}
],
"tracks": [
{
"title": "Girl's Not Grey",
"year": "2002",
"youtube": "1Yzu-4kJg6g"
}
]
},
{
"name": "Alien Ant Farm",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Smooth Criminal",
"year": "2001",
"youtube": "CDl9ZMfj6aE"
}
]
},
{
"name": "Alkaline Trio",
"era": "Middle School",
"genre": "Emo",
"albums": [
{
"title": "Maybe I'll Catch Fire",
"year": "2000"
},
{
"title": "From Here to Infirmary",
"year": "2001"
}
],
"tracks": [
{
"title": "Radio",
"year": "2000",
"youtube": "r2qerZ8KOrU"
}
]
},
{
"name": "The All-American Rejects",
"era": "High School",
"genre": "Pop punk",
"albums": [
{
"title": "The All-American Rejcts",
"year": "2002"
}
],
"tracks": [
{
"title": "My Paper Heart",
"year": "2002"
},
{
"title": "Swing, Swing",
"year": "2002",
"youtube": "KtypSRcwIhA"
}
]
},
{
"name": "Amazing Transparent Man",
"era": "High School",
"genre": "Punk",
"tracks": [
{
"title": "Edit/Undo",
"year": "2001"
}
]
},
{
"name": "Anberlin",
"era": "High School",
"genre": "Emo",
"tracks": [
{
"title": "",
"date": ""
},
{
"title": "",
"date": "",
"youtube": ""
}
]
},
{
"name": "The Apex Theory",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Bullshed",
"date": "2001-10-09"
},
{
"title": "Apossibly",
"date": "2002-04-02",
"youtube": "kW2KaAgNcN4"
}
]
},
{
"name": "Aphex Twin",
"era": "Middle School",
"genre": "Electronic",
"albums": [
{
"title": "Drukqs",
"year": "2001"
}
],
"tracks": [
{
"title": "Cock/ver10",
"year": "2001"
}
]
},
{
"name": "Armor for Sleep",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Dream to Make Believe",
"year": "2003"
}
]
},
{
"name": "As Tall As Lions",
"era": "High School",
"genre": "Indie rock"
},
{
"name": "At the Drive-In",
"era": "Middle School",
"genre": "Post-hardcore",
"label": "Fearless",
"albums": [
{
"title": "Relationship of Command",
"year": "2000"
}
],
"tracks": [
{
"title": "One Armed Scissor",
"date": "2000-08-07",
"youtube": "7NYbojdoAQE"
}
]
},
{
"name": "Atreyu",
"era": "College",
"genre": "Metalcore",
"tracks": [
{
"title": "Right Side of the Bed",
"year": "2004",
"youtube": "KBpAvdBeBsU"
}
]
},
{
"name": "Ben Folds",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Bitches Ain't Shit",
"year": "2005"
},
{
"title": "Rockin' the Suburbs",
"year": "2001",
"youtube": "34u_3Z9_LUw"
}
]
},
{
"name": "Ben Kweller",
"era": "High School",
"genre": "Indie rock",
"albums": [
{
"title": "Sha Sha",
"year": "2002"
}
],
"tracks": [
{
"title": "Rockin' the Suburbs",
"year": "2001",
"youtube": "34u_3Z9_LUw"
},
{
"title": "Wasted & Ready",
"year": "2002",
"youtube": "TIkCpSyg5oY"
}
]
},
{
"name": "Benny Benassi",
"era": "High School",
"genre": "Electro house",
"tracks": [
{
"title": "Satisfaction (Isak original mix)",
"date": "2002-06-12",
"youtube": "4jHY2pCGhFI"
}
]
},
{
"name": "Blink 182",
"era": "Middle School",
"genre": "Pop punk",
"albums": [
{
"title": "Enema of the State",
"year": "1999"
},
{
"title": "Take Off Your Pants and Jacket",
"year": "2001"
}
],
"tracks": [
{
"title": "What's My Age Again?",
"year": "1999",
"youtube": "K7l5ZeVVoCA‎"
},
{
"title": "All the Small Things",
"year": "1999",
"youtube": "9Ht5RZpzPqw‎"
},
{
"title": "Adam's Song",
"year": "1999",
"youtube": "2MRdtXWcgIw‎"
},
{
"title": "The Party Song",
"year": "1999"
},
{
"title": "Anthem Part Two",
"year": "2001"
},
{
"title": "First Date",
"year": "2001",
"youtube": "vVy9Lgpg1m8‎"
},
{
"title": "Stay Together for the Kids",
"year": "2001",
"youtube": "K7l5ZeVVoCA‎"
},
{
"title": "Family Reunion",
"year": "2001"
}
]
},
{
"name": "Blue Meanies",
"era": "Middle School",
"genre": "Ska",
"tracks": [
{
"title": "Grandma Shampoo",
"year": "1999",
"youtube": "wMvMuHji790"
}
]
},
{
"name": "Box Car Racer",
"era": "High School",
"genre": "Emo",
"tracks": [
{
"title": "I Feel So",
"year": "2001",
"youtube": "sPEGbxL9AoQ"
}
]
},
{
"name": "Brand New",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Your Favorite Weapon",
"year": "2001"
},
{
"title": "Deja Entendu",
"year": "2003"
}
],
"tracks": [
{
"title": "Jude Law and a Semester Abroad",
"year": "2002",
"youtube": "ZvzHyHgc4lA"
},
{
"title": "The Quiet Things That No One Ever Knows",
"year": "2003",
"youtube": "qgtkPKZ2OPk"
},
{
"title": "Sic Transit Gloria... Glory Fades",
"year": "2003",
"youtube": "h3YVKTxTOgU"
}
]
},
{
"name": "Breaking Pangaea",
"era": "High School",
"genre": "Emo",
"tracks": [
{
"title": "Colors on the Inside",
"year": "2000"
}
]
},
{
"name": "Bright Eyes",
"era": "Middle School",
"genre": "Emo",
"label": "Saddle Creek",
"albums": [
{
"title": "Fevers and Mirrors",
"year": "2000"
},
{
"title": "I'm Wide Awake, It's Morning",
"year": "2004"
}
],
"tracks": [
{
"title": "Lover I Don't Have to Love",
"year": "2002"
},
{
"title": "Take It Easy (Love Nothing)",
"year": "2004"
}
]
},
{
"name": "Bush",
"era": "Middle School",
"genre": "Alternative",
"albums": [
{
"title": "Sixteen Stone",
"year": "1994"
},
{
"title": "Razorblade Suitcase",
"year": "1996"
},
{
"title": "The Science of Things",
"year": "1999"
},
{
"title": "Golden State",
"year": "2001"
}
],
"tracks": [
{
"title": "Comedown",
"year": "1995"
},
{
"title": "Glycerine",
"year": "1995"
},
{
"title": "Machinehead",
"year": "1996"
},
{
"title": "Swallowed",
"year": "1996"
},
{
"title": "The Chemicals Between Us",
"year": "1999"
},
{
"title": "Warm Machine",
"year": "2000"
},
{
"title": "Letting the Cables Sleep",
"year": "2000"
}
]
},
{
"name": "The Calling",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Wherever You Will Go",
"year": "2001",
"youtube": "iAP9AF6DCu4"
}
]
},
{
"name": "Chevelle",
"era": "High School",
"genre": "Metal",
"from": "Grayslake, Illinois",
"albums": [
{
"title": "Wonder What's Next",
"year": "2002"
}
],
"tracks": [
{
"title": "Send the Pain Below",
"year": "2002"
},
{
"title": "Closure",
"year": "2002"
},
{
"title": "The Red",
"year": "2002"
}
]
},
{
"name": "Cold",
"era": "High School",
"genre": "Metal",
"tracks": [
{
"title": "No One",
"year": "2000"
},
{
"title": "End of the World",
"year": "2000"
},
{
"title": "Gone Away",
"year": "2002"
},
{
"title": "Stupid Girl",
"year": "2003"
}
]
},
{
"name": "Collective Soul",
"era": "Middle School",
"genre": "Emo"
},
{
"name": "Cool Hand Luke",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "The Fires of Life",
"year": "2004"
}
]
},
{
"name": "Copeland",
"era": "High School",
"genre": "Indie rock",
"albums": [
{
"title": "Beneath Medicine Tree",
"year": "2003"
}
]
},
{
"name": "Counting Crows",
"era": "Middle School",
"genre": "Alternative"
},
{
"name": "Crazy Town",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Butterfly",
"date": "2000-11-13"
},
{
"title": "Revolving Door",
"date": "2001-08-14"
}
]
},
{
"name": "Creed",
"era": "Middle School",
"genre": "Alternative",
"albums": [
{
"title": "Human Clay",
"year": "1999"
}
],
"tracks": [
{
"title": "Higher",
"date": "1999-08-24"
},
{
"title": "With Arms Wide Open",
"date": "2000-04-24"
}
]
},
{
"name": "The Crystal Method",
"era": "Middle School",
"genre": "Electronic",
"tracks": [
{
"title": "(Can't You) Trip Like I Do feat. Filter",
"year": "1997"
},
{
"title": "Name of the Game",
"year": "2001"
}
]
},
{
"name": "Cursive",
"era": "High School",
"genre": "Emo",
"label": "Saddle Creek",
"tracks": [
{
"title": "Art is Hard",
"year": "2003"
},
{
"title": "The Recluse",
"year": "2003"
}
]
},
{
"name": "Daniel Bedingfield",
"era": "High School",
"genre": "Electronic",
"tracks": [
{
"title": "Gotta Get Thru This",
"year": "2001"
}
]
},
{
"name": "Dashboard Confessional",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "The Places You Have Come to Fear the Most",
"year": "2001"
},
{
"title": "So Impossible EP",
"year": "2001"
},
{
"title": "A Mark, a Mission, a Brand, a Scar",
"year": "2003"
}
],
"tracks": [
{
"title": "Screaming Infidelities",
"year": "2000"
},
{
"title": "The Places You Have Come to Fear the Most",
"year": "2001"
},
{
"title": "Hands Down",
"year": "2001"
},
{
"title": "So Impossible",
"year": "2001"
},
{
"title": "Vindicated",
"year": "2004"
}
]
},
{
"name": "Deathcab for Cutie",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Transatlanticism",
"year": "2003"
}
],
"tracks": [
{
"title": "The New Year",
"year": "2003"
},
{
"title": "The Sound of Settling",
"year": "2001"
}
]
},
{
"name": "Deftones",
"era": "Middle School",
"genre": "Alternative",
"albums": [
{
"title": "White Pony",
"year": "2000"
}
],
"tracks": [
{
"title": "Back to School (Mini Maggit)",
"date": "2000-06-20",
"youtube": "lMPtIhAPnn4"
},
{
"title": "Digital Bath",
"year": "2000-06-20",
"youtube": "9tmPBuSpmfA"
},
{
"title": "Knife Party",
"year": "2000-06-20",
"youtube": "dVMfISO9T1Q"
}
]
},
{
"name": "Dillinger Escape Plan",
"era": "High School",
"genre": "Emo"
},
{
"name": "Disturbed",
"era": "High School",
"genre": "Emo"
},
{
"name": "The Early November",
"era": "High School",
"genre": "Emo"
},
{
"name": "Emery",
"era": "High School",
"genre": "Emo"
},
{
"name": "Fall Out Boy",
"era": "High School",
"genre": "Emo"
},
{
"name": "Fenix TX",
"era": "High School",
"genre": "Emo"
},
{
"name": "Finch",
"era": "High School",
"genre": "Emo"
},
{
"name": "Finger Eleven",
"era": "High School",
"genre": "Emo"
},
{
"name": "From First to Last",
"era": "High School",
"genre": "Emo"
},
{
"name": "Further Seems Forever",
"era": "High School",
"genre": "Emo"
},
{
"name": "Glassjaw",
"era": "High School",
"genre": "Emo"
},
{
"name": "Goldfinger",
"era": "High School",
"genre": "Emo"
},
{
"name": "Good Charlotte",
"era": "High School",
"genre": "Emo"
},
{
"name": "Gorillaz",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Clint Eastwood",
"year": "2001"
}
]
},
{
"name": "Green Day",
"era": "High School",
"genre": "Emo"
},
{
"name": "Hawthorne Heights",
"era": "High School",
"genre": "Emo"
},
{
"name": "Hellogoodbye",
"era": "High School",
"genre": "Emo"
},
{
"name": "Hey Mercedes",
"era": "High School",
"genre": "Emo"
},
{
"name": "Hoobastank",
"era": "High School",
"genre": "Emo"
},
{
"name": "Incubus",
"era": "High School",
"genre": "Emo"
},
{
"name": "Jack’s Mannequin",
"era": "College",
"genre": "Emo"
},
{
"name": "Jimmy Eat World",
"era": "High School",
"genre": "Emo"
},
{
"name": "The Juliana Theory",
"era": "High School",
"genre": "Emo"
},
{
"name": "Less Than Jake",
"era": "High School",
"genre": "Emo"
},
{
"name": "Local H",
"era": "High School",
"genre": "Emo"
},
{
"name": "Lucky Boys Confusion",
"era": "High School",
"genre": "Emo"
},
{
"name": "Mae",
"era": "High School",
"genre": "Emo"
},
{
"name": "Mars Volta",
"era": "High School",
"genre": "Emo"
},
{
"name": "Matchbook Romance",
"era": "High School",
"genre": "Emo"
},
{
"name": "Metric",
"era": "High School",
"genre": "Emo"
},
{
"name": "Mewithoutyou",
"era": "High School",
"genre": "Emo"
},
{
"name": "Ministry of Sound",
"era": "High School",
"genre": "Trance",
"albums": [
{
"title": "Trance Nation Deeper",
"year": "2003",
"youtube": "gpkXk-lFFXw"
}
]
},
{
"name": "MxPx",
"era": "High School",
"genre": "Emo"
},
{
"name": "Motion City Soundtrack",
"era": "High School",
"genre": "Emo"
},
{
"name": "Muse",
"era": "High School",
"genre": "Emo"
},
{
"name": "My Chemical Romance",
"era": "High School",
"genre": "Emo"
},
{
"name": "New Found Glory",
"era": "High School",
"genre": "Emo"
},
{
"name": "NOFX",
"era": "High School",
"genre": "Emo"
},
{
"name": "Offspring",
"era": "High School",
"genre": "Emo"
},
{
"name": "Our Lady Peace",
"era": "High School",
"genre": "Alternative",
"albums": [
{
"title": "Gravity",
"year": "2002"
}
],
"tracks": [
{
"title": "Somewhere Out There",
"year": "2002",
"youtube": "8SzFaEqbLRM"
},
{
"title": "Innocent",
"year": "2002",
"youtube": "h1Z89zW-8sY"
}
]
},
{
"name": "Paul Oakenfold",
"era": "High School",
"genre": "Electronic",
"albums": [
{
"title": "Bunkka",
"year": "2002"
}
],
"tracks": [
{
"title": "Ready Steady Go",
"year": "2002",
"youtube": "z7uwNZAPKKU"
},
{
"title": "Zoo York",
"year": "2002"
}
]
},
{
"name": "Pedro the Lion",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Control",
"year": "2002"
},
{
"title": "Achilles’ Heel",
"year": "2004"
}
],
"tracks": [
{
"title": "Foregone Conclusions",
"year": "2004",
"youtube": "NR62r2hNRgg"
}
]
},
{
"name": "P.O.D.",
"era": "Middle School",
"genre": "Metal",
"albums": [
{
"title": "The Fundamental Elements of Southtown",
"year": "1999"
},
{
"title": "Satellite",
"year": "2001"
}
],
"tracks": [
{
"title": "Southtown",
"year": "1999",
"youtube": "YWl9tjO7KtA"
},
{
"title": "Alive",
"year": "2001",
"youtube": "qxAcx8jyqoY"
},
{
"title": "Youth of the Nation",
"year": "2001",
"youtube": "1Vq_WDf6NT0"
},
{
"title": "Boom",
"year": "2001",
"youtube": "lhJfdWxpI2Q"
}
]
},
{
"name": "Postal Service",
"era": "High School",
"genre": "Indie rock",
"albums": [
{
"title": "Give Up",
"year": "2003"
}
],
"tracks": [
{
"title": "Such Great Heights",
"year": "2003",
"youtube": "0wrsZog8qXg"
},
{
"title": "The District Sleeps Alone Tonight",
"year": "2003",
"youtube": "xUIBnmdJJ50"
},
{
"title": "We Will Become Silhouettes",
"year": "2005",
"youtube": "0rKC7ElkTUQ"
}
]
},
{
"name": "Powerman 5000",
"era": "Middle School",
"genre": "Metal",
"tracks": [
{
"title": "When Worlds Collide",
"year": "1999",
"youtube": "lsV500W4BHU"
}
]
},
{
"name": "Puddle of Mudd",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Control",
"year": "2001",
"youtube": "I0-lENIRHaM"
},
{
"title": "Blurry",
"year": "2001",
"youtube": "xJJsoquu70o"
},
{
"title": "She Hates Me",
"year": "2001",
"youtube": "BYE4CVhVkhw"
}
]
},
{
"name": "Rammstein",
"era": "Middle School",
"genre": "Metal",
"tracks": [
{
"title": "Du Hast",
"year": "1997",
"youtube": "-gZ25MYwWpM"
}
]
},
{
"name": "Saves the Day",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Stay What You Are",
"year": "2001"
}
],
"tracks": [
{
"title": "At Your Funeral",
"year": "2001",
"youtube": "NwW0q65VIas"
},
{
"title": "Freakish",
"year": "2001",
"youtube": "2eE-SnlkE3M"
}
]
},
{
"name": "Silverchair",
"era": "Middle School",
"genre": "Alternative",
"tracks": [
{
"title": "Tomorrow",
"year": "2003",
"youtube": "RZD982yrmx4"
},
{
"title": "Ana's Song (Open Fire)",
"year": "1999",
"youtube": "zNK_r2QAXAo"
},
{
"title": "Miss You Love",
"year": "1999",
"youtube": "c-eVmAzx4og"
}
]
},
{
"name": "Silverstein",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "When Broken is Easily Fixed",
"year": "2003"
},
{
"title": "Discovering the Waterfront",
"year": "2005"
}
],
"tracks": [
{
"title": "Smashed into Pieces",
"year": "2003",
"youtube": "eD3QkNyORIo"
},
{
"title": "Giving Up",
"year": "2003",
"youtube": "4Cn-zoM1bxk"
},
{
"title": "Smile in Your Sleep",
"year": "2005",
"youtube": "mgtaRbx4pPQ"
},
{
"title": "My Heroine",
"year": "2005",
"youtube": "K9uiF5e2E9k"
}
]
},
{
"name": "Simple Plan",
"era": "High School",
"genre": "Pop punk",
"albums": [
{
"title": "No Pads, No Helmets... Just Balls",
"year": "2002"
}
],
"tracks": [
{
"title": "I’d Do Anything",
"year": "2002",
"youtube": "H2M7zo8ZziE"
},
{
"title": "I’m Just a Kid",
"year": "2002",
"youtube": "_GOR5gvQwDI"
},
{
"title": "Perfect",
"year": "2002",
"youtube": "RUi54JTgL5s"
}
]
},
{
"name": "Smashing Pumpkins",
"era": "Middle School",
"genre": "Alternative",
"albums": [
{
"title": "Siamese Dream",
"year": "1993"
},
{
"title": "Mellon Collie and the Infinite Sadness",
"year": "1995"
}
],
"tracks": [
{
"title": "Today",
"year": "1993",
"youtube": "xmUZ6nCFNoU"
},
{
"title": "Disarm",
"year": "1993",
"youtube": "d1acEVmnVhI"
},
{
"title": "Tonight, Tonight",
"year": "1995",
"youtube": "NOG3eus4ZSo"
},
{
"title": "Zero",
"year": "1995",
"youtube": "NBkjcvNztKQ"
},
{
"title": "Bullet with Butterfly Wings",
"year": "1995",
"youtube": "8-r-V0uK4u0"
},
{
"title": "1979",
"year": "1995",
"youtube": "4aeETEoNfOg"
}
]
},
{
"name": "Snow Patrol",
"era": "High School",
"genre": "Indie rock",
"tracks": [
{
"title": "Run",
"year": "2004",
"youtube": "AOBs8dU4Pb8"
},
{
"title": "Chasing Cars",
"year": "2006",
"youtube": "GemKqzILV4w"
}
]
},
{
"name": "Something Corporate",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Leaving Through the Window",
"year": "2002"
}
],
"tracks": [
{
"title": "I Woke Up in a Car",
"year": "2002",
"youtube": "2iCGJoEFxdY"
},
{
"title": "If You C Jordan",
"year": "2002",
"youtube": "DPPX6dZT0Vw"
},
{
"title": "Hurricane",
"year": "2002"
}
]
},
{
"name": "Staind",
"era": "High School",
"genre": "Metal",
"tracks": [
{
"title": "Mudshovel",
"year": "1999",
"youtube": "FuAC9YIC2Bs"
},
{
"title": "Outside",
"year": "2001",
"youtube": "mVQpfoqsY8Q"
},
{
"title": "It’s Been Awhile",
"year": "2001",
"youtube": "D1xdGTh-aWo"
}
]
},
{
"name": "The Starting Line",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Say It Like You Mean It",
"year": "2002"
}
],
"tracks": [
{
"title": "The Best of Me",
"year": "2003",
"youtube": "zGG0QYjdgJQ"
},
{
"title": "Up & Go",
"year": "2003"
}
]
},
{
"name": "Story of the Year",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Page Avenue",
"year": "2003"
}
],
"tracks": [
{
"title": "Until the Day I Die",
"year": "2003",
"youtube": "l9WKZpC9UbU"
}
]
},
{
"name": "Straylight Run",
"era": "College",
"genre": "Indie rock",
"tracks": [
{
"title": "Existentialism on Prom Night",
"year": "2004",
"youtube": "Neo-I7U1UfI"
}
]
},
{
"name": "Sum 41",
"era": "High School",
"genre": "Pop punk",
"tracks": [
{
"title": "Fat Lip",
"year": "2001",
"youtube": "CMX2lPum_pg"
},
{
"title": "In Too Deep",
"year": "2001",
"youtube": "emGri7i8Y2Y"
}
]
},
{
"name": "Sunny Day Real Estate",
"era": "Middle School",
"genre": "Emo",
"tracks": [
{
"title": "Faces in Disguise",
"year": "2000",
"youtube": "CSvFpBOe8eY"
}
]
},
{
"name": "System of a Down",
"era": "High School",
"genre": "Metal",
"albums": [
{
"title": "Toxicity",
"year": "2001"
}
],
"tracks": [
{
"title": "Chop Suey!",
"year": "2001",
"youtube": "CSvFpBOe8eY"
},
{
"title": "Toxicity",
"year": "2001",
"youtube": "iywaBOMvYLI"
},
{
"title": "Aerials",
"year": "2001",
"youtube": "L-iepu3EtyE"
}
]
},
{
"name": "Taking Back Sunday",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Tell All Your Friends",
"year": "2002"
}
],
"tracks": [
{
"title": "MakeDamnSure",
"year": "2006",
"youtube": "4ldjbjwim4k"
},
{
"title": "A Decade Under the Influence",
"year": "2004"
},
{
"title": "Cute Without the ‘E’",
"year": "2002",
"youtube": "xnaFpQaGFCA"
},
{
"title": "You’re So Last Summer",
"year": "2002",
"youtube": "CQE7gu4D1R4"
}
]
},
{
"name": "Third Eye Blind",
"era": "Middle School",
"genre": "Alternative",
"albums": [
{
"title": "Third Eye Blind",
"year": "1997"
}
]
},
{
"name": "Thrice",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "The Artist in the Ambulance",
"year": "2003"
}
],
"tracks": [
{
"title": "All That’s Left",
"year": "2003",
"youtube": "EIHtFDpLFqw"
},
{
"title": "The Artist in the Ambulance",
"year": "2003"
}
]
},
{
"name": "Thursday",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "Full Collapse",
"year": "2001"
},
{
"title": "War All the Time",
"year": "2003"
}
],
"tracks": [
{
"title": "Understanding in a Car Crash",
"year": "2001",
"youtube": "8-cepZ6K7mY"
},
{
"title": "Cross Out the Eyes",
"year": "2001",
"youtube": "6zlnil-v3dg"
},
{
"title": "Paris in Flames",
"year": "2001",
"youtube": "9vPSBousNz0"
},
{
"title": "For the Workforce, Drowning",
"year": "2003",
"youtube": ""
},
{
"title": "Signals Over the Air",
"year": "2003",
"youtube": ""
},
{
"title": "War All the Time",
"year": "2003",
"youtube": ""
}
]
},
{
"name": "Twothirtyeight",
"era": "Middle School",
"genre": "Indie rock",
"tracks": [
{
"title": "Modern Day Prayer",
"year": "2002",
"youtube": "7sgVtIVpDsE"
}
]
},
{
"name": "Underoath",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "They’re Only Chasing Safety",
"year": "2004"
}
],
"tracks": [
{
"title": "A Boy Brushed Red Living in Black and White",
"year": "2004",
"youtube": "7sgVtIVpDsE"
}
]
},
{
"name": "The Union Underground",
"era": "High School",
"genre": "Metal",
"tracks": [
{
"title": "Turn Me On “Mr. Deadman”",
"year": "2000",
"youtube": "7sgVtIVpDsE"
},
{
"title": "South Texas Deathride",
"year": "2000"
},
{
"title": "Killing the Fly",
"year": "2000"
}
]
},
{
"name": "Unwritten Law",
"era": "High School",
"genre": "Alternative",
"tracks": [
{
"title": "Seein’ Red",
"year": "2002",
"youtube": "Tq-T49MqRiQ"
}
]
},
{
"name": "The Used",
"era": "High School",
"genre": "Emo",
"albums": [
{
"title": "The Used",
"year": "2002"
}
],
"tracks": [
{
"title": "The Taste of Ink",
"year": "2002",
"youtube": "AZka3E37k6w"
},
{
"title": "Buried Myself Alive",
"year": "2002",
"youtube": "4OIAiVIN8Ck"
},
{
"title": "Blue and Yellow",
"year": "2002"
}
]
},
{
"name": "Weezer",
"era": "Middle School",
"genre": "Emo",
"albums": [
{
"title": "The Blue Album",
"year": "1994"
}
],
"tracks": [
{
"title": "Hash Pipe",
"year": "2001",
"youtube": "_9BGLtqqkVI"
},
{
"title": "Island in the Sun",
"year": "2001",
"youtube": "erG5rgNYSdk"
}
]
},
{
"name": "The Working Title",
"era": "High School",
"genre": "Emo",
"tracks": [
{
"title": "Never Forever",
"year": "2003"
}
]
},
{
"name": "Yellowcard",
"era": "High School",
"genre": "Pop punk",
"albums": [
{
"title": "Ocean Avenue",
"year": "2003"
}
],
"tracks": [
{
"title": "October Nights",
"year": "2001"
},
{
"title": "Ocean Avenue",
"year": "2003",
"youtube": "X9fLbfzCqWw"
}
]
}
]
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bands.</title>
<style>
@import url(//fonts.googleapis.com/css?family=Lato:300,400,900);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
body {
color: #abc;
font: 100% Lato, Helvetica, Arial, sans-serif;
margin: 0 auto;
padding: 50px;
text-align: center;
}
h1 { color: #456; }
ul {
list-style-type: none;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
.band {
width: 280px;
border-top: 1px solid #ddd;
display: inline-block;
padding: 20px;
text-align: left;
vertical-align: top;
&-name {
color: #456;
font-size: 125%;
font-weight: normal;
margin: 0;
}
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
<script>
// this allows the styles above to retain css code coloring in a
// text editor instead of having everything in this script tag
var head = document.getElementsByTagName('head')[0],
style = document.getElementsByTagName('style')[0],
css = Sass.compile(style.innerHTML);
head.removeChild(style);
document.write("<style>"+ css +"</style>");
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script>
var BandsCollection = Backbone.Collection.extend({
url: "https://gist.githubusercontent.com/mattborn/6351a34d29250ecd4519/raw/bands.json",
parse: function (r) {
return r.bands;
}
});
var BandsView = Backbone.View.extend({
el: 'body',
initialize: function () {
this.collection.on('reset', this.render, this);
this.collection.fetch({reset: true});
},
render: function () {
var band = $('#template').html();
console.log(this.collection.toJSON());
this.collection.each(function (m) {
$('.bands').append( _.template(band, m.toJSON()) );
});
}
});
window.bandsView = new BandsView({
collection: new BandsCollection
});
</script>
</head>
<body>
<h1>Bands.</h1>
<ul class="bands"></ul>
</body>
</html>
<script id="template" type="text/template">
<li class="band">
<h2 class="band-name"><%= name %></h2>
<% var albums = albums || []; _.each(albums, function (album) { %>
<p><%= album.title %></p>
<% }); %>
<% var tracks = tracks || [];
_.each(tracks, function (track) {
var youtube = track.youtube || null; %>
<p><% if (youtube) { %><a href="//www.youtube.com/watch?v=<%= youtube %>" target="_blank"><i class="fa fa-youtube-play"></i> <%= track.title %></a><% } else { %><%= track.title %><% } %></p>
<% }); %>
</li>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment