Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

239 lines (129 sloc) 9.1 KB
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<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="">
<link href="/blog/stylesheets/screen.css" rel="stylesheet">
<script src="/blog/javascripts/modernizr-2.0.js"></script>
<link href="" rel="alternate" title="Divya Manian" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/blog/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a></h2>
<nav class="sitenav"><form action="" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
<a href="/blog/">Home</a>
<a href="/blog/blog/archives">Archives</a>
<a href="/blog/about">About</a>
<nav class="article">
<a class="previous" href="/blog/drop-shadows-with-css3.html" title="Drop Shadows with CSS3">❬</a>
<a class="next" href="/blog/book-reviews-for-june-2010-part-2.html" title="Book Reviews for June 2010 - Part 2">❭</a>
<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="/blog/mblax.html">Mblax</a></h1>
<div class="entry-content"><p><a href=""><img src="" 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="">African continent</a>. While prowling around for African music, I fell in love with West African music <a href="">at first sight</a> (er, note?) I haven’t found a good way to track where these artists will be performing live (<a href="">Songkick</a> comes close).</p>
<p>So here it is, a <a href="">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>
<h3>Technical Details</h3>
<li>I used <a href="">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="">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="">Google’s Font Directory</a> using their <a href="">WebFont Loader</a>. </li>
<li>I have also used <a href="">@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>
<p>I hope to soon add more events from <a href="">Songkick</a> using their <a href="">API</a>. If you have any other artists to suggest (or anything to improve upon), please do! </p>
<p>Meanwhile, the source files of the website (including the PSD files) are available at <a href=""></a> Feel free to use elements of the website as you see fit! </p>
<p class="meta">This post was posted by
<a href="/blog/about.html">Divya Manian</a>
<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
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<h2>Posts on Web Development</h2>
<li><a href="/blog/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li>
<li><a href="/blog/some-css-transition-hacks.html">Some CSS Transition hacks</a></li>
<li><a href="/blog/safe-css-defaults.html">Safe CSS Defaults</a></li>
<li><a href="/blog/unplugged-2011.html">Unplugged 2011</a></li>
<li><a href="/blog/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li>
<li><a href="/blog/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li>
<li><a href="/blog/web-opener-at-opera.html">Web Opener at Opera</a></li>
<li><a href="/blog/current-color-in-css.html">Current Color in CSS</a></li>
<li><a href="/blog/css-vocabulary.html">CSS Vocabulary</a></li>
<li><a href="/blog/active-web-development.html">Active Web Development</a></li>
<li><a href="/blog/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li>
<li><a href="/blog/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li>
<li><a href="/blog/svg-is-coming.html">SVG is coming!</a></li>
<li><a href="/blog/wee-marquee.html">Wee! Marquee</a></li>
<li><a href="/blog/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li>
<li><a href="/blog/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li>
<li><a href="/blog/diversity.html">Diversity</a></li>
<li><a href="/blog/notes-from-javascript-n00b.html">Notes from a JavaScript n00b</a></li>
<li><a href="/blog/spacing-out-on-css-namespaces.html">Spacing Out on CSS Namespaces</a></li>
<li><a href="/blog/notes-from-html5-readiness-hacking.html">Notes from HTML5 Readiness Hacking</a></li>
<li><a class="btn" href="/blog/categories/web-development/">More</a></li>
<footer role="contentinfo"><p>
Copy to your heart’s content 2011 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script type="text/javascript">
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = '';
<script src="//"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.0.min.js"><\/script>')</script>
<script src="/blog/javascripts/octopress.js" type="text/javascript"></script>
Jump to Line
Something went wrong with that request. Please try again.