The array is associative and has the two digit country code as the index and the country name as the element value.

Country codes are useful as some eCommerce payment gateways require these rather than the full country name. Here’s the array:

$countries = array("AF" => "Afghanistan",
"AX" => "Åland Islands",
"AL" => "Albania",
"DZ" => "Algeria",
"AS" => "American Samoa",
"AD" => "Andorra",
"AO" => "Angola",
"AI" => "Anguilla",
"AQ" => "Antarctica",
"AG" => "Antigua and Barbuda",
"AR" => "Argentina",
"AM" => "Armenia",
"AW" => "Aruba",
"AU" => "Australia",
"AT" => "Austria",
"AZ" => "Azerbaijan",
"BS" => "Bahamas",
"BH" => "Bahrain",
"BD" => "Bangladesh",
"BB" => "Barbados",
"BY" => "Belarus",
"BE" => "Belgium",
"BZ" => "Belize",
"BJ" => "Benin",
"BM" => "Bermuda",
"BT" => "Bhutan",
"BO" => "Bolivia",
"BA" => "Bosnia and Herzegovina",
"BW" => "Botswana",
"BV" => "Bouvet Island",
"BR" => "Brazil",
"IO" => "British Indian Ocean Territory",
"BN" => "Brunei Darussalam",
"BG" => "Bulgaria",
"BF" => "Burkina Faso",
"BI" => "Burundi",
"KH" => "Cambodia",
"CM" => "Cameroon",
"CA" => "Canada",
"CV" => "Cape Verde",
"KY" => "Cayman Islands",
"CF" => "Central African Republic",
"TD" => "Chad",
"CL" => "Chile",
"CN" => "China",
"CX" => "Christmas Island",
"CC" => "Cocos (Keeling) Islands",
"CO" => "Colombia",
"KM" => "Comoros",
"CG" => "Congo",
"CD" => "Congo, The Democratic Republic of The",
"CK" => "Cook Islands",
"CR" => "Costa Rica",
"CI" => "Cote D'ivoire",
"HR" => "Croatia",
"CU" => "Cuba",
"CY" => "Cyprus",
"CZ" => "Czech Republic",
"DK" => "Denmark",
"DJ" => "Djibouti",
"DM" => "Dominica",
"DO" => "Dominican Republic",
"EC" => "Ecuador",
"EG" => "Egypt",
"SV" => "El Salvador",
"GQ" => "Equatorial Guinea",
"ER" => "Eritrea",
"EE" => "Estonia",
"ET" => "Ethiopia",
"FK" => "Falkland Islands (Malvinas)",
"FO" => "Faroe Islands",
"FJ" => "Fiji",
"FI" => "Finland",
"FR" => "France",
"GF" => "French Guiana",
"PF" => "French Polynesia",
"TF" => "French Southern Territories",
"GA" => "Gabon",
"GM" => "Gambia",
"GE" => "Georgia",
"DE" => "Germany",
"GH" => "Ghana",
"GI" => "Gibraltar",
"GR" => "Greece",
"GL" => "Greenland",
"GD" => "Grenada",
"GP" => "Guadeloupe",
"GU" => "Guam",
"GT" => "Guatemala",
"GG" => "Guernsey",
"GN" => "Guinea",
"GW" => "Guinea-bissau",
"GY" => "Guyana",
"HT" => "Haiti",
"HM" => "Heard Island and Mcdonald Islands",
"VA" => "Holy See (Vatican City State)",
"HN" => "Honduras",
"HK" => "Hong Kong",
"HU" => "Hungary",
"IS" => "Iceland",
"IN" => "India",
"ID" => "Indonesia",
"IR" => "Iran, Islamic Republic of",
"IQ" => "Iraq",
"IE" => "Ireland",
"IM" => "Isle of Man",
"IL" => "Israel",
"IT" => "Italy",
"JM" => "Jamaica",
"JP" => "Japan",
"JE" => "Jersey",
"JO" => "Jordan",
"KZ" => "Kazakhstan",
"KE" => "Kenya",
"KI" => "Kiribati",
"KP" => "Korea, Democratic People's Republic of",
"KR" => "Korea, Republic of",
"KW" => "Kuwait",
"KG" => "Kyrgyzstan",
"LA" => "Lao People's Democratic Republic",
"LV" => "Latvia",
"LB" => "Lebanon",
"LS" => "Lesotho",
"LR" => "Liberia",
"LY" => "Libyan Arab Jamahiriya",
"LI" => "Liechtenstein",
"LT" => "Lithuania",
"LU" => "Luxembourg",
"MO" => "Macao",
"MK" => "Macedonia, The Former Yugoslav Republic of",
"MG" => "Madagascar",
"MW" => "Malawi",
"MY" => "Malaysia",
"MV" => "Maldives",
"ML" => "Mali",
"MT" => "Malta",
"MH" => "Marshall Islands",
"MQ" => "Martinique",
"MR" => "Mauritania",
"MU" => "Mauritius",
"YT" => "Mayotte",
"MX" => "Mexico",
"FM" => "Micronesia, Federated States of",
"MD" => "Moldova, Republic of",
"MC" => "Monaco",
"MN" => "Mongolia",
"ME" => "Montenegro",
"MS" => "Montserrat",
"MA" => "Morocco",
"MZ" => "Mozambique",
"MM" => "Myanmar",
"NA" => "Namibia",
"NR" => "Nauru",
"NP" => "Nepal",
"NL" => "Netherlands",
"AN" => "Netherlands Antilles",
"NC" => "New Caledonia",
"NZ" => "New Zealand",
"NI" => "Nicaragua",
"NE" => "Niger",
"NG" => "Nigeria",
"NU" => "Niue",
"NF" => "Norfolk Island",
"MP" => "Northern Mariana Islands",
"NO" => "Norway",
"OM" => "Oman",
"PK" => "Pakistan",
"PW" => "Palau",
"PS" => "Palestinian Territory, Occupied",
"PA" => "Panama",
"PG" => "Papua New Guinea",
"PY" => "Paraguay",
"PE" => "Peru",
"PH" => "Philippines",
"PN" => "Pitcairn",
"PL" => "Poland",
"PT" => "Portugal",
"PR" => "Puerto Rico",
"QA" => "Qatar",
"RE" => "Reunion",
"RO" => "Romania",
"RU" => "Russian Federation",
"RW" => "Rwanda",
"SH" => "Saint Helena",
"KN" => "Saint Kitts and Nevis",
"LC" => "Saint Lucia",
"PM" => "Saint Pierre and Miquelon",
"VC" => "Saint Vincent and The Grenadines",
"WS" => "Samoa",
"SM" => "San Marino",
"ST" => "Sao Tome and Principe",
"SA" => "Saudi Arabia",
"SN" => "Senegal",
"RS" => "Serbia",
"SC" => "Seychelles",
"SL" => "Sierra Leone",
"SG" => "Singapore",
"SK" => "Slovakia",
"SI" => "Slovenia",
"SB" => "Solomon Islands",
"SO" => "Somalia",
"ZA" => "South Africa",
"GS" => "South Georgia and The South Sandwich Islands",
"ES" => "Spain",
"LK" => "Sri Lanka",
"SD" => "Sudan",
"SR" => "Suriname",
"SJ" => "Svalbard and Jan Mayen",
"SZ" => "Swaziland",
"SE" => "Sweden",
"CH" => "Switzerland",
"SY" => "Syrian Arab Republic",
"TW" => "Taiwan, Province of China",
"TJ" => "Tajikistan",
"TZ" => "Tanzania, United Republic of",
"TH" => "Thailand",
"TL" => "Timor-leste",
"TG" => "Togo",
"TK" => "Tokelau",
"TO" => "Tonga",
"TT" => "Trinidad and Tobago",
"TN" => "Tunisia",
"TR" => "Turkey",
"TM" => "Turkmenistan",
"TC" => "Turks and Caicos Islands",
"TV" => "Tuvalu",
"UG" => "Uganda",
"UA" => "Ukraine",
"AE" => "United Arab Emirates",
"GB" => "United Kingdom",
"US" => "United States",
"UM" => "United States Minor Outlying Islands",
"UY" => "Uruguay",
"UZ" => "Uzbekistan",
"VU" => "Vanuatu",
"VE" => "Venezuela",
"VN" => "Viet Nam",
"VG" => "Virgin Islands, British",
"VI" => "Virgin Islands, U.S.",
"WF" => "Wallis and Futuna",
"EH" => "Western Sahara",
"YE" => "Yemen",
"ZM" => "Zambia",
"ZW" => "Zimbabwe");

