Tag Archives: html

You should serve up assets without a protocol

Something that recently bit us at ExamTime when we were doing some work that involved proxies and other “thar be dragons” stuff was how after applying some domain changes we would oftentimes get mixed content warnings because we were loading http:// assets onto an https:// domain.

Some browsers handle this news better than others, and because we cannot say for sure how every browser will react, we needed to stop this from happening.

Normally a website can get around mixed content warnings by making a call and doing sweeping changes – an all or nothing sort of approach, this wouldn’t work for us for our scenario and in the future it might not work for you, so the following technique is something I think all developers should have in their arsenal.

The solution is a simple one – assets on your site should be loaded without an attached protocol, for example;

<img src="http://bad.com/bad.jpg" />

Should really be

<img src="//good.com/good.jpg" />

So, what does this do and what does this afford you?

Basically if you load an asset (and by asset I mean things like, images, CSS files, JavaScript files) without a protocol (the http: bit) then the browser will decide which protocol to use, and the protocol it will decide to use is the one that the main page is being loaded with.

This means that if someone visits https://yoursite.com all assets will come over https too, which is good for avoiding mixed content warnings.

I have been made aware of one potential downside from a very kind commenter, if you still support IE7 or IE8 then it can download stylesheets twice if no protocol is used. That kind of sucks, but I don’t actively support older browsers so I am happy for them to talk a small performance hit.

Another (equally kind) commenter points out that if you are running your files totally locally (using file://) then this will be the protocol adopted throughout, which depending on the rest of your setup might cause problems.

Another issue which I have forgotten to mention but it was brought up in a Reddit comment was that if you are linking to a third party website and you use this method and you send through http traffic but they only support https traffic then you could find yourself with issues, a quick test before you change to // should tell you if this is going to be the case or not.

Share this on

I have added Buffer to my no-js social shares

I am a massive fan of Buffer for sharing and scheduling social media updates, if you haven’t tried it before you really should, it is free and takes seconds to set up.

Today on Twitter I asked @bufferapp if they had a way you can send updates to your stream without requiring JavaScript and they got back to me really quickly explaining you could.

I am glad they do, it means I can add in Buffer as a social share button down at the bottom of this post and in my github repository.

Here is the code to achieve it if you were wondering and didn’t want to check out my code.

<a href="http://bufferapp.com/add?text=Tosbourn&url=http://tosbourn.com">Buffer</a>

Share this on

Replacing Social Media Share Buttons with non-JavaScript counterparts

Social media share buttons are a bit of an expected feature on today’s websites, love them or hate them they are probably going to hang around for a while.

Of course like anything on the internet there are arguments for and against them from a user experience point of view but one thing that there can be no arguments about is that they cause extra load on your webpage. All the major social media share icons as supplied by the services use JavaScript hosted on their websites.

What this means in practical terms is that if you have four social share buttons on your article you are adding in at least four additional network requests to your page load, obviously there are worse things you could be loading in, each of the major players is smart enough to serve up pretty good code, but that isn’t the point — even the most efficient code in the world still requires a network request, a download, a parse, etc. etc.

Is this an issue? Probably not on your nice high-speed broadband, but is it an issue on your phone? You betcha. The entire reason I was looking at this in the first place was I received a bug report* for something I was working on that on some mobile browsers the page was reporting it was only 95% loaded when all assets appeared to be served and working. The asset that was not loaded was a Facebook share button and until it loaded the page was in a mobile loading state, which is not nice for the user.

At first I started looking at better ways to load in the buttons, and there are plenty of good ones (http://socialitejs.com/ looked very good) but I started thinking about what I wanted to be doing which is passing the user over to their social networking site of choice to allow them to share my content.

Then in a moment of extreme clarity I remembered that HTML5 has an element that allows you to do just that, in fact it has been in HTML for a while, that’s right, the <a> element, all I want to do is allow the user to jump onto their social network at their sharing page and all the major ones allow it and HTML has supported links for a very long time.

Here is some sample code showing the four social networks I decided to target (including the actual links used in my project, I am too lazy to change them):

Share us on 
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdigitalcreativejobs.com">Facebook</a> 
<a target="_blank" href="https://twitter.com/intent/tweet?text=Find%20a%20digital%2C%20creative%20job%20in%20%23NI%20&url=http%3A%2F%2Fdigitalcreativejobs.com&via=tosbourn">Twitter</a> 
<a target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Fdigitalcreativejobs.com">Google+</a> 
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fdigitalcreativejobs.com&title=Digital%20Creative%20Jobs%20in%20Northern%20Ireland&summary=Find%20a%20job%20in%20the%20Northern%20Irish%20Digital%20Creative%20Industry&source=Digital%20Creative%20Jobs">LinkedIn</a>

Not a single line of JavaScript required.

Of course this technique does have some downsides, the first is that you don’t have access to things like share counts and features like Facebook showing you if your friends have liked an article.

The second is that you can’t get them in a nice pop-up or expanding box like you can with JavaScript, you can just send them to a page.

Both of these things I am fine with, and other issues like not being able to track clicks onto them are easily mitigated with some JavaScript feeding into your analytics package.

There is also an added bonus in that you don’t need to have Facebook/Twitter/Etc cookies coming from your website.

If you want to see the icons in action you can view the website I am working on, which is a Job Board for Northern Irish Digital, Creative types.

*Thanks to Derek for the feedback.

You can discuss this post on Reddit or Hacker News if you like, or tweet me.

Share this on

Every time you write non-standard or invalid code

Warning — I am about to go on a rant.

Every time you write non-standard or invalid code and it works, just remember that some poor sonofabitch browser developer has had to spend developer time to interpret your shitty code, to work out that you probably meant to close that tag, or that you probably meant ” when you used ‘. The same goes for when a crawler finds your content and spiders your website — if you haven’t written your code correctly someone has had to write something to figure out your mess.

Before I get much further, full disclaimer — my code on this site doesn’t validate, I am indeed being part of the problem.

A good example of what I am talking about is how IE doesn’t support &apos; to many it feels like a bug on Microsoft’s part, but it isn’t because &apos; isn’t a supported HTML entity and they have no need to support it, but because so many people write their code with this in it in many people’s eyes it is seen as a bug.

Now you may argue that the code had already been written, and the browser’s job is to interpret websites and if a lot of websites do the same thing then the browser should be able to display that, and I guess that bares some weight, but here is the thing — imagine how good browsers could be if they didn’t need to worry about incorrect code.

Imagine how much further specs could be if browser manufacturers were able to concentrate on new features and less on supporting shite code.

Interestingly, I can’t find much written online about the amount of time or lines of code that are spent trying to support invalid code, I would love to hear from anyone who has access to that information.

Obviously if browsers were to stop supporting invalid code people would complain and ultimately stop using the browser, but what if all the major browsers got together and released something at the same time — sure it would break some of the web for a while, but the developers would soon get plenty of emails from people and plenty of grief until they fixed their mistake.

Share this on

Canonical and Base URLs

Canonical URLs

According to Wikipedia the word canonical in a Computer Science sense means “the usual or standard state or manner of something”, in terms of web development canonical URLs are the preferred URLs as picked by the web developer. So when a website has multiple URLs for the same content specifying a canonical URL tells search engines which link they should display to the public.

To use canonical URLs you should place something like the following in the head of your document;

<link rel="canonical" href="http://www.example.com/category/my_page.html">

Unfortunately this is only a signal, not a directive – so search engines don’t need to follow this, but from what I can see it appears to be a pretty strong signal.

What is cool is that the canonical link can point to another domain alltogther – this could be useful if you don’t have access to do other forms of redirection.

Base URLs

Base URLs let the web developer specify a documents base URI explicity, this ties in nicely with canonical links which can be relative if you wish and can help with duplicate content issues for linked content coming from your site.

To use base URLs you should place something like the following in the head of your document;

<base href="http://www.example.com/category/my_page.html">

At the first pass you are probably thinking that this is the exact same as the canonical URL we wanted to include, the difference with this is that then we do something like;

<img src="../img/myimg.png" alt="my test image" />

And this would relate to http://example.com/img/myimg.png – pretty cool eh?

This will basically mean that your canonical URL can be replicated throughout relative links in your site, which improves the chances that search engines will index the URL you want them to index.

I don’t care about SEO – why should I do this?

Some people just don’t care about ranking well in search engines, and that is fine, but I still think you should look into implementing these tags were appropriate on your website – here is why.

I am currently working on a legacy project that is a site that accepts multiple domain names, it then uses some database magic to display different sites depending on the domain. Simple enough. The only issue is that the original developers didn’t think about the need to provide a canonical URL, so b.com/a/b/c and x.com/a/b/c show the same content across different domains and unfortunately somewhere along the line Google has indexed ‘b’ as sitting under x.com instead of b.com – which just looks wrong (even if you don’t care about rank)

Granted this is just an edge base, but it is one of many that can be solved by the correct application of both canonical and base urls.

Further Reading:

Canonical Links

Base Links

Share this on