How to switch your site to https (with zerossl.com)

The latest feature I intend to add to my Superstars web app are notifications of events finishing and overall winners. This will use the push notification API, part of the trendy new Progressive Web App movement.  However the first thing I discovered is that push notifications require your site to be served over HTTPS, so I had to figure out how to install a secure certificate.

My hosting company – UKWSD – would charge me ~£40 per year to do this without me lifting a finger, but I thought there must be a cheaper way to do this myself, preferably for free.  After some investigations I found zerossl.com who promise “free SSL certificates and free SSL tools for your website”. In the end the process was pretty simple.

  1. Using the FREE SSL Certificate Wizard at https://zerossl.com/free-ssl/ I created a Let’s Encrypt key and a Certificate Signing Request (CSR).  Fill in your email address and domain or sub-domain. Click ‘Next’ once to create the certificate request, and once again to create the private key.
    • GOTCHA – I have never been able to generate certificates for multiple sites, whether it be using a wildcard (*.ajcw.com) or comma separating the domains. Just do one domain at a time.
  2. You don’t need to copy the key and certificate request at this point (the site will give them to you again later), but it will force you to copy the text before you can move on.
  3. You’ll need to verify that you own the domains you are registering. This is done by uploading files to your site(s) with specific strings, for example a file called ciugj_jljdss68HFDFHG7d_zQ7v05c9eQ with the contents  ciugj_WSB9WMmFwVlkjdsluf43ulj8763JGD7dsc834y_zQ7v05c9eQ.0Ge506Z7IxF3wi3FjmvFTLAwKg4MQafxayGHVRdOe-s.
    • GOTCHA – make sure you copy these into the .well-known/acme-challenge/ folder; if there is an error, new keys are generated and you have to create and upload new files.
  4. Your Free SSL Certificate is ready on the next and final page.
  5. Visit the control panel of your site. Hopefully you will have a SSL/TLS section, in which is something like an Install and Manage SSL for your site page.
  6. UKWSD have a form in which you select your domain or subdomain, and have fields to paste in certificate (CRT) and private key. Paste in those generated by zerossl.com.
    • GOTCHA – UKWSD’s control panel doesn’t work if you paste in both generated certificates – you’ll have to paste in only the first one.
  7. Click Install Certificate and you’re good to go.

Be aware the certificates last only three months and so must be renewed four times a year. I’m not yet sure what this process entails.

And that’s it. Finally you’ll want to update your server settings to 301 redirect your site to its new secure version, and you’ll almost certainly have some insecure content like images or scripts that you’ll need to amend.

Good luck, I hope this blog post helps.

 

CSS placeholder cross-browser support

A couple of years ago I wrote a blog and demo page to test what CSS attributes can be used to style the HTML5 placeholder and by which browser. I have tried to keep it up to date since, but times (and browsers) have moved on and the biggest thing missing from the last post is mobile support. So without too much waffle here’s everything you need to know to style the HTML5 placeholders.

Mark-up

<input type="text" placeholder="Enter your name here"  />

CSS

/* Webkit */
::-webkit-input-placeholder { color: #CCC; }

/* Firefox 4-18 */
:-moz-placeholder { color: #CCC; }

/* Firefox 19+ */
::-moz-placeholder { color: #CCC; }

/* IE10+ */
:-ms-input-placeholder { color: #CCC; }

Cross-browser support

View the demo page.

Chrome Firefox Safari Opera IE Dolphin
29 30 30 29 24 24 5 5.1 6 6 7 12 7 7 10 11 10
windows 7 logoOSX logo iOS6 logo iOS7 logo android logo windows 7 logoOSX logo android logo windows xp logoOSX logo windows 7 logo OSX logo iOS6 logo iOS7 logo windows 7 logoOSX logo iOS6 logo iOS7 logo windows 7 logo
windows 8 logo
windows 8 logo android logo
background-color S S S S S S S U S S S U U U S S U
border S S S S U U S U S S S U U U S S U
color S S S S S S S S S S S U U U S S S
font-size S S S S S S S S S S S U U U S S S
font-style S S S S S S S S S S S U U U S S S
font-weight S S S S S S S S S S S U U U S S S
letter-spacing S S S S S S S S S S S U U U S S S
line-height S S S S S S U U S S S U U U S S U
padding top/bottom S S S S U U S U S S S U U U S S U
padding left/right S S S S U U U U S S S U U U S S U
text-align S S S S U U U U S S S U U U S S U
text-decoration S S S S S S S U S S S U U U S S U
text-transform S S S S S S S U S S S U U U S S U

Gotchas

Be aware that these cannot be combined so must be written out individually. I suggest using a mixin with a CSS preprocessor such as Sass or Less to minimise your duplicate code.

Also Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.

 

Styling the HTML5 placeholder

log in boxOne of the exciting new form enhancements in HTML5  – designed to save hundreds of hours of repeated scripting – is the introduction of the placeholder attribute for form input fields.

In most websites this jiggery-pokery is still be done by Javascript, but the HTML5 browsers of the future (and the webkit browsers of today) support this with a simple form attribute, like so:

<input name="demo1" type="text" placeholder="Lorem ipsum" />

… 

 

Move the refresh button in Firefox and IE9

Here’s my first short post which is about fixing an annoying change that Mozilla revealed in the beta version of Firefox 4.  When I downloaded Beta 9 last week I was horrified to see they’d copied Internet Explorer and moved the refresh button from the top left to the top right…

It’s bad enough in IE, but I only ever use IE for testing so the mouse-up-to-top-left-then-realise-it’s-IE-and-move-across-to-the-right issue is annoying but I don’t lose sleep over it (and F5 is everyone’s friend anyway).

But top-right in Firefox – now that is annoying.

…