Why does the blog look terrible? Find out
mikestreety

The Commute: The Rant

I’ve been commuting for nearly a year now. Proper commuting that is. Getting up at some unearthly hour to sit on a train for a bit. Living in a completely different county to where I work. When I started, I used to get to the station with a smile on my face, look around at …

I’ve been commuting for nearly a year now. Proper commuting that is. Getting up at some unearthly hour to sit on a train for a bit. Living in a completely different county to where I work.

When I started, I used to get to the station with a smile on my face, look around at all the glum expressions and wonder what is getting them down. For about 4/5 months I stayed with this naïve, fresh-faced view of the world. I was happy to be getting an hour and half to myself a day, pretty much cut off from the Internet (as the 3G signal in the Croydon to Brighton line is terrible). I’ve read many a magazine and book on the year of my commute and I’m glad I did it.

However, the tides turned when I got upgraded as a commuter. Where the standard walking commuter is your beat cop or the foot soldier, I became one of the interceptors, the traffic cops or a bomb disposal team.

You see I became an owner of a fold-up bike. Not one of those incy-wincy Brompton, but a respectable Dahon. Having a bike on the daily commute allows you to see what idiots people can be. How eager everyone is to get everywhere. What a rush everyone is in. Below I have outline 3 things that annoy me about the commute and the things that have turned me into a glum expressioned commuter.

First off – the barriers. People. Ordinary walking people with no suitcases or bikes or any irregular props insist on queuing up to go through the gate, when there are perfectly working barriers next to them. This infuriates me because I have a bike so I need to go through the gate. People push in front, huff and puff and take twice as long going through the gate then they would going through the barriers.

Secondly – the doors. If you are waiting to get on a train, please leave room for those wanting to get off first. The train won’t leave if there are people standing waiting to get on, so there is no rush. Just yesterday 4 people jumped on the train before I had squeezed out with my bike. Just calm down!

Thirdly – the seats. This is another pet peeve. People who put bags on seats and then huff and puff and moan and tut when you ask to sit there. Some people are very nice and friendly about it, but others are not. If you wish to put your bag on a seat then pay for another bloody ticket!

I think that is all that annoys me. Luckily I shall be cycling all the way to work next month, so I can get annoyed at car drivers instead.

Anything I’ve missed?

Read More Comment

It’s My Way or the Highway. Not.

Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering mobile first. The attitude of some of these people on the web, is do mobile first or don’t bother doing it at all. Now, I understand why …

Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering mobile first. The attitude of some of these people on the web, is do mobile first or don’t bother doing it at all.

Now, I understand why you should. It helps you focus and means that the content is all the content you need. If you do mobile first, you’re not tempted to slide in the odd random graphic here or there. But i’ve been thinking. Why should we have to do it this way?

I’ve always been of the mindset that with the web, as long as its accessible and semantic and it makes sense, its perfectly acceptable. There are hundreds of different ways to skin a cat and as long as you get a clean website at the end, who cares how you got there? (People even have prejudices against certain bits of software…).

I often get annoyed on the web when people tell me I have to do something a certain way. I prefer to be nudged in a general direction than having a certain technique forced upon me. For example, I have recently read a couple of Sitepoint books – jQuery: Novice to Ninja and HTML5 & CSS3 for the Real World. They are fantastic books (highly recommended for people starting out in jQuery and HTML5).

The thing I like about the books is that they imply that there are several ways to do things. The code examples in the book are starting points  that give you a nudge in the right direction. Before I read the jQuery book – I was under the impression that it was really complex, but the book showed me how simple things were and from that I have evolved into a jQuery Deputy Master.

So next time you read a technique, or tutorial, remember that it is not the only way and no matter what operating system, software or method people are using, please be nice and accept their working process – you might be surprised and realise they’re doing it better.

Read More Comment

HTML5 Template with jQuery

A useable, simple HTML5 template with jQuery included. By no means a replacement for the HTML5 Boilerplate, but a quick simple something to get you started!

A useable, simple HTML5 template with jQuery included. By no means a replacement for the HTML5 Boilerplate, but a quick simple something to get you started!

Read More Comment

Whats Up, Blog?

