Archive for the ‘browser’ Category

Automatically Delete Unwanted Cookies in Firefox

Saturday, January 26th, 2008

I prefer to not have cookies stored in my browser, but it’s impractical to not store any cookies since this would require repeatedly logging in to authenticated sites that I frequently use. A simple solution in Firefox is the following:

From the Edit menu, choose Preferences and then click the Privacy tab. You should see a dialog similar to the following one:

firefox1.png

Check the “Accept cookies from sites” checkbox. For the “Keep until” setting, select “I close Firefox”. The latter is the key - it will erase all cookies from Firefox whenever you close the program. Of course, we don’t want to erase all the cookies, so click the “Exceptions…” button on the right and you’ll see a dialog similar to the following:

firefox2.png

Just type the name of the web site you want to allow in the text box and click the “Allow” button, and Firefox will add it to the exception list so it won’t be deleted when you close Firefox. You can add a full URL such as www.MySite.com, or just the domain name MySite.com to allow cookies for any host in that domain. You an also add sites you want to disallow any cookies from by clicking the “Block” button.

I have about 30 sites that I allow Firefox to store cookies for, but this technique has helped me avoid accumulating tons of unwanted cookies in Firefox. I hope it’s helpful for you.

Functional Features in JavaScript on Firefox

Sunday, October 7th, 2007

I was reading an article about adding code to JavaScript to make it more functional, and one of the blog commenters mentioned some built-in features that were added to JavaScript 1.6 & 1.7 on Firefox, so I checked out the links (see below) - very cool stuff.

  • Array methods

    • indexOf
    • lastIndexOf
    • every
    • filter
    • forEach
    • map
    • some
  • Array & String generics
  • Generators & Iterators
  • Array Comprehensions
  • Block Scope w/ let
  • Destructuring Assignment
  • etc.

They won’t help if you have to target IE also, but it should be possible to conditionally include your own code to implement the ones that don’t require syntactic changes for pages loaded from IE. That would reduce network load for customers using Firefox.

New in JavaScript 1.6 (Firefox 1.5)

New in JavaScript 1.7 (Firefox 2.0)

Hopefully IE will catch up someday, but if not, I can see taking advantage of Firefox specific JavaScript enhancements for niche applications. Firefox is so easy to install, that it should be easy to convince customers to use it for certain custom applications.

Greasemonkey Script for Netflix Half Star Ratings

Monday, August 27th, 2007

I wrote an article back in May about a way to give half star ratings on Netflix. It had the advantage of working in any browser and not requiring any software installation, but it wasn’t very user friendly.

Since then, I’ve been doing a lot of JavaScript coding, so I thought I’d give Greasemonkey a try. I found a script here to give half-star ratings, but I didn’t care for the hover captions and JSLint pointed out a few issues, so I cleaned it up a little:

Code

// ==UserScript==
// @name Netflix Half Stars
// @description allows half star user ratings on Netflix
// @include http://*netflix.com/*
// ==/UserScript==
// http://userscripts.org/scripts/review/8118
// Modified by Brian Adkins

if (!unsafeWindow.sbHandler) { return; }

var sbHandler = unsafeWindow.sbHandler;
sbHandler.sbOffsets = [8,18,27,37,46,56,65,75,84,94];

sbHandler.displayStrings[0.5] = ".5 stars";
sbHandler.displayStrings[1.5] = "1.5 stars";
sbHandler.displayStrings[2.5] = "2.5 stars";
sbHandler.displayStrings[3.5] = "3.5 stars";
sbHandler.displayStrings[4.5] = "4.5 stars";

sbHandler.sbImages[0.5] = new Image();
sbHandler.sbImages[0.5].src = sbHandler.imageRoot+"stars_2_5.gif";

for(var i = 2; i < 11; i++) {
sbHandler.sbImages[i/2] = new Image();
sbHandler.sbImages[i/2].src = sbHandler.imageRoot + "stars_2_" +
(Math.floor(i/2)) + (i % 2 === 0 ? "0" : "5") + ".gif";
}

sbHandler.getStarCount = function (evt) {
var x = unsafeWindow.getElementMouseCoordinate(evt, this.element);

for(var ii = 0; ii < 10; ii++) {
if(x <= this.sbOffsets[ii]) { return (ii + 1) / 2; }
}

return 0;
};

Installation

Save the JavaScript code with .user.js extension e.g. netflix_halfstar.user.js and then open that file in Firefox and Greasemonkey should prompt you to install it.

Social Bookmarking

Tuesday, August 7th, 2007

Here’s a video that explains why using a site such as del.icio.us can be useful. I think they may have failed to mention that you can mark bookmarks as private on del.icio.us, so it’s not necessary to expose your bookmarks to the world. However, in my case, I only mark a small fraction as private.

I’ve been using del.icio.us for quite some time. After I had been using it for a while, I realized that it had been a long time since I bookmarked something in my browser because I had developed a habit of bookmarking in del.icio.us. Most browsers force you into placing a bookmark into a hierarchical, or directory, structure, but on del.icio.us you can assign as many “tags” as you like to a particular bookmark so you can search for things more easily. del.icio.us also allows you to export your bookmarks so you aren’t at the mercy of a proprietary service.

Another thing that is handy is to subscribe to the del.icio.us feeds of your friends to be automatically notified when they bookmark something that may be of interest.

Surf Securely Using SSH

Thursday, August 2nd, 2007

This is so easy, you’re gonna love it! Thanks Tyler Pedersen.

Motivation

I’ve been using my laptop more frequently at wifi hotspots. Many web sites I visit encrypt traffic with SSL for authentication, but after that they send traffic in the clear which means the cookies that are used for authentication purposes are sent in the clear, so anyone with a sniffer within range of my laptop could easily intercept the traffic, steal my cookies and impersonate me on the web site. Not good! So, I went looking for a simple solution, and found a great article about using ssh for this purpose. Ya gotta love open source software :)

Prerequisites

I’ll assume the following:

  1. You’ve used ssh before
  2. You have access to a remote host running sshd

How To

Issue the following command on your local computer:

ssh -Nf username@hostname.com -D 1080

replace username@hostname.com with the appropriate information. Look at the man page for ssh, or read the article linked above for an explanation of the options.

The next step is to configure Firefox to use the SOCKS proxy you setup with the above command. I’m using Firefox 2.0.0.6 on Ubuntu 7.04 Linux.

Edit | Preferences | Advanced | Settings

Pulls up the following dialog:

socks.png

Notice how I’ve switched from “Direct connection to the Internet” to “Manual proxy configuration”. I’ve also set the SOCKS Host to be ‘localhost’ and the port to be ‘1080′.

I can now surf and have encrypted traffic between my local computer and the remote host I ssh’d to. The traffic between my remote host and the destination web site will be unencrypted, but hopefully that traffic is harder to sniff without being detected.

At this point, I tested it out and everything worked fine. I then killed my local ssh process and Firefox complained about the connection being reset, so I knew it was in fact sending data over the ssh tunnel.

The final step is optional, but if you want to avoid having the bad guys detect your DNS requests (or possibly redirect them - d’oh!), you can configure Firefox to route DNS requests through the proxy.

  1. Type about:config in the Firefox address bar.
  2. Look for network.proxy.socks_remote_dns and set the value to true

Is that easy or what? Thanks again Tyler.

Head First HTML with CSS & XHTML

Saturday, July 14th, 2007

I first noticed the covers of the “Head First” book series from O’Reilly a while ago, and I thought they looked unprofessional and simplistic, so I never really looked into them. Interestingly, I try to be careful about not being biased by nice book covers, but I think I’m more susceptible to dismissing books with “bad” covers.

I researched HTML books recently to help my aesthetically gifted wife get started designing web pages and the Head First HTML with CSS & XHTML title got great reviews on Amazon, so she picked up a copy.

