Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

189 lines (98 sloc) 8.915 kB
<!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 &hellip;">
<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">&#x276C;</a>
<a class="next" href="/book-reviews-for-june-2010-part-2.html" title="Book Reviews for June 2010 - Part 2">&#x276D;</a>
</nav>
<header>
<time datetime="2010-06-28T00:00:00+05:30" 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>&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD</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>
<p>=======</p>
<blockquote><blockquote><blockquote><blockquote><blockquote><blockquote><blockquote><p>c9b394449296d1254d0e62ecf1a2a5a3dca3b7ce</p></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote>
</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+05:30" 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="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - 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>
Jump to Line
Something went wrong with that request. Please try again.