MattKruse.com

This is an old issue, but I never looked into it in enough detail to solve it until now.

When using slideUp() and slideDown() in jQuery (and any other animations that animate height) there is often a “flash of content” when the animation starts or stops in IE.

Here are the details you might want to know:

1. IE 6/7 mishandles a style like “overflow:hidden;height:0px;” (which should show nothing) and instead show the entire contents of the object. But ONLY in quirks mode. This is a bug.
2. When doing a hide animation, jQuery animates to 0, and when doing show, it starts at 0
3. So when the value of 0 is set inside the animation, the entire content is flashed visibly on the screen, this causing annoyance and potential epileptic seizures.

A ticket was filed with jQuery 2 years ago about this issue: http://dev.jquery.com/ticket/1726

Unfortunately, they changed it to “wontfix” and instead declared that FX animations are not supported in IE6/7 in quirksmode. I consider this to be pretty lazy on the part of the developers, and I’ve seen this attitude several times with regards to problems that are not so obviously solved or outlying cases. It’s disappointing.

I started a thread in the jQuery Dev group about this, so we’ll see if anything comes of it.

Meanwhile, inserting this fix into the page solves the problem:

jQuery.fx.prototype.originalCustom = jQuery.fx.prototype.custom;
jQuery.fx.prototype.custom = function(from,to,unit) {
        if (this.prop==’height’) {
                to = to || 1;
                from = from || 1;
        }
        this.originalCustom(from,to,unit);
}

It’s simple – when the to or from value in the animation is 0, and we’re animating ‘height’, then just go to/from 1 instead. Problem solved.

Hope that helps out at some point in the future when your content is flashing and you can’t figure out why…

The Mozilla add-ons site has been re-designed, and we finally get the ability to group add-ons together into Collections, which can be installed all at once. Share all your add-ons with others, or make your own Collection to easily install your tools to new instances of the browser.

Now if they would only add automatic sync with my add-ons and settings.

By the way, if you aren’t using FEBE, you should. I have it back up all my Firefox settings nightly to box.net, so if my computer ever crashes I can quickly and easily get everything back. These days, a ton of my stuff is actually stored in the browser, so losing it is quite a hassle.

I started running a couple years ago, and after surviving three half marathons, I’m finally taking on the big challenge. I have signed up to run the Quad City Marathon in September. 26.2 miles.

I have friends who are endurance athletes (50 mile runs, Iron Man, etc) so I’m surrounded by people who have run this distance a number of times, which is a benefit for me. I have taken their advice and I’m motivated by the insane level of endurance that they can accomplish.

After talking to them and reading as much as I could, I decided to following the Novice marathon training plan by Hal Higdon. It’s one of the most popular training plans out there, and he’s one of the "experts" on the subject. If it’s worked for so many before, it can work for me!

I’ve taken the Novice I training plan and put it up as My Marathon Training Plan on Google Spreadsheets. I will update it as I go for the next 18 weeks. For the first week, I was thinking of following the Novice II plan, so I did a bit more. Then I decided to just follow the Novice I plan as-is, so I adjusted.

Hal Higdon talks about using a walking strategy to complete a first marathon. Although I hesitate to plan to walk during a "run", I have decided to take his advice and walk through each aid station. I did some simple analysis of a Marathon Walk Strategy and was surprised to see that adding in walking doesn’t really affect the final time for the pace I plan to try for, so it’s not like it’s going to add a half hour to my finish time or something. It seems to make sense, so that’s my strategy.

So hopefully 17 weeks from now I will be crossing the finish line, a proud first-time marathoner. Wish me luck!

Two new kind of search engines debuted recently, in the increasingly-crowded space of companies trying to search, organize, and present relevant information from the mess of bits on the interwebs.

WolframAlpha is a "computational knowledge engine" rather than a general search engine. It doesn’t just aggregate url’s and match keywords. Instead, it seeks to find relevant answers to real questions using its internal collection of equations, facts, comparisons, and figures. If you put in "weather NYC" it doesn’t just find pages that have those words and show them to you, hoping those pages contain what you are looking for. It understands that you are looking for weather information about New York, and offers you a view of the actual data rather than pages that contain it.

Where Google might be equivalent to asking a librarian "which books contain information about weather, specifically about New York?", WolframAlpha is more like asking a weatherman from New York what the weather is like there. Big difference.

Topsy.com is a search engine trying to capitalize on the popularity of Twitter. Instead of scouring the web for all web pages it can find and indexing the words on each page, it "listens" to all tweets on Twitter and pulls out the keywords and url’s posted with them. It associates the words with the url and aggregates the results.

