Nimbupani Designs - web design

Links for 2010-07-27 [del.icio.us]

Wed, 28 Jul 2010 00:00:00 PDT

JavaScript Semicolon Insertion
Via the jQuery IRC. Scares the living daylights out of me!

Links for 2010-07-21 [del.icio.us]

Thu, 22 Jul 2010 00:00:00 PDT

G-Men, the OSS and My iPad! | TeleRead: Bring the E-Books Home
How to search the CIA and other US Security archives online!

Links for 2010-07-18 [del.icio.us]

Mon, 19 Jul 2010 00:00:00 PDT

Internet Explorer Standards Support Documents
IE comes clean on what standards different versions support!

SVG is coming!

divya — Fri, 16 Jul 2010 15:00:07 +0000

I am an SVG fanatic, in fact I was using SVG for implementing my final year project (which was to create a GPS system on a linux mobile device) in 2000. So yes, I am partial to SVG and cannot stop writing about it.

I have long bemoaned the persistent lack of love for SVG from browser vendors but these developments indicate that is no longer the case:

HTML spec allows inline SVG in your HTML document (and not just XHTML document). This means you can use an SVG element inline an HTML document (without using any ugly object tags). You can already test it on the nightly builds of Firefox
Apple’s retina display brought back attention to this old post on how to develop websites for higher DPI – which basically advocates SVG (Paul Irish also tells me a future release of Android will support SVG).
@media queries are extensively supported in several browsers. Andreas Bovens of Opera has a great technique to use media queries with SVG which he explains in this video:

You can control the styles of the SVG file that referred to by an image element, based on the width specified on the image element (see demos of colored circles, scaling SVG logos, and altering SVG charts.

Update: Shepazu has rightly stated CSS Media Queries work on Firefox, Webkit and Opera, not just Opera (for some reason the colored circles demo only seems to show in Opera).
SVG-Edit is a fantastic open-source online SVG editing platform (it is new and the UI needs some love), especially for tiny icons.
Opera, Webkit browsers recognize SVG images served as data-uris for use as background images.

I am glad things are looking up for dear SVG. What was that Canvas thing you were talking about?

Wee! Marquee

divya — Wed, 14 Jul 2010 15:54:30 +0000

I am learning JavaScript and I detoured into learning jQuery. My intention is to learn jQuery by developing plugins :D This way, it would be a practical understanding of how to use jQuery and the experts among you might help me out by pointing out what could be made better.

The first plugin I created replicates the much despised marquee effect. Thanks to Twitter homepage, marquee is all the rage these days. Twitter marquee looks good because the width of the text in the marquee is longer than the marquee viewport (and the scroll is continuous). But when you use a CMS, you can never be certain of the width of the text that scrolls in the marquee. Sometimes, it is just a single line of text that is smaller than the marquee viewport, and at other times it is longer than the marquee viewport.

So, this plugin accommodates for both cases. If the width of all the elements that scroll are less than the width of the marquee, then it uses the normal marquee behavior.

You might ask me why I did not use webkit’s marquee element. This is because marquee is officially obsolete. I have no intention of bringing it back just because webkit supports it (webkit fanboys should read this rant)!

There are also a bunch of options for you: adjust the width of the marquee view port, slow down or speed up the marquee, . You can even use your own class name for each instance to change how the fade looks.

If this all sounds sinnlos, go see the demo page now. If you are a kind person who is also an expert in jQuery do comment on how I can improve it. Also, my dæmon, Mr.Claws hides within that page, click away and find him!

Links for 2010-07-12 [del.icio.us]

Tue, 13 Jul 2010 00:00:00 PDT

On Solutions – Jens O. Meiert
Exactly what he says.

Vignettes with CSS3 Box Shadows

divya — Mon, 12 Jul 2010 14:58:15 +0000

Paul Irish (why nobody else sends me such awesome stuff beats me), showed me yet another CSS3/HTML5 website.

What is interesting is, the site author uses 4 empty divs to create the vignetting effect on the four corners of the viewport. I thought it would be a good use of box-shadow property to recreate the same effect, minus the 3 extra divs (I am not the first to think of it).

The caveat is, the CSS3 box-shadow property slows down webkit browsers considerably. So, this bug is resolved this demo will only work on non-webkit browsers like Opera 10.5x, Firefox 3.5+ (IE 9 Platform Preview claims box-shadow support, but this demo does not render box-shadows there).

You could use the same technique to add vignetting to images. Here is how:

In your HTML document, add a wrapper element to the image, I have this:
```
<p class="vignette"><img src="image.jpg"></p>
```

In your CSS file, add this:

p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

The content: "" is essential to make sure the pseudo-element is generated. z-index positions the pseudo-element above the image.

Die Ende!

Yes, I do wish webkit would hurry up and fix those horrible box-shadow bugs. Till then, you can indulge with me in this fantasy and view the demo :)

