Viewing entries in
Projects

4 weeks of Forge, Hammer and Anvil

It's been 4 weeks since I officially took over Hammer, Forge and Anvil, so I thought I'd write up some notes on the experience, things I've learned and encountered along the way.

The beauty of this acquisition was that there were already a fairly healthy bunch of users already using the platform, and some of them were also paying for the service. Before I set about writing a single line of code, I wanted to learn as much as possible as I could about how people were using the products, so I did a few things:

Communicating With Customers

By setting up Hootsuite to manage the Social Accounts

Each of the products has its own twitter account - @getforge @hammerformac @anvilformac. Along with my own personal twitter account and the new Twitter account I created for Beach (since Beach replaced my old service company Double Digital), this is setting up to be a Social Media Management pain in butt.

We don't employ anyone to manage our own social media full time, so it means we typically do our own social media pretty poorly. With Forge, there's a number of ways to communicate with our customers, but with Hammer and Anvil, it's much more difficult as we don't know who they are.

So, Twitter is a very important channel, until I can establish Forge as the main platform for all of our customers to use with whichever Beach product they are using.

Using Hootsuite at least gives me a fighting chance to keep on top of @replies and mentions, support requests and product feedback.

It was particularly useful when Forge went down a few times, to relay important platform status information and therefore limit the customer support requests that would inevitably come in.

 

Getting to Know Our Customers

By installing Intercom into Forge

One of my favourite products, one I've used on all of my products since way back in 2012, is Intercom. The first thing I did on Forge was install it and start talking to customers directly. I made sure I was on hand to respond quickly and thoroughly to all users of the service, to really understand what they thought of Forge and what their concerns were. 

 

The main support requests I received related to Deployments getting stuck. Sometimes this happens and users would just see the endless spinner syndrome - not a great experience. Most of the time, it's due to something fairly innocuous in the uploaded archive, but also the deployment just fails sometimes and can easily be fixed with an intervention on the technical support side.

Forge is actually doing quite a bit of work behind the scenes whilst the site is deploying, and it's great that this is invisible to users most of the time, but when things do go wrong, it's also really important to provide enough information to be useful in understanding what's gone wrong and how it can be fixed. Watch out for some improvements coming in that area soon, including some slightly more elegant logging and console tools.

 

 

Understanding Our Value

By creating a survey on Typeform

I issued a very simple customer survey via one of my favourite products of the moment, Typeform. This gave me a very impactful way to understand the challenge ahead of me. I wasn't really sure how existing customers felt about our products right now and I felt I needed some insight to better approach the future.

The feedback from customers was very consistent. There was a genuine love of the products, the design and simplicity of how the products went about their business. It's shown me just how important it will be to keep this guiding principal as I start to evolve the products.

There was, understandably, an overall tone of frustration. People were on the cusp of giving up all hope that these products would still be alive in the days or weeks to come. So, I was met with some scepticism, but genuine optimism at someone new stepping up and taking these products over. People really loved Hammer, and I think, would really like to love it again. 

 

Championing Our Customers

By creating a customer showcase

There are some super smart, incredibly creative people people using our products to do amazing things and that makes me so proud. I'm a big fan of championing customers, making them the stars of the show.

My first step was to reach out to those I'd identified and invite those who felt they related to the idea, to showcase their profiles on the Forge website. It was fascinating to understand how they use and love our products in their daily workflow, some relying on all three - Hammer, Forge and Anvil, whereas others really only relying on just one product. That's fine, but it's crucial in my eyes that everyone is celebrated for the great work they do and to inspire others.

The first 4 went up last week and I'm build out applications from many more customers, all of whom I'm incredibly envious of their talents.

I'll be publishing more in depth interviews and profiles on each of them very soon on the Forge blog, which will be the main resource for updates and news about each of our products.

 

Working on the Roadmaps

By creating public roadmaps on Trello

I've always been a fan of bringing ideas out into the open and sharing in how those ideas evolve and get implemented into products. So, it was a no-brainer for me to firstly establish the principal of public roadmaps for these products. Trello is my go to choice, since I already use it daily for managing internal product development tasks.

The feedback I received from the Customer Survey and from directly talking to people through Intercom, all goes into these boards, starting with the one for Forge.

 

Users and Customers are free to add ideas, comment and vote on others which helps me to understand demand and prioritise our workflow. It always takes a bit of time for people to get into the habit of contributing directly here, but is an area I really hope will build out organically as we gather momentum.

In August I'll be releasing the Hammer roadmap for people to contribute and stay informed on the progress.

 

Learning About Our Business

 Using Stripe, Chart Mogul and App Figures

We use Stripe for processing payments on Forge. For Hammer, we rely on the Mac App Store.

Both of these services are very well served by some supporting services that provide a way of looking at the data to get a better understanding of the nature of your business, instead of purely looking at timeline transactional data, but looking in terms of your key metrics.

Until I figure out what our "2000 Users" killer metric is, I'm really interested in understanding how new customers find our products (funnel), which product they choose to buy (pricing model) and how long they stay for (churn).

Screen Shot 2015-07-20 at 13.24.16.png

 

I found that Chart Mogul is a great service for making the most of Stripe data, though I also quite like the native Stripe apps. Chart Mogul provides information in relation to churn rates, and when I get deeper into this, I'm sure will provide much more value still.

The App Store data via iTunes Connect is typically crappy, so I'm using AppFigures for tracking the performance of Hammer. Despite the obvious frustration since stagnating the development, people are still downloading the tool and still love it. So, I'm really hopeful that when I get into the next version development, we can re-establish the trust and passion for Hammer that it once showed such promise for.

Through this initial research, I made some quick decisions on evolving our pricing model. I felt that the free version was too generous and creating too much of a comfortable zone for new users to exist in. Instead of the 5GB limit, I reduced it to 1GB. 

The $10 plan, I felt was also not driving enough value to prompt people to take that big step of putting their hands in their pockets to pay for the service, so I doubled the number of sites that can be created from 5 to 10.

I didn't think there was then enough of a significant difference in value from the basic plan to the paid plan, so I took a big step to remove the limit on sites entirely - you can create unlimited sites with custom domain for $50 per month.

A big feature of each of the paid plans is the Customer Support. It was never something that was really part of the feature set, but hopefully I've made a successful attempt to establish my intention to ensure that we really focus on supporting our customers, through all of the tools that we have available.

 

Tackling the Crooks

Using Intercom and Rack::Attack to block the crims.

All of a sudden, Forge went down. Panic. Was it something I did? I'm still figuring my around the stack, did I botch up the CDN settings? Did I knock out an EC2 instance? Arrghhh.

Turns out, no.

As I was getting to learn about the Forge user base, I discovered that there were around 100 accounts registered on the platform with Nigerian locales. On deeper inspection, it turns out that many of these accounts were using Forge to create suspected phishing sites and Amazon weren't thrilled about it.