Searching Topsy for "weather nyc" gives you back nothing useful. But that’s because it’s not meant for that. Instead, Topsy is a view into pop culture and the stream of public consciousness. Searching Topsy for "obama" won’t give you a summary of the President’s actions or all the important news of the day. It will give you a view into what url’s people think are interesting and related to Obama right now. It will also show you who is mentioning the search terms, how many there are, etc. This is a great way to monitor a brand, a current event or issue, or a technology. These things will be tweeted about often, and the way Topsy aggregates the information and presents it can be very interesting.

I finally updated my jQuery Cheat Sheet to match jQuery 1.3.2. I hope people find it useful!

I’ve officially started tweeting (username - @matt_kruse) if for no other reason than to stay current with web trends and pop culture. I also created a short presentation that I will use to introduce some others to the joy that is Twitter.

So, is Twitter useful? I don’t know yet. Search seems interesting. But I’m not sure I have much interest in following users and seeing what they are eating for breakfast. From a purely technical perspective, I’m currently using TweetDeck to follow #js OR javascript, jquery, and igoogle. It’s interesting, and I’ve replied to a few people to answer questions and get a feel for how this all works. I’ll have to wait and see if and how I continue to use Twitter as time goes on…

Like many Firefox users, I have a number of add-ons installed that customize the browser and make my work/browsing easier. Since these are very useful to me, I thought I would share my list in case anyone is interested in trying them out.

I’ve used an add-on called "Extension List Dumper" that makes it simple to dump a list of all installed add-ons. Enjoy.

• Adblock Plus 1.0.1
  http://adblockplus.org/
  Firefox 2.0 - 3.6a1pre
  Ads were yesterday!
• Better Gmail 2 0.7.3.2
  http://ginatrapani.org/workshop/firefox/bettergmail2/
  Firefox 0.8 - 3.1b3
  Enhances Gmail with a compilation of useful features written by Greasemonkey user script developers. All scripts copyright their original authors. Click on the script homepage in the Help tab for more information.
• ColorZilla 2.0.2
  http://www.colorzilla.com/
  Firefox 1.5 - 3.1b3
  Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies
• Custom Download Manager 1.6c
  https://addons.mozilla.org/firefox/addon/6945
  Firefox 3.0 - 3.1a1
  This addon allows you to personalize the Download Manager
• CustomizeGoogle 0.76
  http://www.customizegoogle.com/
  Firefox 1.0 - 3.6a1pre
  Enhance Google search results and remove ads and spam.
• Extension List Dumper 1.14.1
  http://sogame.awardspace.com/
  Firefox 1.5 - 3.1b2
  Dumps a list of the installed extensions.
• Favicon Picker 3 0.5
  Firefox 3.0 - 3.6a1pre
  Replace bookmark icons from the bookmark properties dialog.
• FEBE 6.1
  http://customsoftwareconsult.com/extensions
  Firefox 3.0b1 - 3.1b3
  Backup your Firefox data
• Firebug 1.3.3
  http://www.getfirebug.com/
  Firefox 3.0 - 3.0.*
  Web Development Evolved.
• FireShot 0.69
  http://screenshot-program.com/fireshot/
  Firefox 2.0 - 3.6a1pre
  Adds the ability to take a screenshot of the page entirely, edit it and save in (JPEG, GIF, PNG or BMP), print, copy to clipboard, send to external editor or e-mail it. Additional annotation tools (text, freeform drawing, highlights) provide quick and easy way of documenting of captures.
• Fission 1.0.3
  http://mozilla.zeniko.ch/fission.html
  Firefox 3.0 - 3.5b4pre
  Progress bar in the address bar (Safari style).
• Flashblock 1.5.9
  http://flashblock.mozdev.org/
  Firefox 1.5 - 3.6a1pre
  Replaces Flash objects with a button you can click to view them.
• Google Gears 0.5.4.2
  http://gears.google.com/
  Firefox 1.5 - 3.0.*
  These are the gears that power the tubes!
• Greasefire 1.0.3
  http://skrul.com/blog/projects/greasefire
  Firefox 3.0 - 3.1b3pre
  Automatically find Greasemonkey scripts on Userscripts.org
• Greasemonkey 0.8.20090123.1
  http://www.greasespot.net/
  Firefox 1.5 - 3.1b3
  A User Script Manager for Firefox
• IE Tab 1.5.20090207
  https://addons.mozilla.org/firefox/addon/1419
  Firefox 3.0 - 3.6a1pre
  Enables you to use the embedded IE engine within Mozilla/Firefox.
• Open in Browser 1.4
  http://www.spasche.net/mozilla/
  Firefox 3.0 - 3.0.*
  Offers the possibility to display documents in browser window.
