Blog

Fix For JavaScript Popups And Jetpack Incompatibility

Posted on by Di

If you’re WordPress based website uses Jetpack and you find your fancy ajax popup breaks try this to fix it:

  1. Go into the admin and click on the ‘Jetpack’ menu.
  2. Click on WordPress.com Stats ‘Configure’ button.
  3. Uncheck the ‘Put a chart showing 48 hours of views in the admin bar’ option.

This fixed an issue for me where my contact page inside Colorbox popup stopped working with Jetpack installed.

Posted in Web Design / Dev | Tagged , , | Comments Off

Misuse of JavaScript

Posted on by Di

I don't often write a response to other blog posts or articles, I usually just tweet a quick thought but I had to make an exception for this article: ISPs scramble to explain mouse-sniffing tool. To save you the trouble of reading the article the following is a quote that sums up the essentials:

Sky Broadband has been caught using JavaScript to track every click and shuffle on its support pages, but it's not alone: other ISPs have also admitted recording every frustrated wobble of the mouse on their support pages.

As a web designer and front-end developer this frustrates me no end. That organisations misuse the technology that we employ to make using the web that little bit quicker / easier.

When I started my career we used JavaScript very infrequently, the combination of browser differences, or users switching off cookies, JavaScript, and images meant it very often wasn't worth the time to write. These days this isn't such a problem, broadband means people aren't trying to eek out as much performance as possible from their connections. This has played its part in the rise in popularity of JavaScript. Being able to add in-page form validation means the user isn't subjected to page reloads, or dropdown menus that reduce the trail of pages to step through before hitting the one you want.

Mouse pointer tracking doesn't benefit the user in any way, this kind of misuse leads people to consider switching off JavaScript. Because JavaScript runs on the user's machine I consider it even more important to get it right and keep it as lightweight as possible because it's not my server's resources I'm burning, it's theirs. You allow me to run JavaScript in your browser, I try to keep it lightweight and not use it excessively.

If you want to cut down on the amount of pointless JavaScript running in your browser I'd recommend installing some plugins, rather than a blanket ban. Ghostery allows you to block all kinds of nasties, it's quite an eye opener to visit an online shop and see just how many tracker scripts are loaded, it's also good for blocking the numerous social media button scripts. Another plugin to consider is AdBlock, this one blocks ads but more importantly it blocks the scripts that are shipped with those ads, scripts that track your browsing habits, scripts that just like the mouse tracking from Sky, do nothing for the user experience.

Posted in Web Design / Dev | Tagged | Comments Off

Using Evernote as an Instapaper / Readability / Pocket replacement

Posted on by Di

As a web designer I skim through a lot of blogs, sometimes I even want to read an article. I’ve got accounts on Instapaper, Pocket and Readability. If we could take parts of all three services and squash them together into one it would be a truly great read-it-later service. Individually they all have their little quirks that make me move from one to the other—and the other—frequently.

Whilst Evernote have released a Web Clipper and Clearly they are both browser addons, this renders them useless on iOS devices since we can’t install plugins there. Also, whilst Clearly looks nice in a browser window, pages saved to Evernote strip out all of the styling, making the text look, frankly, a bit shite. As I do almost all of my blog skimming on an iPad I needed something that was effectively a one-click workflow.

So, I’ve written a simple PHP script that uses a combination of Pocket (because loads of iOS apps integrate it), IFTTT and Readability (because they have an anonymous mobiliser) to email trimed down page content to my Evernote account.

You can find the setup guide and download links on the Add to Evernote page.

About the script

This script uses both Pocket (to fire the script via IFTTT) and Readability (to mobilise the page content). I wish I could just use one service however Readability only allows favouriting pages to trigger an IFTTT recipe (this would require an extra step when adding to Evernote), and Pocket has no anonymous mobilising feature.

I’ve deliberately left the Readability link in the footer of the added pages. We are using their service after all.

I’ve written this script based on my own usage, which involves reading notes on an iPhone, iPad, a Nook, Mac and PC. The CSS has been written to be readable on all of these devices.

This is the first public version of the script and whilst I’ve been using it and refining it there may still be some bugs, if you find any please let me know.

