A little work for Sugar Shoes

A recently got to do a small bit of work with an old friend from university. We both did the Surf Science & Technology course at Plymouth Uni and have since independent got into the world of building websites.

Made By Richard had a client, Sugar Shoes, using Tradingeye e-commerce platform. I’d never used Tradingeye before and found the documentation a bit sparse .

I only had to implement functionality to change the text on the homepage as well as upload new images for an image slider on the homepage and with a bit of poking around I got my head around how the system work.

It was great to work with Richard and I really like his design style. He’s an easy going guy and I’d like to recommend him for your web design needs. Check out his new look portfolio at www.madebyrichard.me/

Posted in Uncategorized | Leave a comment

Designing For Emotion by Aarron Walter review

Designing For Emotion by Aarron Walter and published by A Book Apart was a great read with some compelling case studies and examples and on how and when to use emotional design elements.

All release by A Book Apart and short, sharp and too the point. This release is no exception and once I began reading I was hooked and finished it off within a couple of days. The writing style is enjoyable and educational with a sprinkle of dry wit where appropriate.

Probably my favourite section was on Design Personas and they are something I will be implementing on some upcoming projects in the New Year. Aaarron also provides a great download form his own website containing a template for a design persona as well as the completed version from his work on the great MailChimp application.

My only complaint is that the book focuses on the fun elements of emotional design, such as MailChimp’s mascot. Whilst Aarron does take the time to point out that you wouldn’t use this fun style design for a serious application such as online banking I would love to have read more about how the techniques can be varied for more serious applications.

Overall another highly recommended book.

Posted in Book Reviews | Tagged | Leave a comment

Mobile First by Luke Wroblewski review

Do web developers really take holidays? Or are our breaks from the day job just an opportunity to catch up on some reading and tinker with some side projects? We haven’t even hit Christmas Day and I’ve managed to finish off two books I’ve had on the go, this one and PHP Master: Write Cutting-Edge Code from SitePoint.

On to business, I love the A Book Apart releases and this one is no different. Luke Wroblewski is always posting little nuggets of mobile statistics and tips on his website so I was very keen to read a whole book from him.

The book logically steps through

  • some stats on why you should be concerned with mobile
  • how it differs from normal desktop browsing
  • how we should embrace the constraints of small screen
  • how this simplicity can in turn benefit the desktop site
  • how to design mobile / small screen layouts

There are lots of helpful little tips throughout the book but one of the main points I took away came right at the end. Luke assures us that mobile is changing at a very very fast pace and will continue to do so. As such we should not worry about being on top of all the changes as it is almost impossible. Instead focus on implementing changes and techniques where you can and accept that there will soon be something new that you could not have predicted or included.

You can pick up the book in paperback, ebook or a bundle of the both from A Book Apart.

Posted in Book Reviews | Tagged | Leave a comment

PHP Master: Write Cutting-Edge Code review

SitePoint’s latest PHP book is aimed at taking your skills to the next level. Looking through the contents there was several tools and techniques I was already using but also lots of others that I would like to start using.

Each of the sections provides a general good introduction with some examples and links to similar tools or further reading. The book finishes by recommending that you implement the techniques / tools over a period of time, e.g. begin using version control then in a few months use a coding standard. I thought this was a particularly good point as I can see it would be very easy to get enthusiastic and try and implement version control, coding standards, documentation, profiling etc straight away.

My only slight annoyance with the book is that it is very heavily *nix orientated where as my current role involves a Windows network and as such I mainly work on Windows. But this is a very small detail and I’m well aware that I’m actually in the minority and the extra effort involved in creating Windows examples would be ridiculously time consuming and make the book unecessaraly long, and bump the price up.

This is another book I’d highly recommend and I’m sure there are a lot of developers who can benefit from a well structured book on writing cutting edge code.

Posted in Book Reviews | Tagged | Leave a comment

I’ve got an Arduino kit

I recently found out about Arduino an open-source electronics prototyping platform – as described on the website.

It’s basically a circuit board which can have components connected to it and then “sketches” can be uploaded to the board to control how it operates. The basics, which I am working through this Christmas, are controlling LEDs but if you have a Google or YouTube there are some really impressive projects.

I’ve never really dabbled with electronics before but this looks a lot of fun. There is a project to control your garage door with iOS. There are also numerous examples of connecting to the board over a network so I’d love to combine some web work or iOS work with Arduino.

Starter kits can be found online pretty cheap and there are plenty of good tutorials around as well.

Posted in Uncategorized | Tagged | Leave a comment

Marine Biological Association website relaunched

I recently redesigned and coded the website for the Marine Biological Association. I designed the site mobile first as I feel this makes sense to start with the linear nature of a webpage and it’s elements and then see where these elements can best be focused as the screen size increases.

