SI Works blogs by tag 'Programming' (7)

As a few friends and clients will know we've been investigating starting to use an online billing system that will help us become more efficient with our invoicing process.

Freshbooks

A really easy to use the application, neat Ajax interface!

What I really liked was that the application allows your clients to interact, print, save their invoices to PDF and view their own statements at any given time, without having to mail me and ask for a statement, which is really great

The invoices are only customisable by adding a logo, nothing else can be customised, however in saying this the invoice layout really is super.

Their customer support was awesome, I got a personal message from Jon (Thanks Jon) and had a nice general chit chat with him about the application and he helped with any of my questions.
My only gripe are that you can't send the invoice as a PDF attachment, which is nice to have! Perhaps we'll suggest this to them.

The Invoice Machine

The Invoice Machine has a really neat slick ajax(ish) interface, yet not as simple as Freshbooks

It took me a little longer to set up "set items" for monthly items that need to be billed, perhaps their interface could be simplified and packed with a couple of small usability triggers.

There's a really great little timing device that allows you to time your work, and allocate that to an invoice.
Their API is neatly written and pretty well documented, if Freshbooks was not around, this would be my first choice, for sure!

BlinkSale

First thing that impressed me was their customer support, a small chat on the site popped up while I was signing up, addressing any issues I had, nice touch!

A neat(ish) interface, however not as user-friendly as I would liked, a few too many steps between certain sections.

They have the most customisable invoice templates out of all the applications, however that was only for the email invoice. The PDF is formatted differently.

You can only integrate with Paypal as a payment solution, and no other providers, Freshbooks integrates with about 10 different payment solutions.

Billing Boss

Ajaxish feel but not very slick, the interface looks very "Shiny" little too much for me.

Can't add preset items (although you might be able to, I could not find anything)

No really obvious place to add VAT, so I never took it any further

I could not set the default currency to ZAR, kept having to choose it, and the interface and error messages are not intuitive.

Simply Invoice

Way too focused on the US market, so I certainly would not use this application. It has a slow interface, and cannot set up recurring invoices.

Customization of PDF and interface is not possible, and as such I didn't even bother checking out the rest of this application.

Cashboard

This application has a nice ajaxish interface, which performs fairly well - however, it is a little confusing (too many options) when setting up a schedule invoice.

I can't add common "Items" to pick from that I use on a monthly basis, for example we do hosting and want to add our monthly packages, and this is a 'must have' for our needs.

The interface should have an Add button on the page you're on instead at the top of the interface in one place, a little less easy to use this way.

One thing which was important, which was not blindingly obvious is that I can't put a default VAT(Tax) amount in the invoices

Overall not TERRIBLE, but certainly not something we would use for the future.

Invoice Place

The interface is really old fashion, small little tabs and certainly an historic way of creating invoices, not very slick at all. I also got a nice Java status 500 Error when trying to create an invoice template, so that was the end of that, overall not impressed.

Invoice Quick

The interface took ages to register on, more than 4 steps before I could even do anything, I also found that the interface is REALLY slow to use and most of the actions I tried to perform (like adding a new invoice) simply didn't work, it timed out, I could not even get further than adding an invoice, I certainly would NOT use this

