Presentation Layer

Inventory of text styles for a given psd

2011-07-14T11:19:00.000-07:00

TODO - create a tool to capture the inventory of text styles for a given psd

Bonus - batch mode: create an inventory of text styles for all psds in a directory (or at least all open psds).

On Site Comment

2011-05-15T20:17:00.000-07:00

3rd party comment system

fb comments
disqus
intense debate
js-kit
sezwho

self-hosted comments

threaded comments
subscribe to replies
reply by email

Anti-spam options (for app-handled comments)

akismet (free for personal use, not for commercial use)
reCaptcha (free, bought by google)
app's "own" captcha
moderate all comments
moderate comments if they contain N or more links (default: N=1)
only allow comments from authenticated users
autoapprove comments from a commenter after first approval
moderate all comments for content items older than X days
close commenting for content items older than X days
ip-based throttling (system will only accept N comments per M units of time from a given IP)
system-wide throttling (system will only accept N SYSTEM-WIDE TOTAL comments per M units of time)

Security by obscurity?

require random special inputs
disallow extraneous inputs
require that a form take at least N units of time to complete (spammers may submit immediately, people take at least a couple seconds to type something)

Suggestions from "User-generated spam - Webmaster Tools Help"

http://www.google.com/support/webmasters/bin/answer.py?answer#81749

rel#"nofollow"

Use a blacklist to prevent repetitive spamming attempts.

Google often sees large numbers of fake profiles on one innocent site all linking to the same domain. Once you find a single spammy profile, make it simple to remove any others.

Add a "report spam" feature to user profiles and friend invitations.

Your users care about your community and are annoyed by spam too. Let them help you solve the problem.

Monitor your site for spammy pages.

One of the best tools for this is Google Alerts. Set up a site: query using commercial or adult keywords that you wouldn't expect to see on your site. Google Alerts is also a great tool to help detect hacked pages. The Keywords page in Webmaster Tools lists significant keywords found on your site, so it's a good idea to check this regularly for unexpected and volatile vocabulary.

// (end content from google.com)

Further thoughts and links

Use non-descriptive form names (i.e., not "comment")
http://www.projecthoneypot.org/
http://www.stopforumspam.com/
tiny orwell? (old)

Table Row Height Reported Wrongly

2010-06-21T11:21:00.000-07:00

Turns out that in all current browsers there may be a 1 pixel discrepancy between the reported height of a table row and the actual height of the table row.

Not only that, but identical table rows in the same table may differ in height from each other.

IE9 First Look

2009-11-20T08:05:00.000-08:00

The folks over at the IEBlog just posted An early look at IE9 for developers.

Synopsis:

Javascript: almost as fast as ff 3.5, about half as fast as chrome. They brag about improved js speed, then turn around and slightly downplay the importance of it, pointing to the fact that there are many other factors that affect page render time.