I thought I’d flip through the book, and I ended up reading the entire thing :) I really wish this book was available years ago when I started coding HTML; it’s an incredibly well written tutorial. It has a very unique style which the authors spend quite a few pages explaining:

Based on the latest research in cognitive science, neurobiology, and educational psychology, learning takes a lot more than text on a page. We know what turns your brain on.

After reading the book, I tend to agree with their approach. It was a very fun and informative read. Most of the book was review for me since I’ve spent years learning this stuff the hard way, but there were a handful of excellent points I learned from the book, and I understand a lot of the foundational aspects of XHTML & CSS much better than I did before. Expecting a newbie to get through a typical HTML reference book is unrealistic IMO.

For anyone wanting to learn the basics of (X)HTML & CSS, or would like a good review, I highly recommend this book. I don’t know if the other books in the “Head First” series are as good, but I’ll certainly consider them in the future based on my experience with this one.

UPDATE: I have found one thing to criticize about the book. The index leaves a lot to be desired. This is a particularly grievous deficiency with this book since it is organized as a tutorial as opposed to a reference book.

Which doctypes are being used?

Thursday, July 12th, 2007

In trying to decide which doctype to use for my new web apps, I thought I’d see what other sites are currently using. Here are the results in order from least to most leading edge:

No doctype at all

  • mail.google.com
  • mail.yahoo.com
  • www.alexa.com
  • www.amazon.com
  • www.barnesnoble.com
  • www.ebay.com
  • www.godaddy.com
  • www.google.com
  • www.myspace.com
  • www.trianglemls.com

HTML 4.0 Transitional w/o URL

  • www.fedex.com

HTML 4.0 Transitional Loose

  • www.dell.com
  • www.microsoft.com
  • www.monster.com

HTML 4.0 Strict w/o URL

  • www.ask.com

HTML 4.01 Transitional w/o URL

  • www.bankofamerica.com
  • www.netflix.com
  • www.nuskin.com
  • www.ups.com

HTML 4.01 Transitional Loose

  • www.apple.com
  • www.bizbuysell.com
  • www.craigslist.org
  • www.hp.com
  • www.sun.com
  • www.usps.gov
  • www.youtube.com

HTML 4.01 Strict

  • www.flickr.com
  • www.slashdot.org
  • www.walmart.com
  • www.yahoo.com (for Firefox, no doctype for IE)

XHTML 1.0 Transitional

  • www.aol.com
  • www.digg.com
  • www.expedia.com
  • www.livejournal.com
  • www.loopnet.com
  • www.orbitz.com
  • www.stumbleupon.com
  • www.wachovia.com

XHTML 1.0 Strict

  • del.icio.us
  • maps.google.com
  • www.blogger.com
  • www.facebook.com
  • www.ibm.com
  • www.jaiku.com
  • www.msn.com
  • www.pownce.com
  • www.twitter.com
  • www.wikipedia.org

XHTML 1.1

  • www.mayoclinic.com

Conclusion

There are enough mainstream sites using XHTML now, that I feel it may be ready for prime time. Since I don’t have a lot of legacy pages to deal with, I’m going to use XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Douglas Crockford: Advanced JavaScript

Thursday, May 17th, 2007

Ok, last of the Douglas Crockford videos. These are definitely worth viewing if you program at all in JavaScript. The highlight for me was his presentation of prototypal and parasitic inheritance models and contrasting them with the pseudo-classical approach that is typically presented. I haven’t had time to analyze his approach in depth, but from a single viewing, his ideas certainly merit experimentation and seem to fit in more naturally to the JavaScript language.

I felt he did a good job of presenting natural ways of handling encapsulation, inheritance and code reuse while capitalizing on JavaScript’s strengths instead of trying to impose a class-based design onto the language. He also covered several ways of utilizing closures nicely.

function object(0) {
  function F() {}
  F.prototype = o;
  return new F();
}
newobject = object(oldobject);

