Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1434 lines (854 sloc) 89.4 KB
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Divya Manian]]></title>
<link href="http://nimbupani.github.com/atom.xml" rel="self"/>
<link href="http://nimbupani.github.com/"/>
<updated>2012-01-22T20:28:39-08:00</updated>
<id>http://nimbupani.github.com/</id>
<author>
<name><![CDATA[Divya Manian]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[html5please]]></title>
<link href="http://nimbupani.github.com/html5please.html"/>
<updated>2012-01-22T17:11:00-08:00</updated>
<id>http://nimbupani.github.com/html5please</id>
<content type="html"><![CDATA[<p><a href="http://html5please.us"><img src="http://cache.gyazo.com/c5d6f648394681c59d93c487b8347cf5.png" alt="" /></a></p>
<p>More than a year ago, in my very first talk at Web Directions on <a href="http://www.slideshare.net/nimbupani/active-web-development">Active Web Development</a>, I had this slide:</p>
<p><img src="http://cache.gyazo.com/64c191910d79e1ec04e253caa7a74482.png" alt="" /></p>
<p>The intention was that within organizations web developers work to keep an updated list of html5 features that they would adopt or not. However, Paul Irish and I thought it would be useful if there were a global set of recommendations that web developers could consult and tap on when they are deciding on how to use features. This was the seed for the creation of <a href="http://html5please.us">HTML5 Please</a>.</p>
<p><a href="http://caniuse.com">When can I use</a> and <a href="http://modernizr.com">Modernizr</a> do a great job in informing the users of available features and how to feature detect them. The <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">Modernizr polyfill wikipage</a> also does a good job of listing all the available polyfills. What we felt missing was the glue that bound all this information together, to tell the user what the best tool for the job was: either on its own, or with a polyfill or a sensible fallback.</p>
<p>With HTML5 Please, you can just search for a feature that you are looking to use and find out how to do so. If you think our recommendation is incorrect, you can edit the recommendation for each feature and send a pull request (like this <a href="https://github.com/h5bp/html5please/blob/master/posts/border-image.md">example</a>).</p>
<h3>The Setup</h3>
<p>Initially, this data was in JSON file that was manipulated in node to generate the static html. Soon, it became obvious that JSON would be a big pile of mess when many people <em>manually</em> update it. Also, it was clear we needed a build system, which is where <a href="http://twitter.com/tbranyen">Tim Branyen</a> stepped in to help creating one using node and backbone that would combine markdown posts into a single HTML page.</p>
<p>It was also obvious that we needed a good system to create these markdown posts so that each of the tags that are used in the &#8216;Explore features&#8217; section are not created accidentally (e.g. prevent creating a tag called <code>polyfill</code> instead of <code>polyfills</code>). To do this, <a href="http://twitter.com/vyom">Deepak Jois</a> created a simple shell script that accepts a feature name, its associated tags, its kind, and then creates a markdown file with these details and opens it in your editor.</p>
<p>We also wanted a way for users to help us make the content better. I added a link to the markdown source on github for each feature which the reader only needs to fork, edit and send pull request for (all over in two clicks!).</p>
<h3>The Front End</h3>
<p>I was unsure of how to proceed with the design. This is how it looked like at the beginning:</p>
<p><img src="http://cache.gyazo.com/4e9fa43b13017085aa1647e1955a36d6.png" alt="" /></p>
<p>Over the last month, I tweaked the design majorly to more or less match what you see today. I also wanted to use Sass more, which is why the source stylesheet is all Sass.</p>
<p>It was awesome to work with Paul, Tim, Deepak, <a href="http://twitter.com/connor">Connor</a>, <a href="http://twitter.com/brianblakely">Brian Blakely</a>, <a href="http://twitter.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/h5bp/html5please/contributors">many more</a> to create this site. Please <a href="https://github.com/h5bp/html5please/issues/">let us know on Github</a> if you find issues or if you have ideas on how it could be better!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[desirable]]></title>
<link href="http://nimbupani.github.com/desirable.html"/>
<updated>2012-01-21T07:22:00-08:00</updated>
<id>http://nimbupani.github.com/desirable</id>
<content type="html"><![CDATA[<p>I never gave a thought to products I considered desirable, till I saw this ad for OP-1:</p>
<p><img height="400" alt="Image of an attractive woman holding the synth" src=http://dzzyntg3zfjcg.cloudfront.net/client/teenageengineering/dynamic/articles/op1-1_3225.jpg></p>
<p>Here is my list of products I consider desirable:</p>
<ul>
<li>Apple products</li>
<li>Eames designed products</li>
<li><a href="http://www.teenageengineering.com/">Teenage Engineering</a>&#8217;s products</li>
<li>Kindle</li>
<li>Dieter Rams&#8217;s designed products</li>
<li><a href="http://cache.gyazo.com/998ce69d9f4c1ea58cf6c3cccb0f897c.png">Singgih Kartono&#8217;s radios</a></li>
<li>Volkswogen Beetle/Camper</li>
<li>Pixar movies</li>
</ul>
<p>A pattern I have noticed with them is how little advertising these products have. I would even venture to say desirability is built into their products.</p>
<p>When a product is built with it, there is no need to make it <em>appear</em> desirable. Most products don&#8217;t, which is why advertisers think adding people/situations on the screen would some how make prospective customers think the product is desirable. Notice how cereal advertisements have a happy-clappy family eating breakfast together?</p>
<p>Such gimmicks trick customers into buying into an illusion rather than just the product. By using the illusion of attraction, success or happiness the advertisement assures you that you will experience the same when you use it. Usually this works, but when the product is desirable to begin with, this trick stands out – like in the ad above.</p>
<p>Desirable products sell, but designing something so has never been a primary concern for most manufacturers - who look to bolt it on either in the packaging, exterior look, or worse, in advertising. A good side-effect of desirable products is how little effort is required to sell them.</p>
<p>I only hope we can build more such products instead of trying to trick customers into buying sub-par ones.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[mustache, hogan, handlebars]]></title>
<link href="http://nimbupani.github.com/mustache.html"/>
<updated>2012-01-01T10:05:00-08:00</updated>
<id>http://nimbupani.github.com/mustache</id>
<content type="html"><![CDATA[<p>I have been working quite a bit with <a href="http://nodejs.org">node</a> and have had a chance to use <a href="http://handlebarsjs.com">Handlebars</a> quite frequently. While it is an implementation of <a href="http://mustache.github.com">Mustache</a>, it goes a bit further in providing some helpers like <code>if</code>/<code>each</code>/<code>list</code>/<code>with</code> etc along with the ability to register custom helpers you need. Since then, I have heard about <a href="http://twitter.github.com/hogan.js/">Hogan</a> which is almost equivalent but not. I wanted to just write down what I have discovered while investigating these.</p>
<h3>Mustache</h3>
<p>Mustache is a logic-less templating language that has found implementation in various languages, including Ruby, Python, PHP, C++ and JavaScript. The Official JavaScript implementation is called <a href="https://github.com/janl/mustache.js">mustache.js</a>.</p>
<p>Mustache.js does not compile the templates ahead of time. As a result it is significantly slower than the other two implementations of Mustache. Mustache also <a href="http://jsbin.com/afasot/7/">strips white spaces from your template</a> (thnx <a href="https://twitter.com/jdalton">@jdalton</a> - note the github urls for these libs seem to 404 occassionally).</p>
<h3>Handlebars</h3>
<p>Handlebars.js provides an implementation of Mustache with some extra features.</p>
<p>The biggest feature is that the templates are compiled before use. This means, the template is not parsed right when the template needs to be applied, but rather parsed as <code>Handlebars.compile(&lt;template source&gt;)</code> first and data is then passed to this compiled template for rendering. This speeds up the <a href="http://jsperf.com/t-bench2/7">rendering of data significantly compared to Mustache</a>.</p>
<p>Handlebars.js, contrary to Mustache&#8217;s philosophy of being logic-less, also provides some basic extensions to make it easy to manipulate the data that is used on the templates. You can also register helpers that can do more manipulations of data like so:</p>
<pre><code>Handlebars.registerHelper('hyphenate', function(tag) {
return tag.split(' ').join('-');
});
</code></pre>
<p>So, if you want one of the input data objects to render differently, you don&#8217;t have to add a new object representing the new rendering (or manipulate the rendered output afterwards). You can simply work with the helper to change based on the input.</p>
<h3>Hogan</h3>
<p>Hogan.js is a library that is a straightforward implementation of mustache. Like Handlebars, Hogan is also compiled ahead of data being sent to render which makes it faster than Mustache. But unlike Handlebars, Hogan does not provide any extra features.</p>
<p>Hogan.js seems to have better performance on <strong>most</strong> browsers. Hogan is a great alternative to Mustache.js for minimalists who simply want a template to use and nothing more.</p>
<h3>What about others?</h3>
<p>I was most taken in by Mustache, which is why I did this research to see what are the best Mustache implementations out there. But there are certainly other JavaScript template options available (including one provided by <a href="http://documentcloud.github.com/underscore/">underscore</a>).</p>
<p><a href="http://tbranyen.com/">Tim Branyen</a> is working on <a href="http://combyne.github.com/">Combyne</a> which is similar to Mustache but provides additional features that are similar to those found in <a href="http://liquidmarkup.org/">Liquid</a>.</p>
<p><a href="https://github.com/adammark/">Adam Mark</a> has <a href="https://github.com/adammark/Markup.js">Markup.js</a> out, which is similar to mustache in some ways, but works on non-IE browsers. In addition it provides <a href="https://github.com/adammark/Markup.js/tree/master/src/pipes">piping out of the box</a> and has a low footprint (1.8K). However, I do not like the syntax for piping argument (<code>&gt;</code>), nor the ambiguous list piping. It doesn&#8217;t precompile templates either, but seems to have some ideas on working with language strings. Definitely worth a look.</p>
<h3>What do I use?</h3>
<p>I use Handlebars. Mainly, the performance boost of Hogan does not seem that significant for me given the opportunities of using helpers for simple data manipulation. My typical use cases seem to always have some client-side data manipulation that hogan does not provide for.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Twittering with D3]]></title>
<link href="http://nimbupani.github.com/twittering-with-d3.html"/>
<updated>2011-12-23T20:08:00-08:00</updated>
<id>http://nimbupani.github.com/twittering-with-d3</id>
<content type="html"><![CDATA[<p>What you see above is something I had been thinking of doing since the obsession of a redesign hit my head: rendering visual snippets of my latest tracked actions as pretty and useless graphics. Hopefully this is the first of many.</p>
<p>My very first data mapping project was my <a href="http://j.mp/divyaieee">Final Year Project</a> where I had to render XML data from the server on to a J2ME application. I have since not wanted to recreate that horrific experience again and have stayed well out of the way of such complicated mappings. But, last year, I wrote a bit on using <a href="http://www.netmagazine.com/tutorials/build-tweet-map-svg">Polymaps for mapping tweets</a> and discovered that <a href="http://bost.ocks.org/mike/">Mike Bostock</a> has since created a new library for data visualization called <a href="http://mbostock.github.com/d3/">D3</a>. I finally got a chance to play with it.</p>
<h3>Idea</h3>
<p>The bar chart shows a timeline of the last 10 tweets starting with the earliest tweet. Each bar represents a tweet and grows darker across the timeline based on how many retweets occur. The darkest bar represents a tweet that was retweeted the most. Clicking on each bar gives you the tweet itself and the actual number of retweets that has occurred.</p>
<p>I originally started with the idea of only plotting tweets created over the last 24 hours and the ebb and flow of each of their retweets. But, then, it became harder to visualize how I would treat retweets that occurred beyond a day. It seemed simpler to just switch over to plotting the graph for the latest few tweets.</p>
<h3>Design</h3>
<p>I had in my mind a graded bar chart that would animate across time and change in color values based on when and how many retweets occurred. I wanted to include axes in the design, but they looked very noisy when I got around to doing them, so they were <em>axed</em> :)</p>
<h3>Implementation</h3>
<p>This project was primarily a vehicle to learn <a href="http://mbostock.github.com/d3/">D3</a> and <a href="http://nodejs.org/">node.js</a> and I must say I did learn quite a bit of both while using them. Not having much of a data visualization background, understanding <code>scale</code>, <code>transition</code>, and <code>data</code> took a while, but it became more intuitive as I grasped how these worked.</p>
<p>The binding of <code>data</code> to each SVG/DOM object using <code>selectAll('&lt;node&gt;').data()</code> is really awesome. It makes it easy to add/remove nodes depending on the data that you are dealing with, though, it does require you to think carefully about your data object (I spent many sleepless hours on this). D3&#8217;s handy <a href="https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolate">interpolators</a> are useful for interpolating between arbitrary set of values. The variety of <a href="https://github.com/mbostock/d3/wiki/Scales">mappings of domains to ranges</a> that is available is also impressive.</p>
<p>I used <a href="https://github.com/AvianFlu/ntwitter">nTwitter</a> to make requests to the Twitter REST API and write the results to a JSON file. Node’s async callbacks threw me in a loop but <a href="http://deepak.jois.name">Deepak</a> used <a href="https://github.com/caolan/async">Async</a> to make it all seamless (while also helping me out with a major rework of the code).</p>
<p><a href="http://momentjs.com/">moment.js</a> was quite handy both server-side and client-side to parse and compare dates for tweets and retweets.</p>
<h3>Play!</h3>
<p>The code is in the <a href="https://github.com/nimbupani/viz">Viz</a> folder to which I should be adding more such pointless data art. Please do suggest improvements or feel free to use this in your own obsessive experiments :)</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Swatch’s Now is Android’s Future?]]></title>
<link href="http://nimbupani.github.com/swatchs-now-is-androids-future.html"/>
<updated>2011-12-11T07:04:00-08:00</updated>
<id>http://nimbupani.github.com/swatchs-now-is-androids-future</id>
<content type="html"><![CDATA[<p>This weekend, I chanced upon this article on the <a href="http://www.nytimes.com/2011/12/10/business/swatch-group-to-trim-sales-of-watch-parts-to-rivals.html">woes of Swatch’s rivals in the New York Times</a>. It is an interesting read throughout.</p>
<p>What is interesting is Swatch provides most of the mechanical movements for its rivals and is now cutting back and possibly end supplying them. Here are some interesting quotes from the article:</p>
<blockquote><p>Mr. Stas acknowledged that it would have been nearly impossible for him to start out in watchmaking 23 years ago without access to Swatch’s production platform.</p>
<p>Swatch’s revenue last year of 6.44 billion Swiss francs, or about $6.95 billion, makes it by far the world’s largest watchmaker. The company insists that its goal is not to strangle competitors. And it argues that its withdrawal will require rivals to raise their spending on manufacturing, thereby strengthening the quality and competitiveness of the Swiss watch sector as a whole.</p>
<p>Thanks to Swatch, “there is no other industry with such cheap entry costs,” said Jean-Claude Biver, who spent 12 years on Swatch’s executive committee before becoming chairman of Hublot, which is now part of LVMH Moët Hennessy Louis Vuitton, the world’s largest luxury goods company and one of Swatch’s main rivals.</p></blockquote>
<p>As I was reading the article, it became really hard for me not to draw the comparison to Android, and the <a href="http://www.engadget.com/2011/08/15/editorial-engadget-on-googles-motorola-mobility-acquisition/">subsequent acquisition of Motorola Mobility by Google</a>. The CEO of Swatch mentions:</p>
<blockquote><p>“In no other industry do you have one company supply all the critical parts to the people who then compete directly with it,” Nick Hayek, Swatch’s chief executive, said in an interview this year.</p></blockquote>
<p>Clearly he has not heard of Android.</p>
<p>I am not suggesting Google will do this, just that there are very obvious incentives to do so. What I would like to know is how mobile manufacturers are hedging their risks. As one ex-Swatch executive said:</p>
<blockquote><p>“This whole battle is the result of people completely underestimating the risk that at some stage Swatch could cut off rivals, which is a legitimate decision to make in a free market,”</p></blockquote>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Redesign Notes]]></title>
<link href="http://nimbupani.github.com/redesign-notes.html"/>
<updated>2011-12-11T04:51:00-08:00</updated>
<id>http://nimbupani.github.com/redesign-notes</id>
<content type="html"><![CDATA[<p>This site sports a refresh. Here is a list of what is different now:</p>
<ul>
<li>Runs on <a href="http://octopress.org">Octopress</a>.</li>
<li>Hosted on <a href="http://github.com">Github</a>.</li>
<li>Anyone can submit updates for any post with a pull request.</li>
<li><a href="http://disqus.com">Disqus</a> comments (with threading!)</li>
<li>No more categories except <a href="http://nimbupani.github.com/categories/web-development">Web Development</a>.</li>
<li>Based on <a href="http://h5bp.com">HTML5Boilerplate</a> (obviously).</li>
<li>Keyboard navigation! Press left/right arrow for previous/next page.</li>
</ul>
<h3>Why</h3>
<p>I have been wanting to move to a static site for several months because there were several things that annoyed me about Drupal (or any other CMS systems):</p>
<ul>
<li>Lack of out of the box version control.</li>
<li>Unnecessary security nightmare with MySQL.</li>
<li>Loading of needless large resources just because the admin interfaces require it (<code>drupal.js</code> &amp; <code>drupal.css</code> I am looking at you).</li>
<li>No way to collaborate or have others edit my mistakes (other than in comments).</li>
<li>Dependence on several modules which go out of date when a new version comes along.</li>
<li>Ceaseless updating of modules and versions.</li>
<li>PHP (white screen of death anyone)!?!</li>
<li>Poor spam filtering.</li>
<li>Painful backup of database and none for the layout and design.</li>
<li><code>.htaccess</code> drama</li>
</ul>
<p>It was not until <a href="http://thecssninja.com">Ryan Seddon</a> pointed me to the documentation on <a href="https://github.com/mojombo/jekyll/wiki/blog-migrations">migrating from Drupal</a> that this even became feasible. Sadly, the script does not generate categories for the exported markdown files. Fortunately, I used this opportunity to disband the idea of categories all-together and just manually edit whichever post fitted best into <a href="http://nimbupani.github.com/categories/web-development/">Web Development</a> as that typically has been what most visitors look for.</p>
<p>Later, <a href="http://rmurphey.com">Rebecca Murphey</a> moved her site to Octopress which seemed to be a nice wrapper around Jekyll and the migration seemed much less work than before. The most tedious process in migrating content from 2003 onwards was the export of the blog posts from Drupal, and making the Disqus comments work.</p>
<h3>Disqus</h3>
<p>Disqus offers a path for Wordpress users though, but for Drupal you would need to provide an XML file to import from. The good news is the new <a href="http://drupal.org/node/1349010#comment-5275640">Disqus module does that exactly</a> (you need to look under <code>Admin/Content Management/Comments</code> to find the export function). You can use any Disqus identifier, but the easiest method seems to be to use the unique url of each post.</p>
<p>The bad news is that unique url that Disqus module uses is the original Drupal path (e.g. <code>node/1</code>) which is useful if you are sticking with Drupal, but useless if you are using another system. Luckily for me, it also includes the path alias of the original post in <code>disqus_url</code> field for each comment, so it would simply be a matter of finding value of <code>disqus_url</code> in each comment, and replace the value of Disqus identifier with it – which is easy to do by executing a regular expression search and replace on the XML file.</p>
<h3>Github Setup</h3>
<p>Source files used to generate the site are stored in a branch called <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/">source</a> and the generated files are required to be on the master branch. Octopress provides a <a href="http://octopress.org/docs/deploying/github/">rake interface for you to setup your github pages</a> as you wish.</p>
<p>You also need a CNAME record that has the domain name that will point to Github. If it is a top level domain, you need to also set up an A Record on your DNS, otherwise creating a CNAME record on your DNS should be sufficient.</p>
<p>The most annoying thing is I cannot set the default branch for Pull Requests alone on Github (as they need to be made on the source branch), so for now you would have to change the branch of the remote to source manually for the pull request to go through.</p>
<h3>Jekyll</h3>
<p>If you are using Octopress, you most likely needn’t worry about fiddling with Jekyll other than setting variables in <code>_config.yaml</code> file. Any variables you declare there are available for you site-wide for use in your Jekyll templates. So, it was easy to <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/_config.yml#L45">set a github url</a> to create the &#8216;submit pull request&#8217; url you see below each post.</p>
<p>Jekyll does not, by default, paginate the archives. But the same code used to render pagination on the default home page <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/archives/index.html">can be used to do so</a>. The Category archives page is rendered by an Octopress Jekyll plugin and is not paginated (I am sure it is possible, but slightly more tedious).</p>
<p>Jekyll provides an XML feed at <code>atom.xml</code> and Octopress helpfully provides an XML feed with the categories plugin for your category listing. Octopress also makes it easy for you to set your feed urls to Feedburner. Just remember to point your Feedburner urls to these atom feeds!</p>
<h3>Liquid</h3>
<p><a href="https://github.com/Shopify/liquid">Liquid</a> is the templating engine used by Jekyll. It looks pleasing and has a small set of manipulations you can do with it out of the box. I really like the simple filters that let you <a href="https://github.com/Shopify/liquid/wiki/Liquid-for-Designers">manipulate values by simply piping them through filters</a> (there is a <a href="http://cheat.markdunkley.com/">lovely cheat sheet</a> too). There is no way you can get the filename of the markdown file used to create a post within Jekyll, so I had to recreate it using Liquid filters: <code>"-"</code>.</p>
<p>It is not quite as clean as I thought it would be, to render the latest post on the homepage while reusing the same post template. Basically, each post renders in a page and hence the data is available as <code>page.url</code> or <code>page.date</code>. However, home page is itself a page which renders a list of posts (in this case just one), hence I had to set a variable <code>post</code> and make that point to the latest one (<code>site.posts.latest</code>). This meant, any of the variables need to be rendered irrespective of whether they are <code>post.url</code> or <code>page.url</code>, which meant <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_includes/post_detail.html">several <code>if/else</code> statements</a>. I think this is better than replicating the same template twice, and having one go out of sync with the other.</p>
<h3>Design</h3>
<p>Octopress offers a base layout/design which I found too complicated to work with. I ended up replacing most of the Sass files (have not indulged my whim on the architecture of the layout templates). I have an <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/sass/base/_extends.scss"><code>_extends.scss</code></a> to store all <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend">my extend rules</a>, and a <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/sass/base/_vars.scss"><code>_vars.scss</code></a> to store variables. I had to override a few disqus styles, so they went into their own scss file (with dirty <code>!important</code> at the end of each declaration!)</p>
<p>I was happy with the architecture of the older design, which is why nothing has changed significantly. I did want the previous/next links to be located at a fixed location and provide very basic navigation on top.</p>
<h3>Performance</h3>
<p>Lack of PHP and MySQL has made this page render in about 1s compared to 2.6s previously. I also don&#8217;t have frivolous resources loading which makes it better.</p>
<h3>Complaints</h3>
<p>I am overall very satisfied with Octopress, and am so glad <a href="http://imathis.com">Brandon Mathis</a> created it. Only niggling complaint I have is that the rake deployment script takes <em>years</em> to run. You could use <code>rake isolate[filename]</code> and subsequent <code>rake integrate</code> to make this faster. But I wish it were the case automatically.</p>
<p>Creating a new post is easy, but finding it in the 100s of posts I have to write it is a pain. I suspect I could add a <code>mate &lt;filename&gt;</code> to the <code>rake new_post</code> script which would make that easier.</p>
<h3>Future</h3>
<p>This site is a work in progress. I have some outstanding <a href="https://github.com/nimbupani/nimbupani.github.com/issues/1">to-dos</a> that I hope to get to soon. I do want to use this site to experiment with learning new languages/technologies, so anything you think would be an interesting idea to pursue, please <a href="https://github.com/nimbupani/nimbupani.github.com/issues/new">suggest</a>!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Summary of various exciting CSS drafts and proposals]]></title>
<link href="http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals.html"/>
<updated>2011-12-10T18:51:00-08:00</updated>
<id>http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals</id>
<content type="html"><![CDATA[<p>I will be attending my first ever <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0593.html">CSS</a> Working Group Face to Face Meeting starting this Sunday, and I wanted to be at least up-to-speed on all the drafts that will be up for discussion. So, in the interest of not letting a few hours spent understanding some of them go to waste, here is a brief summary of each of these drafts and some of the concerns that will be discussed during the meeting.</p>
<p>You could probably look out for updates on the meeting <a href="http://twitter.com/csswg">@csswg</a></p>
<h3><a href="http://dev.w3.org/csswg/css3-regions/">CSS Regions</a></h3>
<p>This spec, from my understanding, is a way to define how content flows like in Adobe InDesign or Illustrator. Basically you can extract the content from a set of elements by using the property <code>flow-into: &lt;nameoftheflow&gt;</code>. Then you can make that render on another set of elements (called <em>regions</em>) which act as a containers for that content using <code>flow-from: &lt;nameoftheflow&gt;</code>. If the containers have content, it will be replaced by the content set using the <code>flow-from</code> property. This is controlled by using what is called as <em>named flow</em>. You control which elements belong to a flow using the <code>flow-into</code> property on them.</p>
<pre><code>.contentthatflows { flow-into: newspaper-flow; }
.region1-1, .region1-2 { flow-from: newspaper-flow; }
</code></pre>
<p>The content rendered within <code>.region1-1</code> and <code>.region1-2</code> will render with styles originally defined on the elements which belong to the <code>newspaper-flow</code>.
Properties defined on <code>.region1-1</code> or <code>.region1-2</code> will not trickle down to the content that flows into them.</p>
<p>Sometimes, content can straddle two or more such regions within the same flow. You can overwrite styles to elements which fall into a particular region using a <a href="http://www.w3.org/TR/css3-regions/#region-styling">region-styling</a> block, similar in notation to media queries.</p>
<pre><code>@region .region1-1 {
p {
color: red;
}
}
</code></pre>
<p>This means that the text of all paragraphs which fall into the <code>.region1-1</code> region will be colored red. Paragraphs which fall outside this region will have their originally defined color.</p>
<p>There is also a skeletal interface to access which region an element is part of which might be fleshed out further in the Face-to-face meeting.</p>
<h3><a href="http://www.interoperabilitybridges.com/css3-floats/"> <span class="caps">CSS3</span> Floats </a></h3>
<p></p>
<p> Expands on floats to make float possible with positioning and wrap text content around the positioned element. However this conflates floats with positioning (if you want wrapping on elements, you need to set <code>float: positioned</code> and use <code>top</code> , <code>left</code> , <code>position</code> to control the location of the wrapped element) </p>
<p> <p> The properties for controlling the wrapping is similar to those in the <span class="caps">CSS</span> Exclusions proposal - <code>wrap-type</code> (vs <code>wrap-shape-mode</code> ), <code>wrap-shape</code> (same), <code>wrap-image</code> (vs <code>wrap-shape-image</code> ), <code>wrap-image-threshold</code> (vs <code>wrap-shape-image-threshold</code> ), <code>wrap-margin</code> (vs <code>wrap-shape-margin</code> ), <code>wrap-padding</code> (vs <code>wrap-shape-padding</code> ). It seems to me that these two proposals need to be merged or the scope of one of them changed significantly so there are no conflicts. From the <a href="http://wiki.csswg.org/ideas/css3-floats-use-cases">Wrap use cases</a> , personally I like the approach of <span class="caps">CSS</span> Exclusions which seems cleaner for all the use cases mentioned. </p></p>
<h3> <a href="http://dev.w3.org/csswg/css3-exclusions/"> <span class="caps">CSS3</span> Exclusions </a> </h3>
<p></p>
<p> This has been initially proposed by Adobe (along with <span class="caps">CSS3</span> Regions). The case for wrapping is separate from positioning or floats, and wrapping can occur on any box independent of where they are located or rendered. In addition you can also specify how each wrapping shape interacts with each other (depending on what you set for wrap-shape-order, you can set which wrapping shape will clip the other when they interact). </p>
<p> <p> I like this better than <span class="caps">CSS3</span> Floats because this is not related to how an element is positioned but merely impacts the wrapping. </p></p>
<p> Both <span class="caps">CSS3</span> Exclusions and <span class="caps">CSS3</span> Floats accept <a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/shapes.html"> basic <span class="caps">SVG</span> shapes </a> as values for <code>wrap-image-shape</code> ( <code>wrap-image</code> ). Both specs have equivalent properties to the background property for the wrap image, which means you can have repeating image patterns that you can use for creating your wrap shape. </p>
<p> <p>Both specs also specify an interesting alpha channel threshold which can be used to determine the shape that needs to be generated from the wrap-image specified. </p> <h3> <a href="http://dev.w3.org/csswg/css3-flexbox/"> <span class="caps">CSS3</span> Flexbox </a> </h3> <p> This has been entirely re-written and is significantly different from current implementations. What it aims to do is to provide you with flexible layout of child elements and the space around them within a parent element that has a flexbox layout. You get started by specifying <code>display: flexbox</code> on the parent element and then specifying the order in which you want the child elements to be laid out (using flex-direction). All child elements (with display set to inline or anything) will follow this direction if nothing more is specified for each of them. You can also determine how the white-space that is left after following the order should be allocated (using flex-pack). </p></p>
<p>You can also specify the order in which the child elements should occur using flex-order. Each of these child elements can have widths or heights as a function called flex(), which takes in 3 values - the amount it can expand to, the amount it can contract to, the preferred length it should have. Browsers need to follow the free space allocation algorithm to make sure each of these element’s width/height match the values provided.</p>
<p> <p>This would be very useful for mobile apps where device diversity makes creating flexible but usable designs almost mandatory. Cant wait to see this implemented across all browsers!</p></p>
<h3> <a href="http://dev.w3.org/csswg/css3-grid-align/"> <span class="caps">CSS3</span> Grid Layout </a> </h3>
<p></p>
<p> This spec would allow authors to have complete control over placement of each element on the page in a grid. It introduces completely new properties to aligning elements and like flexbox layout you use a <code>display: grid</code> on the parent element to make all the child elements be part of a grid. So, you cannot have an element that can be both a flexbox or a grid at the same time (clearly makes no sense). Do note that only block elements can take part in a grid layout and be part of a grid. </p>
<p></p>
<p>The Grid layout lets you set complicated grids of elements. The flexbox merely allows you to set how flexible the element can be and where it can be placed within the parent element, but the grid layout lets you set which elements can be part of a grid cell (each grid is made up of grid cells, grid rows, and grid columns), and where within the grid cell should each element be placed (the layer order, and if they should span multiple grid cells), and how elements should be laid out when you do not specify which grid cells they belong to. </p>
<p> <p> The Grid layout can also be used in combination with <span class="caps">CSS</span> Regions such that grid cells that are selected to be part of a region can have text flowing through them (from another grid cell). Grid cells can be selected using ::grid-cell(‘cellname’) pseudo-element selector. </p></p>
<p> This spec is pretty well-defined, which is not surprising given <a href="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSGrid"> we already have an implementation in <span class="caps">IE10</span> </a> . My only concern is the redefinition of the <code>fr</code> unit which has also been used to define a flex tuple in the CSS3 Flexbox spec which will discussed at the CSS Face-to-face. </p>
<p> <h3> <a href="http://dev.w3.org/csswg/css3-images/#gradients">Gradients</a> </h3> <p> While gradients are more or less determined, there is still a big discussion on how to render gradients with keywords (using <code>top left</code> , etc). Another concern with gradients has been the interpolation of colors (which currently results in ugly blackish interpolation such as this one on the left when you have one of the color stops as <code>transparent</code> ). </p></p>
<p> <img src="http://gyazo.com/9f995e0e98ba6c0dfbf71930dce4fb66.png"> <br> ( <a href="http://jsfiddle.net/nimbu/rK9Pd/">source</a> ) </p>
<p> <p> The meaning of premultiplied color spaces <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax">has been clarified</a> (Opera already implements this - see the gradient on the right). </p></p>
<h3> <a href="http://dev.w3.org/csswg/cssom/"> <span class="caps">CSSOM</span> </a> </h3>
<p> <span class="caps">CSSOM</span> is the Document Object Model for <span class="caps">CSS</span> . It is an <span class="caps">API</span> thats allows you to access style rules, selectors, media queries, and the <span class="caps">CSS</span> used to render the styles on a page. This has previously not been specced which meant each browser could implement its own APIs for accessing stylesheets (and they did). Now, we have a comprehensive set of interfaces to access the styles from JavaScript. </p>
<p> <p> We already have parts of <span class="caps">CSSOM</span> implemented in various browsers (Opera 11.5+, <span class="caps">IE10</span> , Chrome, <span class="caps">FF5</span> ) though! </p> <p>Any questions you have that I can ask the Working Group about?</p></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[This revolution needs new revolutionaries]]></title>
<link href="http://nimbupani.github.com/this-revolution-needs-new-revolutionaries.html"/>
<updated>2011-05-21T00:00:00-07:00</updated>
<id>http://nimbupani.github.com/this-revolution-needs-new-revolutionaries</id>
<content type="html"><![CDATA[<p>In early 2000s, when the web was in its infancy, a great number of committed activists made Open Web Standards possible. They advocated, wrote the specifications, explained them to the masses, and contributed to the revolution of using W3C Specs on the web. I owe each of them my career as a Web Designer/developer.</p>
<p>Now, we are in the middle of another revolution. The web as we know it is changing significantly. The ways of doing, implementing and working with web pages have altered. Designing with the right semantic tags or using floats instead of tables are no longer the simple goals of a good web page. We need the pages to load quickly, use the faster newer CSS selectors and DOM APIs, and better ways to create animations, dynamic images, and dealing with how to design for a variety of devices that now have browsers. </p>
<p>The best way to be a part of the revolution is to BE the revolution, not talk ABOUT the revolution. A lot of recognized individuals seem to be doing the latter. To BE the revolution, you just need to look at what some of the people at the fore-front of it are doing: <a href="http://paulirish.com">Paul Irish</a> and <a href="http://farukat.es/">Faruk Ateş</a> have made the future accessible with <a href="http://modernizr.com">Modernizr</a>. <a href="http://peter.sh/">Peter Beverloo</a> created the <a href="http://peter.sh/category/last-week/">&#8220;Last Week in…&#8221;</a> series that has been re-adopted by <a href="http://www.w3.org/QA/archive/open_web/">W3C</a> and <a href="http://blog.whatwg.org/category/weekly-review">WHATWG</a> where you can keep up with the pace of creation and implementation of web specifications. <a href="http://www.scottjehl.com/">Scott Jehl</a> created <a href="https://github.com/scottjehl/Respond">Respond.js</a> which lets older browsers understand media queries, <a href="http://www.blog.highub.com/">Shi Chuan</a> made designing for multiple devices easy by exhaustive research for <a href="http://html5boilerplate.com/mobile/">HTML5 Mobile Boilerplate</a>. Jon Neal made practical use of HTML5 elements easy with <a href="http://www.iecss.com/print-protector/">IE Print Protector</a>. <a href="http://leaverou.me/">Lea Verou</a> has been <a href="http://leaverou.me/2010/07/organizing-a-university-course-on-modern-web-development/">teaching web development</a> and is the author of significant articles on web development. <a href="http://www.accessibleculture.org/">Jason Kiss</a> has been documenting how <a href="http://www.accessibleculture.org/research/html5-aria-2011/">HTML5 elements, ARIA work with different Screen readers</a> without much fanfare. <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a>, <a href="http://www.thecssninja.com/">Ryan Seddon</a>, <a href="http://mathiasbynens.be/">Mathias Bynens</a> and several others have been doing similar practical investigations on how to use what’s new and awesome in real life scenarios.</p>
<p></p>
<p>But these are not the people who are known revolutionaries. Unfortunately, the people who seem to be recognized for pushing the envelope are people who talk ABOUT the change, those who split hairs on whether to call something &#8220;Responsive&#8221; or &#8220;Adaptive&#8221; or speak about HTML5/CSS3 but have very little code to show for their understanding of it. </p>
<p>Now is the time to get developers on board the new rush of web standards, not to promote litigation on the presence or absence of a single HTML attribute, or debate a merits of the name of a technique. What it does is to deflect attention from learning, instead directs developers to spend more time beating about the bush and not be fully engaged in what’s coming.</p>
<p>It is time to move on. I acknowledge all these past trail blazers, but they are not at the forefront today. Following their advocacy does not shed light on all the practical implementations that are possible while exploring new technology. People seem to know - but not use - the latest in web standards, and several are on the fence because they do not know how to work with new standards right now. </p>
<p>It is time for us to get new idols. Here is what my idols do:</p>
<h3>Create</h3>
<p>They code. They have demos on their website or on Github.</p>
<p>They write. They write tutorials that are not browser-specific, and link back to specifications, have comments and update their posts with newer/better ideas from within the comments section.</p>
<h3>Research</h3>
<p></p>
<p>They research and publish their findings. A lot of recommended practices are dogma and hearsay - creating practical examples to test such assertions and validate them would be cornerstone of their work.</p>
<p>They know what is new. Web standards keep changing. They should know what is new, what is relevant and what shouldn&#8217;t be promoted. They talk and respond to your queries and are not too busy to find time to write code that works.</p>
<h3>Collaborate</h3>
<p>They do not work in isolation, but get people together who can create projects that benefit the web.[Bonus!] They are available on mailing-lists, forums, or IRC channels to help n00bs when they can.</p>
<p>If you think it is hard to find these people, then you are not looking. All the people I mentioned earlier are people worthy of listening to. Look at who else they are talking to, or doing projects with, follow the trail. </p>
<p>The old revolution is dead, long live the revolution.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Some CSS Transition hacks]]></title>
<link href="http://nimbupani.github.com/some-css-transition-hacks.html"/>
<updated>2011-05-17T00:00:00-07:00</updated>
<id>http://nimbupani.github.com/some-css-transition-hacks</id>
<content type="html"><![CDATA[<p>I am speaking at <a href="http://unplugged11.webdirections.org/program/design#creative-css3">some</a> <a href="http://2011.texasjavascript.com/">events</a> which means I have to write a few demos. You can find some <a href="http://nimbu.in/unplugged/demos/">here</a>, and I am in the process of creating more. While doing so, I have come across two new (to me), ways of applying transitions. This only works for the conditions stated here, and you should think carefully before trying to expand these to be used elsewhere.</p>
<h2>Fake Transitions on Gradients</h2>
<p>As you know, no browser supports transitions in CSS gradients (yet). But, we have two tools to fake this: transitions that work on background colors, and multiple backgrounds. Given transitions can interpolate colors, we simply transition the background color and apply a gradient image on top of it which fades to transparent value (giving the illusion of an transitioning gradient). </p>
<p>Here is a demo:</p>
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/zuNbj/embedded/result,css"></iframe>
<h3>Caveat</h3>
<ul><li>This works great on simple gradients. You probably do not want to use this with multiple backgrounds as it would be a terrible pain to manage the right backgrounds to change.</li></ul>
<h2>Animate elements with just font-size</h2>
<p>Transitions can be applied on CSS transforms, so if you wish to scale an element on hover, it would be a matter of applying the right prefixed transition on the right prefixed transform and writing the vendor-prefixed scale transform 5 times on hover.</p>
<p></p>
<p>I am lazy, and I like to avoid typing if I can. So, given we can use <code>em</code> as a unit for width, height, line-height and border-radius would be something we can take advantage of. What this unit means is each of these properties are now relative to the <code>font-size</code> we set on the element.</p>
<p>Now all we need to do is transition the font-size, and we get bonus transitions on width, height, line-height and border-radius! Now you can be carefully choose which elements should use em units depending on which properties (that use em unit values) you want transitioned.</p>
<p>Don&#8217;t be so quick to gloat though. Webkit does not transition width, height, line-height if you only transition the font-size, so you would need to set <code>-webkit-transition: all 1s;</code> to get it to work on webkit.</p>
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/86kET/embedded/result,css"></iframe>
<h3>Caveats</h3>
<ul>
<li>The element expands in area - unlike a scale transform which expands without nudging other elements out of the way. This means elements adjacent to this element will move unless they are all positioned absolutely. You can also position the element to which transition is being applied absolutely so as to not impact rest of them.</li>
<li>This only works for properties you want to transform that accept length units. </li>
<li>If you do not want the text within the transformed element to also transform, using this method would be easier. When using transforms, you would need to reset the transform on the wrapper around the text so as to prevent text from transforming. In the above demo, the blue disc has considerably more rules and declarations to prevent scaling of text as compared to transforming the font size.</li>
</ul>
<p>If you know of a snappier way to do these, please fork the fiddles and link to your forks in the comments.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Safe CSS Defaults]]></title>
<link href="http://nimbupani.github.com/safe-css-defaults.html"/>
<updated>2011-04-13T00:00:00-07:00</updated>
<id>http://nimbupani.github.com/safe-css-defaults</id>
<content type="html"><![CDATA[<p>You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:</p>
<pre><code>z-index: none;</code></pre>
<p>Then go on in life, as it “renders” like you wanted it, it works, no big deal. </p>
<p>But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).</p>
<h3>Initial Values</h3>
<p>The spec defines a value that will be the <em>initial</em> value for a property when it is not declared in any stylesheets - either the user agent stylesheet (look at <a href="http://www.iecss.com/">iecss.com</a> for stylesheets of IE, <a href="http://www.iecss.com/opera-10.51.css">Opera</a>, <a href="http://www.iecss.com/firefox-3.6.3.css">Firefox</a>, <a href="http://www.iecss.com/webkit-r61376.css">Webkit</a>) or the ones you write.</p>
<p>Now, user agents assign values to CSS properties too. For example, when you do not declare margins on <code>h1</code>, the user agents have an initial value for margins. IE sets this to be <code>14pt</code>, Firefox, Opera sets this to <code>0.67em</code>, etc. This is not defined by the specifications and there is no keyword to obtain the values set by user agents.</p>
<p>Initial values are different from inherited values. All properties accept a keyword <code>inherit</code>. When you use the keyword <code>inherit</code> on a property, the browser applies the value that it finds on its parent element. On <code>html</code> element if you use the value <code>inherit</code>, it applies the initial value. </p>
<h3>Good News!</h3>
<p><a href="http://leaverou.me">Lea Verou</a> alerted me to the CSS3 keyword <a href="http://www.w3.org/TR/css3-values/#keywords"><code>initial</code> which will set the CSS3 property to the initial value as defined in the spec</a>. Sadly, the only browsers that supports this seems to be <a href="http://jsfiddle.net/nimbu/CgRAZ/10/show/">Firefox</a> (with a <code>-moz-</code> prefix) and Webkit&#8217;s Safari and Chrome (yay!).</p>
<p>So until full support lands on all browsers for this amazing keyword and we don&#8217;t have to support browsers that do not recognize that keyword, here are some of the ways you can reset some CSS properties to their initial values:</p>
<table>
<thead>
<tr>
<th>
Property
</th>
<th>
Value
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-background/#background">background</a>
</td>
<td>
transparent (<code>transparent</code> stands for <a href="http://www.w3.org/TR/css3-color/#transparent-def">rgba(0, 0, 0, 0)</a>) or <code>none</code> or <code>0 0</code>
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-background/#ltborder-widthgt">border</a>
</td>
<td>
none or 0
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-background/#border-image-source">border-image</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a>
</td>
<td>
0
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-background/#the-box-shadow">box-shadow</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#clear">clear</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-color/#foreground">color</a>
</td>
<td>
No value, so best option is to use <code>inherit</code> to cascade from a parent element&#8217;s color value.
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-content/#content">content</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#display">display</a>
</td>
<td>
inline
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#the-lsquo1">float</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#descdef-font-style">font</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#height">height</a>
</td>
<td>
auto
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#letter-spacing0">letter-spacing</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-linebox/#InlineBoxHeight">line-height</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#max-width">max-width</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#max-width">max-height</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#min-height">min-width</a>
</td>
<td>
0
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#min-height">min-height</a>
</td>
<td>
0
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-color/#opacity">opacity</a>
</td>
<td>
1
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#overflow0">overflow</a>
</td>
<td>
visible
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/#page-break-inside">page-break-inside</a>
</td>
<td>
auto
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/CSS2/visuren.html#propdef-position">position</a>
</td>
<td>
static (not <code>relative</code>)
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-shadow">text-shadow</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-transform">text-transform</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-2d-transforms/#transform-property">transform</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-transitions/#the-transition-property-property-">transition</a>
</td>
<td>
none
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a>
</td>
<td>
baseline
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#visibility">visibility</a>
</td>
<td>
visible
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white-space</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/css3-box/#width">width</a>
</td>
<td>
auto
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-spacing0">word-spacing</a>
</td>
<td>
normal
</td>
</tr>
<tr>
<td>
<a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">z-index</a>
</td>
<td>
auto (not <code>none</code> or <code>0</code>)
</td>
</tr>
</tbody>
</table>
<p><small>Thanks to <a href="http://css-tricks.com">Chris Coyier</a>, <a href="http://www.xanthir.com/blog/">Tab Atkins</a>, <a href="http://leaverou.me">Lea Verou</a>, and <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> for feedback on this post!</small></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Unplugged 2011]]></title>
<link href="http://nimbupani.github.com/unplugged-2011.html"/>
<updated>2011-03-04T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/unplugged-2011</id>
<content type="html"><![CDATA[<p>I gave my first ever big talk at <a href="http://south10.webdirections.org/program/w3c#active-web-development">Web Directions South in Sydney</a> last year. This May, I will be speaking at <a href="http://unplugged11.webdirections.org">Unplugged</a> in Seattle!</p>
<p>It is going to be a different talk this time, — less on the activism and more on <a href="http://unplugged11.webdirections.org/program/design/#creative-css3">maximizing the cool on your web app styles</a>.</p>
<p>As a front-end firefighter, I have learnt about the pain of working with a team, each with their own style and philosophy on what constitutes good markup, style, and script. While working on <a href="http://html5boilerplate.com">HTML5 Boilerplate</a> (and the website), a different layer of complexity showed up - managing styles/markup for different languages, choosing what to add or remove from the templates that have become the default choice of several front-end developers.</p>
<p>Unplugged is where I hope to share some of the lessons learned and how to push the boundaries with browsers that can, while providing what can be managed best on browsers that can&#8217;t and introduce some tools to make your front-end development far more easier.</p>
<p>The event is on <a href="http://unplugged11.webdirections.org/program/">12-13th May in The Conference Center</a>. Knowing the Web Directions folks, I know it would be a super smooth and well organized event, so you should be there. There is even a discount code - <em>WDMANIAN</em> - you can use to take $50 off the regular price.</p>
<p>See you there!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Bokeh with CSS3 Gradients]]></title>
<link href="http://nimbupani.github.com/bokeh-with-css3-gradients.html"/>
<updated>2011-02-22T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/bokeh-with-css3-gradients</id>
<content type="html"><![CDATA[<p>Ever since <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">Lea Verou mentioned about the possibilities of CSS3 Gradients</a>, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. <a href="http://gf3.ca/">gf3</a> suggested that the circles would look much better like <a href="http://en.wikipedia.org/wiki/Bokeh">bokeh</a>. Today, I finally got down to creating them.</p>
<h3>Result</h3>
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/CPCRU/embedded/result,css"></iframe>
<h3>Design of the Bokeh</h3>
<p>I referred to some pictures of bokeh, and these were their defining characteristics:</p>
<ul>
<li>There should be groups of circles with same color (each circle outlined with the more opaque version of the fill). In each group, circles are close to each other.</li>
<li>The color transition from one color group to the other can be accomplished with a very blurry second color group radial gradient overlaid on the first group.</li>
<li>Each color group needs to have a very blurry large background circle to base the rest of the circles from.</li>
<li>Each color group has 2 or more of smaller circles and one big blurry circle as a base.</li>
<li>Colors used are almost transparent so that the background color shows through, and the colors mix well when they are overlaid.</li>
</ul>
<h3>Implementation</h3>
<p>Here is how a single &#8220;tile&#8221; looks like:</p>
<p><img src="http://nimbupani.com/files/bokeh-graph.png" alt="bokeh-graph.png" border="0" width="420" height="300"></p>
<p>The black background is the size of the &#8220;tile&#8221;, set by <code>background-size</code> property (the grey area is where our circles spill over). In our demo it is 300px square. Each of these circles is a background image (all gradients are background images), and have a default <code>background-size</code> property set to the top left corner of the tile, which means, the center of each of the circle is at the intersection of the yellow lines in the image above.</p>
<p>Then, we use <code>background-position</code> to offset them into places we want.</p>
<p>By tweaking the <code>background-position</code> for each of the gradient images, we also move the center of each of the circle - shown in the image above relatively. Do note that what <em>actually</em> moves is the top left corner, but I find it easier to visualize the positioning of radial gradients in this manner.</p>
<p>By using <code>background-repeat</code>, we can repeat our bokeh across the screen! You can tweak the tile size so you can get some interesting effects.</p>
<p></p>
<p>Needless to say, this demo <a href="http://caniuse.com/#feat=css-gradients">only works</a> on Firefox 3.6+, Safari 4+, Chrome 10+ all of which support CSS3 radial gradients as it has been finalized in the <a href="http://www.w3.org/TR/css3-images/#radial-gradients">spec</a> (support is coming soon in Opera 11).</p>
<h3>Update</h3>
<p><a href="http://a.deveria.com/">Alexis</a> has kindly <a href="http://nimbupani.com/bokeh-with-css3-gradients.html#comment-3620">provided an SVG</a> that would work as well for browsers that do not support gradients! I have updated the demo to use <a href="http://modernizr.github.com/Modernizr/2.0-beta/#cssgradients">Modernizr</a> to detect for gradients, and serve the SVG version if the browser does not support it. Whee! Thanks Alexis!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Making "Pure CSS3" demos better]]></title>
<link href="http://nimbupani.github.com/making-pure-css3-demos-better.html"/>
<updated>2011-02-17T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/making-pure-css3-demos-better</id>
<content type="html"><![CDATA[<p>I appreciate the effort that goes into creating a pure CSS3/HTML5 demo, but unfortunately many beginners consider these demos as representation of the best practices in Web Development (many aren&#8217;t). Here is one that got my goat today: A <a href="http://designmadeingermany.de/slideshow/">Pure CSS3 Slideshow</a>.</p>
<p>Here are some reasons why this is not a great example of best practices:</p>
<ul>
<li>Uses a table for navigation when the semantic nav element (or a simple list) would do.</li>
<li>Implements features using <code>-moz</code>, <code>-webkit</code> only prefix. Why not add the standard that they are temporary demonstrations for (and while at it, also support <a href="http://opera.com">other</a> <a href="http://ie.microsoft.com/testdrive/">browsers</a>?)</li>
<li><p>This is how it degrades on browsers that do not support CSS3 transitions, and transforms:</p>
<p><img src="http://nimbupani.com/files/79e91b32f7713c3a03a5650e476ade27.png" alt="79e91b32f7713c3a03a5650e476ade27.png" border="0" width="600" height="348" /></p>
</li>
</ul>
<p>So, lets fix it! Here is the final result:</p>
<p></p>
<iframe style="width: 100%; height: 400px" src="http://jsfiddle.net/nimbu/KEqSF/embedded/result,html,css"></iframe>
<h3>Changes:</h3>
<ul>
<li><p>No translateX functions. All we need to do is to animate the <code>left</code> property. So:</p>
<pre><code>#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }</code></pre>
<p>becomes:</p>
<pre><code>#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }</code></pre>
</li>
<li>
I added a parent <code>div</code> element for all the pages so we just need to animate that element and not each of the 3 page elements.
</li>
<li><p>No tables for nav! Just use the <code>nav</code> element with a set of links:</p>
<pre>
<code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href=&quot;#a1&quot; id=&quot;p1&quot;&gt;1&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href=&quot;#a2&quot; id=&quot;p2&quot;&gt;2&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href=&quot;#a3&quot; id=&quot;p3&quot;&gt;3&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code>
</pre>
<p>becomes: </p>
<pre><code>&lt;nav&gt;&lt;a href=&quot;#a1&quot;&gt;1&lt;/a&gt;&lt;a href=&quot;#a2&quot;&gt;2&lt;/a&gt;&lt;a href=&quot;#a3&quot;&gt;3&lt;/a&gt;&lt;/nav&gt;</code></pre>
</li>
<li>
<p>In the default view, the first page is positioned outside the viewport:</p>
<pre><code>/* Page Positioning */
#i1 { left: 100%; }
#i2 { left: 200%; }
#i3 { left: 300%; }</code></pre>
<p>This means browsers that do not support transitions effectively see a blank page. We fix this but setting the default position as <code>left: 0</code>, and only adjust the positions for the next 2 slides:</p>
<pre><code>/* Pages */
#i2 { left: 100%; }
#i3 { left: 200%; } </code></pre>
</li>
</ul>
<p>There, now we have a neat little slideshow, that doesn&#8217;t degrade too badly on browsers that do not support the target element (accessible via the horizontal scrollbar for IE6, 7). If there are ways to improve this, please fork the fiddle and link in the comments!</p>
<p></body></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Book Reviews for January & February 2011]]></title>
<link href="http://nimbupani.github.com/book-reviews-for-january-and-february-2011.html"/>
<updated>2011-02-17T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/book-reviews-for-january-and-february-2011</id>
<content type="html"><![CDATA[<p>This year started pretty well for my reading schedule. I managed to finish two huge books in January, but am on a particularly slow pace since. It also doesn&#8217;t help that I am in Oslo for the first two weeks of Feb getting to know people in Opera as part of my <a href="http://nimbupani.com/web-opener-at-opera.html">new position</a>. So these are all I am left with: </p>
<H3>The Jewel in the Crown</H3>
<p>I was recommended to read this by <a href="http://coldhead.miketaylr.com">Coldhead</a> (warning loud music and visuals). I am usually not a fan of colonialist literature, but <a href="http://www.amazon.com/gp/product/0226743403?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0226743403">The Jewel in the Crown</a> breaks new ground. There are characters of different hues, and the experiences are described vividly, while not portraying a flattering picture of the British Raj. It is very well written and a book (for being so wordy) requires as much to describe the story. I can&#8217;t wait to read the rest of the books in that series.</p>
<h3>Gould&#8217;s Book of Fish</h3>
<p>When I was embarking on my first trip to Australia, good old Coldhead, recommended I read <a href="http://www.amazon.com/gp/product/0802139590?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0802139590">Gould&#8217;s Book of Fish</a> in addition to <a href="http://nimbupani.com/book-reviews-for-september.html">Voss</a>. I never got around it, but I finally did! It is incredible (except for the ending). I really cannot describe how amazing it is. I only beg you to read it.</p>
<h3>Tokyo Vice</h3>
<p>This is a horribly written book by someone who was one of the very few white reporters for a Japanese newspaper who worked on the Tokyo police beat. There is an incredible amount of information on how Tokyo&#8217;s police/press work, but it is all suppressed by bad writing. <a href="http://www.amazon.com/gp/product/0307378799?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0307378799">Tokyo Vice: An American Reporter on the Police Beat in Japan</a> is definitely not worth your time unless you have a passing interest in Tokyo Crime scenes.</p>
<h3>Ender&#8217;s Game</h3>
<p>When I finished <a href="http://www.amazon.com/gp/product/0765342294?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0765342294">Ender&#8217;s Game</a> I thought it was a plot for a bad science fiction movie, but then I realised it was written more than 30 years ago! It is quite a remarkable modern take on alien invasion with more than a thinly veiled support for wars and war games. I suppose the supporters of the book would claim the ending justifies the pacifist motives of the author, but I think it doesn&#8217;t. It is a nice read to escape the tortures of flying, but I don&#8217;t think it does anything more than be a precursor to game strategies outlined in <a href="http://en.wikipedia.org/wiki/Liar's_Poker">Liar&#8217;s Poker</a>.</p>
<p></p>
<p>As usual, here is my plea for you to recommend books you liked reading this month!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Web Opener at Opera]]></title>
<link href="http://nimbupani.github.com/web-opener-at-opera.html"/>
<updated>2011-01-31T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/web-opener-at-opera</id>
<content type="html"><![CDATA[<p>Good news everyone! I am now a Web Opener at <a href="http://opera.com">Opera</a>.</p>
<p>I will be writing, breathing Open web standards while also making sure pesky websites that break in Opera no longer do so. It is a milestone on a journey that started almost two years ago when I started taking web development seriously instead of just another means to an end ($$$).</p>
<p>Needless to say, I will continue working on all the Open Source projects I am involved in (<a href="http://html5boilerplate.com">HTML5 Boilerplate</a>, <a href="http://html5readiness.com">HTML5 Readiness</a>, <a href="http://w3fools.com">w3fools</a>, etc) and hopefully more!</p>
<p>I should also mention that, unless I specifically say so, my opinions are solely MINE and not of my employers, just in case you assume otherwise. If you have any questions about Opera, open web standards, do reach me or any of us @<a href="http://twitter.com/ODevRel/">ODevRel</a>!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Current Color in CSS]]></title>
<link href="http://nimbupani.github.com/current-color-in-css.html"/>
<updated>2011-01-27T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/current-color-in-css</id>
<content type="html"><![CDATA[<p>In the interest of documenting useless trivia about CSS3, here is something that I re-discovered thanks to <a href="http://twitter.com/ultror">nlogax</a>: <code>currentcolor</code> (<a href="http://jsfiddle.net/2ysAr/show/">example</a>).</p>
<p>Borders always render with the current color when a border color is not specified, but, till recently, there was no equivalent term for that use – now we do: <code>currentcolor</code>.</p>
<p>In CSS3, you can use this value to <a href="http://www.w3.org/TR/css3-color/#currentcolor">indicate you want to use the value of color for other properties</a> that accept a color value: borders, box shadows, outlines, or backgrounds.</p>
<p></p>
<p>This value was <a href="http://www.opera.com/docs/specs/presto23/#css">first supported by Opera in 2009</a>, since then, Firefox 3.5+, Chrome 1+, and Safari 4+. IE 9 yet does not support this though.</p>
<p>Now to find some practical use for this!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Book Reviews for December 2010]]></title>
<link href="http://nimbupani.github.com/book-reviews-for-december-2010.html"/>
<updated>2010-12-22T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/book-reviews-for-december-2010</id>
<content type="html"><![CDATA[<p>A year is almost over! I have reviewed about 80 books (&amp; collections) and read about 110 books in total! Not bad given all the mindless travel I have been doing. Here are the last reviews for this year!</p>
<h3>The Dispossessed: Living With Multiple Chemical Sensitivities</h3>
<p>I actually wanted <a href="http://www.amazon.com/gp/product/0061054887?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0061054887">The Dispossessed</a> that has been hailed as one of the best sci-fi books, but somehow got <a href="http://www.amazon.com/gp/product/0966157109?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0966157109">The Dispossessed: Living With Multiple Chemical Sensitivities</a> at the library :/</p>
<p>In the spirit of letting serendipity taking its course, I read it. It is a set of photo-narratives of people who consider themselves as victims of Multiple Chemical Sensitivities, with a variety of reactions to city-living. It is quite depressing read to see these people trying to find &#8220;cleaner&#8221; places to live in, losing the relationships they had.</p>
<h3>Zen in the Art of Writing: Essays on Creativity</h3>
<p>Ray Bradbury is an excellent writer of fiction, and in this book, sells the practice of writing, like a seasoned salesman. <a href="http://www.amazon.com/gp/product/1877741094?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1877741094">Zen in the Art of Writing: Essays on Creativity</a> is an excellent book because it is a book that practices what it preaches. There are no hidden gotchas or tips other than to keep thinking of ideas and practicing.</p>
<h3>Being Wrong: Adventures in the Margin of Error</h3>
<p>Kathy Schulz has a ball trying to understand why humans detest being wrong. <a href="http://www.amazon.com/gp/product/0061176044?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0061176044">Being Wrong: Adventures in the Margin of Error</a> is written in an entertaining and simple way (perhaps, too simplistic?) Each chapter explores stories of people who have discovered they were wrong in different areas of life and Kathy looks into how their life altered (or not) once they grasped that they were wrong. It is an excellent book to read if you would like to understand your own emotions when someone accuses you of being wrong.</p>
<h3>Merde Happens</h3>
<p>I originally wanted to read <a href="http://www.amazon.com/gp/product/0143055542?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0143055542">Merde Actually</a>, but my <a href="http://spl.org">library</a> does not seem to have it, so I ended up reading <a href="http://www.amazon.com/gp/product/1596915277?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1596915277">Merde Happens</a>. If you have read PG Wodehouse, you would notice this book reeks of wannabe-ness. It is a page-turner, but not what I would turn to for humour.</p>
<h3>Hellboy</h3>
<p>I finally finished the 10 volumes of Hellboy. I have been reading them over a few months, but decided to review them all in one go (<a href="http://www.amazon.com/gp/product/1595824774?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1595824774">10</a>, <a href="http://www.amazon.com/gp/product/1595824316?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1595824316">9</a>, <a href="http://www.amazon.com/gp/product/159307896X?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=159307896X">8</a>,
<a href="http://www.amazon.com/gp/product/1593074751?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1593074751">6</a>, <a href="http://www.amazon.com/gp/product/1593070950?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1593070950">2</a>). Mike Mignola knows his myths and how to fashion a great story, not to mention find great artists to collaborate with. I can&#8217;t wait to get my hands on <a href="http://en.wikipedia.org/wiki/Bureau_for_Paranormal_Research_and_Defense">B.P.R.D</a>.</p>
<p>Any books you liked recently?</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Book Reviews for November 2010]]></title>
<link href="http://nimbupani.github.com/book-reviews-for-november-2010.html"/>
<updated>2010-11-29T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/book-reviews-for-november-2010</id>
<content type="html"><![CDATA[<p>Within 2 weeks of returning from Sydney, I was traipsing through New York. I stayed about 10 days in Albany and another 4 in NYC. I did have my Kindle, which is the main reason I managed to read at least these! Here are the reviews: </p>
<p></p>
<h3>Doctor No</h3>
<p>I have seen James Bond movies, but this was the first time I picked up one of the books. Wow. While I understand how <a href="http://www.amazon.com/gp/product/0142002038">Doctor No</a> can be gripping, the nauseating racism and sexism completely threw me off. I think reading Nancy Drew novels might be a better idea than reading Ian Fleming&#8217;s novels. </p>
<p></p>
<h3>Our Kind of Traitor</h3>
<p>If you have read <a href="http://www.nytimes.com/interactive/2010/11/28/world/20101128-cables-viewer.html#report/cables-06MOSCOW9533">the cable on the wedding in Dagestan</a>, you would appreciate this novel much better. Granted, <a href="http://www.amazon.ca/dp/0670064785/">Our Kind of Traitor</a> is a bit more &#8220;hollywoody&#8221; than usual John Le Carré&#8217;s offerings, it nevertheless captures the essence of a good spy thriller.</p>
<p></p>
<h3>Mort and The Light Fantastic</h3>
<p>I am finally, deliberately, making my way through the Discworld series. Is there a better writer than Terry Pratchett? I enjoyed <a href="http://www.amazon.ca/dp/0552131067/">Mort</a> much more than <a href="http://www.amazon.ca/dp/0552128481/">The Light Fantastic</a> (mainly because I am fascinated by Death, the character).</p>
<p></p>
<h3>Live Flesh</h3>
<p>It has been quite a while since I read a Ruth Rendell novel. <a href="http://www.amazon.ca/dp/0394555449/">Live Flesh</a> is quite unlike the usual murder mystery that Ruth Rendell is famous for. The story of Live Flesh is not that surprising, but the voice that each character takes on is quite an unexpected and pleasant surprise. I think this is the best I have read from Ruth Rendell. Do read. </p>
<p>What did you all read this month? Anything interesting?</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Kindle: The Power Reading Device]]></title>
<link href="http://nimbupani.github.com/kindle-the-power-reading-device.html"/>
<updated>2010-11-11T00:00:00-08:00</updated>
<id>http://nimbupani.github.com/kindle-the-power-reading-device</id>
<content type="html"><![CDATA[<p>Over the last few years, a lot of magazines have started publishing long-form content online (mostly from their archives). Thanks to these, I would invariably be sitting in front of my laptop late at night - trying to read in a posture that was comfortable (and failing). </p>
<p>I also like to read at every opportunity I get. The limited battery life & distractions from multi-tasking make that a chore. </p>
<p>I wanted a reading device that was: </p>
<ul>
<li>Easy to use with one hand.</li>
<li>Not impacted by stains or strains. </li>
<li>Not hard on the eyes</li>
<li>Big enough to make reading of articles comfortable, but not too big to be unwieldily. </li>
<li>Able to access the web.</li>
</ul>
<p>Luckily for me, the Kindle satisfies all these conditions! The killer feature is the <a href="http://en.wikipedia.org/wiki/Electronic_paper">Electronic Ink Display</a> which makes it a pleasant reading experience while also making the battery last longer (it goes on for at least 5 or 6 days without using the internet, and 2 if you use internet exhaustively).</p>
<p></p>
<h3>3G or Not to 3G</h3>
<p>The <a href="http://www.amazon.com/gp/product/B003FSUDM4?ie=UTF8&tag=nimbupani-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B003FSUDM4">Kindle 3G</a> costs about USD 50 more but is worth every cent. It offers lifetime free 3G - not just for downloading books but also for browsing the internet through their experimental browser! Here is <a href="http://kindleworld.blogspot.com/2010/10/global-kindle-3g-web-browsing-where.html">more information on worldwide 3G coverage</a>. In a country where 3G is supported &amp; it is not available, it converts to an EDGE or GPRS connection, which works just as fine &mdash; just not as fast. Unfortunately you can only have one window open (no multiple tabs) so it is not useful for anything other than checking email, Facebook, or Twitter (&amp; not clicking on the links!)</p>
<p></p>
<p>Another nice feature of the browser is the &ldquo;Article Mode&rdquo; which does what readability does to a page on the Kindle browser. So, you may not even have to do the conversion mentioned below, if you are connected over 3G. But the lack of multiple windows or tabs makes using the browser not an easy task.</p>
<h3>Read Online Offline</h3>
<p>What seals the deal, is the Kindle&rsquo;s conversion service. Kindle offers a free email service to which you can send documents, which it will convert into a Kindle-friendly format &amp; deliver to your Kindle whenever Wi-Fi is available.</p>
<p>To do this, set up your Kindle email (and set the email addresses it can receive documents from). Then send your documents to &lt;that id&gt;@free.kindle.com</p>
<p><a href="http://vyom.org">Deepak</a> found an easy way to forward long-form articles on the web to the Kindle with least effort on the Mac. You need to make sure your Mail.app can send emails. </p>
<p><em>Update:</em> Some people suggested I look into <a href="http://blog.instapaper.com/post/340418615">Instapaper Digest</a>. I have and I prefer this because Amazon charges per delivery of each digest (it can easily add up to at least USD50/yr) and you do not have much control over the format of the content. </p>
<p>Here are the steps:</p>
<ol>
<li><p>Download <a href="http://nimbupani.com/downloads/Mail_Kindle.workflow.zip">this workflow</a>, unzip, and save it in Macintosh HD > Library > PDF Services:</p><p><img src="http://nimbupani.com/files/save_workflow.png" alt="save_workflow.png" border="0" width="600" height="347" /></p></li>
<li>Open it in Automator.</li>
<li><p>Edit the &lsquo;New Mail Message&rsquo; and type in your free Kindle email address (&lt;your id&gt;@free.kindle.com) and set the right account from Mail.app to send from, like so:</p>
<p><img src="http://nimbupani.com/files/automator.png" alt="automator.png" border="0" width="600" height="493" /></p>
<p>
</li>
<li>Save it.</li>
<li>Open your browser.</li>
<li>Save the <a href="http://lab.arc90.com/experiments/readability/">Readability bookmarklet</a> to your Personal bar.</li>
</ol>
<p>To use it, just:</p>
<ol>
<li>Go to a page which contains the article you want to send to your kindle, and click the Readability Bookmarklet.</li>
<li>Click the print icon on the left. </li>
<li><p>Click the PDF option and select &ldquo;Mail to Kindle&rdquo; like this:</p><p><img src="http://nimbupani.com/files/mailkindle_0.png" alt="mailkindle.png" border="0" width="600" height="421" /><small><br>(I prefer the name Kindy.)</small></p></li>
<li>Ta-da!</li>
</ol>
<h3>Convert existing eBooks to Kindle-friendly versions</h3>
<p>Amazon&#8217;s email-based converter <a href="http://www.amazon.com/gp/help/customer/display.html/ref=hp_k3land_trans_pdocs?nodeId=200505520#email">can only handle this much</a>. If you have other documents you wish to convert to a Kindle-friendly format, <a href="http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000234621">download the KindleGen converter</a>. This is a command-line based tool, follow these steps carefully: </p>
<ol><li>Download the <a href="http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000234621">zip file</a> to your desktop.</li>
<li>Unzip it.</li>
<li>Copy the files you want to convert to your desktop.</li>
<li>Open the Terminal application.</li>
<li><p>Type the following in the Terminal window:</p>
<p><code>cd ~/Desktop/KindleGen</code></p></li>
<li><p>Press the Enter key and then type:</p>
<p><code>./KindleGen ../&lt;full-name-of-book-to-convert&gt;</code></p></li>
<li>Press Enter and the KindleGen will put the Kindle-compatible book on the desktop too.</li></ol>
<p></p>
<p>Now you can connect your Kindle via USB &amp; copy the Kindle-compatible files. </p>
<h3>The Annoying Bits</h3>
<p>There is a bit of a learning curve with the Kindle. It is not as trivial as opening an iPad and swiping away. There are things that are annoying: </p>
<ul>
<li><em>Keyboard:</em> It is good for typing text, but breaks down if you have to take notes with the book in landscape mode (you would have to keep tilting it back to type them), or are typing a password or even just typing numbers and letters together. </li>
<li><em>Scrolling:</em> The Kindle is in a desperate need of a touch screen. Scrolling is a pain and horizontal scrolling even more so. </li>
<li><em>Organization:</em> The books can only be organized into folders (no sub-folders), and you cannot bulk update books. There are no smart folders as well to move any new document into a particular folder based on filters. I suspect the keyboard-based interface prevents anything other than basic UI.</li>
</ul>
<p></p>
<p>I am yet to try Kindle&#8217;s MP3 player though (the iPod shuffle has proven to be more useful here). </p>
<p>Don&#8217;t even try watching anything animated on the Kindle, the E-ink display takes quite long to refresh and you cannot see anything animated at the slow rate it refreshes.</p>
<p>The Kindle portends a future when you can carry your library with you! It is not there yet, but I think the Kindle has the right form-factor and features to make that real. If you have a few Kindle tricks up your sleeve, do write in the comments.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Book Reviews for October 2010]]></title>
<link href="http://nimbupani.github.com/book-reviews-for-october-2010.html"/>
<updated>2010-11-04T00:00:00-07:00</updated>
<id>http://nimbupani.github.com/book-reviews-for-october-2010</id>
<content type="html"><![CDATA[<p>October was a month of traveling and being nervous about <a href="http://nimbupani.com/active-web-development.html">my talk at Web Directions South</a>, which meant I managed to read very little. But, it was the first time I read Kindle books &mdash; Alice&rsquo;s Adventures in Wonderland and The Girl Who Kicked the Hornet&rsquo;s Nest &mdash; both on the train from Darwin to Adelaide. A review of the Kindle is pending, and hopefully I should put it out soon!</p>
<p>Meanwhile, here are the reviews!</p>
<h3>Alice&rsquo;s Adventures in Wonderland</h3>
<p>I find it so annoying that most books on Kindle cost at least USD10. Luckily, there is a list of popular free books and deservedly <a href="http://www.amazon.com/gp/product/1936594064?ie=UTF8&amp;tag=nimbupani-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1936594064">Alice&rsquo;s Adventures in Wonderland</a> is listed among the top books. I am amazed this book was popular at the time it was written. I suspect it became so because it was catalogued as a &ldquo;Children&rsquo;s book&rdquo;. It certainly is not just for kids! It is written so well, and Lewis Carroll had a very lively imagination.</p>
<p></p>
<h3>The Fourth Bear: A Nursery Crime</h3>
<p>I loved Jasper Fforde&rsquo;s first Thursday Next novel, and <a href="http://www.amazon.com/gp/product/0670037729?ie=UTF8&amp;tag=nimbupani-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0670037729">The Fourth Bear: A Nursery Crime</a> is adorable too! It is quite silly a story, but has lots of word play and metaphors that delight. If you love funny puns, and metaphors, you should read Jasper Fforde&rsquo;s books!</p>
<h3>The Girl Who Kicked the Hornet&rsquo;s Nest</h3>
<p><a href="http://www.amazon.com/gp/product/030726999X?ie=UTF8&amp;tag=nimbupani-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=030726999X">The Girl Who Kicked the Hornet&rsquo;s Nest</a> was the first (and so far the only) book I have purchased on the Kindle. I don&rsquo;t know why, but the idea of reading Steig Larsson on the train crossing the Australian desert seemed irresistable. I enjoyed reading the first two, this was no different. It all ends quite happily much to my satisfaction. I only wish he was alive to write more books!</p>
<h3>Tailor of Panama</h3>
<p>Moral of the story for <a href="http://www.amazon.com/gp/product/034093770X?ie=UTF8&amp;tag=nimbupani-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=034093770X">The Tailor of Panama</a> is, Secret Service agents always look for an excuse for conspiracy even when there is none. It is a riveting read, mainly because most of the book rings true (especially when you read declassified information from U.S. or U.K.)</p>
<p></p>
<p>My productivity went for a toss after I discovered <a href="http://www.quora.com/Divya-Manian">Quora</a>, and especially <a href="http://www.quora.com/What-are-the-best-science-fiction-novels">this question</a>. Now I have more books to read &mdash; but that should not stop you from suggesting books you found interesting this month in the comments!</p>
]]></content>
</entry>
</feed>