Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 185 lines (95 sloc) 8.467 kB
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
1
2 <!doctype html>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Mblax | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <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 &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/mblax.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
8f21f85 Site updated at 2011-12-11 02:10:56 UTC
Divya Manian authored
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
20
21 </head>
22
23
cd5e6a9 Site updated at 2011-12-24 06:16:39 UTC
Divya Manian authored
24 <body >
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
69c30f5 Site updated at 2011-12-11 14:45:02 UTC
Divya Manian authored
29 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
30
31 </header>
9d25e1e Site updated at 2011-12-11 01:21:19 UTC
Divya Manian authored
32 <nav class="sitenav"><a href="/">Home</a>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
35 </nav>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
45 <nav class="article">
46
47 <a class="previous" href="/drop-shadows-with-css3.html" title="Drop Shadows with CSS3">❬</a>
48
49
50 <a class="next" href="/book-reviews-for-june-2010-part-2.html" title="Book Reviews for June 2010 - Part 2">❭</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <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>
64
65 <h1 class="entry-title"><a href="/mblax.html">Mblax</a></h1>
66
67
68
69
70 </header>
71 <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>
72
73
74
75
76 <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>
77
78
79 <p></p>
80
81 <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>
82
83
84 <p></p>
85
86 <h3>Technical Details</h3>
87
88
89 <ol>
90 <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>
91 <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>
92 <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>
93 <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>
94 </ol>
95
96
97
98
99 <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>
100
101
102 <p></p>
103
104 <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>
105
106
107
108 </div>
109
110 <footer>
111 <p class="meta">This post was posted by
112
113
114 <a href="/about.html">Divya Manian</a>
115 on
116
117
118
119
120
121
122 <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
123
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
124 . 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>.
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
125 </p>
126 </footer>
127 </article>
128
129 <section>
130 <h1>Comments</h1>
131 <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>
132 </div>
133 </section>
134
135
136 </div>
137 </div>
138 <aside id="articles">
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
139 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
140 <h2>Posts on Web Development</h2>
2cc1469 Site updated at 2012-01-23 12:45:44 UTC
Divya Manian authored
141 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
142 </aside>
143 <footer role="contentinfo"><p>
3c9d77b Site updated at 2012-01-01 19:06:29 UTC
Divya Manian authored
144 Copy to your heart’s content 2012 - Divya Manian -
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
145 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
146 </p>
147
148
149 </footer>
150
151
152 <script type="text/javascript">
153 var disqus_shortname = 'nimbublog';
154 var disqus_developer = 1;
155
156
157 var disqus_url = 'http://nimbupani.com/mblax.html';
158 var disqus_identifier = 'http://nimbupani.com/mblax.html';
159
160
161
162
163 (function () {
164 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
165 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
166 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
167 }());
168 </script>
169
170
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
171 <script src="/javascripts/octopress.js"></script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
172
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
173 <script>
174 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
175 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
176 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
177 s.parentNode.insertBefore(g,s)}(document,'script'));
178 </script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
179
180
181
182
183 </body>
184 </html>
Something went wrong with that request. Please try again.