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.

JQuery hotkeys handleObj.data is undefined

I came across a bug today “handleObj.data is undefined” whilst using JQuery hotkeys. I believe the bug must have been caused by some sort of conflict between the other libraries that I was using. The bug was also stopping me from using any other Javascript and JQuery on the page because it was Javascript error bug.

Anyways to fix the JQuery hotkeys “handleObj.data is undefined” bug I changed this code in the jquery.hotkeys.js file …

To this …

This fixed the problem for me.

Font Awesome is awesome

Font Awesome is an iconic font library that provides a lot of professional icons you can use in a web based software application free of charge …

http://fortawesome.github.com/Font-Awesome/

Icons are implemented as fonts so using any of the icons in your web software application is as simple as including the font awesome CSS stylesheet and adding a class to your HTML element.

Bootstrap

I have recently been working on client work requiring the use of Bootstrap …

http://twitter.github.com/bootstrap/

Bootstrap is a front-end framework for creating user interfaces, it is developed and maintained by Twitter. Bootstrap also has Yii extension component so it easily integrates with my number one framework back-end choice which is the Yii framework.

http://www.cniska.net/yii-bootstrap/

Before I learned about the Bootstrap framework I was coding the front-end of the frameworks using standard HTML5, CSS3 and JQuery. Now that I have learned about the Bootstrap framework, Bootstrap can do a lot of the work for me that originally I was having to code myself. Bootstrap provides a beautiful set of components such as buttons, menus, grids which essentially I was having to write from scratch before I knew about Bootstrap.

Bootstrap components are also consistent with what many people have come to expect with the web user interfaces that the world is seeing today, clean, streamlined and beautiful.