CSS: They explain why they only got 32/100 on the acid3 test: Regarding the technologies that acid3 tests, "many [are] still in the “working draft” stage of standardization". (Editorial: And what? You don't deign to implement things that haven't fully settled down to your satisfaction? You're not getting any brownie points with consumers or developers with that attitude, IE team. Remember the good ol' days when you *invented* and implemented the standards before anyone else? Remember how it was that risk-taking, can-do, forge-ahead attitude that won you the browser war? You won't win this one by waiting for the spec to become 100% final before you dare to touch it.) Then the good news: we've got rounded corners now. CSS3 selectors seem to be coming along swimmingly, passing 574/578 tests on css3.info.

But perhaps the best news?

"We’re changing IE to use the DirectX family of Windows APIs to enable many advances for web developers. The starting point is moving all graphics and text rendering from the CPU to the graphics card using Direct2D and DirectWrite. Graphics hardware acceleration means that rich, graphically intensive sites can render faster while using less CPU."

Preload Images the Right Way

2009-09-25T08:45:00.000-07:00

Sure, all of us cringe a little when we see that phrase. Even so, for things like overlays—of which modals and tooltips are members—preloading the background images is a reasonable thing to do. (I still don't fully endorse it, more on that later.)¹.

I tried this preload code:

(function(){
    var i, img, imageLoader = {
        imagesToLoad: [
            'resources/css/images/btn-default-sprite.png',
            'resources/css/images/bg-tooltip-left.png',
            'resources/css/images/bg-tooltip-right.png',
            'resources/css/images/bg-tooltip-image-left.png',
            'resources/css/images/bg-tooltip-image-right.png'
        ],
        loadedImages: []
    };
    for(i in imageLoader.imagesToLoad){
        img = new Image();
        img.src = imageLoader.imagesToLoad[i];
        imageLoader.loadedImages.push( img );
    }
})();

The images didn't seem to be loading any sooner though. So I put a tracer in the list - an image source reference that I knew didn't exist. Then I fired up the page and looked at fiddler. (I would've looked at firebug's net tab, but I was troubleshooting IE6 specifically.) No 404s. So then I tried this code:

(function(){
    var imagesToLoad = [
        'resources/css/images/btn-default-sprite.png',
        'resources/css/images/bg-tooltip-left.png',
        'resources/css/images/bg-tooltip-right.png',
        'resources/css/images/bg-tooltip-image-left.png',
        'resources/css/images/bg-tooltip-image-right.png'
    ];
    $('<div class="no-print" style="position:absolute;left:-9999px"/>')
        .appendTo('body')
        .html('<img src="'+imagesToLoad.join('"/><img src="')+'"/>');
})();

And I got my 404.

For the purposes of this discussion, preloading doesn't mean loading the images before the rest of the page, it means loading them before they're used.

Beyond Sprites - The New WAR

2009-08-24T04:13:00.000-07:00

I was just looking at a set of image files which are used to decorate custom form elements. I was analyzing how best to turn them into sprites¹. One particular set of 3 images caused me to dream up a 'new' web standard: a resource tar.

The set was a left end-cap, a right end-cap, and a repeatable middle section to accommodate a control of fixed height but variable width. The end caps were say, 20px wide, but the repeatable middle section image was - and only needed to be - 1px wide. Now, if I were to combine the 3 in a stacked sprite, the 1px wide middle section would have to be stretched to the 20px width to match the end-caps. True, widening the middle section would compress well in PNG or GIF format - as it was destined to become -- but these were just 3 of the 20 or so images. I could make the tiny sacrifices along the way and probably create 7 sprites out of the 20 images .. but that's still 7 http requests.

Maybe right now you're thinking what I was - there should be a way to send all 7 at once. And if there was a way to do *that* - then why muss about with all this sprite nonsense at all²? Just leave the images alone in their 20 separate files, but send them all in one jar. It would be the browser's responsibility to interpret a jar file that came from "http://site.com/path/to/jars/jarfile.jar" and had an internal directory structure of
/.
/img/
/img/1.gif
/img/2.gif
...
so that the images could be referenced in CSS as "http://site.com/path/to/jars/img/1.gif", "http://site.com/path/to/jars/img/2.gif"...

So what's with the title phrase "the new WAR"? Sending along the image assets for custom controls is just one application of this new "jar" or "war" file concept. Another is to send a packet that has the base images for a site: the logo and primary site decoration elements. Other people may conceive of other sets of resources that it make sense to combine and send along together in one packet.

¹ For an excellent description of sprites, including some fantastic examples, see The Mystery Of CSS Sprites: Techniques, Tools And Tutorials.

² Ok, the reason to still create the sprites is so that 'older' browsers - you know, the ones that don't have this as-yet unproposed feature - will still have 7 http requests instead of 20 (instead of the 1 they could have with this!)

Auto-close open overlays

2009-08-22T22:37:00.000-07:00

GLOBAL = {
    //...
    //...
    init:function(){
        //...
        //...
        //wire up language selection .. assuming it will be on [nearly] all pages.
        $('#glb-hdr-toolbar .heading').bind('click keypress',function(e){
            if(!e.keyCode || e.keyCode == 32 || e.keyCode == 13){ //32=space, 13=enter
                var p = this.parentNode;
                $(p).toggleClass('open')
                //keep track of open overlays so that we are able to intelligently auto-close-open-overlays
                GLOBAL.overlays.pushUnique(p);
            }
        });
        
        //wire up intelligent auto-close-open-overlays
        // part of the convention, or 'magic', is that a className of "open" is used to control whether the overlay is 'open'.
        $('body').bind('click keypress',function(e){
            if(!e.keyCode || e.keyCode == 32 || e.keyCode == 13){ //32=space, 13=enter
                var targ = e.target,
                    i = 0,
                    keepOpen,
                    list = GLOBAL.overlays.list;
                ///
                while(targ && ++i<10){
                    for(var j in list){
                        if(targ == list[j]){
                            keepOpen = list[j];
                        }
                    }
                    targ = targ.parentNode;
                }
                
                for(var j in list){
                    if(keepOpen != list[j]){
                        $(list[j]).removeClass('open'); //or, we could just .hide() it... or similar... 
                    }
                }
                
            }
        });
    },
    
    //keep track of open overlays so that we are able to intelligently auto-close-open-overlays
    overlays:{
        list:[],
        pushUnique:function(o){
            var l = GLOBAL.overlays.list;
            for(var i in l){
                if(l[i] == o) return;
            }
            l.push(o);
        }
    },
    //...
    //...
};

Offscreen, not invisible.

2009-08-12T10:34:00.000-07:00

Ran into this .. had a container that I was hiding with visibility:hidden, while loading markup into it.

Worked great except, of course, for all versions of IE. IE wouldn't show the badge until you moused over it. I tried all the usual IE slap-in-the-face-so-you-behave tricks to no avail (zoom, position, z-index, background, borders).

So I chose to hide the container by positioning it offscreen with left:-9999px. Bingo.

The particular content I was loading was a linkedin iframe badge - the "inline" version off their developer api page. I was loathe to switch over to the "popup" version, and am glad I dodged that bullet.

custom scrollbar

2009-07-08T10:23:00.001-07:00

jScrollPane .. I've heard bad things about it.

fleXscroll .. I've used it, it's nice, but it's not free.

jsScrolling .. I haven't used it, but it looks nice and it's free.

Improved email validation, plus multiple emails validation

2009-07-08T06:17:00.000-07:00

jQuery validation plugin .. was causing ff2 to choke. It also didn't have a multiple-email validator .. or a split-up phone validator -- although on that last one, I highly advise you push back - a phone # field should just be ONE INPUT.

/**/

The real way to disable text selection

2009-07-07T13:39:00.000-07:00

I was recently asked by UX to make the text of my fancy custom dropdown selects unselectable. A lot of silly scripts out there that disable text selection are application-unfriendly. They go beyond unselectable and make the element totally non-interactive. But I still want the dropdown to work when you click it. Solution = css for the "good" browsers, and javascript for internet explorer.

CSS

.unselectable{
    -moz-user-select: none;
    -webkit-user-select: none;
}

JS

if(document.attachEvent){
    function returnFalseFn(){
        return false;
    }
    jQuery('.unselectable').each(function(){
        this.attachEvent('onselectstart', returnFalseFn);
    });
}

Strange IE6 bug - show/hide select, hemorrhage option innerHTML

2009-06-24T12:47:00.000-07:00

We've all had to code up those ever-so-fun branching selects. I chose to implement it by showing or hiding (display:block/none) the container of the label+select corresponding to the appropriate branch. And IE6 decided to hemorrhage option innerHTML onto the page - for 1 of the 3 branches: the middle one. I solved it by adding "position:absolute" to the css for the container.

Some cross-browser findings

2009-06-12T09:47:00.000-07:00

ff2 mac: doesn't understand floating-point percentages (ie: 107.3% = 107%) - ran into this with font sizes.

ff3 thinks that if your parent is visibility:hidden, but you are visibility:visible, that you should display. (wrong.)

IE8 VHD from microsoft on vpc2007 is not the same as ie8 in the wild. Button element widths seem to be at least 1px wider in the wild.

A Little Elementool Love

2009-05-22T17:10:00.001-07:00

I started a google code project because I've been using elementool lately and felt that it needed some help.

Elementool firefox greasemonkey userscript

Current features

Adds row-highlight rollovers
Click anywhere to go to the only link in that row (that bug)

Suggestions welcome!

JASH - debug safari

2009-05-15T06:02:00.000-07:00

Need to debug javascript/css on .. safari? Sure, the thing is coming along in that respect, but its built-in tools and even firebug lite just don't cut it sometimes. Give JASH a go.

(Not sure I'd recommend JASH for ie debugging, since the script debugger / debugbar / ie developer toolbar are a little more convenient)

UPDATE: I've used JASH a little more, and found it useful a little less.

jQuery settles down with dojo, gains weight

2009-05-15T05:50:00.000-07:00

Sure, this is months-old news, but still. I remember back in the good ol' days when jQuery was a young, athletic rising star. Then it met dojo and settled down.. and gained weight. Look under the jQuery hood and you'll see .. two libraries blast-welded together, complete with their own separate prenups, er, copyright blocks: jQuery and Sizzle, from the dojo foundation.

Disabled input fires no events

2009-05-13T15:56:00.000-07:00

Evidently, a dom node "<input disabled="disabled"/>" will not fire any events, even if you do, say, something as direct as this: "<input disabled="disabled" onclick="alert('clicked it.');"/>"

IE JSON silent fail - size limit

2009-05-12T06:21:00.000-07:00

Trying to get a ton (600K) of JSON via XHR into IE.. silently failing. Oh, it fetches the data, it just can't parse the data, either through jQuery's built-in JSON parsing or even by the ol' eval.

Trimming the data down to 60K, there were no problems. The data is a repeating set of dummy objects, so I'm almost certain that I didn't just happen to trim out some problem section of the data. I'm convinced that IE is choking on the data simply because it is more than it can handle. My guess is that JScript doesn't throw the usual "your script is taking too long to execute" warning when executing a single "eval".

I 'solved' the problem by ditching XHR and using dynamic script tags:

data.js

namespace.onData({theGigantic:json............});

ie6 and PNGs

2009-05-02T20:45:00.000-07:00

Thanks to a tip from Gena Wilson:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

The cool part: it doesn't use AlphaImageLoader, it uses VML (Microsoft's idea of svg).

How to Avoid CSS Hacks

2009-05-02T19:40:00.001-07:00

I've decided to use a very tiny bit of javascript to free me of css hacks. I already use js to add a class "jsEnabled" to the <html> element so that I can style things differently if I know that javascript is going to swoop in and alter them later (tabs, carousels, etc). Taking this a step further, I put the browser name + version number in the html element classname. Then in the css, you can write ".ie7 .my-div {float:none;}" Sure, we're not supposed to rely on javascript. But we usually do. And this is just for minor tweaks anyway. The site will still *work* with js turned off, you'd just lose that tiny css tweak you made that relies on it.

ie6 + position:fixed nugget

2009-04-23T08:09:00.000-07:00

Anyone who hates css expressions .. feel free to leave now, and end up doing the same thing in a more convoluted manner in 'regular' javascript. If it eases your conscience any -- I know it does mine -- this css is sourced in a conditional comment just for ie6

#my-fixed-position-element{
top:expression(Math.max(document.documentElement.scrollTop + (document.getElementsByTagName('html')[0].offsetHeight / 2), 20) + 'px');
}

Don't Leave Keyboarders in the Cold

2009-04-22T09:14:00.000-07:00

A handy jQuery plugin to make it easier to play nice with the keyboard-centric folks and improve accessibility

This code assumes the definition of a 'keys' object that identifies keycodes by more readable names, such as keys = {space:32, enter:13};

    // make a new plugin that handles click + keypress,
    // assuming that hitting space or enter counts as a 'click'.
    $.fn.klik = function(f){
        return this.bind('click keypress', function(e){
            if(!e.keyCode || e.keyCode == keys.space || e.keyCode == keys.enter){
                return f.call(this, e);
            }
        });
    };

Close on MouseOut, Except .. Related Target

2009-04-16T09:38:00.000-07:00

For a mouseout event, the event target is the thing you're leaving - mousing out of - the event relatedTarget is the thing you're leaving to, or entering.

        jQuery('#something').mouseout(function(e){
            /*
                don't close the subnav if we've moused out -> onto an autocomplete resultset.
            */
            var targ = e.relatedTarget, i = 0;
            //we're only checking the most recent 5 parents (ancestors).
            while(targ && ++i<5){
                //don't close the subnav if we're mousing over an autocomplete list.
                if(targ.className && targ.className.indexOf('ac_results')>-1){
                    return;
                }
                targ = targ.parentNode;
            }
            /**/
           
            //ok, close me..
            $(this).hide();
        });

YUI-Like Javascript Namespaces

2009-04-16T07:51:00.001-07:00

I really like the idea of Javascript namespaces for projects that have a lot of javascript (or even a little javascript on a lot of pages). YUI has a really good implementation, so I took a look at how they did theirs and ripped out the namespace creation part so I could use it on any project I wanted without having to include the YUI library.

The biggest benefit to using namespaces is avoidance of collisions. When using namespaces, you can be sure that no 3rd-party library or other coder is overwriting your functions or properties. Also, you can also use a javascript compresser / combiner to combine a lot of JS files into 1 JS file in order to reduce the amount of requests you make to the server. If you use namespaces, you can be sure that when you put all of the JS files together, you won't have any collisions.

To use the code, first put the following code in a globl js file:

if (typeof YourSite == "undefined") {
   var YourSite = {};
}

YourSite.namespace = function() {
    var a = arguments, o = null, i, j, d;
    for (i = 0; i < a.length; i = i + 1) {
        d = a[i].split(".");
        o = window;
        for (j = 0; j < d.length; j = j + 1) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

Then for each page or section of your site you can create a namespace:

  YourSite.namespace("YourSite.Section1");

Then when creating functions or properties, you can write:

 YourSite.Section1.myProperty = "blah";

 YourSite.Section1.myFunction = function()
 {
     alert(YourSite.Section1.myProperty);
 }

 YourSite.Section1.myFunction();

What's the body's height?

2009-04-15T10:16:00.000-07:00

Written jQuery-style, but only mildly dependent.

I needed/wanted this code because I was making a modal overlay and wanted the modality to exactly cover the body. The 'modality' is what I've termed the click-proof smoked-glass panel (div).

Note: this is not intended to give you the viewport diemensions, but rather the entire [scrollable] document dimensions.

    // var docSize is declared elsewhere
    $(window).resize(function(){
        var h = $('body')[0];
        docSize = {
            width: h.scrollWidth
            ,height: Math.max(
                $('html')[0].scrollHeight, //webkit
                h.scrollHeight, //ff
                document.documentElement.offsetHeight //ie
            )
        };
    });

'Dynamic' Image Headers

2009-03-18T07:48:00.000-07:00

Sure, sifr is probably the way to go. Unless it's not. Or the client says no.

Prerequisite: A text file listing all the headers to be made.

So, first off, I tried ImageMagick. It worked like a charm for OPAQUE gifs. Then stirred in some fancy masking stuff to clear out all white pixels. Now I had very nice 22pt headers. But the small headers looked miserable. 13pt looked just fine, but 12pt looked terrible. And it had to be 12pt. I tried smoothing commands to no avail.

So I decided to create one tall image with all the headers by just pasting the text file into fireworks and saving as png8 with transparency. That way, they *look* perfect. And I wrote a processing script, or "sketch" to create all the headers from the master headerlist-image.

Processing Code Snippet

String[] headlineStrings = {
"HOME",
"ABOUT US",
"ETCETERA",
"THESE ARE NOT THE HEADERS I WAS GIVEN",
"THE LIST WAS 168 HEADERS"
};

int LARGE = 1;
int SMALL = 2;
int usingSize = LARGE;
String mySize = usingSize == LARGE ? "large" : "small";
String prefix = usingSize == LARGE ? "lrg" : "sm";
int myWidth = usingSize == LARGE ? 391 : 213;
int myHeight = usingSize == LARGE ? 16 : 9;
int myOffsetHeight = usingSize == LARGE ? 22 : 12;

PGraphics pg = createGraphics(myWidth, myHeight, JAVA2D);
PImage a = loadImage("c:\\documents and settings\\dennish\\desktop\\columbia headers\\headers-" + mySize + ".png");
//PFont font = loadFont("DispatchCond-Bold-48.vlw");
//PFont font = createFont("DispatchCond-Bold", 12, true);

//String[] fontList = PFont.list();
//println(fontList);

//size(440, 900);
//fill(0);
smooth();

for(int i = 0; i < headlineStrings.length; i++){
    //textFont(font, 12);
    //text(headlineStrings[i], 0, i*12);
    pg.beginDraw();
    pg.background(0,0);
    pg.image(a, 0, 0 - (i * myOffsetHeight)); //12px because the font-size is 12px, and therefore each line of text will occupy 12px vertically.
    pg.endDraw();
    pg.save("c:\\dev\\headlines\\20090317\\hdr-" + prefix + "-" + headlineStrings[i] + ".png");
    pg.dispose();
}

One last problem: these have to be GIFs, and the only way the technique would work so far is by making them PNGs.

So .. back into fireworks for a batch export. Final gotchya: have to click "edit" next to the filetype export selection dropdown, and make sure the GIF has (alpha) transparency enabled.

LinkMania

2009-03-11T19:44:00.000-07:00

I plan to post more links here over time. Linkrot commence!

Web Design Ledger:
- tooltips
Script And Style
XtraNormal "if you can type, you can make a movie" (maybe useful for storyboarding [real] video shoots?)

Have I just become a tool?

Can you detect font availability?

2009-03-11T19:42:00.000-07:00

Speaking of Fonts...

jquery-fontavailable

cufón - fonts for the people

2009-03-11T19:40:00.000-07:00

cufón is a newish sifr [clone].

Just posting here for my ~ahem~, our future reference.

http://cufon.shoqolate.com/

JAWR = awesome, but please make it work with sitemesh

2009-03-11T19:35:00.001-07:00

Any astute reader out there.. use JAWR on your J2EE projects. It's fabulous. It just doesn't seem to play well with sitemesh (and I put the blame on sitemesh).

JAWR allows for properties-file-driven bundling + auto-minification (via YUI-Compressor [or your favorite, maybe]) of CSS and JS. It also supports a debug mode, which you can switch on with one variable change.

Know of a great .NET, PHP, or Python equivalent of JAWR? Please comment!

H1 > IMG or CSS-Replacement?

2009-03-11T19:28:00.000-07:00

It always depends on the circumstances, but I'm generally leaning slightly in favor of using img tags in headers instead of the fuss of css image replacement.

And please don't bring up sifr (siffer) - I like, you like it, or maybe neither of us do... but sometimes it just isn't a good fit.

+ Css image replacement: a touch more accessible
+ IMG tag in the header: faster to code, easier to maintain, unless you've already built/bolted on an automated solution for both the images and the css.

SEO values for either are open to wild speculation, but the general opinion is a tad in favor of the img tag setup. Add to it the dev. time (time=$, no not javascript library, money) you save, and that explains my leaning. Note - leaning - not zealotry or dogmatism, just leaning.

Chrome's view source isn't all there

2009-01-21T07:09:00.000-08:00

Left: Chrome, Right: Firefox.

UPDATE: view-source is just making a new request for the page, which does not reflect any posted data--ie. a new blank, initial form.

Chrome's view-source omitted some text.

I think it has to do with the "pretty-formatting" that chrome applies to the view source. It was just a sample spring+struts+tiles application I was playing with. It was text that was a direct child of the body tag - not something that I'd ever code that way, but surprising that it didn't show up in view source in chrome.

Quick! way to get repeated characters

2008-12-24T07:46:00.000-08:00

want 8 spaces?

(new Array(8)).join(' ')

it's quick not only as in fewer keystrokes/less code, but is also blazingly fast to execute compared to a for-loop implementation.

Fireworks CS4 filesize export bug

2008-12-14T20:37:00.000-08:00

Fireworks' export wizard seems to be plagued by filesize bugs. I thought they squashed them in CS3, but CS4 seems to have re-introduced or made a new one: it reports an exported file's size as Kilobytes = bytes/1000 instead of bytes/1024.

I just exported a file, noting that FW tells me it will be 754K, when in fact, it is 737K (754,807 bytes).

IE6 + AlphaImageLoader + hover

2008-10-21T13:42:00.000-07:00

the 'filter' nomenclature is unwieldy, so these lines are going to be long, you'll need to scroll. The gist is - ORDER MATTERS! - and the order is opposite from what you'd expect.

/* order matters! */
.carousel a:hover .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_thumb_hover.png", sizingMethod="crop");}
.carousel .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_thumb_normal.png", sizingMethod="crop");}
a:hover .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_hover.png", sizingMethod="crop");}
.playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_normal.png", sizingMethod="crop");}

Asynchronously loading javascript

2008-10-07T11:52:00.000-07:00

Asynchronous allows the page to keep loading--it's non-blocking--which can be nice. But also has gotchyas. With traditional, sequential, synchronously loaded javascript, you can be sure that something is defined if you've defined it in a preceeding script block. Not so with asynch. loaded js.

Safari 2

2008-10-07T11:09:00.001-07:00

evidently, form.submit() bypasses any onsubmit handler that may be in play, whether it was added via form.onsubmit = function(){} or by using addEventListener.

Events

2008-09-24T12:49:00.000-07:00


//will break if element.on[event] is modified directly elsewhere
//will break if the markup itself contains inline event listener functions ( <element onevent="function body"> )
//is incompatible with prototype library (Prototype library should not be used for ANY project.)

// using EVENT namespace ... could be different if needed, could possibly be Element.prototype ... could possibly be a jQuery extension/plugin (or incorporated into jQuery core?)

EVENT = {};

EVENT.elements = [];

EVENT.addListener = function(el, type, f, prepend){
    
    if(!el.eventListenerList){
        el.eventListenerList = [];
    }
    
    if(!el.eventListenerList[type]){
        el.eventListenerList[type] = [];
    }
    
    if(prepend){
        el.eventListenerList[type].splice(0,0,f);
    } else {
        el.eventListenerList[type].push(f);
    }
    
    if(!el['on'+type]){
        el['on'+type] = function(e){
            for(var i in el.eventListenerList[type]){
                el.eventListenerList[type][i](e);
            }
        };
    }
};

EVENT.removeListener = function(el, f){
    
    if(!el.eventListenerList){
        return;
    }
    
    //note: "var i in obj" is incompatible with icky prototype library
    var list = el.eventListenerList;
    for(var i in list){
        for(var j in list[i]){
            if( list[i][j] == f ){
                //remove it.
                el.eventListenerList[i].splice(j,1);
                return;
            }
        }
    }
    
};

EVENT.hasListener = function(el, f){

    if(!el.eventListenerList){
        return false;
    }
    
    //note: "var i in obj" is incompatible with icky prototype library
    var list = el.eventListenerList;
    for(var i in list){
        for(var j in list[i]){
            if( list[i][j] == f ){
                return true;
            }
        }
    }
    
    return false;
};

svg boundingbox of rotated ellipse

2008-09-10T11:05:00.000-07:00

Found out last night that safari has a bug in its svg implementation (ok, probably lost most of you right there “who cares about svg?” … but there’s a possibility that this could be useful for flash/actionscript too)

Turns out that if you rotate an ellipse, the getBBox method returns a rather generous bounding box, because it’s using an implicit rectangle wrapped around the ellipse to get the bounding box.

You can see below what the browser bug is and what the correct box is. The red—buggy—implementation is created by the browser basing its calculations on the blue (implicit) rectangle that surrounds the ellipse.

The correct result is the box in green.

I created a javascript workaround for this bug.

It uses calculus. This is the first time I’ve used calculus in programming something that didn’t exist solely to demonstrate calculus.

I first tried to find a solution posted somewhere on the net, but only found a post where someone says it’s solved in the latest version, then reverses himself and says, ‘oh, no, actually it’s firefox that fixed its version of the same bug.’

If someone happens to find the bug # or a posted solution, that’d be cool.


        // Trig functions (Math shortcut aliases)
        var sin = Math.sin,
            cos = Math.cos,
            tan = Math.tan,
            cot = function(a){return 1/tan(a);},
            sqrt= Math.sqrt,
            acos= Math.acos,
        
        
        // our instance of an ellipse .. will become something more like this._shape (if this.type == ELLIPSE)
            ellipse = $('e').getElementsByTagName('ellipse')[0],
        
        // the properties of our instance of an ellipse
            a = ellipse.getAttribute('rx')*1, //x-radius (major, minor, who knows)
            b = ellipse.getAttribute('ry')*1, //y-radius (major, minor, who cares)
            cx = ellipse.getAttribute('cx')*1, //center's x-coord .. not currently used (assume the ellipse is centered at the origin)
            cy = ellipse.getAttribute('cy')*1, //center's y-coord .. not currently used (assume the ellipse is centered at the origin)
            matrix = ellipse.getCTM(), //the transform matrix
            angle = acos( matrix.a ),
        
        // the x coordinates where the ROTATED xmax and ymax occur on the ellipse BEFORE ROTATION.
        // these "magical" formulas represent the recombined derivative of the ellipse function
            x1 = (-1*(a*a)*tan(angle)) / sqrt(a*a*tan(angle)*tan(angle) + (b*b)),
            x2 = (   (a*a)*cot(angle)) / sqrt(a*a*cot(angle)*cot(angle) + (b*b)),
        
        // the actual xmax and ymax, reflecting the above, rotated into position (AFTER ROTATION).
            xmax = (cos(angle) * x2) + (sin(angle) * f(x2)),
                // (using negative-angle because positive screen y-axis is the same as 'normal maths' negative y-axis)
            ymax = (sin(-angle) * x1) + (cos(-angle) * f(x1));
        //var
        
        // the f(x) that defines the ellipse (in general form)
        function f(x){
            return b * Math.sqrt(1-((x*x)/(a*a)));
        };
        
        //~ console.log(ellipse.getAttribute('transform'));
        //~ log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
        
        // browser's idea of where the bbox is... (red box)
        var box = ellipse.parentNode.getBBox();
        re = $("re");
        re.setAttribute("x", box.x);
        re.setAttribute("y", box.y);
        re.setAttribute("width", box.width);
        re.setAttribute("height", box.height);
        re.setAttribute("stroke", "red");
        
        // my idea of where the bbox is... (green box)
        re = $("re2");
        re.setAttribute("x", -Math.abs(xmax));
        re.setAttribute("y", -Math.abs(ymax));
        re.setAttribute("width", Math.abs(xmax)*2);
        re.setAttribute("height", Math.abs(ymax)*2);
        re.setAttribute("stroke","#090");

debug

2008-06-09T08:03:00.000-07:00

FF: Firebug : https://addons.mozilla.org/en-US/firefox/addon/1843
IE: DebugBar : http://www.debugbar.com/
SF: Developer: http://developer.apple.com/internet/safari/faq.html#anchor14

Debug in production?! .. when you have to .. you can target a strange userAgent string .. such as "Quality Assurance Browser" .. that you set yourself with some tool that allows you to set your userAgent.

YUI Compressor wishlist

2008-06-03T09:13:00.001-07:00

Ok, so my list is currently composed of only one item: Flag for always remove. YUI Compressor already has a flag to *never* remove /** comments **/ that probably contain copyright information. I'd like it if YUI Compressor had a flag to *always* remove a block of code. Use case: remove debug statements. Perhaps it could be implemented as comments that demarcate the debug block, such as:

/** debug **/
console.dir( myObj );
/**/

and a corresponding YUI Compressor command-line argument "-rmdebug"

$ java -jar yuicompressor-2.5.2.jar -rmdebug script.js -o script-min.js

Update: Ok, so.. after I posted this, I searched the yuicompressor feature request list, and natch, somebody requested this - at least the debug-one-liner version: treat as debug any line that is prefixed with ";;". YUI Compressor Feature Request: remove debug code.

;; console.dir( myObj ); //double-semicolon prefix indicates this line is for debugging

Working with JSON

2008-06-02T11:32:00.000-07:00

Often, on a callback that receives json, you may be tempted to do something such as:

if (data.image.length) {
    // Group of images
    for (var i = 0; i < data.image.length; i++) {
        debug("Image " + data.image[i].imageUrl + ": " + data.image[i].statusText);
    }
}
else {
    // Just a single image
    debug("Image " + data.image.imageUrl + ": " + data.image.statusText);
}

but it can be expressed more succinctly as:

if (!data.image.length) data.image = [data.image];
// Group of images
for (var i = 0; i < data.image.length; i++) {
    debug("Image " + data.image[i].imageUrl + ": " + data.image[i].statusText);
}

Super Simple XML-String to JSON

2008-05-27T13:43:00.000-07:00

Yes, there are other libraries for this. Yes, they are more complete. So why this? I didn't need all the features of a complete xml->json map, I just wanted something to handle my nice, super simple use-case. And I hate wasted bandwidth. This library is 620 BYTES when YUI-compressed.

This is for a specific task. I trust the xml source. (So nobody yell "hey! - you're using eval() - you're eveel!").

Prerequisites:

you have a string of well-formed xml.
you don't have & don't care about node attributes, namespaces or CDATA (ie. your XML is 'Super Simple').

Good Ideas:

Don't use a library that will dirty the object prototype.
(ie. mess up for-loops that look like this: for(var prop in obj){..})
Strip comments and whitespace, use safe variable-name substitution—use YUI Compressor.

Confessions:

It uses eval().
It uses regular-expressions (regexes).
It could probably stand to be optimized a bit.

The Code:

var xmlString = "<root><a/><b>data1</b><b>data2</b></root>";
function xmlString2json (xmlString) {
    return xmlString.replace(
            //expand empty tags
            /\<([^>]*)\/\>/g, "<$1></$1>"
        ).replace(
            //convert closing tags to closing braces
            /\<\/([^>]*)\>/g,"},"
        ).replace(
            //convert opening tags to "{NODENAME:["
            //notice that the array literal is opened, but not closed.
            /\<([^>]*)\>/g,"{'$1':[" 
        ).replace(
            //remove extraneous commas
            /,}/g,"]}"
        ).replace(
            //close array literal, begin adding needed singlequotes
            /:([^{}]*?)}/g,":'$1]'}"
        ).replace(
            //adjust singlequotes, bring inside array literal notation (left side)
            /'\[/g,"['"
        ).replace(
            //adjust singlequotes, bring inside array literal notation (right side)
            /\]'/g,"']"
        ).replace(
            //remove empty strings (which are from empty tags)
            /\[''\]/g,"[]"
        ).replace(
            //remove final, ending extraneous comma
            /},$/, '}'
    );
}

