Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

Firefox Beta and Aurora Release Channels

With the rapid release cycle (currently every 6 weeks) for Firefox, it’s a good idea for developers and testers to use the upcoming release versions before they are released to the general public.

For Windows users, you can download and install an appropriate version from:
http://www.mozilla.org/en-US/firefox/channel/

On Ubuntu, it’s a little more difficult, but rater straight-forward:

  1. Open a new Terminal window
  2. sudo add-apt-repository ppa:mozillateam/firefox-next
  3. sudo apt-get update
  4. sudo apt-get install firefox

REFERENCES:

That’s all…. Happy Testing!

Making HTML text unselectable with CSS

There are often circumstances where you do not want users to select certain text on your page in order to maintain a facade… rounded buttons for example.

In most browsers, this can be achieved using CSS (much of it proprietary below), For IE and Opera, you will need to use the unselectable expando property of the element you wish to be unselectable.

You can set this using an attribute in HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
<style type="text/css">
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>

Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the

. If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:

function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

REFERENCES:

Firefox Beta and Aurora Release Channels

With the recent rapid release cycle (currently every 6 weeks) for Firefox, it’s a good idea for developers and testers to use the upcoming release versions before they are released to the general public.

For Windows users, you can download and install an appropriate version from:
http://www.mozilla.org/en-US/firefox/channel/

On Ubuntu, it’s a little more difficult, but rather straight-forward:

  1. Open a new Terminal window
  2. sudo add-apt-repository ppa:mozillateam/firefox-next
  3. sudo apt-get update
  4. sudo apt-get install firefox

REFERENCES:

That’s all…. Happy Testing!

Yahoo! Exceptional Performance (for Web Applications)

I spend a LOT of time trying to optimize web applications to run and appear as fast as possible, one of the most valuable tools I have in my “bag of tricks” is the YSlow! plugin for Firefox.

It integrates in the browser and gives a near real-time scoring of the pages you visit and suggestions on how to improve them. While some of the suggestions are not practical (for example: use of a CDN) the bulk of them can be applied to your application code or server with a little bit of work.

The rules and scoring mechanisms are well documented at the following website:

The YSlow! plugin is available here:
http://developer.yahoo.com/yslow/

Happy… Faster Surfing!

Mozilla Firefox 3.0 released

After months of anticipation and three Release Candidates, the new version of Firefox is now available for download. (Due to demand, servers are still a bit slow, so just keep trying and you will eventually get it!).

http://www.getfirefox.com/

Most common developer plugins were updated to support FF3 in the last week or so:

  • YSlow! was finally updated on launch day
  • Unfortunately, Google’s discontinued support for their “Google Browser Sync” and does not plan to update it to support FF3.

Cheers!

Pretty Good Privacy (PGP)

I’ve used PGP (Pretty Good Privacy) since I was in college. It provides for both digital signatures and strong encryption and content without the user having to go make extraordinary effort. The process uses what is known as Public Key Encryption and uses a Web Of Trust to certify individual users.

For years I used the original PGP 2.6.2, 5.x and 6.x products that were available as freeware. After PGP was acquired by a much larger commercial entity, most development has shifted to the open-source community that makes it available as GnuPG aka GPG.

There are several plugins available for common Email Clients such as Thunderbird and Outlook to natively integrate the functions into those applications. Additionally plugins are available for Firefox to enable encryption and signing of WebMail services such as GMail (Google Mail).

My public keys are available online at http://www.giantgeek.com/pgpkeys.asc, http://www.skotfred.com/pgpkeys.asc, or through most of the keyservers.

References:

I look forward to your signed/encrypted emails,
Cheers.

Mozilla networking configuration

Here’s another, albeit awkward configuration change for Mozilla Firefox for networking.

Enter about:config in the URL of the browser and manipulate the following,¬† I’ve shown the defaults in parethesis to aid in reverting them if you encounter problems.

network.http.pipelining=true (def:false)
network.http.proxy.pipelining (def:false – only required if you use proxies that support)
network.http.pipelining.maxrequests=8 (def:4, max is 8)

References:

Cheers!

WOT – Website reputation

Previously I discussed the McAfee SiteAdvisor plugin. Another similar project is WOT.

The differences with it are as follows:

  1. Instead of a centralized service, WOT is democratic. As such, the result is based on the feedback of any user that takes the time to rate a given website.
  2. WOT is available for Firefox and MSIE.

Since this coexists well within the browser, there’s no reason you can’t use both!

References:

Happy surfing!

Mozilla cache folder

Due to my UNIX background,¬† I’ve found it helpful, for both security and performance reasons to relocate your ‘cache’ or temporary files to a new location (Unix/Linux gurus may prefer /tmp/) here’s the simple process for doing this on a Windows machine using Firefox.

This is useful for several reasons:

* Moving many of your ‘tmp’ files/folders to a single location makes it easier to “clean house”.
* If you move ‘tmp’ to a separate drive or partition (like in UNIX), your primary drive will be less fragmented and may even show increased performance.

Firefox didn’t make this as easy to change as MSIE, but it’s a trivial matter. Find and edit the prefs.js file in your Profile directory and add the following…

user_pref(“browser.cache.disk.parent_directory”, “C:\\temp\\Mozilla”);

Alternately, you can type “about:config” in the URL/address line of the browser and add the String…

browser.cache.disk.parent_directory with a value of “C:\\temp\\Mozilla”

If you want to keep your existing cached files, you can always copy them over from the old location.

For Windows XP with MSIE6/7, the disk cache location is easily changed in the Internet Control Panel, on the General tab, Settings button. Microsoft seems to change that control panel with every new OS/browser version, but it’s generally named similarly on different configurations.

Good luck !