Why does the blog look terrible? Find out
mikestreety~coding & life

Archives

My Favourite 5 Books – A smashing story

Recently I’ve been going through a fad of buying web related books. I love the feel of books, I love reading books. I love sitting on the train reading about web design and development. With a book you’re forced to read, rather than skim. With a book you can slide in a bit of paper …

Recently I’ve been going through a fad of buying web related books. I love the feel of books, I love reading books. I love sitting on the train reading about web design and development. With a book you’re forced to read, rather than skim. With a book you can slide in a bit of paper and bookmark your favourite snippet of code. With a book you can have them sitting pretty on a book shelf. With a book you can pass it to your neighbour, or have it sitting on your desk, giving you something to flick through when you want to rest your eyes from the screen.

With books come magazines. The .net magazine is my bible. I will sit and read it from cover to cover, soaking in the news, the stories, the interviews and the hints and tips. I just love being able to open a page and turn it to my developer. My .net mag gets whored around like a lady of the night in my office and thats because its easy to read and easy to digest. Its not like sitting in front of a computer reading a long article. Web articles never look pretty. Books and magazines look stunning.

The irony is not lost on me that I am writing a blog post about how good books are. I have not lost the fact that I am writing a long piece of ugly text for you to sit and read. The fact i’m merely typing is because I cannot afford to publish my blog posts.

Anyway, I digress. The purpose of my boast was not to ramble on about the greatness of books, but to recommend a few. I would like to start some sort of #bookstobuy club. The idea being that you list your favourite 5 books, or recent web related book or magazine purchases and you explain in a few words why its a good book. Write a blog about it and put the link in the comments. Hopefully this will be good to the world. So onto my list:

Just a note – you’ll find the title of the book and a link, followed by the [publisher] and the {topics} of the book. All I ask is that you follow suit.

  1. .net magazine {HTML, CSS, PHP, General Knowledge} - It goes without saying that this magazine has taught me an astonishing amount of things. The greatness it brings to life is good.
  2. jQuery – Novice to Ninja [Sitepoint] {Javascript, jQuery} – this book, on its own, got me into jQuery. Made me realise the most complex of animations and effects are just a .animate() away.
  3. The CSS Anthology [Sitepoint] {CSS} – A brilliant book that gives you the low down on all the CSS selectors and what they do and cover. An amazing reference book
  4. HTML5 and CSS3 for the real world [Sitepoint] {HTML5, CSS3, Semantics} – (seeing a trend here?) This book educated me into the wonders of HTML5. It is what I have built this site and written this blog post. The things I learnt from the book have put me in good stead for the next few years.
  5. The Smashing Magazine Books [Smashing Magazine] {Everything} – (I know strictly this is numbers 5 & 6, but they were a bundle!) I bought the bundle (books one and two) and they are absolutely fantastic. Brilliant. They cover tons of topics and give you a good overview of so many topics. I have, in fact, just ordered the third book despite not even being halfway through the first. They are just teasers of topics, which allows you to gauge what that subject is and what you’re interests are.

They are my favourite 5 books – what are yours?

Read More
Posted in General, The Internet | Tagged , , , , , , | 4 Replies

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.

[php]
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;

}
[/php]

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]
<?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 } ?>
[/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

[php]
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
}
[/php]

Read More
Posted in PHP | Tagged , , , , , ,

Develop, Style or Add Content to a Live Site

If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it. If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy …

If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it.

If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy and paste the below code into wherever you need to add/change.

[php]<?php if($_SERVER['QUERY_STRING'] == ‘test’) { ?>
<!– code protected from public viewing –>
<?php } ?>[/php]

You can put anything in between the PHP, Including CSS, HTML and PHP. If you need to replace something rather than add, simply adapt it to be an ELSE statement like so:

[php]<?php if($_SERVER['QUERY_STRING'] == ‘test’) { ?>
<!– code protected from public viewing –>
<?php } else { ?>
<!– Original Code –>
<?php } ?>
[/php]