Once I figured this out, I went through and removed offending accounts, sites and established some rules for new user signups to prevent this type of thing happening again. 

One way is simply to monitor the new account registration activity, this is time consuming, but a very important exercise to understand how people are using Forge. Intercom is a great tool for this, particularly when I have it setup to fire notifications into a dedicated Slack channel.

The other way is to maintain an active blacklist of IP addresses, using Rack::Attack.

I have a feeling this wont be the last we see of this issue, the virtues of a free account service, but we will monitor and do our best to prevent breaches of our terms of service.

 


So, that's an overview of some the main aspects of what we've been working on the past few weeks - I wont bore you with the drudgery of actually managing a transition of tech from one party to another.

I'm very excited that we're now starting to pick up the challenges of some of the Forge roadmap, from stabilising and updating the underlying technology, improving performance of existing critical features and starting some new shiny things too.




Hackbmth10 - A VERY HACKBMTH CHRISTMAS

Hackbmth10 - A VERY HACKBMTH CHRISTMAS

Today's christmas festivities were celebrated in the form of a bit of hacktastic skullduggery, in the form of an overdue get together of Bournemouth's finest coders, hosted by our friends at RedWeb.

I decided, given the festive season, to take some time to get acquainted with SpriteKit and build out the game idea that I had been conceptualising with my little 3 year old son Rudi.

