Ever since Firefox 3.6 came out though, my little extension has been broken. I had no idea why until I dug into the JavaScript and discovered that Firefox was returning the CSS background image URL as url("imageurl") instead of url(imageurl). Stripping the double quotes was an easy fix but I also knew that FF 3.6 supported multiple backgrounds. Out of curiosity I set up a little html link styled with 2 background images and to my surprise getPropertyValue("background-image") returned url("imageurl1"), url("imageurl2"). Sweet! A few more lines of JavaScript and not only did the extension work again, but it works on links with multiple background images!

Grab v1.8 of View Link Background Image

Now for the sad part…

As I was experimenting with multiple background image support in Firefox 3.6, I discovered that the “View Background Image” context menu item is now missing when you right-click on elements that have multiple backgrounds. While the extension update adds the ability to see all the backgrounds applied to a link, Firefox itself lacks the ability to do the same for other elements. I’m sure I can take care of that with another extension update. For now though, I’m just happy to say it works again.

Over the course of a lunch break I created a webpage with a simple list that showed exactly what the extension sheet had on it, making each <li> expand on click to show more contact information: cell number, email, twitter, website, instant messenger, etc. This webpage was similar to any other wepage really except that it was a little narrower and contained 2 extra lines of meta data in the header:

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no"/>

I learned about the first meta tag from a short post on Daring Fireball a while back. It’s just a simple tag that loads pages added to your home screen as a standalone app; without the standard Safari chrome. The viewport meta tag just defines some rules for the display of the page. By setting the width and height to device-width and device-height, I’m just forcing the page to fit to the viewport whether it’s in portrait or landscape mode. Setting user-scalable to “no” just prevents the user from zooming in or out, which is acceptable since I’m designing the content to fit the screen. You can learn more about these meta tags (and a lot of other great iPhone mobile app tips) from the HTML section of Apple’s Safari Reference Library.

As I mentioned above, those two meta tags are really the only iPhone specific bits in this simple web application. The rest is just plain ole’ HTML, CSS and jQuery with a smidge of PHP just to handle some variables and authentication. Rather than explaining all that I’ll just let you grab the demo. Feel free to use this as is or modify it to your heart’s content. I used an HTML file to store the directory data, but this example could easily be modified to pull from an XML file or from a database.

Download Mobile Directory Demo – Zip (28KB)
View the Demo (password is “stapler”)

Over a year ago I posted about the lack of a View Background Image option in Firefox when right-clicking on links. As a web designer, I use that context menu item on a regular basis, so for it to not be there for links seemed like a glaring omission.

To my surprise, a very kind volunteer came to the rescue with a head-start on an extension and an invitation to improve on it. The problem was that his simple extension did exactly what I wanted it to. When you right-clicked on a link, there was a “View Background Image” item that, when you clicked on it, linked to the CSS background-image of that element.

I didn’t feel the need to improve on James’ extension until it stopped working in Firefox3. Yes, there are many other ways of discovering the background-image of an element in Firefox (specifically through Firebug and the Web Developer Toolbar) but I wanted my context menu item back, so I dove into the extensions folder and added the following functionality:

• It checks for a background image on the link you right-clicked on.
• If it…
  • Finds an image: You get a “View Link Background Image” context menu item.
  • Doesn’t find an image, but finds one on its immediate parent: You get a “View Parent Background Image” context menu item.
  • Finds no image on the link or its immediate parent: You get a disabled “View Link Background Image” context menu item.

While it doesn’t seem like a mission-critical extension, I’ve started relying on it for my day-to-day work and thought you might find it useful as well.

So without further ado, you can download the extension here.

This was surprisingly easy to do in php:

$first_date = "2008-01-01";
$end_date = "2009-12-31";
$alpha = strtotime($first_date);
$omega = strtotime($end_date);
while($alpha <= $omega){
$ufirst = strtotime("+1 day", $alpha);
$formatted = date("m/d/Y", $alpha);
$color = date("mdy", $alpha);
echo '<div class="day" style="background-color:#'.$color.'" title="'.$formatted.'"<&nbsp;</div>';
}

I made a little demo page where you can see what any year (between 1970 and 2037 – the boundaries of php strtotime) looks like. I also made another page the just shows the last 10 years.

I chose to show 10 years so that I’d get a little bit of the 90s in there, which obviously produce a much brighter blue color. If I were able to render 100 years this way, it would be a very subtle gradient from the dark greens all the way to that bright blue you see at the top. Yea, it’s mostly useless, but I thought it was an interesting way to visualize data.

There are typically only two types of forms that tend to get squeezed into tight quarters in page layouts: login, and search. For this reason, web designers are often tempted to save space by hiding the labels on these forms and assuming that a user will intuitively know what to type into each textbox. With a simple search form, this is logical because you have a textbox next to a button that says “Search”, “Go”, or perhaps “I’m feeling Lucky”. Login forms are a little trickier. For most of us, seeing two text boxes and a “login” button is all we need to play McGyver, but the average user often needs those “Username:” and “Password:” labels to know what to enter.

A common solution to this problem is to use javascript to show and hide “hints”. This is one of those tasks that has a dozen different (perfectly acceptable) methods, and everyone tends to stand behind their choice as boldly as they do their favorite presidential candidate. I’ve tried a few of these methods, but because I tend to do it a bit differently, I thought I’d share.

Most of the solutions out there either insert a value into the textbox or they move around a label. Inserting a value into a textbox is the most obvious/common solution and has its pros and cons, but the deal breaker is the fact that a value inserted into a password box will still display as dots/asterisks. As far as I know, you can’t dynamically change the type of an input from password to text, so that solution is out. Moving around a label tag is something I first read about on the ALA article: Making Compact Forms More Accessible. It’s an ingenious idea really, but:

1. I usually only need to make compact login forms, so it doesn’t have to be portable across other types of forms.
2. The area for the form typically won’t accommodate leaving the labels in place for users without javascript.
3. Occasionally I like to use a different font for the login box hints to make it jive with a home page design.

With those things in mind, I decided to try using a background image for on the textbox instead of the label. Also, I tend to incorporate jQuery into most projects lately, so it made sense for me to write it in that – although it could just as easily be rewritten as straight Javascript if necessary.

Check out the working demo.

Of all the context menus in Firefox, my second most-clicked item (behind View Page Source) is View Background Image. This stock functionality is one of the many reason I still prefer to use Firefox over Safari, even though Safari’s rendering is notably faster. The problem I have with View Background Image though is that the image I want to view is often associated with a link element. When you right-click on a link though, this menu item is sadly missing.

The only alternative I’ve found, short of digging around in the page source and CSS, involves the Web Developer Toolbar. If you have this extension installed, you can click on Images » View Image Information to see a list of all background images that are associated with the page you are viewing. That usually does the trick, but it would be much more ideal if there were an extension that just makes View Background Image work on links. After all of my searching and discussions with friends and coworkers I’ve concluded that there is no extension out there that can make this happen. I’ve never made a Firefox extension before, but I have toyed around with Javascript/XUL and could probably figure it out if I get desperate enough. Before I attempt this though, I figured I’d ask, “What do you do when you want to see the background image of a link?”

SELECT DISTINCT reservation_time,
FROM reservations
WHERE DATEDIFF(reservation_date, '2006-12-11')=0
AND is_canceled=0
ORDER BY SUBSTRING(reservation_time, -2),
CAST(SUBSTRING_INDEX(reservation_time,':',1 ) AS UNSIGNED),
CAST(SUBSTRING(reservation_time,-5, 2) AS UNSIGNED);

My problem is what follows the ORDER BY statement. I’m sorting the list of time values 3 times: first by the last 2 digits of the time (AM or PM), then by the hour, then by the minutes. I can’t use SUBSTRING( reservation_time, 2 ) to get the hour value because some have one digit and some have 2. This also means I have to get the minutes by counting from the right side instead of from the left. My question, to all my SQL fluent friends out there is whether or not this is the best way to get this data. Ordering the data 3 times seems a bit inefficient, but then I’m no SQL wizard.

One way of avoiding this annoying activation routine is to call your objects via an external script file. Fortunately we’ve been doing this at work with our flash files for quite a while using Geoff Stearns’ FlashObject. By using FlashObject, swf files will not require activation and users will be able to interact with the flash just as if they never got that silly ActiveX update.

So why is all this happening and who should we blame? You guessed it. Micro$oft:

A jury in 2003 found that Microsoft’s Internet Explorer browser infringed on a patent owned by Eolas and the University of California. The software vendor was ordered to pay $521 million in damages. Microsoft has vowed to fight the ruling, but so far has been unsuccessful in getting the patent invalidated. – Click here to read the full story at Top Tech News

Thank you Microsoft! To read more about making your sites April 11th compliant, visit the msdn page: Activating ActiveX Controls.

function nearestSentence($s) {
//Max length of string before
//looking for last sentence.
$maxL = 350;

//Strip html tags and convert
//html entities (like &)
//to single characters before counting.
$toCount = strip_tags(html_entity_decode($s));

//Crop the string down to the max length.
if (strlen($toCount) <= $maxL) {
$s2 = $s;
} else {
$s2 = substr($toCount, 0, $maxL);
}
//Look for position of the last ., ?, or !
$lastPunct = max(strrpos($s2, '.'), strrpos($s2, '?'), strrpos($s2, '!'));
//Crop the string again down to the nearest punctuation.
$s3 = substr($s2, 0, $lastPunct+1);
//Return string with html entites re-inserted.
return htmlentities($s3);
}

So, if you had some text like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat? Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis! At vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla?

Then, you would get:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat?

If you have some flexibility for the length of your blurb, I think this looks a lot better than just cropping your string down to a particular length and adding... but maybe that's just me.

I have to admit here that I’m pretty excited about the possiblity of using rails. I’ve heard so much from so many of my colleagues about it’s ease of use and flexibility that I was chomping at the bit to give this puppy a whirl. I followed Dan Benjamin’s EXCELLENT installation guide for OS X Tiger, and carefully (making a few mistakes along the way) followed the “Using Ruby on Rails for WebDevelopment on OS X” tutorial. Now, as a graphic designer, the majority of my college career was spent learning how to draw, paint, take pretty pictures, and be able to differenciate between the Madonna paintings of Cimabue and Giotto. I took some basic programming classes, but never learned anything about models, controllers, and views. Regardless, I was still able to walk through the installation, and basic app creation described in the tutorials above.

At the end of the day, I’ve got a sweet little expense tracking application (that was explained in the using rails tutorial), and one simple problem: how to deploy it. At work, we use CVS for out repository, but I guess I’m going to have to get friendly with SVN because Capistrano (aka SwitchTower) seems to require it, and I haven’t seen any other options for deployment. I did see this little guide at nubyonrails (fun name) about deploying to Dreamhost, but it too uses Capistrano and Subversion. Is this the way to go? Do I really have to source control my tiny little example app in order to stick it up on a subdomain of my site? I’m not REALLY expecting answers on all this. This is more just a journal on my thoughts and progress on the topic, but SOMEBODY ;) out there has to be able to tell me if I’m on the right trail.