var json = xmlString2json(xmlString);
// {'root':[{'a':[]},{'b':['data1']},{'b':['data2']}]}

function cleanTree(r, p){
    if(r.length == 1 && typeof r[0] == "string"){
        //might want to trim leading and trailing whitespace from r[0] first
        // could be expressed as a series of ternary operations:
        // return r[0]=="true"?true:r[0]=="false"?false:r[0].search(/^[0-9]+$/)==0?1*r[0]:r[0]
        // expressed this way for readability:
        if(r[0] == "true"){
            return true;
        }
        if(r[0] == "false"){
            return false;
        }
        if(r[0].search(/^[0-9]+$/) == 0){
            return 1*r[0];
        }
        return r[0];
    }
    p = p || {};
    for( i in r ){
        var nn = '';
        for( name in r[i] ){
            nn = name;
        }
        var subnode = r[i][nn];
        if(p[nn]){
            if(typeof p[nn] == "object" && typeof p[nn].length == "number"){
                p[nn].push( cleanTree(subnode) );
            } else {
                p[nn] = [ p[nn], cleanTree(subnode) ];
            }
        } else {
            p[nn] = cleanTree(subnode);
        }
    }
    return p;
}

var jso = eval('('+json+')');
var cleaned = cleanTree(jso.testImages);
console.log(cleaned);

