Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 1433 lines (854 sloc) 91.496 kb
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
1 <?xml version="1.0" encoding="utf-8"?>
2 <feed xmlns="http://www.w3.org/2005/Atom">
3
4 <title><![CDATA[Divya Manian]]></title>
5 <link href="http://nimbupani.github.com/atom.xml" rel="self"/>
6 <link href="http://nimbupani.github.com/"/>
2cc14691 » Divya Manian
2012-01-23 Site updated at 2012-01-23 12:45:44 UTC
7 <updated>2012-01-22T20:28:39-08:00</updated>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
8 <id>http://nimbupani.github.com/</id>
9 <author>
10 <name><![CDATA[Divya Manian]]></name>
11
12 </author>
13 <generator uri="http://octopress.org/">Octopress</generator>
14
15
16 <entry>
2cc14691 » Divya Manian
2012-01-23 Site updated at 2012-01-23 12:45:44 UTC
17 <title type="html"><![CDATA[html5please]]></title>
18 <link href="http://nimbupani.github.com/html5please.html"/>
19 <updated>2012-01-22T17:11:00-08:00</updated>
20 <id>http://nimbupani.github.com/html5please</id>
21 <content type="html"><![CDATA[<p><a href="http://html5please.us"><img src="http://cache.gyazo.com/c5d6f648394681c59d93c487b8347cf5.png" alt="" /></a></p>
22
23 <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>
24
25 <p><img src="http://cache.gyazo.com/64c191910d79e1ec04e253caa7a74482.png" alt="" /></p>
26
27 <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>
28
29 <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>
30
31 <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>
32
33 <h3>The Setup</h3>
34
35 <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>
36
37 <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>
38
39 <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>
40
41 <h3>The Front End</h3>
42
43 <p>I was unsure of how to proceed with the design. This is how it looked like at the beginning:</p>
44
45 <p><img src="http://cache.gyazo.com/4e9fa43b13017085aa1647e1955a36d6.png" alt="" /></p>
46
47 <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>
48
49 <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>
50 ]]></content>
51 </entry>
52
53 <entry>
4327d41c » Divya Manian
2012-01-21 Site updated at 2012-01-21 17:27:56 UTC
54 <title type="html"><![CDATA[desirable]]></title>
55 <link href="http://nimbupani.github.com/desirable.html"/>
56 <updated>2012-01-21T07:22:00-08:00</updated>
57 <id>http://nimbupani.github.com/desirable</id>
58 <content type="html"><![CDATA[<p>I never gave a thought to products I considered desirable, till I saw this ad for OP-1:</p>
59
60 <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>
61
62 <p>Here is my list of products I consider desirable:</p>
63
64 <ul>
65 <li>Apple products</li>
66 <li>Eames designed products</li>
67 <li><a href="http://www.teenageengineering.com/">Teenage Engineering</a>&#8217;s products</li>
68 <li>Kindle</li>
69 <li>Dieter Rams&#8217;s designed products</li>
70 <li><a href="http://cache.gyazo.com/998ce69d9f4c1ea58cf6c3cccb0f897c.png">Singgih Kartono&#8217;s radios</a></li>
71 <li>Volkswogen Beetle/Camper</li>
72 <li>Pixar movies</li>
73 </ul>
74
75
76 <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>
77
78 <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>
79
80 <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>
81
82 <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>
83
84 <p>I only hope we can build more such products instead of trying to trick customers into buying sub-par ones.</p>
85 ]]></content>
86 </entry>
87
88 <entry>
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
89 <title type="html"><![CDATA[mustache, hogan, handlebars]]></title>
90 <link href="http://nimbupani.github.com/mustache.html"/>
91 <updated>2012-01-01T10:05:00-08:00</updated>
92 <id>http://nimbupani.github.com/mustache</id>
2b71bedb » Divya Manian
2012-01-01 Site updated at 2012-01-01 20:15:59 UTC
93 <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>
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
94
95 <h3>Mustache</h3>
96
97 <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>
98
99 <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>
100
101 <h3>Handlebars</h3>
102
103 <p>Handlebars.js provides an implementation of Mustache with some extra features.</p>
104
105 <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>
106
107 <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>
108
109 <pre><code>Handlebars.registerHelper('hyphenate', function(tag) {
110 return tag.split(' ').join('-');
111 });
112 </code></pre>
113
114 <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>
115
116 <h3>Hogan</h3>
117
118 <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>
119
5efda931 » Divya Manian
2012-01-02 Site updated at 2012-01-02 21:55:03 UTC
120 <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>
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
121
122 <h3>What about others?</h3>
123
124 <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>
125
126 <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>
127
e770cc94 » Divya Manian
2012-01-17 Site updated at 2012-01-18 02:34:41 UTC
128 <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>
3cfee0e5 » Divya Manian
2012-01-17 Site updated at 2012-01-18 02:27:49 UTC
129
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
130 <h3>What do I use?</h3>
131
e0db3362 » Divya Manian
2012-01-17 Site updated at 2012-01-18 02:41:06 UTC
132 <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>
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
133 ]]></content>
134 </entry>
135
136 <entry>
cd5e6a91 » Divya Manian
2011-12-23 Site updated at 2011-12-24 06:16:39 UTC
137 <title type="html"><![CDATA[Twittering with D3]]></title>
138 <link href="http://nimbupani.github.com/twittering-with-d3.html"/>
139 <updated>2011-12-23T20:08:00-08:00</updated>
140 <id>http://nimbupani.github.com/twittering-with-d3</id>
20fd7457 » Divya Manian
2011-12-23 Site updated at 2011-12-24 06:26:12 UTC
141 <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>
cd5e6a91 » Divya Manian
2011-12-23 Site updated at 2011-12-24 06:16:39 UTC
142
143 <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>
144
145 <h3>Idea</h3>
146
147 <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>
148
149 <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>
150
151 <h3>Design</h3>
152
153 <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>
154
155 <h3>Implementation</h3>
156
157 <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>
158
159 <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>
160
161 <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>
162
163 <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>
164
165 <h3>Play!</h3>
166
752f98e6 » Divya Manian
2011-12-25 Site updated at 2011-12-26 03:32:01 UTC
167 <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>
cd5e6a91 » Divya Manian
2011-12-23 Site updated at 2011-12-24 06:16:39 UTC
168 ]]></content>
169 </entry>
170
171 <entry>
68c75bf7 » Divya Manian
2011-12-11 Site updated at 2011-12-11 15:46:54 UTC
172 <title type="html"><![CDATA[Swatch’s Now is Android’s Future?]]></title>
173 <link href="http://nimbupani.github.com/swatchs-now-is-androids-future.html"/>
174 <updated>2011-12-11T07:04:00-08:00</updated>
175 <id>http://nimbupani.github.com/swatchs-now-is-androids-future</id>
176 <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>
177
178 <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>
179
180 <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>
181
182 <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>
183
184 <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>
185
186 <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>
187
188 <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>
189
190 <p>Clearly he has not heard of Android.</p>
191
c8e48ec0 » Divya Manian
2011-12-11 Site updated at 2011-12-11 20:52:17 UTC
192 <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>
68c75bf7 » Divya Manian
2011-12-11 Site updated at 2011-12-11 15:46:54 UTC
193
194 <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>
195 ]]></content>
196 </entry>
197
198 <entry>
69c30f54 » Divya Manian
2011-12-11 Site updated at 2011-12-11 14:45:02 UTC
199 <title type="html"><![CDATA[Redesign Notes]]></title>
200 <link href="http://nimbupani.github.com/redesign-notes.html"/>
201 <updated>2011-12-11T04:51:00-08:00</updated>
202 <id>http://nimbupani.github.com/redesign-notes</id>
203 <content type="html"><![CDATA[<p>This site sports a refresh. Here is a list of what is different now:</p>
204
205 <ul>
206 <li>Runs on <a href="http://octopress.org">Octopress</a>.</li>
207 <li>Hosted on <a href="http://github.com">Github</a>.</li>
208 <li>Anyone can submit updates for any post with a pull request.</li>
209 <li><a href="http://disqus.com">Disqus</a> comments (with threading!)</li>
210 <li>No more categories except <a href="http://nimbupani.github.com/categories/web-development">Web Development</a>.</li>
211 <li>Based on <a href="http://h5bp.com">HTML5Boilerplate</a> (obviously).</li>
212 <li>Keyboard navigation! Press left/right arrow for previous/next page.</li>
213 </ul>
214
215
216 <h3>Why</h3>
217
218 <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>
219
220 <ul>
221 <li>Lack of out of the box version control.</li>
222 <li>Unnecessary security nightmare with MySQL.</li>
223 <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>
224 <li>No way to collaborate or have others edit my mistakes (other than in comments).</li>
225 <li>Dependence on several modules which go out of date when a new version comes along.</li>
226 <li>Ceaseless updating of modules and versions.</li>
227 <li>PHP (white screen of death anyone)!?!</li>
228 <li>Poor spam filtering.</li>
229 <li>Painful backup of database and none for the layout and design.</li>
230 <li><code>.htaccess</code> drama</li>
231 </ul>
232
233
234 <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>
235
236 <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>
237
238 <h3>Disqus</h3>
239
240 <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>
241
242 <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>
243
244 <h3>Github Setup</h3>
245
246 <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>
247
248 <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>
249
250 <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>
251
252 <h3>Jekyll</h3>
253
254 <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>
255
256 <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>
257
258 <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>
259
260 <h3>Liquid</h3>
261
c8e48ec0 » Divya Manian
2011-12-11 Site updated at 2011-12-11 20:52:17 UTC
262 <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>
69c30f54 » Divya Manian
2011-12-11 Site updated at 2011-12-11 14:45:02 UTC
263
264 <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>
265
266 <h3>Design</h3>
267
268 <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>
269
270 <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>
271
272 <h3>Performance</h3>
273
274 <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>
275
276 <h3>Complaints</h3>
277
f9224ca7 » Divya Manian
2011-12-12 Site updated at 2011-12-12 16:27:32 UTC
278 <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>
69c30f54 » Divya Manian
2011-12-11 Site updated at 2011-12-11 14:45:02 UTC
279
280 <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>
281
282 <h3>Future</h3>
283
284 <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>
285 ]]></content>
286 </entry>
287
288 <entry>
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
289 <title type="html"><![CDATA[Summary of various exciting CSS drafts and proposals]]></title>
290 <link href="http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals.html"/>
291 <updated>2011-12-10T18:51:00-08:00</updated>
292 <id>http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals</id>
293 <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>
294
295 <p>You could probably look out for updates on the meeting <a href="http://twitter.com/csswg">@csswg</a></p>
296
49992864 » Divya Manian
2011-12-10 Site updated at 2011-12-11 04:35:56 UTC
297 <h3><a href="http://dev.w3.org/csswg/css3-regions/">CSS Regions</a></h3>
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
298
299
04afb012 » Divya Manian
2011-12-20 Site updated at 2011-12-20 14:13:40 UTC
300 <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>
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
301
04afb012 » Divya Manian
2011-12-20 Site updated at 2011-12-20 14:13:40 UTC
302 <pre><code>.contentthatflows { flow-into: newspaper-flow; }
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
303
04afb012 » Divya Manian
2011-12-20 Site updated at 2011-12-20 14:13:40 UTC
304 .region1-1, .region1-2 { flow-from: newspaper-flow; }
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
305 </code></pre>
306
04afb012 » Divya Manian
2011-12-20 Site updated at 2011-12-20 14:13:40 UTC
307 <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>.
308 Properties defined on <code>.region1-1</code> or <code>.region1-2</code> will not trickle down to the content that flows into them.</p>
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
309
04afb012 » Divya Manian
2011-12-20 Site updated at 2011-12-20 14:13:40 UTC
310 <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>
311
312 <pre><code>@region .region1-1 {
313 p {
314 color: red;
315 }
316 }
317 </code></pre>
318
319 <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>
212cfd69 » Divya Manian
2011-12-10 Site updated at 2011-12-11 03:19:05 UTC
320
321 <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>
322
323 <h3><a href="http://www.interoperabilitybridges.com/css3-floats/"> <span class="caps">CSS3</span> Floats </a></h3>
324
325
326 <p></p>
327
328 <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>
329
330
331 <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>
332
333 <h3> <a href="http://dev.w3.org/csswg/css3-exclusions/"> <span class="caps">CSS3</span> Exclusions </a> </h3>
334
335
336 <p></p>
337
338 <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>
339
340
341 <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>
342
343 <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>
344
345
346 <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>
347
348 <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>
349
350
351 <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>
352
353 <h3> <a href="http://dev.w3.org/csswg/css3-grid-align/"> <span class="caps">CSS3</span> Grid Layout </a> </h3>
354
355
356 <p></p>
357
358 <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>
359
360
361 <p></p>
362
363 <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>
364
365
366 <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>
367
368 <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>
369
370
371 <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>
372
373 <p> <img src="http://gyazo.com/9f995e0e98ba6c0dfbf71930dce4fb66.png"> <br> ( <a href="http://jsfiddle.net/nimbu/rK9Pd/">source</a> ) </p>
374
375
376 <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>
377
378 <h3> <a href="http://dev.w3.org/csswg/cssom/"> <span class="caps">CSSOM</span> </a> </h3>
379
380
381 <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>
382
383
384 <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>
385 ]]></content>
386 </entry>
387
388 <entry>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
389 <title type="html"><![CDATA[This revolution needs new revolutionaries]]></title>
390 <link href="http://nimbupani.github.com/this-revolution-needs-new-revolutionaries.html"/>
391 <updated>2011-05-21T00:00:00-07:00</updated>
392 <id>http://nimbupani.github.com/this-revolution-needs-new-revolutionaries</id>
393 <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>
394
395
396
397
398 <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>
399
400
401
402
403 <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>
404
405
406 <p></p>
407
408 <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>
409
410
411
412
413 <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>
414
415
416
417
418 <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>
419
420
421
422
423 <p>It is time for us to get new idols. Here is what my idols do:</p>
424
425
426
427
428 <h3>Create</h3>
429
430
431 <p>They code. They have demos on their website or on Github.</p>
432
433
434
435
436 <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>
437
438
439
440
441 <h3>Research</h3>
442
443
444 <p></p>
445
446 <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>
447
448
449
450
451 <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>
452
453
454
455
456 <h3>Collaborate</h3>
457
458
459 <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>
460
461
462
463
464 <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>
465
466
467
468
469 <p>The old revolution is dead, long live the revolution.</p>
470
471 ]]></content>
472 </entry>
473
474 <entry>
475 <title type="html"><![CDATA[Some CSS Transition hacks]]></title>
476 <link href="http://nimbupani.github.com/some-css-transition-hacks.html"/>
477 <updated>2011-05-17T00:00:00-07:00</updated>
478 <id>http://nimbupani.github.com/some-css-transition-hacks</id>
479 <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>
480
481
482
483
484 <h2>Fake Transitions on Gradients</h2>
485
486
487 <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>
488
489
490 <p>Here is a demo:</p>
491
492
493 <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/zuNbj/embedded/result,css"></iframe>
494
495
496 <h3>Caveat</h3>
497
498
499 <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>
500
501
502
503
504 <h2>Animate elements with just font-size</h2>
505
506
507 <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>
508
509
510 <p></p>
511
512 <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>
513
514
515 <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>
516
517
518 <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>
519
520
521
522
523 <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/86kET/embedded/result,css"></iframe>
524
525
526 <h3>Caveats</h3>
527
528
529 <ul>
530 <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>
531 <li>This only works for properties you want to transform that accept length units. </li>
532 <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>
533 </ul>
534
535
536 <p>If you know of a snappier way to do these, please fork the fiddles and link to your forks in the comments.</p>
537
538 ]]></content>
539 </entry>
540
541 <entry>
542 <title type="html"><![CDATA[Safe CSS Defaults]]></title>
543 <link href="http://nimbupani.github.com/safe-css-defaults.html"/>
544 <updated>2011-04-13T00:00:00-07:00</updated>
545 <id>http://nimbupani.github.com/safe-css-defaults</id>
546 <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>
547
548
549
550
551 <pre><code>z-index: none;</code></pre>
552
553
554
555
556 <p>Then go on in life, as it “renders” like you wanted it, it works, no big deal. </p>
557
558
559
560
561 <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>
562
563
564
565
566 <h3>Initial Values</h3>
567
568
569 <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>
570
571
572
573
574 <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>
575
576
577
578
579 <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>
580
581
582
583
584 <h3>Good News!</h3>
585
586
587 <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>
588
589
590
591
592 <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>
593
594
595
596
597 <table>
598 <thead>
599 <tr>
600 <th>
601 Property
602 </th>
603 <th>
604 Value
605 </th>
606 </tr>
607 </thead>
608 <tbody>
609 <tr>
610 <td>
611 <a href="http://www.w3.org/TR/css3-background/#background">background</a>
612 </td>
613 <td>
614 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>
615 </td>
616 </tr>
617 <tr>
618 <td>
619 <a href="http://www.w3.org/TR/css3-background/#ltborder-widthgt">border</a>
620 </td>
621 <td>
622 none or 0
623 </td>
624 </tr>
625 <tr>
626 <td>
627 <a href="http://www.w3.org/TR/css3-background/#border-image-source">border-image</a>
628 </td>
629 <td>
630 none
631 </td>
632 </tr>
633 <tr>
634 <td>
635 <a href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a>
636 </td>
637 <td>
638 0
639 </td>
640 </tr>
641 <tr>
642 <td>
643 <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">box-shadow</a>
644 </td>
645 <td>
646 none
647 </td>
648 </tr>
649 <tr>
650 <td>
651 <a href="http://www.w3.org/TR/css3-box/#clear">clear</a>
652 </td>
653 <td>
654 none
655 </td>
656 </tr>
657 <tr>
658 <td>
659 <a href="http://www.w3.org/TR/css3-color/#foreground">color</a>
660 </td>
661 <td>
662 No value, so best option is to use <code>inherit</code> to cascade from a parent element&#8217;s color value.
663 </td>
664 </tr>
665 <tr>
666 <td>
667 <a href="http://www.w3.org/TR/css3-content/#content">content</a>
668 </td>
669 <td>
670 normal
671 </td>
672 </tr>
673 <tr>
674 <td>
675 <a href="http://www.w3.org/TR/css3-box/#display">display</a>
676 </td>
677 <td>
678 inline
679 </td>
680 </tr>
681 <tr>
682 <td>
683 <a href="http://www.w3.org/TR/css3-box/#the-lsquo1">float</a>
684 </td>
685 <td>
686 none
687 </td>
688 </tr>
689 <tr>
690 <td>
691 <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#descdef-font-style">font</a>
692 </td>
693 <td>
694 normal
695 </td>
696 </tr>
697 <tr>
698 <td>
699 <a href="http://www.w3.org/TR/css3-box/#height">height</a>
700 </td>
701 <td>
702 auto
703 </td>
704 </tr>
705 <tr>
706 <td>
707 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#letter-spacing0">letter-spacing</a>
708 </td>
709 <td>
710 normal
711 </td>
712 </tr>
713 <tr>
714 <td>
715 <a href="http://www.w3.org/TR/css3-linebox/#InlineBoxHeight">line-height</a>
716 </td>
717 <td>
718 normal
719 </td>
720 </tr>
721 <tr>
722 <td>
723 <a href="http://www.w3.org/TR/css3-box/#max-width">max-width</a>
724 </td>
725 <td>
726 none
727 </td>
728 </tr>
729 <tr>
730 <td>
731 <a href="http://www.w3.org/TR/css3-box/#max-width">max-height</a>
732 </td>
733 <td>
734 none
735 </td>
736 </tr>
737 <tr>
738 <td>
739 <a href="http://www.w3.org/TR/css3-box/#min-height">min-width</a>
740 </td>
741 <td>
742 0
743 </td>
744 </tr>
745 <tr>
746 <td>
747 <a href="http://www.w3.org/TR/css3-box/#min-height">min-height</a>
748 </td>
749 <td>
750 0
751 </td>
752 </tr>
753 <tr>
754 <td>
755 <a href="http://www.w3.org/TR/css3-color/#opacity">opacity</a>
756 </td>
757 <td>
758 1
759 </td>
760 </tr>
761 <tr>
762 <td>
763 <a href="http://www.w3.org/TR/css3-box/#overflow0">overflow</a>
764 </td>
765 <td>
766 visible
767 </td>
768 </tr>
769 <tr>
770 <td>
771 <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/#page-break-inside">page-break-inside</a>
772 </td>
773 <td>
774 auto
775 </td>
776 </tr>
777 <tr>
778 <td>
779 <a href="http://www.w3.org/TR/CSS2/visuren.html#propdef-position">position</a>
780 </td>
781 <td>
782 static (not <code>relative</code>)
783 </td>
784 </tr>
785 <tr>
786 <td>
787 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-shadow">text-shadow</a>
788 </td>
789 <td>
790 none
791 </td>
792 </tr>
793 <tr>
794 <td>
795 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-transform">text-transform</a>
796 </td>
797 <td>
798 none
799 </td>
800 </tr>
801 <tr>
802 <td>
803 <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-property">transform</a>
804 </td>
805 <td>
806 none
807 </td>
808 </tr>
809 <tr>
810 <td>
811 <a href="http://www.w3.org/TR/css3-transitions/#the-transition-property-property-">transition</a>
812 </td>
813 <td>
814 none
815 </td>
816 </tr>
817 <tr>
818 <td>
819 <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a>
820 </td>
821 <td>
822 baseline
823 </td>
824 </tr>
825 <tr>
826 <td>
827 <a href="http://www.w3.org/TR/css3-box/#visibility">visibility</a>
828 </td>
829 <td>
830 visible
831 </td>
832 </tr>
833 <tr>
834 <td>
835 <a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white-space</a>
836 </td>
837 <td>
838 normal
839 </td>
840 </tr>
841 <tr>
842 <td>
843 <a href="http://www.w3.org/TR/css3-box/#width">width</a>
844 </td>
845 <td>
846 auto
847 </td>
848 </tr>
849 <tr>
850 <td>
851 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-spacing0">word-spacing</a>
852 </td>
853 <td>
854 normal
855 </td>
856 </tr>
857 <tr>
858 <td>
859 <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">z-index</a>
860 </td>
861 <td>
862 auto (not <code>none</code> or <code>0</code>)
863 </td>
864 </tr>
865 </tbody>
866 </table>
867
868
869 <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>
870
871 ]]></content>
872 </entry>
873
874 <entry>
875 <title type="html"><![CDATA[Unplugged 2011]]></title>
876 <link href="http://nimbupani.github.com/unplugged-2011.html"/>
877 <updated>2011-03-04T00:00:00-08:00</updated>
878 <id>http://nimbupani.github.com/unplugged-2011</id>
879 <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>
880
881 <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>
882
883 <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>
884
885 <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>
886
887 <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>
888
889 <p>See you there!</p>
890 ]]></content>
891 </entry>
892
893 <entry>
894 <title type="html"><![CDATA[Bokeh with CSS3 Gradients]]></title>
895 <link href="http://nimbupani.github.com/bokeh-with-css3-gradients.html"/>
896 <updated>2011-02-22T00:00:00-08:00</updated>
897 <id>http://nimbupani.github.com/bokeh-with-css3-gradients</id>
898 <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>
899
900
901
902
903 <h3>Result</h3>
904
905
906 <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/CPCRU/embedded/result,css"></iframe>
907
908
909
910
911 <h3>Design of the Bokeh</h3>
912
913
914 <p>I referred to some pictures of bokeh, and these were their defining characteristics:</p>
915
916
917 <ul>
918 <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>
919 <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>
920 <li>Each color group needs to have a very blurry large background circle to base the rest of the circles from.</li>
921 <li>Each color group has 2 or more of smaller circles and one big blurry circle as a base.</li>
922 <li>Colors used are almost transparent so that the background color shows through, and the colors mix well when they are overlaid.</li>
923 </ul>
924
925
926
927
928 <h3>Implementation</h3>
929
930
931 <p>Here is how a single &#8220;tile&#8221; looks like:</p>
932
933
934
935
936 <p><img src="http://nimbupani.com/files/bokeh-graph.png" alt="bokeh-graph.png" border="0" width="420" height="300"></p>
937
938
939
940
941 <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>
942
943
944
945
946 <p>Then, we use <code>background-position</code> to offset them into places we want.</p>
947
948
949 <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>
950
951
952
953
954 <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>
955
956
957 <p></p>
958
959 <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>
960
961
962
963
964 <h3>Update</h3>
965
966
967 <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>
968
969 ]]></content>
970 </entry>
971
972 <entry>
973 <title type="html"><![CDATA[Making "Pure CSS3" demos better]]></title>
974 <link href="http://nimbupani.github.com/making-pure-css3-demos-better.html"/>
975 <updated>2011-02-17T00:00:00-08:00</updated>
976 <id>http://nimbupani.github.com/making-pure-css3-demos-better</id>
977 <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>
978
979
980
981
982 <p>Here are some reasons why this is not a great example of best practices:</p>
983
984
985 <ul>
986 <li>Uses a table for navigation when the semantic nav element (or a simple list) would do.</li>
987 <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>
988 <li><p>This is how it degrades on browsers that do not support CSS3 transitions, and transforms:</p>
989 <p><img src="http://nimbupani.com/files/79e91b32f7713c3a03a5650e476ade27.png" alt="79e91b32f7713c3a03a5650e476ade27.png" border="0" width="600" height="348" /></p>
990 </li>
991 </ul>
992
993
994 <p>So, lets fix it! Here is the final result:</p>
995
996
997 <p></p>
998
999 <iframe style="width: 100%; height: 400px" src="http://jsfiddle.net/nimbu/KEqSF/embedded/result,html,css"></iframe>
1000
1001
1002 <h3>Changes:</h3>
1003
1004
1005 <ul>
1006 <li><p>No translateX functions. All we need to do is to animate the <code>left</code> property. So:</p>
1007 <pre><code>#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
1008 #a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
1009 #a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }</code></pre>
1010 <p>becomes:</p>
1011 <pre><code>#a1:target .pages { left: 0%; }
1012 #a2:target .pages { left: -100%; }
1013 #a3:target .pages { left: -200%; }</code></pre>
1014 </li>
1015 <li>
1016 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.
1017 </li>
1018 <li><p>No tables for nav! Just use the <code>nav</code> element with a set of links:</p>
1019 <pre>
1020 <code>&lt;table&gt;
1021 &lt;tr&gt;
1022 &lt;td&gt;&lt;a href=&quot;#a1&quot; id=&quot;p1&quot;&gt;1&lt;/a&gt;&lt;/td&gt;
1023 &lt;td&gt;&lt;a href=&quot;#a2&quot; id=&quot;p2&quot;&gt;2&lt;/a&gt;&lt;/td&gt;
1024 &lt;td&gt;&lt;a href=&quot;#a3&quot; id=&quot;p3&quot;&gt;3&lt;/a&gt;&lt;/td&gt;
1025 &lt;/tr&gt;
1026 &lt;/table&gt;</code>
1027 </pre>
1028 <p>becomes: </p>
1029 <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>
1030 </li>
1031 <li>
1032 <p>In the default view, the first page is positioned outside the viewport:</p>
1033 <pre><code>/* Page Positioning */
1034 #i1 { left: 100%; }
1035 #i2 { left: 200%; }
1036 #i3 { left: 300%; }</code></pre>
1037 <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>
1038 <pre><code>/* Pages */
1039 #i2 { left: 100%; }
1040 #i3 { left: 200%; } </code></pre>
1041 </li>
1042 </ul>
1043
1044
1045 <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>
1046
1047
1048 <p></body></p>
1049 ]]></content>
1050 </entry>
1051
1052 <entry>
1053 <title type="html"><![CDATA[Book Reviews for January & February 2011]]></title>
1054 <link href="http://nimbupani.github.com/book-reviews-for-january-and-february-2011.html"/>
1055 <updated>2011-02-17T00:00:00-08:00</updated>
1056 <id>http://nimbupani.github.com/book-reviews-for-january-and-february-2011</id>
1057 <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>
1058
1059
1060
1061
1062 <H3>The Jewel in the Crown</H3>
1063
1064
1065 <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>
1066
1067
1068
1069
1070 <h3>Gould&#8217;s Book of Fish</h3>
1071
1072
1073 <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>
1074
1075
1076
1077
1078 <h3>Tokyo Vice</h3>
1079
1080
1081 <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>
1082
1083
1084
1085
1086 <h3>Ender&#8217;s Game</h3>
1087
1088
1089 <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>
1090
1091
1092 <p></p>
1093
1094 <p>As usual, here is my plea for you to recommend books you liked reading this month!</p>
1095
1096
1097
1098 ]]></content>
1099 </entry>
1100
1101 <entry>
1102 <title type="html"><![CDATA[Web Opener at Opera]]></title>
1103 <link href="http://nimbupani.github.com/web-opener-at-opera.html"/>
1104 <updated>2011-01-31T00:00:00-08:00</updated>
1105 <id>http://nimbupani.github.com/web-opener-at-opera</id>
1106 <content type="html"><![CDATA[<p>Good news everyone! I am now a Web Opener at <a href="http://opera.com">Opera</a>.</p>
1107
1108 <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>
1109
1110 <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>
1111
1112 <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>
1113 ]]></content>
1114 </entry>
1115
1116 <entry>
1117 <title type="html"><![CDATA[Current Color in CSS]]></title>
1118 <link href="http://nimbupani.github.com/current-color-in-css.html"/>
1119 <updated>2011-01-27T00:00:00-08:00</updated>
1120 <id>http://nimbupani.github.com/current-color-in-css</id>
1121 <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>
1122
1123
1124
1125
1126 <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>
1127
1128
1129
1130
1131 <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>
1132
1133
1134 <p></p>
1135
1136 <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>
1137
1138
1139
1140
1141 <p>Now to find some practical use for this!</p>
1142
1143 ]]></content>
1144 </entry>
1145
1146 <entry>
1147 <title type="html"><![CDATA[Book Reviews for December 2010]]></title>
1148 <link href="http://nimbupani.github.com/book-reviews-for-december-2010.html"/>
1149 <updated>2010-12-22T00:00:00-08:00</updated>
1150 <id>http://nimbupani.github.com/book-reviews-for-december-2010</id>
1151 <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>
1152
1153
1154
1155
1156 <h3>The Dispossessed: Living With Multiple Chemical Sensitivities</h3>
1157
1158
1159
1160
1161 <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>
1162
1163
1164
1165
1166 <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>
1167
1168
1169
1170
1171 <h3>Zen in the Art of Writing: Essays on Creativity</h3>
1172
1173
1174 <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>
1175
1176
1177
1178
1179 <h3>Being Wrong: Adventures in the Margin of Error</h3>
1180
1181
1182 <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>
1183
1184
1185
1186
1187 <h3>Merde Happens</h3>
1188
1189
1190 <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>
1191
1192
1193
1194
1195 <h3>Hellboy</h3>
1196
1197
1198 <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>,
1199 <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>
1200
1201
1202
1203
1204 <p>Any books you liked recently?</p>
1205
1206 ]]></content>
1207 </entry>
1208
1209 <entry>
1210 <title type="html"><![CDATA[Book Reviews for November 2010]]></title>
1211 <link href="http://nimbupani.github.com/book-reviews-for-november-2010.html"/>
1212 <updated>2010-11-29T00:00:00-08:00</updated>
1213 <id>http://nimbupani.github.com/book-reviews-for-november-2010</id>
1214 <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>
1215
1216
1217 <p></p>
1218
1219 <h3>Doctor No</h3>
1220
1221
1222 <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>
1223
1224
1225 <p></p>
1226
1227 <h3>Our Kind of Traitor</h3>
1228
1229
1230 <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>
1231
1232
1233 <p></p>
1234
1235 <h3>Mort and The Light Fantastic</h3>
1236
1237
1238 <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>
1239
1240
1241 <p></p>
1242
1243 <h3>Live Flesh</h3>
1244
1245
1246 <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>
1247
1248
1249
1250
1251 <p>What did you all read this month? Anything interesting?</p>
1252
1253
1254
1255 ]]></content>
1256 </entry>
1257
1258 <entry>
1259 <title type="html"><![CDATA[Kindle: The Power Reading Device]]></title>
1260 <link href="http://nimbupani.github.com/kindle-the-power-reading-device.html"/>
1261 <updated>2010-11-11T00:00:00-08:00</updated>
1262 <id>http://nimbupani.github.com/kindle-the-power-reading-device</id>
1263 <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>
1264
1265
1266 <p>I also like to read at every opportunity I get. The limited battery life & distractions from multi-tasking make that a chore. </p>
1267
1268
1269 <p>I wanted a reading device that was: </p>
1270
1271
1272 <ul>
1273 <li>Easy to use with one hand.</li>
1274 <li>Not impacted by stains or strains. </li>
1275 <li>Not hard on the eyes</li>
1276 <li>Big enough to make reading of articles comfortable, but not too big to be unwieldily. </li>
1277 <li>Able to access the web.</li>
1278 </ul>
1279
1280
1281 <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>
1282
1283
1284 <p></p>
1285
1286 <h3>3G or Not to 3G</h3>
1287
1288
1289 <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>
1290
1291
1292 <p></p>
1293
1294 <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>
1295
1296
1297 <h3>Read Online Offline</h3>
1298
1299
1300 <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>
1301
1302
1303 <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>
1304
1305
1306 <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>
1307
1308
1309 <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>
1310
1311
1312
1313
1314 <p>Here are the steps:</p>
1315
1316
1317 <ol>
1318 <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>
1319 <li>Open it in Automator.</li>
1320 <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>
1321 <p><img src="http://nimbupani.com/files/automator.png" alt="automator.png" border="0" width="600" height="493" /></p>
1322 <p>
1323 </li>
1324 <li>Save it.</li>
1325 <li>Open your browser.</li>
1326 <li>Save the <a href="http://lab.arc90.com/experiments/readability/">Readability bookmarklet</a> to your Personal bar.</li>
1327 </ol>
1328
1329
1330 <p>To use it, just:</p>
1331
1332
1333 <ol>
1334 <li>Go to a page which contains the article you want to send to your kindle, and click the Readability Bookmarklet.</li>
1335 <li>Click the print icon on the left. </li>
1336 <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>
1337 <li>Ta-da!</li>
1338 </ol>
1339
1340
1341 <h3>Convert existing eBooks to Kindle-friendly versions</h3>
1342
1343
1344 <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>
1345
1346
1347 <ol><li>Download the <a href="http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000234621">zip file</a> to your desktop.</li>
1348 <li>Unzip it.</li>
1349 <li>Copy the files you want to convert to your desktop.</li>
1350 <li>Open the Terminal application.</li>
1351 <li><p>Type the following in the Terminal window:</p>
1352 <p><code>cd ~/Desktop/KindleGen</code></p></li>
1353 <li><p>Press the Enter key and then type:</p>
1354 <p><code>./KindleGen ../&lt;full-name-of-book-to-convert&gt;</code></p></li>
1355 <li>Press Enter and the KindleGen will put the Kindle-compatible book on the desktop too.</li></ol>
1356
1357
1358 <p></p>
1359
1360 <p>Now you can connect your Kindle via USB &amp; copy the Kindle-compatible files. </p>
1361
1362
1363 <h3>The Annoying Bits</h3>
1364
1365
1366 <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>
1367
1368
1369 <ul>
1370 <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>
1371 <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>
1372 <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>
1373 </ul>
1374
1375
1376 <p></p>
1377
1378 <p>I am yet to try Kindle&#8217;s MP3 player though (the iPod shuffle has proven to be more useful here). </p>
1379
1380
1381 <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>
1382
1383
1384 <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>
1385
1386 ]]></content>
1387 </entry>
1388
1389 <entry>
1390 <title type="html"><![CDATA[Book Reviews for October 2010]]></title>
1391 <link href="http://nimbupani.github.com/book-reviews-for-october-2010.html"/>
1392 <updated>2010-11-04T00:00:00-07:00</updated>
1393 <id>http://nimbupani.github.com/book-reviews-for-october-2010</id>
1394 <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>
1395
1396
1397 <p>Meanwhile, here are the reviews!</p>
1398
1399
1400 <h3>Alice&rsquo;s Adventures in Wonderland</h3>
1401
1402
1403 <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>
1404
1405
1406 <p></p>
1407
1408 <h3>The Fourth Bear: A Nursery Crime</h3>
1409
1410
1411 <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>
1412
1413
1414 <h3>The Girl Who Kicked the Hornet&rsquo;s Nest</h3>
1415
1416
1417 <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>
1418
1419
1420 <h3>Tailor of Panama</h3>
1421
1422
1423 <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>
1424
1425
1426 <p></p>
1427
1428 <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>
1429
1430 ]]></content>
1431 </entry>
1432
1433 </feed>
Something went wrong with that request. Please try again.