Defering Inline JavaScript Problems

I came across an interesting problem trying to debug a website that had issues with some ad code earlier. The site was working fine until ad code had been added, then in Internet Explorer it was only showing the ad instead of the page. Firefox, Safari and Chrome were fine, so it suggested a problem with the ad code.

The ad code in question was pretty common, the sort that inserts a script tag via a document.write.

<script language="javascript" defer="defer" async >
<!--
if (window.adgroupid == undefined) {
window.adgroupid = Math.round(Math.random() * 1000);
}
document.write('>scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/addyn|3.0|311.0|3328078|0|225|ADTECH;cookie=info;alias=FindClassicCars+Maserati+7+leaderboard;loc=100;target=_blank;key=key1+key2+key3+key4;grp='+window.adgroupid+';misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script>

The problem turned out to be with the attribute defer in the script tag.

Defer gives the browser a clue that a piece of JavaScript can be run later, rather than as soon as the browser sees it. This can be used to speed up the rendering of a site. However, Internet Explorer runs differently to other browsers. As the script in question was inline, all the other browsers ran it immediately, whereas Internet Explorer didn’t. On Internet Explorer the code was run once the page DOM had been created, so writing out the fresh tags after the document was closed. This caused the ads to show on what looked like a new page on IE’s below version 9, and on IE 9 the ads appeared at the bottom of the page.

The fix is to simply remove the defer attribute and change the the opening script tag to the following, leaving the rest of the ad tag in place.

<script type="text/javascript">

You may have noticed I’ve ignored the async attribute that was in the original script tag. That’s an interesting new attribute in HTML5, but alas a topic for another time.

HTTP Methods For RESTful Web Services

The use of HTTP methods when designing and building a RESTful web service is very important.

Most developers only use the GET and POST methods offered by the HTTP specification, and for most web sites this is fine.

However, there are other useful methods in the specification that are often overlooked by web developers, but as a RESTful web service developer you will need to know. The most important of these are PUT and DELETE.

REST uses HTTP methods as a one to one mapping to the CRUD (Create, Read, Update and Delete) operations you may be familiar with as a developer. These are

  • Create a resource – POST
  • Read a resouce – GET
  • Update a resource – PUT
  • Delete a resource – DELETE

There are also two other terms associated with RESTful services that you should be aware of, “safe” and “idempotent”.

A safe request is a request to read some data, not to change any server state. GET requests are safe as you should be able to GET a resource any number of times without affecting it’s state.

An idempotent request is request that however many times it is invoked, the end result is the same. GET, PUT and DELETE are all idempotent. You should be able to DELETE a resource any number of times, once deleted it’s gone, trying to delete it again won’t change the fact it’s gone.

POST is the method that causes problems, it is neither safe or idempotent. Using our CRUD example from earlier, POSTing to a server, could create duplicate resources.

For more details on other HTTP methods, such as HEAD and OPTIONS, have a look at RFC2616 – The HTTP 1.1 specification.

XML Web Services And Character Sets

When developing web services that serve XML, it’s important to get the MIME type right as the wrong one could decoding errors due to default character sets.

text/xml defaults to sending your XML document in the us-ascii character set. See section 3.1 of RFC 3032 for the reason why.

application/xml defaults to sending your XML document in the utf-8 character set. See section 8.10 of RFC 3032 and Appendix F of the XML specification for the reasons why.

Of course, you can override these defaults, but it’s worth remembering if your XML application doesn’t behave quite as you were expecting and is rendering odd characters.

Inside The Met Office iPhone App

Being on annual leave for the annual Eastbourne Airbourne air show, I’ve been using the Met Office app on my iPhone quite a bit to keep track of the weather.

This has to be one of the apps I use most frequently, and the according to a press release from the Met Office from September 2010, the Met Office iPhone app has had over a million downloads and it ranks amongst the top 5 apps in the UK.

The app was written by an agency called Gorillabox.

I thought I’d take a look at how it works.

All the pages seem to take advantage of a web service located at http://metip.g-box.tv/ . Judging from the headers sent from the service, this appears to be written in Perl using the excellent Catalyst framework. They return UTF-8 encoded XML.

Loading

When you load the app, it queries your device’s GPS to get your current latitude and longitude, this location is used throughout the app.

Home

The first page you get to is the home page. This shows the Met Office logo, a space for an advertisement that is currently just pushing the Met Office’s Twitter account, an image of the current weather, and a bar showing your current location’s weather, temperature, wind speed / direction and sunset time.

Met office app home screen

Behind the scenes a query is sent to http://metip.g-box.tv/home with your lat and long in the query string. Here’s what was sent for my location. As you can see, all elements are returned from the web service.

GET /home?lat=50.7732N&long=0.2887E HTTP/1.1
Host: metip.g-box.tv
User-Agent: Gorillabox/2011031601.1.3 CFNetwork/485.13.9 Darwin/11.0.0
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
HTTP/1.1 200 OK
Date: Mon, 15 Aug 2011 18:36:02 GMT
Server: Apache/2.2.12 (Ubuntu)
Content-Length: 456
X-Catalyst: 5.80031
X-PageCache: Catalyst
Connection: close
Content-Type: application/xml
<?xml version="1.0" encoding="UTF-8"?> <xml last_updated="15/08/2011 18:31">
<ad img="http://image.metip.g-box.tv:80/Twitter.png" url="http://twitter.com/metoffice" />
<severe_weather status="false" />
<site Sunset="20:24" display="Eastbourne Station" site_id="138" site_name="Eastbourne">
<view type="home">
<data date="15/08/2011" temp="16" time="21:00" weather_code="7" wind_direction="SW" wind_speed="8" />
</view>
</site>
</xml>

Weather

The next page is probably the most important one, the weather! This gives you a 5 day forecast of the weather for your location, along with a more detailed 24 hour forecast.

Met office app weather screen

Behind the scenes a query is sent to http://metip.g-box.tv/weather with your lat and long in the query string. Here’s what was sent for my location.

GET /weather?lat=50.7732N&long=0.2887E HTTP/1.1
Host: metip.g-box.tv
User-Agent: Gorillabox/2011031601.1.3 CFNetwork/485.13.9 Darwin/11.0.0
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
HTTP/1.1 200 OK
Date: Mon, 15 Aug 2011 19:13:07 GMT
Server: Apache/2.2.12 (Ubuntu)
Content-Length: 3804
X-Catalyst: 5.80031
Connection: close
Content-Type: application/xml
<?xml version="1.0" encoding="UTF-8"?>
<xml last_updated="15/08/2011 18:33">
<site display="Eastbourne Station" site_name="Eastbourne">
<view type="overview">
<data id="1945892" display="Today 15/08/2011" index="0" sunrise="05:47" sunset="20:24" temp="15" type="night_header" weather_code="12" wind_direction="W" wind_speed="5" />
<data id="1950464" display="Tuesday 16/08/2011" index="1" sunrise="05:49" sunset="20:22" temp="19" type="standard" weather_code="7" wind_direction="SW" wind_speed="13" />
<data id="1955036" display="Wednesday 17/08/2011" index="2" sunrise="05:50" sunset="20:20" temp="19" type="standard" weather_code="3" wind_direction="E" wind_speed="7" />
<data id="1959608" display="Thursday 18/08/2011" index="3" sunrise="05:52" sunset="20:18" temp="19" type="standard" weather_code="7" wind_direction="NE" wind_speed="15" />
<data id="1964180" display="Friday 19/08/2011" index="4" sunrise="05:54" sunset="20:16" temp="21" type="standard" weather_code="1" wind_direction="NW" wind_speed="8" />
</view>
<view overview_index="0" type="detail">
<data display="15/08/2011 18:00 - 21:00" humidity="69"
index="0" temp="17" type="3hr" visibility="GO" weather_code="10" wind_direction="SW" wind_speed="9" />
<data display="15/08/2011 21:00 - 00:00" humidity="79" index="0" temp="16" type="3hr" visibility="VG" weather_code="2" wind_direction="SW" wind_speed="6" />
</view>
<view overview_index="1" type="detail">
<data display="16/08/2011 00:00 - 03:00" humidity="86" index="0" temp="15" type="3hr" visibility="GO" weather_code="12" wind_direction="W" wind_speed="5" />
<data display="16/08/2011 03:00 - 06:00" humidity="85" index="0" temp="15" type="3hr" visibility="VG" weather_code="7" wind_direction="SW" wind_speed="9" />
<data display="16/08/2011 06:00 - 09:00" humidity="83" index="0" temp="15" type="3hr" visibility="EX" weather_code="7" wind_direction="SW" wind_speed="8" />
<data display="16/08/2011 09:00 - 12:00" humidity="82" index="0" temp="17" type="3hr" visibility="VG" weather_code="7" wind_direction="SW" wind_speed="10" />
<data display="16/08/2011 12:00 - 15:00" hu
midity="75" index="0" temp="18" type="3hr" visibility="VG" weather_code="3" wind_direction="SW" wind_speed="13" />
<data display="16/08/2011 15:00 - 18:00" humidity="73" index="0" temp="18" type="3hr" visibility="VG" weather_code="3" wind_direction="SW" wind_speed="15" />
<data display="16/08/2011 18:00 - 21:00
" humidity="85" index="0" temp="17" type="3hr" visibility="GO" weather_code="8" wind_direction="SW" wind_speed="13" />
<data display="16/08/2011 21:00 - 00:00" humidity="92" index="0" temp="17" type="3hr" visibility="GO" weather_code="2" wind_direction="SW" wind_speed="11" />
</view>
<view overview_index="2" type="detail">
<data id="1955036" display="Wednesday 17/08/2011" index="0" temp="19" type="day" weather_code="3" wind_direction="E" wind_speed="7" />
<data id="1955036" display="Night" index="1" temp="16" type="night" weather_code="2" wind_direction="E" wind_speed="15" />
</view>
<view overview_index="3" type="detail">
<data id="1959608" display="Thursday 18/08/2011" index="0" temp="19" type="day" weather_code="7" wind_direction="NE" wind_speed="15" />
<data id="1959608" display="Night" index="1" temp="13" type="night" weather_code="2" wind_direction="NW" wind_speed="8" />
</view>
<view overview_index="4" type="detail">
<data id="1964180" display="Friday 19/08/2011" index="0" temp="21" type="day" weather_code="1" wind_direction="NW" wind_speed="8" />
<data id="1964180" display="Night" index="1" temp="13" type="night" weather_code="0" wind_direction="W" wind_speed="10" />
</view>
</site>
</xml>

Maps

The maps section allows you to either see the weather, temperature or wind speed for the whole UK, or to click into a specific part of the country to see regional data. There is also an icon on the top right of the page that gives you a written weather forecast.

This is probably the most complex part of the app, and a lot of data is returned from the query made to http://metip.g-box.tv/map. Here’s a cut back version of the data returned when tested.

GET /map HTTP/1.1
Host: metip.g-box.tv
User-Agent: Gorillabox/2011031601.1.3 CFNetwork/485.13.9 Darwin/11.0.0
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
HTTP/1.1 200 OK
Date: Mon, 15 Aug 2011 18:49:57 GMT
Server: Apache/2.2.12 (Ubuntu)
Content-Length: 34217
X-Catalyst: 5.80031
Connection: close
Content-Type: application/xml
<?xml version="1.0" encoding="UTF-8"?>
<xml last_updated="15/08/2011 18:45">
<forecast_text>
<item display="Headline:" index="0">Outbreaks of rain spreading north, heaviest towards the west.</item>
<item display="This Evening and Tonight:" index="1">Outbreaks of rain spreading north, with the far northeast of Scotland remaining dry. Heaviest bursts are expected across northwestern areas with extensive hill fog developing later. Very little rain reaching southeastern parts. Brisk winds across the southwest.</item>
<item display="Tuesday:" index="2">Cloudy with occasionally rain, heavy at times over northern UK. Generally drier towards the southeast, but a chance of sharp showers during the afternoon. Brisk winds.</item>
<item display="Outlook for Wednesday to Friday:" index="3">Rain or showers across northwestern
and southern parts of the UK, possibly thundery at times across the far south. The best of the drier and brighter weather across central parts.</item>
</forecast_text>
<region region_name="SW Scotland, Lothian">
<site site_name="Galashiels" xpos="159" ypos="108">
<view type="map">
<data display="Monday 21:00" index="0" temperature="12" weather_code="2" wind_direction="SW" wind_speed="8" />
<data display="Tuesday 00:00" index="1" temperature="12" weather_code="7" wind_direction="S" wind_speed="6" />
<data display="Tuesday 03:00" index="2" temperature="11" weather_code="15" wind_direction="SE" wind_speed="6" />
<data display="Tuesday 06:00" index="3" temperature="11" weather_code="15" wind_direction="SE" wind_speed="8" />
<data display="Tuesday 09:00" index="4" temperature="12" weather_code="7" wind_direction="SE" wind_speed="8" />
<data display="Tuesday 12:00" index="5" temperature="14" weather_code="8" wind_direction="SE" wind_speed="7" />
<data display="Tuesday 15:00" index="6" temperature="16" weather_code="7" wind_direction="SW" wind_speed="9" />
<data display="Tuesday 18:00" index="7" temperature="14" weather_code="3" wind_direction="W" wind_speed="14" />
<data display="Tuesday 21:00" index="8" temperature="12" weather_code="2" wind_direc
tion="W" wind_speed="14" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="2" wind_direction="W" wind_speed="14" />
<data display="Wednesday" index="10" temperature="17" weather_code="3" wind_direction="NW" wind_speed="8" />
<data display="Wednesday Night" index="11" temper
ature="10" weather_code="2" wind_direction="N" wind_speed="4" />
<data display="Thursday" index="12" temperature="15" weather_code="14" wind_direction="SE" wind_speed="5" />
<data display="Thursday Night" index="13" temperature="9" weather_code="2" wind_direction="W" wind_speed="7" />
<data display="Friday" index="14" temperature="16" weather_code="3" wind_direction="W" wind_speed="10" />
<data display="Friday Night" index="15" temperature="11" weather_code="9" wind_direction="SW" wind_speed="10" />
</view>
</site>
</region>
<region region_name="East England">
<site site_name="Norwich" xpos="249" ypos="214">
<view type="map">
<data display="Monday 21:00" index="0" temperature="18" weather_code="2" wind_direction="SW" wind_speed="5" />
<data display="Tuesday 00:00" index="1" temperature="17" weather_code="12" wind_direction="SW" wind_speed="6" />
<data display="Tuesday 03:00" index="2" temperature="15" weather_code="12" wind_direction="SW" wind_speed="4" />
<data display="Tuesday 06:00" index="3" temperature="14" weather_code="7" wind_direction="SW" wind_speed="6" />
<data display="Tuesday 09:00" index="4" temperature="16" weather_code="7" wind_direction="SW" wind_speed="11" />
<data display="Tuesday 12:00" index="5" temperat
ure="18" weather_code="7" wind_direction="SW" wind_speed="13" />
<data display="Tuesday 15:00" index="6" temperature="19" weather_code="7" wind_direction="SW" wind_speed="13" />
<data display="Tuesday 18:00" index="7" temperature="20" weather_code="3" wind_direction="SW" wind_speed="12" />
<data display="Tuesday 21:00" index="8" temperature="18" weather_code="2" wind_direction="SW" wind_speed="9" />
<data display="Wednesday 00:00" index="9" temperature="16" weather_code="2" wind_direction="NW" wind_speed="9" />
<data display="Wednesday" index="10" temperature="20" weather_code="3" wind_direction="NW" wind_speed="8" />
<data display="Wednesday Night" index="11" temperature="13" weather_code="7" wind_direction="NE" wind_speed="5" />
<data display="Thursday" index="12" temperature="17" weather_code="10" wind_direction="NE" wind_speed="9" />
<data display="Thursday Night" index="13" temperature="13" weather_code="7" wind_direction="NW" wind_speed="8"
/>
<data display="Friday" index="14" temperature="19" weather_code="1" wind_direction="NW" wind_speed="12" />
<data display="Friday Night" index="15" temperature="12" weather_code="0" wind_direction="S" wind_speed="9" />
</view>
</site>
</region>
<region region_name="East Midlands">
<site
site_name="Boston" xpos="216" ypos="189">
<view type="map">
<data display="Monday 21:00" index="0" temperature="18" weather_code="2" wind_direction="SW" wind_speed="5" />
<data display="Tuesday 00:00" index="1" temperature="16" weather_code="9" wind_direction="SW" wind_speed="6" />
<data display="Tuesday 03:00" index="2" temperature="14" weather_code="12" wind_direction="S" wind_speed="7" />
<data display="Tuesday 06:00" index="3" temperature="14" weather_code="15" wind_direction="S" wind_speed="10" />
<data display="Tuesday 09:00" index="4" temperature="15" weather_code="12" wind_direction="S" wind_speed="12" />
<data display="Tuesday 12:00" index="5" temperature="18" weather_code="7" wind_direction="SW" wind_speed="15" />
<data display="Tuesday 15:00" index="6" temperature="21" weather_code="3" wind_direction="SW" wind_speed="17" />
<data display="Tuesday 18:00" index="7" temperature="20" weather_code="1" wind_direction="W" wind_speed="1
3" />
<data display="Tuesday 21:00" index="8" temperature="16" weather_code="2" wind_direction="W" wind_speed="10" />
<data display="Wednesday 00:00" index="9" temperature="14" weather_code="0" wind_direction="W" wind_speed="9" />
<data display="Wednesday" index="10" temperature="20" weather_code="3" wind_direction="NW" wind_speed="6" />
<data display="Wednesday Night" index="11" temperature="14" weather_code="12" wind_direction="E" wind_speed="6" />
<data display="Thursday" index="12" temperature="18" weather_code="12" wind_direction="NE" wind_speed="7" />
<data display="Thursday Night" index="13" temperature="11" weather_code="12" wind_direction="NW" wind_speed="7" />
<data display="Friday" index="14" temperature="20" weather_code="3" wind_direction="NW" wind_speed="11" />
<data display="Friday Night" index="15" temperature="12" weather_code="2" wind_direction="S" wind_speed="7" />
</view>
</site>
</region>
<region region_name="Grampian">
<site site_name="Fraserburgh" xpos="180" ypos="35">
<view type="map">
<data display="Monday 21:00" index="0" temperature="14" weather_code="2" wind_direction="W" wind_speed="2" />
<data display="Tuesday 00:00" index="1" temperature="13" weather_code="7" wind_direction="S" wind_speed="3" /
>
<data display="Tuesday 03:00" index="2" temperature="12" weather_code="7" wind_direction="S" wind_speed="4" />
<data display="Tuesday 06:00" index="3" temperature="12" weather_code="3" wind_direction="SE" wind_speed="7" />
<data display="Tuesday 09:00" index="4" temperature="14" weather_code="7" wind_direction="SE" wind_speed="10" />
<data display="Tuesday 12:00" index="5" temperature="14" weather_code="7" wind_direction="SE" wind_speed="13" />
<data display="Tuesday 15:00" index="6" temperature="14" weather_code="12" wind_direction="SE" wind_speed="14" />
<data display="Tuesday 18:00" index="7" temperature="13" weather_code="12" wind_direction="E" wind_speed="11" />
<data display="Tuesday 21:00" index="8" temperature="13" weather_code="11" wind_direction="E" wind_speed="10" />
<data display="Wednesday 00:00" index="9" temperature="13" weather_code="12" wind_direction="E" wind_speed="9" />
<data display="Wednesday" index="10" temperature="14" weather_code="12" wind_direction="NW" wind_speed="14" />
<data display="Wednesday Night" index="11" temperature="11" weather_code="2" wind_direction="NW" wind_speed="4" />
<data display="Thursday" index="12" temperature="14" weather_code="7" wind_direction="E" wind_speed="4" />
<data display="Thursday Night" index="13" temperature="12" weather_code="9" wind_direction="N" wind_speed="6" />
<data display="Friday" index="14" temperature="14" weather_code="10" wind_direction="NW" wind_speed="10" />
<data display="Friday Night" index="15" temperature="12" weather_code="7" wind_direction="SE" wind_sp
eed="13" />
</view>
</site>
</region>
<region region_name="Highlands &amp; Eilean S">
<site site_name="Fort William" xpos="110" ypos="39">
<view type="map">
<data display="Monday 21:00" index="0" temperature="13" weather_code="2" wind_direction="SE" wind_speed="3" />
<data display="Tuesday 00:00" index="1" temperature="12" weather_code="2" wind_direction="NE" wind_speed="3" />
<data display="Tuesday 03:00" index="2" temperature="12" weather_code="12" wind_direction="NE" wind_speed="4" />
<data display="Tuesday 06:00" index="3" temperature="12" weather_code="15" wind_direction="N" wind_speed="5" />
<data display="Tuesday 09:00" index="4" temperature="13" weather_code="15" wind_direction="NE" wind_speed="5" />
<data display="Tuesday 12:00" index="5" temperature="13" weather_code="15" wind_direction="N" wind_speed="3" />
<data display="Tuesday 15:00" index="6" temperature="13" weather_code="15" wind_direction="W" wind_speed="4" />
<data display="Tuesday 18:00" index="7" temperature="13" weather_code="15" wind_direction="W" wind_speed="12" />
<data display="Tuesday 21:00" index="8" temperature="12" weather_code="7" wind_direction="SW" wind_speed="9" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="7" wind_direction="SW" wind_speed="8" />
<data display="Wednesday" index="10" temperature="16" weather_code="3" wind_direction="NW" wind_speed="9" />
<data display="Wednesday Night" index="11" temperature="10" weather_code="2" wind_direction="N" wind_speed="2" />
<data display="Thursday" index="12" temperature="14" weather_code="10" wind_direction="N" wind_speed="7" />
<data display="Thursday Night" index="13" temperature="10" weather_code="2" wind_direction="NW" wind_speed="5" />
<data display="Friday" index="14" temperature="16" weather_code="12" wind_direction="SW" wind_speed="9" />
<data display="Friday Night" index="15" temperature="13" weather_code="13" wind_direction="S" wind_speed="16" />
</view>
</site>
</region>
<region region_name="North East England">
<site site_name="Newcastle International" xpos="197" ypos="119">
<view type="map">
<data display="Monday 21:00" index="0" temperature="15" weather_code="0" wind_direction="SW" wind_speed="5" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="7" wind_direction="S" wind_speed="6" />
<data display="Tuesday 03:00" index="2" temperature="12" weather_code="12" wind_direction="S" wind_speed="6" />
<data display="Tuesday 06:00" index="3" temperature="12"
weather_code="12" wind_direction="SE" wind_speed="7" />
<data display="Tuesday 09:00" index="4" temperature="13" weather_code="15" wind_direction="S" wind_speed="9" />
<data display="Tuesday 12:00" index="5" temperature="15" weather_code="7" wind_direction="S" wind_speed="9" />
<data display="Tuesday 15:00" index="6" temperature="19" weather_code="3" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 18:00" index="7" temperature="16" weather_code="1" wind_direction="W" wind_speed="14" />
<data display="Tuesday 21:00" index="8" temperature="13" weather_code="0" wind_direction="W" wind_speed="13" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="0" wind_direction="W" wind_speed="13" />
<data display="Wednesday" index="10" temperature="16" weather_code="7" wind_direction="N" wind_speed="8" />
<data display="Wednesday Night" index="11" temperature="11" weather_code="7" wind_direction="NW" wind_speed="3" />
<data display="Thursday" index="12" temperature="15" weather_code="10" wind_direction="SE" wind_speed="5" />
<data display="Thursday Night" index="13" temperature="9" weather_code="0" wind_direction="W" wind_speed="8" />
<data display="Friday" index="14" temperature="18" weather_code="1" wind_direction="NW" wind_speed="10" />
<data display="Friday Night" index="15" temperature="12" weather_code="7" wind_direction="SW" wind_speed="8" />
</view>
</site>
</region>
<region region_name="Northern Ireland">
<site site_name="Belfast" xpos="89" ypos="134">
<view type="map">
<data display="Monday 21:00" index="0" temperature="14" weather_code="15" wind_direction="SE" wind_speed="5" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="9" wind_direction="S" wind_speed="8" />
<data display="Tuesday 03:00" index="2" temperature="14" weather_code="7" wind_direction="S" wind_speed="6" />
<data display="Tuesday 06:00" index="3" temperature="14" weather_code="11" wind_direction="S" wind_speed="5" />
<data display="Tuesday 09:00" index="4" temperature="15" weather_code="11" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 12:00" index="5" temperature="16" weather_code="3" wind_direction="W" wind_speed="16" />
<data display="Tuesday 15:00" index="6" temperature="17" weather_code="1" wind_direction="NW" wind_speed="16" />
<data display="Tuesday 18:00" index="7" temperature="15" weather_code="1" wind_direction="NW" wind_speed="14" />
<data display="Tuesday 21:00" index="8" temperature="13" weather_code="0" wind_direction="NW" wind_speed="9" />
<data display="Wednesday 00:00" index="9" temperature="11" weather_code="2" wind_direction="W" wind_speed="6" />
<data display="Wednesday" index="10" temperature="17" weather_code="10" wind_direction="NW" wind_speed="5" />
<data display="Wednesday Night" index="11" temperature="11" weather_code="7" wind_direction="N" wind_speed="2" />
<data display="Thursday" index="12" temperature="15" weather_code="10" wind_direction="NW" wind_speed="4" />
<data display="Thursday Night" index="13" temperature="9" weather_code="0" wind_direction="W" wind_speed="5" />
<data display="Friday" index="14" temperature="19" weather_code="10" wind_direction="SW" wind_speed="9" />
<data display="Friday Night" index="15" temperature="13" weather_code="13" wind_direction="S" wind_speed="16" />
</view>
</site>
</region>
<region region_name="North West England">
<site site_name="Blackpool" xpos="161" ypos="157">
<view type="map"
>
<data display="Monday 21:00" index="0" temperature="15" weather_code="9" wind_direction="SW" wind_speed="11" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="15" wind_direction="S" wind_speed="11" />
<data display="Tuesday 03:00" index="2" temperature="14" weather_code="15" wind_direction="SE" wind_speed="13" />
<data display="Tuesday 06:00" index="3" temperature="13" weather_code="15" wind_direction="SE" wind_speed="18" />
<data display="Tuesday 09:00" index="4" temperature="15" weather_code="15" wind_direction="S" wind_speed="16" />
<data display="Tuesday 12:00" index="5" temperature="16" weather_code="11" wind_direction="SW" wind_speed="20" />
<data display="Tuesday 15:00" index="6" temperature="16" weather_code="3" wind_direction="W" wind_speed="21" />
<data display="Tuesday 18:00" index="7" temperature="16" weather_code="7" wind_direction="NW" wind_speed="17" />
<data display="Tuesday 21:00" index="8" temperature="15" weather_code="2" wind_direction="NW" wind_speed="18" />
<data display="Wednesday 00:00" index="9" temperature="14" weather_code="2" wind_direction="NW" wind_speed="17" />
<data display="Wednesday" index="10" temperature="16" weather_code="7" wind_direction="NW" wind_speed="11" />
<data display="Wednesday Night" index="11" temperature="12" weather_code="7" wind_direction="N" wind_speed="4" />
<data display="Thursday" index="12" temperature="16" weather_code="3" wind_direction="NW" wind_speed="8" />
<data display="Thursday Night" index="13" temperature="13" weather_code="0" wind_direction="NW" wind_speed="12" />
<data display="Friday" index="14" temperature="16" weather_code="1" wind_direction="W" wind_speed="11" />
<data display="Friday Night" index="15" temperature="13" weather_code="12" wind_direction="SW" wind_speed="14" />
</view>
</site>
</region>
<region region_name="Orkney &amp; Shetland">
<site site_name="Lerwick" xpos="247" ypos="25">
<view type="map">
<data display="Monday 21:00" index="0" temperature="12" weather_code="2" wind_direction="SW" wind_speed="9" />
<data display="Tuesday 00:00" index="1" temperature="11" weather_code="2" wind_direction="SW" wind_speed="9" />
<data display="Tuesday 03:00" index="2" temperature="11" weather_code="7" wind_direction="SW" wind_speed="8" />
<data display="Tuesday 06:00" index="3" temperature="11" weather_code="7" wind_direction="S" wind_speed="4" />
<data display="Tuesday 09:00" index="4" temperature="13" weather_code="3" wind_direction="SE" wind_speed="9" />
<data display="Tuesday 12:00" index="5" temperature="14" weather_code="3" wind_direction="SE" wind_speed="11" />
<data display="Tuesday 15:00" index="6" temperature="14" weather_code="3" wind_direction="SE" wind_speed="10" />
<data display="Tuesday 18:00" index="7" temperature="13" weather_code="3" wind_direction="E" wind_speed="9" />
<data display="Tuesday 21:00" index="8" temperature="12" weather_code="2" wind_direction="E" wind_speed="7" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="2" wind_direction="E" wind_speed="6" />
<data display="Wednesday" index="10" temperature="15" weather_code="10" wind_direction="NE" wind_speed="8" />
<data display="Wednesday Night" index="11" temperature="10" weather_code="2" wind_direction="W" wind_speed="3" />
<data display="Thursday" index="12" temperature="13" weather_code="10" wind_direction="NW" wind_speed="7" />
<data display="Thursday Night" index="13" temperature="9" weather_code="7" wind_direction="N" wind_speed="6" />
<data display="Friday" index="14" temperature="14" weather_code="3" wind_direction="NW" wind_speed="13" />
<data display="Friday Night" index="15" temperature="7" weather_code="2" wind_direction="SE" wind_speed="9" />
</view>
</site>
</region>
<region region_name="South East England">
<site site_name="London" xpos="219" ypos="250">
<view type="map">
<data display="Monday 21:00" index="0" temperature="18" weather_code="12" wind_direction="W" wind_speed="10" />
<data display="Tuesday 00:00" index="1" temperature="16" weather_code="7" wind_di
rection="SW" wind_speed="7" />
<data display="Tuesday 03:00" index="2" temperature="15" weather_code="2" wind_direction="SW" wind_speed="7" />
<data display="Tuesday 06:00" index="3" temperature="15" weather_code="7" wind_direction="SW" wind_speed="7" />
<data display="Tuesday 09:00" index="4" temperature="16" weather_code="8" wind_direction="SW" wind_speed="9" />
<data display="Tuesday 12:00" index="5" temperature="18" weather_code="8" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 15:00" index="6" temperature="19" weather_code="8" wind_direction="SW" wind_speed="11" />
<data display="Tuesday 18:00" index="7" temperature="19" weather_code="7" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 21:00" index="8" temperature="18" weather_code="2" wind_direction="SW" wind_speed="6" />
<data display="Wednesday 00:00" index="9" temperature="16" weather_code="2" wind_direction="W" wind_speed="5" />
<data display="Wednesday" index="10" temperature="22" weather_code="3" wind_direction="NE" wind_speed="3" />
<data display="Wednesday Night" index="11" temperature="14" weather_code="7" wind_direction="E" wind_speed="6" />
<data display="Thursday" index="12" temperature="17" weather_code="14" wind_direction="NE" wind_speed="7"
/>
<data display="Thursday Night" index="13" temperature="12" weather_code="9" wind_direction="NW" wind_speed="5" />
<data display="Friday" index="14" temperature="21" weather_code="1" wind_direction="NW" wind_speed="8" />
<data display="Friday Night" index="15" temperature="13" weather_code="0" wind_direction="SW" wind_speed="5" />
</view>
</site>
</region>
<region region_name="Strathclyde">
<site site_name="Glasgow International" xpos="116" ypos="99">
<view type="map">
<data display="Monday 21:00" index="0" temperature="14" weather_code="2" wind_direction="E" wind_speed="3" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="7" wind_direction="SE" wind_speed="4" />
<data display="Tuesday 03:00" index="2" temperature="13" weather_code="15" wind_direction="E" wind_speed="5" />
<data display="Tuesday 06:00" index="3" temperature="12" weather_code="15" wind_direction="E" wind_speed="7" />
<data display="Tuesday 09:00" index="4" temperature="13" weather_code="15" wind_direction="E" wind_speed="7" />
<data display="Tuesday 12:00" index="5" temperature="14" weather_code="15" wind_direction="E" wind_speed="5" />
<data display="Tuesday 15:00" index="6" temperature="15" weather_code="10" wind_direction="W" wind_speed="11" />
<data display="Tuesday 18:00" index="7" temperature="14" weather_code="8" wind_direction="W" wind_speed="13" />
<data display="Tuesday 21:00" index="8" temperature="13" weather_code="2" wind_direction="W" wind_speed="12" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="0" wind_direction="W" wind_speed="11" />
<data display="Wednesday" index="10" temperature="18" weather_code="3" wind_direction="NW" wind_speed="7" />
<data display="Wednesday Night" index="11" temperature="10" weather_code="2" wind_direction="NW" wind_speed="3" />
<data display="Thursday" index="12" temperature="16" weather_code="3" wind_direction="W" wind_speed="7" />
<data display="Thursday Night" index="13" temperature="9" weather_code="2" wind_direction="W" wind_speed="6" />
<data display="Friday" index="14" temperature="17" weather_code="3" wind_direction="W" wind_speed="10" />
<data display="Friday Night" index="15" temperature="12" weather_code="9" wind_direction="S" wind_speed="10" />
</view>
</site>
</region>
<region region_name="South West England">
<site site_name="Exeter" xpos="157" ypos="266">
<view type="map">
<data display="Monday 21:00" index="0" temperature="15" weather_code="7" wind_direction="S" wind_speed="5" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="7" wind_direction="S" wind_speed="8" />
<data display="Tuesday 03:00" index="2" temperature="14" weather_code="8" wind_direction="S" wind_speed="8" />
<data display="Tuesday 06:00" index="3" temperature="15" weather_code="7" wind_direction="SW" wind_speed="9" />
<data display="Tuesday 09:00" index="4" temperature="17" weather_code="7" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 12:00" index="5" temperature="20" weather_code="3" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 15:00" index="6" temperature="21" weather_code="7" wind_direction="W" wind_speed="11" />
<data display="Tuesday 18:00" index="7" temperature="19" weather_code="1" wind_direction="NW" wind_speed="10" />
<data display="Tuesday 21:00" index="8" temperature="15" weather_code="0" wind_direction="NW" wind_speed="6" />
<data display="Wednesday 00:00" index="9"
temperature="14" weather_code="2" wind_direction="NW" wind_speed="5" />
<data display="Wednesday" index="10" temperature="18" weather_code="7" wind_direction="E" wind_speed="8" />
<data display="Wednesday Night" index="11" temperature="13" weather_code="9" wind_direction="NE" wind_speed="9" />
<data display="Thursday" index="12" temperature="18" weather_code="3" wind_direction="NE" wind_speed="10" />
<data display="Thursday Night" index="13" temperature="11" weather_code="2" wind_direction="NW" wind_speed="8" />
<data display="Friday" index="14" temperature="21" weather_code="1" wind_direction="W" wind_speed="4" />
<data display="Friday Night" index="15" temperature="12" weather_code="0" wind_direction="SW" wind_speed="6" />
</view>
</site>
</region>
<region region_name="Central, Tayside &amp; F">
<site site_name="Perth" xpos="154" ypos="70">
<view type="map">
<data display="Monday 21:00" index="0" temperature="14" weather_code="2" wind_direction="SW" wind_speed="7" />
<data display="Tuesday 00:00" index="1" temperature="12" weather_code="7" wind_direction="E" wind_speed="2" />
<data display="Tuesday 03:00" index="2" temperature="12" weather_code="7" wind_direction="E" wind_speed="4" />
<data display="Tuesday 06:00" index="
3" temperature="12" weather_code="7" wind_direction="E" wind_speed="6" />
<data display="Tuesday 09:00" index="4" temperature="13" weather_code="7" wind_direction="E" wind_speed="8" />
<data display="Tuesday 12:00" index="5" temperature="14" weather_code="15" wind_direction="E" wind_speed="7" />
<data display="Tuesday 15:00" index="6" temperature="14" weather_code="12" wind_direction="NE" wind_speed="4" />
<data display="Tuesday 18:00" index="7" temperature="14" weather_code="7" wind_direction="W" wind_speed="7" />
<data display="Tuesday 21:00" index="8" temperature="13" weather_code="2" wind_direction="W" wind_speed="9" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="2" wind_direction="W" wind_speed="8" />
<data display="Wednesday" index="10" temperature="18" weather_code="3" wind_direction="NW" wind_speed="5" />
<data display="Wednesday Night" index="11" temperature="11" weather_code="2" wind_direction="E" wind_speed="4" />
<data display="Thursday" index="12" temperature="14" weather_code="14" wind_direction="SE" wind_speed="7" />
<data display="Thursday Night" index="13" temperature="10" weather_code="2" wind_direction="W" wind_speed="4" />
<data display="Friday" index="14" temperature="17" weather_code="3" wind_direction="W" wind_speed="8" />
<data display="Friday Night" index="15" temperature="12" weather_code="9" wind_direction="S" wind_speed="8" />
</view>
</site>
</region>
<region region_name="Wales">
<site site_name="Carmarthen" xpos="137" ypos="217">
<view type="map">
<data display="Monday 21:00" index="0" temperature="14" weather_code="13" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 00:00" index="1" temperature="15" weather_code="12" wind_direction="S" wind_speed="13" />
<data display="Tuesday 03:00" index="2" temperature="15" weather_code="15" wind_direction="S" wind_speed="16" />
<data display="Tuesday 06:00" index="3" temperature="16" weather_code="12" wind_direction="SW" wind_speed="13" />
<data display="Tuesday 09:00" index="4" temperature="16" weather_code="7" wind_direction="SW" wind_speed="10" />
<data display="Tuesday 12:00" index="5" temperature="17" weather_code="8" wind_direction="SW" wind_speed="13" />
<data display="Tuesday 15:00" index="6" temperature="18" weather_code="7" wind_direction="NW" wind_speed="11" />
<data display="Tuesday 18:00" index="7" temperature="17" weather_code="3" wind_direction="N" wind_speed="8" />
<data display="Tuesday 21:00" index="8" temperature="14" weather_code="2" wind_direction="W" wind_speed="5" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="0" wind_direction="NE" wind_speed="3" />
<data display="Wednesday" index="10" temperature="17" weather_code="7" wind_direction="NE" wind_speed="4" />
<data display="Wednesday Night" inde
x="11" temperature="12" weather_code="7" wind_direction="NE" wind_speed="5" />
<data display="Thursday" index="12" temperature="17" weather_code="10" wind_direction="N" wind_speed="6" />
<data display="Thursday Night" index="13" temperature="9" weather_code="0" wind_direction="NW" wind_speed="6" />
<data display="Friday" index="14" temperature="18" weather_code="1" wind_direction="SW" wind_speed="8" />
<data display="Friday Night" index="15" temperature="15" weather_code="2" wind_direction="SW" wind_speed="14" />
</view>
</site>
</region>
<region region_name="West Midlands">
<site site_name="Birmingham" xpos="182" ypos="210">
<view type="map">
<data display="Monday 21:00" index="0" temperature="15" weather_code="9" wind_direction="SW" wind_speed="7" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="9" wind_direction="S" wind_speed="7" />
<data display="Tuesday 03:00" index="2" temperature="13" weather_code="7" wind_direction="SW" wind_speed="8" />
<data display="Tuesday 06:00" index="3" temperature="13" weather_code="7" wind_direction="S" wind_speed="10" />
<data display="Tuesday 09:00" index="4" temperature="15" weather_code="7" wind_direction="SW" wind_speed="12" />
<data display="Tuesday 12:00" ind
ex="5" temperature="19" weather_code="3" wind_direction="SW" wind_speed="14" />
<data display="Tuesday 15:00" index="6" temperature="20" weather_code="3" wind_direction="SW" wind_speed="14" />
<data display="Tuesday 18:00" index="7" temperature="19" weather_code="3" wind_direction="W" wind_speed="12" />
<data display="Tuesday 21:00" index="8" temperature="16" weather_code="2" wind_direction="NW" wind_speed="9" />
<data display="Wednesday 00:00" index="9" temperature="13" weather_code="0" wind_direction="NW" wind_speed="6" />
<data display="Wednesday" index="10" temperature="18" weather_code="7" wind_direction="N" wind_speed="6" />
<data display="Wednesday Night" index="11" temperature="12" weather_code="12" wind_direction="N" wind_speed="6" />
<data display="Thursday" index="12" temperature="17" weather_code="12" wind_direction="N" wind_speed="4" />
<data display="Thursday Night" index="13" temperature="10" weather_code="2" wind_direction="NW" wind_speed="7" />
<data display="Friday" index="14" temperature="20" weather_code="1" wind_direction="W" wind_speed="8" />
<data display="Friday Night" index="15" temperature="13" weather_code="2" wind_direction="SW" wind_speed="6" />
</view>
</site>
</region>
<region region_name="Yorkshire &amp; Humber">
<site site_name="York" xpos="209" ypos="154">
<view type="map">
<data display="Monday 21:00" index="0" temperature="15" weather_code="2" wind_direction="NW" wind_speed="3" />
<data display="Tuesday 00:00" index="1" temperature="14" weather_code="12" wind_direction="SE" wind_speed="3" />
<data display="Tuesday 03:00" index="2" temperature="13" weather_code="15" wind_direction="SE" wind_speed="5" />
<data display="Tuesday 06:00" index="3" temperature="14" weather_code="14" wind_direction="S" wind_speed="8" />
<data display="Tuesday 09:00" index="4" temperature="14" weather_code="12" wind_direction="S" wind_speed="12" />
<data display="Tuesday 12:00" index="5" temperature="16" weather_code="11" wind_direction="S" wind_speed="12" />
<data display="Tuesday 15:00" index="6" temperature="19" weather_code="3" wind_direction="SW" wind_speed="13" />
<data display="Tuesday 18:00" index="7" temperature="17" weather_code="1" wind_direction="W" wind_speed="15" />
<data display="Tuesday 21:00" index="8" temperature="14" weather_code="0" wind_direction="W" wind_speed="12" />
<data display="Wednesday 00:00" index="9" temperature="12" weather_code="0" wind_direction="W" wind_speed="10" />
<data display="Wednesday" index="10" temperature=
"19" weather_code="3" wind_direction="NW" wind_speed="7" />
<data display="Wednesday Night" index="11" temperature="13" weather_code="7" wind_direction="NW" wind_speed="4" />
<data display="Thursday" index="12" temperature="17" weather_code="12" wind_direction="S" wind_speed="4" />
<data display="Thursday Night" index="13" temperature="10" weather_code="9" wind_direction="W" wind_speed="6" />
<data display="Friday" index="14" temperature="19" weather_code="1" wind_direction="W" wind_speed="11" />
<data display="Friday Night" index="15" temperature="13" weather_code="7" wind_direction="SW" wind_speed="5" />
</view>
</site>
</region>
</xml>

Data

The data page shows either a radar image or a satellite image and shows the last 2 hours worth of data in 4 half hour images. The images can be animated to be shown as an animation when the play icon is pressed, or you can swipe left or right to alternate between the radar and satellite views.

Met office app data screen

Behind the scenes a query is sent to http://metip.g-box.tv/data. There is no query string as this is for the whole of the country not just a specific area.

The returned XML shows the images are all date and time stamped, so there is a possibility of a lot of historical weather images being stored in an machine accessible way. Indeed, by changing the value of the month in the image filename, it would appear that at least 6 months worth of images have been stored. The format appears to be either UKRadarYYYYMMDDHHmm.jpg for radar images, or EuropeSatYYYYMMDDHHmm.jpg for satellite images. For example, http://image.metip.g-box.tv:80/UKRadar201108151600.jpg

GET /data HTTP/1.1
Host: metip.g-box.tv
User-Agent: Gorillabox/2011031601.1.3 CFNetwork/485.13.9 Darwin/11.0.0
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
HTTP/1.1 200 OK
Date: Mon, 15 Aug 2011 18:43:29 GMT
Server: Apache/2.2.12 (Ubuntu)
Content-Length: 1006
X-Catalyst: 5.80031
X-PageCache: Catalyst
Connection: close
Content-Type: application/xml
<?xml version="1.0" encoding="UTF-8"?>
<xml last_updated="15/08/2011 18:00">
<radar>
<image display="Monday 17:00" index="0" url="http://image.metip.g-box.tv:80/UKRadar201108151600.jpg" />
<image display="Monday 17:30" index="1" url="http://image.metip.g-box.tv:80/UKRadar201108151630.jpg" />
<image display="Monday 18:00" index="2" url="http://image.metip.g-box.tv:80/UKRadar201108151700.jpg" />
<image display="Monday 18:30" index="3" url="http://image.metip.g-box.tv:80/UKRadar201108151730.jpg" />
</radar>
<satellite>
<image display="Monday 17:00" index="0" url="http://image.metip.g-box.tv:80/EuropeSat201108151600.jpg" />
<image display="Monday 17:30" index="1" url="http://image.metip.g-box.tv:80/EuropeSat201108151630.jpg" />
<image display="Monday 18:00" index="2" url="http://
image.metip.g-box.tv:80/EuropeSat201108151700.jpg" />
<image display="Monday 18:30" index="3" url="http://image.metip.g-box.tv:80/EuropeSat201108151730.jpg" />
</satellite>
</xml>

Search

The final screen allows you to change the latitude and longitude you want the weather data for by searching for different areas.

Summary

This is a very well thought out app. The majority of the work is handled by the web service with app just handling the display. The web service appears to be custom written by Gorillabox, and is served from a server with their domain name. There doesn’t seem to be any authentication so this API is open to anyone, however the app’s terms and conditions would seem to imply this shouldn’t be the case.

This post applies to version 1.3 of the Met Office iPhone app.

Disabling The Zend Framework ViewRenderer

There are times when using the Zend Framework that you don’t want a view to render.

For example, you may be generating a feed programaticaly, or you may be using a templating engine such as Twig for some or all paths.

By default, the front controller enables the ViewRenderer action helper. It is the job of the ViewRenderer to inject the view object into the controller and to automatically render the view. The idea is that you don’t need to worry about manually instantiating view objects in your controller, the helper does it for you.

It’s actually very simple to disable this behaviour, and there are several ways to do it.

Firstly, if you want to disable this functionality across your application, you could use the following in the application.ini file…

resources.frontController.noViewRenderer = true

This can also be set programatically…

Zend_Controller_Front::getInstance()-&gt;setParam('noViewRenderer', true);

A better approach would be to simply remove the ViewRenderer helper.

$this->_helper->removeHelper('viewRenderer');

If you don’t want the ViewRenderer disabled across your entire application, you can set it locally in a controller…

$this->_helper->viewRenderer->setNoRender(true);

Using CSS3 On Internet Explorer With PIE

Until a few hours ago some parts of this website used boring old images as buttons, however I’ve now started to bring this website into 2011 and swap them out for something far cooler and semantically better. These are now links styled up with CSS3.

The buttons had rounded corners and a drop shadow, easy to create using tools like Adobe’s Photoshop, but a pain to do before CSS3. With CSS3, we can use the following to add the curved border and drop shadow.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;

OK, we’ve had to use a few custom extensions for Mozilla and Webkit based browsers, but it works. However, as always, Microsoft’s Internet Explorer doesn’t want to play nicely and isn’t able to support these features. There are a few work arounds, but at present the best seems to be PIE – Progressive Internet Explorer.

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. At present it has full or partial support for border-radius, box-shadow, border-image, multiple background images and linear gradient background images.

It’s easy to add PIE as an HTML Component (HTC), you just need to reference it in your CSS.

behaviour: url(PIE.htc);

As if by magic, those CSS3 features will start working in Internet Explorer.

You will need to download PIE and host it somewhere. You will also need to make sure that your web server is setup to serve HTC files with the content-type header of “text/x-component”. If you use Apache, you can use the following line in your config, or in a .htaccess file.

AddType text/x-component .htc

Access The Bootstrap From A Zend Framework Action Controller

When working with the Zend Framework you often need access to the Bootstrap to fetch resources. The classic way to get the bootstrap in most of the examples for the Zend Framework is like this…

$bootstrap = $this->getBootstrap();

However, this method is not globally available, so from an action controller for example, that method would fail. There is an alternative way to get access to the Bootstrap.

$bootstrap = $this->getInvokeArg('bootstrap');

This works because Zend_Application_Bootstrap_Bootstrap registers itself as the front controller parameter bootstrap, which lets us access it from the router, dispatcher, plugins and action controllers.

So, if I had a twig resource I wanted to access from an action controller, I could use the following code…

$bootstrap = $this->getInvokeArg('bootstrap');
$twig = $bootstrap->getResource('twig');

or by chaining accessors, I could reduce this to one line…

$twig = $this->getInvokeArg('bootstrap')->getResource('twig');

For more information, read Zend Framework’s Theory of Operation.

Using A T-Mobile Web ‘N’ Walk III USB Dongle On A Mac

This post is copied almost word for word from a discussion on the T-Mobile support forums with the original answer supplied by Chris Dobson – FIXED! Web’n’ Walk III stick (Huawei E170) for Mac OS X Snow Leopard. I have copied it here as content on forums has a nasty habit of disappearing, and have tweaked it in a couple of places. I can confirm it works with my Web ‘n’ Walk III stick on my 2011 Macbook Pro with Mac OS X 10.6.7 . Now over to Chris…

I’ve finally found a fix for using your Web’n’ Walk Stick in Snow Leopard. It’s a bit long winded but I’ll try and explain as best I can, but it will do until there is an official fix. Make sure your dongle is not plugged in when you start. Please be aware that t-mobile is not responsible if you mess something up, I am just a customer offering advice. Also you need to be running the 32-bit kernel mode for this to work.

Note: You can check if you are running in 32 or 64 bit mode by clicking the Apple logo on the top left of the menu bar, then More Info…, then Software. If the line “64-bit Kernel and Extensions” says “Yes” you are in 64bit mode, if it says “No” you are in 32bit mode. To change to 32 bit mode, you need to power on your Mac while holding down the 3 and 2 keys. To change to 64 bit mode hold down 6 and 4 during power on.

Download: www.t-mobile.at/officetogoSW/MM_2_0_3.dmg

Double click on the white ‘drive’ icon that will appear on your desktop and look for the package called ‘MM 2.0.3 Intel… Right click this software package and choose ‘show package contents’. Navigate to contents>resources and then double click the file named HuaweiDataCardDriver(2.6)…. Then proceed to install this as you would with any other software.

Plug in your dongle, and you will be prompted to enter the ‘Network Preferences’ utility’. You now have an item added to the list on the left called ‘Huawei Mobile” Click on this to configure it.

Add *99# into the box where it says Telephone Number

Tick the checkbox to show modem status in the menu bar (handy for easy connection)

Hit Apply to save these settings.

With any luck, you should now be able to connect using this new connection you’ve created.

A UDP Joke

I can’t claim credit for it, but as someone who’s done a bit of UDP programming lately, it made me chuckle.

“The problem with a UDP joke is that you can’t be sure anyone got it”.

Alternatively…

“If you don’t get a UDP joke, just wait for the next one”.

JavaScript Date, Time And Node.js

JavaScript Dates and times seem to pose a bit of problem to JavaScript developers. Looking at the access logs to my website, one of the most popular popular pages is about Writing a Daytime Server In Node.js. However, most people are actually searching for how to use a JavaScript Date in Node.js.

I thought I’d put together a few notes for those developers struggling use dates and times in node.js.

The good news is that as node.js is just a server side version of Google’s V8 JavaScript engine, node.js developers have full access to the JavaScript Date object.

A date in JavaScript is represented behind the scenes as the number of milliseconds since midnight on January 1st, 1970 (01-01-1970 00:00:00).

Initializing A JavaScript Date

To create a new Date object in node.js, or JavaScript in general, just call it’s initializer.

var now = new Date();
var now = new Date(milliseconds);
var now = new Date(dateString);
var now = new Date(jsonDate);
var now = new Date(year, month, day);
var now = new Date(year, month, day, hour, minute, second, millisecond);

dateString must be an RFC1123 compliant timestamp, I’ll come to jsonDate in just a minute.

Remember that Date objects can only be instantiated by calling Date or using it as a constructor; unlike other JavaScript object types, Date objects have no literal syntax.

Dates In JSON

Node.js offers great native JSON support, and that extends to encoding and decoding dates. Dates were not part of the original JSON specification, so it’s always been down to developers to decide on the best approach in the past. Things have changes, and now the standard is to use an ISO 8601 formatted date string.

To convert a date to JSON format, we can use the toJSON method of the Date object. This is a fairy new addition to the JavaScript language and is only supported in version 1.8.5 and above. Thankfully node.js supports this out of the box.

var now = new Date();
var jsonDate = now.toJSON();

To convert back, we just pass an ISO 8601 date string back into the JavaScript Date constructor.

var jsonDate = "2011-05-26T07:56:00.123Z";
var then = new Date(jsonDate);

Getting Specific Date Details

The JavaScript object provides various getters to extract information from the Date object. These include getDate to get the day of the month, getMonth to get the month (more on that in a minute), getFullYear to get the year (more on that in a minute as well), getHours, getMinutes, getSeconds, getMillisconds, as well several more.

There are a few gotcha’s here. The one that gets most people firt time, is that getMonth returns the current month, but months according to the Date object run between 0 and 11 instead of 1 to 12 as you are probably used to. The second is that the getYear method only returns a two digit date, you really want to use getFullYear as that returns a four digit date.

Setting Specific Date Details

To compliment the getters, there are mirror setter functions. These include setDate, setMonth, setFullYear, setHours. setMinutes, setSeconds, setMilliseconds as well as several more.

Manipulating Dates

You will probably want to manipulate the Date objects you have.

Let’s see what the time is in 6 hours time.

var myDate = new Date();
myDate.setHours(myDate.getHours() + 6);

But what about the time in 100 hours time? No problem…

var myDate = new Date();
myDate.setHours(myDate.getHours() + 100);

The JavaScript Date object is clever enough to change the date correctly.

I hope this has given you a few pointers on how to use dates and times in node.js.