Posts tagged ‘javascript’

FeedBurner Lagging My Site! Can’t Fix Until FeedBurner Gets Smart!

Well, today I noticed that each article takes about 10 seconds longer to load because of a little stat-tracking widget I installed from FeedBurner. If this happens a second time, or if this continues for longer than an hour, I’m removing it. I already track my stats through Analytics anyway.

Which, by the way, is an awesome way to track your stats. I’m only using FeedBurner’s because it’s convenient. But if it’s going to jack up my site, screw that!

In my opinion, a JavaScript tracker should be designed so that it doesn’t screw up load times! Why isn’t it load balanced? Why is FeedBurner.com loading just fine? Why can’t they give you an “advanced” piece of code to paste that uses conditional JavaScript loading. From the article:

You may sometimes find yourself with big JavaScript libraries to include in your documents. … add them dynamically via the DOM … This … would … load the file … when DOM is available in the browser, older browsers would not load the file.

In other words, load the JavaScript after the rest of the page has loaded rather than causing the entire site to lag! Like I said, this should be an “advanced” snippet people should be allowed to do.

Thus, the current snippet:

<script src=”http://feeds.FeedBurner.com/~s/MichiKnows?i=<?php the_permalink() ?>” type=”text/javascript” charset=”utf-8″></script>

Becomes:

<script type=”text/javascript” charset=”utf-8″>
window.onload=function(){
    if(!document.getElementById || !document.createElement){return;}
    var newjs=document.createElement(‘script’);
    newjs.type=’text/javascript’;
    newjs.src=’http://feeds.feedburner.com/~s/MichiKnows?i=<?php the_permalink() ?>’;
    document.getElementsByTagName(‘head’)[0].appendChild(newjs);
}
</script>

Of course, this won’t work on FeedBurner for two reasons:

  1. If they are using onload functions, those won’t fire.
  2. FeedBurner uses document.write, which must be called before the document finishes rendering (during load). 

They use 100% inline Javascript!

Unfortunately, because they are written as in-line scripts which use document.write() statements, there is no easy way to defer their output after onload has fired or request them interactively in a way that won’t be likely to wipe out and completely rewrite the current document (unless you load them into individual <iframe> documents, which is the only guaranteed, though awkward, workaround I can think of at the moment).

So while my solution almost works, it doesn’t matter since they use a bad solution which breaks most workarounds!

When they fix their stupid script or if you know of a workaround, let me know!

Sheesh.

Google Loco – A Lesson on Event Handling

In the GoogleTV post, the video mentions (briefly) a Google service called Loco. I have decided, for fun, to make this service. Introducing Google Loco. I don’t make a dime from it and I redirect all search traffic to Google.com. Just a funny joke site to show your friends. ;)

Google Loco has some pretty nifty JavaScript that I’d like to share. The main interest is in the script that:

  • In Firefox: flips around the text you type in
  • In all browsers: randomizes the colors

I will cover the text flipping in another post. This one will focus on event handling.

Event Handling Mini-Lesson

What the heck is event handling anyway? Well, that’s the “onclick” or “onmouseover” stuff you have probably encountered. It’s a term for telling the computer to handle and event when something happens. Thus,

onclick=”SOMETHING”

Is read as “do SOMETHING when a CLICK event happens”. Event handling is an advanced topic in JavaScript. So how do we do it in Google Loco?

First of all, I added an event handler that fires when the page loads.  You see, in the old days, people used stuff like this:

<body onload=”initializeOnLoad()”>

But we’re in 2007 now. Things are done differently. The above command now can be redone using event handlers in the following syntax (see the actual site for the advanced, error proof syntax):

window.addEventListener(‘load’, initializeOnLoad, false) // syntax different for IE, see .js file

I know the second one looks more confusing, but it’s better. Why? Because you aren’t mixing business logic with your presentation layer (JavaScript separate from HTML). Secondly, this line can be put anywhere on the page, making it more portable since it can reside inside a JS file.

You’ll notice in the event handler example, initializeOnLoad doesn’t have parentheses after it. This is because, in short, JavaScript treats functions like variables.

When the parentheses are removed it’s like saying “don’t execute me, I’m just the messenger.” My, that was a very clever pun…

Or in other words,  initializeOnLoad() executes whatever is inside that function. InitializeOnLoad (no parentheses) refers to the contents, but doesn’t actually execute anything. This allows you to copy it around, modify it, reassign it, or whatever else you might do with a regular variable. In our case, we assigned it to the event handler for when the page loads.

The page itself uses a “loco” variable. You’ll notice there’s stuff like:

addEvent(document.getElementById(‘typed-box’), ‘keydown’, loco.locoEffects);

