Using Brackets

I've been using the latest version of Brackets this evening. It's really improved since I last used it. The themes are great and switching between them has improved. 

I also install a plugin for Ionic, this is great. It allows you to create a project through the plugin, you point to where you want the project to be created, what type of starter project you want and off it goes and sets up the project for you. I've also found a good tabs plugin that creates tabs in the top of each page (it also uses the icon for the file type e.g. HTML5 icon or the JS icon). Brackets is really becoming a powerful editor for HTML, and it is also a great example of what you can build now with web technologies. 

I'll carry on using Brackets for a while, see how it goes, but the current version looks good.


Two Years Contracting

I’m coming up to two years of contracting and it’s been a voyage of discovery. After contracting for a short while now I do think that it is still the way forward for me, but it has always been plain sailing. Here’s what I’ve learnt over my first few years of being a contractor:

Get yourself a good accountant from the start. One that is available to answer your questions, ideally one that gives you a single point of contact.

If you aren’t 100% happy with your accountant, change them as soon as possible. This is your business so you must do what is best for your business and if your accountant doesn’t answer your questions then change them.

Keep track of all the invoices you send and the receipts that you get every time a invoice is paid by an agency. When agencies pay your invoice they usually send a receipt, keep it and keep a spreadsheet to track which invoices go with which receipts (not all agencies put the invoice ref on the receipt).

Have a good accounting system, spreadsheets are ok but a good accounting system like Freeagent are really helpful.

If possible get the agency to pay weekly, it keeps money coming into your business account and if you get bills coming like VAT bills or corporation tax you have the money there to pay and you aren’t waiting for invoices to be paid once a month.

Learn to be able to sell yourself to agencies, while they can be a pain they are also help get you work so a means to a end.

So far I have enjoyed being a contractor I’m not suck in a role that I’m not enjoying, I have more control over the work I do and what technologies I work with.

But you have to remember that you are running a business and it’s your business so you have to make decisions that help make your business grow. Something I’m still learning.


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...