The countries names are alphabetical but the country codes aren’t as some countries names are somewhat illogical. For example, United Kingdom is GB. If you wish to order them by country code simple use PHP’s ksort.

ksort($countries);

Here’s an example of how you could output your drop down:

<select name="countries">
<?php

foreach($countries as $key => $value) {

?>
<option value="<?= $key ?>" title="<?= htmlspecialchars($value) ?>"><?= htmlspecialchars($value) ?></option>
<?php

}

?>
</select>

function getplaintextintrofromhtml($html, $numchars) {

    // Remove the HTML tags
    $html = strip_tags($html);

    // Convert HTML entities to single characters
    $html = html_entity_decode($html, ENT_QUOTES, 'UTF-8');

    // Make the string the desired number of characters
    $html = substr($html, 0, $numchars);

    // Add an elipsis
    $html .= "…";

    return $html;

}

The reason strip_tags only won’t do is because otherwise things like & will output as &. If you’re outputting to a web page you may think you don’t need to decode the entities but what if your string cut-off point is part way through an entity? This function converts HTML to pure plain text so you can do what you want with it. That does mean if you are outputting to HTML you will need to call htmlspecialchars or htmlentities.

Here’s the summary:

	padding	border	margin
height
innerHeight
outerHeight
outerHeight(true)

