Tonic website redesign

I was recently part of a team that redesigned the website for Tonic, a full service creative and technology agency based in Sydney.

I was responsible for front-end development – taking the raw designs and converting them into fully responsive templates.

Tools used: PHP Laravel framework, HTML5, CSS3, SVG, jQuery, Twitter Bootstrap, LESS and Grunt.

tonic

Ecofibre website

I was recently part of a team that built the website for Ecofibre, a leader in the development of technologies across the entire industrial hemp value chain.

I was responsible for all front-end development – taking the raw designs and converting them into a fully responsive template.

Tools used: PHP Laravel framework, HTML5, CSS3, jQuery, Twitter Bootstrap, LESS and Grunt.

ecofibre

Yellow Envelope website

I was recently part of a team that built Yellow Envelope.

I was responsible for all front-end development – taking the raw designs and converting them into a fully responsive template.

Tools used: PHP Laravel framework, HTML5, CSS3, jQuery, Twitter Bootstrap, LESS and Grunt.

yellow envelope

G1X website

I was recently part of a team that built G1X, Australia’s first truly independent digital racing channel with FREE, exclusive access to expert tips, racing news and great member offers.

I was responsible for creating fully responsive, front-end templates for the site.

Tools used: PHP Laravel framework, HTML5, CSS3, jQuery, Twitter Bootstrap, LESS and Grunt.

g1x

Lenovo Thinkfwd redesign

I was recently part of a team that redesigned ThinkFwd, Lenovo’s dedicated website providing professionals with content and information to help them navigate their way through the latest IT trends for the SME sector.

I was responsible for front-end development – taking the raw designs and converting them into fully responsive templates. I was also involved with the integration of those templates into the site’s CMS.

Tools used: ExpressionEngine 3, PHP, HTML5, CSS3, JQuery, Twitter Bootstrap, LESS and Grunt.

lenovo

Careerone website redesign

I was recently part of a team that redesigned the website for Careerone, a leading digital media and technology company offering customers the ability to target talent across thousands of websites, manage their talent with market-leading cloud technology, and promote their company using customised virtual environments.

I was responsible for rebuilding the homepage and ensuring the site is fully responsive – especially on mobile devices.

Tools used: PHP Laravel framework, HTML5, CSS3, Angular.js, Twitter Bootstrap, LESS and Grunt.

careerone

MtBuller website redesign

I was recently part of a team that redesigned the website for Mt Buller, Australia’s most accessible all season alpine resort (click on the image below).

I was responsible for ensuring the site is fully responsive – especially on mobile devices.

Tools used: PHP Laravel framework, HTML5, CSS3, jQuery, Twitter Bootstrap, SASS and Gulp.

Mt Buller

Business Scraper web application

The image below linked to the Business Scraper – a web application I built that searches RSS feeds for user-inputted search strings. Users can subscribe and have the results automatically sent to their inbox.

Note: The application is currently offline. Send me an email if you wish to see it in action.

Business Scraper web application

The Business Scraper was born from a desire to stay up to date with the latest news from dozens of companies, without having to manually visit the RSS feeds of each.

Instead, why not automate that search and have the results sent directly to your inbox?

For example, suppose you were interested in being alerted to any employment opportunities being advertised on any of the included feeds. You would follow this simple 3-step process:

  • Sign up
  • Create a subscription – this tells the scraper what you’re looking for – “employment opportunities” in this case
  • Trigger a scrape – and let the Business Scraper do the rest – an email will be immediately sent to your inbox.
    Alternatively, you can opt to have an email periodically sent to your inbox.

Implementation details:

New York City mobile web application

The image below links to a small web application I built that shows New York places of interest (POI) on a map. Information was taken from the Lonely Planet guide to New York City.

New York mobile web app

It proved to be useful on a recent trip to the Big Apple as we were able to locate interesting places nearby without having to constantly pull out the guide book.

Each pin represents a POI from the guide:

  • Blue pins are shops
  • Green pins are restaurants
  • Orange pins are bars
  • Flags are sites
  • The intensity of the colour represents the rating of the site, as judged by the guide (normal, one star or two star)
  • Clicking a pin will open a popup that shows any notes I have made, like address, page number from the guide, type of restaurant cuisine, etc.
  • The small gray square at the top right toggles a search bar
  • For example, search on “children”. This will highlight locations/restaurants that (I thought) may interest the younger members of the group
  • Also, search on ** – this will display “top choice”, quality sites from the guide.

