Tue 11 Mar 2008
I accidentally discovered a useful keyboard shortcut in Firefox today. I was trying to open a new tab by pressing Ctrl-T, but instead I hit Ctrl-Shift-T. Instead of opening a new blank tab, Ctrl-Shift-T (Command-Shift-T for Mac users) opens your last closed tab. If you keep pressing this key combination, it will step backwards through your closed tab history and reopen your tabs one-by-one.
Of course, you could always use the 'Recently Closed Tabs' menu item by going to History->Recently Closed Tabs, but if you're like me, you'd rather use a shortcut than click through the menus.
Share This
Tue 19 Jun 2007
Have you ever wanted to test a newly developed site in a bunch of different browsers but didn't have four or five spare computers with various OSs and browser versions laying around? Well, browsershots.org might be the solution to your problem.
Just go to the site, enter your site's URL, then select the browsers you want to test in. Currently supported browsers are:
- IE 5, IE 5.5, IE 7, and Firefox 2.0 for Windows
- Firefox 2.0 and Safari 2.0 for Mac
- A ton of browsers/versions for Linux
Then, choose your other options such as screen resolution, Javascript enabled/disabled and version, Java installed/not installed and version, Flash installed/not installed and version, color depth, media plugins, and the maximum time you are willing to wait for your screen shots. That's all there is to it.
One dissapointing aspect of the site is that it is pretty slow to produce any results. I queued up a request for this site for IE 7 and set my maximum wait time to 30 minutes with all of the rest of the criteria set to "Don't Care". It ended up timing out of the queue before actually giving me anything. Hopefully the creator is working on speeding this up, because I don't think there are too many instances where someone will want to wait 4 hours (the maximum wait time) to see a screen shot. The good thing is that the site caches recent requests, so if a screen shot has been recently taken, you don't have to wait again. To see this in action, request a screen shot for microsoft.com or another popular site.
Share This
Sat 09 Jun 2007
The other day, I had the "pleasure" of updating a Myspace page for someone, so I thought I would share my experience. It's not the first, and probably not the last, Myspace page I've been asked to edit. (Well, actually I kind of volunteered... doh!) Even if you're not a Myspace user, someone you know will have an account. If they know that you know anything about web design, chances are they will try to recruit you to customize their page.
Unlike some other blogging/social networking sites, Myspace doesn't ask you to choose a template for your page, but rather allows you to use CSS to style your page how you'd like. This flexibility is one of the reasons why Myspace has become so popular.
A few things before we get started:
- Following along with these instructions will require at least basic knowledge of HTML, CSS, and the DOM. If you are not familiar with these concepts, w3schools.com is probably one of the best places to start learning.
- If you are a standards-aware web designer, Myspace's markup will drive you INSANE! From a standards point of view, it is the definition of horrible code. Lots of tables, embedded styles, font tags, you name it.
- Myspace doesn't like # symbols. When saving your page, it will convert them to #. This means no # symbols at the beginning of hex colors and no way to target elements by ID in your CSS.
- You may find it easier to find a theme or a profile code generator to give you a head start on your CSS. You can tweak it to your liking from there.
- You will need to put your CSS into one of the profile sections like "About me:" or "I'd like to meet:". Normally, you would link to an external style sheet or (worst case) put it in the <head> of the document, but like I said, Myspace is not very standards-compliant.
- I highly recommend that you use a couple tools to help you edit. I will be using the Web Developer extension and Firebug for Firefox, so if you want to follow along, you'll need to download and install them. I'll explain how we'll use them in a minute.
Now, here's where we get started:
- Download and install Firefox, the Web Developer extension and Firebug.
- Find a theme that closely resembles the look you are shooting for. There a ton of themes on the web, as well as Myspace "code generators". A quick Google search should find them. If you can't find anything easily, don't worry about it; you can still follow along, you'll just be starting from scratch.
- If it's not already running, fire up Firefox and install the plugins I mentioned in step 1.
- Go to the profile page you are trying to edit (the one that a normal user sees, not the one you see when you login).
- On the Web Developer toolbar at the top of Firefox, select Outline > Outline Current Element. This will turn your mouse pointer into crosshairs and will display a string just below the toolbar that represents the DOM structure of all of the ancestors of the element that your mouse is currently over. This is how you will figure out which element to target in your CSS.
- Since Myspace doesn't let you use # to specify an ID of an element in your CSS, you will often need to use element names and classes to target objects that you could normally target by ID. So, given the following structure:
html > body.bodyContent > table > tbody > tr > td.latestBlogEntry > table > tbody > tr > td#ctl00_Main_linkCategory > a
you could normally use:
#ctl00_Main_linkCategory a
to target the anchor, but instead you are forced to use:
.bodyContent .latestBlogEntry a
Not a huge deal, but nevertheless, something to be aware of. It's a little hard to illustrate here, but you'll see what I mean when you start editing.
- Now, in the Web Developer toolbar, click CSS > Edit CSS. This will split your window horizontally into half browser, half CSS editor. You'll want to go to the "Embedded Styles" tab. Once you figure out which element you want to customize using the "Outline Current Element" tool, you can edit the CSS real-time and see the page change as you edit. Make all of your changes and then copy everything to Notepad or TextEdit. This is what you will need to paste into one of the profile sections mentioned previously.
- Next, click "Home" at the top of the Myspace page, then "Edit Profile". Find the "About me:" or "I'd like to meet:" section and paste the code you copied from the CSS editor at the bottom and surround it with opening and closing <style> tags (<style> and </style>). After you've inserted your code, you can preview your profile or save changes by clicking one of the buttons at the top of the page. The preview is not always 100% accurate, so I would just save them and then go look at your actual profile.
- Here's where Firebug comes in. Firebug has a really cool feature that lets you inspect the DOM, click on an element, and see every style that is applied to the element and exactly where it came from. It shows inherited styles as well as styles that specifically target the element, and strikes through any that are overridden by a more element-specific style. You can use this to figure out why a particlar style isn't getting applied, even though it appears for a particular element in your CSS. (See the image below.)
- After you have your page looking the way you want, you can go back and clean up the styles using the same tool described in step 9. It shouldn't hurt to leave duplicate styles intact, but it's good practice and cleaner if you remove them. Plus, it will make debugging easier in the future.
That's it. You're done. Happy Myspace-ing.
Share This
Sat 02 Jun 2007
Came across this site and thought it was pretty clever. It uses the design from the popular movie "Kill Bill" to get users to switch to Firefox.
http://www.killbillsbrowser.com/
Share This
Fri 01 Jun 2007
If you've ever coded a web page and tried it out in Firefox or another standards compliant browser, then opened the same page in IE only to find an entirely different looking page, you'll appreciate this Wordpress plugin. It encourages readers to make the switch to Firefox and puts money in your pocket if they do.
The plugin makes use of Google's Adsense referral program and requires that you setup an Adsense account (a simple process - just click the button below to get started).
Once you setup your Adsense account, just paste the Firefox referral code into the plugin file according to the installation instructions.
By using your choice of three different levels, you can control how aggressively you push the switch. Here are the descriptions from the Explorer Destroyer site:
Level 1: Gentle Encouragement Rating: $$
Visitors using IE see a message encouraging them to download Firefox (with a download link) running across the top of the page.
Level 1 Demo >> (the demo will pretend you are using IE)
Level 2: Semi-serious Rating: $$$$
Visitors using IE get a friendly splash page encouraging them to download Firefox. There's a download link, and a link to continue on to your site.
Level 2 Demo >> (the demo will pretend you are using IE)
Update: Xavier sent us this modified version of level 2 that will only show the splash page occasionally. Download it here and see a live demo here.
Level 3: Dead serious
Level 3 will not allow people using IE past a splash page. This level is very useful for sites that are not IE6 compatible. And there's never been a more important moment to switch people to Firefox. Can you handle it? (At least try it for a day to see how good it feels.) Unfortunately, level 3 is a little too intense for the Adsense policies, so for this level you'll have to use a regular, non-Adsense link to download Firefox.
Level 3 Demo >> (the demo will pretend you are using IE)
I'm still contemplating whether or not to use the plugin on this site. I'm a big Firefox fan, and yes, IE is a pain to code for, but some people may be put off, even by the Level 1 method. Let me know what you think.
Share This