Some years ago it seemed that YouTube was the only major player in the world of online video. Thanks to its success and popularity, other sites followed suit making the Internet awash with video content. Because of this, I’m often asked, “can you upload video to your website?”

To answer that question it is necessary to give an overview as to how video works online. Without wanting to get too technical here’s a very brief summary of how it works.

Video is essentially lots and lots of images and an audio track all in one file. Compared to a song on its own or a single image (especially so for the latter) a video is huge in file size. To make video a viable digital media medium it needs to be compressed first to reduce its size. Once compressed, it then needs to be decompressed by the user. The software that handles this is known as a “codec”—which is a portmanteau of compression and decompression.

In an ideal world there would only be a single codec; it would be perfectly efficient and be available on every computer, tablet and mobile in the world. As is often in the real world, the reality is far from perfect.

There are lots of codecs available. Each one handles the compression/decompression differently. They yield different files sizes and qualities, they are subject to different legal restrictions and are not necessarily available for all devices and computers.

This fragmented situation means that there is currently no standard way to deliver video through the web. Furthermore, an online video needs player controls (E.g. play, pause) for which there is also no standard implementation.

At any one time though, there are usually just a handful of formats that people use that cover the full gamut of website visitors. When adding video to your website it’s important to consider offering more than one format. Because of the huge technological difference between a desktop computer and a smartphone, for example, you will generally need to offer a different format for each one. To make things even more confusing the format you shot your video in may not even be suitable for the web in the first place.

At this point you’re probably ready to give up on the idea altogether. After all, if you knew what formats were suitable for the web, how to convert them and how to deliver the right format based on your visitor you wouldn’t be reading this article. Don’t give up though, the solution is here!

So, how do you learn to do all the above? The brilliantly simple answer is: you don’t.

All you need to do is create an account with an online provider such as YouTube or Vimeo. When you upload videos to such sites they do all the converting for you. They also factor in mobile devices. To add them to your site you simply get something called the “embed code”. This allows you to place the video onto your own website. Ask your web designer for more details on how this is done. It’s quick, easy and free though.

The only major con to the above method is you have little control over how the video looks and it contains third party branding. If you wish to style it yourself you have two options.

Option one is to get your web designer to encode the video and add it directly to your website. However, you will have to pay for their time and you won’t be able to do it yourself.

Option two is to install software onto your web server that works in the same way as YouTube, etc. That is, you upload video in the format you took it in and the software does the rest. While this makes for a very slick site, to do this you need your very own web server and would have to pay significant cost to have it installed, configured and integrated into your site.

To get a site with video call me on 07843 483 078 or get a free quote online.

And here’s the source code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple JQuery Sliding FAQs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<style media="all">

span {

    display: block;
    float: left;
    width: 35px;

}

div.faq, div.answer { width: 600px; }

/* This prevents JQuery's slidedown jerky bug */
h2 { margin: 0px; }

</style>
<script>

$(function() {

    $('div.answer').hide();

    $('a.question').before('<span class="faqplusminus">[+]</span>');

    $('a.question').click(function() {

        $('div.answer').slideUp('slow', 'easeInOutExpo');

        $('span.faqplusminus').html('[+]');

        var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);

        if(!slidedownelement.is(':visible')) {

            slidedownelement.slideDown('slow', 'easeInOutExpo');
            slidedownelement.parent().find('span.faqplusminus').html('[-]');

        }

    });

});

</script>
</head>
<body>
<p>Click on a question reveal the answer.</p>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 1 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 2 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 3 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
</body>
</html>

So, how does it work?

First, we hide all the answers.

$('div.answer').hide();

Then we add a +/i icon. You can change this for an image icon if you like.

$('a.question').before('<span>[+]</span>');

When a question link is clicked we first set all answers to slide up and change to [+].

$('div.answer').slideUp('slow', 'easeInOutExpo');
$('span.faqplusminus').html('[+]');

We immediately find the active answer element.

