What do we do?

Established in 2011, Harkable is a creative social technology company based in London, UK.

Harkable’s creative approach to social technology combines a passion for building innovative and exciting solutions to reach consumers, alongside a strategic and analytical method in everything we do.

The Harkable team has a unique knowledge of social media marketing and their expert, award-winning consultants have a broad range of experience working with a number of brands including Trinity Mirror, Myspace, Veuve Clicquot, Volkswagen, DDB, OMD & Virgin. You can find out more about us here.

When do we need you?

When can you start.. We’d ideally be looking for someone to start immediately.

Get in touch here if you’re interested. We look forward to hearing from you.

Adjust server time

If you have a server in a different timezone to you then you might be seeing funny things happen when you add the time to a MySQL database for example. You can fix this by adding or subtracting hours as in the example below.

$now = date('Y-m-d-G');
$now = strftime("%Y-%m-%d-%H", strtotime("$now -8 hours"));

Create a slug URL from string of text

Here we’re passing in a simple string of text converting it to lowercase and replacing all the spaces with a dash.

function create_slug(strtolower($string)){
   $slug=preg_replace('/[^a-z0-9-]+/', '-', $string);
   return $slug;
}

echo create_slug('Create a slug URL from string of text');

Convert HEX value to RBG

If you’ve ever need to get an RGB colour format converted from a Hexadecimal this is the function for the job.

function hextorgb($hexvalue){
        if($hexvalue[0] == '#') {
                $hexvalue = substr( $hexvalue, 1);
        }
        if(strlen( $hexvalue ) == 6){
                list($r, $g, $b) = array($hexvalue[0] . $hexvalue[1], $hexvalue[2] . $hexvalue[3], $hexvalue[4] . $hexvalue[5]);
        }elseif (strlen($hexvalue) == 3) {
                list($r,$g,$b) = array($hexvalue[0] . $hexvalue[0], $hexvalue[1] . $hexvalue[1], $hexvalue[2] . $hexvalue[2]);
        }else{
                return false;
        }
        $r = hexdec($r);
        $g = hexdec($g);
        $b = hexdec($b);
        return array('R' => $r, 'G' => $g, 'B' => $b);
}

$rgb = hextorgb('#fff000');

print_r($rgb);

Display a users Gravatar image

Getting users images from Gravatar is simple. If you have the users email address you just need to MD5 hash it and append it to the gravatar URL.

   $gravatar = 'http://www.gravatar.com/avatar/' . md5($email_address) . '?s=32';
   echo '<img src="' . $gravatar . '" width="32" height="32"/>';

Convert links in a string of text to hyperlinks

Very useful function which will convert a string of text and ad hyperlinks to all the URLs. We loop through each URL and add a hyperlink

function url_to_link($text){

            $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
            // Check if there is a url in the string
            if (preg_match_all($reg_exUrl, $text, $url)) {

                foreach($url[0] as $v){

                    $position = strpos($text,' '.$v)+1;
                    $text = substr_replace($text,'', $position, strlen($v));
                    $text = substr_replace($text,''.$v.'', $position ,0);
                }
                return $text;
            }
            else {
                // if no urls in the text just return the text
                return $text;
            }
        }

$string = 'This is a string of text and we have a link: http://papermashup.com we also have another link http://google.com';
echo url_to_link($string);

Parse JSON in PHP

Parsing a string of JSON is easier than you may think as we can use the json_decode() function in PHP which will convert the JSON into an array in PHP which we can then manipulate as needed.

  $json ='{"id":0,"name":"Ashley","surname":"Ford","Website":"http://papermashup.com"} ';

   $array=json_decode($json);

   // print  the array
   print_r($array);
   echo $array->name; 

The Code

You’ll need to update your .htaccess file so when an error is detected the server knows how to handle the request. In our case we’re going to forward all the listed errors to our generic errors.php file.

