forked from fionnbharra/nimbupani.github.com
-
Notifications
You must be signed in to change notification settings - Fork 1
/
mblax.html
184 lines (95 loc) · 8.27 KB
/
mblax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mblax | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Two years ago, I went about deliberately learning about the African continent. While prowling around for African music, I fell in love with West …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/mblax.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/drop-shadows-with-css3.html" title="Drop Shadows with CSS3">❬</a>
<a class="next" href="/book-reviews-for-june-2010-part-2.html" title="Book Reviews for June 2010 - Part 2">❭</a>
</nav>
<header>
<time datetime="2010-06-28T00:00:00-07:00" pubdate><span class='month'>Jun</span> <span class='day'>28</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/mblax.html">Mblax</a></h1>
</header>
<div class="entry-content"><p><a href="http://nimbu.in/mblax/"><img src="http://nimbupani.com/files/blog-mblax_0.png" alt="blog-mblax.png" border="0" width="600" height="431"></a></p>
<p>Two years ago, I went about deliberately learning about the <a href="http://nimbupani.com/stalking-africa-online-part-1.html">African continent</a>. While prowling around for African music, I fell in love with West African music <a href="http://www.youtube.com/watch?v=WlTR1m74GSs">at first sight</a> (er, note?) I haven’t found a good way to track where these artists will be performing live (<a href="http://songkick.com">Songkick</a> comes close).</p>
<p></p>
<p>So here it is, a <a href="http://nimbu.in/mblax/">West African Music Events Tracker</a> that tracks some of my favourite West African musicians on tour: Angelique Kidjo, Habib Koite, Salif Keita, Baaba Maal and more.</p>
<p></p>
<h3>Technical Details</h3>
<ol>
<li>I used <a href="http://pipes.yahoo.com/pipes/pipe.info?_id=4a36fa375210cb11ff4cd7aa29caca51">Yahoo pipes</a> to create a JSON feed, from their Myspace, official websites and Facebook pages, which is then rendered into the table. </li>
<li>This site was created using the <a href="http://github.com/paulirish/frontend-pro-template">HTML 5 Boilerplate</a>. It is a project by Paul Irish that I am contributing to, which should be released soon. </li>
<li>If it is not obvious, the site uses all the fancy CSS3 properties: outlines, offsets, multiple columns, text-shadows, and advanced selectors. This was also the first time I used fonts from <a href="http://code.google.com/webfonts">Google’s Font Directory</a> using their <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">WebFont Loader</a>. </li>
<li>I have also used <a href="http://www.alistapart.com/articles/responsive-web-design/">@media CSS queries</a> to adjust the look of the site for different widths, which means if your screen is less than 800px then the site will look different. You can also see it in action if you resize the browser. </li>
</ol>
<p>I hope to soon add more events from <a href="http://songkick.com">Songkick</a> using their <a href="http://songkick.com/api/">API</a>. If you have any other artists to suggest (or anything to improve upon), please do! </p>
<p></p>
<p>Meanwhile, the source files of the website (including the PSD files) are available at <a href="http://github.com/nimbupani/mblax">github.com/nimbupani/mblax</a> Feel free to use elements of the website as you see fit! </p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-06-28T00:00:00-07:00" pubdate><span class='month'>Jun</span> <span class='day'>28</span> <span class='year'>2010</span></time> in
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-06-28-mblax.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/mblax.html';
var disqus_identifier = 'http://nimbupani.com/mblax.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>