var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);

Then we slide it down and change it to [-]. This cancels out the slideup() called earlier.

if(!slidedownelement.is(':visible')) {

    slidedownelement.slideDown('slow', 'easeInOutExpo');
    slidedownelement.parent().find('span.faqplusminus').html('[-]');

}

We call !slidedownelement.is(':visible') so that if the answer is already visible, nothing happens.

To create FAQs simply use this template for each one:

<div class="faq">
    <h2><a class="question" href="javascript:void(0);">Question</a></h2>
    <div class="answer">
        <p>Answer.</p>
    </div>
</div>

For the impatient, here’s the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vAlign Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style media="all">

body, html {

    height: 100%;
    margin: 0;

}

</style>
<script>

$(function() {

    $('.valignmiddle').each(function() {

        $(this).parent().css('position', 'relative');
        $(this).css('position', 'absolute');
        $(this).css('top', '50%');
        $(this).css('left', '0px');
        $(this).css('width', '100%');

    });

    $(window).resize(function() {

        var thisheight = Math.round(parseInt($('.valignmiddle').outerHeight()) / 2);
        $('.valignmiddle').css('margin-top', '-' + thisheight + 'px');

        if(parseInt($('.valignmiddle').outerHeight()) > parseInt($('.valignmiddle').parent().outerHeight())) {
		
            $('.valignmiddle').parent().outerHeight($('.valignmiddle').outerHeight());
		
        }

    }).trigger('resize');

});

</script>
</head>
<body>
<div style="width: 50%; height: 50%; border: 1px solid red;">
<div class="valignmiddle" style="border: 1px solid green;">Hello</div>
</div>
</body>
</html>

How does it work?

First we set up some styles for both the parent element and the one we want to vertically align. We need an absolutely positioned element inside of a relatively positioned one and then the top value set to 50%.

$('.valignmiddle').each(function() {

    $(this).parent().css('position', 'relative');
    $(this).css('position', 'absolute');
    $(this).css('top', '50%');
    $(this).css('left', '0px');
    $(this).css('width', '100%');

});

The width is set to the same width as the parent element so you can centre text, etc.

This sort of vertically aligns the element but there is too much space at the top. This is because the start of the element begins half way down the parent element. So, what we need to do is add a negative margin that is half its own height.

$(window).resize(function() {

    var thisheight = Math.round(parseInt($('.valignmiddle').outerHeight()) / 2);
    $('.valignmiddle').css('margin-top', '-' + thisheight + 'px');

}).trigger('resize');

Notice how this code is called on when the browser resizes; this means if your parent element changes size (i.e. it is a % or em width), so does the child element as per table cell behaviour.

What if the child content has a greater height than its parent? To prevent it leaking out we simply check the heights and adjust accordingly if need be:

if(parseInt($('.valignmiddle').outerHeight()) > parseInt($('.valignmiddle').parent().outerHeight())) {
		
    $('.valignmiddle').parent().outerHeight($('.valignmiddle').outerHeight());
		
}

To use the code simply use the JQuery code in the script tags above and give your element the class name .valignmiddle.

A website is no different. There are often at least two parties involved: the web person and the client. Usually though, and even on small projects, more people are involved.

As with other areas of a website, opinions can vary. When it comes to the matter of writing content for your website, who should have the final say? Here I outline some advice that can save horse.com becoming camel.co.uk.

First, consider who is involved and what their opinion and position might be.

The designer

The designer, quite rightly, wants the site to look good. This goes beyond logo, colour scheme and making things line up nicely. A good web designer knows where elements fit in on a page to make the experience pleasurable for the visitor. Perhaps less concerned with the unique selling points of the client’s brand new product—or the number of times a search keyword appears in the copywriter’s killer sales copy—the designer is more concerned with overall readability, typography and how the text sits on the page.

The client

While the client may not be a designer, writer or marketeer, he or she knows what they want. Whether it’s to make sure the entire product specification makes it to the website home page or to let the visitor know they’ve been trading for almost five decades, the client wants to be accurately represented online.

The copywriter

Happily living the the world of writing noticeable calls-to-action and tapping away about about benefits and not features, a copywriter wants to use words to sell what the client has to offer.

The SEO company/consultant

Finally, we come to the SEO expert. Keen to please both Google and the client, any good search engine company knows if the right words aren’t on the right pages then they have fallen at the first hurdle.

So, who’s right?

In actual fact no one is especially right or wrong as they all have valid viewpoints. Clearly though, there can be a conflict of priorities. For example, the client may want the technical product data on the site but the copywriter doesn’t feel that will appeal to the full gamut of visitors. The SEO guru wants a nice chunk of text on the home page to please the search engines but the designer feels this will turn his beloved design into an eyesore.

