Michael Gunner

Author Archives: Michael Gunner

1. New Website

   December 12, 2012 12:35 pm Leave a Comment

   I have just updated my website with a new design. I hope you like it! It is, as expected, fully responsive, so by all means do enjoy visiting on your mobile or tablet.

2. Elliptical Rounded Corners CSS3 Browser Support

   August 14, 2012 7:56 am Leave a Comment

   So you want rounded corners, but you don’t want them perfectly round. Seeing perfectly rounded corners everywhere looks almost as rigid as plain ole’ square boxes can. But if you didn’t know already, you will now – you can do elliptical rounding in CSS. You simply specify two values, the horizontal radius and the vertical radius.

   Unfortunately, each browser engine decided on different ways of interpreting these values, leading to some seriously bloated code, which is probably why you haven’t seen much about it. The good news is the code has got simpler, and updates to Firefox, Chrome and IE means the latest versions of these browsers (and IE9) don’t need vendor prefixes and use the same standardized syntax.

   Old Code

   border-top-right-radius: 10px 15px;
   border-top-left-radius: 20px 30px;
   border-bottom-right-radius: 30px 45px;
   border-bottom-left-radius: 40px 60px;
   -webkit-border-top-right-radius: 10px 15px;
   -webkit-border-top-left-radius: 20px 30px;
   -webkit-border-bottom-right-radius: 30px 45px;
   -webkit-border-bottom-left-radius: 40px 60px;
   -moz-border-radius-topleft: 10px 15px;
   -moz-border-radius-topright: 20px 30px;
   -moz-border-radius-bottomright: 30px 45px;
   -moz-border-radius-bottomleft: 40px 60px;
   

   Short-hand old code (FF)

   -moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;
   

   Argh. What a mess! But now we can settle with just the following.

   New Code (Chrome, FF, IE9+)

   border-top-right-radius: 10px 15px;
   border-top-left-radius: 20px 30px;
   border-bottom-right-radius: 30px 45px;
   border-bottom-left-radius: 40px 60px;
   

   As I say though, this is with the latest versions of these browsers so if you’re concerned about users stuck on old versions of FF and Chrome you may want the prefixes anyway. And of course as you’d expect, there’s no IE8 or below support. I also can’t get my copy of Opera working so if you’re bothered about Opera support you’ll have to test that for yourself! Here’s the Codepen: http://codepen.io/anon/pen/hyErL

3. God Damn Captchas. I’ve had enough of you.

   August 8, 2012 9:12 am Leave a Comment

   I’m officially declaring war on captchas. I mean for all that is holy on earth, at least make the damn things readable! This shocker comes courtesy of Gumtree.

    

   

    

4. MailChimp API cURL

   August 2, 2012 8:40 am Leave a Comment

   Please note, this article assumes you have a basic understanding of PHP.

   If you’re looking to integrate MailChimp subscription into an existing web form you’ve written yourself in HTML and PHP, hopefully this will help. Firstly, make sure you have a list setup in MailChimp for addresses to be added to. Also make sure when you set up the list, you add the relevant “Merge” tags you need. Examples include first name, last name, address etc.

   We’re going to use the cURL method, which I find is the easiest. We’re essentially using cURL to send the information we want to MailChimps servers.

    

   1. In your Mailchimp account, sign up for an API key and note it down.
   2. Go into your list settings, at the bottom is a unique ID. Note it down too.

    

   In this example, I’m assuming your form script has something like this going on:

    

    

   if ($human != "") {print "Apparently you are not human";} else { $success = mail($EmailTo, $Subject, $Body, $headers); }   if ($success){ get_template_part('success'); } else{ get_template_part('quotefail'); }

   In other words, assuming the information validates, we’re then displaying a page that confirms the submission. We ideally only want to fire off our MailChimp request after we have sent the form, so we’re going to place the MailChimp code inside our success statement.

   $apikey = 'API-KEY'; $merge_vars = Array( 'FNAME' => $fname, 'LNAME' => $lname ); $listID = 'LIST-ID'; if (!empty($_POST['subscription'])) { $url = sprintf('http://us2.api.mailchimp.com/1.2/?method=listSubscribe&apikey=%s&id=%s&email_address=%s&merge_vars[OPTINIP]=%s&merge_vars[MERGE1]=%s&merge_vars[MERGE2]=%s&output=json', $apikey, $listID, $email, $merge_vars, $merge_vars['FNAME'], $merge_vars['LNAME'], $_SERVER['REMOTE_ADDR']); $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $data = curl_exec($ch); curl_close($ch); $arr = json_decode($data, true); if ($arr == 1) { $success = 'Please check your email to confirm your subscription';   } else { switch ($arr['code']) { case 214: $success = 'You are already subscribed'; break; default: $success = $arr['code']; break; } } }

   The code above also checks a check box we have in our form that allows the person submitting the form to choose whether they subscribe or not. So they only get added if they want to be. The id of the checkbox in this example is “Subscription” but yours may be different, so change it as appropriate.

   If you are asking for peoples names in one field, rather than separate first/last name fields, use PHP’s explode function to split the name, you can also write it to exclude middle names etc.

   Replace the API-KEY and LIST-ID with your relevant information. You’ll also need to setup your MERGE tags. In this example, I have two tags for “FNAME” and “LNAME”. If you have the same tags you can leave the code, but if you have different tags or need to add more, what you need to do first is add them to the array at the top. When you have done that, you can add them to the URL.

   &merge_vars[MERGE2]=%s

   Place that in the URL (after the other Merge tags). Then you reference your array after the URL, using:

   $merge_vars['LNAME']

   That should basically be it. It took me a lot of trial and error to get this all right, as I’m not a PHP developer, but if you use this code it should be fairly straightforward for you to setup.