Posted in Tech | Tagged , | Comments Off

Device Refresh Script

Posted on by Di

Building responsive websites ramps up the time I seem to spend testing my page templates. All that tapping of the refresh button on every device on my desk gets tiresome very quickly. With this in mind I’ve written a little bit of jQuery-powered code to help me. It automates refreshing all those browsers. I’ve been using it on everything from IE6-10 and a decrepit old BlackBerry without any issues. I’ve released as a GitHub Gist in case others find it useful. You can read more about it on the Device Refresh Script code page.

Posted in Web Design / Dev | Tagged , , | Comments Off

Setting up a BlackBerry for use in mobile web design testing

Posted on by Di

My BlackBerry is the device that has caused me the most difficulty when setting up my little mobile testing suite. Here are a couple of the most annoying things that I’ve been able to do something about. Please note that I’ve tested these things on a BlackBerry Curve 8520, use on your device at your own risk.

Charge via USB

I’ve had problems with my BlackBerry not charging over USB, it seems that if a USB hub can’t identify what it’s supplying power to it knocks the power down to a minimum. The BlackBerry then refuses to trickle charge, giving the dreaded “The charging source connected to your BlackBerry device cannot charge your battery” error message. To fix this you can unlock the engineer screen and manually set the charge rate, you will need to generate a code to give you access. Fire up a web browser on your computer and load the E-Screen Keygen page. You will need to fill in the device pin, app version and uptime from your BlackBerry’s Help Me! screen.

To access the Help Me! screen, press the Alt + Shift + H keys.

Key combination to access Help Me! screen

You should then see something like this:

Information needed to unlock the Engineer screen

You will need the App Version (including the bit in brackets), PIN and Uptime. Input this information into the BB Escreen Keygen form and click Generate. This will give you a key, you need to type this key into the Help Me! screen. Nothing wil be displayed on the screen whilst you do this but assuming you typed everything correctly you should see the engineer screen. You can get into the engineer screen by using the Help Me! key combination.

You need to go to OS Engineering Screens > Battery > Battery Charging Screen.

Main engineering screen

OS Engineering Screens

Battery

Click on Charge Rate and select Force USB 500.

Battery Charging Screen

This will now allow the phone to charge via USB. The only drawback to changing this setting is that the little battery icon in the top left of the screen will no longer update, this is because the phone thinks it’s peramently charging. To check the battery level in future you will need to use the Help Me! key combination and look in Battery Monitoring Screen.

Battery Charging Screen

Keeping the backlight on

The maximum time the BlackBerry screen can be left on for is two minutes. This is fairly annoying when you’re trying to test a site and the device keeps switching off. Luckily there’s an app called BBLight that will allow you to keep the screen on if the device is charging. The only problem with using this app is one we’ve created for ourselves by changing the charging rate, you’ll need to remember to switch the phone off when you arent using it. Luckily, BlackBerry’s start up and shut down fairly quickly.

These two tweaks make testing on a BlackBerry a lot easier for me. Hopefully others will find them useful too.

Posted in Web Design / Dev | Tagged | Comments Off

A Git client with editing for the iPad and iPhone

Posted on by Di

GitMongo

Having made the move from Subversion to Git I looked again for any apps that would let me work with my repos from an iPad. I found GitMongo on the AppStore. Whilst it is by no means a full featured Git client it certainly supports more than the various iPad Git reader apps currently available. It has the basics covered; clone, commit, a syntax highlighting text editor, etc, so I’m able to tinker with bits of code on the go.

I won’t repeat the instructions here but if you have a jailbroken iPad you can put a symbolic link to GitMongo’s Documents folder in Textastic’s if you want to use its preview or your custom themes and bundles.

Posted in Web Design / Dev | Tagged , , | Comments Off

Mobile device testing, covering the basics

Posted on by Di

If you’re serious about building responsive sites then you need to start building up a device lab. Sure, you can go and visit one of the community-driven ones, there don’t seem to be many about though, so depending on your location this may not be terribly feasible.

It might seem like a waste of time and money gathering up some widely used devices but I’d bet that you wouldn’t bat an eyelid at testing your latest design on IE. These days IE is fairly predictable, but you can’t say the same about mobile browsers.

You should aim to cover as much ground with as few devices as possible. At the very least you need to cover iOS and Android. I’ll go out on a limb and guess that you’ll probably have a phone running on one of these platforms. If so, congratulations you’ve made a start.

iOS

I’ll start with iOS only because it’s much more straightforward than Android. Ideally you need something that runs the latest iOS (currently iOS 6). The 3GS will do this, you’ll miss out on new features but for web dev testing this shouldn’t matter. If you want something with a retina screen you’ll need to move up to an iPhone 4.

If you want to test an older version of iOS then consider an original iPhone or first generation iPod Touch. As well as running iOS 3, an original iPhone runs like treacle, so it’ll be a good speed test for those JavaScripts.

Android

Android covers a wide gamut. If you want to test Chrome you will need a phone running Android 4 as a minimum. There are differences in how Android 2.1, 2.2 and 2.3 display pages so ideally testing all three would be something to aim for. Various Android phone manufacturers add their own tweaks, so gathering a variety of phones including a Samsung and an HTC (two of the most popular manufacturers) would be smart.

A cheaper way of running Android 4 is to buy a phone that isn’t officially upgradable to version 4, such as a Samsung Galaxy S. You can then install CyanogenMod 10 on it, which is Android 4 in every way but name. This will then allow you to run Chrome. You should also consider getting something to test Android 2.3, as it was the most popular of the older Android versions.

The Android SDK includes an emulator, using this you can supplement your actual devices with emulated ones. I use this to test Android 3 (Honeycomb) and 2.1 (Gingerbread). The only drawback with the SDK is you can’t access the Play Store and download aftermarket browsers.

BlackBerry

There are two distinct groups of BlackBerry from a web design standpoint; pre OS 5 and post OS 5. OS 6 and up uses a Webkit browser, which brings it more into line with other smartphones. Ideally you’d get one of each OS but I know this isn’t realistic so maybe aim for an OS 5 and 6 device each. The Blackberry Curve 8520 and 8900 both run OS 5, neither are touchscreen devices so you’d be covering an extra bit of variation, and the BlackBerry Curve 9300 and BlackBerry Curve 9360 run OS6 and 7 respectively.

BlackBerry also provide Windows only BlackBerry Smartphone Simulators so you can fill in the blanks much like with Android. These can be installed on Parallels if you’re run on OSX. To run the OS 5 simulator you need to install the BlackBerry email and MDS services simulator and JDK if you don’t already have it. Helpfully, BlackBerry don’t mention this.

Windows Phone

The last smartphone variant is Windows Phone. Version 7 included IE Mobile 7, which is actually a mix of the IE7 and 8 rendering engines. Windows Phone 7.5 updated the browser to IE Mobile 9, so it’s a lot more modern. Ideally then, you should consider getting a version 7 device, something like an HTC 7 Mozart, along with one that runs 7.5 or higher. The Nokia Lumia 610 comes preinstalled with Windows Phone 7.5, whilst the HTC Windows Phone 8S is a newer Windows Phone 8 device.

Microsoft supply a Windows Mobile 7 emulator. I found it incredibly slow to the point of being unusable, this might be because I attempted to run it on Parallels, your milage may vary. To run it you will first need to install Microsoft’s Webmatrix, once done simply follow Microsoft’s instructions to install the emulator.

Feature phones

Finally, you should consider testing on something that isn’t a smartphone. Try to find one that has wifi to minimise faffing with extra data plans. The Nokia N95 is a reasonable Series 60 phone, although it is quite high end. Probably a good rule of thumb for choosing a feature phone is; the crapper, the better. Finding a crappy feature phone with wifi is something of a challenge however.

This sounds expensive

It isn’t cheap, but you can reduce the cost a bit by keeping an eye on eBay. Look for phones that have some cosmetic wear or damage. As long as the phone’s wifi, screen, and ability to load software isn’t compromised it’s worthwhile to put in a bid. My Samsung Galaxy S has a buzzing microphone, my HTC Wildfire has a small crack on the corner of its screen, and my BlackBerry has a broken camera. None of these things affect their ability to load websites, and they were all cheaper because of these faults.

