Posts Tagged ‘Websites’

Recently, I was on an admin system on one of my websites and noticed that some of the AJAX requests had stopped working. They worked for fetching data, and creating it, but I could not update to delete anything. I tried another website. It happened there, too.

Initially, Slim was telling me it was a 405 Method Now Allowed. But I could see I was sending a PUT and the exception said it must be of type PUT. Very weird. In the end, I decided to output the $_SERVER[‘REQUEST_METHOD’] to see what was going on. It said it was a GET request.

I pulled up Paw, my desktop request client, and manually sent a PUT request to a file I had created to print the request method. It too said GET. By this point then, I knew that it probably Apache converting the request from a PUT to a GET. Or more likely that I was sending a PUT but it was returning a 403 Forbidden as a GET request for some reason.

The answer eventually came in the form of Mod Security. It uses something called OWASP ModSecurity 2.9 Core Rule Set v3.3.2 which allows GET and POST requests but denies PUT and DELETE requests. I am not sure why this is as they are legitimate verbs to be using, but when I altered this to allow PUT requests, everything started working fine again.

We’re taking the lean startup approach with Leeds Anxiety Clinic and trying not to build anything unless we absolutely need it. As a result, when I originally built our website is was functional but not particularly fast.

Now that we’re up and running and have clients coming through the door, I’ve been back over the site to make it faster and better. Below, I’ve detailed what I’ve done. Here’s a before and after using the Lighthouse audit tool:

Turn cache headers on

There were no cache headers on our images, CSS or JavaScript. Part of this was that I was still making changes to the JavaScript and didn’t have any cache-busting functionality in the site yet. Now that I do, I could safely let the browser cache everything for a month.

Replacing jQuery

jQuery is a library whose time has been and gone. But it does make it super easy to throw in some functionality. Now that I have a proper JavaScript setup, however, and as jQuery was mostly just animating things, I replaced it with native CSS animations and vanilla JS.

Compressing the JavaScript

As there was no JavaScript preprocessing going on, it was not compressed. Ironically, this hasn’t made it any smaller because I’ve now got the Webpack bootstrapping in the file. However, it does mean I can easily load in additional modules, which I discuss below, to help with other areas of the site.

Gzip compression

This is a super-easy win because all you have to do is put it in your Apache config and the server does all of the rest.

Async loading of web fonts

We had a total of three blocking font calls in the header of the page. All of this has now gone. I’m using webfontloader to load in the two variations of Lato that we are using.

Fontawesome is used for icons and is loaded in using a classic link tag, however, I’ve moved this link tag to the bottom of the page so that the initial content can be loaded first. On slow connections, this means the icons are missing for a fraction of a second when you load the page but I think it is worth it.

If I was looking to optimise further like I do with Worfolk Anxiety, I would select the individual icons I want, base64 encode them and put them directly in the CSS. But that seems overkill here for the moment.

Finally, I’ve set the font-display CSS property to fallback so that if the fonts are slow in loading, the text will be rendered away using a system font.

Webp images

Oh my god, webp images are so good. They’re like half the size of the already optimised JPEGs and PNGs that they are replacing.

Unfortunately, few browsers support them yet. It’s basically just Chrome (on desktop and Android). So, I’m using the picture tag with a fallback, as everyone does. I can’t wait until webp gets wider adoption.

Unfortunately, there is no way to do a safe fallback in CSS so my background images remain old JPEGs for everyone.

I’m not sure Leeds City Council have quite mastered this marketing thing yet…

Making your website accessible people who are visually impaired isn’t sexy or glamorous. But it is pretty easy. And given how prevalent visual impairment is, especially among the elderly (which, all e-commerce operators should note are the people with all the money), it is time well spent.

Here are four tools that will help you tune up your website.

W3 HTML validator

Assistive technology is already out there helping people. All you have to do is provide it with the correct input. And that starts with following HTML standards. And, where possible, using semantic HTML5 tags.

These work in everything except Internet Explorer 8 and the number of users who make use IE8 is now lower than the percentage of people with visual impairment. Plus, it’s very easy to add backward compatibility in.

Once you have done this, run it through W3’s HTML validator tool. This will check that your code makes sense and so everyone’s browsers (visually impaired or not) will be able to read it correctly.

Click here to go to the W3 Validator.

WAVE

WAVE stands for the Web Accessibility Evaluation Tool. It’s an online tool that has been running since 2001 and is considered one of the best ways to test how accessible your website is.

All you have to do is enter the URL of your website and WAVE will give you a full report, including helpful suggestions and things to fix. You get a copy of your page highlighted with the information to make it easy to find.

Like everything on this list, it’s free.

Click here to access the tool.

a11y.css

This is a bookmarklet that scans your page for problems. If you are not familiar with a bookmarklet, it is a magic bookmark: you save it to your favourites and then when you click it, it will run the report on the current web page you are browsing.

It highlights areas of the page with possible errors that you can then review. It’s quick and simple to use but doesn’t offer as much depth as WAVE.

Click here to check it out.

MDN documentation

The Mozilla Developer Network is the de facto authority on how HTML works. This includes documentation on the ARIA standard, which is a standard designed to make web applications more accessible.

Even Mozilla’s documentation is rather hard to penetrate, but if you bare with it, you can get your head around it.

Click here to read the ARIA documentation.

Summary

Making your website accessible is pretty easy: it’s all about following standards and best practice, and maybe adding a few HTML attributes if you have code doing fancy things.

Doing so makes your website much easier to access for the visually impaired, which will mean a better world for them and more traffic for you.

Cloudflare is a CDN (content delivery network) that sits in front of your web server and speeds up your website. They have grown in popularity because they offer a set of basic features as part of their free plan. Therefore, you can get started for nothing and see what you think.

Setup

It is easy to get set up with. You start by entering your domain and Cloudflare scans the DNS records for it. It then sets up all of the rules in its own system and you update your nameserver records to point at their server.

You choose which hosts go through Cloudflare and which do not. You move all of your DNS over to their system, but only certain parts (typically www and any static asset subdomains you are using) will flow through the Cloudflare CDN.

Speed results

I am resistant to make any recommendations here. I ran a couple of tests for Anxiety Leeds. A sample set of one project with a few tests run is not representative.

I first ran a test while the site was still running on my server with no CDN in front of it:

I then ran the same test again once Cloudflare had been set up. I got the same results: the time did not change.

However, when I tried it the next day I got much faster results:

Whether this was because it took Cloudflare a while to cache everything, or whether it was because it provides no speed benefits but my server was just faster at the time I re-ran the test, I am not sure.

When I ran the test a few weeks later, things were really slow:

However, I ran the test again immediately after and got completely different results:

DNS management

It is also worth considering whether you want Cloudflare managing your DNS. For example, you could move all of your DNS management over to Cloudflare and bypass their CDN layer. I use NameCheap for registering my domain names and they provide free DNS hosting, also. How to do the two compare?

NameCheap is great: they provide a redirect server and email forwarding. Therefore I use them for a lot of the domains where I want to implement those features as I get them for free. Their email forwarding service reliably delivers emails to my inbox.

Therefore, I usually stick with NameCheap.

Cloudflare does have one advantage, though. They support CNAME flattening on the root domain. When using Heroku, you have to CNAME your domain to theirs. However, you cannot CNAME the root domain (www.example.com works fine, but example.com does not) as this disrupts all of your other DNS records.

Cloudflare (and a number of other DNS providers, but not NameCheap) solve this by providing CNAME flattening in which they allow you to enter a CNAME, but they translate this into an A record that updates automatically. Because of this, I tend to use Cloudflare when using Heroku.

DNS speed

Another concern is the speed of Cloudflare’s DNS server. First, let’s look at a typical response from the NameCheap free DNS service.

30 milliseconds. That sounds fine. Now, compare that to one of my sites running on Cloudflare’s DNS service.

It is an eye-watering 813 milliseconds. That is almost an entire second just to do the DNS lookup. I immediately re-ran a few more tests on various websites, including on the same website again. The second time, it was much better.

6 milliseconds. It is also a big difference to the first result. Such discrepancies are concerning.

Conclusion

Can Cloudflare speed up your website? Based on the available evidence, no. However, this is one website that I ran five tests for. That is not a large enough sample to draw any conclusions from.

Second, it may be that I need to spend more time playing around with the cache headers on Anxiety Leeds to get the full affect. The documentation suggests I should not have to do this, but I am not convinced that that is the case.

It is super easy to miss broken links on your website. Even if you test it rigorously, it can be difficult to catch them all. That is where an automated crawler can come in useful. Xenu’s Link Sleuth is one such tool.

It only runs on Windows, so I had to run it in a VM. It is also rather a blunt instrument – it crawls everything even though you can be pretty certain that if you have checked one article ID page, they are all going to work. But those few points aside, it is very useful.

It rapidly spiders all of your pages and reports back on both broken links and redirects. It checks CSS, JavaScript and images resources too, and you have the option to check external URLs as well so you get full coverage. It then spits out a HTML report. It is amazing how many little links you find that need fixing when you run it. Well worth spending a bit of time on.

HSBC have had a number of what I would consider problems with their websites for the many years that I have banked with them. A few years ago I submitted an online feedback form, but nothing changed, so last month I wrote them a letter (as you do when you get to my age).