5. Expanding Excerpts the non-Ajax way

   July 31, 2012 1:21 pm Leave a Comment

   A lot of blogs have this feature whereby posts are listed as Excerpts, the full post can then be dynamically loaded by the user. If your full post is still only text and small images, then I feel AJAX is overkill as loading this content on page load is not likely to slow the site down significantly, and whilst AJAX is great, it can be annoying for the user to have to wait for the content to be fetched and loaded.

   Click here to see the result

6. Pass multiple values from one option through the WordPress Settings API

   June 6, 2012 4:26 am Leave a Comment

   What happens if you want to pass multiple values through the WordPress settings API with the user only making one selection? Just because the user selects a single option, it doesn’t always mean you only want to pass one value. For example, when adding Google Fonts to my WordPress dashboard plugin, I encountered a problem. For fonts comprising two words, Open Sans being an example, the font name would be passed with a + sign between the two words in the URL. So for the font to load, the value needed to be Open+Sans.

   But of course, the font-family name is without the +, and you can’t change the font-family name when using Google Fonts. Essentially, I needed the user to be able to choose “Open Sans”, but two values be passed – Open Sans and Open+Sans.

   So how do you do this? If you know PHP you’ll already know how more than likely, and it basically involves the explode command. First, put both values in your Option value field, separated by a comma, or whatever delimeter you prefer. Because you’ll want the selected option to be displayed, make sure you amend your IF statement to include the whole array.

   <option value="Open+Sans,Open Sans" <?php if ( $options['fontselect'] == 'Open+Sans,Open Sans' ) echo 'selected="selected"'; ?>>Open Sans</option>

   Second, when you pull through your Option value, you’ll then need to separate the values so you can use them separately – this is where explode comes in handy.

   $options = get_option('dashtheme_theme'); $url = explode(',',$options['fontselect']);

   We can then pass the variables separately, using:

   $url[0]

   and

   $url[1]

   The numbers represent which value in the array you want to pass. If you need to use large arrays, this is fine, just change the numbers to reflect the values you want. For example, if you have six values in your array, and you only want the fourth, use [4].

7. Proposed responsive images syntax

   May 15, 2012 8:35 am Leave a Comment

   Here’s the current proposal:

   <img src="face-600-200@1.jpg" alt="" set="face-600-200@1.jpg 600w 200h 1x, face-600-200@2.jpg 600w 200h 2x, face-icon.png 200w 200h">

   However, the W3C community group suggests this instead:

   <picture alt="hello"> <source src="mobile.jpg" /> <source src="large.jpg" media="min-width: 600px" /> <source src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> <img src="mobile.jpg" /> </picture>

   My initial thoughts are this. The first proposal is much shorter, it would also be easy to update existing sites without adding syntax. However, myself and others in the comments section find the “set” tag is quite confusing, as is the markup for adding the responsive images.

   The second suggestion seems to be garnering greater support from stalwarts such as Chris Coyier. However, I also have reservations regarding this.

   The first is that it’s a complete replacement of the img tag. This is going to make updating existing websites a bit of a chore, to the point you may not bother. The second is that it’s a fair amount of code. I can see what were previously simple image galleries becoming incredibly bloated with code. This brings about the question, how badly will the extra code bloat counter-effect the file size savings of serving responsive images? I suspect not much, but it’s still a point to be considered. I also dislike the source tag, it basically means the syntax reads out as “source source”. Way too saucy for my liking.

   Now, here’s my suggestion, were it to be my decision.

   <picture alt="hello" src="mobile.jpg" /> <media src="large.jpg" media="min-width: 600px" /> <media src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> </picture>

   Why is this better? For a start, it would make updating old code a breeze as all you’d have to do is a find and replace on your img tags, replacing them with “picture”. The src attribute inside the picture tag would be the default image to display. This means your initial code, and non-responsive code, could be like this:

   1	<picture alt="hello" src="mobile.jpg" /></picture>

   You then just add in your extra responsive images as you wish. I also replaced “source” with “media”. To me, “media source” makes a hell of a lot more sense than “source source”. This code also works better because the picture tag isn’t just serving as a wrapper. We should be moving away from adding extra tags to “wrap”, by giving the picture tag default functionality it becomes more useful, easier to replace your img tags, and the code is less bloated.

   There is probably some gaping obvious reason why my idea is nonsense and couldn’t work, but it’s just a thought.