To access the extra content, navigate to www.yoursite.com/anypage?test. To change ‘?test’ to any other word, edit the first line of the PHP.

This is also helpful for use with contact forms (sending the user back to your contact page with ?thanks in the URL or similar and replacing the contact form with a message), or sending users to different links on the same page to reveal codes or links.

Read More
Posted in HTML/CSS, PHP | Tagged , , , , , , | Leave a reply

Designing for Mobile

Recently i was tasked to transform a full website into a stripped down mobile version for those visiting on their i-whatsits. Having never designed for mobile before, i set out to find the easiest way which would cater for all devices. In the office people around me had an HTC Desire (Android), iPhone 4, iPhone …

Recently i was tasked to transform a full website into a stripped down mobile version for those visiting on their i-whatsits. Having never designed for mobile before, i set out to find the easiest way which would cater for all devices.

In the office people around me had an HTC Desire (Android), iPhone 4, iPhone 3, iPod Touch, Blackberry and my trusty LG Renoir. Between us we had most of the bases covered.

Chris Coyer posted this post about redirecting mobiles to specific page using this code:

<script type=”text/javascript”>
<!–
if (screen.width <= 699) {
document.location = “mobile.html”;
}
//–>
</script>

However in my tests it would redirect the LG and the Apple products but not the Blackberry

I then found this code (which needs to go at the very top of each page):

if ($version != “desktop”) {
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match(‘/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i’,$useragent)||preg_match(‘/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i’,substr($useragent,0,4)))
header(‘Location: YOUR PAGE’);
}

This seemed to do the trick and redirected everyone’s mobiles in the office – when ‘YOUR PAGE’ is replaced with the URL of your mobile site. Once I had the redirect working I set about designing the mobile site.

Note: is that mobiles very much like XHTML, so as long as you code in that (the one with the self closing tags in <br />’s and such) then your site will be fine!

I did find a template from 9Lessons from where I started from which enables you to define mobile specific variables.

<html>
<head>
<title>Mobile Website</title>
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” name=”viewport” />
<style>
#container
{
width:100%;
}
</style>
</head>
<body>
<div id=”container”></div>
</body>
</html>

Note: Because mobiles range completely in size, try and make your layout as fluid as possible don’t be afraid of height and make your site 100% wide!

Your site may contain phone numbers and people visiting on their mobiles may wish to call those numbers! In this instance, simply give your numbers a href of tel:

<a href=”tel:0000000″>0000000</a>

if you replace the tel: with sms: it makes the link textable from iPhones

Read More
Posted in Websites | Tagged , , , , , , , , , , , | Leave a reply

Changes – the Past, the Present and the Future

A lot has happened recently – mainly me getting a full time job doing something I love. During the final year of my degree I started doing work experience at a web design company in Brighton – BozBoz. Having worked on my own in my bedroom for several years it was a massive leap to work in an office on a site which is certain to get thousands of visitors a month where more than one person is working at any one time! Having people to talk to about design and decisions with was a great help!

BozBoz - Web Design BrightonA lot has happened recently – mainly me getting a full time job doing something I love. During the final year of my degree I started doing work experience at a web design company in Brighton – BozBoz. Having worked on my own in my bedroom for several years it was a massive leap to work in an office on a site which is certain to get thousands of visitors a month where more than one person is working at any one time! Having people to talk to about design and decisions with was a great help!

They offered me a part-time job, allowing me to leave the shop I was working at and start earning money for a hobby, which I enjoyed. Once I had completed my degree (getting a 2:1 thank you) they offered me a full time job and here I am. I’ve only been there for two months but already I have learned so much! My very very basic knowledge of PHP has now developed into just basic PHP wisdom – but i’m getting there. Since being there my CSS and HTML skills have improved ten-fold. Things that I would have thought impossible before I started (layouts, designs etc.) I now feel confident creating.