Links for 2010-07-11 [del.icio.us]

Mon, 12 Jul 2010 00:00:00 PDT

Surfin’ Safari - Blog Archive » High DPI Web Sites
I kinda prefer the background-size and svg options than using media queries for targeting retina display
Opera's Developer Relations Team - How media queries allow you to optimize SVG icons for several sizes
Media query will trigger on the "viewport" change, which means if there is an img tag referring to SVG image which has a specified width, media queries can be used to trigger different CSS treatments for the SVG element (as CSS can be used to style media queries). BRILLIANT!

Links for 2010-07-03 [del.icio.us]

Sun, 04 Jul 2010 00:00:00 PDT

Rich snippets and structured markup - Webmaster Tools Help
A very good explanation of microdata/rdfa/microformats to create "rich snippets" for Google.

Links for 2010-07-01 [del.icio.us]

Fri, 02 Jul 2010 00:00:00 PDT

Text version of Melbourne map (Writing text alternatives for maps)
A nice way to present information for those who cannot see a map.

Mblax

divya — Mon, 28 Jun 2010 14:07:31 +0000

Two years ago, I went about deliberately learning about the African continent. While prowling around for African music, I fell in love with West African music at first sight (er, note?) I haven’t found a good way to track where these artists will be performing live (Songkick comes close).

So here it is, a West African Music Events Tracker that tracks some of my favourite West African musicians on tour: Angelique Kidjo, Habib Koite, Salif Keita, Baaba Maal and more.

Technical Details

I used Yahoo pipes to create a JSON feed, from their Myspace, official websites and Facebook pages, which is then rendered into the table.
This site was created using the HTML 5 Boilerplate. It is a project by Paul Irish that I am contributing to, which should be released soon.
If it is not obvious, the site uses all the fancy CSS3 properties: outlines, offsets, multiple columns, text-shadows, and advanced selectors. This was also the first time I used fonts from Google’s Font Directory using their WebFont Loader.
I have also used @media CSS queries to adjust the look of the site for different widths, which means if your screen is less than 800px then the site will look different. You can also see it in action if you resize the browser.

I hope to soon add more events from Songkick using their API. If you have any other artists to suggest (or anything to improve upon), please do!

Meanwhile, the source files of the website (including the PSD files) are available at github.com/nimbupani/mblax Feel free to use elements of the website as you see fit!

Drop Shadows with CSS3

divya — Thu, 24 Jun 2010 04:15:49 +0000

Paul Irish showed me this implementation of CSS3 drop-shadows. The demo only works for webkit based browsers (though it will work on Firefox if the appropriate vendor-prefixes are added to the stylesheet).

I first noticed this kind of drop-shadow on Mike Matas’s old website. Looking at the CSS for the CSS3 implementation of the drop-shadow (uses box-shadows to avoid the use of an image), there were a number of things that I found missing:

The article is absolutely positioned. It will not work in Firefox if it is not so (the simple fix is to add display: block; to the style of the article element).
The method requires a block element within article to render correctly. The CSS for the block element has a lot of styles that I think are unnecessary and complicated.
The stylesheet was longer and more complicated than necessary.