This blog post covers the most likely basics, a starting point. To gain more insight into what devices to test on you should look to your website’s existing webstats, and maybe the geographic location of your audience. Don’t just assume your audience are all using iPhone and Android devices.

Posted in Web Design / Dev | Tagged | Comments Off

Using Subversion with Textastic on an iPad

Posted on by Di

This blog post assumes you have a jailbroken iPad and that you have installed OpenSSH and changed the root password. Also, it goes without saying that you must have Textastic.

First you need to go to Cydia, find and install the Subversion package (at the time of writing it’s version 1.4.6).

Since there are no GUI based Subversion clients you’ll be using the command line. To make that easier consider adding some aliases to your ~/.bashrc file. To load these aliases on every terminal login you then need to add source ~/.bashrc to your ~/.profile file.

This is my .bashrc file:

# SVN
alias sci='svn ci -m'
alias sup='svn up'
alias ss='svn status'
alias sco='svn co'
alias sad='svn add'

So now you’ve got Subversion installed and a few finger-saving aliases setup. Next you need to find the Textastic Documents folder. The easiest way to do this is to use the Cydia iFile app.

Open iFile and go to settings and enable "Application Names". This will show you the app names rather than the unhelpful default folder names. iFile should start up listing the correct Applications folder, if it doesn’t you need to be looking in /var/mobile/Applications. Scroll down until you find the Textastic folder. Go into Textastic > Documents, you should find your existing Textastic files there. Across the top of the screen you should see a breadcumb trail that looks something like this: /var/mobile/Applications/AB12C345-67DE-8F9G-0H12-JK3456MN7890. Now you have two options…

Option one: If you just want to access the files checked out with SVN in Textastic then simply add an alias into your .bashrc file to allow a quick cd into Textastic’s Document folder. Something like this:

alias textsub='cd /var/mobile/Applications/AB12C345-67DE-8F9G-0H12-JK3456MN7890'

Option two: If you have installed the Cydia ios-lighttpd-php-mysql package then the better option is to setup a symbolic link in the Textastic Documents folder to the web server root—/var/www. To do this make a note of the breadcrumb trail in the top of the iFile screen. Then switch to your terminal app (Prompt, iSSH, MobileTerminal, etc) and cd to your Textastic Documents folder. Once there type the following:

ln -s /var/www www

Any file you check out with Subversion, whether directly into the Textastic Documents folder or into /var/www will now be visible in Textastic, but not yet editable. This is because apps are run as the mobile user and you will be checking out files as the root user. Any file or folder you checkout should have it’s owner swapped to mobile, like so:

chown -R mobile myCheckedOutFolder

The -R stands for recurrsive.

You could of course swap Subversion for Git as there is a package in Cydia.

Posted in Web Design / Dev | Tagged , , | Comments Off

Death of the high street?

Posted on by Di

One afternoon my mum and I were sat nattering over current events; “Looks like we might have snow”, “Shame about HMV”, etc.

Mum then proceeded to tell me all about my grandparents. They lived out in the country, the nearest small town was six miles away. Apparently they never visited shops. The grocer would drive around his route one day, collecting people’s shopping lists, and come around the following day with people’s orders. Same for the fishmonger, butcher and the milkman.

Maybe online shopping isn’t actually that revolutionary, merely a modern twist on how some people were buying and selling in times past. It’s the shopping centre that’s the oddity.

Posted in Real Life | Comments Off

Small does not have to mean cheap

Posted on by Di

I’ve read a number of comments in the past few days about a certain smaller, fruity tablet. A lot of them along the lines of “it’s aimed at people who can’t afford a real iPad”. I saw similar views expressed when I was researching swapping over to an 11 inch MacBook Air a couple of months ago.

These comments got me thinking; why is there a tendency to equate small with crap, cheap, or underpowered? How many times have you heard someone say “a cheap, small car” for example, like it’s some kind of throwaway object? I, and others like me, place a lot of value in size and weight considerations of the things we have to schlep around.

To all the manufacturers of electronic gizmos (and cars) I ask this; please stop thinking smaller has to mean cheaper.

Posted in Tech | Comments Off

#