The site also uses responsive design techniques with a fluid grid. I found Responsive Web Design by Ethan Marcotte had some useful techniques in it and also the templates from the 978 Grid System to calculate layout widths.

As the site is primarily for presenting static page content and adding news posts I chose WordPress for the back end. There are a few custom plugins that I have written in there to deal with membership forms and other bespoke areas of the site.

You can see the site at http://www.mba.ac.uk

Posted in Uncategorized | Leave a comment

CodeIgniter based Fuel CMS

I recentley discovered a new CMS called Fuel. It is based on the PHP framework CodeIgniter and I feel it has huge potential.

Below is a post I added to the Fuel forums on why Fuel differs from other CMS systems.

When I start a project I tend to go for WordPress if a need a general blog / CMS and then if the project is a little more bespoke I will go for CodeIgniter.

Sometimes with a WordPress project it will be 90% CMS and 10% something that isn’t included or there are no plugins for. For this I will create my own plugin.

Then there is the other angle where the bespoke project needs some basic content e.g. about page, links etc.

This is where I feel Fuel really shines. Having all the functionality of CI for the more complex pages is extremely useful and the client need never be involved in this pages. Or if they do need to somehow control these ages such as through adding items to a database it is made very simple through the admin modules.

The modules also make it very quick to create the forms for users to enter and edit the data.

As admin said the others have a larger user base, but I feel this is primarily down to the fact they have been around longer. If you look at Fuel in conjunction with CI then there is actually a vast amount of libraries and contributions as well as documentation.

The only slightly negative thing I have felt so far is that the documentation is not as mature as I would hope. Although the speed and helpfulness of the admin in answering questions has meant that in a short space of time I have got really far in my first Fuel based project.

As I become more knowledgable with Fuel I will be looking to add to the documentation myself, which is exactly how all the other open source projects have evolved into the successes that they are.

I’m sure there will still be times where I use WordPress or a straight CI application, or possibly other frameworks, for projects but I already have two projects in mind that will be based in Fuel and I’m sure many more to follow.

The Fuel website, along with the forum and documentation can be found at http://www.getfuelcms.com/

Or you can download Fuel on GitHub https://github.com/daylightstudio/FUEL-CMS

Posted in CodeIgniter, Fuel CMS, Web Development | Tagged , , | Leave a comment

Responsive Web Design by Ethan Marcotte review

I’ve just finished reading Responsive Web Design by Ethan Marcotte and really enjoyed it. The book is published by A Book Apart who specialise in “the emerging and essential topics in web design and development with style, clarity, and, above all, brevity”.

This made the book ideal for a holiday read. Ethan lays the foundations for responsive design and then goes through each of the principles

  1. Flexible grids
  2. Flexible images and media
  3. Media queries

I really enjoyed the flexible grids chapter and found the equation target / context = result formula very useful for calculating fluid width.

The book serves as an excellent introduction to the theories and some code best practices to start using responsive web design.

Reading it on iBooks there are some videos of the effects in action which helps bring the examples to life.

Overall I’d highly recommend the book and to keep an eye on other releases from A Book Apart.

Posted in Book Reviews | Tagged | Leave a comment

CodeIgniter Instagram API Library Released

After using Instagram for a while I began looking at their API and then saw that there is no CodeIgniter library for it so I began making one.

You can download it from https://github.com/ianckc/CodeIgniter-Instagram-Library

And see a sample demonstration at http://ianluckraft.co.uk/demonstrations/instagram-library/welcome

Use and enjoy.

I’d love to see any projects that use the library.

Posted in Uncategorized | 45 Comments

Google Maps V3 and Geolocation

In this post I will show how to create a map using Google Maps API V3 and the using browser geolocation we will add a marker to the user’s position. The finished product can be seen at http://ianluckraft.co.uk/demonstrations/google-maps-v3-and-geolocation.php

Let’s get started.

Create a basic HTML document

<!DOCTYPE html>
<html>
<head>
<title>Google Maps V3 and Geolocation</title>
</head>
<body>
</body>
</html>

We need to add a div that will later contain our map. Between the opening and closing body tags place a div with an id of map.

<div id="map"></div>

We also need to do some basic styling of the div to give it a width and height. These values can easily be changed to suit your needs. In between the opening and closing head tags place a style block with the following style rules.

<style>
#map {
width:400px;
height:300px;
}
</style>

Now we need to start with our JavaScript. The first step is to load the Google APIs. This is done with a script tag and the source as follows.

<script src="http://www.google.com/jsapi"></script>

