Using Ionic Framework

I'm working on my first Ionic framework based app, a training app for Brazilian Ju Jitsu practitioners. It is the first time I've used Ionic, but from what I've seen of the framework it looks awesome.

I've just finished my first AngularJS project so I know the basics of AngularJS, which is a great JS framework (reminds me a lot of how I use to work with RobotLeg, the ActionScript framework, something I'll have to write about later). 

So the main things I like about Ionic are, one its using AngularJS, and two the great set of components that Drifty have created.

So for the first part of my app I've decided to use the basic starter app that Ionic provides. All this does is give you a empty shell of an app that you can start working with. There's other types of app that you can get through the Ionic. There is the tabbed view, a app that has tabs. The slide menu app, one with a slide in from the left menu and the blank app, which I'm using.

The reason I went for the blank version of the starter app is because I'm still deciding how I want the app to work. 

The first task I tackled is adding UI-Router to manage the views and states of my app. I haven't used UI Router before so should be interesting.


Using Yeoman

Today I've been using Yeoman to create a AngularJS app, this is the first time I've really used Yeoman to set something up. Yeoman is a great tool, it makes getting up and running with a full feature app in minutes. Well that's the theory, I did run into some teething problems.

First this I did was use terminal to create a new directory in my working folder, something that coming from a windows background is something I'm getting use to (actually beginning to enjoy using terminal). So making a directory is as simple as going 'mkdir foldername', and that's it.

Once I did that I needed to remember to move into the new folder I've just made (an early mistake I made was not to do this, then when I ran Yeoman I had all the random folders within my working folder). Anyway now within my new folder I  ran yo angular this, according to the Yeoman site makes a AngularJS site, once yeoman has done it's thing I ran grunt test which runs through all the tests for the app.

Finally you run grunt serve which should open your lovely new site in your browser, well this is where some of my problems started. First I was getting a error in terminal telling me that grunt serve is not known, ok so looking at the Yeoman site this command was formerly grunt server which I tried and that worked. So this looks to me that my version of Yeoman is not up to date something to fix.

So my app was running, now to see if any changes I made were being shown in the browser, like LiveReload does (which for someone who was building websites over 12 years ago, live reload is amazing). I made a quick change to the standard HTML that Yeoman makes and had hoped to see my change automatically appear in the browser. That didn't happen.

Looking at terminal (my new best friend) it told me that I was getting a Bus error:10, what the hell is that. So off to Google (my second new best friend) and I found that someone else was having this similar problem. I found this blog post by Shoogle Designs, basically the post says, clear your npm cache and reinstall a stable version of Node.

That done, I tried again made a change to the HTML and went to my browser and success the change is shown, great.

So that's it all started. Basically what I've learnt from this is that Yeoman is great, you may have some problems, but it's worth sticking with and remembering back to when I started making websites, Yeoman is lightyears ahead.


ExpressJS, Jade and Twitter Bootstrap

I've started using ExpressJS and in order to learn more about Express and how to develop with it I've started a small project. Instead of creating a Todo app I'm making a small contacts manager, which I hope to grow over the next few weeks to incorporate a MongoDB backend, but for now I'm starting with a very basic shell.

For this project I've decided to use Twitter Bootstrap as the front-end framework (I love Twitter Bootstrap), but the first problem I came was how to add Bootstrap to a Jade template Express app. Well thankfully it is really straight forward to do.

The first thing you do is download Bootstrap. The latest version has a nice clean download, that contains the very basics that you need for creating a Bootstrap app, it just contains the CSS, JavaScript and images needed.

Once that is downloaded you need to create your Express app. To do this you have Node installed then use NPM to install Express. Ray Camden has a great intro to Express that is well worth checking out.

With Express installed all you need to do next is navigate to your working directory, create a folder for your app. Then inside this folder you need to create a package.json file (I have to be honest this seemed a bit odd to me, the first thing you create is this json file).

Within this JSON file you set what the apps dependencies are, for example Express is a dependency. Then from within this folder, in terminal if you run npm install Node goes through your list of dependencies and installs those (as well as there dependencies, which is awesome).

With the Express app setup, you'll find that there is a 'views' folder, and within that there are two files index and layout.jade.

As far as I can see layout.jade is, as it says, the layout for the site and index.jade is the intro/first page of the site (all pages get their layout from layout.jade).

