I use Balsamiq Mockups

Balsamiq Mockups is a software program to enable people to mock-up user interface designs. The program is simple to use and all a user has to do is drag and drop generic components onto the white screen area and build the user interface from these generic components.

https://balsamiq.com

There are plenty of components to choose from ranging from forms, datagrids, tables, tabs to navigation bars for designing web based software interfaces the program is perfect.

For doing mockups of websites it is also useful as well but obviously cannot cover in depth “design” in terms of fancy graphics as to mockup fancy graphics the graphic designer would have to do the work of drawing the fancy graphics themselves which is essentially doing the work and is not really a mockup.

For a website you can say this is the header, these are some links, here is a navigation bar to the left etc. It is a mock-up.

Balsamiq Mockups will be used by me in the Roadmap and GUI Design stages. I can now easily mock-up the user interface of the web based software system at the initial stages. Giving the client an idea of what the software will look like and how it will function.

This is also useful for early recognition of problems and getting it right the first time without having to change GUI elements around later when that could prove more costly.

New treadmill on its way!

In the web development industry or rather office industry in general it is easy to pile on the pounds as sitting at a desk all day is generally not very good in terms of psychical activity.

Around 8 years ago I was overweight, I brought a cheap treadmill and within a year I got down to a normal weight. Around 2 years after this I had put all my weight back on plus more.

I used the cheap treadmill again for around a month then it broke. I got another cheap treadmill but it was not powerful enough to support my weight, unlike the first cheap treadmill I brought this one just did not seem as powerful.

treadmill

So basically I gave up for a number of years remaining overweight. Then I decided to join the leisure center and I did some swimming, this is when I found that doing swimming will take twice as long to lose weight even though swimming was more pleasurable then other forms of exercise.

So then I joined the leisure centers gym. Now the gym is not too bad, however it is noisy with the music blurring out of the speakers and the gym instructors instructing people with the “pump! pump! pump!” mentality.

Not to mention the extended time it takes to exercise because of the journey there and back. So in the end I have brought a brand new reasonably expensive treadmill. This treadmill has none of the problems of the cheap treadmill and I can tell just by walking on it that the motor is much more powerful.

I purchased the treadmill from www.fitnessoptions.co.uk and whilst there I noticed some of the other treadmills they where selling and one which particularly stood out was the Lifespan Treadmill Desk.

For those of you who do not know a treadmill desk is part desk and part treadmill with the idea being that you can keep fit whilst doing work at the same time. I love the idea however the treadmill desk only goes up to 4mph.

This is the same on all makes of treadmill desk, it appears it has become the standard. I imagine this being a problem if I use the treadmill desk and reach some sort of plateau with my weight loss.

Not being able to increase the intensity of the workout may mean I will not get past the plateau however I do not know this for definite, maybe a plateau is never reached at all and just the continued walking on the treadmill desk will bring me down to the correct weight anyway. I did not want to take this chance though so I just brought a normal treadmill. If I want a desk I could make one somehow anyway and just use my normal treadmill as a treadmill desk.

I envisage me doing my normal office routines whilst at the office and when I get home I will do a nightly session on my treadmill whilst using a makeshift desk to do my work on whilst using the treadmill. Do that for 3 hours a night and the weight should drop right off.

Is PhoneGap worth it?

Here are some my thoughts about PhoneGap when I used it to develop a client / server phone application to display store offer listings both in text views and on a map.

These thoughts only apply to when I was using PhoneGap a number of months ago, maybe some of these thoughts are not relevant as PhoneGap stands today. I have not used PhoneGap again since this time because I have not needed to develop a phone software application.

Ok so my thought about PhoneGap is that the documentation is not so good. Although it appears to look good there where a lot of times I followed the documentation and it did not work, alternatively it just was not documented.

If the documentation did not work I generally looked around the web but who knows which version of PhoneGap the web tutorials / Q&A was meant for.

Many times I tried what was written on the web and it did not work, alternatively sometimes it did work but only after I read another piece of documentation that told me how to set it up correctly to get it to work but this was not mentioned in the initial piece of documentation I was reading.

LocalStorage options are not so good. Depending on the type of project clients are going to need quite a lot of local storage. Web SQL was an option but apparently it has been or is being deprecated.

IndexedDB was another option but this is only supported on a small number of platforms like Windows and Blackberry.

It is not supported by PhoneGap on IOS or Android. LocalStorage was the only other option that PhoneGap provides and this is the option I went with. However LocalStorage is limited to 5MB of data and only stores data in key / value pairs.

Plugin support is reasonable but depending on the number of devices the phone application has to run on it can be limited. You may find find a plugin that works on IOS but not Android or a plugin that works on Android and not IOS but not both.

