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