The game, a Disney Cars inspired shoot em up, where Rudi, the games main protagonist, gets to fire his warchest of cars toys at the oncoming Tyger (Rudi's one year old brother). The premise of the game, to provide a virtualised outlet for Rudi to satisfy his insatiable urge to throw things, whilst teaching him the appropriateness of his actions in real world and virtual settings.

I set the game scene up quickly, based on a fairly generic xcode SpriteKit game template and the very entry level tutorial from Ray Wenderlich.

The main customisations I made, aside from the graphical components, were features driven by requests from my son.

1. "Daddy, can I throw different Cars?" 

The initial game setup just had a single projectile type, the obvious Lightning McQueen. So one of the first orders of business, was to create a full armoury of projectiles, of our favourite Cars characters.  First request was for Professor Z, and not content for long, I added 9 different options. 

I setup a UIVIew container, and placed the UIButton outlets inside it. I created a UIButton *menuButton which would have a background image that reflected the currently selected image. When the menuButton is pressed the weapon drawer will toggle open and closed.

2. Unlocking Weapons

It would be all too boring to just put all the projectile types in the tray from the start. Instead, I setup a simple game mechanic that involved unlocking the projectile types when a certain number of hits had been achieved. Whenever 

projectile:(SKSpriteNode *)projectile didCollideWithMonster:(SKSpriteNode *)monster

is called, the int pointsCounter is incremented and the score label text updated. We also save the score to the NSUserDefaults.

- (void)projectile:(SKSpriteNode *)projectile didCollideWithMonster:(SKSpriteNode *)monster {

NSLog(@"Hit");
[projectile removeFromParent];
[monster removeFromParent];
counter++;
if (updateLabel == NO) {
updateLabel = YES;
}
[self updateUserDefaults];
[self loadProjectiles];
}

3. "Daddy, can I move myself?"

I enabled Core Motion, to access the accelerometer to enable using the tilt of the device to move the Rudi character up and down, whilst firing at the on coming baddies.

I found this tutorial to be quite helpful here:

What next?

There's still much to do before the game will be accepted by its harshest critic. Some of the next things will be:

  • Fix some bugs with current physicsBody affecting the Player node.
  • Use SKParticleEmitter to create collision explosions, projectile trails, and smoke.
  • Create levels
  • Give projectiles different properties and behaviours.
  • Parallax for background scene to provide some depth

Thanks to the internet for providing the images and other such assets.

If Snapchat and Tinder weren't evil || Lumpy - iOS App (part 2)

Then they'd probably do something like this....

A while ago, I wrote a post about a particular product hypothesis I had. I won't regurgitate the underlying rationale and background research, but needless to say, I think it's compelling enough. Since that time I've been pretty full-on building my startup Nuwe & consulting at Nourishcare.

But, a couple of incidents recently brought back to my attention this concept and I've decided to flesh it out a bit more. Today peoples, we're fighting cancer. And broken bones. And probably other things, but let's stay humble for the time being.

A few weeks ago, we were on a family holiday to Center Parcs. Near the end of the holiday, my 3 year old son, Rudi, fell off a coffee table and hurt his arm. It was clearly painful, and despite continuing to cycle and swim, he was also clearly carrying his arm in a way as to relieve the pain. When we got home, we took him to the doctor, who assessed and prodded and poked and, reticent to x-ray a 3 year old, advised us to monitor the situation. My wife and I asked each other 10's of times, whether we should take him for an x-ray, it clearly wasn't right. We asked each other, we asked other members of the family. We asked and asked and asked.

A few days later, we decided to take Rudi to A&E, and it turned out, he had a broken collar bone!

A week later, my wife went on a spa day with her girlfirends. Much to my amusement, she came hobbling home, having slipped getting into the jacuzzi and couldn't walk. A few days later and her ankle was purple. Again, the questions started - should I get it checked out? is it broken? 

How often must this happen? How often must this be needed but the person doesn't have anyone to ask? These are questions that tickle my interest.

What have Snapchat & Tinder Got To Do With This?

Does a day go by without seeing some rip-off of a snapchat or tinder type feature, UI approach or app clone? Well, don't expect anything different from me. Let's get all popular culture and ask ourselves "WHAT IF"?

What if, Tinder's amazingly engaging and simple gesture based UI could be put to use for more promising purposes?

What if, Snapchat's ephemeral messaging system that is popularly used for kids sharing naked photos of each other could be used to encourage sharing of sensitive visual information - such as photos of suspect moles, skin blemishes, lumps, bruises, potential broken bones - things we want to share, should share, but can't?

How does it work?

1. User takes a photo of a suspect skin blemish, mole, bruise, lump - something that's concerning them and they just want to invite feedback from family, friends, or the general public.

2. User selects the people they want to receive a very simple binary response - yes/no -which aims to answer the question "should I get it checked out?"

3. The responder receives the message into the person inbox, and is notified via push notification and if not responded after an amount of time, receives an email to their inbox.

4. The responder selects the message, which loads the message details. This contains the image "card" ala Tinder. The message will be visible for 15 seconds, encouraging the recipient to respond with their "gut" reaction and not to dwell / risk dropout and non-response.

5. The message will self-destruct after the timer runs out, and the message will no longer be visible to the recipient. Attempts to take screenshots using the camera will trigger the view to close before screenshot is taken.

6. The user can then embellish their response with additional notes and comments - personal experiences, words of encouragement, advice etc.

7. The user is notified when responses are received, and can view a summary of the responses on the message detail view, helping them to decide what action to take next.

8. Users can configure their settings to ensure their images are also deleted from the server, or retained on the server for their own personal future use and also for the benefits of research and visual recognition and machine learning for predictive diagnosis of skin conditions and injuries.







Take a photo or video

Select the recipients

Recipients received requests to their inbox

Time to Vote - who does it look?

See the results

Next Steps...

Next we have to validate this concept with our target audience, and for that we need to start to hypothesis who that will be, how to reach them, what they might pay (if they will) for the service, how much they'll cost to reach and a billion other questions...

10 Tips for Building Wireframes

10 Tips for Building Wireframes

I have been learning to create low and high fidelity wireframes for both mobile and web devices. There are a variety of different tools you can use to create these wireframes like Illustrator, Photoshop and Sketch ( only available on Mac ). I have been using Sketch 3 to wireframe as its a simple combination of both illustrator and photoshop. 

More and more designers are using vectors for wire framing. The following tips will help you make the most of your wire framing experience. 

Wire framing is about working rapidly and iterating quickly. The aim is not to create attractive interfaces; your number one priority is to design information and experience. 

Below are 10 tips that i believe to be important when designing wire frames. 

1.  Start Sketching

Sketch them first with pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on sketches if they're for user tests). 

2. Go Monochrome

Wireframes make clear the hierarchy on a web page; they visually demonstrate the order in which users should process the available information. If you want users to process the headline before hitting the "buy now" button, the headline needs to "trump" the button by demanding more attention.

This visual hierarchy can be defined in a number of ways. We could use size to make the headline more impactful, we could use positioning (by placing it before the button). We could use colour, contrast and a range of other things, but doing so in a wireframe only makes things more confusing.

By removing colour from the equation, the visual relationship defined by position, size and (if you want to go the extra step) contrast, is much cleaner.

We're not building pretty, pixel perfect UI kits here. Stick to a limited range of greys, then use color just for labels and notes. 

3. Don't forget the goals of the page 

Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organise the information into hierarchy that serves the goal of the page. 

4. Pick Your End Point

Prior to commencement, work out who will be consuming the wireframes, how they'll consume and what what level of fidelity is required. Remember that theres a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you think they look perfect designers may feel inhibited and merely "colour in" the wireframes, preventing the design process from really getting going. 

5. Keep the rest of the team informed

Wire frames are not just for the client. All members of the web team should provide feedback on them, buying into the process at an early stage.

syd-creative-team.jpg

6. Use common elements

When designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you're creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency. 

7. Consider the content

If your wireframe aren't sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links and navigation. If practical use accurate sized fonts, images and consider what will happen when more text then ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required. 

8. Draw on your experience

You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.

9. Keep it clean

If a particular page requires two text boxes and a button then it should have just that, no more, no less.

10. Get feedback 

I have learnt not to be afraid to test your wireframes with a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of the certain elements is. 

 

 

 

 

 

 

 

 

 

 

 

 

 

Factual & Rails || Grabbing UPC Product Data

We're heads down creating the next significant iteration of Nutribu, our nutrition tracking app. It's nearly ready, and we're dead excited.

Nutribu is being re-imagined to make tracking what you eat, still a very manual process which is unavoidable despite the numerous tech gimmicks you may have seen to help automate the process. So, we're focussing making it simple, fun and dead easy to find what you're eating and capture it in order that you can track your nutrition against your goals.

One area that users really wanted, and isn't really a new feature as it's often touted as one of the best features of apps like MyFitnessPal, is the ability to scan a UPC product barcode and instantly return the product complete with nutritional information. I can tell you now, the new Nutribu will have that too. Yay!!!

Actually, now I'll show you how to implement such a feature into your own app, starting with the server side component of fetching and storing product information from a service like Factual.

Before you do anything, head over to Factual and grab an API key and secret.

1. There's a Gem for that, of course.

gem 'factual-api'

2. Write tests.

Note: We use VCR to optimise the testing of HTTP interactions.

products_controller_spec.rb
require 'spec_helper'

describe V1::ProductsController do
  
  include_context "signed up user"
  include_context "api token authentication"
  
  describe "show" do
    let(:product) { Product.new(name: "Stone Crop Body Lotion", brand: "Eminence", upc: "608866337447") }
    def get_product
      VCR.use_cassette('factualapi') do
        get "/v1/products/#{product.upc}.json", nil, token_auth
      end
    end
    it "returns status 200" do
      get_product
      expect(response.status).to eq(200)
    end

    it "contains the product info" do
      get_product
      body = JSON.parse(response.body)
      expect(body["name"]).to eq(product.name)
      
    end
    
    context "product does not exists in in-house db" do
      it "create a new product in db" do
        
      end
    end
  end
end

3. Generate Products Model

$rails g model Product name brand weight:integer upc

class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :name
      t.string :brand
      t.integer :weight
      t.string :upc
      
      t.timestamps
    end
  end
end

4. Generate a Model for Product Image

$rails g model Image image:attachment product:references
class Image < ActiveRecord::Migration
  def change
    create_table :images do |t|
      t.references :product
      t.attachment :image
    end
  end
end

5. Update Routes.rb

...

resources :products

...

6. Product Model and Validations

app/models/product.rb

class Product < ActiveRecord::Base
  validates_presence_of :name
  validates_presence_of :upc
  validates_uniqueness_of :upc
  has_many :images
end

7. Image Model & Validations

This one is somewhat more involved. We use Paperclip

#todo include explanation for this.

app/models/image.rb

class Image < ActiveRecord::Base
  
  has_attached_file :image
  belongs_to :product
  validates_attachment_content_type :image, :content_type => /\Aimage/
  
  def file_from_url(url)
    self.image = download_remote_file(url)
  end
 
  private
  
  def download_remote_file(url)
    # OpenURI extends Kernel.open to handle URLs as files
    io = open(url)
    
    # overrides Paperclip::Upfile#original_filename;
    # we are creating a singleton method on specific object ('io')
    def io.original_filename
      base_uri.path.split('/').last
    end
    
    io.original_filename.blank? ? nil : io
  end
end

8. The Product Controller

# Update an existing user's profile.
# Requires a valid API token.
class V1::ProductsController < V1::BaseController

  before_action :authenticate

  def show
    result = FetchProduct.perform({upc: params[:id]})
    if result.success?
      render json: result.product
    else
      render json: {error: {message: result.message}}, status: result.status
    end
  end

end


9. The FetchProduct Interactor

We use Interactors to add a layer of abstraction between our models and controllers - especially useful when performing complex interactions in a single request.

Basically, how we want this to work, is to initially check our own database to see if the product already exists, if not route the request to Factual to get the data, return and store it in our db, so the next request can just fetch it from our local store.

app / interactors / fetch_product.rb

class FetchProduct
  require 'factual'
  include Interactor
  attr_reader :status
  attr_reader :product
  
  def perform
    product = Product.find_by_upc(context[:upc])
    if product.present?
      @status = :found
      context[:product] = product
    else
      # could not find this product in our db, find it on factual db
      factual = Factual.new(ENV['FACTUAL_KEY'], ENV['FACTUAL_SECRET'])
      raw_data = factual.table("products-cpg").filters("upc" => upc).last
      
      # this should be put in a worker, then what will we return for the first time? not_found?
      if raw_data.present?
        # create product from raw data
        product = Product.create({name: raw_data["product_name"], brand: raw_data["brand"], upc: raw_data["upc"]})
        raw_data["image_urls"].each do |url|
          image = product.images.create()
          image.file_from_url(url)
        end
        @product = product
        @status = :found
      else
        context.fail! message: "could not find product info"
        @status = :not_found
      end
    end
  end
end


Raspberry Pi || Sending POST requests to a web service with python

Yesterday I spent a few hours getting acquainted with my Raspberry Pi.

The mission, was to simply setup the Pi, create a simple script to write some output, to a text file. Then, to create a cron job to process that script every few minutes. After that, I would get acquainted with Python modules, firstly by getting the current time and outputting that to the log.

Finally, constructing a POST request to a 3rd party web service to send that timestamp to.

What we did:

Using Python version 2.7.3rc2 on a Raspberry Pi, running Raspian distribution of Linux.

We first got a simple python script writing to a text file, getting the current time using the python Time module and appending it to the file contents. 

import time

f = open('/path/to/folder/test/log', 'a')
# current_time = time.asctime( time.localtime(time.time()) )
current_time = time.strftime('%I:%M%p %Z on %b %d, %Y')
f.write(current_time + '\n')

f.close()


Then we created a cron script to run on boot of the Pi and then every 2 minutes, to run the python script. 

$ sudo crontab -e
# m h  dom mon dow   command
*/2 * * * * python /path/to/folder/test/add_note.py
@reboot python /path/to/folder/test/add_note.py

From there, we constructed a POST request to the nourish staging (old) Notes endpoint, firstly via the Python shell (IDLE) which comes with the Raspian distribution of Linux. 


Key here was the use of two further Python modules: urllib and urllib2 


import time
import urllib
import urllib2

url = "http://api.someservice.co.uk/api/v2/notes/?auth_token=XXXXXXXXXXXXX"

current_time = time.strftime('%I:%M%p %Z on %b %d, %Y')
date = current_time
post_data_dictionary = {'log[person_id]':12, 'log[user_id]':67, 'log[text]':current_time}
post_data_encoded = urllib.urlencode(post_data_dictionary)
request_object = urllib2.Request(url, post_data_encoded)
response = urllib2.urlopen(request_object)
html_string = response.read()

f = open('/path/to/file/test/log', 'a')
f.write(html_string + '\n')
f.close()

Note that in Python 3, urllib2 has been merged into urllib, so no need to declare both in that case. 

I then updated the cron to process this file and refactored the script a bit. 

Authentication just passes the auth token as a param, so need to improve there. 

Next step is to get the actual data via an analogue to digital converter, and interface to the Pi, via SPI. We want to end up with a self contained RJ45 which interfaces directly to a pressure sensor for bed or chair interactions. 

We also need to change the location that this data is sent to, either the existing mongodb or some other suitable data storage, which can then be interrogated and queried at will by a caffeine fuelled CEO. 

Team Treehouse

Team Treehouse

A key part of my structured training, has been to learn the fundamentals of web design - encompassing HTML & CSS.  And to learn this, I've been using Treehouse.

Treehouse, a leading online education provider,  seeks to help prospective coders become great coders by providing a rich library of over 600+ videos organised into specific learning tracks, along with interactive quizzes and code challenges. Treehouse provides deep and high quality training in HTML, CSS, Javascript, User Experience, as well as Back-End development in Ruby, PHP, iPhone and Android applications.

I have found it a truly enjoyable experience learning on Treehouse; its simple, effective, and offers so much for the learner to get to grips with. 

Along the journey you get to create projects that help you to understand the process. The first thing I created was a single page website for a bakery company called "Smells like Bakin". It took you through all the coding and then they give you a quiz at the end of each little section to make sure you understand what they've been teaching. Then, after that, there's a code challenge where they ask you to code yourself what they have taught you, via the online code editor, to start creating your web page. 

Screen Shot 2014-02-28 at 13.12.51.png

So this was the first project I built through Treehouse, which covered all the basics in HTML and CSS. 

The next stage works on other basics including tables, charts, links, text, lists, objects and forms, again at the end of each of these you have to take a quiz and a code quiz to show you have grasped the fundamentals, I find it really easy to learn from this and has helped a lot in giving me some foundational knowledge of how websites are made and the challenges we face when designing and building for the web. 

The next module will be learning more advanced HTML and CSS that I will be able to add to the Project to make the website more dynamic and engaging. 

 

Reigniting an Old Flame || Fuelr

When I was 18 (I think, it was such a frickin' long time ago), I used to sit in office buildings for 12 hours straight, working site security to pay for my university fees (well, beer money). I was fascinated by the idea of offering prescribed physical activity for people with chronic conditions, and for the prevention of disease in at-risk populations. 

I had completed a module in my sports studies degree, on this very subject. The NHS had not long released the framework for quality assurance, for the prescription of exercise and exercise referral schemes.

I used to write business plan after business plan, how I would construct a company to offer such services. I would talk to GPs and practise managers. I would do cashflow forecasts and P&Ls. I would research the equipment needs, and create startup cost budgets. 

Then I did nothing about it. Until now. 14 years later.

Not only am I now working on a next-generation Social Care platform, which is all about re-enablement and self-management of conditions, but I'm also working on a health and wellness platform for tracking and improving your overall wellbeing, by improving your knowledge and behaviour through the use of smart technologies and connected devices. I am now positioned to build something that does what I wanted, only a decade ago.

But, this is not the same plan - such has been the journey and has lead me back to this point. My education, in particular over the past 4 - 5 years, has armed me with what I was missing back then.

- Technical skills and the ability to execute.

- The mental processes that force me to ship a product

- Confirmation that my passion for this space is unyielding.

- Knowledge of a global market opportunity, enabled through technology, for distribution and scaleable business models.

The original idea was nice. But it wasn't scaleable. It was a lifestyle business idea, like a hairdressers, or an activity centre owner, or a restaurant owner.

I was in San Francisco 2 years ago, when I saw the idea, realised, working and gaining traction. A US startup called Wello had pulled together nascent real time video streaming protocols, such as webRTC, and modern web application development techniques, to offer a marketplace for exercise professionals.

 

Go to the site, and you can take part in pilates, yoga, circuits, cross-training, strength training... you name it. Delivered by real experts, in real time, at any time, wherever you or they are.

Now, this really appeals to me, both conceptually and technically.

So, this thread of posts is going to follow my exploration into building a very similar service offering, with I think, some key differentiators. We'll tackle the main technical concepts, including:

  • Building a web services / API using Ruby on Rails
  • Building a native iOS application, specifically for iPad
  • Using webRTC and the different options available to make this easier
  • Creating an admin area for the business
  • Creating the web application front end views

 

 

 

The Build | Websters Wheelchairs

The Build | Websters Wheelchairs

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Following on from designing and building a brief for Websters, it is time to get stuck in and build the code.

It used to be that much of the design process was conducted with static graphic designs, produced in photoshop or fireworks - finally being handed off from the “web designer” to the “web developer” to convert the static designs into valid html and css.

Today is different. I’m a strong believer that there is no difference between a graphic designer and web developer when it comes to implementing front end web designs. Designers have to code, coders have to design.

So, the sooner we get into code, the better - particularly when you consider other challenges front end developers face, particularly when developing websites that will work effectively across the myriad of devices and display sizes that we now have to work with. It’s much easier to work this out in code, that creating dozens of iterations in static graphic format.

We’ll get into some of the tools available to make this easier in the development stage - where we can build on popular design patterns for responsive websites.

So, in summary: Designers need to code, as early as possible in the design phase.

I have chosen to build this holding page, as I feel it has a really soft and modern design to it and follows today's trends within web design. 

I opened up Sublime text and created a new document where I will write my code. Secondly, I created a Websters folder in which I would store all the images and files I would need to build the page. 

Since it was a while ago that I last wrote some code, I felt I needed a refresh, so I went back onto the Lynda.com training course which I completed just under 2 months ago. This helped me to refresh on the basics, after which, I got on with coding the basics of the holding page. 

This is the HTML markup - which provides us with a structure of content for the page. After speaking to Steve, What I would like to do with the page requires quite a bit of Jquery and JavaScript which he is going to go through with me at some point. As It is only a single page, I haven't created a style sheet to attach to the page as I will be simply be able to edit and format the text etc in HTML. ( I hope). 

The next stage is to add CSS to the text and get it formatted "centrally". 




So, I have managed to figure out how to format that text to how I wanted it, it's not yet the correct fonts, but it is in the right place. which I'm happy with. The next stage is to add the background and effects to the photo via Photoshop, to give it the soft translucent feel to it which will be very eye catching and effective. 

 

Monday 3rd February: 

So today, I have been researching non standard web fonts and how to Code and implement them into my design to get the style and look I'm after. It has taken me a while to get my head around how to do it, looking at various forums such as http://stackoverflow.com/questions/7717734/using-non-standard-font-in-web-pages. 

Reading through articles and googling questions on how to code NSF into HTML and CSS, using the font-face attribute to stylise the font-family. I then visited the font-face website (http://www.font-face.com/) where I followed their simple instructions, and it just clicked. So I have now changed the standard web font to something more appealing to the eye, however I am going to change the font on the paragraph as I feel it is a little difficult to read But I do like how it looks on the "Coming Soon" heading. 

Below is the css I used to implement the non-standard font:

@font-face {

    font-family: pistara;

    src: http://www.dafont.com/pistara.font?text=Coming+Soon;

    font-weight:400;}

        h1 { 

             font-family: pistara;

            font-size: 40px;

            margin-top: 200px;

            text-align: center;}

I have come across a problem. Before I figured out to code non  standard fonts, I had worked out how to set an background-image using CSS however, when I input the code for the @fontface within the style, it erased my background image and turned the background white again, I have been trying to find why this has happened but have had no success yet. 

The next step is to work on the background image again and really get it looking to what I had hoped for. 

Today, I have been researching background images and have managed to go get the background to display correctly in the window, however now it is hiding all my text. I don't know if it is the way in which Im putting the code in order or wether it is something else, I have been moving it around but nothing seems to work. 

I have been lookingat trying two different techniques to implement my background image, the easiest way in which to do it I found was by:

Websters'

 #bg {

            position: fixed;

            top: 0;

            left: 0;

            /* preserve aspet ratio */

            min-width: 100%;

            min-height: 100%;}

here is a link which I used to help me solve the problem: http://css-tricks.com/perfect-full-page-background-image/

Try using Google Web fonts again.

If you add a font to your collection, you can do the following:

1. Add the stylesheet to your web page via a normal tag that you are used to. e.g.
’ < link href=’http://fonts.googleapis.com/css?family=Hammersmith+One’ rel=’stylesheet’ type=’text/css’ >’

You can copy and paste this from the google fonts library. As it says, make sure you paste it above your other stylesheets (order is important)

2. Use the correct “font-family” name in your CSS

font-family: ‘Hammersmith One’, sans-serif;

This will call the Hammersmith One font, and then fall back to browser default sans-serif font for unsupported browsers.

 

 

Creating a Design Brief

Creating a Design Brief

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Walking into the office this morning, Steve was waiting, ready to deliver his briefing for the day. 

To begin with, I was given just a verbal set of requirements by the client, in this case, that role was played by Steve. As with any creative brief, however it is delivered, is to ensure that all requirements and assumptions are captured in writing, and signed off to ensure alignment from all parties. So I went into Microsoft Word and created a very simple design brief to have as a hard copy and for reference. 

Once complete, I was to email this to the client for sign off. The next step was to do some research on themes and existing "coming soon" pages. I used Themeforest for this as it gives you hundreds of examples of layouts & themes. I find it a fantastic way to motivate myself and to get my creative juices flowing.

Below are some examples of theme's I found to be visually effective and stood out for me, you may see a slight pattern in the themes I have chosen. 

These pages have been sourced from: www.themeforest.net

Capture rageen.PNG

This Coming soon page is strong. The colours, the image, and the simple layout of the countdown timer work so well together, there's nothing really that I can say anything negative about. 

Capture V.PNG

This is very similar to the top image. Again, very strong with the dark image set behind and the countdown timer so customers can see how many days, hours etc they have until the site is re launched. They also give the opportunity for customers to sign up with an email input, contact button and a meet us button, which gives the customer some extra options for interaction. 

 

ultimate-coming-soon-page-example.png

Again, this image isn't as dark as the others but still gives it that intense effect, it's not as transparent but does still give the customers some interaction by allowing them to enter their email so they can be alerted when the site is launched.

@steve: I’d like to see a few more examples that you feel are sub-optimal and to hear your views on why they are not best practise.

The second part of the brief response is a cost plan, which details the top level milestones of the project and task level assignments. With a time estimate for each of these, we can build an accurate budget / cost estimate for the client sign off. Here is what I have specified:

Research: 

  1.        Researching examples of coming soon and maintenance pages
  •  2 hours x £20.00= £40.00   

       2.         Critique of Examples

  •   2 hours x £20.00= £40.00

       3.         Review of best practice

  •   1 hour  x £20.00=   £20.00

       4.        Create presentation and report findings

  •  2 hours x £20.00 = £40.00                   Sub Total= £140.00

 

Wire Framing:

  1. Create prototypes of web page 
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Design:

  1. Create the final Design of holding page
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Build:

  1.  Code website and format to final finished project.
  •  4 hours x £20.00 = £80.00                  Sub  Total= £80.00                 

                                                                                                                                       

Total =  £300.00

 

The next step of the task will to be create some prototypes / wireframes so I can place the main objects in place to see how the holding page will be structured, before finally coding the page so that I successfully get what I'm trying to create.

So today, I have been creating some prototype wireframes using Fluidui, so I can visualise how I would like the Page to look when I finally come to designing and building it. I will post images below of each page and give you critique on each one. 

 

So this is the original holding page that was created, it's very simple, but not very visually effective, it has all the important information, but the way in which it is formatted I find is just plain boring. It needs bringing up to date and made more visually exciting, here is what I have created below:

 

 

This is the first effort I created, I have gone with using a very strong background image, with a dark tint over the top of it to soften the colours this allows me to add the important information onto the page without any distraction being taken away from the picture. 

 

 This is the second prototype I have built. It consists of a large background image with someone in a wheelchair expressing their freedom while at the beach looking out to sea. I then used a translucent blur over the image to soften it so that you can really focus on the important information on the page. I really like the soft colours of the beach in the background, it's not to in your face and you can still read the main writing with ease. Fonts I have chosen is quicksand as it's very easy to read and very modern. I haven't yet added the logo of the company but I quite like it without, its clean and crisp, and when the customer reads the notice they will know who it is and what to do next. 


This is the final design I have created, its pretty different to the above two as I have used a solid image without softening or blurring it. However, I have added an alert over the top of it which creates a circular fade from centre to edges which you can see from the image. The picture of the wheelchair has been formatted to the left corner and the information has been aligned to the right, I'm not too sure about this design, It look's a bit dreary and dark. and my eyes are drawn firstly to the picture then the writing, whereas I think it should be vice versa. I may go back to this design and have a shuffle around with layers and formatting the layout. 

 

So, I have just edited the last prototype (as shown above),  I have moved the writing to be aligned centre, and added a translucent layer over the background, you can still make out that its a wheelchair, it's just not so harsh on the eye. and I also inserted a rectangular tab bar and inserted the link inside of that to break up the block of writing. I fell its visually more effective. 

 

The next stage is to look over these with Steve and get some feedback. Keep an eye out for an update. 

Schoey.

 



Into the eyes of the VC

Into the eyes of the VC

I created an Import feature for my old MySpareBrain charts to be brought into Braindu. One of my favourites is my curated collection of information about London VC's - notes, contact info, backgrounds, portfolios, office maps etc.

London Venture Capitalists

London Venture Capitalists

After the import, I was cleaning up and adjusting the icon images via the Braindu image adjustment feature, when I came to zoom in on the guys from Accel Ventures. Most of the images positions had defaulted to just show the eyes and some small additional facial features.

I found myself staring at the collection of eyes, wondering to myself what story they told, which eyes would I trust, which eyes would be welcoming to my story, which eyes offered a balance of critical thinking and supportive encouragement, which eyes would I want to stare into at a board meeting or over coffee?

Freak huh? Look at your VC in the eye and see what it tells you...

Take a look at my London VC Chart here if you like...

The "Thomas the Tank Engine" ethos to creating products.

usefulengine.jpg

Many of you will now think I've finally lost the plot. Probably a fair assessment.

For those of you, like me, with a 1 - 6 year old - you'll know exactly what I'm talking about before I even start talking about it.

The lesson I have learnt, from reading the same damn books a thousand times over and over again, listening to the same set of stories again via sky plus over and over again, is one overarching rule of thumb that I think we would all do very well to remember in our pursuit of technological and entrepreneurial greatness.

"Be a Really Useful Engine"

It really is about ensuring that the thing you are creating is ultimately REALLY useful for someone. Just one person. Hopefully a lot more people, and if it's really useful for one person chances are it's going to be such for a number of others too. Then, the only question is how many?

Thomas and friends frequently find themselves spewing off onto a tangent, normally driven by the pursuit of fun, a short term, short lived thrill-seeking journey that normally ends with some form of disapproval from the one Sir Toppum Hat. It normally is followed by the wrong-doing engine putting right, by remembering that whilst it's fun to: 

  • Play tricks
  • Speed along the tracks
  • Annoy farm animals
  • etc.

It's even more important to be a Really Useful Engine.

So next time you think it's a great idea to build another geo-location checkin app, a facebook for chefs, an airBnB for dogs... ask yourself. Is it REALLY USEFUL?

Nike Fuel - Dashboard

This weekend it was my birthday. 32 (gulp).

I spent friday night and a few sneaky hours here and there playing around with my relatively new Nike Fuelband and the Nike+ API.

I wanted to see if I could build my own dashboard for displaying my fuel score and other key metrics.

Here's the result

There's a few things going on in here.

First up, the basics:

I used Twitter Bootstrap & HTML5 Boilerplate to create my HTML, CSS and a little jQuery.

API Integration:

I'm using two different techniques here, both using PHP.

First up is Schitzel's NikeFuelBandAPI scripts, which parse the HTML pages of the Nike+ site to display some interesting data. You can see the result on the right hand side of the page - 

  • Last full day Fuel Points (there's some logic behind this)
  • Daily Target Fuel Points
  • Total Daily Calories
  • Total Daily Steps
  • Total Daily Active Time

The logic behind this is basically to find the last full day's points - so most recent day will only ever be yesterday (since today isn't complete until it becomes yesterday).

The logic recursively goes back through the days in the week to find the last full day, and even then into previous weeks.

I'm not going to post their code here, please do check out the Github Repo

It's quite straightforward to integrate. I really just worked out which variables I wanted to create from the array returned by their main object $my_full_activity, e.g. 

$fuelPoints = $my_full_activity->value;

$dailyGoal = $my_full_activity->dailyGoal;

$activeTime = $my_full_activity->activeTime;

I also converted the $activeTime to hours/minutes format

function activeTimeFormatted($time, $format = '%d:%d') {
settype($time, 'integer');
if ($time < 1) {
return;
}
$hours = floor($time/60);
$minutes = $time%60;
return sprintf($format, $hours, $minutes);
}

Next I decided to display the day's Fuel Points earned expressed as a percentage of the daily target. I found a really nice bunch of charts, built for Raphaeljs (we've been using Raphael quite a bit for Braindu recently), by Josh Carver, called Raphy.

Again, this was pretty easy to hook up and just added my new variable $fuelPercent as an attribute in creating the Chart percentage. The chart format doesn't like values more than 100%, it kind screws with the animation / shape position, so I had to limit it to showing 100% if Daily Fuel points exceeded the Target amount.

Finally, I used Bootstrap's alerts and a small "IF" statement to show different messages if I has exceeded my target or like a lemon, failed to hit the poxy 3000 fuelpoints (I have failed a few times - turns out sitting at my desk all day doesn't do much for the points).

