I recently setup a Nginx proxy server on a UK based provider, this is to test UK centric features of the BBC News website. We use AWS for most of our tooling, so adding a couple of extra options on AWS to enable this testing seemed like the best approach. Not quite.

PhantomJS

The tool I was using to test was Wraith, a visual regression testing tool. We allow users to set command line arguments and this is passed to PhantomJS on the command line. One of the available options for PhantomJS is a proxy server and proxy auth, but it isn’t that simple. In testing the –proxy options on it’s own, it works fine, but adding auth seems to be a bit more tricky. Nginx supports basic auth, seeing as that is just a username and password, you’d expect the command to be something like this :

phantomjs --proxy=192.168.1.1:8080 --proxy-auth=username:password snap.js http://www.bbc.co.uk/news 320 test.png

This simply doesn’t work, even though using curl and a desktop browser confirmed the proxy to be working. The next step was to see if Slimerjs worked, it didn’t. Assuming all Phantomjs does is take the command line argument and pass that as a header, it seemed possible to use my Javascript file to send the credentials.

In the JS file

By setting the following, Slimerjs authenticated and took the screenshot. The same could not be said of Phantomjs, it still didn’t work.

page.settings.userName = "user"  
page.settings.password = "password"  

The Solution

The solution was to set a custom header, this was successful in enabling access to the proxy. It seems that for some use cases, the proxy auth works from the command line, but for my situation, the proxy must be set by the command line and the credentials via the javascript file.

page.customHeaders={'Authorization': 'Basic '+btoa('user:password')};

Sometimes you need to show someone something on a phone, words are just not good enough. With testing moving more to mobile, having the ability to show a colleague the issue has become a little harder. Google introduced screencasting in Android 4.4, a way to record everything you do on screen. Great, but that makes a big video that is difficult to look at on Github, so lets convert that video into a GIF.

For this you will need the Android SDK, FFMPEG and ImageMagick. Install on Mac by using Homebrew. You will need and Android 4.4 phone to make this work, these instructions are also tailored for OSX system.

Install binaries

brew install android-sdk imagemagick ffmpeg --devel

With terminal open and your android 4.4 phone plugged in, use the following commands, swapping out the file name as you see fit.

To start the recording, use the adb shell screenrecord command

adb shell screenrecord  /sdcard/pull_request.mp4

You can also change the bit rate from 4mbps up to 8mbps by using

adb shell screenrecord --bit-rate 8000000 /sdcard/pull_request.mp4

Hit control + c to stop recording.

When you are done, pull the video off by using

adb pull /sdcard/pull_request.mp4

This is now the video file we will work with. If you want to delete lots of files you didn’t use, you can adb shell in terminal to access the phones storage.

Converting the video to GIF

ffmpeg -i pull_request.mp4 -vf scale=360:-1 -r 5 output.gif 

Lets break it down,

ffmpeg is the application we are using

pull_request.mp4 is the file name of the video

-vf is the video filter graph for setting FPS and scale

scale=360:-1 is the WxH, so 360 as that is ¼ the width of the Nexus 5, this is to reduce file size. Using -1 sets the aspect ratio automatically for us based on the input video size, 16:9 in our case, meaning less guess work.

-r is the frame rate of the GIF, I have used 5, but you could go to 6 or 7.

output.gif is our finished file name.

Compressing the GIF

This is the hard part, finding a balance for the quality Vs file size. We ended up with a 3.5MB GIF from a 20 second video clip, using Imagemagick, we got that down to 1.3MB, but the results were not that useful. Instead, I have decided on a 10% fuzz to give a nice result, but still reducing file size to 2.1MB, meaning it is roughly 100k per second.

convert output.gif -fuzz 10% -layers Optimize final.gif

I decided not to emded the GIF, save you the download, if you want to see it, click the link. http://imageshack.com/a/img29/3360/0zqt.gif

I recently got Battlefield 4, an intensive first person shooter with high detail graphics and enough shooting to satisfy any teenage angst. I purchased the game on the PC, meaning I am locked into EA’s(Electronic Arts) distribution software called Origin. This software enables buying, trading, chatting, it also has a social aspect in the form of profile pages, but it also has an inbuilt web browser. This browser isn’t actually accessible from the Windows desktop, it is designed for use within the game itself.

This is not a new concept, the main rival in this space is Valve, with a similar distribution software called Steam. Steam also has a browser, similar to Origin, and is also only accessible inside a running game. The browser is accessible via a shortcut key which displays an overlay, the overlay exposes a slue of features for the now dead/bored gamer. These browsers are meant to eliminate the need to leave the game and return to the desktop, which in theory, should lead to extra sales of in-game content. In any case, these browsers exist, but I have never actually thought about what they are capable of, they always seemed ok, but I took some time to find out what’s under the hood of these browsers.

The Browsers

Steam

A quick look at the UA string says a lot about where these browsers started, for Steam, it is Chromium, or more importantly, (CEF)Chromium embedded framework. This version of Chromium is quite old, version 18 with Web kit build 535.19, though the CEF doesn’t get the same treatment as regular Chromium in update terms. There is also a reliance on Valve to update Steams CEF to the latest, another barrier to the latest standards. The general experience of Valve’s browser is good, flash can be installed if the user decides to, with generally OK performance. There is a tab interface, but that is about all it does have. It wont win any speed contests, sometimes it can be slow to load big pages. Responsive sites work as expected, though there is another dynamic to web browsing in Steam, the viewport.