var singleton = function () {
  var privateVariable;
  function privateFunction(x) {
    ...privateVariable...
  }
  return {
    firstMethod: function (a,b) {
      ...
    },
    secondMethod: function (c) {
      ...
    }
  };
}();

Object.prototype.later = function(msec, method) {
  var that = this,
      args = Array.prototype.slice.apply(arguments, [2]);
  if (typeof method === 'string') {
    method = that[method];
  }
  setTimeout(function () {
    method.apply(that, args);
  }, msec);
  return that;
};

Advanced JavaScript Part 1 of 3
Advanced JavaScript Part 2 of 3
Advanced JavaScript Part 3 of 3

Douglas Crockford: Theory of the DOM

Thursday, May 17th, 2007

Here’s a set of 3 videos by Douglas Crockford on the DOM that were in between his JavaScript and Advanced JavaScript presentations. Pretty basic material, but you may find a few helpful hints. A few comments:

  1. Comment hack for JavaScript hasn’t been necessary for 10 years!
  2. language=javascript has been deprecated
  3. type=’text/javascript’ is ignored if you use the src attribute
  4. remove any event handlers of a node before deleting it due to MS garbage collection incompetencies
  5. avoid trickling, bubbling is where the action is

Theory of the DOM Part 1 of 3

Theory of the DOM Part 2 of 3

Theory of the DOM Part 3 of 3

Douglas Crockford: JavaScript

Thursday, May 17th, 2007

Thanks to Jordan Liggitt for passing on some videos on JavaScript by Douglas Crockford who is a senior JavaScript architect at Yahoo! The first series is pretty basic, but if you’re new to the language, it’s a very good introduction. Here are some random items I thought were noteworthy:

  • Brendan Eich at Netscape originally wanted to make a dialect of Scheme, but his manager said that people wouldn’t accept “all those parentheses”, and he should make something with a friendlier syntax. Too bad, I would love to able to program Scheme in the browser
  • Brendan did sneak in lambda though, he just didn’t call it that :)
  • No separate character type, just strings of length 1
  • == and != do type coercion; === and !== do not
  • bitwise operators convert to a 32 bit signed integer and then back to a 64 bit float, so don’t use them for efficiency like you might in C
  • don’t use the with statement
  • be careful with for (var name in object) due to iteration of inherited members also
  • blocks don’t have scope, only functions do
  • vars are implicitly global if not declared
  • 4 ways to call a function

    1. functionObject(args)
    2. thisObject.methodName(args)
      thisObject[”methodName”](args)
    3. new functionObject(args)
    4. functionObject.apply(thisObject[, args])
  • don’t use eval except for trusted JSON
  • http://www.JSLint.com a tool Crockford wrote
  • Semicolon insertion: when the compiler sees an error, it attempts to replace a nearby linefeed with a semicolon and try again! Always use the full correct form including semicolon. This was a surprise to me because once I discovered semicolons were optional, I stopped using them for a cleaner look. Oops.

The JavaScript Programming Language Part 1 of 4
The JavaScript Programming Language Part 2 of 4
The JavaScript Programming Language Part 3 of 4
The JavaScript Programming Language part 4 of 4

I’ll post another entry after I go through Crockford’s advanced series.

35 Designers x 5 Questions

Tuesday, May 8th, 2007

35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.

In the end we’ve received more answers than we expected. The results - over 80 CSS-based tips, design ideas, suggestions, fonts, design-related books and online-magazines - are listed below. It’s interesting to know, how designers work their magic. It’s interesting to know what you can actually learn from them.

35 Designers x 5 Questions

(Firefox (Firefox (Firefox)))

Tuesday, April 24th, 2007

I was listening to Buzz Out Loud and Tom mentioned being able to run Firefox from within Firefox from within … :)

Copy and paste the following URL into the location bar in Firefox:

chrome://browser/content/browser.xul

Is that cool, or what?