<?php if ($fuelPercent >= 100) {
echo "<div id='alert-success' class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong>Woo Hoo!</strong> You're on fire! Great Job.</div>";
} else {
echo "<div id='alert-fail' class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong>D'oh!</strong> You've got some catching up to do Lardy!</div>";
}
?>

Second up, I wanted to dig a bit deeper into the newer Nike+ API to get some more detailed stats, in particular, my total cumulative points total, my current streak and some working averages (day/week).

Nike have recently updated the API, but it's far from complete. They talk about using an Authentication protocol, but as yet that hasn't been released. Perhaps they're waiting for the first Nike+ Accelerator programme to bear fruit before updating for mass consumption.

In the meantime, I came across a very helpful integration provided by dmyers2004. Once again using a PHP include, I can access the API via my Token created at the Nike developer portal.

Then, like before, it's just about selecting which values you wish to extract from the arrays available. dmyers2004 kindly provides some template methods for returning Sports, Activities, specifics on Activities and GPS data. Pretty cool!

My plan is to try and add in some basic nutritional information from another service, of which I've started playing with a couple. The goal being to show alongside this info - the what is going out of the body - the quantification of what's going in.

What do you think?

Braindu - Collect, Organise and Share Information to Learn.

Well, I thought it was about time I show you what I've been up to for the past 6 weeks or so and I'm very excited to show you because it's been one hell of a ride.

