Illustration by Tony Moore Illustration

Ever wondered what to do if a zombie outbreak actually occurred one day? I bet you have, and you should be worried. The zombie apocalypse is near as we know it, but the question is, are you ready for it? You wake up on a gloomy Monday morning, only to find your deceased yet viable emotionless little sister munching savagely on your mother's juicy, bloody human flesh. What do you do?

What's a zombie?

First let me go over what a zombie actually is. A zombie is nothing more than simply just a dead person, a corpse, who is hungry for brains. Yeah that's right, BRAAAAAAAAINS!!!! The brain is the most nutritional item on the menu to them, full of vitamins and minerals. Not only is it exquisitely delicious, but it makes them feel smarter again, it's like an intellectual rejuvenation. But fear not! Zombies are completely half-witted and sluggish. A zombie cannot think like a regular person, what's on their minds is just how amazingly tasty brains are. Another thing to take note is that a zombie's bodily fluids contains a virus that is contagious. This virus is the Solanum Virus. Coming in contact with this virus will gradually turn you into a one of them, so you need to avoid them at all cost. The most common way zombie infects a person is by taking a bite out of their appetizing neck, just how zombies like it; extra-rare. Zombies also have a distinct smell; they smell like rotting carcasses. They have the stench of decaying human flesh, like my grandmother's perfume. Zombies don't usually have eyes, so they rely on the sense of smell. Zombies can tell each other apart by whether or not they smell like fresh meat. Zombies have lost their sense of touch as well, as their nerves were destroyed by deterioration. But what they can do is listen, so it's always important to not go running around town screaming “HOLY MOTHER OF GOD!! ZOMBIES!!!”. What makes zombies unique is that they have a sixth sense; the ability to detect a living organism. So no matter where you run to, zombies will be after you. It might take them a while since they are slower than a Walmart's electric scooter, but eventually they will meet up with you. Although you might start to panic and lose your calm, there are ways to survive such a thing, but first you must prepare for the outbreak, need to know what is the proper way to kill a zombie, and nevertheless where to run to outlive.

1. Preparation

Preparation is important! The zombie apocalypse could happen today, next week or in a few years but preparation is key to withstand the attack. First and foremost, you need to be in peak physical shape. This means you should be fit to be able to outrun zombies when you least expect them. It's all in the legs, so building up cardio is crucial. You want to run as fastest you can in a short amount of time so sprints are more mattering than long distance running. Remember, zombies are persistent marathon runners, not speedy drag racers. You just need to take off quick to hide and get your head together before they reach you. The fatty humans are always the first ones to go. If you have an obese friend, You can use him as a shield against the zombies. Your overweight friends are basically an all-you-can-eat buffet for the zombies and will save you time while you plan an assailment. Next, you need have basic ninja skills; like being to able to jump over fences, climb over walls and hop from roof top to roof top. You don't have to be like Bruce Lee performing parkour (running freely overcoming obstacles and surrounding by vaulting over buildings and such), you just have to not let small obstacles get in my way while running since zombies aren't Olympic gymnasts.

Food Supply

An essential element in being prepared is having a food supply. Chances are you won't be able to head down to the McDonald's Drive-Thru and order a few McDouble's and a Frappe. Most likely you will be greeted by a not so friendly gut hungry monster at the window. Instead it's always best to keep a stash of non-perishable goods, preferably in a small duffle bag for easy take off. If for whatever reason you forget, you can always take a quick trip to the grocery store and fill up a couple of grocery bags with Twinkies and Ho Hos since they are literally the best things on earth and seem to last just about forever, but it's always better to take food with nutritional value, like protein bars and canned beans; You don't want to have a heart attack when you least expect it. A gallon of water is vital! You will be running all day long, so it's good to keep hydrated and replenish your body.

First Aid Kit

A first aid kit with bandages, stitches, rubbing alcohol, hydrogen peroxide and pain killers (like Tylenol) should be a priority as well. You will be running through bushes, climbing on trees, jumping over barbed wire, etc. which would be impossible to remain injury free during the outbreak, so a first aid kit might come in handy.

Radios

Also, carrying a radio will be a precious idea. Listening to the news and getting notified about where the latest outbreaks have occurred is a good thing to be aware of, in case you need to get out of town ASAP. Aside from a radio, walkie talkies and flash lights are necessary for survival. You never want to lose contact with who you are with because it's near impossible to make it out alive being a lone wolf.

Body Armor

Fighting zombies means it will get up close and personal. You need to be geared up like a warrior ready for the battle of his life. This means you need to have some sort of body armor. Wearing heavy layers of clothing are a good place to start. Remember, you can get infected by the zombie's bodily fluids touching your skin, so being fully covered is prominent. A hockey helmet, army boots, gloves, and a metal trash can lid tied to your chest can definitely save your existence. But what good does it make being a well suited soldier without his weapons?