At this point, you might be wondering, "Why all those [extra] arrays?" My idea was to approximate the concept of the childNodes array. Really, you could just take the initial JSON and run with it, keeping in mind that it is structured with 'childNodes' arrays. But in case you'd rather have it 'cleaned' up .. I made the recursive cleanTree function to do just that.

"What if I have actual xml, not just a string representation thereof?" you may question.

Give this a shot:

    var xmlString = (new XMLSerializer()).serializeToString( myXMLDoc );

Someone else's related post (reminder to self to see if his xml2json will work in actionscript / how readily adaptable it is): converting xml to json.

consume that data

2008-04-05T21:21:00.000-07:00

Have an array that you need to iterate over? Dying to use javascript 1.8 iterators and generators? (why?!) Anyhow... use this instead.. IF IF IF ... you don't mind CONSUMING your data :-) (this = shift)

var s=['prototype.yc','lightbox','dsn'];
while(s.length) document.write('<scr'+'ipt src="/js/'+s.shift()+'.js"></scr'+'ipt>');

directory structure = sitenav = breadcrumbs = CSS

2008-04-04T10:06:00.000-07:00

Ok? Example:

/
home
home
home

/mainsection
mainsection
home > mainsection
<html class="mainsection">

/mainsection/subsection
mainsection > subsection
home > mainsection > subsection
<html class="mainsection"><body class="subsection">