Ever since I wrote this post, updating you on the changes at MySpareBrain, it's been all about the new project. Braindu was born.

The Braindu Product Website

Braindu continues and builds upon the work I was doing previously, but takes a more refined and targeted approach to providing a platform for collecting, organising, managing an sharing information - not only as an individual, but collaboratively.

The key here is balancing features and functionality with simplicity & elegance of design - a constant trade off that we must remain cognisant of.

I'll follow up in more detail about some of the new technologies, new features and functionality as they are added, as we build up to a more publicly accessible product launch. But here's a little teaser of the new application's core interface.

Working the Brain Illustrations

These were a couple of illustrations that I did, which unfortunately, never got to see the light of day as they were intended as kind of tongue-in-cheek graphical treatment  as part of a design update to the MySpareBrain platform. It was intended to soften the technical side of what is quite a complex product to explain. Unfortunately, they never saw the light of day, but nonetheless, I'll post them here so they at least get their 5 minutes...

An early sketch of the Brain Lab scene

Early sketch of the Brain Conveyor Scene

First Brain Conveyor concept. Some felt finely slicing the grey matter was a bit gross. I liked it... ;)

The alternative? Why shrinking brains of course!

And here we are, the Mad Scientists at work. That was my last 12 months, I even have the lab coat!

Building a Startup Team - Build a better you.