As an attempt to try a simpler version of it, I came up with this implementation of CSS3 Drop-shadows. This is what I did:

Add a wrapper around the container that needs shadows. Position it relatively.

Absolute position the pseudo-elements like the demonstration above, except position them behind the main content with z-index: -1, like so:

article:before, article:after {
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);   
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);	    
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	position: absolute; 
	bottom: 15px; 
	z-index: -1; 
	width: 40%; 
	height: 20%; 
	content: ""; 
	background: rgba(0, 0, 0, 0.7); 
}

Thanks simurai for better box-shadow values!

Fin. This is 44 lines of code as compared to 84 lines of code in the original demo and works on all the latest versions of Opera, Chrome, Safari and Firefox. But, Opera’s, and Firefox’s implementation of transforms are not as good as Webkit’s.

It is interesting to attempt it for fun, but this is definitely not ready for production use!

Update: I have noticed that it sorta breaks on very wide boxes, I have no obvious solution yet, but I have updated the background for article:before and article:after to mitigate that.

Diversity

divya — Fri, 21 May 2010 02:45:05 +0000

What should be the aims of a web conference?

I think it should be to:

Provide discussion of interesting perspectives
Challenge existing perceptions
Bring diverse set of people together
Inform the audience on current developments and challenges.

These are not met when conferences keep inviting the same people to talk on the same niches in technology, e.g. “Form Design”, “Bulletproof Design”, “Getting Real”, “Progressive Enhancement” (and those who even use the same slides)! Granted, those niches are not “done” and there is lot to learn, but there is a lot of navel gazing when speakers tackle the same questions and problems.

I assert some of this stems from the fact that almost all speakers are from countries that have similar cultures, access to internet, and language (US/UK/AU). The problems/challenges that they deal with, are also those that occur within that cultural context. Consequently, the solutions they suggest (while they do their best to be unbiased) do not take into account challenges outside these countries.

I find that disturbing and sad that conference involve only speakers who reside in those countries. The majority of online users, though, happen to live elsewhere. If Web conferences are supposed to be representative of the online world, then, the representation is certainly skewed.

Most designers/developers overseas face additional challenges while working on the web. Most countries (unlike US/UK/AU) are diverse in the number of languages spoken and cultures that exist. How do they design around that? Some languages do not even have written scripts, how do they work with that? What are some of the design decisions that they take when the written script is right-to-left or top-to-bottom?

Many of these countries also have severe censorship, how do they get around that? Some of them do not have assured source of power or might not have enough bandwidth to download even 500MB file. How do they deal with that?

Several people in US/UK seem to think that the “Rest of the World” will “catch up”. But there is nothing to “catch up” to, each group of people will use the internet in their own unique ways. Learning about those will definitely impact how we (US/UK/AU) look at website design and development.

I do agree it is difficult to know who to ask to speak. Probably, speaking to editors at Global Voices would be a good place to start from. Opera, Mozilla, and W3C have also taken initiatives or organize conferences/workshops in Asia. South Africa has its Tech4Africa conference. TMS Ruge makes the case for why African countries should be counted in the technology space (he also spoke at SXSW).

And yes, I do speak from my experience of being one of the unseen and unheard. Living in the US, I am acutely aware of how ignorant most people are about how the rest of the world lives (surprisingly, the reverse is not true). The ignorance sometimes translates to disrespect or foolhardy choices. I would at least hope that for a platform as non-stereotypical as the web, we should try to mitigate it, since the websites/applications we design and develop are accessed by people from all over the world. The more we learn about the world outside our comfort zone, the better informed our design and development will be.

Notes from a JavaScript n00b

divya — Mon, 10 May 2010 20:18:47 +0000

So, apparently I have been sleeping while all designers worth their salt have been diving into JavaScript like it is 2012. While I have been a very early evangelist of jQuery, I knew only enough to get me a solution but nothing in depth of whats, ifs, and whys of JavsScript. So, a month ago, I decided to spend a Saturday watching the JavaScript, the programming language lectures by Douglas Crockford. If you are in the same boat as I am and want to be able to write JavaScript (or even if you are using jQuery or other frameworks), this will be the best 6 hours you will spend.