2. Tools

To kill a zombie means destroying its brain. Decapitation works as well since they can't move without a head. A zombie is a dead person, that means it's heart doesn't beat. The way they “stay alive” is by electrical charges in the brain that don't dissipate. These electrical charges allow them to move their muscles, therefore being able to walk.

Weapons

To get the job done you can use household items such as a screwdriver (preferably a Phillips) that you can jam right into the zombie's ear or through the squishy eyeball, a hammer, an aluminum bat, molotov cocktails (makeshift bombs) which are made by sticking a rag inside a bottle of alcohol, taping the neck with duct tape so gas won't escape, setting the rag on fire and launching the homemade firebomb at approaching zombies. A samurai sword which is good to slice the head off in one quick swift motion like it was butter, a crow bar and an axe all work perfectly well too to obliterate the brain from the zombie's head. For a bloody show, a chainsaw is your friend, but just a warning; it will be messy and you don't want any of the zombie's body juices splattering all over you since it will infect you, so you need to use it with extreme caution. Next is finding a gun shop or police station and picking out a variety of different weapons. A shotgun is absolutely essential since it will take them out with one round, dismembering the zombie into countless pieces. Shotgun slugs work like a charm. A hand gun is useful to carry around all the time for when you need to pop a zombie in the head for a quick and dirty kill. But always remember that shooting a zombie in the torso will not stop them whatsoever. Always aim for the head and conserve the ammo, although shooting zombies in the knees can be quite fun. Lastly, always make sure they are dead! Imagine walking aways from a zombie that you thought you had killed only to turn around and see it grab your ankle and begin to chew on it, tearing your fleshy leg apart like Twizzlers. Shooting it multiple times in the head is the best option to avoid this.

Vehicle

Having a vehicle is good, but having a big vehicle is even better. When you are running away for your life, most likely you will come across a roadblock of brain starving zombies. It is too risky to stop and fight them to move them out. Driving a big heavy Hummer is the best way to go because you can just smash right through them. For bonus points, you can place a machine gun on top of the sun roof and massacre the zombies that way. If traveling solo it's best to ride a motorcycle for quick getaways, since you can travel far on a single tank of gas, compared to a truck which you are going to have to stop at a gas station every two seconds. Just as a warning, try to avoid SUVs because they are most likely to roll over in sharp turns. Alright, so now that you know how to prepare and kill a zombie, where do you go?

3. Surroundings

The best places to avoid are heavily populated areas such as major cities. Instead you want to go to a rural area where there are barely any people (dead or alive) to be found. You absolutely want to avoid cemeteries, morgues and medical schools. Getting to a safe location will be the challenge. You will have to make frequent stops for food and rest. When entering a building always make sure it's clear of the hungry flesh eating creatures. Zombies can be hiding anywhere; that includes in closets, under the bed, in the fridge, in bathroom showers, under desks, basements, attics, elevators, in cars, etc. so check every nook and cranny in the room and always be in the lookout! Being aware of your surroundings is critical, unless you want to be lunch meat for the zombie right behind you tapping your shoulder. Another thing is you do not want to get trapped. Analyze the building for exits routes and paths just in case you get mobbed out of nowhere. A smart idea would be to set up a homemade alarm system, such as putting pots and cans on a wire near entrances. Stay away from doors and windows since those are easily breakable and always have someone watch your back, which means work as a team.

4. Team

Working as a team means higher chance of survival. You can have someone act as a lookout while you go inspect a building or even while you sleep. People that travel alone usually don't make it through the outbreak because they will eventually go mad. It is necessary to go out and search for other people. The bigger the team, the better. Seek for military and police personnel. They are the ones with the big guns and can help; that is, if the virus hasn't gotten to them already. When in a team, it is considerable to be aware of the people around you. If you see your friend hiding something from everyone, like their hand; chances are they got bit. Or if your friend is acting kind of weird, like being mysteriously quiet and sits down on the corner shivering; it would be best to kill them. Killing your infected friend might be a little tricky since you don't want the other people to think you are the one with psychological issues. One method you could use is to tell your friend friend to step out with you for a talk, and then shoot them point blank in the face. If your other friends ask where he is, tell them he didn't like being with the team and decided to leave. Loved ones will have to be killed for the sake of you living, so don't take it personal. Your “zombiefied” little sister won't feel a thing when the machete rips right through her skull. It's hard to kill a loved one and you might be tempted to keep them as a “pet” until a cure has been found, but don't do it. It is going to be either you get eaten by your friend or you kill your friend, the choice is up to you. Some women will freak out whenever you shoot somebody, if that's the case just slap them but not terribly hard.