You may have heard me explain my philosophy for building teams before. If you haven't, it's fairly simple.

Identify the resources I need, define & allocate roles and then hire people that are better than me to fill those roles.

As a startup entrepreneur I know that at the beginning, I need to fill multiple roles and show competence, heck even some degree of excellence, at more than one of them at a time. This applies to design, sales, marketing, finance or product development - all of which I have done myself or recruited/outsourced for.

I also have a clear understanding of where my abilities do not come up to scratch and I am very cognisant of my shortcomings. So, hiring for some roles has been easy, such as in engineering for example, as the benchmark I set was pretty low.

It was only 4 years ago that I didn't have a clue how to create a website. I shudder at my lack of knowledge as I blindly blundered my way into building a social network with only my passion for adventure sports and ability to learn quickly to guide me. 

It wasn't hard to find someone better than me then, in fact anyone was better than me.

But since that time, I've progressed. I've built things. I've built teams that have built things. I've learned so much that has helped me understand the difference between a good developer and a great developer. Who can build products, who can do tasks, who can create and manage infrastructure. These are all potentially different people.

So, I have tried to be a better non-technical founder. I've tried to be interested in technical issues and understand the background processes to making technical decisions. I've been trying to learn to code. I've experimented with lots of different languages, markups, libraries and frameworks. I am still a master of none, and I don't intend that to necessarily change (at least currently).