Caveats

You need to know the jargon of a programming language (not HTML), e.g. type, objects, arrays, etc. I think you might have a hard time understanding JavaScript if you are used to Java, or PHP. Thankfully, I don’t remember my life as a programmer, so it made understanding the lectures easy.

The lectures are actually only 1.5 hours long. I mentioned 6 hours because, I (thanks to prodding from Deepak) paused the video every minute to try out what Douglas was talking about on Firebug Console, and trying out other “what-if” cases that he did not mention.

Are you ready?

These notes might sound a lot like the description of Lost by someone who has never seen it, which means, it might at least be entertaining. From what I have learnt, it seems JavaScript is an irrational language much like you and me, which causes much grief to programmers.

Without further ado, here are my notes on JavaScript:

There is only one type for a number, and that is a double.
There is only one String type, and does not have a type of Char like some other languages (Java)
Math.floor() and parseInt() do almost the same thing, which is to return an integer value based on what gets passed into them, but Math.floor("10f") returns NaN (“Not a Number”) but parseInt("10f") will return 10.
JavaScript Strings are UCS-2 encoded which is almost all of UTF-8 (but excludes some new characters, and something called surrogate pairs).
JavaScript has many “unknown” values: NaN, null, undefined.
NaN cannot be compared with or equated to. E.g. the comparison NaN === NaN evaluatesto false.
null is an object (one of the schizophrenic aspects of JavaScript).
undefined is the default value of any variable that has not yet been assigned a value (as you would have realised when you bang your keyboard in frustration at “Object undefined” errors).
Setting any variable to undefined is equivalent to deleting it.
JavaScript statements can be “truthy” or “falsy”
“falsy” statements are those that evaluate to null/undefined/NaN/""/false (bool)/0 (int)
Rest of the statements are true including those that evaluate to "0" (string)/ "false" (string).
The easiest way to convert a string to number is to put a “+” (unary operator) before it. E.g.
```
a = +"42" 
b = a + 5 // b = 47

a = "42"
b = a + 5 // b = 425
```
The comparison operators == and === are different. == can do type coercion which means if the two values being compared are of different types (e.g. String and Int), it can convert one to the other (I am not clear on what gets converted to what), and compare the values. === does not do that. E.g.
```
43 == "43" // evaluates to true
43 === "43" // evaluates to false
```
! returns boolean true, if the associated expression is falsy. e.g.
```
(!(43 === "43")) // true
```
!! returns the boolean equivalent of the truthy/falsy nature of the expression associated with it. e.g.
```
!!(43 === "43") // false
```
So, in this way, even if your expression evaluates to null, undefined or NaN, you can use this operator to only use the boolean equivalent than these unknown values.
Switch statements use “===” comparison
Declare a variable with var before it (e.g. var variablename), so that its scope is local to where it was declared. Otherwise the variable will be available globally (and susceptible to accidental modifications)
A variable declared in a function is available throughout the function and not just within blocks (e.g. a variable declared in if/switch statements of a function is also available for other operations in the same function).
You can define a function in two ways:
```
1. var a = function() {} 
2. var a = new function() {} 
```
#1 implies the function returns undefined value unless there is a return statement.

#2 implies the function returns an object if there is no return statement (so it acts as a constructor).
An object contains “name: value” pairs, the value can be another object. The value is referred using object.name or object[name]. The name can contain any character but, if you use a name like sd# you cannot refer to its value in this manner a.sd# you can only use a["sd#"]
Objects are passed by reference, so they cannot be compared to check if they contain same name/value pairs. E.g.
```
a = {b:1, c:2};
p = {b:1, c:2};

a == p; // false

p = a;  // name: value pairs of p lost, p points to a

 a == p; // true
```
So, when you compare two objects, you really are comparing if they are both pointing to the same location.
Arrays inherit from Objects but have additional properties and functions.