ErrorDocument 400 /errors.php
ErrorDocument 403 /errors.php
ErrorDocument 404 /errors.php
ErrorDocument 405 /errors.php
ErrorDocument 408 /errors.php
ErrorDocument 500 /errors.php
ErrorDocument 502 /errors.php
ErrorDocument 504 /errors.php

The PHP

This is the contents of the ‘errors.php’ file. You need to save this in the root directory of your web server, unless you modify the path in the .htaccess file above.

$status = $_SERVER['REDIRECT_STATUS'];
$codes = array(
       400 => array('400 Bad Request', 'The request cannot be fulfilled due to bad syntax.'),
       403 => array('403 Forbidden', 'The server has refused to fulfil your request.'),
       404 => array('404 Not Found', 'The page you requested was not found on this server.'),
       405 => array('405 Method Not Allowed', 'The method specified in the request is not allowed for the specified resource.'),
       408 => array('408 Request Timeout', 'Your browser failed to send a request in the time allowed by the server.'),
       500 => array('500 Internal Server Error', 'The request was unsuccessful due to an unexpected condition encountered by the server.'),
       502 => array('502 Bad Gateway', 'The server received an invalid response while trying to carry out the request.'),
       504 => array('504 Gateway Timeout', 'The upstream server failed to send a request in the time allowed by the server.'),
);

$title = $codes[$status][0];
$message = $codes[$status][1];
if ($title == false || strlen($status) != 3) {
       $message = 'Please supply a valid HTTP status code.';
}

echo '<h1>Hold up! '.$title.' detected</h1>
<p>'.$message.'</p>';

The Code

       function isSiteAvailable($url)
       {
               //check, if a valid url is provided
               if(!filter_var($url, FILTER_VALIDATE_URL))
               {
                       return 'URL provided wasn\'t valid';
               }

               //make the connection with curl
               $cl = curl_init($url);
               curl_setopt($cl,CURLOPT_CONNECTTIMEOUT,10);
               curl_setopt($cl,CURLOPT_HEADER,true);
               curl_setopt($cl,CURLOPT_NOBODY,true);
               curl_setopt($cl,CURLOPT_RETURNTRANSFER,true);

               //get response
               $response = curl_exec($cl);

               curl_close($cl);

               if ($response) return 'Site seems to be up and running!';

               return 'Oops nothing found, the site is either offline or the domain doesn\'t exist';
       }

	// check if site exists / is up
	if($_GET['url']){

	   $response = isSiteAvailable($_GET['url']);
	   $message = '<div class="response">'.$response.'</div>';
	}

Display the response

<?php echo $message;?>

<form action="" method="get">

Enter a URL below or click an example below:<br/>

<ul>
<li><a href="?url=http://harkable.com">harkable.com</a></li>
<li><a href="?url=http://google.com">google.com</a></li>
<li><a href="?url=http://sfdhjsdkhfskjfhskjfh.om">sfdhjsdkhfskjfhskjfh.om</a></li>
</ul>

<input name="url" type="text" value="<?php echo $_GET['url'];?>" />

</form>

The Code

Firstly we setup three variables that are used in the function, notice that we’re chaining the variables instead of declaring ‘var’ each time which is the optimal way of declaring multiple vars in jQuery. You can adjust the delay and animate values to suit your needs. We then loop through each list item using the eq(); method which allows us to select which list item to animate, you can see we’re passing the variable ‘i’ to this method which is increased towards the bottom of the script. Within the loop we finally call the function again to start the process again.

$(document).ready(function() {

         var i = 0,
         delay = 2000,
         animate = 400;
         function animateList(){
                 var imax = $("ul#list li").length -1;
                 $("ul#list li:eq(" + i + ")")
                         .animate({"fontSize" : "80px"}, animate)
                         .animate({"fontSize" : "80px"}, delay)
                         .animate({"fontSize" : "30px"}, animate, function(){

                                 (i == imax) ? i=0 : i++;
                                 animateList();
                         });

                 };

	   animateList();
});

The HTML

