Feb 152009
 
 February 15, 2009  Posted by at 11:59 am Web Development Tagged with: , ,  No Responses »

At one time my Google PageRank™ used to be quite high – 6 or 7, without even trying. I guess I did something to annoy it over the years and my PR dropped to 0. So I decided to do a few things as a part of my new “Ego Drive”, not to be confused with the “Eco drive” that I still haven’t embarked upon. So far I have gotten around to doing just two:

  1. I registered with Technorati. And then I hit a kind of weird situation: Technorati wouldn’t let me claim http://mynethome.net/blog or http://blog.mynethome.net, both of which point to my blog. It instead let me claim my home page http://mynethome.net. I couldn’t figure out how the pinging on Technorati worked, though. How does Technorati understand that there is new content? I had a feeling that it has something to do with publishing feeds. And therein lay a problem – my feed lay on my blog, not on my homepage.
  2. That is where the second thing came in. I wrote my own feed generator. So far I have written it only for Atom 1.0 – I am yet to do it for RSS2. The feed generator posed some interesting challenges:
    1. How was I to manage the list of sites in a flexible manner for the feed to report against? I solved this using a simple XML-based sitemap. You can very easily write a simple XML to represent your website. XML being structured content, I could use the same document to create a PHP sitemap.
    2. My sitemap is better for static content. What was the best way to show the dynamic content like that in my blog? After a bit of thinking and a bit more research I figured out that the easiest of ways to handle this – a link to a feed in my sitemap. I put in a linkfor my blog saying:
      <feed>http://mynethome.net/blog/?feed=atom</feed>

      I then used the Zend Framework to get the entries in the feed. On the fly I pull up the entries whenever my site’s feed is accessed and show the results. For this I used the Zend_Feed class.

      I considered dynamically determining the information from the page’s <link> tags, but ran into some issues processing some feeds, when Zend kept throwing Exceptions.

    3. The third was to dynamically get the summary and content of all the pages in my sitemap, to display in my feed. For this I used the Simple HTML DOM Parser. That let me retrieve the details from a specific segment of my pages. In most of my pages the main content is stored in a div block with class content, so retrieving the details was pretty easy.

The next step would be to write an RSS2 feed, just to ensure compatibility with feed readers that can’t read RSS2. I would be interested to know, though, if people who are savvy enough to use feed readers would settle for a feed reader that isn’t compatible with all kinds of feeds.

In the meanwhile I would like to welcome suggestions if you know how to do this better.

Feb 092009
 
 February 9, 2009  Posted by at 8:51 am Web Development Tagged with: , , , , , , , ,  2 Responses »

Contrary to what the title says, I have to warn you that this monologue is not regarding table etiquette. Instead, this is a very coding centric rant focusing mostly on my adventures with Tables (Dining) and CSS (Styles).

The job that pays me my wages requires me to be an advocate of standardization, mostly with a focus on data and application customization. When I started doing web-pages in 1997 on a Unix mainframe through a dumb terminal, the only browser I had access to was Lynx – a text-only browser. Then I got access to a terminal with graphics and was able to run Mosaic. I was able to see what my pages actually looked like with pictures.

Moving on, the next browser I had access to was Netscape Navigator, and subsequently Netscape Communicator. Those were awesome browsers, leagues ahead of the competition, which was mainly IE 3 and IE 4. They had a lot of concepts like frames, layers and so on, which let you add funky things to your pages. Of course, I never went beyond frames and some MouseOver and MouseOut events in Javascript.

Then I started off professionally, and I had to write wee bits of code to run on both Netscape and IE. This was the new IE 5, the first big release that altered the balance in the browser wars. That was when my liking for Netscape started diminishing. The whole concept of layers was, though structured, extremely convoluted. IE handled things much better. Quite surprisingly IE was MORE standards-compliant than its competition. Netscape had completely missed the bus and its subsequent releases always were playing catch-up in terms of features, and that too in the face of collapsing market share.

