# Michael Gunner

1. ## Graphic design for my partners daughter’s 1st birthday

On October 10th my girlfriends daughter turned one, and on the 13th we celebrated by throwing an enormous party – Filipino style. I helped my girlfriend arrange the party and my favourite contribution was the graphic design I did. I designed the invites as well as various printed materials, and I also hand made a black frame portrait for a picture of her daughter.

I haven’t done much graphic design recently so for me this was a fun side project which I really enjoyed, and I was very happy with the results.

2. ## Is datetime-local desktop browser implementation user friendly?

I really would love to get away from JavaScript widgets for entering and validating datetime inputs. HTML5′s datetime-local (which for all intents and purposes is the replacement for datetime) seems to be the solution, but whilst the controls on mobiles are superb, I have reservations about the widget controls that Chrome on desktop renders.

This is mainly because the widget only works for the date and not the time, which the user still has to manually enter on their keyboard. This leads to an experience which I feel is confusing, it doesn’t feel intuitive. A widget should exist to allow the user to be able to fill in the input without their keyboard – otherwise what is the point?

Clicking in the field also does not automatically bring up the widget. I understand why – but this goes against the behaviour of all other JavaScript widgets out there which could confuse users expecting to see the widget appear.

So – I’d really like some feedback and thought on this. Are my concerns justified? Do you also feel the Chrome desktop widget is confusing and unintuitive – or do you feel the opposite?

Try it out below (Chrome desktop only):

3. ## Datetime switched to datetime-local

If you have been, or were planning to, using input type datetime then stop. Datetime is becoming obsolete with Safari and Chrome both dropping their support. This is in favour of datetime-local instead.

It should also be noted that when wrapping input type datetime-local in a parent container (e.g. a fieldset) you should give the parent container a min-width of zero in order to retain full control over the width of the input.

4. ## The difference between a PHP Class and a PHP Function

Functions do something very specific, Classes are something very specific.

5. ## Have bold text on hover without affecting fluid widths

So there you have it, your lovely new navigation bar. The trouble is, you want the text to be bold on hover, but you also need your elements to be fluid with. This creates the problem of the buttons changing width when hovered on, because of the change in font weight.

The way around this is to simulate our font weight with text shadow instead. Text shadow declarations do not affect the box model, so your elements won’t change in size when hovered on.

To see an example of this working, click here to see a jsfiddle.

6. ## Ropey transitions on mobiles when combined with ontouchstart

Anybody know why transitions on mobiles using ontouchstart and ontouchend are quite ropey? A lot of jumping around and shuddering. Suggestions?

7. ## Calculating distances between co-ordinates on Earth

If you’re working on a project that involves any sort of geolocation, distance plotting or such like – you’ll probably need to do this. But calculating a distance between A and B is not as straight forward as you’d think, primarily because Earth is not flat. Neither is it a perfect globe. Therefore, you need to take this into account when plotting distances between two points on Earth.

We do this using something called the Haversine formula. This formula allows you to take two co-ordinates on a globe and plot the distance between them.
$a = sin^2(\delta \varphi /2) + cos(\varphi 1).cos(\varphi2).sin^2(\Delta\lambda /2)\\c = 2.atan2(\sqrt{a}, \sqrt{(1-a)})\\d = R.c$

where
φ is latitude, λ is longitude, R is earth’s radius (mean radius = 6,371km), note that angles need to be in radians to pass to trig functions!

The main drawback of the Haversine formula is it assumes Earth is perfectly spherical, when really it’s not. In fact, Earth is slightly ellipsoidal, but even taking this into account the error deviation is at most 0.03%, so for most purposes the Haversine is accurate enough. It’s also worth baring in mind Haversine is “as the crow flies” – so it does not take into account hills, mountains, canyons etc that may actually add to the length of the distance.

So how do we turn this formula into usable code? Using PHP, we take five variables. We need the latitude and longitude of point A and point B as well as Earth’s radius, which is 3959 miles.

We input them into a function which converts the degree co-ordinates into formula-friendly radians, and then inputs them into the Haversine formula, exactly as you see it above.

You should be able to drop this function into your project and use it for calculating distances between points on Earth. You can read more about Haversine here: http://www.movable-type.co.uk/scripts/latlong.html

8. ## Input date-time on Chrome usability sucks

I’ve been waiting so long for date time input type implementation, and Chrome desktop has it. But frankly, the implementation is terrible, from the point of view of usability, as well as being pretty ugly.

With the date field, you get three controls. Unfortunately, they’re all tiny and quite fiddly, and whilst the button to bring up the date picker is fairly self-explanatory, the up/down controls are a little more ambiguous. The function of the field is also not in line with traditional date pickers, when clicking the field you would expect the picker to appear, but it only appears when you click the drop down. This may mean many users simply never even realise it exists.

The styling of it all is pretty ugly too, which surprises me. For example whilst the up/down controls have a gloss look consistent with other form controls in Chrome, the drop down button is a flat down arrow with no button styling at all. The date picker is the worst part, it’s far too small and has some strange styling, for example a blue border around each month.

There’s also a button with a dot, who’s function is not immediately clear. It turns out clicking it puts into the field the current today’s date.

The time field is also quite difficult to use, for example much like in the date field you have to manually move between each part (hours to minutes) either with your mouse or arrow keys. Granted there’s not really another way to handle this, but I would imagine most people will be switching between mouse and keyboard which makes it feel clunky.

In my honest opinion, the usability of the date field would be massively improved if the date picker was larger and better styled, and displayed automatically when selecting the field. I also think the time field would work better if it also displayed a picker – perhaps one that works similar to those on mobile devices.

9. ## It’s time to say goodbye to Internet Explorer 8.0

Your initial reaction to this is possibly a “whoa, you crazy fool!” But in all honesty, I think the time has come to drop support for IE8. By doing so, I’m following in the footsteps of many others, including the agency Zurb.

But why? Simply because IE8 usage is dropping off very fast, and the trend is a downwards spiral. Last year, I dropped IE7 support when IE7 usage was hovering at about the same point IE8 usage is now. Now, IE7 is pretty much finished.

A quick look at worldwide browser stats gives compelling evidence, IE8 usage is only three percentage points above IE10, which has doubled in just one month. By that trend, we can expect IE10 to have eclipsed IE8 usage within the next two months.

Of course, you shouldn’t go purely on global stats, you should also look at the stats specific to your site. But those paint an even more damning picture, out of 1200 visits in the last month to our main website, only a meagre 84 were IE8. In comparison, about 300 visits were from mobile devices, making the case for responsive design more compelling and justified than ever.

The time has therefore come in my mind to say goodbye to IE8. Hasta la vista, baby.

10. ## Get your own Instagram web page

Purely just for fun, I’ve put up an Instagram app I made.

This is a fun little page that grabs all your photos and arranges them on a grid. You can then re-arrange the photos by changing the filter you used in Instagram. It’s incredibly light weight – just 117kb.

If you already have Instagram, setting up takes five minutes. Because this uses the JavaScript API, it is purely static, however please be aware that this means anyone that sees your code can see your access token. You may not want that. If anybody want’s to fork this and convert to PHP, feel free.

It’s responsive, and on desktops you can enlarge the pictures. It uses Quicksand.js.

Do what you want with it but if you do use it, show me. If you’re comfortable with the code you can change it, or if you think the code needs to change, change it.

Fork on Github: https://github.com/bmike2013/minsta

Working demo: http://michaelgunner.co.uk/laboratory/insta/