Been reading this post over at sitepoint about Mobile web building and the newish tool swift (I think it's newish) which apparently "mobilizes" your site, I'm not always a huge fan of tools that "alize" or *.lize your website or anything else for that matter.

We've been building mobile sites ourselves in-fact it's a really great new passion here at SI Works, we certainly much prefer building it ourselves cause that way we have control over the code, and on top of that it ALWAYS looks like you want it to, and not kind of "alized" look that you might not want but get anyways.

The mobile industry is really taking off so it'll be worth you while making sure you're site is on mobile!

How about selecting an element, changing its properties, inner HTML or attributes, then from he same snip updating another element that is up or down from it by navigating through to DOM effectively.

$('element').up(0).down("a").writeAttribute("title", "new title");

Which will translate the following in plain english:

Navigate to the element with the name if "element".then move up to the parent of that element.then more to the next a tag within that parent element.then change the title attribute of that element.

Neat huh?

update:I forgot to mention, using the $$ and A$ functions, for instance.

$$('.classname')

simply will grab all the elements in the DOM document that has a class "classname"BUT, then what to do with it.

$A($$('.classname'))

this, however will now group them into an array, at which time we can then perform an action on each of then using the each command.

$A($$('.classname')).each(function(e){
// dom something 
})

Ps...The framework is MUCH more effective and efficient, which allows us to build even MORE robust applications for our clients.

I came across this really nifty little script on Elliot Swan's website while looking for something to help me with a task I have, the task is to copy an element and everything inside the element. this works great, I've made my own small tweaks in order to make sure it 100% suits the application I'm using it for, other than that, nice one.

var Move =	{
copy	:   function(e, target)	{
var eId      = $(e);
var copyE    = eId.cloneNode(true);
var cLength  = copyE.childNodes.length -1;
copyE.id     = e+'-copy';
for(var i = 0; cLength >= i;  i++)	{
if(copyE.childNodes[i].id) {
var cNode   = copyE.childNodes[i];
var firstId = cNode.id;
cNode.id    = firstId+'-copy'; }
}
$(target).appendChild(copyE);
},
element:  function(e, target, type)	{
var eId =  $(e);
if(type == 'move') {
$(target).appendChild(eId);
}
else if(type == 'copy')	{
this.copy(e, target);
}
}
}

Take a look at the entry for this and find more instructions.

We've recently decided to start rapid development for javascript using prototype, and extended it with script.aculo.us now there are many other JS frameworks that are out there, a few are those such as jquery, Yahoo! YUI, Dojo toolkit, to name but a small few of them, but I've found that prototype is the most uber.

I've been playing around with pretty much all of them over the past 6 months or so and have found it the robustest *new word

We're moving more and more towards web2.0 applications style of coding (we have been for some time, as web2.0's getting old now :p) and have found this very useful.

For example, creating a dragable element using the above. nice.simple()
 

/**
* Use Event.observe to load the above function to the browser once all the code has downloaded
* Note we'll set up a drag event
*/
Event.observe ( window , 'load',
// Set up a drag event using scripto to drag the login box
new Draggable( 'login_box', { handle: 'login_handler'} );
});

Event.observe sets up a load event on the window, and new Draggable creates the drag even, neat init?

Been working on a clients website, where the aim is to create a nice little pop-up window with an ajax calendar, which we've created ourselves, instead of getting from the web, so what I had to do is write the function to create it, then ... write one to find where we click the little mouse, so that it appear in the correct place.

function getMousePosition ( event )
{
var mouse = [0,0];
if ( typeof event == "undefined" ) {
var event = window.event;
}
if ( event.pageX || event.pageY ) {
mouse[0] = event.pageX;
mouse[1] = event.pageY;
}
else if ( event.clientX || event.clientY ) {
mouse[0] = event.clientX;
mouse[1] = event.clientY;
}
return mouse;
}

Now what this does is finds the mouse, then when I create an absolutely positioned DIV I use this to give it the co-ords. NOW... in Firefox, this weeks, but as usual in IE there is an issue, it takes into consideration the scroll bar, and at what position the scroll bar is at, which is fair enough. so I had to go and write a function to find the scroll position and add that to the mouse position for frikken IE

function getScrollingPosition( ) {
//array for X and Y scroll position
var position = [0, 0];
//if the window.pageYOffset property is supported
if( typeof window.pageYOffset != 'undefined' ) {
//store position values
position = [
window.pageXOffset,
window.pageYOffset
];
}
//if the documentElement.scrollTop property is supported
//and the value is greater than zero
if(typeof document.documentElement.scrollTop != 'undefined' && 
document.documentElement.scrollTop > 0) {
//store position values
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
//if the body.scrollTop property is supported
else if(typeof document.body.scrollTop != 'undefined') {
//store position values
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
//return the array
return position;
}

And to combine them it was something like this.

var scrollPosition = getScrollingPosition();
var mousePosition = getMousePosition();

var positionX = mousePosition[0]+scrollPosition[0];
var positionY = mousePosition[1]+scrollPosition[1];

That's about it, it all seems to work now, I can't give you an example at the moment, but I'll try give you one at a later stage.

Today is a historic day for PHP professionals around the world as PHP 4 officially get's mothballed.

That's right folks, today's announcement on PHP.net is "PHP 4 end of life announcement" and with good reason too. PHP 5 has been around for exactly three years and I think we can all agree that it's a vast improvement over PHP 4. Just one thing I'd like to mention is the much improved object orientation - support for public, private etc.

So to all those web servers stuck in the PHP 4 rut: it's time to take the plunge since PHP 4 support will only continue till the end of the year. Of course there are some issues with upgrading code from 4 to 5 but there is a migration guide here: http://www.php.net/manual/en/migration5.php to make your life easier.

SI Works, of course, has been PHP 4 and 5 compliant for a while now so if you're one of our clients there's nothing to worry about :)