So for a while I just made sure my pages rendered properly on IE (now at 6). But that was when Microsoft took a 5-year break and Firefox came by and completely whipped it in terms of standards compliance. In the meanwhile, I started using programming techniques on my web-pages. I started by writing small JavaScript functions that helped me use my own template structures. Those days I had my page at geocities, so using PHP was not an option. When I purchased my own domain I replaced the JavaScript templates with PHP, which was a pretty good move.

So chronologically, I used these browsers as my primary:

  1. Lynx
  2. Mosaic
  3. Netscape Navigator
  4. Netscape Communicator
  5. IE 5
  6. IE 5.5
  7. IE 6
  8. Firefox 1.0 > IE 6
  9. Firefox 1.5 > IE 6
  10. Firefox 2.0 > IE 7
  11. Firefox 3.0 > IE 7 > Chrome > Safari > Opera

My web-layout techniques also progressed correspondingly:

  1. Plain text
  2. Text with pictures
  3. Frames, JavaScript
  4. Table layouts, JavaScript
  5. Table layouts, JavaScript, CSS
  6. Predominantly CSS, with tables where unavoidable, JavaScript

Particularly between 5 and 6 above there was an interesting toss-up. If you see the layout of this page, it is quite intricate. Each line can be thought of as having 3 columns:

  1. The left edge / top left corner / bottom left corner, with a shadow. The corners occur once, the edge repeats for the length of the main content
  2. The middle section, which repeats horizontally to a pre-determined width, and vertically for the entire length
  3. The right edge / top right corner / bottom right corner, with a shadow. The corners occur once, the edge repeats for the length of the main content

Approach 5 seemed straightforward, because in a table we can set the width of columns and things get aligned automatically. However this was easier said than done, as precision was of great importance. In any case, I had my page looking exactly as I wanted it to. My page rendered correctly on the big 4 – Firefox, IE, Safari and Opera. I had devised an approach where the layout would be created by calls to PHP functions. This was done to minimise impacts of changes like column widths etc. This worked very well for a while.

Then I migrated this blog. And the trouble began. Most content management sites use XHTML instead of HTML. And in case of my blog that royally hammered the look, because, out of all things possible, the look did not turn out correctly in IE 7.

I refuse to be aligned!

I refuse to be aligned!

A little research showed me that the use of XHTML was playing truant. Further research showed me that I could fix the look by using CSS instead of tables. So I started the transformation. I had never used the layout features of CSS, like float, position, margin or padding. Neither had I used CSS to extensively control backgrounds. I found out what I was missing. This approach was so much better than my table-based hacks. More importantly my page was slowly becoming standards compliant.

How did I know that I was compliant? Quite simple – I used the site validation techniques that I accidentally stumbled across. There are two of them that I am aware:

  1. CSS – Checks if your stylesheets are using valid tags throughout
  2. XHTML – Checks if you comply with the XHTML standards. This is really useful and points out a lot of good practices by means of code corrections, like the use of an "&amp;" instead of an "&" while linking to pages and so on.

You don’t see the validation links down in this page, but that is because WordPress refuses to listen to you even if you insist you want to put in your own HTML code and not use the visual editor. So WP puts in <p> tags by itself when you don’t need them. Anyway, I hope to make the blog compliant later. At the end of the day, though IE made me do the hard yards, I was happy because my pages were compliant, as you can see at the bottom right-hand of my main home page.

My sites were compliant and everything was well, till I removed my “left bar” and replaced it with a “menu bar”, to free up some real estate. Bad idea. I checked the look on IE Mac 5.2 and had a seizure. The menu bar looked like a film by the Ramsay Brothers instead of the nice sleek design I wanted to give it. I immediately decided that this needed testing on IE 5.5 and IE 6 at least, in addition to IE 7. This was particularly important since a lot of people working on XP still use IE 6 and not IE 7.

