NewMediaFun

If you haven’t heard about HTML5 Boilerplate yet, I recommend you watch this video and then try it out for yourself.

Go to HTML5 Boilerplate

Throughout the day I am a heavy user of my Chrome browser (version 5). I open, search, flip, close, rotate my tabs on a regular basis and I notice after doing this with the browser for a couple of days (without closing the browser) webpages start to slow done and stop working or even crashing. This is noticeable with webpages that utilize a lot of AJAX such Gmail, Google Calendar or Google Reader.

The only solution I find that works when webpages begin to crash is to close down the browser and re-start it. It seems to be a pain and something Google needs to address.

One theory I have is Chrome has an interesting feature that allows you to re-open a recently closed tab. Once re-opened all the history for that tab remains so you can go back or forth if necessary.

Could this collection of history be adding up and causing the browser to slow down and eventually crash?

Has anyone else experienced this with their Chrome browser?

I have been creating a form that I want to validate. However if the user clicks on the enter key it submits the form before it is finished. I found a simple jQuery script that does exactly what I need:

I modified this from Code Snippets.

A while ago I discovered that Google offered a tool on Google Code that lets you compress/optimize the code to almost half the size of the original script.

I had always noticed that a lot of libraries such as jQuery, Moo Tools and various plugins have regular and optimized versions. It wasn’t clear to me how this compression was achieved. Then I stumbled upon Closure Tools by Google.

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what’s left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source.

I was able to successfully use the complier to apply simple compression to my code. There is an advance setting, however, my code isn’t good enough for that level of optimization yet.

You can try the complier yourself at Google Code.

I was dealing with an array full of years (2009, 2009, 2010, 2010, 2009, 2010), and I wanted to easily remove duplicate entries in the array.

I found that jQuery had a .unique() function that removes duplicates. However, there if the duplicates are not in a sequential order, it will miss some of the items in the array.

This returns 2009, 2010, 2009, 2010. The function missed a couple of the duplicates. This is simply fixed by sorting the array and then passing it into the unique function.

This should then return 2010, 2009. Hope this helps.

!! UPDATE !!
I hate Internet Explorer. I just discovered that the .unique() function works with DOM objects and because IE sucks, it doesn’t work properly. So, I had to replace the .unique() with the following code:

More code, but it works in all browsers now.

Thanks to Developer Snippets for the code

UPDATE! The SWF Object plugin for jQuery has been recently updated to include allowfullscreen! Click here to get it!

I am a big fan of jQuery and when ever I am using JavaScript, it is the first engine I go to. Lately, I have been building a video player that has full screen functionality. Normally, I would use jQuery SWFObject but for some reason I was getting errors when I clicked on the button for the video to go to full screen. A quick inspection of the plugin’s code revealed that full screen functionality hadn’t been included.

It turned out adding ‘allowFullScreen’ to the plugin’s code was easier that I originally anticipated. The plugin uses a object that contains information like the SWF URL, width, height, wmode, flashvars, etc. All I needed to do was add an extra line of code that would grab ‘allowFullScreen’ value and integrate it into the rendered code to display the flash file.

I used the uncompressed plugin JS file to make the adjustments needed to make full screen to work.

Find this section of code in the JS file:

Insert the following code after wmode:

The new code should look like this:

Now the plugin will use the allowFullScreen correctly. This is a sample of how to use it:

Finally, you will want to compress the revised code. I suggest going over to Google Code and using their Closure tool.

Impulse Studios have an updated Cheat Sheet for jQuery 1.4.

Here is the PDF

Or a handy HTML version at Future Colors.

Today, I needed to create a swap image for a left hand navigation. I am already using jQuery and I didn’t want to use Dreamweaver’s clunky image swap code. After some searching I found a great and simple snippet of code that will allow me to swap images all the images in the navigation with only 4 lines of code while using jQuery.

Be sure to have a naming convention with your images. Images for off states will be xxxxxx_off.jpg and the hover state xxxxxx_on.jpg. Also add the class “img-swap” to the images.

Big thanks to Design Chemical, click on the link to see their example.

I have become a big fan of using BulkLoader. It is a great class library that allows me to load many different types of files in a controlled and organized fashion. However, it isn’t clear on how to load CSS.

I assumed I would be able to use a “getCSS” function, but there isn’t one coded into the class structure.

To get around this I used the loaded CSS file as a String and then used the parseCSS() function to convert the String into a usable CSS Object.

Hope this can be helpful for others.