Of course, many other applications exist that do a better job. One such is the TripAdvisor New York City Guides Catalog. This quickly replaced my sorry excuse for an app! Still, building the app sharpened my javascript skills and provided an overview of NYC.

Tools used: HTML5, CSS, javascript & Google Maps API. Best viewed using Chrome.

A REST API with Restler and Backbone

The following describes how to create a basic REST API with Restler and Backbone.

Download it here.

Overview:

A recent job involved making some data accessible online. I used the following tools to convert raw data (property information) into a RESTful API so that it could be easily accessed from any client. In this case an HTML front-end was chosen, but the data may just as well have been pulled from an Android or iOS device.

Steps taken:

  • A python script was built to convert a .csv file of raw data into a MySQL script. This was used to populate the properties table.
  • PHP classes were built to represent and validate property objects, as well as save and retrieve records from the properties table.
  • Restler 3.0 was used to create an HTTP web service API from the PHP classes.
  • Backbone.js was used to connect a web page to the API over a RESTful JSON interface.

Online demo:

Don’t get too excited, it’s only a CRUD app but the front-end is totally driven by AJAX and Backbone – no form posts are involved:
A basic REST API with Restler and Backbone

REST URL:
/content/projects/restler-backbone-example/api/property

Prerequisites:

  • The development and test environment was Mac OSX (10.6.8), Apache, MySQL (5.1.65) and PHP (5.3.15). See useful resources below for pointers on setting up an AMP development environment on Mac OSX.
  • Python was used to convert the sample data to a MySQL script. See useful resources below for pointers on setting up python on Mac OSX.

Download the code from this GitHub link:

https://github.com/scottocorp/restler-backbone-example

Install instructions:

  • This web application was built to run on the Apache/MySQL/PHP stack. See useful resources below for pointers on setting up an AMP development environment on Mac OSX.
    (UPDATE!!! I’ve just successfully run the app on a WAMPServer on Windows 7, with no reconfiguration necessary)
  • Download and copy the files to some sub-folder of your web server.
  • The SQL script to create the MySQL database can be found in resources/db_script.mysql. In this script you will need to adjust the database name and user names and passwords appropriately. I used PHPMyAdmin (see resources below for setup details) to create the database, users and tables.
  • I wrote a python script (resources/build_table_script.py) to generate the MySQL script necessary to create the database table and records (resources/table_script.mysql). The raw sample data can be found in resources/sample.csv. See useful resources below for pointers on setting up a python environment on Mac OSX.
  • pdo/conn.php contains the database connection settings. you will need to adjust these settings appropriately.
  • In lib/core.php, set_include_path needs to be properly configured. I set this to the path of the app’s home folder.
  • The front-end needs to be configured to pull data from the correct URL. Open js/app.js, search for “NOTE!!!”, and update the URLs accordingly.
  • Browse to ./index.html. Hopefully you will see a table displaying the retrieved property records.
  • That’s it! If you’re new to Python/Restler/Backbone browse the code to see how it all works. I used Eclipse to build and debug the app. See useful resources below for setup details.

Implementation details:

  • Properties are represented in the system by the Property class defined in pbo/property.php.
  • The Property class was deliberately designed to allow easy conversion to a RESTful API. Restler uses get, put, post, and delete to map PHP methods to respective HTTP methods.
  • These four methods can be found in the Base class in pbo/base.php. This class can be extended to represent any other object in the system – such as Property.
  • The Property class also contains methods for the validation of user input.
  • api/index.php is used to create the REST API endpoints. This file acts as a “wrapper” around pbo/property.php so that Property objects are exposed via REST URLs. This Restler example explains the mechanism in greater detail.
  • api/.htaccess re-writes the URL to a friendlier format: ie:
    from http://.../restler-backbone-example/api/property/index.php/1 to
    http://.../restler-backbone-example/api/property/1.
  • The lib folder contains some PHP helper scripts.
  • The vendor folder contains the Restler code. This was directly copied from the unzipped download. No modifications were necessary.
  • The app/lib folder contains open source javascript utilities. No modifications were necessary. Replace these files with their latest versions if so desired. Besides Backbone:
    • jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
    • Underscore.js is a utility-belt library for JavaScript.
    • json2.js is for JSON in JavaScript.
    • mustache.js is for minimal templating in JavaScript.

TODO list:

In this app, a lot of functionality was stripped away to highlight the relevant areas. To make this a “well-rounded” application, the following will need to be done:

  • Set up an authentication framework.
  • Set up a test framework.
  • More Documentation.
  • Page the retrieved data.
  • Make the page responsive.

Useful resources: