In the Beginning

TextMate

I believe it was the Summer of 2005 when I tried out TextMate for the first time. After a few minutes of playing with it’s project drawer, tabs, regex find, snippets and column select features I was very happy. No more bloated applications from a certain software suite or sub-par minimalist editors. TextMate was a simple, innovative, powerful tool that helped me write a lot of code with very few distractions. I kept TextMate by my side for over 6 years and through 3 different jobs – yes, with 3 separate seat licenses.

Over that time though, TextMate started to grow stale. I never really used all of it’s advanced features but new features simply stopped flowing. In 2008, rumors started circulating about an eminent v2.0 release with loads of new features, bugfixes and stability improvements. I was pretty excited. Months passed. Then a year. Then another. Before I knew it, the end of 2011 was approaching and I decided it was time to try something new.

Enter MacVim

MacVim

Every once in a while I have to make changes to remote files over SSH. I consider myself fairly command line competent but trying to edit anything with vim on a server usually means I first have to open a cheat sheet of basic commands. I’ve heard a few people say that switching to MacVim, the GUI OSX version of the ubiquitous Unix text editor, greatly improved their efficiency. Switching seemed like an easy way to kill two nerdy birds with one stone, so in September, I dove in.

If you’ve ever met a hardcore Vim user, they’ll tell you that the only way to really get fast is to ditch your mouse. It sounds crazy, but the shortcuts in Vim allow you to jump around a line, page or even a project tree like a ninja. Using your mouse, they’ll tell you, wastes time and shows weakness. Ok, so they won’t tell you it shows weakness, but that’s what they really think. I gave MacVim about a week. I spent the majority of that week staring at a printed copy of commands and trying to avoid touching my mouse. I wanted to embrace Vim but by Friday I was back to happily (and much more efficiently) clicking around TextMate again. MacVim is a great editor, it just didn’t work out so well for me. On the bright side, I’m a lot more comfortable editing files on a remote server.

TextMate Two Point Oh No!

TextMate2

A month or two after my failed attempt to switch to MacVim, something unexpected happened. TextMate finally released an alpha of version 2. I was ecstatic about features like split view and multiple carets so I installed it immediately. The application chrome looked a little fresher and David Lanham’s new flower icon was a nice touch, but overall the update was pretty ho-hum. I would be fine with ho-hum, but there were some major annoying issues – like buggy selection highlighting on large blocks of text and the lack of a “Replace & Find” button – that really prevented me from fully adopting it.

Sublime Text – Two Point Oh Yea!

SublimeText2

Having switched from TextMate to MacVim back to TextMate to TextMate 2 and back to TextMate again, I wasn’t too keen on wasting my time with another text editor. Stale as it may have been, TextMate 1.5 did everything I needed it to, or so I thought. After seeing a few exuberant tweets from my friend Justin though, I decided to check it out. The design of the Sublime Text homepage didn’t give me much confidence but after reading through some of the features of Sublime Text 2, I downloaded it and started working on some front-end code.

It only took a few minutes of playing with the mini map sidebar, speedy search tools & multi-select features and I was sold. Sublime Text 2 has all the features I love most about TextMate 1.5 and a better implementation of the TextMate 2.0 features I was most looking forward to. At $59, a license is about the same price as TextMate’s. Unlike TextMate though, you can try Sublime Text out indefinitely. The fact that it’s available for Mac, Linux and Windows means I’ll never have to find an alternative if I need to work on a different OS and with an active plugin community behind it, it’ll always be getting better. Maybe I’m a bit too excited but I’m glad to find another text editor that I immediately feel like sticking with…maybe even for the next 6 years.

If you decide to try it out, be sure to read the Sublime Text 2 Tips and Tricks post on Nettuts+. Another helpful (& equally hilarious) read is @filipminev’s 9 reasons you must install Sublime Text 2 post.

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.