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.

Front-end vs back-end development

Is there such a thing as front-end vs back-end development in today’s web development world? How much do these cross over and even into other roles entirely? What is front-end developer or a back-end developer expected to know or do?

Well there is no easy answer to all of these questions, with today’s expectations both front-end and back-end developers have a lot expected of them. In very basic terms we could say the roles are briefly defined as follows …

Front-end developer

Expected to know HTML, CSS and be good at graphic design.

Back-end developer

Expected to know how to create databases and PHP.

Ok so that is defined very basically, now I will take into consideration all of the criteria not mentioned for each of these roles below …

Front-end developer

Based on the above we could also add the following as potential criteria to the Front-end developer role …

  1. Expected to know CMS systems such as WordPress.
  2. Expected to know front-end frameworks such as Twitter Bootstrap for example.
  3. Expected to know Javascript.
  4. Expected to know any number of Javscript frameworks such as JQuery, KnockoutJS etc.
  5. Expected to know any number of CSS frameworks that are available such as Less, SASS etc.
  6. As mentioned earlier, expected to know graphic design even though graphic design is a completely different discipline altogether.
  7. Expected to know server side templating languages, for example Smarty.
  8. May be expected to know a bit about server side languages so they can incorporate the HTML templates into the web app.
  9. Expected to know about SEO so the website can be coded to accommodate the SEO.

Back-end developer

Based on the above we could also add the following as potential criteria to the Back-end developer role, the first 6 bullet points are the same as the front-end developer role but are still valid, this is the cross over between roles I was talking about and how it blurs the lines between front-end and back-end development …

  1. Expected to know CMS systems such as WordPress.
  2. Expected to know front-end frameworks such as Twitter Bootstrap for example.
  3. Expected to know Javascript.
  4. Expected to know any number of Javscript frameworks such as JQuery, KnockoutJS etc.
  5. Expected to know any number of CSS frameworks that are available such as Less, SASS etc.
  6. Expected to know server side templating languages, for example Smarty.
  7. Expected to know HTML and CSS.
  8. Expected to know any number of backend frameworks, for PHP this would be frameworks like Laravel, Yii etc.
  9. Expected to know any number of database environments and their associated query languages for example MySQL / SQL, MongoDB / BSON etc.
  10. Expected to know any number of code libraries.
  11. Expected to know how to use version control systems such as Git, BitBucket etc.
  12. Expected to know any number of backend languages including all their frameworks and libraries. For example back-end developer could know C# but also PHP.
  13. Expected to know how to create and manage web servers.

So there is probably a lot more that I have not thought about or mentioned but that just about sums it up for now. You can see there is a big cross over between the skills especially in the area of Javascript. Javascript as a language is nothing like coding HTML but Front-end developers can still be expected to know Javascript.

Back-end developers can still be expected to use HTML even though they are Back-end developers. You also have to appreciate that most of these skills are multi-disciplinary and each skill in its own right could take a vast amount of hours to learn and maintain properly.

For example Javascript developer should be a role in its own right. Graphic designer should be a role in its own right. Web server administrator should be a role in its own right. Learning a single web framework like Laravel should be a role in its own right. Not one developer learning multiple frameworks.

The way the skills are listed above in the bullet points make them sound easy and degrades the time and effort it takes to learn the skills properly. However employers list the skills in the same manner as above in job descriptions they send out to potential candidates.

No one could learn all of those skills and be proficient in all of them. The time it takes to maintain such skills would be too much for one person to accomplish if taken to the degree of mastery.

Maybe some employers know this and do not expect the developer to be a master at all of them. Maybe some employers just copy other employers job descriptions without knowing that the other employer did not expect the developer to be a master at all of them.

Any employers listing too many skills that a developer should be a master at should be looked upon as not being very grounded in reality and taken with a pinch of salt. It is not just the time to learn the skill but to maintain them as well.

These technologies are constantly evolving and there is a lot of maintenance time involved as well. To be a master the skill has to be maintained and as mentioned earlier there is no way in reality that one person could be a master at all of them.

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.

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.