5. Save Humanity

So you have learned how to prepare, how to kill, and where to run in case of the apocalypse. But what now? You can just hide in a remote location for the rest of your life and live as a coward, or you can do the right thing and try to find the antidote to restore all hope in humanity. Whatever you decision, just remember; don't get bitten, and have fun!

I will show you how to compress your HTML files using the Java library HtmlCompressor. So let's say your html code looks something like this:

<!doctype html>
<html>
<head>
	<title>htmlcompressor</title>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida suscipit lectus.</p>
	<!-- comment -->
</body>
</html>

After we compress it, it'll look like this:

<!doctype html> <html> <head> <title>htmlcompressor</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida suscipit lectus.</p> </body> </html>

Compressing your html files reduces it's size by ~20% by removing unnecessary white space, comments and stuff that it doesn't need in order to keep the structure of the content. The result is a smaller file size which equals to faster page load.

Ok, so first make sure you have ant installed in eclipse. After go ahead and download the htmlcompressor .jar from it's Google Project page. Create a directory in the root of your project called lib and drop the .jar in it. Then again in the root directory, create the xml file called build.xml. Include the following code:

<?xml version='1.0' encoding='UTF-8'?>
<project default='compress-html'>
	
	<target name='compress-html'>
		<apply executable='java'>
			<fileset dir="" includes='*.html'/>
			<arg value='-jar'/>
			<arg path='lib/htmlcompressor-1.5.2.jar'/>
			<arg line='-t html'/>
			<srcfile/>
			<arg value='-o'/>
			<mapper type='glob' from='*' to='compressed/*'/>
			<targetfile/>
		</apply>
	</target>
	
</project>

What we did is created a project which will execute the compress-html target by default. In the target we are telling it to include all the html files in the root directory and then output the compressed files in a new directory called compressed. the -t flag means type and -o means output. By default the filenames of the source files will be added to the end fo the command, so we use srcfile to place it where we want it. targetfile is used to add the target filenames to the command or else they'll be left out. The mapper type glob means that it will substitue the * in the to pattern with the text that matches the * in the from pattern.

Now run the build.xml as an Ant Build and everything should go as planned. I hope this helped!

If you look below you see my three most recently saved bookmarks from delicious:

fetching bookmarks...

First let's create an empty unordered list with a div below it that will serve as a loader (if you want to get fancy, you can use an animated loading gif):

<ul id='delicious-bookmarks'></ul>
<div class='ajax-loader'>fetching bookmarks...</div>

We are using the $.getJSON() function. Let's add our json request url and and then loop though the requested data with the $.each() function and get the title, url and date. Then we are appending a list item to our unordered list that we created earlier which will include our variables. So now after it complete the jquery, let's remove the loader:

$.getJSON('http://feeds.delicious.com/v2/json/miguelmota?callback=?',
	{
	count: '3'
	},
	function(data){
		$.each(data, function(i, item){
			var title = item.d;
	      	var url = item.u;
	      	var date = item.dt;
	      	$('#delicious-bookmarks').append("<li><a href='"+url+"'>"+title+"</a> <time>"+niceTime(date)+"<time></li>");
		});
		$('.ajax-loader').css('display','none');
	}
);

But hold on, if we leave it like that, the date will show in ISO-8601 standard which will look like . We want to display it as time ago so we will use James Padolsey's "pretty-date" function. Before the $.getJSON() function, add:

var niceTime = (function(){
	var ints = {
	second: 1,
	minute: 60,
	hour: 3600,
	day: 86400,
	week: 604800,
	month: 2592000,
	year: 31536000
	};
	return function(time){
	time = +new Date(time);
	var gap = ((+new Date()) - time) / 1000,
	amount, measure;
	for (var i in ints){
	if (gap > ints[i]){ measure = i; }
	}
	amount = gap / ints[measure];
	amount = gap > ints.day ? (Math.round(amount)) : Math.round(amount);
	amount += ' ' + measure + (amount > 1 ? 's' : '') + ' ago';
	return amount;
	};
})();

Now include the date variable as the niceTime() function argument like so:

<time class='date'>"+niceTime(date)+"<time>

Obviously replace my username with yours and that's it!

I know there might be better ways of doing this, if so let us know in the comments!

