Aspiramedia has this useful post titled Design Resources of the Moment
that compiles a list of useful web designing and development learning links.
Here’s a color tool
that lets you define a color scheme for your website. Well, that is what I could make of it. I always find it hard to come up with a good color scheme.
In a post titled CSS Caching Hacks
Stefen Hayden explains how you can force the browser to load the latest CSS file and not the one cached by the browser. This has happened to me many times, especially when I’m working on a new layout and refreshing the browser after consecutive changes. Sometimes the latest CSS file just refuses to load.
Here’s a nice collection of AJAX Activity Indicators
that I found through AJAXian
. I specifically found the link useful because just last Friday I was looking for such a website
.
Recently in a post titled How wrong is it to open a new window? I had talked about pros and cons of opening a new browser window. In a constant effort to improve my content delivery I decided to deliver content to my clients that not only has links opening in the current browser window, but that also has an icon that lets them open a new browser window. Since creating multiple links becomes tedious after a while, I decided to write a small PHP utility that, given the link and the title, generates the HTML of a regular link plus a link that opens in a new browser window; something like this:
Now, the equivalent HTML for this link is:
<a href="http://www.amrithallan.com">My content writing services</a> <a style="border: none;" href="javascript: void(0);" onclick="window.open(’http://www.amrithallan.com’);"><img src="/images/new-window-icon.gif" alt="Open in new browser window" border="0" align="absmiddle" style="border: none;" /></a>
So you can imagine how much time it would take, say if one HTML document contained 10 such links!
I was creating a normal PHP file that used a regular form to accept a link and its associated title and then dumped the generated HTML upon clicking the submit button. Then I thought, why not use AJAX to show the result. For this I downloaded Prototype
first as it has pre-written classes to handle AJAX calls.
My exercise has two files: linkgen.php and linkgen1.php. linkgen.php contains the form and all the JavaScript that makes the AJAX calls. linkgen.php also calls prototype.js (the file is of latest version but I saved it as its original name). This is what the first file contains:
<script type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript">
function getData()
{
var url = ‘linkgen1.php’;
var paras = ‘link=’+escape($F(’link’))+’&title=’+escape($F(’title’));
var target = ’show_here’;
var AjaxVar = new Ajax.Updater(target, url, {method: ‘get’, parameters: paras});
}
</script>
The first line should be quite clear — it calls the prototype.js. Before we proceed further, let’s first see the code that makes use of the function getData().
<?php
show_form();
?>
<div id="show_here"></div>
<?php
function show_form()
{
?>
<form method="post" name="l1" >
Enter Link:<br />
<input type="text" name="link" id="link" size="40" /><br />
Enter Title:<br />
<input type="text" name="title" id="title" size="40" /><br />
<input type="button" name="s1" value="submit" onClick="getData();" />
</form>
<?php
}
?>
There is actually no need to create a separate function show_form() to display the form. I normally do this so that in case the form is to be repeated I can simply call the function. Another notable thing: instead of displaying a “Submit” button, I’ve used a normal button. Here too you can simply use the “Submit” button. This is how you can re-write the function and get the same result:
<?php
function show_form()
{
?>
<form method="post" name="l1" onSubmit="getData();">
Enter Link:<br />
<input type="text" name="link" id="link" size="40" /><br />
Enter Title:<br />
<input type="text" name="title" id="title" size="40" /><br />
<input type="submit" name="s1" value="submit" />
</form>
<?php
}
?>
OK, now the JavaScript. Here’s the part that calls linkgen1.php and then displays the result:
<script language="javascript" type="text/javascript">
function getData()
{
var url = ‘linkgen1.php’;
var paras = ‘link=’+escape($F(’link’))+’&title=’+escape($F(’title’));
var target = ’show_here’;
var AjaxVar = new Ajax.Updater(target, url, {method: ‘get’, parameters: paras});
}
</script>
As you can see, a class Updater is used finally with all the parameters it needs. I’m not going to dissect it as I’ve myself used it for the first time, but you can easily get a hang of it. The function $F() uses the ID of a form field and gets its value, something like document.l1.link.value perhaps. This is all you need to know about linkgen.php.
Now let’s move onto the file that actually gives us the processed output. If you know PHP, this is the easiest part. The code that this file contains is:
<?php
$link=htmlspecialchars($_GET[’link’]);
$title=htmlspecialchars($_GET[’title’]);
$toshow=”<a href=\”" . $link . “\”>” . $title . “</a> <a style=\”border: none;\” href=\”javascript: void(0);\” onclick=\”window.open(’” . $link . “‘);\”><img src=\”/images/new-window-icon.gif\” alt=\”Open in new browser window\” border=\”0\” align=\”absmiddle\” style=\”border: none;\” /></a>”;
echo $toshow;
?>
More and more laptops are coming with wider screens these days. For web designers this means more horizontal space. In a blog post titled Preparing for Widescreen Mike talks about why it is important to design websites that look good on both wide screens and narrow screens, and how it can be achieved.
I’ve been using the Lightbox plugin on my blog (see an example here) for a couple of months now. It was more of a psychological opening up because I normally don’t use JavaScript frills to show animations etc. on my website. Now they’ve released Lightbox V 2.0 that supports album like viewing.
Oh! yesterday I spent the entire night Ajaxing my comments but after spending good 4 hours I realized I wasn’t excited about the effect. Good that I had backed up the original header.php and comments.php.
X-Ray is a FireFox plugin developed by Stuart that let’s you view the markup of a pge without having to go through the cryptic source of the page. What’s the markup of a web page? Markup is all those <h1>, <a>, <p>, etc. tags that render look to your web page. Having it installed, you can easily view whether that highlighted text is a header tag or just a paragraph with enlarged formatting.
Many years ago I used to use JavaScript <a href=”javascript: void(0);” onclick=”javascript: window.open();”>the link</a> to open new browser windows. Those were the days when people exchanged links to increase their search engine rankings (I think they still do). Then one day a person pointed out — noticing javascript: void(0) in the links — that it defeated the entire purpose of putting other people’s link on my website because Google couldn’t make sense of links generated with JavaScript. Hence, I started using the target attribute. After a year or so I got over it and I stopped using it on at least my websites because it’s bothersome when a new window pops up all of a sudden.
But some clients insist on it. There is a client that wants all the links going to other domains opening in new windows and the links belonging to his own website opening in the same window. His logic is, most of his visitors are aged people who are not very good at using the browser and they very soon lose track of the original page if there are too many links. To an extent it does make sense.
Roger in a post titled The target attribute and opening new windows presents a good reason for not using the target attribute:
The target attribute is not allowed in strict doctypes, and since you should always use a strict doctype, the target attribute is invalid. Period.
Since there can be no argument against strictly validating your doctypes, I think when people strongly oppose the opening of a new window they are expressing their opinions as web designers/developers who are totally comfortable with using computers and browsers. IE for one, doesn’t allow tab browsing. And how many people know they can right-click and then decide if they want to open a new window or not.
As Roger mentions in the end, the preferred way is to give the user choice on the page itself. It can be like, give a link without the target attribute, and then, if it is really necessary, in the bracket provide a JavaScript assisted link that opens a new window.
A few days ago I posted an entry containing links to various tutorials that teach you how to create round corners with CSS and a few images. Now, here tutorial titled nifty corners that teaches you how to obtain round corners without using images.