Although you may have a 24 inch screen with HD resolution, some gamers like to run low resolutions to get the best performance, some will even run in a different aspect ration. What this can mean is a 1920x1080 display is reduced to a 800x600 viewport, leaving responsive sits below what some would call “desktop” resolutions. Steam respects the resolution of the game and limit the browser accordingly, so even on a large desktop monitor, responsive websites have an important home.

The scores from this browser follow from Anna Debenham’s console browser scores, using Acid3, CSS3test and HTML5test.

CSS3 51%
Acid3 100%
HTML5test 354

UA String : Mozilla/5.0 (Windows; U; Windows NT 6.2; en-US; Valve Steam GameOverlay/1383158641; ) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19

Origin

Origin is little less forthcoming about it’s origins, yes, I went there. It points to a custom build of web kit, 534.34, while actually indicating it is Safari. The interface is slightly different from Steam, but overall is a basic browser with tabs. Flash can be installed in Origin too. As both clients allow for chatting in the overlay, resizable browsers are key, which is very convenient for responsive sites. Origin seems to have the same limiting in-game performance as Steam, scrolling and general use can have a element of lag to it. If you stick to Facebook, Twitter and BBC News, you should be fine, but some parallax sites were noticeably janky.

Scores :

CSS3 45%
Acid3 100%
HTML5test 270

UA String : Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/534.34 (KHTML, like Gecko) Origin/9.3.10.4710 Safari/534.34

Testing

Some of the more interesting results came from simple tasks such as loading images, both browsers had strange results. On websites like the Guardians new responsive site, Steam simply gave up trying to load javascript, so only a core experience was usable. In Origin, images loaded, but the browser had serious issues with layouts of some responsive sites, they just didn’t look right.

Video was interesting, Origin behaved itself and didn’t attempt to load HTML5 video, but Steam did, leading to a disappointed user experience. On BBC News for example, clicking the video would remove the poster image and leave a disappointing non functional video player in place.

Scroll bars were also an issue for Steam, lets hope an important button isn’t hidden away.

Conclusion

In-game browsers have been around since 2010, but Steam recently hit 60 million users and Origin is growing rapidly, though it is likely that Origin and Steam share a lot of users. This growth could lead to yet another issue for more mainstream websites, testing browser compatibility for an audience that is typically quite good with a computer and it’s capabilities.

I suppose the best part about in-game browsers for Steam and Origin is that they are limited to PC’s on a desk with a keyboard and mouse………..sigh

Microsoft have released a series of tools aimed at better testing and support of Internet Explorer.  http://www.modern.ie/  

What Microsoft are offering is actually pretty cool, a 3 month trial to browser stacks, a remote testing VM.  This allows you to connect to a browser running on a Windows OS using a particular version of IE, from IE6 to 10.  The only concession is 3 fixed resolutions, 800x600, 1024x768 and 1280x1024.  This tool will be a big help to those looking for a way not to have local VMs or spare computers.  It costs $19/month for a single user if you like it after the 3 month trial.

Microsoft have also included a series of Virtual machines on several platforms for testing.  You can also select different VM packages such as virtual box. http://www.modern.ie/en-us/virtualization-tools

The best feature available here is the IE report, a quick way to test your websites browser rating according to IE’s abilities.  It outputs a list of areas you can improve your site such as vendor prefixes, browser plugins, compatibility modes and more.

Hopefully this will help those looking to better serve IE.

In this post I will show you how to take lots of screenshots at lots of breakpoints, compare live sites to local changes, then use a diff tool to compare them all.  The outcome, a quick and easy way to test front end changes. This is achieved by using a screen shot service, an image diff tool and a browser, screenshot as a service, PhantomJS and ChunkyPNG. You will also need to have NodeJS installed.

Keep reading

In this post, i will talk about how to view network traffic and the HAR (HTTP Archive) file. This is useful for doing several things, my initial intention was to discover network traffic from mobile devices.  This was something i wanted to view in order to find out whether our vary headers and stats were correctly being logged, but there is also an interesting way to measure performance.

Keep reading

For a week now, I have been using the Microsoft Surface, the latest gadget in the mobile world. A tablet computer in it’s basic form, but also a work device, featuring office applications and the Windows explorer. This device is not the first tablet that I have owned, I purchased a HP Touchpad at reduced cost over a year ago, though I stopped using it after a few months. Ultimately, it didn’t offer all the features I wanted, not to mention the terrible web browser, so thought now was the time to make a choice, the Microsoft Surface was my new tablet.

Keep reading

With Windows 8 now out, the final release of IE 10, both Desktop and Modern UI(formally Metro) browsers.  They are the same, but have very different user interfaces, one touch based, the other a conventional Desktop browser.  The RT verions, this is not Windows 8 RT, rather a seperate OS callled Windows RT, has an ARM implementation of the browser to.  

The best devices to get in order to test IE 10 on are probably the Samsung Ativ or the Microsoft Surface.  Both available now.

In testing out the browser, there are a few things to help you in terms of gestures and shortcut keys. 

Keep reading

Over the last week or so, Nokia have been pushing updates to lots of phones, these are running the latest versions of Symbian, S60 V10 or Symbian Belle.  Although the support list for this version of the OS for devices is small, the main ones are covered.  These phones now have access to the latest version of the Symbian browser, Nokia Belle Refresh for Nokia N8, Nokia E7, Nokia C7, Nokia C6….

What this means for us is that the new version has enough support to cut the mustard, in this case the N8 loads the smartphone version of the website.  This change of browser is something we dont see often, but when it happens, it opens up a lot of possibilities for users, but also exposes some issues.  As you can see in the image, the font embedding support is spotty, so worth testing all aspects of your site for other issues.  

Ultimately, this is a good example of why you should be checking phones for updates all the time, ensuring you are testing the latest releases.