Obviously inspired by CoolIris, I built it using jQuery 1.4, the jQuery Lightbox and Reflection plugins, JSON2, and JSONRPC.

On the server side, data is pulled from Reddit in JSON format and deserialized into PHP objects and arrays. In particular, I only accept items that have thumbnails and have URLs that point to the images themselves. Data is then compressed and cached on the server with XCache for an hour at a time (which is pulled during each AJAX JSON RPC request for any given subreddit and item ID number).

Enjoy the site.

Also, and this is something I've always loved about programming aside from the actual coding, it gave me the opportunity to work with something that I've never had the chance to tackle (in this case mortgage calculations). I've worked on payroll and timekeeping projects before but I've never worked on anything that had to do with finance and loans. I've found that writing the software isn't as always as interesting as what you're writing the software for. I've helped to write software to track the radiation readings for building decommisioning and deconstruction at a DOE nuclear site. I've written software to track patient information for people with Tuberculosis and Hepatitis B. And now I'm writing a mortgage calculator.

I am pleased to announce that, as of a month ago, my entry was chosen as the winning submission.

My calculator was completely written in JavaScript and jQuery and consists of a single 22K packed script. I used a simplified version of the code mentioned in an earlier post to embed the CSS directly within the script (I hate all of the baggage that comes with most scripts you want to add to your pages; scripts, stylesheets, and images).