How did I isolate the problems? And how did I test it out on all the IE versions without installing them or using different virtual machines? I found this very good set of tools in my attempts:

  1. Firebug – This is a must-have Firefox plugin if you are a web-developer. It identifies which section on a page is using which style in a very nice manner by highlighting the section on the page.
  2. IETester – I love this in spite of the fact that it tends to crash more often than I would have liked on Vista. This application lets you open tabs for IE 5.5, IE 6, IE 7 and IE 8 RC2 and renders pages based on the browser selected
  3. Sandboxie – I don’t know if this was supposed to be “Sandbox IE”. Nevertheless, this lets you install different applications, like other browsers in a “Sandbox” area, without messing up your core installation

IETester was a phenomenal help. It helped me figure out how ugly some things were in IE.

  1. The CSS boxing problem was a major nuisance. If a page rendered correctly in IE 5.5 it wouldn’t render in IE 6 and so on. I had to tackle this with a bunch of hacks:
    1. Using * html before an element in the CSS to make IE read it
    2. Inserting a “” in an element name, a.k.a. the Tantek hack.
  2. I couldn’t get some PNG files with a transparent background to show up correctly, so I replaced them with GIF.
  3. I couldn’t set the widths to be automatic as they were taking up the whole width

There are a lot more that I cannot recall at this moment. Finally, after a lot of effort I managed to make the look consistent across all the IE versions. Actually I succeeded in not breaking it. The consistency part of things is there between the big browsers, not the older IE versions.

— End of rant.

Update on 14th July 2009: Having redone the blog’s theme some points above are longer valid. However, the basic premise holds – IE sucks.

Feb 022009
 
 February 2, 2009  Posted by at 9:56 am Hit or Miss?, Random Rants, Web Development Tagged with:  No Responses »

Overcome by curiosity at the fawning of thousands of bloggers over Apple in general and the Mac OS X operating system in particular, I bit the bullet and purchased an Apple MacBook. The nice-looking black one. In November 2006. Having used it for more than 2 years now I have mixed feelings.

Before I go into my rant, let me provide a background about myself. My foray into computers began with dumb terminals working off a mainframe. I then had an extended affair with Linux – RedHat and Slackware. I also used HP-UX, SGI Irix and Solaris quite a lot, based on which course I was doing my assignments for. After that I got into a job, which meant predominantly using Windows, first NT, then 2000, then XP and now Vista. Of course, I continued to have Linux installed on my machines on a dual-boot and I did help in the administration of Linux quite a bit.

During my formative years I had the option of choosing from vi and Emacs for editing. I stuck to Emacs, mainly because it seemed supremely configurable. When I moved into the professional world I shunned commercial software like Visual Java for JDEE on Emacs, mainly because it kept my machine spiffy and because I had a very good understanding of Emacs. Of course, once I got a taste of IntelliJ IDEA, I dropped Emacs. I started using vi (actually GVIM) at that point, just like a lot of people use TextPad or EditPlus for quick and dirty editing. It was just that Emacs was an overkill for such activities and vi was much better than any of the pure Windows alternatives. The only time I use TextPad is when I want to do a “block select” on text.

The point of saying all of the above is that I have covered a fair spectrum of machines and operating systems and have adapted quite comfortably to each. To cite an example, I took to Vista just as easily as I took to XP, unlike several people I know.