If I am working with clients, I want the solution to fit the need, not to fit my own limited abilities. If I'm working on an internal project, I want the project to further my understanding of different technologies, not labour on perhaps my outdated and under utilised knowledge of a specific technology.

But, whilst many techies may believe a little knowledge to be more dangerous than beneficial, I have certainly found that a broad understanding of technical principles, scripting languages, markups, processes and methodologies has helped me in a few key ways.

  • Raising the benchmark for team members - as I improve, so does my team and knowledge of building teams and recruiting specialist talent.
  • Embracing new technologies - my naivety has proved successful in opening up new pathways that may not have been obvious before, rather than the (often frustrating levels of) fear that more established devs may have of new tech (I've seen it).
  • Building relationships - The improvement in my knowledge has had a direct correlation to my improved ability to establish and maintain positive relationships with my technical teams. A better understanding of the issues, the challenges, the motivations of my developments teams helps foster a much more dynamic and mutually beneficial working culture.

Resources that have helped me

Codecademy 50th Achievement

I will shortly publish a very full and extensive list of resources that I use, but I find that blog posts really aren't conducive to doing that in a way that is truly useful, so I will avoid it for now. Needless to say, I am working to solve that with my latest project. and you'll be the first to hear about it.

In the meantime, I will share a small milestone with you. I have been playing with Codecademy off and on this year. In typical fashion, I've varied my learning, from the grass roots Fundamentals of HTML, to CSS, to Javascript and in particular, the JQuery library, to the programming language Ruby. I just hit my 50th Achievement on the learning platform, which I think is quite nice. I'm waiting for some more Ruby courses to be released and in the meantime will continue with the Javascript courses.

Christmas Prezzies from the Tech World

I wrote about my impending Christmas of heads down grafting on a new, improved product for managing your online information. Well, Christmas has come and gone, leaving only an empty box of Lindt Lindor chocolates, 1/2 stone in excess body fat and a little 21 month old boy even more addicted to trains than he was before.

And true to my intentions, we've been busy.

I'll be giving you regular updates on that from now on, as and when there's something significant to show and tell. But in the meantime, I want to say that having delved into the world of real-time, complex web-app development from scratch, how impressed I am with the open source eco-system. 

The technologies, tools, libraries and frameworks at our disposal our numerous, with more being created all the time. This post is a brief overview of those which we have decided to implement as core, or test as necessary. Some you will certainly know, some you may not... all worth noting and adding to your list of tech-to-try.

Hosting

Heroku - Although it is my first real experience building on Heroku, the choice was an easy one. Free setup, easy to scale, support for and easy installation of 3rd party apps like SendGrid, New Relic and others, the list goes on. I've had to become a little more familiar with GIT (I use SVN normally) but deploying to our repo at Beanstalkapp.com  has been pretty easy.

Server Side

MongoDB - Another first has been a foray into the world of noSQL databases. Not because it's trendy, hip or fashionable to do so, but because we felt this would be the best fit for database needs - primarily due to our perceived "need for speed". We took a lot of guidance from the team at Trello, who have been kind enough to detail lots of thoughts on their choice of stack.  I'm not qualified to debate on SQL over noSQL, but experience with query speeds using mySQL previously (on just about every other project I've built) urged me to try something new, and for this product, definitely seems to be a good fit.

Ruby on Rails - At MySpareBrain, the app was built on Google App Engine and thus, any server side scripting was written in Python. For this new product, we discounted Python due to new team skills and experience. We toyed with using Node.js which has been growing in popularity, but in the end opted to progress with Ruby on Rails providing the server side MVC we need, which also works very well with MongoDB.

Devise for RoR - Devise is a modular authentication solution for RoR. We've used Devise in conjunction with Facebook and Twitter social login API's for what we think is a nicely rounded model for creating and managing user accounts with different roles & capabilities. Check out the docs on Github

Client Side

Backbone.js - Backbone is, as the name suggests, at the er, *heart*, of our web application providing structure and order to the complex front-end javascript code required for something like this. Backbone's only dependency is Underscore.js, a utility-belt of functional programming support for Javascript.

Raphael.js - a nifty little javascript library for working with vector graphics on the web, we've been playing with Raphael predominantly due to it's SVG support (as opposed to other HTML5 canvas-based libraries. It's been quite useful for quickly rendering objects within the app's UI, but we have started to hit some limitations/complications for more complex uses - particularly when trying to append HTML to extend basic Raphael objects. We've got around it so far, in one case, by opting to paint in the additional interactive elements, but jury's out on it's longer term viability. Another test will be performance under stress of high volumes of objects rendering simultaneously   

D3js - D3 is a library for manipulating javascript documents using data. Some initial scoping tests suggest this may be a suitable alternative to Raphael, but we're still testing/reviewing the docs. From a pure product perspective, I'm interested in the physics engine and it's possible uses for the app, though this maybe a bit of a creative tangent.

Angular.js - This is a little misleading, as we're not currently using Angular. Consider it a bonus. But I have been playing with it a bit (I have the makings of a nifty little to-do list app). It's interesting because it enables you to write functional code into the html which makes it quick, relatively easy and clear to read when building web applications.

CoffeeScript - Hey, it's just javascript. But having done a few javascript courses and tutorials (check out my Codecademy badges) I can see how the reduction in braces and semi colons could really help speed up my learning, development and reduce stupid errors. More importantly, the devs can rattle out CoffeeScript like there's no tomorrow and therein lies the real benefit for us.

Animate.css - A sweet little CSS3 library for CSS animations that's very easy to use, cross-browser compatible. Use with class and subtlety. Overuse will kill you. 

Kinetic.js - Since we made the decision to use SVG for objects in the new product, Kinetic wasn't really going to be all that much help to us. But, I found a little time to use it to fake the drag and drop of objects that we create in the app using Raphael, in a little section of my attempt to take the online Pitch Deck to the next level. I'll be posting about that soon... Kinetic is good for lots of reasons, just a quick look at some of the demos / examples show just how complex graphical animations can be produced.

SASS - Less or SASS, Less or SASS? OK, SASS. Development team choice, I think related to personal preference of indentations and workflow with HAML, which SASS takes it's own inspiration from. See this to help you decide which to use. 

HAML - Our pursuit for beautiful code, something which we decided we wanted to get right from the off, led us to use HAML, for simplified template creation - particularly useful for RoR apps. Our development principles align with HAMLs stated objectives:

  • Markup should be beautiful
  • Markup should be DRY
  • Markup should be well indented
  • HTML structure should be clear

Creating an Explainer Video: Research

Everyone Wants an Explainer Video

This is the first of a series of posts I'm going to do on the subject of creating an explainer video. To kick things off, I want to share with you all of my resources I've collected on the subject, including:

  • Providers of video explainer production services
  • Loads of examples
  • Pricing (where available)
  • My thoughts and notes
  • Freelancers and independant providers
  • Tips and Techniques
Click to load the MySpareBrain viewer, and find the Video Explainer Research Tab to load the chart.

Click to load the MySpareBrain viewer, and find the Video Explainer Research Tab to load the chart.

It has to be said, this is a very interesting area of video production, digital communication, motion graphics, marketing - whatever you want to label it.

The rise of the Explainer Video is quite staggering, and has become necessary for anyone with a technology startup to have in their basic marketing toolkit - for new customers, for potential investors, for prospective employees. But, not just technology, real worldy, traditional companies like builders, accountants, solicitors, hairdressers and estate agents are getting in on the act too.

With a very limited budget, every startup entrepreneur will face similar challenges:

  • How to communicate my complex idea in a simple, entertaining and compelling way?
  • How do I afford to get this actually produced - prices and quality in the marketplace vary hugely?
  • Where do I start? - Script, Music, Sounds, Graphics, Animation, Production, Copy, Effects?
  • How do I know the end product will be what I want?
  • I want a viral video - how do I get that? (ha)

I asked myself all these (sometimes dumb) questions and more, and then decided that it was such an important thing to get right, I repeat

to communicate complex messages in a simple and entertaining way 

I would go ahead and learn to do it myself, since the investment I make in myself would stand me in good stead for the future.

So armed with my relatively new found passion for Adobe After Effects (yes, I'm taking this very seriously), some ideas and a new microphone I'm embarking on a mission, and I hope you'll join me in figuring this stuff out...

Playsongs iOS App Demo

I've been taking my little man to some local parent-child music sessions in our local town. It's run by two very passionate and cheerful ladies who also happen to be quite talented at picking, reproducing and performing playsongs and lullabyes aimed at helping parents and children to engage through music.

Now, here's a great example of the entrepreneur seeing a hidden opportunity. These ladies have great content. They have a local passionate community, fostered over many years. They have created expensive CD's to sell and run sessions, and so are limited to what time they have available.

Their ability to earn is clearly capped with this model. But, with new technology and new content distribution methods, such as native mobile music apps, not only can their music reach more people than they are able to through their sessions, but the product can be far more interactive, engaging, entertaining and cost-effective for the end user.

So, I spent a little time building a prototype of what the iOS could be. Quite interesting really, in that it's simple and also quite technical with http streaming capability for rich media, download and create favourites to custom playlists, custom audio player controls...

Anyway, we'll see... perhaps I can help these ladies and ladies just like them to earn a good living doing something they really care about using methods they may not have considered. If not, at least I'll have the only Playsongs app on my phone for Rudi to play with...