No support for native GUI components. This means PhoneGap applications can look like web pages unless serious efforts are made to make them look more like a native PhoneGap. Not a big issue, just depends how native you want the application to look and I guess a lot of customers will want the native look and feel and with all the fancy fold out menus and special effects this could take a quite a bit of work to do.

Maybe there is a library out there that helps with this, I do not know? However I doubt the library will ever give quite the same feel as building the phone application using traditional native programming languages and tools.

The resolution for the PhoneGap application was not very good. For IOS the application was running at 480px by 320px and this is not a matter of simple configuring some setting in the config file.

At the time I was using PhoneGap this was the resolution that PhoneGap supported even though IOS supported a much greater resolution at that time. IPhone 5 1136 x 640 and IPhone 5s 1920×1080.

So these are my thoughts on PhoneGap. It is suited to some types of phone applications and I would use it again if the need called for it and the scope of the project was not too complex but for the really hardcore type phone applications I would stick to using the native programming languages and tools.

Yii 2 is here!

For those of you who do not know Yii is a programming framework built using PHP. For a number of years now I have been using Yii to built its software products.

Yii made programming software a whole lot more efficiently and easier as any framework is designed to do. I got in on the Yii framework in the early days before it became as popular as is it today.

So we have been waiting a number of months for the official Yii 2 release and it has finally been released, it was in an alpha stage until now and was not recommended to be used with building commercial products.

Yii 2 is not backwards compatible with Yii or rather Yii 1 as it can now be named. So any software products will have to be built from the ground up if any programmer had an old project written in Yii 2 but now wants to use Yii 2.

This is the first time a Yii version has been released that was not backwards compatible with its predecessor.

I think this is because the founders of Yii wanted to improve on Yii to such an extent that the fundamental core would have been altered in itself and could not be done by just building on top of what was already there like they did with previous versions.

www.yiiframework.com

This says something about the new Yii 2 in that it is fresh, tailored to its purpose and must be so improved that an entire rewrite was necessary. Rather than just layering on top of the old Yii it had a complete re-write which enabled its developers room to enhance and integrate some real fundamental improvements.

I will start using Yii 2 around January next year when I have finished all my current Yii software projects. I aim to write a new software product to test my skills in Yii 2. I will keep you updated on my thoughts about Yii 2 as I make the progression.

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.

Been using PhoneGap

On one of the latest projects I have been working on the client required that I build a software application that would run natively on multiple phone devices, IOS, Android, Windows and Blackberry.

The client required me to build a native software application for each of these devices because the client wanted to publish the software to the Android and IOS app stores and also because the client wanted the software to be able to run without an internet connection.

Up to yet I have mainly built responsive web applications that can run on a mobile phone through the phones web browser. Due to the client specific requirements this software application could not be done in the same way. If publishing to the app store and running without an internet connection was not a requirement, a web based responsive web application could have still been a viable option.

For previous software applications the responsive web application made sense because those projects where really web based systems that needed the convenience of running through a mobile phone and not a pure phone software application with the specific intent to sell the software as a phone application.

So what is PhoneGap? PhoneGap is a framework that allows developers to construct phone software applications using HTML, CSS and Javascript. After the developer has developed the software application using these languages PhoneGap can then build the phone software to run on multiple phone platforms i.e. IOS, Android plus more.

www.phonegap.com

Obviously this saves tons of time as without PhoneGap or similar frameworks developers would have to construct a software application for each platform. Another advantage of PhoneGap is that it allows web developers to build phone software applications in languages they are use to.

Although PhoneGap has made development easier, one of the drawbacks I have noticed with it is that developers still need to install each SDK. An SDK is a toolkit that allows the compiling of the software application to the phones native device. An SDK has to be installed for each device you want the software application to compile to. Installing each SDK can be a real pain in its own right. Most of the SDKs are installed through the command line and in some cases certain dependencies are required.

Another drawback I have noticed with PhoneGap is that the documentation is not very good. It seems like it is good when you are reading it on the main site or when you are reading it on online tutorials. But then you discover that the documentation you where reading is old and does not work for your version or even that it just simply does not work without you having to do something else which was not mentioned in the documentation. A simple task can look simple when reading the documentation, you do everything the documentation says only to discover it does not work in the way you want it to or even does not work at all.

You must be aware of what type of application you are trying to build and do not try to go beyond its limits when the native coding platform would have been a better choice. PhoneGap seems to be able to do everything the native platforms can do, but in practice it is different or rather you may try to do it but it might have been easier just to code it using the native languages, platforms and tools.

Update: PhoneGap does actually include an online builder which allows you to compile to IOS, Android and Windows without having to install the SDKs locally.

Mac free color picker

I was searching for a color picker today and found one already installed on my Mac which is installed as standard with every Mac OS.

I thought I would also write about the already installed color picker to save someone the time of having to find and download a color picker online.