/mainsection/subsection/leaf
mainsection > subsection > leaf
home > mainsection > subsection > leaf
<html class="mainsection"><body class="subsection"><div id="siteContainer" class="leaf">

dom nodes + for-loops THAT WORK

2008-03-31T13:52:00.000-07:00

Imagine you have a collection of DOM nodes (html element nodes, whatever you want to call them) stored in the variable ‘elements’, and that var len = elements.length. The following for-loop will not work. Every element will have an onclick event handler function that calls clicked(len) – not the respective clicked(i) WRONG

    for( var i = 0; i < len; i++){
        
        var el = elements[i];
        el.addListener('click', function(){clicked(i);}, false);
        
    }

RIGHT

    (function loop( I ){
        if (I == len) return;
        var i = I;
        
        
        var el = elements[i];
        el.addListener('click', function(){clicked(i);}, false);
        
        
        loop(++I);
    })(0);

Note: addListener is not any browser’s implementation. It’s just my way of saying addEventListener (or, for IE, attachEvent). Also, for brevity, the function ‘clicked’ is not here defined. Yes, this is documented in a couple places around the web. But those places are not obvious or easily searchable for everyone.

If

2008-02-26T10:15:00.000-08:00

Have you ever seen code like this?

if(condition){
   stuff
}

This won't work for all cases, but I often enjoy writing it like this:

if(!condition) return;
stuff

Note: if you are NOT minifying your code, the bottom method is probably leaner, but if you ARE minifying, stick with the top method.

Verbosity

2008-02-26T10:01:00.000-08:00

I ran across some code like this recently:

function SomeClass(args){
...
}
SomeClass.prototype.firstMethod = function(args){ ... };
SomeClass.prototype.secondMethod = function(args){ ... };
SomeClass.prototype.thirdMethod = function(args){ ... };
...
...

Maybe, like me, you cringe when you see repetitious code. Maybe not. If not, return. So I got to thinking of a way to streamline this class.

function SomeClass(args){};
SomeClass.prototype = new (function(args){
   var me = this;
   me.firstMethod = function(args){ ... };
   me.secondMethod = function(args){ ... };
   me.thirdMethod = function(args){ ... };
   ...
})();

/* to test it, we'll create an instance and check if it has it's own [copy of] firstMethod */

var myClass = new SomeClass(args);
alert(myClass.hasOwnProperty('firstMethod'));
/* false, it does not have a local copy of the method */