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.


Creating web apps

For a while I've created websites, sites for online betting, local councils, Intranets, Extranets, the list goes on. Then I got into working with Apache Flex, and then I started creating applications that run within the Flash platform. I loved the whole 'Flash Platform' idea, building apps for the browser, for mobile, TV and tablet, being able to use Flex for both the browser and devices using Adobe AIR.

The idea of the complete cross-browser, cross-platform application was very appealing to me and with the tools available to modern web developers, these applications are easier to develop.

So my plan for 2013 (though I'm a bit late making plans for 2013) is to concentrate on developing cross platform applications using web technologies. This will involve a lot of studying and practice.

The current list of technologies that I'm going to look at is:

1. HTML 5
2. JavaScript (not just jQuery)
3. BackboneJS
4. RequireJS
5. TDD with JavaScript
6. CSS3
7. NodeJS
8. PhoneGap

A pretty standard list, it'll be interesting to see how these relate to the ActionScript experience I have.

Anyway onward with 2013 and web applications