Right, I’ve decided to start blogging again. Recently, I’ve been wanting to get my point across in more than the 140 characters that twitter lets you. And if I have got my point across, I often get several replies that would be better if one another could see the replies. Other times i’ve come across …

Right,

I’ve decided to start blogging again. Recently, I’ve been wanting to get my point across in more than the 140 characters that twitter lets you. And if I have got my point across, I often get several replies that would be better if one another could see the replies.

Other times i’ve come across ground-breaking code. or i’ve written earth-shattering nerdiness that would be simply rude not to share with my fellow humans.

So I wanted a medium to express my views about why I haven’t fully accepted HTML5, or why Responsive web design has yet to make it onto my agenda Or if i have, a medium to share the code. And I wanted a place for fellow nerds, geeks and people to rant and rave about how stupid I am or correct me.

So here we are. mikestreety.co.uk is now just a blog. And the horrible default theme? Its to kick-start me into making a sleek, sexy, HTML5, CSS3, Media-queried blog. If you’re not seeing the nice default theme, its because i’ve started work. And if my horribleness is on show to the public, that should make me sort my live out.

Read More Comment

Strip out YouTube code from the URL

Big thanks to Kris Noble for this snippet of code. If you are setting up a CMS for a client which includes a video of sorts – you may wish to keep the ratio and dimensions, but allow them to change the code through the CMS. This function below strips out the required code from …

Big thanks to Kris Noble for this snippet of code.

If you are setting up a CMS for a client which includes a video of sorts – you may wish to keep the ratio and dimensions, but allow them to change the code through the CMS. This function below strips out the required code from the URL so that the client doesn’t have to. If the client does paste in just the code – it picks that up as well and uses it.

function get_youtube_id($ytURL)
{
    // Adapted from http://snipplr.com/view.php?codeview&id=19232

    $ytvIDlen = 11; // This is the length of YouTube's video IDs

    $ytURL = str_replace('http://youtu.be/', '', $ytURL);
    // Accounts for short youtube URL

    if(strlen($ytURL) == $ytvIDlen)
    {
        // probably already a valid id
        return $ytURL;
    }

    // The ID string starts after "v=", which is usually right after
    // "youtube.com/watch?" in the URL
    $idStarts = strpos($ytURL, "?v=");

    // In case the "v=" is NOT right after the "?" (not likely, but I like to keep my
    // bases covered), it will be after an "&":
    if($idStarts === FALSE)
    {
        $idStarts = strpos($ytURL, "&v=");
    }

    // If still FALSE, URL doesn't have a vid ID
    if($idStarts === FALSE)
    {
        // some kind of 'Please enter a valid YouTube video ID or URL' validation message here maybe..
        return FALSE;
    }

    // Offset the start location to match the beginning of the ID string
    $idStarts +=3;

    // Get the ID string and return it
    $ytvID = substr($ytURL, $idStarts, $ytvIDlen);

    return $ytvID;

}

For example, in your CMS you might have a field titled ‘Youtube Video’ where the user pastes in the URL to the video.

On your front end you will then have code similar to this:

<?php $videoID = get_youtube_id($youtubeVideo);
if($videoID) { ?>
<iframe width="357" height="222" src="http://www.youtube.com/embed/<?=$videoID?>" frameborder="0" allowfullscreen></iframe>
<?php } ?>

In other words – if there is a youtube video content, show the above code and place the youtube video ID in the correct place.

Below is a minified version of the function

		function get_youtube_id($ytURL)	{
			$ytvIDlen = 11;
			$ytURL = str_replace('http://youtu.be/', '', $ytURL);
			if(strlen($ytURL) == $ytvIDlen) {return $ytURL;}
			$idStarts = strpos($ytURL, "?v=");
			if($idStarts === FALSE) { $idStarts = strpos($ytURL, "&v=");}
			if($idStarts === FALSE)	{ return FALSE;}
			$idStarts +=3;
			$ytvID = substr($ytURL, $idStarts, $ytvIDlen);
			return $ytvID;
			// Thanks to Kris Noble and http://snipplr.com/view.php?codeview&id=19232 for this
		}
Read More Comment

iFrame Reveal Code/Like to Win/Like to Download Tab for Facebook

