23/10/2014

Email clients for Android and hopes for Google Inbox

Over the years I've tried a number of email clients on my Android phones. I've used MailBox, CloudMagic and the default Gmail client. Now Google is about to release a new Gmail client which looks really interesting. I've just sent off my request for an invite to use Inbox, hopefully I'll get one.

One thing I do use a lot in Gmail is labels, I have a number of them for the different type of emails that I get, ones for newsletters, ones from agencies and friends. For each label I have a filter that automatically puts any email that comes in with its label, sometimes completely skipping the Inbox.

When I was using MailBox (which from time to time I go back to) the main problem I did have with it was that it didn't support the label/filter system that I already had in place. I do like the MailBox feature that allows you to mange your emails, e.g. snooze your emails, read at the weekend etc. All great features, but I would like to be able to manage an incoming email, then forward to one of the labels I already have set up in case I need to find it later.

Hopefully Google Inbox still supports the labels I've got set up, if not then maybe I should change how I manage my email then Google Inbox or MailBox will be ideal.

06/10/2014

Ionic app coming along

Lately I've been working on my first Ionic based app, I've found that working those 20 minutes I have on the train into London,really helps in getting that consistency that is needed to get a side project going.

The app I'm working on is for martial artists to record short videos of techniques they are shown in class. Then later they can go back review the video of a technique and remind themselves of how it should go before they go to their class. A lot of martial artists I know watch a lot of technique videos on YouTube and spend a lot of time searching for videos that show the current technique they are learning, even if it is being demonstrated by someone other than their instructor. So my idea is to allow them to create their own personal video library that the can refer back to.

The app has two main views, the first is where they can add a title and the date of the video entry they are going to make and the second view is of all the saved videos they've made ordered by date.

The first problem I had when starting development was how to manage the navigation between screens. I was use to the way jQuerymobile handles this by creating complete pages all with a header that is repeated in each separate page. Ionic doesn't do this, and I needed a way to have multiple pages and be able to navigate back and forth between views.

I found some great examples on Codepen.io one of them showed how to use views within Ionic and manage the navigation between view using the ion-view directive.

So my application is made up of a series of templates, each containing a ion-view component that loads into the ion-view component within my main index page. The ion-nav-view component keeps track of the current view and can navigate back to the previous view when the user clicks on the back arrow.

One of the things I love about Ionic is how it uses smooth CSS3 animations for the transitions between views, all that are available by default. Transitions don't need to be set up as they do in jQuerymobile.



07/09/2014

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.

24/08/2014

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.

21/07/2014

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.


17/04/2014

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.

05/11/2013

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
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/javascripts/bootstrap.min.css')
  body
    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.