Enjoying getting it wrong

This post also appears on the Headscape site as part of our blog.

During my teens and twenties I spent a lot of time skateboarding. It’s quite a unique sport in the way it influences your life as a whole. For example, you begin to look at architecture in a new creative way. You also fall over, a lot.

In fact you get really good at falling over: jump down ten steps roll across the concrete, hop up and do it again. You actually spend a lot of time “failing” and it doesn’t bother you. You learn that failure is part of the learning process and something that you should not be afraid of.

Over time the feeling of failure decreases and you’ll gain confidence in the knowledge that you know how to deal with problems.

This attitude can be taken into every aspect of your life and especially something as dynamic as web development. Why not try writing a little app in a new language? If it doesn’t work out it’s not a big deal. What did you learn from it? Did you not enjoy using the new language or was it just not a good fit for what you were trying to do?

Maybe to start with you could try using a new JavaScript library to see how you fair. Then progress to trying harder things. You might fail at them first go, maybe even second, but don’t let it phase you.

Over time the feeling of failure decreases and you’ll gain confidence in the knowledge that you know how to deal with problems. This could even be a huge advantage if a critical problem occurs on a live server for example. If you’ve been playing around and breaking things locally you’ll be calmer and more methodical when fixing critical issues.

When learning tricks on my skateboard I would always start off on the safe flat ground. Once I’d become comfortable I’d try the trick down a curb, adding a bit of risk but knowing it wouldn’t be too catastrophic if I didn’t land it. Then finally, once I’d got very comfortable, I would try it down a set of steps… more risk and more reward. You can carry this analogy into your work by trying out your new idea on a personal project, then maybe on a friend or colleague’s project and finally unleash it on that million dollar website and revel in the excitement!

So next time you think you may fall over, go with it, learn to roll out of it and pop back up and try again. You may even find you start to enjoy it.

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

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>

CodeIgniter allow hyphen in url

CodeIgniter

I’ve done some reading about hyphens vs underscores in urls and personally I prefer hyphens. I find it seems to keep the words separate where as a underscores seem to join them together in my eyes.

PHP functions don’t allow hyphens in their name so I have to use underscores.

To solve this in CodeIgniter, so the correct function name is found from the uri segment, only one simple change needs to be made.

In system/libraries/Router.php find line 153 and change this line

$segments = $this->_validate_request($segments);

to

$segments = $this->_validate_request(str_replace(“-“, “_”, $segments));

All we need to do is do a string replacement so hyphens become underscores.

MARINEXUS website approaching launch

The website for the MARINEXUS project is approaching a launch date which should be before the Christmas break.

In anticipation I created a new holding page to makes things that little more interesting.

The website will be developed in the new year to run from WordPress to allow users to adjust the content and add news and events when the project hits full swing.

MARINEXUS holding page

MarLIN Recording Blog re-launched

The new version of the MarLIN Recording Blog has gone live today.

MarLIN, The Marine Life Information Network, has an activity community of recorders who submit sightings of marine life through the MarLIN website.

The blog, built on WordPress, will be updated with interesting and unusual sightings as well as information from MarLIN events.

The blog also updates the MarLIN Twitter account when a new post is added or edited.

Lilly & Day launched

Based in London Lilly & Day provide garden and landscape design.

Working with designer Random Badger the site is built on WordPress allowing the client to make updates to text or upload new portfolio images.

The portfolio gallery uses a jQuery plugin Galleria to improve the user experience progressively for those that are able to use javascript.

JC Surf launched

John Copley has been part of the surf scene since the sixties and now works as an agent for a large number of worldwide surf brands.

Working with Random Badger I created a site to showcase the companies and products that JC can provide for you. The site is aimed at getting the user interested and encouraging them to get in touch.

The site also contains a small profile about the man himself.