<ul id="list">
<li>Advertising</li>
<li>Art</li>
<li>Automotive</li>
<li>Business</li>
<li>Celebrity</li>
</ul> 

The Code

Lets run through line by line the JavaScript. The first three lines after the DOM ready function are setup incase the user has JavaScript disabled. So if enabled we display the switch background image and hide the radio buttons as well as indent the text on the labels.

We’ve then setup a ‘change()’ function which means the function is executed each time the user selects either checkbox, we then check the value of the radio button thats been selected and adjust the background position of the sprite image.

Lastly for demo purposes im just displaying the status of the radio buttons in the div with the class ‘result’

$(document).ready(function(){

	$('.switch').css('background', 'url("switch.png")');
	$('.on_off').css('display','none');
	$('.on, .off').css('text-indent','-10000px');

    $("input[name=on_off]").change(function() {
      var button = $(this).val();

		if(button == 'off'){ $('.switch').css('background-position', 'right'); }
		if(button == 'on'){ $('.switch').css('background-position', 'left'); }	 

		 $('.result span').html(button);
		 $('.result').fadeIn();

   });

});

The HTML

Here we have a simple form with the two radio buttons in a fieldset.

<form action="" method="get">

<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>

<input type="submit" value="Submit"/>

</form>

<div class="result">The button is: <span>on</span></div>

The CSS

#container{background:#ebebeb;}

.switch{
	border:none;
	background:left no-repeat;
	width:105px;
	height:46px;
	padding:0;
	margin:0;
}

.on, .off{
	width:50px;
	height:40px;
	display:inline-block;
	cursor:pointer;
}

.result{display:none;}

The Logic Code

Lets have a quick run through at what the project consists of. Firstly we use the simplexml_load_file() PHP function to get the xml data for the given location. We then check to see if the current weather condition is in the XML file. If it doesn’t exist then we can make the assumption that the API feed couldn’t determine the location, bear in mind this is very basic error checking and if the feed fails it will still return this error.

We now do some basic data checking to to see what extra data we can give the user. Firstly we check on line 14 to see if the current weather and forecast are different, if they are different we’ll display the forecast if not we show just the current weather.

Next on lines 21 and 28 we do a simple check to see if the temperature is higher or lower than 20 degrees and echo whether it’s likely to be hot or cold.

Finally on lines 35 we check to see if the current or future forecast contains any rain or storms so we can recommend the user takes an umbrella. This is done using some basic PHP regular expression.

	// load the XML feeds for the Google Weather API
	$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.urlencode($_GET['location']));
	$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
	$forecast = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

	// do a basic error check to see if we can get the current weather condition for the given location
	// if no return an error.
	if(!$current[0]->condition['data']){

		$error = 'Couldn\'t determine this location';

		}

	// is the current weather the same as the forecast? if not display the forecast
	if(strtolower($current[0]->condition['data'])!=strtolower($forecast[0]->condition['data'])){

	$outlook = 'but the forecast says '.strtolower($forecast[0]->condition['data']);	

		}

	// if the temp in degrees c is below 20 i.e. cold
	if($current[0]->temp_c['data']<=20){

	$coat = 'If you\'re going outside i\'d wrap up warm.';	

		}	

	// if the temp in degrees c is over 21 i.e. Warm / Hot
	if($current[0]->temp_c['data']>=21){

	$coat = 'You should be ok without warm clothes today.';	

		}		

	// check to see if there is rain or storms forecast
	if (preg_match("/\brain\b/i", $current[0]->condition['data']) ||
		preg_match("/\brain\b/i", $forecast[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $current[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $forecast[0]->condition['data'])
		){

		$umbrella = ' But <u>don\'t forget to take an umbrella</u>!';
		}

Displaying the data

<form action="" method="get">
<label for="location">Location</label>
<input type="text" class="location" name="location" value="<?php echo $_GET['location'];?>"/>
</form> 

<?php if(!empty($_GET['location'])){

	if($error){ echo '<div class="errors">'.$error.'</div>'; }else{

?>

<div class="weather_app">

<h1>Weather Summary for <?php echo $_GET['location'];?></h1>

<ul>
<li><?php echo '<img src="http://google.com'.$current[0]->icon['data'].'"/>'; ?> The weather in <?php echo $_GET['location'];?> is <strong><?php echo strtolower($current[0]->condition['data']).' '. $outlook;?></strong>. The temperature is currently <strong><?php echo $current[0]->temp_c['data']; ?>&deg;c (<?php echo $current[0]->temp_f['data']; ?>&deg;f)</strong>. <?php echo $coat;?> <?php echo $umbrella;?></li>
</ul>

</div>

<?php } } ?>

The Plugin

(function ($) {
    $.fn.showHide = function (options) {

	//default vars for the plugin
        var defaults = {
            speed: 1000,
			easing: '',
			changeText: 0,
			showText: 'Show',
			hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').slideUp(options.speed, options.easing);
			 // this var stores which button you've clicked
             var toggleClick = $(this);
		     // this reads the rel attribute of the button to determine which div id to toggle
		     var toggleDiv = $(this).attr('rel');
		     // here we toggle show/hide the correct div at the right speed and using which easing effect
		     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
			 }
              });

		  return false;

        });

    };
})(jQuery);