The color picker is located at Application -> Utilities -> DigitalColor Meter.

color-picker

Just go to that location and run the color picker software.

KnockoutJS

I have been using KnockoutJS on the latest work I am doing for a client of mine. The work involves creating front end layouts for their 2D / 3D product viewer and personalization product.

KnockoutJS has something called Observables, these are variables that can automatically update the user interface without have to use event handlers and also without having to bind to element IDs. You bind the Obserables to HTML elements using a data-bind attribute, within this data-bind attribute you can specify various bindings i.e. visible, click, css, style, text, attr plus more.

Using these bindings you can bind them to your Observable variables, so you can say if observable is true make an element visible. The element will automatically switch between visible and invisible based on whether the Observable variable is true or not.

KnockoutJS also allows you to use Observables as arrays, so take this scenario. You have an array which contains your products, using the Observable array and bindings you can automatically update the product list purely based on the data in the array. The data in the product list is displayed using the KnockoutJS foreach loop control flow feature.

KnockoutJS also provides more structure to the JS in the form of view models. Essentially view models represent the data used in the view within the application.

These are some of the benefits of using KnockoutJS.

Web programming language to learn first

The other day a friend asked if his nephew could borrow one of my programming books as he wants to start learning programming. I was asked which I would recommend for a beginner and this got me thinking. Which programming language did I learn first? What would be good for a beginner?

Well apart from a brief go at C# whilst at University the first programming language I learned was HTML. Yes I know it is a mark up language and not really a programming language but for the purpose of this article we will class it as one.

So here are my recommendations at the time of writing this article. I would recommend learning HTML5 first and at the same time CSS3. The reason for this is that in my opinion they are easier to learn than a programming language and as a beginner the would be programmer is going to want to keep momentum up and learning something too difficult will bring discouragement.

Learning these two languages are basically a prerequisite to the other languages because even if you where to program a web application part of that will involve creating a user interface and that is generally done in HTML5 and CSS3.

When programming in HTML5 and CSS3 the beginner programmer can see practical results in very little time, neat and cool user interfaces can be created bit by bit without any real complexity and to see these bit by bit changes to the program all the programmer has to do is refresh the web browser.

Also HTML5 and CSS3 only require a web browser and a text editor to get started with. Programming languages generally require installing and configuring applications to get them working.

After learning HTML5 and CSS3 the programmer can move onto something more challenging and what many would consider a real programming language. The next step I recommend is learning Javascript, this is not Java, Javascript and Java are two different languages so do not get them confused.

Learning Javascript will require a whole new paradigm as to what was previously learned in the HTML5 and CSS3. Start with learning the basics, variables, conditions, loops then move onto the more advanced topics like functions and classes. Like HTML5 and CSS3, Javascript only requires the use of a modern day web browser to work and you can get pretty much up and running straight away.

After learning Javascript I would move onto learning PHP and MySQL. This will require you setting up a web server and installing PHP. Certain programs like WAMP / MAMP / LAMP can help with this and give you everything you need to get up and running.

Use the skills you have learned in Javascript and bring them over to PHP. In terms of the paradigm they are similar except PHP is a server side language and Javascript is a client side language. If you can get your head around that everything will be fine, I would not say the jump from Javascript to PHP will be as difficult as the previous jump from HTML5 and CSS3 to Javascript.

You will need to learn MySQL to talk to the database and pull data into your PHP web application. After you have learned these 5 languages the sky is the limit. You will be able to produce full blown web applications.

After learning these five languages I would also recommend learning a PHP framework and a Javascript framework as they will make your programming even easier. For quite some time I coded in standard PHP and Javascript because I did not trust moving to a framework but I can definitely it was one of the best programming decisions I ever made.

You will produce better quality web applications in less time. Also whilst the learning the Javascript framework you will most likely run into Ajax, which is another good concept to learn.

Well that is my recommendations for anyone starting out in the web programming world, give it a go.

Nice custom component

I developed a custom component recently for the Peuternet client project. The component is a contract table to define scheduling contracts between the business and the customers. The component sits inside of a form which is part of the whole larger Peuternet project …

custom-feature-contract-table

The contract table allows the client to select the week days that are to be scheduled for the customer. The user of the web software can select a week and what is known as a “day part” (TM, JH, YU) to add the contract.

The day parts are also dynamic and are created in another part of the web software application. After adding the weeks and day parts the user can tick the weekdays which are needed for the customer.

To remove the “row” or day part the user simply leaves all the day parts blank and the “row” will have disappeared next time the user visits the page. The contract table is updated automatically so there no need to click a “save” button because it updates at the time of checking the checkbox.

A working spinner was also implemented so the user has an indication of when the software is saving. A working spinner is a little graphic that spins when a software application is performing some action.