Archive for the ‘Programming’ Category

Posted by Matt at 10 February 2010

Category: GreaseMonkey, Programming, browser extensions, facebook, javascript, web

better_facebook_large I have officially released BetterFacebook.net to house my "Better Facebook" greasemonkey script and Firefox add-on.

The script has been updated to work with the new Facebook layout, and also now supports Chrome!

Check out the site and the script. I hope you find it useful!

BetterFacebook.net

Posted by Matt at 29 December 2009

Category: google, html, javascript, web

With the upcoming release of Google Caffeine and the importance it will place on page load time when it ranks results, now is as good a time as any to learn about optimizing your site. This recent blog post by kangax is a great primer for getting rid of common, unnecessary bloat.

Perfection kills » Optimizing HTML

Posted by Matt at 7 October 2009

Category: GreaseMonkey, Programming, browser extensions, javascript

Example

This script was born out of a simple problem: I wanted to find out which movies have been released to theaters or DVD lately, and add them to my Netflix queue. Unfortunately, Netflix doesn’t provide an easy way to browse "major" movie releases by release date. However, IMDB always has a nice interface for this. Further, I’ve found myself at IMDB before, looking at a movie that I would like to add to my Netflix queue, but I had to go to Netflix, search, find the movie, then add it.

Solution? A new GreaseMonkey script!: Netflix Links on IMDB

I created this simple GreaseMonkey script, which adds a little red "+" next to movie titles on imdb.com. Clicking the image pops up a new window that searches on the movie name, usually finding the movie you want as the first match.

Easy! Hope it helps!

Posted by Matt at 11 June 2009

Category: Programming, javascript, jquery, web

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…

Posted by Matt at 7 May 2009

Category: Programming, javascript, jquery, web

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

Posted by Matt at 9 April 2009

Category: Programming, browser extensions, javascript, web

greasemonkey-logo 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…

Posted by Matt at 26 February 2009

Category: Programming, javascript, web

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.

Posted by Matt at 11 February 2009

Category: Programming, javascript, jquery, web

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.

Posted by Matt at 24 December 2008

Category: Programming, utils

I recently created a project on Google Code for PHP Excel Reader. This is a PHP library for reading MS Office Excel files that has existed on Sourceforge for quite a while but was no longer being maintained or enhanced. I needed to use it for a work project, so I put in some time to fix it and enhance it to make it more usable. I decided to put it up on Google Code in the hopes that others would find it useful.

[ PHP Excel Reader Project Home ]

Example

Microsoft Excel

<?php
require_once 'excel_reader2.php';
$xls = new Spreadsheet_Excel_Reader("example.xls");

echo '<table border="1">';
  for ($row=1;$row<=$xls->rowcount();$row++) {
  echo '<tr>';
  for ($col=1;$col<=$xls->colcount();$col++) {
    echo '<td>' . $xls->val($row,$col) . ' </td>';
  }
  echo '</tr>';
}
echo '</table>';
?>
HTML Output

Usage

$data = new Spreadsheet_Excel_Reader("test.xls"); 

Retrieve formatted value of cell (first or only sheet): 

  $data->val($row,$col) 

Or using column names: 

  $data->val(10,'AZ') 

From a sheet other than the first: 

  $data->val($row,$col,$sheet_index) 

Retrieve cell info: 

  $data->type($row,$col);
  $data->raw($row,$col);
  $data->format($row,$col);
  $data->formatIndex($row,$col); 

Get sheet size: 

  $data->rowcount();
  $data->colcount(); 

$data->sheets[0]['cells'][$i][$j] - data from $i-row $j-column 

$data->sheets[0]['numRows'] - count rows
$data->sheets[0]['numCols'] - count columns 

$data->sheets[0]['cellsInfo'][$i][$j] - extended info about cell
$data->sheets[0]['cellsInfo'][$i][$j]['type'] = "date" | "number" | "unknown"
$data->sheets[0]['cellsInfo'][$i][$j]['raw'] = value if cell without format
$data->sheets[0]['cellsInfo'][$i][$j]['format'] = Excel-style Format string of cell
$data->sheets[0]['cellsInfo'][$i][$j]['formatIndex'] = The internal Excel index of format 

$data->sheets[0]['cellsInfo'][$i][$j]['colspan']
$data->sheets[0]['cellsInfo'][$i][$j]['rowspan']