8. How to move your WordPress website

   May 10, 2012 11:44 am 4 Comments

   1 Using FTP, download all your files. This includes your wp-admin, wp-includes, wp-content folders as well as everything in the root.

   2 Login to your phpMyadmin. Download an export of your database.

   3 Upload all your files via FTP to your new hosting.

   4 Login to phpMyadmin on your new hosting. Import your database. If your database is too big, you have two options to try. First, ask your hosting provider to temporarily increase your PHP upload file size limit. Secondly, you can split your database, importing it in sections.

   5 Open up your wp-config.php file. Change your old database details to the new ones. Upload.

   If you are not changing your domain name, all you now need to do is point your domain to your new hosting. If you are changing your domain name, read on.

   6 Upload Eris’s migrate script and run it according to the instructions found here.

   This how to was written with help from Renaissance Design and Miniman Web Design.

9. Using Polyfills to replicate HTML5/CSS3 features in old browsers.

   April 27, 2012 9:00 am Leave a Comment

   One of the most common excuses I hear from people for not using the latest CSS3/HTML5 features is that they’re not widely supported enough. The most problematic browser is IE8, with most developers having dropped support for IE6 and IE7. If you haven’t already done this, then unless you have clear evidence to the contrary suggesting you should, then by all means do. IE6/7 account for no more than 2/3% of total browser traffic. Even in China, where IE6 has held on, it has dropped 50% in the last year and is now at around the 20% mark and dropping rapidly.

   The fact is however, you can use HTML5 and CSS3 features and still support IE8. How? Simple – polyfills. Polyfills are small scripts that replicate HTML5 and CSS3 features. You’re probably already thinking however, that you don’t want to load a ton of extra Javascript, just to get placeholders (for example) to work in IE8.

   This is where Modernizr comes in handy. Modernizr detects support for features, and when no support is found, loads the scripts that enable it. This means your polyfills only load for browsers that need them. Let’s stick with the placeholder example. Placeholders allow you to make forms appear much neater, clearer, and easier to use. It’s a feature most of us have been using already for years, using Javascript. HTML5 allows us to replace the need for scripts by simply doing this:

   <input type="text" placeholder="Your name">

   However, being a HTML5 feature, IE8 ignores the placeholder, so you end up with blank inputs. You could use conditional rules in your stylesheets to show a label for IE8 users – but why compromise? If you can make your website look identical for all users, you should. So, we use a polyfill.

   Once you’ve uploaded the JS and CSS file to your theme, you then need to add a Modernizr snippet:

   Modernizr.load({ test: Modernizr.input.placeholder, nope: [ '/css/placeholder_polyfill.min.css', '/js/placeholder_polyfill.jquery.min.combo.js' ] });

   You’ll need to make sure the URLs are complete. Modernizr will now test for placeholder support, and when undetected, load the polyfill. The polyfill will then run through your HTML, find your placeholders, and display them.

   It doesn’t stop at placeholders. There are polyfills for most HTML5 and CSS3 features, and you can find a list here. You may be thinking that having to load Modernizr is just loading more Javascript and slowing down your site, but the reality is it shouldn’t affect anything and you can always load it off a CDN if you’re concerned about loading times. The great thing about this is is removes any excuse to not be using HTML5 and CSS3 now.

10. Random content PHP

    April 25, 2012 5:45 pm Leave a Comment

    Ever needed to display content randomly? Perhaps a random image, a random quote, or even a random WordPress post. There’s a very simple way to do this.

    Create a PHP file where you will store or reference your content. You can reference images, text, whatever you like.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    <? //Chooses a random number $num = Rand (1,4); //Based on the random number, gives a quote switch ($num) { case 1: echo "For me giving up is way harder than trying."; break; case 2: echo "Established in 1988."; break; case 3: echo "Don't change on me. Don't extort me unless you intend to do it forever."; break; case 4: echo "Be regular and orderly in your life, so that you may be violent and original in your work."; } ?>

    Upload the file where your theme is. To reference it, just so a simple PHP include. This is easier to maintain then repeating the same code across multiple template files. You can see the above code in action in the footer of my site, the quotes are courtesy of rap legends Kanye West, Eminem and Tupac Shakur.