I couldn't find an HTML5 reset stylesheet that suited my needs so I decided to modify HTML5 Doctors' CSS reset a bit. This is what it looks like:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}
ol, ul {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
a {
    text-decoration: none;
}
ins {
    text-decoration: none;
}
mark {
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
hr {
    border: 0;  
    border-top: 1px solid #ccc;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}

Download reset.css | reset.min.css

This stylesheet is released under the Creative Commons Attribution 3.0 License, so feel free to use it!

I will attempt to show you how to make a simple yet awesome tooltip using jQuery and CSS3.

View the demo

Ok so first let's set up the HTML:

<a class='mtip' href='http://wwww.miguelmota.com' title='Hello, I am a tootip!'>hover over me</a>

All we did was make a link with the class of mtip (that's what I decided to call this mini plugin) and gave it a title attribute.

Now let's move on to the fun stuff. We are going to make a self executing function so that the plugin won't collide with other libraries that use the $ dollar sign:

(function($) {

})(jQuery);

Inside this function we are going to add a new function property to the jQuery.fn object where the name of the property is the name of the plugin:

(function($) {
	$.fn.mtip = function() {
		//plugin code
	}
})(jQuery);

Ok now we want to rename the title to something else, in this case I renamed it to mtip. How we are going to do this is by making a new attribute and copying the contents of the title attribute and then removing the title attribute. So what's the point in doing this? if we don't, we will have our custom tooltip and the default tooltip pop up at the same time.. which will be a nuisance!

$(this).attr('mtip',$(this).attr('title')).removeAttr('title');

So now let's assign the mtip attribute to a variable named title:

var title = $(this).attr('mtip');

Next we want to wrap the link in a container:

$(this).wrap("<div class='tooltip-container' />");

We don't want the words in the link to break so we'll keep them in the same line:

$(this).css('white-space','nowrap');

Let's prepend a new element with a class of tooltip inside the tooltip-container div:

$('div.tooltip-container').prepend("<div class='tooltip' />");

Let's create the functions for the hover method:

$(this).hover(function() {
		//hover over do stuff
	}, function() {
		//hover out do stuff
});

Inside the first hover function we are going to insert the content from title variable in to the previous element which is the tooltip div and animate the tooltip:

$(this).prev().text(title).stop(true,true).animate({opacity: 'show', top: '-30'}, 'slow');

Now make it fade out on hover out:

jQuery(this).next('div.tooltip').animate({opacity: 'hide', top: '-20'}, 'fast');

So the whole jQuery plugin code should look something like this:

(function($) {
	$.fn.mtip = function() {
		$(this).each(function(){
			$(this).attr('mtip',$(this).attr('title')).removeAttr('title');
			var title = $(this).attr('mtip');
			$(this).wrap("<div class='tooltip-container' />");
			$(this).css('white-space','nowrap');
			$('div.tooltip-container').prepend("<div class='tooltip' />");
			$(this).hover(function() {
					$(this).prev().text(title).stop(true,true).animate({opacity: 'show', top: '-30'}, 'slow');
				}, function() {
					$(this).prev().animate({opacity: 'hide', top: '-20'}, 'fast');
			});	
		});
	}
})(jQuery);

It's time to style the tooltip:

.tooltip-container {
	display: inline-block;
	position: relative;
	z-index: 1000;
}

.tooltip  {
	background-color: #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 1px 3px #000;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	color: #fff;
	display: none;
	font-family: Aria, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	opacity: .8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	padding: 5px 10px;
	position: absolute;
	text-align: center;
	top: -20px;
	white-space: nowrap;
	z-index: 1000;
}

/* triangle on the bottom */
.tooltip:after {
	border-color: #000 transparent;
	border-style: solid;
	border-width: 5px 5px 0; /* vary these values to change the angle of the vertex */
	bottom: -5px; /* value = - border-top-width - border-bottom-width */
	content: "";
	display: block;
	height: 0;
	left: 10px; /* controls horizontal position */
	margin-left: -5px;
	position: absolute;
	width: 0;
	z-index: 1000;
}

The CSS is self-explanatory so I won't go in much detail

So the last step now is to initialize our tooltip:

$(document).ready(function(){
	$('.mtip').mtip();
});

But wait.. since Internet Explorer doesn't support border-raidus we have to use a script to render it. I will use CSS3 PIE. Simply add the behavior rule at the end of the tooltip class, but make sure the path is relative to the HTML file being viewed, so for example if you upload the PIE folder to the root of your site; it should look like this:

.tooltip  {
	...
	behavior: url('/PIE/PIE.htc');
}

That's it folks! You should now have a functioning mini tooltip plugin. If I made mistakes or if you would like to add, please comment! any feedback is greatly appreciated.

Why hello there, and welcome to my blog. I am using jekyll, a static site generator, and it's being hosted on GitHub Pages. I will blog about all things web, usually about code and design tips, tricks and techniques.

So yep, that's pretty much it!