When I am designing and developing websites for myself, planning the, i’ll create them for my skills, sometimes creating blocky sometimes basic designs. While at BozBoz however, we have a separate designer who pushes our skills to the limits and sometimes further! It is not just the designer who pushes my ‘talent’ but also our PHP/Javascript developer. Working with him we teach each other several things a day and sometimes dare each other to new limits.

Anyway – this isn’t about me blowing my own trumpet. Actually I lie. It is. I just thought I would keep you updated with my goings on!

Tim Healey

DJ Tim Healey approached me wanting a MySpace redesign for both his personal account and the one set up for his label – Surfer Rosa Records. It was a brand new concept to design for MySpace and had to go against all my instincts and code CSS like an amateur. However, I’m really pleased with the finished results and it doesn’t really look like a MySpace page at all!

They can be found at the following URLs:

myspace.com/djtimhealey

myspace.com/surferrosarecords

SusSAR

The ever on-going project of Sussex Search and Rescue is under new development. I am working with the afore mentioned PHP developer to create a custom login allowing news to be posted easier. The whole backend is generally having a full revamp, making it easier to update and change the layout or the pages. Watch this space for when it goes live.

Drink in Brighton and Skint

At BozBoz we’ve had two of the most biggest projects we’ve done go live in the space of a week. Skint Entertainment is the home of artists such as FatBoy Slim and the Freemasons. Check out the BozBoz portfolio for the full update.

We’ve also been developing a website for pub chain; Drink In Brighton. Owning over 40 pubs, this website collates the News and Events of the hottest pubs, clubs and bars in Brighton. We’ve been working on this website for a few months and Suday night was the night where it all went into the big wide world. The site includes custom templates for various venues and several funky features, including a flash map and a carousel. Again see the Portfolio for more details!

HTML Emails

One last thing – since working at BozBoz I seem to have become somewhat of a ‘pro’ at creating HTML emails suitable for email marketing. I am creating them for some well known people – but must keep it a secret! Sorry! On that note, however, I will be making a blog post on how to make that perfect HTML email!

Read More
Posted in General, The Internet, Websites | Tagged , , , , , , , , , | Leave a reply

Create a WordPress Page with Posts and Custom Code

I have recently been creating a website where the client wanted a soundcloud player at the top of the page, with the posts from a certain category underneath within their wordpress powered site.. Obviously, I could create a sticky post, but that would be messy. Instead I created a WordPress Page template with the soundcloud …

I have recently been creating a website where the client wanted a soundcloud player at the top of the page, with the posts from a certain category underneath within their wordpress powered site.. Obviously, I could create a sticky post, but that would be messy.

Instead I created a WordPress Page template with the soundcloud code at the top, underneath I then included the code which inserts the posts from that category.

First create a new WordPress Page Template.

Next, copy and paste the following code into your php page

<!– insert Code here –>

<div>
<?php
if (is_page() ) {
$category = 4;
}
if ($category) {
$cat = 4;
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$post_per_page = -1; // -1 shows all posts
$do_not_show_stickies = 1; // 0 to show stickies
$args=array(
‘category__in’ => array($cat),
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
‘paged’ => $paged,
‘posts_per_page’ => $post_per_page,
‘caller_get_posts’ => $do_not_show_stickies
);
$temp = $wp_query;  // assign orginal query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query($args);
if( have_posts() ) :
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

<div><?php the_time(‘F jS, Y’) ?> &mdash; <?php the_time(‘g:ia’) ?> <?php edit_post_link(‘Edit’); ?> </div>

<div>

<?php the_content(‘Continue reading &raquo;’); ?>

</div>

<?php endwhile; ?>
<div>
<div><?php next_posts_link(‘Older Entries’) ?></div>
<div><?php previous_posts_link(‘Newer Entries’) ?></div>
</div>
<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?>

<?php endif;

$wp_query = $temp;  //reset back to original query

}  // if ($category)
?>