It was also designed to be infinitely configurable. The logo, colors, fields, labels, and default values can all be modified (you can check out the Mortgage Loan Place's custom mortgage calculator page here).

Lastly, the calculator is capable of rendering two different layouts: the standard one and a widget calculator. The standard layout is intended to be placed on a regular page and the widget calculator consists of a compact layout to be placed within sidebars.

Here is an example of this calculator (be sure to check out MortgageLoanPlace.com if you'd like further details or would like to include this calculator on your site):

I'm been playing with the Zend Framework and, whenever I'm faced with a new data abstraction layer [Zend_Db in this case], I cannot help but rethink the great debate over whether to use (or not use) stored procedures [more].

I must admit that I've been predominantly in the "stored procedure" camp (and I won't even consider embedding a query into my code). But ever since I started to use LINQ to SQL (in C# and .NET), I've begun to rethink this philosophy and have begun to find a place for data abstraction layers (DALs) and object relational mappings (ORMs). And while I find that Zend_Db covers 95% of my database needs, it is still very difficult to perform very complex queries or any sort of complex data manipulation (ones that are best done in the database than in code).

And while it is possible to execute stored procedures using the underlying database adapters within Zend_Db, Zend_Db itself does not contain any classes for use with stored procedures. As a result, I have created one and would like to share it with you.

This class is designed to automatically discover and cache the available stored procedure definitions and allows these procedures to be executed without the need to explicitly define a function for each (but you will still need to set up the default database adapter and cache in your bootstrap). Through the use of PHP's __call magic function, the class will attempt to execute the stored procedure matching the called function (in addition, it ensures that the count of parameters matches that of the stored procedure). All you need to do it create a class that extends this class in order to begin using your stored procedures.

Child classes may define a $_prefix variable to indicate any prefix you may use in your stored procedure names. In addition, the class will convert the called camel-cased method name to a lowercased underscored-delimited stored procedure name (this is my preferred naming convention for database entities). Therefore, functions will be mapped to stored procedure like so:

It should be noted, that this file is designed to use PHP 5.3 as it utilizes both the __callStatic() and get_called_class() functions. This allows stored procedures to be called via static methods and allows singleton instances to be created from within the abstract parent class. In older versions of PHP, you will need to make the following changes to your child classes:

With this modification, stored procedures must be executed like so:

While I may do most of my database work with DALs (and the debate over stored procedures still rages on), I still find the need to stored procedures now and then and this class will give you a very simple interface to your procedures.

I hope you find it helpful.

Yep, I'm in love with both jQuery and Prototype. Each has qualities that I like and each some that I don't. jQuery, for instance, is almost beautiful in its design and how such a simplistic approach can be made so powerful. Prototype, on the other hand, adds so much that is missing in JavaScript and makes an already capable language much more usable.

In a perfect world, I'd want to use both of them. The problem is that there is too much overlap in the capabilities of these frameworks to warrant using both of them on the same project.

I have decided recently that I cannot live without both frameworks. I love jQuery but I also want Prototype's additions to the language. I finally figured out that what I wanted was a stripped down version of Prototype; one that is specifically designed to play nice with jQuery.

Downloads

The following links are the result of this attempt to add Prototype-like functionality to the jQuery framework (removing anything resembling any functionality that is already available in jQuery). And not bad too, the end result came in at about 20KB (as compared to the 120K for a copy of an unpacked and unminified Prototype).

• jQuery Prototype Library (v1.0) (21KB)
• jQuery Prototype Library (v1.0 - minified) (15KB)
• jQuery Prototype Library (v1.0 - packed) (10KB)

Caveats

Though most of the remaining methods are largely unchanged, I took the liberty to remove any of the objects or methods that I did not want (or were redundant aliases). In addition, I took the liberty to make a few minor changes to a few things that I'd prefer named or written another way (you'll have to review the library yourself as I did not take the time to document these). For example, I changed the name of the 'initialize' method utilized by the Class object to '_init'. A breaking change for anyone wanting to use this as a direct replacement to Prototype, but it is something that I wanted named differently.

I hope you find it useful... and many thanks to the Prototype and jQuery devs for creating two outstanding pieces of code (your efforts are greatly appreciated).

XCSS is a jQuery plugin that is used to generate CSS from a JavaScript object (via code, an external file, or using AJAX). This is the second post in a two-part series where I will go into more detail as to how the plugin is used and what kinds of things you can do with XCSS.

The Plugin

The XCSS plugin contains only a single function 'loadXCSS' that is used to process XCSS objects and loads the resulting stylesheet into the page.

The 'data' argument must either be an XCSS object, a string containing an XCSS object, or a string containing the URL to a file containing an XCSS object (note that loading from a URL is done asynchronously). The argument can also be an array containing one or more of the aforementioned types.

The 'callback' argument is optional and, if specified, must be a function. The callback function is executed upon successful completion after the XCSS object has been processed and a stylesheet created. Note that, if the 'data' argument is an array, the callback function is executed once for each item.

The XCSS Object

The XCSS object is a JavaScript object that contains all of the definitions and the structure of the stylesheet you would like to create. The following illustrates the basic structure of the XCSS object:

Variables

XCSS variables must begin with a dollar sign ($) and their values must be a string, a number, or a function that returns a string/number. Also, variables must be placed in the object higher or above where they are to be used.

Selectors

XCSS selectors may use any of the standard CSS2/3 selectors (with the exception of descendant selectors) and are applicable to the XCSS object they are contained within. Descendant selectors use the pseudo-combinator '>>' to indicate that you want to select the specified elements that are descendants of the current XCSS selector (note that in CSS this is indicated with whitespace and didn't translate well into XCSS).

Properties

XCSS properties may use any of the standard CSS2/3 properties (and any of the Mozilla- and WebKit-specific properties) and are applicable to the XCSS object they are contained within. Their values must be a string, a number, or a function that returns a string/number.

Alternatively, if an XCSS selector does not contain any additional selectors or if its properties do not use any functions, you can use a much simpler shortcut like so:

Conclusion

I devised the XCSS plugin to be a quick-and-dirty method to add styles to a page without the need for an external stylesheet. Certainly this plugin isn't going to replace stylesheets, and I wouldn't recommend using this plugin as an alternative, but it does allow you to quickly add styles to a page for small things like other jQuery plugins and widgets.

I hope you find it useful.

XCSS is a jQuery plugin that is used to generate CSS from a JavaScript object (via code, an external file, or using AJAX).

A month ago, I had come across an interesting site that offers a Ruby program called LESS that is used to compile 'less' files into CSS. It features a syntax similar to CSS but also includes variables, mixins, nested classes, and operations. I wondered if you could so something like this using JavaScript.

Around the same time, I was working on a jQuery widget and was trying to figure out ways that I could slim it down (both in size and in the number of files needed). I toyed with the idea about incorporating my stylesheet directly into my code, as that would eliminate one external dependency, and decided to try and see if I could represent my CSS inheritance structures as a JavaScript object. It worked and I decided to expand on that idea in creating XCSS.

Below is a sample widget that I created whose styles are generated using XCSS:

And this is the JavaScript object that represents the CSS structure for the above widget (in this demonstration it is contained in a file and is loaded using AJAX):

As you can see, the object nearly resembles the structure and inheritance that you'd use in CSS; the only exception being the use of the '>>'.

In CSS, the valid combinators are white-space, greater-than sign (>), plus sign (+), and tilda (~). XCSS exchanges the white-space combinator, which is used to select descendents, with the double greater-than signs (>>). This allows XCSS to distinguish between intending to select something like 'li .selected', which would match LI elements whose descendants have the class 'selected', and 'li.selected', which would match LI elements who have the 'selected' class.

XCSS parses the object and places the following rules into a new stylesheet on the page.

That's it for now... later I'll go into more detail about how to use the XCSS plugin and how the XCSS objects must be structured and what kinds of things you can do with it.

Enjoy.