• OpenDownload 1.0.0
  http://mozmonkey.com/
  Firefox 1.0 - 3.0.*
  Allows you to open any file from the internet into the OS assigned program.
• Pixlr 1.2
  http://www.pixlr.com/
  Firefox 1.5 - 3.6a1pre
  Edit screen capures and images in Pixlr Image Editor or Pixlr Photo Express. No need for an offline image editor.
• Stylish 0.5.9
  http://userstyles.org/stylish/
  Firefox 1.5 - 3.5b4pre
  Customize the look of websites and of the user interface.
• Tabs Open Relative 0.3.3
  http://jomel.me.uk/software/firefox/tabsopenrelative/
  Firefox 1.5 - 3.1a1pre
  Tabs open to the right of the current one.
• Textarea Cache 0.5.4
  http://hemiolapei.free.fr/extensions/index.php/textarea-cache
  Firefox 3.0 - 3.5b4pre
  Allows to save automatically the content in a text input field.
• TryAgain 3.2.0
  http://mathijs.jurresip.nl/tryagain-extension/
  Firefox 3.0 - 3.0.*
  Will keep trying to load a webpage when the server is not found.
• URL Fixer 1.5
  http://www.chrisfinke.com/addons/url-fixer/
  Firefox 2.0 - 3.5b4pre
  Fixes common misspellings in URLs entered in the address bar.

GreaseMonkey is a Firefox extension that allows you to insert javascript into any web site you browse to in order to customize the interface or add/remove/change functionality.

I’ve known of its existence for a long time, but I’ve never used it, despite my interest and experience with javascript.  A recent change in iGoogle gadget functionality made me take another look, and now I’m hooked.

GreaseMonkey is not complicated, like I assumed. It’s simple. Very few API functions to learn, and you don’t even need to learn them to do most things. If you know enough about javascript, you can be up and running in no time.

Once its installed, I found the GreaseFire extension is also useful. It keeps a local database of GreaseMonkey scripts from userscripts.org and lets you know if there are any existing scripts available for the sites you are viewing.

For my first proof of concept, I created a user script for Facebook that will pin the notifications window to the upper right corner for easy access. No need to go down and click on it when it’s red. The script can be accessed here:

http://userscripts.org/scripts/show/46272

Most scripts out there are primitive, from what I can tell. The first thing I looked for was an existing library to easily manage user preferences, so a single script could offer the user multiple options. For example, what to hide, what to show, colors to use, etc. Unfortunately I couldn’t find anything that already existed, so I guess I’ll have to build my own. Maybe.

I also assumed there would be an easy way to upload and maintain scripts on userscripts.org, but it doesn’t look like that’s the case. It’s manual upload, so if I update my local version I have to go in and manually update the site. What a pain! Hopefully someone will improve this so updates to local scripts can be mirrored to the repository quickly and easily.

I’ll post more as I create them, I assume. I have more ideas for Facebook and for iGoogle, for sure…

The other day I had the need to scramble text on a page so I could capture a screenshot and send it to someone without them seeing the page content. I looked around for a Firefox Add-On that would do it for me but came up blank. So I wrote this quick:

javascript:function%20scramble(el){if(el.nodeType==3){el.nodeValue=el.nodeValue.replace(/[a-zA-Z]/g,function(x){return%20String.fromCharCode(((x.charCodeAt(0)<97)?65:97)+Math.floor(Math.random()*26));});}else{for(var%20i=0;i<el.childNodes.length;++i){scramble(el.childNodes[i]);}}};scramble(document.body);

Give it a try on this page to see how it works. Warning! You’ll have to reload, because you obviously won’t be able to read the text once this runs!

Scramble Text

You can drag this link up to your Links toolbar or into a bookmark to make it easily available on any page.

jQuery underwent some changes in the latest 1.3.1 release, including the elimination of browser sniffing and speed improvements. While I am a regular user of jQuery and I find it useful, I am not an evangelist proclaiming it’s glory. It has problems, and I am often frustrated by approaches taken by the core development team, most recently in a thread on the jQuery Dev group called IE6 feature detection – possible solution.

Then last week, David Mark – a regular contributor to comp.lang.javascript and someone with a lot of javascript knowledge – started a thread called jQuery’s latest stab at competence.

He raises some good technical criticisms of jQuery, and the thread goes on quite long. I voice my opinion as well (we have often clashed in the past on the use of jQuery). For someone who is interested in a deeper understanding of the design of jQuery, some of its technical faults, and a look into whether it’s actually a library that should be recommended, I would recommend reading through these two threads.