03.24.08

The best of Firefox add-ons (Part 2)

Posted in Internet at 6:53 pm by Kevin

Figured I ought to break these up, make the entries a little more stomachable, and will allow me to add a part 3 should the need arise. That is gives me an extra week to think of something new to write about is just gravy!

Video DownloadHelper

Video DownloadHelper is great if you’re looking to download embedding/streaming content. Especially useful if you have buffering issues. You name the media extension, wmv, flv, avi, mp3, etc, etc, this this will let you download it.

Download Statusbar

If you’ve ever been annoyed by the download window and it’s behaviours, Video DownloadHelper is for you. It will display your downloads in the tool bar of your choosing and will do away with the annoying behaviours of the download window.

PDF Download

When you come across a pdf file, PDF Download allows you to choose whether you want it opened in an external program, opened in a new tab, or just downloaded to your harddrive.

Image Zoom

Image Zoom is a slick little add-on that allows you to easily zoom in or out images with just a click of the mouse.

Facebook Toolbar

If you’re anything like most of the free world, you’re probably already spending waaaaaaay too much of your time on Facebook. So, why not incorporate it right into your browsing experience?! Facebook Toolbar adds a toolbar, and offers many features to help you keep on top of Crackbook. Notifications for e-mails, pokes, friend requests, and status updates of your friends all all right there, as well as quick access to all aspects of your profile and to search the site.

03.17.08

The best of Firefox add-ons (Part 1)

Posted in Internet at 8:17 pm by Kevin

Over five years ago now a little browser by the name of Phoenix was first released, giving the world a primitive version of what was hoped to give the poor, unsuspecting, public an alternative to Internet Explorer. Over the years Phoenix became Firebird, and Firebird became Firefox,Picture really says it all all the while more and more people were converted to users, taking advantage of the increased security and other standard features not offered by IE. Things like tabbed browsing were offered in Firefox for years before Microsoft finally included it in IE7.

I, myself, have been a faithful user since the spring of 2003. At first Firefox users were largely developers and more technical users, but slowly it has became more and more mainstream. So if you haven’t yet given it a try yet, I strongly suggest you give it a go. Beyond an increasing list of great features that come with it, Firefox offers a tremendous array of add-ons made by Mozilla, third parties, and users that allows you an even greater ability to customize your browsing experience.

Included here are a few of my favourite Firefox add-ons, as well as explanations of what they do.

Adblock Plus

Adblock Plus is a must have, it not only gets rid of the vast majority of the advertising out there, but also speeds up your browsing by not loading the graphics relating to those advertisements. You should also be sure to also install Filterset G Updater and Element Hiding Helper to really maximize it’s utility.

Flashblock

Flashblock is a great little extension that will also go a long way to eliminating ads and speeding up your browsing. It basically works by putting up a box where ever a site has flash inserted. Should you want to view it, all you have to do is click on the box and it will load the movie. You can also disable it on pages or sites, like YouTube, should you not feel the need to block the flash elements on those pages/sites.

IE Tab

IE Tab is another very useful add-on, as when you encounter a site that either doesn’t like Firefox (which there are unfortunately still a quite a few), with just click of the mouse you can open it up as if within IE, but still in Firefox. It does this by running an IE shell in the new tab, and all goes according to hoyle. Especially useful for web designers tired of going back and forth opening up browsers to test appearances.

FireFTP

FireFTP like the others, more or less is what it’s name implies. It opens up a new tab and functions as an FTP program. Another useful little add-on if you don’t like switching between programs and/or windows.

Forecastfox

Forecastfox is a nifty extension. Basically it lets you display weather information in whatever toolbar it is you please. There is a myriad of options you can customize, and every kind of meteorological information you could possiblyl desire.

03.10.08

How do I make a transparent favicon?

Posted in Internet, Web Design at 6:56 pm by Kevin

As you aspiring web designers out there likely know, favicons are one of those relatively trivial elements of a site. Yet if you’re like me, they can just eat at you if you don’t get it just right. One of these reasons is that they are another of those features whose behaviour varies wildly between browsers. So, as my little gift to you, is a tutorial on how to make transparent favicons that work across browsers.

