Archive for June, 2008

Bookmarklet For YUI Logger 4

During development using javascript I have always felt that it would be useful to be able to easily add and remove YUI Logger without having to deal with manually adding and removing the related javascript and css from the source files.

I resolved this problem by writing a bookmarklet which will allow you to do that easily. The details are available here. This has been tested on firefox 2.x, safari 3.1 and IE 6/7. Please post any bugs that you find. If you do the view source of the file you can see the code as well.

What is wrong with hotmail? 1

Its shocking how one of worlds most famous email service has gone down the pits. It really upsets me to see its been a case of bad design / lack of testing in general can ruin a perfect product, which did exactly what it was supposed to do, provide access to emails anywhere where internet and a web browser was available.
Adding all the fancy non extras, ‘ajaxy’ stuff and trying to make a web application emulate a desktop application seems to have turned out to be a sheer case of waste of time. I for one have not been able to login to my account without having to provide my password twice and having tried this on windows/mac IE 6/7 and firefox 2/3 its evidently a problem with the website. What’s most annoying is that this has been going on for months and months and I cant even find a link someone (clearly visible) which allows me to report a bug.
I dont st hope big companies go around swallowing smaller (to them) companies in hope to gain market share and in that process ruining the core ideas and philosophies around which small companies put together things and if they even decide to d that, even before they think about initiating a conversation publicly they should see how much of an effort is it for the ideologies and technology shift would it require for the two companies to amalgamate.
Financially it makes perfect sense, the small companies get a jump in their share prices the founders make a lot of money and get on with their lives but I suppose founders have a responsibility to their loyal users and also the fact that people trusted them in the first place for years and years that made them so popular to get that point.

Missing good old days of hotmail when it was lightning fast and did exactly what it was supposed to do, show me my email.

Making footer stick to the bottom of the page 10

Problem for today, had a background which was applied on body which meant that the background titled all the way to the length of the document. The page had a footer which would appear where the content would end, which would make the background appear below the footer and make it look like something had gone wrong there.

Footer appearing where the the content would end.

Obviously a comment problem for people who wants to have a coloured footer and a fancy background. So here’s the solution I applied, after looking at the solutions available.

The markup.

1
2
3
4
5
6
7
8
<div id="container">
    <div id="content">
        foo
    </div>
</div>
<div id="footer">
    content for footer
</div>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html {
     height:100%
}
body {
     height:100%
}
#container {
     position:relative;
     min-height:100%;
     _height:100%; /* for IE6 as it doesnt understand min-height */
}
#content {
     padding-bottom:100px; /* assuming your footer height is 100px */
}
 
#footer {
     position: relative;
     margin-top:-100px;
     /* move the footer up negatively exactly the same height
         as the footer so that its back in the view and always 
         appears to rest at the bottom
         of the page */
}

Here’s what it looks like.
Example of footer sticking to the bottom of the page.

A relatively straightforward solution, the only slight problem with this is that you would require to know the height of the footer well in advance which means you cant have dynamic content for the footer. If I come across a problem like that and have to figure out a solution for that, I shall post it here.

Credits: http://www.themaninblue.com/writing/perspective/2005/08/29/

Note: Following a comment on stumble upon, I just wanted to ensure that the credit link from the “Blue Man” is actually there to ensure to give the credit where its due, this blog post is just a note to self so that when i encounter a similar problem i can look back at it or anyone else who has had a similar problem can look at back at it. I am not taking any credit for this solution, infact I think this idea has a flaw in the sense that if you dont know what the height of the footer is going to be , this might not work as expected

Creating clean SEO urls in symfony 1

Being the symfony fan that I am, I have decided to start documenting some of the features I think are quite neat in the framework. So starting today, here’s a quick quite to writing a Search Engine Optimized URL.
So I am working on a project where users will be posting university details and I wanted the university names to appear on the url instead of the id. The problem with ID’s is it gives too much information about the application and if not carefully design can lead to data being exposed which the development might have not intented do.

So here’s the url that I was looking for. 

1
http://testsite.rajatpandit.com/university/Indian_institute_of_management_ahemdabad.html

I got to the point where I had functional code which gave me URLs like these:

1
http://testsite.rajatpandit.com/university/id/1

These are the steps to convert the URLs are humanly understandable.
Step 1:
Add additional field to the university table to store the modified name. So update the schema to addt the additional field.

1
2
3
4
5
6
7
8
9
10
11
12
  university:
    _attribute: {phpName: University}
    id: {type: integer, required: true, primaryKey: true, autoincrement: true}
    name: varchar(256)
    stripped_name: varchar(256)
    website: varchar(256)
    country: varchar(2)
    city: varchar(256)
    body: longvarchar
    approved: boolean
    created_at:
    updated_at:

Obviously you would need to do the regular to regenerate the models.

1
2
3
#symfony propel-build-model
#symfony propel-build-sql
#symfony propel-insert-sql

or do it all in one easy step.

1
#symfony propel-build-all

Step 2:
Now modify the model to update the new column (stripped_name) every time the standard setName($v) is called. For that we need to have a helper function that does this. Here’s the code I used, you can use your own version.

1
2
3
4
5
6
7
8
function stripText($text) {
  $text = strtolower($text);
  $text = preg_replace('/\W/', ' ', $text);
  $text = preg_replace('/\ +/', '_', $text);
  $text = preg_replace('/\-$/', '', $text);
  $text = preg_replace('/^\-/', '', $text);
  return $text;
}

I create a new file called CustomHelper.php and store in under lib/helper/ and then update the model class for University to override the function setName($v) with the following function.

1
2
3
4
5
6
  public function setName($v)
  {
    include_once('lib/helper/CustomHelper.php');
    parent::setName($v);
    $this->setStrippedName(stripText($v));
  }

That will ensure that the new column stripped_name gets updated.

Step 3:
Update your php template where you create the links to the following code.

1
2
3
4
5
6
7
<ul>
  <?php foreach($universities as $university): ?>
    <li>
      <?php echo link_to($university->getName(), '@university_display?stripped_name=' . stripText($university->getName())); ?>
    </li>
  <?php endforeach; ?>
</ul>

and update the routing.yml to match the routing name used.

1
2
3
article_display:
  url: /article/:stripped_title.html
  param: {module: home, action: article}

The routing rule reads out like this,
When you see the url containing /article/<something>.html redirect it to module: home to its action article and assign a request parameter <stripped_html> to <something>.

and that’s all you need to do to get your urls look all nice and clean.

Lorem Ipsum Dolor Generator 0

As a frontend developer there is almost always need of getting some random content to fill in your layouts to test how it works under different text. Having said that, I found a pretty neat short cut in textmate to generated the text for me.

On textmate type lorem and followed by tab and this is what you get.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Protecting images 1

Shows how transparent image on top of another image can make the image underneath inaccessibleThis is a common problem I have had to deal with in the recent weeks, clients from projects that I have worked in the past have asked me to help them protect the images that they have on their websites and even after explaining them that once their images/content are on the internet the only thing that is possible is that we can make it harder for people to steal their content but we cant stop them from doing that. Another related project which I recently faced during the devlopment of http://gallery.search.yahoo.com was that the monkey preview was actually an iframe which contained actual links and for obvious reasons we didnt want people clicking on the links inside the iframe.

The solution that was applied to solve both the problem was a fairly straight forward one, the idea was to stretch a 1px transparent gif/png over the image or the iframe I didnt want people to right click on and even if they tried to do that, they would only be able to save the 1px gif instead of the actual image below it. As for the iframe, since it would be below the image, the links will not be click able. I had initially seen this being used on flickr and thought it was quite cool, though it might mess upsemantic markup a bit. The alt tag for this extra bit of image should not be empty here I suppose as its suppose to relay the same kind of information as the image/iframe it trying to mask however the contents of the alt tag should not be repeated.

CSS only technique for showing a loader for slow loading images 0

Recently I had a requirement to show images inside an overlay, the problem was that the image that had to loaded was coming loading very slowing and the user couldnt get any sort of indication that the image was being loaded.

Ofcourse one clear solution was to call it via HTTPRequestObject but obviously that would have been an overkill for loading just an image, I came up with this solution (and i dont make any claims that no one has ever done this before) to use css only to method to show a loading image which is later replaced once the actual image has downloaded.

NOTE: This technique doesn’t work for transparent images.

The markup:

1
2
3
<div id="app-mod-mod1" class="mod">
<img src="slow_loading.gif">
</div>

CSS:

1
2
3
#app-mod-mod1 {
background: #FF url('ajaxyloader.gif') no-repeat fixed top left;
}

This will cause the image ajaxloader.gif to be loaded as the background for the div and it will get hidden behind the non transparent slow loading image.

A simple solution but works, without having to rely on javascript to updated the css classname and other cross browser incompatibility issues.

Recursively adding files to CVS 2

Its really odd that cvs (or to my knowledge) doesnt provide commands to recursively add files to the rep. I would the following really cool commands to add them in one go.

1
2
  find . -type d -print | grep -v CVS | xargs cvs add
  find . -type f -print | grep -v CVS | xargs cvs add