Daniel Baldwin » programming

Website as a jQuery Plugin

dbald — Thu, 02 Jul 2009 05:54:29 +0000

I recently had to build a site that ran mainly off of jQuery and I had the whole thing working from one script.js file that just had a lot of functions in it with some global functions defined at the top. The more I looked at this mess of a file the more I felt disappointed with myself that I had allowed myself to code so horribly.

So I went on a mission to turn the entire site into an object. I tried many different ways, including Javascript’s built in prototyping, but nothing seemed to turn out as nicely as I would have hoped. So I had the crazy idea of turning the entire site’s code into a jQuery plugin. Well it has worked out very well and even though it is a it of a wierd thing to do I have taken to making site that use alot of javascript into jQuery plugins.

The problem for me is that what was outlined on the jQuery documentation wasn’t all that helpful and I found that using existing plugins to figure out how the plugins were being built was alot more helpful but also confusing as there seems to be a nearly unlimited amount of ways to make a plugin. So after searching around for a while and a bunch of trial and error this is what I ended up with:

/*** Sample jQuery Plugin*/
 (function($) {
    function Sample() {};

    $.extend(Sample.prototype, {
        settings: {
            base_url: ''
        },

        init: function() {
            this.sampleFunction();
        },

        sampleFunction: function() {
            /* Sample Function Code */
        }
    });
    //Plugin End
    /**	*	Event Handlers	*/
    $(document).ready(function() {
        if ($.sample == undefined) {
            $.sample = new Sample();
        }
        $.sample.init();
    });

})(jQuery);

I find that I like to call the plugin after the site, e.g. jquery.danielbaldwin.js, and I name the function accordingly. I have found that having all the javascript for a site in one object has helped me to build sites that are more complex, can have persistent variables easily, I can set settings that can be changed just by changing a 1 to a 0, and I feel like my code within the object becomes so much cleaner and more legible.

Replacing fonts? Try replacing sIFR.

dbald — Fri, 26 Jun 2009 04:58:35 +0000

sIFR has always been really impressive with how well it works and how it can make websites look good and unique. However, I constantly dread implementing sIFR on a site as the setup always seems to be such a process that results in some issue that I have to spend extra time working out. For a long time I just assumed that this was the kind of hardship that I would have to deal with in order to appease all the designers out there since fir me the only other option was image replacement which is not an option for me because of server load and portability. Now, though, I am looking forward to not going through all the hassle because I have been recently introduced to a new option, Cufon, that promises to be much easier. The things right off the bat that I really like about Cufon are that it doesn’t require any additional plugins such as flash, it works in all the major browsers, and it seems to render almost immediately. Getting Cufon running is also really easy and painless, the hardest part is that you have to go to their generator page, http://cufon.shoqolate.com/generate/, to generate some javascript that creates the font for you. Then you set up the page like this:





	

	Cufon Demo
	
	
	



Replaced Text

So doing the replacement really takes almost no code and almost no time to setup. There are 2 other parts of Cufon that have me impressed and happy. The first is that the selectors for the replace are very basic by default but lets you do advanced selectors with the help of a javascript framework like jQuery or Prototype and you dont have to do anything extra other than just have the framework there. I think this is cool because for me most of the time I am using jQuery or Prototype on my projects so they are already there and then I know that Cufon’s code isnt bloated with repeat functionality. The second feature that I am excited for is Cufon’s ability to reload it’s replacements on the page. This is helpful when content changes on the page without a page reload like with ajax. In sIFR you would have to re-call your whole replacement statement and it would look something like this:

sIFR.replace(newsgothicbd, {
	selector: '.demo_top',
	wmode: 'transparent',
	css: '.sIFR-root { background-color: #F9F9F9; color: #417596; text-transform: uppercase;} a { color: #417596; text-decoration: none; } a:hover { color: #417596; text-decoration: none;}'
});

however with Cufon you can just do this:

Cufon.refresh();

So I think it is pretty obvious that I am excited for this find and I am really excited to integrate the use of Cufon into my daily web development. I really thing that this will make the sites I work on look better, have a smaller footprint, and load much faster than with sIFR.

A New Found Friend

dbald — Wed, 10 Dec 2008 17:05:15 +0000

Evernote

Organization in life seems to always be an issue. There are always so many things to remember and do. I started using Evernote when it first came out but now that it is so cross platform, has an iPhone app, and has a better rounded feature set. I have been able to see the benefit of using Evernote.

I am currently using Evernote to store receipt, manage task lists using the TaskPaper format, and recently I realized that I could use Evernote to store code snippets and have access to them wherever I go.

This is a great product and I hope that we will be seeing more great features coming out of the Evernote team soon. For instance blogging right from Evernote wouldnt be a bad idea.