It's within layout.jade that the links to the Twitter Bootstrap css and JavaScript files are made. This is my layout page for my contact manager app:

doctype 5
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    block content

So this is a quick overview of how to add Twitter Bootstrap to a Express app. Now I'm looking further into Jade, something I haven't used before.


Going back to Zerply

I use to have a Zerply account that was half filled in. After a while I thought that no one visited it and it didn't really work. No one followed me and I never got anyone trying to contact me with work offers.

I'm not surprised I really didn't fill it in and keep it up to date.

Now I've gone back to it and created a new profile, but this time I've put in as much as possible part of my push to increase my social marketing.



Portfolios for Developers

Recently I've been listening to more podcasts about freelancing, including the Freelancers Show and Unfinished Business. A new one that I've found is called the Freelancers Web which is a great podcast, it has great interviews, insights to going freelance and working as a freelance designer. It's also not to long so ideal for car journey's or lunch breaks.

When listening to their first episode (I'm in the process of catching up on their past episodes) the two presenters (Sean Johnson and Liz Elcoate) were both talking about how they got started, how they 'took the plunge' and just went for it. In their discussions they were talking about their portfolio's and website and how they really didn't have one to start with as they were working full time and didn't have work that wasn't their previous employers. So they designed everything they could, including their CV, their business cards, painted water colours of Run DMC and Public Enemy (which sound awesome I must try to find them). This made me think about how would a web developer, not a designer, create a portfolio of work?

I'm a developer of over 12 years, and I've created a lot of sites for various clients, all working for an employer at the time, and I've always had to work from a design created by a graphic designer, which is fine. So I don't have design skills, never really needed them. Now that I'm trying to build up a freelance business I've been thinking about how I can attract clients through the work I do. I want to aim to attract clients who want web applications developed, as that is my main area of interest. Now I could make example apps, but without that 'design' element to them, will they be appealing to perspective clients.

I've spoke to agencies before, who have asked for my 'portfolio', but as a developer I don't have a portfolio. I suppose there is Github where you can put up example code or use these UI frameworks like Twitter Bootstrap or Foundation to give your example apps that polished, designed feel.

I don't think it is easier for designers to attract clients, but it must be easier for them to create a appealing portfolio.

I've posted a question on Twitter to see if anyone has any ideas...


Some new podcasts

I've been checking out some new podcasts, well they are new to me. A lot of them are about being a freelance web developer. Here's a list of what I've been listening to.

  • The Freelancers Show - awesome podcast by Charles Max-Wood about being a freelance web developer and running a freelance business.
  • Unfinished Business - great podcast on being freelance from top UK based web freelancers, Andy Clarke.
  • JavaScript Jabber - another Charles Max-Wood podcast (this guy produces some great shows), this one is all about JavaScript, best one there is.
  • Shop Talk - just awesome podcast from Chris Coyer and Dave Ruppet.
  • Blnce - a new podcast on getting a balance between work and life.
  • OnTheMat Radio - a great BJJ interview podcast.
  • This week in BJJ - a great video podcast on what's going on in BJJ

So some on freelance web development and some on BJJ help me through the day.


Working with AngularJS

I've recently started working on a web app using AngularJS, the reason I'm using Angular is because it, from what I've read, is designed for creating web applications. It's a complete application development framework.

Coming from a Flex background I've always liked using a framework. I've used Caringorm and RobotLegs (my personal favourite) for the Flex applications I've developed.
Now that I getting into using HTML/CSS/JS to create web applications, I was on the look out for a new framework I can use to build my applications with.

The project I'm using Angular with is, is a personal project I've had in mind for a short while. Its a application that solves I problem I have when running my freelance business, where I want to link my documents within Google Docs with the tasks I have, which I can use Google Tasks with.

By linking the two I hope to have a application that I can manage the documents (invoices, receipts, business plans) with any associated tasks and reminders.

This will be a web app (obviously) that uses Angular JS, both Google Docs and Google Tasks API and Twitter Bootstrap for the UI.

Now I love using Twitter Bootstrap, it really helps me create a nice UI fairly quickly. A lot of people are not fan of Bootstrap because it makes web apps look the same. But I've been using LESS for the last few weeks at work, so I know how to change the colour scheme of the default look of Bootstrap to look more like the idea I have for my app.

Anyway I'm going to start to blogging about the development of this app, using Angular and customising Bootstrap over the next few weeks.