This code is now no longer supported – a new blog post will be coming soon

This code is now no longer supported – a new blog post will be coming soon

<?php
  function parsePageSignedRequest() {
    if (isset($_REQUEST['signed_request'])) {
      $encoded_sig = null;
      $payload = null;
      list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
      $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
      $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
      return $data;
    }
    return false;
  }
  if($signed_request = parsePageSignedRequest()) {
    if($signed_request->page->liked) { ?>

YOU LIKE THE PAGE

<?php } else { ?>

LIKE THE PAGE

<?php } ?>
Read More Comment

Text Area Non-Resizeable – Firefox and Chrome

Firefox and chrome both now feature the ability to have their textareas re-sized. This function can be turned off, or adapted with some simple css. To turn the feature off, include the following line in your css: There is also horizontal or vertical only resizing available. The next example is to force the textarea to …

Firefox and chrome both now feature the ability to have their textareas re-sized. This function can be turned off, or adapted with some simple css.

To turn the feature off, include the following line in your css:

textarea {
    resize: none;
    }

There is also horizontal or vertical only resizing available. The next example is to force the textarea to only be re-sizable on the vertical axis.

textarea {
     resize: vertical;
     }

Alternatively, if you want to let your users re-size the textarea, but only to certain widths or heights, the textareas obey the max- and min-height/width properties:

[CSS]
textarea {
max-height: 400px;
max-width: 400px;
}
[/CSS]

Read More Comment

HTML5 Template with jQuery

This post has been updated Just wanted to have a quick resource for starting a HTML5 based page. I have included jQuery as so many sites seem to use it these days! If you can think of anything else that should be added – feel free to get in touch!

This post has been updated

Just wanted to have a quick resource for starting a HTML5 based page. I have included jQuery as so many sites seem to use it these days!

If you can think of anything else that should be added – feel free to get in touch!

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
</head>
<body>

</body>
</html>
Read More Comment

Twitter Style Glow on Input Focus

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code. The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the …

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code.

The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the effect. On the :focus style, the appropriate web browser prefixed CSS is required, but you get the general idea!

[CSS]
input {
border-radius: 5px;
border: none;
outline: none; /* Get Rid of the Webkit Default Glow */
}
input:focus {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* -webkit/-moz prefixes needed */
}
[/CSS]

Read More Comment

Widgetizing a WordPress Sidebar and Creating an Additional One

When developing a WordPress theme, you may wish to take advantage of the built in system to manage, edit and order the sidebar widgets. Many themes have this built in, but if you’re developing from scratch, you might not have the code to implement it. First, locate your functions.php. This can be found in: wp-contentthemesYOUR …

When developing a WordPress theme, you may wish to take advantage of the built in system to manage, edit and order the sidebar widgets. Many themes have this built in, but if you’re developing from scratch, you might not have the code to implement it.

First, locate your functions.php. This can be found in:

wp-contentthemesYOUR THEME NAMEfunctions.php

If this file doesn’t exist, then simply make one starting and finishing with the standard php tags

?>

In between the php tags, paste the following code:

[PHP]
/* ADDING SIDEBAR WIDGETS FUNCTIONS */
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘

‘, //what each widget instance is wrapped in
‘after_widget’ => ‘

‘, //closing tag of the above
‘before_title’ => ‘

‘, //what the widget title is wrapped in
‘after_title’ => ‘

‘, //closing tag of the above
));
[/PHP]

This code (commented appropriately) is what wraps the widget and it’s heading. The %2$s adds a class specific to the widget.

Next, head to sidebar.php or wherever you want your widgets to appear. Paste in the following code:

[HTML]

[/HTML]

The alternative content will only appear if there are no widgets in the sidebar.

If you want to create a second widget section (be it in your footer, or in a second sidebar) then you will need the following code in your functions.php

[PHP]
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’=>’after_posts’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
[/PHP]

The only new code here is ‘name’. Which tells WordPress what the name of your new sidebar is. Now head over to the file where you want this second widget section to be and paste in the following code:

[HTML]
|| !dynamic_sidebar('after_posts') ) : ?>

[/HTML]

Change ‘after_posts’ in both bits of code accordingly and you are good to go!

Read More Comment