Array length property returns the largest integer index + 1 e.g:

a[0] = "bobo"; 
a[5] = "dada"; 
console.log(a.length); // results in 6 not 2

Arrays can have functions too:

var a = [0, 1, 2];
a.functioname = function() {}

If you delete an item from an array, it does not alter the length of the array.
typeOf(variableName) returns Object as the type for an array (so you cannot confirm if that variable points to an array), use variableName.constructor === Array to check if the variable is an array.

I am pretty sure I must have passed out at this stage after all this knowledge gain. Nevertheless, I am very curious about JavaScript and hoping to learn more from the messiah.

P.S. I am sorry if it was not as entertaining as the Never Seen Lost blog posts.

Spacing Out on CSS Namespaces

divya — Thu, 06 May 2010 15:29:20 +0000

One of my favourite past times is opening up a random email from the CSS mailing list and going down a rabbit hole. On one rainy day, I found myself staring at the specifications for CSS Namespaces module.

Namespaces

As Wikipedia defines it, a namespace provides a list of uniquely identifiable elements and attributes in an XML document. Here is how you would define the namespace of an XHTML document:

<html xmlns="http://www.w3.org/1999/xhtml">

The URL in the code above is simply the name of that namespace and does not refer to an actual location online. Browsers do not use or process URL. It is just an easy way to understand what that namespace is referring to when someone is reading the source code of the document.

CSS Namespaces

In 2007, Bert Bos explained why CSS Namespaces were introduced:

The Namespaces module is very small, very simple, and probably rarely needed, but just because it is simple, it doesn’t cost much to add it to CSS. Indeed, many browsers have supported it for a long time already.

The only thing it defines is how to declare an XML Namespace prefix in CSS. That is needed if you want to use selectors that only match elements in a certain namespace.

For example, SVG shares some common elements (e.g. <a>) and CSS properties with HTML with XML and HTML. If you are using the same stylesheet for both HTML and SVG documents, then it is best to separate out the styles for SVG and HTML to prevent any overlap.

Usage

Declare your XHTML doctype and define a namespace:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

In your style sheet, declare the default namespace for the CSS rules:

@namespace "http://www.w3.org/1999/xhtml"; 
@namespace svg "http://www.w3.org/2000/svg";

Use the rules specific to each namespace. If you have declared the above namespaces, you can scope CSS rules to only apply to SVG elements which have the same namespace as above:
```
svg|a { color: white; } 
```
All the other rules will be applied to HTML elements by default.

Using it with HTML 5

HTML5 allows inline SVG and MathML, which means you can style HTML, inline SVG and MathML elements using the same stylesheet.

The advantage of HTML5 parsing is that, HTML5 parsers should implicitly assign namespaces to known vocabularies (so far SVG, XML, and MathML), if the document is HTML (and not XHTML). This means, you do not have to use xmlns to explicitly specify the namespace for SVG or MathML elements in your HTML5 document.

The bad news is, only Firefox nightly builds with html5.enabled = true set on about:config parse and recognize inline SVG or MathML.

Here is a demo of using CSS Namespaces for a HTML5 page with inline SVG (mind you, it only works on Firefox nightlies with html5 parser enabled). If you are one of the 99.9% of the population that does not use Firefox nightlies, this is how it is supposed to look:

The dinosaur on the left is an inline SVG image which uses styles defined in the SVG namespace.

As the spec mentions, it is not often you will find use for it. Though, Firefox user agent style sheet uses namespaces to separate the default styles for web pages from those for Firefox UI (which uses XUL).

Notes from HTML5 Readiness Hacking

divya — Sun, 18 Apr 2010 02:04:47 +0000

Update: HTML5 Readiness now shows how HTML5 support has evolved since 2008. Click away to see the spurt of growth in 2010!

Paul Irish pinged me on Thursday evening wondering about visualizing browser support per HTML5/CSS3 feature for his presentation at JSConf on April 17th. I thought it would be a fun exercise in creating it with the “cool” features of CSS3. Soon, Paul had registered the domain and HTML5 Readiness was born. Here are some of the design and implementation notes from that process.