The Usage

Here we setup the options for the plugin. you can set the speed of the toggle, if you include the jQuery UI plugin you can specify an easing effect. Also there’s an option to change the text for the button. 1 is change 0 is dont change. and the final options are the show and hide text.

$(document).ready(function(){

   $('.show_hide').showHide({
		speed: 1000,  // speed you want the toggle to happen
		easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText: 1, // if you dont want the button text to change, set this to 0
		showText: 'View',// the button text to show when a div is closed
		hideText: 'Close' // the button text to show when a div is open

	});

});

The HTML

Here you can see the simple usage for the plugin. We’ve already set the plugin options above in our DOM ready function now here we set our divs up. for element you want to toggle, you just need to add the div id to the rel attribute of the a tag as shown below. You can now add as many show hide divs as you want to.

If you want all the open divs to close when you click to open another simply add the class .toggleDiv to each element.

 <a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>
 <a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre>
<div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>

Code snapshot

Below is a snapshop of the PHP switch statement. Download the full code of the tutorial here. Upload the PHP file included and see the demos.

function user_country($country){

	switch($country){

		case 'AF':
		$name = 'Afghanistan';
		break;

	        case 'AL':
		$name = 'Albania';
		break;	

	        case 'DZ':
		$name = 'Algeria';
		break....	

	  } 

	return array(

		"name" => $name

		);

		}

The HTML

Again this is a snapshot of the select drop down form.

    <label>Country</label>
        <select name="country">
          <option value="AF">Afghanistan</option>
          <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
    	  .......
        </select> 

The Code

The first line of the function gets the REQUEST_URI (/path/to/file.php), splits the string (using ‘/’) into an array, then filters out any empty values. We then store the base url for the site in $base_url. Next we find the array key for the last value in the $path array. We then do a for loop to build up the breadcrumbs and determine where to put the a tag etc.

function breadcrumbs($separator = ' » ', $home = 'Home') {

    $path = array_filter(explode('/', parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
    $base_url = ($_SERVER['HTTPS'] ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '/';
    $breadcrumbs = array("<a href=\"$base_url\">$home</a>");

    $last = end(array_keys($path));

    foreach ($path AS $x => $crumb) {
        $title = ucwords(str_replace(array('.php', '_'), Array('', ' '), $crumb));
        if ($x != $last){
            $breadcrumbs[] = '<a href="$base_url$crumb">$title</a>';
        }else{
            $breadcrumbs[] = $title;
		}
    }

    return implode($separator, $breadcrumbs);
}	

Calling the function

This is the simple bit! Simply add the above function to the top of your PHP page and call the function as shown below. You can optionally add a separator symbol or specify the wording for ‘Home’.

echo breadcrumbs();