Blog

Order of the cards James Gallea 673 King Street trick

This is the order of the cards in James Gallea 673 King Street trick. I thought one day I might like to learn it, its awesome. I couldn't find the cards written down anywhere so I played the video and jotted them down.

The suits don't matter except the red and black queens at the start, and make sure your straight flush at the end is all Spades : )

Red Queen Red Queen Black Queen Black Queen Jack 6 7 3 King 2 5 2 5 Jack 7 King 6 7 3 King 6 7 3 King 2 5 10 10 10 10 Jack 4 4 8 8 8 4 9 9 9 9 8 A A A A WHAT THE HELL? Jack 2 3 4 5 6

Made famous by reddit!

This the same trick that was recently featured on reddit videos, with the Irish lad at the pool table. You can check out his great rendition here

Blog pagination.

I just did it. This is the function that returns an array of my posts:

public static function find_active($page=0)
	{
		$all_posts = static::find_by_sql("SELECT * FROM " . static::$table_name . " WHERE  `active`=1 ORDER BY `date` DESC  "); 
		if($page==0){
			return $all_posts;
		}
		$from = POSTS_PER_PAGE * ($page - 1);
		return array_slice($all_posts, $from, POSTS_PER_PAGE);
	}

This function is slightly interesting because, always remember, after a return, an else statement isn't necessary. I also made a little function that just counts the total posts:

public static function count(){
		$all_posts = static::find_by_sql("SELECT * FROM " . static::$table_name . " WHERE  `active`=1 ORDER BY `date` DESC  "); 
		return count($all_posts);
	}

Then I just use these two functions in my page to grab whichever posts I want:

// Grab the page number
if(!empty($_GET['p'])){$page = $_GET['p'];}
else{$page = 1;};
$blogs = Blog::find_active($page); 

And to echo out the pagination at the bottom:

<nav class="blog-pages">Select page:
<?php
	// Count the posts
	$count = Blog::count();
	// Find the number of pages (round up no matter how small the difference)
	$pages = ceil($count / POSTS_PER_PAGE);
	// For each page
	for($i=1; $i<=$pages;$i++):
		// Create a link to the page
		$marker = "<a href='".WEB_ROOT."blog/p/$i'";
		if($i == $page){
			// If it is the current page (if blog/p/this_page_number) make it active
			$marker .= " class='active'";
		}
		// Add the number
		$marker .=">$i</a>";
		// Echo
		echo $marker;
	endfor;
?>
</nav>

Color on hover social icons: workflow

There is a time and place for starting stuff from scratch, and a time and place for using what someone else has made.  jQuery plugins range from the teeny tiny to the bloated, so knowing what you're setting out to achieve is really important.

I wanted to create some grayscale icons with a hover effect.  I've been trying to use more "Flat design" at the moment, it might get old pretty quickly, but there is no ignoring the fact its pretty on-trend right now.  I could redraw the icons in an HTML5 canvas grayscaled, but to be honest it seems like overkill!  I decided better was to grab png versions, and then animate a css background.

1. Drawing the icons

Don't be silly, some quick googling of flat social icons pretty quickly leads us to this great repository by danleech, called Simple Icons.  I grabbed these.

2. CSS

First I dumped all the icons I knew I wanted into one Photoshop file.  I saved-as a .psd before I carried on, so often with sprite sheets I need to resize, add to, recolour etc, and it always makes sense to have a build file.  Next I had to find all the image positions - oh yep, there's an app for that called Sprite Cow which pretty quickly gave me everything I needed for my .scss file, which I use Codekit to preprocess.

style.scss

.youtube-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat 0 -48px;
	}
}
.stumble-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat -33px -48px;
	}
}
.facebook-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat 0 -81px;
	}
}
.twitter-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat -33px -81px;
	}
}

3. jQuery

Anyone who has used jQuery for longer than about a month knows that it won't animate colours.  Dag nammit!  Google it.  Ah, here we go! So now we just use my favourite hover function, jQuery hover uses two arguments, one for when the mouse enters, and one for when the mouse leaves the element.

So, right now they're all just grey... I need to look up every single colour for all the icons - this could take a while. Oh, no hang on! Turns out there is a website called Brand Colors, and its a one pager with just every major social brand out there on it.  I can store this hex value on each element as an HTML5 data- attribute, and then grab it with jquery.

html

<li data-color='#c4302b'><a href="#youtube">#</a></li>

jQuery

to_color = $(this).attr("data-color");

So, now we're pretty much ready to go with the hover function:

jQuery

$("#social-icons li").hover(function(){
	to_color = $(this).attr("data-color");
	from_color = "#eaeaea";
	$(this).animate({backgroundColor: to_color}, 100);
}, function(){
	$(this).animate({backgroundColor: from_color}, 300);
})

 

A little bug

Ah that should have just worked, and it does! But if I quickly hover over all of them back and forth they all queue their animations and the animations keep happening!  Google.  Turns out you just need to put a stop in there on the animate!

$("#social-icons li").hover(function(){
	to_color = $(this).attr("data-color");
	from_color = "#eaeaea";
	$(this).stop().animate({backgroundColor: to_color}, 100);
}, function(){
	$(this).stop().animate({backgroundColor: from_color}, 300);
})

 

Summary

Well that wasn't so bad after all!

I just thought I'd doff my cap to all these great little apps you can use to make your work flow faster and, more importantly, fun. There are so many tools out there and if you don't use them, you're going to get left behind pretty quickly.



Ends:

Update to Email Protector

After the last couple of projects I found it necessary to update my PHP email protector function so that now it can have text in the link (as opposed to before, where it would be the email address wrapped in a link to the same email address), and also it can be returned, rather than printed straight to the page - for use in other functions or to save to a database.

It now looks a little something like this:

<?php 
function php_split_js_make_email($phpemail,$text='',$echo=true)
	{
		$pieces = explode("@", $phpemail);
		
		$return = '
			<script type="text/javascript">
			var a = "<a href='mailto:";
			var b = "' . $pieces[0] . '";
			var c = "' . $pieces[1] .'";
			var d = "' class='email'>";
			var e = "</a>";';
		if($text != ''){
			$return .= 'document.write(a+b+"@"+c+d+'.$text.'+e);';
		}else{
			$return .= 'document.write(a+b+"@"+c+d+b+"@"+c+e);';
		}
		$return .= '
			</script>
			<noscript>Please enable JavaScript to view emails</noscript>';
		if($echo == true)
		{
			echo $return;
		}else{
			return $return;
		}

	}
?>

Ends: