Internal system – Toolkit

I have been using a web based product called ActiveCollab for sometime now …

https://activecollab.com

I have been using ActiveCollab since version 4. When ActiveCollab 5 was introduced it had a complete redesign, less features and a more slick user interface.

More features have been introduced to ActiveCollab 5 though since it was first released.

ActiveCollab is a project management system that also handles Time Tracking and Invoicing plus more.

I will continue using ActiveCollab for projects / task management however for other areas of my business I have created my own internal tool which I have named “Toolkit”.

I built my own system because I wanted a system that would do the following …

Estimate earnings
Fixed fee and retainer projects are entered into the Toolkit. The Toolkit can then estimate monthly and yearly earnings based on the projects entered. The projects also includes a way for me to manage all the projects I am working on.

Incomings
The Toolkit has an area in which all incomings can be entered. The incomings can then be exported in a format appropriate for my accountant.

Outgoings
The Toolkit has an area in which all outgoings can be entered. The outgoings can then be exported in a format appropriate for my accountant.

Mileage
The Toolkit has an area in which all mileages can be entered. The mileages can then be exported in a format appropriate for my accountant.

Leads
The Toolkit has an area in which leads can be managed. I actually pulled this area out of the Neptune – Lead Tracker – http://www.neptuneleadtracker.com software system.

CRM
The Toolkit includes an area in which all the companies and people I have worked for can be managed. ActiveCollab does actually include this feature but the Toolkit version allows more advanced search features and has fields on the create / update forms to match my exact needs.

Timetracking
The Toolkit includes an area in which all time entries can be tracked. ActiveCollab does have this feature.

Invoicing
The Toolkit includes an area in which invoices can be created. Invoices can also be generated from time entries. ActiveCollab does include this feature but the Toolkit version matches my exact needs precisely.

Notes
The Toolkit includes an area to keep notes. ActiveCollab does include this feature.

Files
The Toolkit includes an area to upload files. ActiveCollab does include this feature.

ActiveCollab has a more slick, beautiful user interface but in terms of functionality built specifically for myself obviously the Toolkit wins.

The Toolkit is primarily made up of CRUD screens, no fancy UI / Ajax heavy screens here. Just datagrids and buttons.

I am in the process of live testing the Toolkit I have built and will be moving various functions of my business over to the Toolkit.

animate.css

I use animate.css to power the left side menu animation on this website, when the page loads you will see the left side menu zoom into the website. The animate.css library was recommended to me by a colleague as quite often emails are sent sent around which include links to interesting code libraries and tools.

You can download animate.css at its website …

https://daneden.github.io/animate.css/

Using animate.css all you have to do is drop in a CSS class into the HTML element you want to animate and hey presto you have an animated HTML element. The animate.css is easy to setup, you just include the “animate.css” stylesheet and you are good to go. The animate.css library includes around 75 different animations to choose from.

You can choose to have the animation in a infinite loop by adding a further CSS class “infinite” to the HTML element. Further settings can be customized by extending the CSS file including duration, delay and a specific iteration count.

If you are looking for a quick way to add animations to your website give animate.css a try.

HTML5 Web Storage Implementation

Recently I have been working on a client project which required the ability to store data from a server on the users local machine. In this case the users local machine was a mobile phone, IOS, Android, Windows etc.

It does not really matter on the platform as it will be stored using the mobile phones web browser and most of the browsers are modern enough to have the new HTML5 Web Storage mechanism.

In actual fact the data will be stored using PhoneGaps implementation of HTML5 Web Storage. PhoneGap is a framework that allows the user to write phone software in HTML5, CSS3 and Javascript.

So for all intents and purposes it is like writing a responsive website that works on mobile phone browsers but is actually compiled and runs like a real native software application. PhoneGap interfaces with HTML5 Web Storage for the purposes of using HTML5 Web Storage mechanism.

So to store the data locally I found WebSQL and HTML5 Web Storage to be my options. Although WebSQL looked perfect for storing and querying the data, it is actually being depreciated and will no longer be in use as a standard in future. So my mind was made up for me in that case.

Web Storage on the other hand seems very straightforward, but this would be the case as it does not include the more complex features of querying the data. Web Storage works by storing name / value pairs. So we can say colour = red, or age = 25, name / value.

Like I said this is straightforward but we cannot say give me all persons over the age of 20 for example there is no querying mechanism.

In actual fact there is no mechanism for even storing multiple persons with ages to begin with. The real structured data is left to the programmer to implement and like wise with querying the structured data.

So what approach did I use?

I decided to store the value of the data as a JSON string and the name would be the table name. So for my project this data needed to be fetched from the web server and stored locally using the Web Storage.

I setup a PHP web server that returned a JSON response upon request via the client. The client did this using JQuery standard Ajax request functions. When I got this JSON response from the server which was basically a dump of a particular database table on the server in JSON format.

I stored it in local storage using the particular database table name for the name value. So in the persons / ages example this would be Person = Encoded JSON string of all data in the server Person table.

So now we have all of data for a particular table from the server stored in local storage. I just repeat this process for all the tables I want to store locally. We now have our data.

But what about querying this data?

Well JQuery does not come, out of the box anyway, with functions for querying JSON data. So a developer might think, I know, I will decode the JSON string and write my own functions for querying this data, possibly by putting the data into foreach loops and returning the records when the data matches the developers expectations. Well that is one way to do it however I am not sure how efficient that would be.

Looping through lots of data just to find single records cannot be very efficient however this is JQuery (Javascript) we are talking about, it is not as if it was designed to do this kind of thing anyway, plus Javascript processing power is becoming more powerful as a whole now in modern day browsers.

It is still not a server side language though and does not query a real database like MySQL which was designed for efficiency, but this is not expected of Javascript anyway.

I do not want to talk about efficiency too much as it is easy to slate querying data this way when a lot of internal libraries might just be doing the same thing under the hood anyway. I cannot imagine there being another way to do it with standard Javascript / JQuery when it comes to the rock bottom.

Anyways enough talk of how querying the decoded JSON data might be handled at a lower level. We as developers have libraries for this kind of thing and luckily someone has written a plugin to do this task anyway called json-sql. Here is the link to the library …

www.trentrichardson.com/jsonsql/

The json-sql library allows the developer to query a JSON string using SQL like syntax. Admittedly it only includes a very small subset of the standard SQL functions but it is most certainly good enough for most purposes, selecting, ordering and where clause. So I used this library to query my JSON data.

So that is pretty much it, the project has a web server which sends JSON responses to the client, data is stored in JSON strings in the client local Web Storage and the data is queried using the json-sql library before being displayed to the user.

This is the way I implemented a server / client, DB synchronized, local storage web software application.