Design

The intention of the visualization is to show how much support exists for each new HTML/CSS feature. I remembered the graphic showing the distribution of wealth among religious Americans and I thought a similar structure would work for this one too and I really liked this ad for General Dynamics by Erik Nitsche.

Paul wanted to show support for 8 browsers (IE 7, 8, 9, Opera 10.10, Safari 4, Chrome 4, Firefox 3.5, and Firefox 3.7). The browsers are grouped into color schemes based on their underlying rendering engine - e.g. all Firefox versions are shades of blue, Chrome/Safari - yellow, IE - pink. Each ray also has a different background color if it is a CSS3 feature.

Each browser is represented with a tile on the bar and gets an equal width of space, so if you see a bar that is full, that means that feature has universal support among all the 8 browsers.

Sass to rescue

There was not enough time to spend working on a photoshop mockup and then implementing the design. I am also more comfortable working on a design in the browser (with all the CSS3 bells & whistles), so I dived in to HTML/Sass. Sass is a life-saver. The transforms (for each ray on the semi-circle), which result in about 114 lines of CSS (when compacted and with vendor-prefixes), are actually a result of just 4 lines of Sass:

@for $i from 1 through 28
 .ray-#{$i}
   +transform((-6.7deg*($i - 1)), 0%, 50%)
  
  i
    +transform((6.7deg*($i - 1)), 50%, 50%)

The odd angle multiplier (6.7) is because each ray (except the first) is transformed so that they fit into the 180 degree arc with equal angular space between each (0, 50% sets the axis for rotation). You can see the full Sass file on Github.

That’s it! Most of the work was done Thursday night / Friday morning. It was great fun dealing with 2D graphics after 8 years, and I loved working on it!

Content Models in HTML

divya — Mon, 05 Apr 2010 13:55:13 +0000

So, in the spirit of being the ferret for jargon I don’t understand, I went on a quest to understand what the phrase “Content Models” mean.

WTF are “Content Models”?

You will regret asking that question, as it is a rabbit hole. But fear not as this post can be your summary of the excitement that awaits you. In short, Content Models are used to define the kind of content that can be found within an element in HTML. Historically, this is defined in the DTD for a SGML-derived language (like XML and HTML 4.01).

The Story so Far

In HTML 4.01 specification, every element needs to be defined and contain a content model. For example, a ul element can only contain one or more li elements. An img cannot contain any element within it, so its content model is empty.

Several elements are categorized in HTML 4.01 into block and inline. This is declared in the HTML 4.01 DTD:

<!ENTITY % block "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">and<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Each element is then defined in the DTD with what kind of content they can contain. For example, while p is a block element, it can contain only inline elements according to the DTD:

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Some elements (like ins or del) can function either as block level or inline elements depending on how they are used.

HTML 4.01 defines the content models within a DTD, which is referenced by the Doctype declaration at the beginning of a HTML page. In HTML5, the content models are defined within the spec and not in a DTD (this also means you do not have to specify a Doctype, but not doing so will trigger quirks mode in some browsers, so you are recommended to use the HTML5 Doctype <!doctype html>).

What’s new in HTML5?

HTML5 does away with block and inline categorization of content. There are now several categories:

Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content

Each element can belong to one or more categories, and can behave one way or the other depending on the context. Each of them has an expected list of contents. Here is a summary of which elements belong to which categories

Why is this good to know?

There is an experimental HTML5 parser available on Firefox 3.6 onwards and basic HTML 5 parsing available for Opera Presto 2.5 rendering engine. Suffice to say, when all browsers start parsing HTML5, it will be relevant to know which content is being rendered in what context for writing more semantic code.

Browsers have, for long, worked around incorrect implementations of the HTML specification, so the more rigorous/semantic we are with our markup, the easier it is for the browser to render!

Or, you can use this knowledge to wisely nod your head when you are trying to parse the messages in the WHATWG mailing list!