Now, if you’re worrying about making a favicon transparent, and I think it’s safe to presume that you’d have stopped reading already if you weren’t, I’m going to assume you are already familiar with how to make transparent images. So we’ll just skip right through that process.

Firefox and Opera make transparent favicon’s a breeze. You just make your 16×16 pixel .gif or .png, and you can either point the browser at it, or just flat out change the extension to .ico, put it in your sites root directory and you’re done. Works like a charm. Internet Explorer, on the other hand, being Internet Explorer, must make itself a pain in the ass. As it will only recognize true .ico files, and even then, only when you’ve coded it into your site.

Favicon in IE7 and Firefox 2.0

Now you likely know there are a litany of online tools that will generate .ico files from your .gif’s and .png’s for you… the problem is that most of them don’t do transparencies, and thus will leave you with that dreaded white square filling out what was once transparent.

There are several of these converters that also claim to make the .ico’s transparent, and do, but these by and large fail IE’s verification process, and as such are not recognized. Thus you’re back to where you began, an image that works in Firefox and Opera, but not IE… and as IE is still being used by 70% of the world (for the sake of brevity we won’t get into what is wrong with these people, well, not today anyway) to make your site work in it is a necessity.

Fear not though, there are some converters out there that do work, and I’ll list the one I use here, in my fail-proof procedure for making transparent favicon’s:

  • Step 1 - Create your 16×16 pixel transparent .gif or .png (either works). You should do this in 16×16 because while converters can resize larger images, there is often no telling what you’re going to lose quality wise in the process. You should also test your transparency against various light and dark shades as your favicon is going to appear over several different backgrounds.
  • Step 2 - Go to Dynamic Drive’s favicon generator. Now you just need to find your source image, hit “Create Icon” and then click the “Download FavIcon.” Simple as that, you have a valid transparent favicon all of your own.
  • Step 3 - Upload your new favicon into the root directory of your site
  • Step 4 - Now open up your sites template file, or the individual page(s), and place this tag in the <head> portion (replacing the url with one pointing at your favicon.ico file of course)

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

‘Tis it, ’tis all!

You now have a favicon that will work on all the major browsers.

03.03.08

Why do fonts display differently in Firefox?

Posted in Windows at 6:47 pm by Kevin

Those of you who have multiple browsers on your computer or use multiple computers between home and work, you may have noticed that sites look slightly different from one to the next. Now there are a seemingly infinite number of ways this occurs, and an equally infinite number of reasons for it.

For the sake of the regular user we won’t get into the specifics, as this would be overwhelming. As someone who does this for a living, I often feel just as confounded by some of these things to… so, you’re not alone, believe me.

Now, the particular issue I am addressing (and hopefully solving for you), is why fonts display differently between browsers. If you’re running Windows XP you likely have noticed that fonts render quite smoothly in Internet Explorer, but appear rather choppy in Firefox or Opera. Here is an example to better illustrate:

Example of the different renderings

Now, you may have just written this off to being caused by the browser itself… but if you’ve ever went from a system running Windows Vista to one running XP, you’ll have noticed that the fonts actually render very smoothly on Vista using the same browser. This is because the actual root of the problem is in XP… but is actually, and fortunately, very easy to remedy.

To do so (if you wonder what the screens should look like I’ve included a picture at the bottom of this entry):

  • Go to your desktop
  • Right click, and select “Properties”
  • Select the “Appearance” tab
  • Click on the “Effects…” button. That will bring up a new window with a series of check boxes and drop down menus
  • Make sure the box that reads “Use the following method to smooth edges of screen fonts” is checked
  • Click the drop down menu and select “ClearType
  • Click “OK” which will close that window
  • Click “Apply” on the original window

Done!

Now if you were wondering the reason for the difference between XP and Vista displays… this option was turned off by default on XP, but turned on by default in Vista. As this setting is unlikely to be changed without knowledge of the issue, this explains the difference. You can also download a tool from Microsoft that allows you to control ClearType right from your Control Panel.

So there it is, simple as that!

*Aforementioned visual aides*

What your screen should look like