One of the biggest pains with web development is doing cross browser testing. In this article I want to take a look at using the android emulator for testing your site on the various android versions.
Google recently announced that you can now use Webmaster Tools to track your site’s usability in mobile browsers. I checked a couple of my sites and the information given was wrong for both, so it seems to be pretty useless at the moment.
However, what they don’t mention is that their PageSpeed Insights has been updated to cover mobile (and desktop) usability. And testing some pages from the same sites I looked at in Webmaster Tools, the PageSpeed tool actually gives accurate information!
It’s well worth running a page from your site through the tool to see how it fares. Of course, you don’t have to follow all the suggestions it makes, but it may well point out an issue that you didn’t notice before. In my case it pointed out that many of my JPEG images could be losslessly optimised.
In the process of updating an old site to be mobile friendly, I decided to replace the site’s logo with an SVG, so it will look better on high DPI screens. Old browsers, such as IE < 9 and Android 2.3 don’t support SVG. So we need some way of serving a bitmap image (PNG) to them while serving SVG to browsers that support it.
An excellent article on various SVG fallback techniques, and the pluses and minuses of each technique is SVG Fallbacks on CSS-Tricks. In the comments to that article it is suggested using an
<object> tag for the SVG with a
<img> for the PNG nested inside as the fallback.
No response for or against was given to this suggestion, so I thought I’d try it out. The code was like this:
I’ve just been in the process of modifying an existing website to work a bit better on mobiles / tablets. The site in question already had a responsive design, being based on the WordPress 2012 theme, but I wasn’t quite happy with exactly how it was displaying.
There were a few websites that proved quite helpful in helping me getting things working as I wanted. I’d like to share them here so I have a reference for similar problems in the future, and if you’re reading this, you may find them helpful too.
Okay, I doubt this post will be useful to anyone else, but I thought I might as well post it since I haven’t updated this blog in a while.
On ‘my’ web server I have some sites that are served by a shared Apache process. This stores daily logs, for one week, rotating the log numbering each day. I have a cron job that runs once a week and concatenates the past week’s logs into a single file, which is then stored elsewhere.
Today I was trying to run awstats to generate stats from the last months worth of logs (I check my sites stats once every month). However, I realised that my cron job was concatenating the daily logs into the weekly log file in the wrong order. This resulted in awstats only picking up the first day from each weekly log, as the rest of the log file had requests with earlier timestamps. It seems that awstats works through the log file chronologically.
So, to get my stats I had to re-order the log files so that the entries were listed chronologically as they should be. To do this I decided to use PHP, mostly just because that is the language I am most familiar with.
In this article I’ll share a couple of ways to use ImageMagick to add a watermark to a photo. ImageMagick is a command line program, which is perfect for this job as that means it can scripted.
I use it on my photography website so I can upload original size photos, then the images can automatically be resized and have a watermark added. I won’t go into detail on the image resizing in this article, as I have a feeling the article will already be quite long. But maybe I will cover that aspect in a future article.
Recently I wanted to use a horizontal navigation menu on a website. I wanted the items in the menu to be evenly distributed across the width of the page, but also butting up against each other, with no space between each item. The other requirement was that the spacing between the text of each item should be equal.
When searching for some advice relating to an SQL query I was writing recently, I read some advice that you should try to use JOINs rather than IN with a subquery. I modified the particular query I was working on to use a JOIN instead of a subquery, and lo and behold, it was much faster.
So I decided to try and rewrite some other queries I’d written using IN with a subquery. Re-written to use JOINs instead, they should be much faster. But rather than just blindly rewriting the queries, I decided to run a few tests.
Just a quick note regarding an issue I came across today. HTML allows space separated rel values to indicate link types. I was using this to indicate a URL was both self and canonical, i.e.
<link rel="self canonical" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" />
I was using the same code in both the HTML and ATOM feed versions of my site, but it turns out that ATOM does not allow space separated rel values. So for ATOM you would require two links, like:
<link rel="self" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" /> <link rel="canonical" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" />
Or don’t include a canonical link in your ATOM feed.
Just thought I’d post this, more for my own future reference than anything else. I was trying to set up a new blog on my wordpress multisite installation that uses the domain mapping plugin. I set up the new site, but when I tried to log in to the admin area, I was just redirected back to the login screen.
I tried all sorts of different things, often involving clearing cookies after each attempt failed. Now, the reason I had this problem is probably different to the reason other people seem to have this problem. If you’re having the same problem, you can find a thread on the wordpress forums with various different solutions you can try here: [resolved] [closed] Redirected to login screen after Multisite install.