</div>

Replace the line of code

<!– insert Code here  –>

With the sound cloud, or youtube code you wish to appear on the page before the posts .

Change the category number ($cat=4; and $category = 4; in the exampple provided) and the number of posts you wish to appear ($post_per_page = 5)

Upload, select it in your page settings and hey presto! Your page is dual functioning!

Read More
Posted in The Internet, Websites | Tagged , , , , , | Leave a reply

Show WordPress Post Titles & Posts On Your Website

If you use WordPress for your blog, but your blog is not your home page, you may wish to display the latest blog posts on your homepage, or any other page for that matter, to entice people into your blog. WordPress Pages If you use WordPress for your whole site (pages and all) then this …

If you use WordPress for your blog, but your blog is not your home page, you may wish to display the latest blog posts on your homepage, or any other page for that matter, to entice people into your blog.

WordPress Pages

If you use WordPress for your whole site (pages and all) then this is relatively easy to add the code in the code. It can be placed in your footer (where I have it), sidebar or anywhere else you want it. Unfortunately, as with most WordPress code, it cannot be pasted straight into a post or a page.

The code to show your latest 3 posts is:

<?php wp_get_archives(‘type=postbypost&limit=3′); ?>

Result:

The wp_get_archives code is hugely customiseable. It can show months, days, posts etc. The default code generated comes out as a list (<li>), but needs a <ul> tag around the php script.

To show, for example, the last 5 days where you have posted, with the post count next to it, you would use the following code:

<?php wp_get_archives(‘type=daily&limit=5&show_post_count=true’); ?>

Result:

One last example; If you would like to show Weekly posts for the last 7 weeks, with the word ‘Week:’ before each link and the words ‘was a good week’ after with each one in a <h3> tag, you would use the following code:

<?php wp_get_archives(‘type=weekly&limit=5&format=custom&before=<h3>Week: &after= was a good week</h3>’); ?>

Result:

That single line code, as you can see, can be adapted to show exactly what you want. More details about the wp_get_archives reference, can be found in the WordPress Codex. For hard coding the wp_get_archives html, it can be found on line 818 in the wp-includes/general-template.php

Non-Wordpress Pages

You can also include your latest blog post titles on your homepage, even if your pages are not generated within WordPress. (For example, my WordPress installation is located at www.mikestreetmedia.com/blog but I want my latest blog title to appear on my homepage, outside of the blog folder). It does not require complex database connections, but rather a call to the wp-load.php file.

To use the following code there are a couple of requirements:

1) The WordPress installation is located on the same server as the file where the code is going (for example: in a /wordpress/ folder)

2) Your page is a php page. If it is .html then rename to .php. unfortunately, you will need to upload the file to a server (or set up a local testing server) to make sure the code works.

Firstly copy the following code into your page:

<?php
// Include WordPress
define(“WP_USE_THEMES”, false);
require(“./blog/wp-load.php”);
query_posts(“showposts=3″);
?>

The ‘false’ tells the code not to include your template, the following line says where the wp-load.php file is. If your blog is in a /blog/ folder, you would change /Wordpress/ to /blog/. Finally the query_posts() line allows a variety of customisation. For example: if you wanted to show the 3 most recent posts in category 3, you would use the following code:

query_posts(‘cat=3&’showposts=1′);

Now you have called your posts, all you need to do now is include the loop and the information you want. The code is just the same as you would find in your index.php, or archives.php in your theme:

<?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_centent(); ?>
<p><a href=”<?php the_permalink(); ?>”>Read more…</a></p>
<?php endwhile; ?>

This can be customised as you would when editing your theme.

Alternatively, you can use a website like Feederr, which will turn your latest blog post into an image, which updates each time. It walks you through step by step to get your box, which, when customised, looks something like this:

Mike Street media latest blog entry

Read More
Posted in The Internet, Websites | Tagged , , , , , , , , , , , , , , , , , | Leave a reply