So here is what I felt about Mac. You might have guessed by now, since I have had the black MacBook for more than 2 years, that I have used Mac OS X version 10.4 and 10.5 on an Intel platform.

  • The Good
    • Undeniably, the OS reliability. I have left the machine running for weeks without having to shutdown or restart. In fact, the only time I do a restart is when some patches need to be applied.
    • The looks. You can’t argue with this one. The outward appearance is sleek and the GUI redefines polish.
    • Boot Camp. I haven’t come across a better tool for installing an alternative OS. It was as effortless as it could be. Of course, I am still not sure if I can get it to triple-boot with Linux in addition to Vista.
    • Lots of other things, like battery life, resource usage etc. My battery lasts quite long – around 1.5-2 times as much as my office’s dinosaur, HP Compaq nc6400. The Mac hardly ever makes any noise.
    • Pricing. I know I will get a few raised eyebrows for this. But I am not kidding. If I compare the most reliable of the breed in non-Apple laptops (IBM / Lenovo and Sony), the costs are comparable for comparable configurations. And with the kind of stability that the machine has, I would say it is excellently priced. This wasn’t always the case, mind you, and the falling prices are the reason that Mac sales have picked up steam in the last few years. That and the switch to Intel, of course.
  • The Bad
    • Safari. Contrary to what the fans say, I find Safari to be a mediocre browser at best. Its page rendering is slow and the features it touts are things I don’t care too much for. Its redeeming feature is that it has full versions available for iPhone in addition to Windows and Mac. But then, so does Opera (for non-Apple Smartphones).
    • I was stunned to see Apple sounding the bugle on “Spaces”. 12 years back I used the WindowMaker window manager on RedHat and that let me define multiple desktops and assign different programs to different desktops. Of course, I had to tinker with the configuration file scripts for that, but I am sure they have a UI for it.
    • One aspect that is reminiscent of Windows of yore is the system restart after applying most patches. I can understand wanting a reboot if a critical security patch has been applied, but restarting after updating QuickTime? Safari? That is a stretch, given that these are patched quite frequently.
  • The Ugly
    • Where is my right-click? I consider it a serious design flaw that I have to keep “Control” pressed and then click to get a right click (or use an external mouse). Whose brilliant idea was it?
    • I have to actually use the command prompt for showing / hiding system files. And I thought this was supposed to be easier than Windows.
    • In Windows I can define what services I want to start automatically and what programs I want to start automatically. Imagine my surprise when I had to resort to Google when I wanted to figure out how to do the same in Mac. I looked at all the usual places first, like System Preferences » Accounts etc.
    • 5th January 2009 was a very happy day for me. Because Google made Picasa available for Mac that day. Ever since I came to know of Picasa in 2004, I have been hooked by its extreme simplicity. The fact that it was available for Windows and Linux but not for Mac always had me wondering. The last 2 years have been extremely difficult – iPhoto is just plain ugly.

Given a choice will I not own a Mac? Far from it. As I said earlier, I have seen a wide spectrum of machines and operating systems. None of the flaws that I have pointed out in a Mac are really showstoppers and the strengths are *very* good. And since adaptability is not my weak point, I would go so far as to say that I like the overall package.

I guess my main gripe is with Apple and its fans harping on the usability of the OS, when really it is quite unusable for a layperson used to other things. It is like saying that vi is more usable than TextPad, while it really is not unless you figure out its quirks. I still haven’t gotten Tanuka, someone who uses a computer for chat, mail, surfing and photo management to quite like the Mac. She finds it very alien.

Jan 182009
 
 January 18, 2009  Posted by at 6:06 pm Random Rants, Web Development Tagged with: , , ,  No Responses »

After my previous post I set about to do one of two things:

  1. Create a full-blown application for uploading photos – My way of uploading photos was a multi-step process:
    1. I would select photos I wanted to upload and put them in a separate folder on my local disk
    2. I would then use Picasa and export the subset of photos as a web-page. This would automatically resize all images and create the thumbnails.
    3. Next I would create a file with image names and descriptions. I had a script on my home-page that parsed this file on the fly and displayed the album.
    4. Then I would upload the photos, the thumbnails and the file with the names.
  2. Use a package and customize it using a template – This would require me to operate within the constraints of the application that I was using.