This, for example, would grab the element “typed-box”, and cause loco.locoEffect to fire whenever a key is pressed on it. If I had used “window” instead of “document.getElementById(‘typed-box’)”, the event would fire when a key is hit anywhere on the page.

Anyway, that loco.locoEffects thing… That’s a class. Well, a faked class. It’s really a variable called loco with another variable called locoEffects inside it. This inner variable just so happens to be a function.  Why did I do this? Oh, just to keep the global namespace uncluttered (as in, so I don’t have to worry about overwriting a native JavaScript function).

Make Text Come Out Backwards!

This is a very little known secret, but there is a special character that causes browsers to reverse the text it encounters. This feature exists so that right-to-left languages can be displayed, but it can be applied to languages like English!. This character is displayed by typing &#8238; at the beginning of a sentence block. Here is a sample:

Source:

&#8238;Wow, is it all backwards?

Comes out as:

‮Wow, is it all backwards?

Pretty neat huh? To see this in action, visit Google Loco with Firefox. Google Loco will use JavaScript to add this special character as the first character of the search term box. It is mostly invisible in regular browsers, although it can cause a strange square or space to appear at times.

Cookies and Frames

Sometimes, I just don’t have the time to blog even if I have something interesting to write about. I also try to only update with relevant posts. FYI.

I spent last week fixing up some JavaScript on a site that has frames. While I have plenty of past experience that tells me using frames is bad, this one took the cake. Here’s why.

  1. Everything is dandy until you have to have a frame access the other’s variables. This did not go smoothly in IE7. I was very flustered with that since it was “supposed” to work.
  2. JavaScript functions need to be placed globally. This was a problem when I had two frames work closely together until one frame got logged out by the system and popped to the login screen (complete with missing function declarations)!!

The moral of that story is not to use frames!

Also, I got to play with cookie manipulation in JavaScript. This was new to me. Which, by the way, was the eventual solution I used to have my two frames pass data back and forth. Anyway, cookies are WEIRD in JavaScript.

They are accessed through the “property” document.cookie. However, unlike regular properties, when you assign a cookie, you use a different format  than when you output it. In other words, assignment looks like:

document.cookie = “some cookie string that’s gibberish I don’t want to explain now”

Whereas reading the cookie (document.cookie) returns the data values for *all cookies* for the current domain. Oh, and in one giant semi-colon delimited string. Annoying.

My advice on using cookies in JavaScript? Write a class that manages them first.

What NOT to Name Your Form Fields

This one is a programming post. Did you know you should never, ever, EVER name a field in your form “submit”. If you recall my previous posts, you’d recall that JavaScript can treat any old regular variable as a function. If you stupidly name your submit button “submit,” which I’ve seen done all the time, you overwrite your form’s ability to call the submit method!!!

Don’t do this:

<input type=”button” name=”submit” value=”push me” />

Or…

<input type=”text” name=”submit” value=”" />

Etc. It all messes up your JavaScript!

In other words, the following otherwise working function calls completely break (and you get cryptic errors about undefined functions or incorrect parameter counts):

document.form['form-name'].submit();
this.form.submit();
document.getElementById(‘form-id’).submit();

They all fail because “submit” now refers to your form field that you created, which clearly isn’t the function you thought you were calling!

Detecting Undefined Variables in JavaScript

This pops up every so often so I thought I’d dedicate a post to it. JavaScript has no “isset” function. Instead, your best bet is to use the following:

if((typeof theVariable) == ‘undefined’)

JavaScript Tip: Writing Dynamic Content

What is the difference between the write function and the innerHTML property? There is a huge difference. What happens to any JavaScript you import using these methods? It’s more complicated than you think.

The write() function (as in, document.write), writes text to the “document.” When an HTML page loads, what’s actually happening is a “document” is opened, some content is written to it, and then it is closed. This “document” is the main HTML window that you end up seeing. When a document is opened and written to, everything inside it is cleared out. Let me restate that: if you try to use document.write() after the HTML page has finished loading, you will destroy everything on the page, including the JavaScript tags, all the HTML, and pretty much everything you would see if you hit “view source.” Granted, if you did look at the source, you’d still see the original HTML that was loaded since the “view source” command shows you the originally loaded content, not the result of any JavaScript changes.

Continue reading ‘JavaScript Tip: Writing Dynamic Content’ »

Designing without Javascript

This article will cover the importance of keeping content, design, and coding elements seperate. I will then explain how you can use advanced techniques to apply Javascript to an element (such as a link) without ever changing the HTML.

Before I begin, I would like to say: I hate CSS. It’s a necessary evil, but I really hate focusing my time and energy on design issues. You see, in an ideal world, designers would design, content providers would provide content, and programmers (that’s me!) would glue it together with backend stuff.

However, this was not how the world spun, my friends. That is, until today.

Continue reading ‘Designing without Javascript’ »