There’s no right or wrong way to approach this. It’s all about trying to get the best of each viewpoint and putting it together to make a workable solution. But what is a workable solution?

To avoid your horse becoming a camel, get a process in place and assign priority based on your findings. First of all, identify the main goals of the website. For example, a portfolio site for an interior design company might place more weight on design whereas an eCommerce site selling gadgets to scientists with PhDs may favour more technical information on the site.

In general though, a workable solution might function like this: the designer creates some (flexible) templates while the client writes an initial draft of the website text. Then the SEO company can perform their keyword research and pass it on to the copywriter with an amended text document—including notes regarding what keywords should appear where. Then finally, the copywriter can produce the finished piece.

While this is by no means a hard-and-fast rule it does demonstrate that by having a process in place your website’s text doesn’t deviate too far from the client’s original aim.

To get a website call me on 07843 483 078 or get a free quote online.

Width

To display in most email programs your newsletter should not exceed 600 pixels in width. You can afford to go a little wider if you want but 600 pixels is optimal.

Images

A lot of people block images by default so your newsletter should be legible without images.

Media and Other Elements

You can’t embed Flash movies, video and other media into newsletters. Some email programs support animated GIFs but some don’t so make sure it looks fine if the GIF only shows the first frame of the animation. Other elements such as forms and JavaScript won’t work either.

Email Client Limitations

There are lots of email clients, or programs, out there—and each have their own limitations. The main consideration is Microsoft Outlook. In recent versions, Microsoft unilaterally decided to change the rendering engine of their HTML emails from Internet Explorer to Word, which is much more limited. One of the main roadblocks is the Word rendering engine does not properly support background images. Any good web designer/developer will be aware of what Outlook can and can’t do.

Ability to Unsubscribe

It is a legal requirement that you give people the ability to unsubscribe.

Online Version

As a final contingency, just in case even after all of the above they still can’t see your newsletter properly, provide a link to an online version where your newsletter isn’t bound by these limitations.

For help designing your newsletter call me on 07843 483 078 or get a free quote online.

So, what are the dangers of cheap web hosting?

More frequent downtime

Cheap hosting packages mean there are less people to monitor the resources and this means your server and therefore your website is more likely to go down.

Oversold servers

Unless you have a dedicated server (a package where you lease the entire server meaning no one else is using it) your site will rung along site a number of other websites. Cheaper hosting companies have less stringent policies on how many sites they run on a server at any one time. The result is they run slowly as they try to do a lot of things at once.

Slow, unreliable support

Websites run twenty-four hours a day, seven days a week. So nine-to-five support is no good to you. Cheaper hosting companies often limit the time their help desk is open to save money. Furthermore, some do not offer telephone support to reduce their running costs.

Overseas servers and support

It’s more costly to run a server in the UK than it is in many other countries. Some companies save money by housing their servers and their support team overseas. This causes two problem: the support team may not speak the same languages as you and having a site on an overseas server may interfere with your search engine rankings.

Of course, this post is not saying that all cheap hosting companies are bad and all expensive ones are perfect—or that there is always a correlation between what you spend and the quality of service. The important point is that if a company seems unusually cheap, you should exercise caution. A quick search online will no doubt reveal reviews that show how good or bad they are.

If you need a website with a reliable hosting package call me on 07843 483 078 or get a free quote online.

How are they different?

Windows and Linux are two different “platforms” for websites (there are more than just these two but these are the most popular). That is they form the foundation of the web server. Built on top of these are other technologies that are you used run your site such programming languages, database servers and email software. Although some software is available for both platforms, generally speaking, the Windows and Linux platforms use different software to accomplish the same purpose. Because learning these technologies is such a long process, developers tend to go down one route and stick to it. Some are capable in both but will generally favour one over the other. Expecting a developer to be able to work with your Windows site when they are predominantly of a Linux background is like expecting someone to be able to speak fluent Portuguese just because they can speak Spanish.

Which is better?

Neither is better than the other per se. However, due to the abundance of free software for it, Linux is generally the preferred choice for freelancers like myself. In terms of overall popularity, Linux has a clear edge on Windows although both have a very strong following.

How to find the right developer

As a rule-of-thumb, I do not take on Windows projects. The except to this is if they are “static” sites (pages of text and image with no database). However, when an enquiry comes in I do my best to find someone to refer the lead on to. If you have submitted a quote to a freelancer or web design company and they state this as a reason, ask them if they know anyone else that can help you. A good freelancer will be well-connected.

If you’d like a website give me a call on 07843 483 078 or get a free quote online.