Avatar

Divya

Vcard Download vCard   what is this?
Rss_icon

Recent Activity


Filter by:
All
  • Wee! Marquee

    e2b1e0a3cfb12b559ed9657f79a8f02f.png

    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!

  • Wee! Marquee

    e2b1e0a3cfb12b559ed9657f79a8f02f.png

    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!

  • Book Reviews for July 2010 - Part 1

    I seem to be reading more and more Manga comics. I am in the middle of three manga series and they all are fantastic (Kurosagi Corpse Delivery Service, Psycho, and Pluto) and I regret not reading manga comics earlier. I recommend all of these series!

    Pluto Vol 2, 3, 4, 5, 6, 7, 8

    I am a new fan of manga comics, but Pluto has sucked me in unlike any other graphic novel/comic. This is the first Manga series I have completed, and I could not stop thinking of the future imagined in Pluto. I am amazed at how Naoki Urasawa has weaved a beautiful web around murder mysteries, Roboethics, and transhumanism. That it is an adaptation of an arc of Astroboy only makes it better. Anyone who sniggers at Manga comics needs to be pointed to Pluto, just to show how engrossing they can be!

    We Wish to Inform you that tomorrow we will be killed with our families: Stories from Rwanda

    We Wish to Inform You That Tomorrow We Will be Killed With Our Families: Stories from Rwanda is a heart-wrenching narration of the Rwandan genocide. Unlike similar books of this genre, Philip Gourevitch also informs us about the crimes committed by the Rwandan Patriotic Front (ruling party of Rwanda). Philip Gourevitch is brutal in his assessment of the inadequacy of the United Nations and the deliberate inaction on part of United States. The existence of genocide criminals like Georges Ruggiu seems to validate that view.

    Essential Iron Man

    I am amazed how close the movie is to the comic book. Essential Iron Man, Vol. 1. So, instead of Vietnamese villains we have Arabic ones. Though, Iron Man comics are definitely more mushy (and sexist) than what the movie portrays, and hence, not that interesting (in one of the stories, Stan Lee pleads with the reader to stay with the comics despite reading like a romance novel).

    Dreamer

    The Dreamer is an autobiographical graphic novel about Will Eisner’s struggle as a comic artist. It is a good story, but I am pretty sure success did not come as simply as it is narrated. I liked The Contract with God better.

    I have a bunch of dreary books to finish, so off I go.

  • Book Reviews for July 2010 - Part 1

    I seem to be reading more and more Manga comics. I am in the middle of three manga series and they all are fantastic (Kurosagi Corpse Delivery Service, Psycho, and Pluto) and I regret not reading manga comics earlier. I recommend all of these series!

    Pluto Vol 2, 3, 4, 5, 6, 7, 8

    I am a new fan of manga comics, but Pluto has sucked me in unlike any other graphic novel/comic. This is the first Manga series I have completed, and I could not stop thinking of the future imagined in Pluto. I am amazed at how Naoki Urasawa has weaved a beautiful web around murder mysteries, Roboethics, and transhumanism. That it is an adaptation of an arc of Astroboy only makes it better. Anyone who sniggers at Manga comics needs to be pointed to Pluto, just to show how engrossing they can be!

    We Wish to Inform you that tomorrow we will be killed with our families: Stories from Rwanda

    We Wish to Inform You That Tomorrow We Will be Killed With Our Families: Stories from Rwanda is a heart-wrenching narration of the Rwandan genocide. Unlike similar books of this genre, Philip Gourevitch also informs us about the crimes committed by the Rwandan Patriotic Front (ruling party of Rwanda). Philip Gourevitch is brutal in his assessment of the inadequacy of the United Nations and the deliberate inaction on part of United States. The existence of genocide criminals like Georges Ruggiu seems to validate that view.

    Essential Iron Man

    I am amazed how close the movie is to the comic book. Essential Iron Man, Vol. 1. So, instead of Vietnamese villains we have Arabic ones. Though, Iron Man comics are definitely more mushy (and sexist) than what the movie portrays, and hence, not that interesting (in one of the stories, Stan Lee pleads with the reader to stay with the comics despite reading like a romance novel).

    Dreamer

    The Dreamer is an autobiographical graphic novel about Will Eisner’s struggle as a comic artist. It is a good story, but I am pretty sure success did not come as simply as it is narrated. I liked The Contract with God better.

    I have a bunch of dreary books to finish, so off I go.

  • Vignettes with CSS3 Box Shadows

    vignette.png

    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:

    1. In your HTML document, add a wrapper element to the image, I have this:

      <p class="vignette"><img src="image.jpg"></p>
    2. 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.

    3. 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 :)

  • Vignettes with CSS3 Box Shadows

    vignette.png

    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:

    1. In your HTML document, add a wrapper element to the image, I have this:

      <p class="vignette"><img src="image.jpg"></p>
    2. 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.

    3. 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]
  • Book Reviews for June 2010 - Part 2

    It took me 2 weeks to get over jet lag from my marathon India trip. So, there are less books to review as I was finally sane enough to do other stuff :)

    • Chameleon Days

      This is the narration of the author’s childhood experiences growing up in Ethiopia as a son of evangelist parents. It was an engrossing read which also describes some of the work that evangelical missions do. No, it did not alter my perspective of religious evangelism. Chameleon Days: An American Boyhood in Ethiopia certainly did not convey anything interesting about Ethiopia either.

    • The Arrival

      The Arrival is the first wordless Graphic Novel I read. The novel is set in a fantasy world where a man leaves his family to seek his fortune in a strange city. I am amazed at how many thoughts about belonging, culture and immigration that Shaun managed to convey without using any words. If you are an immigrant, you would love “reading” The Arrival.

    • The Complete Crumb Comics, Vol. 17

      This is my attempt at reading all works by Robert Crumb, the fantastic comic book artist. The Complete Crumb Comics, Vol. 17: Cave Wimp is funny and irreverent like the cover promises.

    • Designing the moment

      Designing the Moment: Web Interface Design Concepts in Action is a book by Robert Hoekman Jr. who spoke at An Event Apart Seattle 2009. Most of it seems “obvious” to me, but I know many people might not think so.

    As usual, here is a plea for you to recommend interesting books you read recently!

  • Book Reviews for June 2010 - Part 2

    It took me 2 weeks to get over jet lag from my marathon India trip. So, there are less books to review as I was finally sane enough to do other stuff :)

    • Chameleon Days

      This is the narration of the author’s childhood experiences growing up in Ethiopia as a son of evangelist parents. It was an engrossing read which also describes some of the work that evangelical missions do. No, it did not alter my perspective of religious evangelism. Chameleon Days: An American Boyhood in Ethiopia certainly did not convey anything interesting about Ethiopia either.

    • The Arrival

      The Arrival is the first wordless Graphic Novel I read. The novel is set in a fantasy world where a man leaves his family to seek his fortune in a strange city. I am amazed at how many thoughts about belonging, culture and immigration that Shaun managed to convey without using any words. If you are an immigrant, you would love “reading” The Arrival.

    • The Complete Crumb Comics, Vol. 17

      This is my attempt at reading all works by Robert Crumb, the fantastic comic book artist. The Complete Crumb Comics, Vol. 17: Cave Wimp is funny and irreverent like the cover promises.

    • Designing the moment

      Designing the Moment: Web Interface Design Concepts in Action is a book by Robert Hoekman Jr. who spoke at An Event Apart Seattle 2009. Most of it seems “obvious” to me, but I know many people might not think so.

    As usual, here is a plea for you to recommend interesting books you read recently!

  • Book Reviews for June - Part 2

    It took me 2 weeks to get over jet lag from my marathon India trip. So, there are less books to review as I was finally sane enough to do other stuff :)

    • Chameleon Days

      This is the narration of the author’s childhood experiences growing up in Ethiopia as a son of evangelist parents. It was an engrossing read which also describes some of the work that evangelical missions do. No, it did not alter my perspective of religious evangelism. Chameleon Days: An American Boyhood in Ethiopia certainly did not convey anything interesting about Ethiopia either.

    • The Arrival

      The Arrival is the first wordless Graphic Novel I read. The novel is set in a fantasy world where a man leaves his family to seek his fortune in a strange city. I am amazed at how many thoughts about belonging, culture and immigration that Shaun managed to convey without using any words. If you are an immigrant, you would love “reading” The Arrival.

    • The Complete Crumb Comics, Vol. 17

      This is my attempt at reading all works by Robert Crumb, the fantastic comic book artist. The Complete Crumb Comics, Vol. 17: Cave Wimp is funny and irreverent like the cover promises.

    • Designing the moment

      Designing the Moment: Web Interface Design Concepts in Action is a book by Robert Hoekman Jr. who spoke at An Event Apart Seattle 2009. Most of it seems “obvious” to me, but I know many people might not think so.

    As usual, here is a plea for you to recommend interesting books you read recently!

Next page