Tag Archives: html

I have added Buffer to my no-js social shares

Leave a reply

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

Leave a reply

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
invalid

Every time you write non-standard or invalid code

Leave a reply

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

3 Replies

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

The W3C have released Web Application Privacy Best Practices – What do we do with it?

1 Reply

So the W3C have recently released a document entitled Web Application Privacy Best Practices, which I have to say I am more than happy about.

I really think that with most things in life, if you can follow a best practice (and so long as that best practice is sound) then you won’t go far wrong.

So I guess the first question I have to ask is, is this document sound? Well, of course it is, it is written by some of the smartest people in our industry and a lot of thought has went into it.

As it is the first public working draft we cannot expect the content to stay nailed down exactly as it is but I don’t think it would be jumping the gun to begin implementing those best practices mentioned in it.

Having read through the document a couple of times I don’t think there is anything too ground breaking in it, if you are a thoughtful web developer who tries to keep the end user happy then you are probably doing most of these things anyway.

One of the items I personally need to put more thought into is…

Best Practice 9: Retain the minimum amount of data at the minimum level of detail for the minimum amount of time needed. Consider potential misuses of retained data and possible countermeasures.

I try and maintain the minimum amount of data, but I never really consider how long I need that data for, any tips you have on how to judge this type of thing I would love to hear about in the comments or on twitter.

One thing I think is maybe missing from this document is some clarification and extended examples on some of the points, a lot of the points are left fairly open ended and open to interpretation which sometimes they need to be but perhaps some more examples and use cases would be beneficial. I think currently the document is open enough that developers could be making decisions in the spirit of the document but missing the point on some of the practices. 

I will be following the steps outlined in the document for commenting – I suggest if you have any comments on it you do the same.

To wrap up then, I am glad a document like this has surfaced, it will make my life easier when making decisions and if the majority of web owners followed them it might make the world a better place!

Share this on