Matthew Roach

Web developer @aw20ltd, married to @pamelaroach, Father to @toddroach1, and regular tea drinking nerd

Mobile device detection in Google Chrome

Chrome Settings - Overrides This article is to talk about how I used Google Chrome to help with the development of serving different content for different devices.

One thing to note is that, we did have a range of different devices to do actual testing on, but I found it much quicker to iterate basic things using the desktop and then fire up the device(s) to test for real. What I am about to explain is great for quick testing that what you are writing is performing as intended. I suggest you always check on a real device.

In Google Chrome you can override the user agent that the web browser is sending to the web server, and if you are doing user agent detection like we are the server would take this override and what ever you are doing on the server for mobile detection would return as if you where asking for it from your mobile or tablet, you can even set the user agent to other browser venders (such as IE). Bear in mind that this user agent override does not make Chrome act like the browser you are overriding to, it just mimics its user agent string, so if you are doing server side or client side checking of the user agent string this is pretty perfect for quick development.

The user agent is changed for the server side as well as the client side, so any code you have written that is using the User Agent string in the server request or the navigator.userAgent string in JavaScript will be changed based on this override.

Google Chrome Overrides

  1. Open the Chrome Developer tools (I assume you know how to do this, if not see here)
  2. Click the gear icon in the bottom right corner, this will give you the settings overlay
  3. Click overrides in the left menu, and you will see something similar to the screenshot above
  4. Start changing the user agent from the dropdown and do your testing.
  5. You need to refresh your page each time you change the user agent

You can play around with the JS Bin I used for the screenshot above if you so wish : http://jsbin.com/ivivez

Dev Tip: I had multiple tabs open with the user agent set to different devices, and I also used a little bit of JavaScript to put the device (eg. iPhone) at the the start of the title, so I could easy see which tab was which.

As you will see, you can do more than I am going to explain in this article, and I suggest you go reading up on it. But for this article I am only using User Agent and Device Metrics.

Published on Sunday, 19 May, 2013 - Around 446 Words

Multiple OpenBD installs with one jetty

This is a copy of my reply to a message on the OpenBD Mailing List, and as I think it's a great use for others I have decided to post it on here.

If I have gotten this correct you are wanting an OpenBD JAM install and be able to run two OpenBD sites from the one ./openbdjam command

For example:

www.mysite.com www.myothersite.com

to be severed from the same server, and same OpenBD JAM install?

If this is right, this is what you need to do to get it working:

Note - This is from a clean install

By default the webroot for the JAM install is /opt/openbdjam/webroot/ - You will need to duplicate this folder (or uploaded your own webroot containing a site), I created a webrootb folder like : /opt/openbdjam/webrootb/

Now you need to navigate to the jetty contexts folder: /opt/openbdjam/jetty/contexts/ You will see a file called webroot-context.xml here, this is the file that points to the default webroot, we need to make another one of these files (use the cp command, then we only need to edit a couple of lines), I called mine webrootb.xml

Open up webroot-context.xml and un comment the virtualHosts block and inside the <Item> Put the web address you want to use to access the site located in /opt/openbdjam/webroot/ eg. <Item>www.mysite.com Save and close the file

Now open the webrootb.xml file and edit the 7th line to point to the new webrootb folder, then also un comment the virtualHosts block and change the <Item> line to the web address you wish to access this OpenBD site from eg. <Item>www.myothersite.com Save and close the file

Note : You need to point the A record for your domain(s) to the IP of your server

Now stop OpenBDJAM, and then start OpenBDJAM

Try and access your two sites

Published on Friday, 3 May, 2013 - Around 285 Words

Incase Origami Workstation

A few weeks back I was looking at keyboards that are available for my Nexus 7, my searching showed that a lot where Bluetooth keyboards which was my preferred type, then I saw someone mention that the Apple Wireless Keyboard worked fine on the Nexus, which reminded my I have one sat in the box upstairs not being used anymore. A quick trip up the stairs to fetch it, turned it on and turned the Bluetooth on the Nexus on, entered the code from the Nexus to attach the keyboard and I was away.

My first reaction was the amount of functionality of the keyboard worked on the Nexus like that you have grown to use on the desktop. The one thing I was really surprised with was the ability to CMD + TAB to switch applications. So after spend a couple of hours using the keyboard with the Nexus, I was sold that I could get used to using it for more than just browsing the internet and reading. I am actually writing this on it now, the other thing was I needed some case/device to work with the Nexus and the Apple Keyboard so I could make full use out it.

So I went searching again on the internet, but to look for a case that could work for the Nexus and the Keyboard together, I first started looking for cases for Nexus and Keyboard and this was getting me no where, so I search for Apple Wireless Keyboard case,and this brought up very few results, well actually only one that looked any good, and this was the Incase Origami Workspace case, it looked perfect from the photos and just what I was after. It did not take me a second to question the purchase of this item. I did think it was a little pricey at £20, but there was nothing else around that looked as good or neat.

So after a couple of days I took delivery of the case, and it was better than expected. The simplicity of it is perfect, it's not too thick, and the material seems like it will last, the velcro that's used to hold the case shut and in the folded position that holds your tablet is industrial, and not you standard velcro so I expect it to last.

After having the case for a couple of weeks and put the set up to use in multiple ways; I have used it to take notes at work, write blog posts on the couch/ in bed, and used to capture notes at a conference. The workstation that is created by using this case is perfect.

Published on Saturday, 27 April, 2013 - Around 444 Words