Now this is loaded we can move onto loading the maps scripts. Below our script tags for loading the Google APIs add opening and closing script tags. Between these script tags add the following.

google.load('maps', '3', {other_params:'sensor=true'});

This piece of JavaScript uses the now available google.load method.  To load the map scripts we need to pass the load method three parameters.

  1. The API to load. In this case maps.
  2. The version of the API to use. In this case 3
  3. The maps API requires a other params to be passed with a sensor option set to true or false.

The sensor option tells the maps scripts if we will be detecting the user’s location. As we will be using the browser to detect the user’s location we set this to true.

The rest of our code will be between these script tags. Next we need to create a function to deal with the creation of the map and will also detect if the user agrees to having their location used. Place the following below the google.load call.

function mapInit() {

 }

 google.setOnLoadCallback(mapInit);

In addition to creating our mapInit function we use another Google method that will let us call a function when everything has been loaded. Using the Google method rather than a body.onload ensures that all of the Google API’s have been loaded before other functions are called.

We now create a variable containing our basic options for the map. These are

  • A zoom value set to 0, the map will be as far zoomed out as possible
  • The center position for the map using the maps LatLng function. We will set our map to 0 Latitude and 0 Longitude.
  • The type of map to display. We will use a road map.
function mapInit() {

 var myOptions = {
 zoom: 0,
 center: new google.maps.LatLng(0, 0),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 }

Now we will actually create the map. Below our options add the following line.

map = new google.maps.Map(document.getElementById("map"), myOptions);

Here we are assigning a variable of map the value of a new Google Map. We also use the getElementById function to tell the maps script which element to add the map to. And lastly we pass in our options we previously declared.

If you refresh your browser you should now see a map taking up the space of our div with the id map.

Geolocation

Now we will deal with the user accepting or declining the use of their location.

The last part of our mapInit function will check if the browser supports geolocation. If it does then we call another function, if it doesn’t we are just using a simple alert to let us know. In a real application you would deal with this in a more elegant way. Add the following to the mapInit function.

if(navigator.geolocation) {

 navigator.geolocation.getCurrentPosition(currentPositionCallback);

 } else {

 alert('The browser does not support geolocation');

 }

Now we need to create the currentPositionCallback function. After our mapInit function add the following lines.

function currentPositionCallback(position) {

 }

This is the function that will be called if the browser supports geolocation and the user agrees to share their location. It accepts a parameter of position that will contain the location information.

Next we will add  a marker to the map where the user has been located. Add the following line to the currentPositionCallback function.

var user_lat_long = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Here we create a new variable of user_lat_long that stores a maps LatLng, as we did when creating the map. We pass this the values from the position parameter of latitude and longitude. We will now use the user_lat_long variable to place a marker on the map.

var marker = new google.maps.Marker({
 position: user_lat_long,
 map: map
 });

We have now created a variable to hold the new marker. We use the maps Marker function and pass in our user_lat_long for the position and also we need to tell the function which map to use, in our case it is our map variable.

To finish up we will set the center of the map to the user’s position and zoom into a more detailed level.

map.setCenter(user_lat_long);
map.setZoom(15);

And here is the code in it’s entirety

<!DOCTYPE html>
<html>
<head>
 <title>Google Maps V3 and Geolocation</title>
 <!-- Set basic styling for the map div -->
 <style>
 #map {
 width:400px;
 height:300px;
 }
 </style>
 <!-- Load the Google APIs -->
 <script src="http://www.google.com/jsapi"></script>
 <script>
 // Load the map scripts
 google.load('maps', '3', {other_params:'sensor=true'});

 // Function to create a map and check for geolocation
 function mapInit() {

 // Set the options to be used when creating the map
 var myOptions = {
 zoom: 0,
 center: new google.maps.LatLng(0, 0),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 // Create the new
 map = new google.maps.Map(document.getElementById("map"), myOptions);

 // Check if the browser supports geolocation
 if(navigator.geolocation) {

 navigator.geolocation.getCurrentPosition(currentPositionCallback);

 } else {

 alert('The browser does not support geolocation');

 }

 }

 function currentPositionCallback(position) {

 // Create a new latlng based on the latitude and longitude from the user's position
 var user_lat_long = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

 // Add a marker using the user_lat_long position
 var marker = new google.maps.Marker({
 position: user_lat_long,
 map: map
 });

 // Set the center of the map to the user's position and zomm into a more detailed level
 map.setCenter(user_lat_long);
 map.setZoom(15);

 }

 google.setOnLoadCallback(mapInit);

 </script>
</head>
<body>

 <h1>Google Maps V3 and Geolocation</h1>

 <div id="map"></div>

</body>
</html>
Posted in Web Development | Tagged , | 51 Comments