It would be nice if they could find the time to fix these issues. They recently had time to issue me a new, more complicated, security device and add an annoying pop-up trying to get me to install their Rapport malware for example. However, they have not had time to make their passwords case sensitive.

I really don’t know how these issues arise in the first place though. As I told them in my letter.

4 June 2014

RE: INTERNET BANKING

To Whom It May Concern:

I have been unable to locate a postal or email address for your internet banking service, so I have resorted to writing to the branch and hope that you will be able to pass it on to the relevant parties.

Over the past few years I have consistently run into a problem with your internet banking for my personal account.

When I go to “make a payment” I have the option of selecting “pay a bill or organisation” or “pay family, friends or other”.

I need to make a payment to HMRC, to which I am given the account number and sort code. But when I go to “family, friends or other” and try and enter the account details it says the payee already exists and that I must use “pay a bill or organisation”.

When I go to “pay a bill or organisation” I then have to select HMRC and then select one of their tax offices. But I have no idea which office I am supposed to pay. All I have is that the account name is HMRC and then I have the sort code and account number.

I do not for the life of me understand why you will not let me make a payment in the usual way using the sort code and account number.

However, even if we overlook that, how you expect anyone else to translate nonsense phrases likes “HMRC NIC DEF PYT”. I don’t know what that is! How is anybody supposed to know?

I have included a printed-out screenshot of the bewildering screen.

I think at very least you should list the sort code and account number next to each entry, and use descriptive names for them, so that we can check we are paying the right account. Better still, just allow people to make payments using the sort code and account number like you would reasonably expect to be able to do at any bank.

MAKING PAYMENTS ON BUSINESS BANKING

Another piece of feedback I think is important is regarding your business internet banking. When you go to make a payment on there, you are able to go to “new payee” and enter the account details.

However the sort code is only 4 characters wide and the account number box is only 6 characters wide.

As you know, sort codes are 6 characters long and account numbers are 8 characters long.

This means that it is very difficult to check you have entered the correct account number and sort code because they do not fit in the box at the same time. I have enclosed a printed-out screenshot with this letter to demonstrate the problem.

As a software consultant, I have literally no idea how this situation could arise. Surely, if even the most basic testing can been carried out on your website, someone would have spotted that this was a significant design defect.

I would suggest that the boxes are extended so that you are actually able to see both the sort code and account number.

Yours faithfully,
Chris Worfolk

I received a letter back from them saying they had passed my feedback on. The issues still seem to be on their website though, as shown by this screenshot:

Clearly there is not enough space in those boxes to enter the account number and sort-code and be able to see the full number to check you have entered in correctly. I would not even dare pass that code to a tester; Chris K would be appalled.

If I ever get the time I am going to write a browser plugin to fix these issues myself.

Recently, I was thinking that it must be coming up to ten years since I registered my first domain name, in the next couple of years. When I actually checked, it was two months ago.

In May 2002, I first registered Worfolk.co.uk, now the home of my consultancy company. This was by no means my first venture into the world of web development, I had been developing websites for years before, and programming for years before that. But it’s difficult to put a precise date on any such projects, unlike 7 May, 2002.

Between then and now things have changed a lot – a one point, the Worfolk Online network contained hundreds of websites. It now contains only a few dozen, that are far more focused on quality. While I don’t have screenshots of all of them, the image above shows the evolution of some of the network’s homepages.

Anyway, cheers, here is to a wonderful decade and hopefully, an even better one to come.

For those of you who attended last year’s Secular Ball, you may remember that we did all the registrations though the website, SecularBall.org.

At the time we also registered SecularBall.com but those having come up for renewal, we decided only to renew the .org domain as barely anyone visits that, so having the .com isn’t even worth the $8 it would cost to renew it.

Anyway, someone recently sent me this email.

Hello,

I believe you’re the owner of secularball.org. I’ve got a proposition
concerning your website. Would you be interested in acquiring
secularball.com?

I understand that you may be concerned about the legitimacy of this.
If you’re a bit skeptical, I can upload an HTML page to verify
ownership beforehand. We can also use a third party escrow (who will
essentially ensure your money is safe until you retain complete
control over the domain name) for optimal security.

PS: I’m only emailing you because I believe you can benefit from this.
I do not intend to email you again unless you respond to this inquiry.

Regards,
Faheem.

It’s bad enough these lowly bottom feeders gouge out a living based on registering other people’s trademarks, but you would think that if you were in such a business you would have at least the basic common sense to do just a bit of research and see that we already were the owner of said domain until recently and obviously had no interest in it (or at least make reference to the idea of selling it back to us).

Nick just pointed me towards a site named Ajaxload which is really useful for generating loading icons while waiting for things like AJAX content to load into a page. You select the type of spinning “loading” symbol you want and set the colours and it generates all the code for you. Have a play.