I ultimately settled for the customization of a package. Writing my own photo-loader was way too much effort to handle in the hours after work. I considered a lot of options:

  1. Picasa web albums
    This was my first choice, because I love Picasa and I use Google for a lot of things. Moreover I could really harness a lot of things like Cooliris’ PicLens (which is awesome) and create some snazzy stuff. Unfortunately what got in the way was Dreamhost. While very good in most aspects, Dreamhost didn’t provide out-of-the-box support for Picasa. So I would have to customize my Dreamhost installation and make some changes to my PHP configuration for this. As it would turn out, this was less than a stellar idea because I had to run “sudo” on Dreamhost and I did not have the right permissions for it. While I did not get any email saying “Sayontan, you are a bad, bad boy”, I did get a return message on the command prompt notifying me that this incident had been reported!!
  2. ZenPhoto
    ZenPhoto is one of the two packages that Dreamhost provides. I tried it out, but unfortunately this falls under the category of software that you cannot customize on Dreamhost. So, two down.
  3. Gallery
    Technically Gallery was the first thing I attempted, even before my misadventures with Picasa, mainly because it was available with Dreamhost and secondly, I could customize it. However, I found it extremely counter-intuitive to use when I first installed it. But after I exhausted my other options I was compelled to revisit this. My typical style of using anything involves first fiddling with it, then reading the documentation / manuals to clarify any doubts that I have. Most software and hardware today have very friendly interfaces, so this approach works very well for me (as it does for most other people, I am sure). Naturally I had very little joy with Gallery the first time. But faced with no other choice to bundle on my website and with a mounting stack of photos to process I bit the bullet and dug in. Piece by piece it came together and with a few hours of effort I got the basic layout figured out. There are, however some annoyances:

    1. The BreadCrumb
      This is a pretty nice feature that could do with a few configuration options that would enhance control. E.g. I cannot ask it to exclude certain levels or to show the caption / title of the image rather than its name
    2. Sub-albums / Album groups
      This is a hard one to explain. On my earlier site I had groups like “2004”, and then separate albums under it. On the main page I would see both, 2004 and the albums under it. But I cannot conceive of a way to “tag” my albums without using sub-albums, and if I create one album called 2004 with a bunch of sub-albums, I cannot see the names of the sub-albums from my main page.
    3. Slideshow control
      One good thing that Gallery did is an integration with Cooliris. But now I have a new problem: I want to define things like the pause between two photos in the slideshow, I want to remove the links that show up at the top etc. I am sure I can figure it out, but it isn’t obvious.
    4. Square thumbnails
      This is a major gripe. Gallery can display a sized down thumbnail, but it feels the need to pad it with some solid color. The other option is to use a square thumbnail, which does away with the padding. I wonder, though, if it will allow me to set no colour for the padding.

Anyway, I guess it worked out alright in the end. There are a lot of things I would have liked to improve, but as is the case with packaged software, the best plan is to wait and play along. Most of the stuff comes by anyway. Of course, if you believe I botched some of the implementation or missed some features, please let me know – I would love to hear from you.

Jan 032009
 
 January 3, 2009  Posted by at 10:08 pm Web Development No Responses »

I recently did a couple of web-pages:

  1. Something nifty with Google Maps API

    This was a LOT of fun. The API is excellent, though poorly documented. In the process I learnt how to do Geocoding, some AJAX and a bunch of other things.

    It was curious how I got started on this. My friend Munish Singla asked me for the whereabouts of another friend. I did not have the latest coordinates of the latter, so I looked up Google and got a few hits, which I provided to him. Singla then remarked that he thought my database would have the lates details. Since my database was stone-dead for the last few years, I decided to pinch an idea that another friend Vaibhav had earlier and I went about implementing it.

    The output speaks for itself, I guess. The next steps would be to add things like photos, employer’s name and a self-service site, but those can wait.

  2. A WordPress Theme for this site
    This was tough. I had the same blog at Blogger, but my main gripe with it was that I never could figure out how to do my own theme. WordPress seemed much better organized, and the fact that I own my domain helps. However the layout of my homepage doesn’t lend itself very well to reuse, particularly with blogs. Again, the result speaks for itself! By the way, the background that I have used here is based on Iceman’s Emulation Page. Though I had to change a lot of things, including some icons, I really liked the background of the original, so I used it.

Enjoy!

Sayontan.