There is a wealth of opportunity for onward travel when you arrive in Bangkok. Local transport in Thailand is not easy to organise, you will have to either go to the local train or bus station, or book tickets through one of the many travel agencies, but it is cheap and runs well.

From Bangkok, I wanted to go north to Chang Mai, but also see as much as I could in a couple of days on the way. I booked a day trip in and around Kanchanaburi, starting at the Death Railway (make sure to tell your Mother it's called that for historical reasons).

While not exactly “fun”, the Death Railway (or the Burma Railway) has an interesting history and is a good place for sightseeing. The first stop was the Kanchanaburi War Cemetery, a sobering and respectful reminder of the real human cost of the railway, including the graves of Bristish, Dutch and Australian soldiers who died during its construction. More about the Death Railway at the bottom of this page.

Graves at Kanchanaburi War Cemetery

Next on our trip we went to the JEATH Railway Museum. The museum isn't much to write home about, but does offer great views of the next stop, the Bridge Over the River Kwai.

Yep, it's that Bridge Over the River Kwai, and is still a working railway bridge today. Fortunately for all the tourists walking along it taking pictures, there are refuges to stand in while the train creeps past and take more pictures.

Taking refuge on the Bridge Over the River Kwai

The train trip takes you across the bridge and through some typical Thai farmland along the banks of the Kwai. Parts of the track are laid along some squeeky wooden trestles, including Hellfire Pass, a good few metres above the river; so why not open the train doors and peer over the edge?

Sat close to the edge at Hellfire Pass

After getting off the train and some lunch at a floating restaurant, we headed to a waterfall I don't remember the name of, but if I'd had my swimmers with me, I would've been straight in. The temperature must've hit the top 30's (in Celsius), with the humidity on top of that.

The last stop was easily the best, if not the most controversial. The Tiger Temple in Kanchanaburi province is a temple (Wat Pha Luang Ta Bua) that also houses tigers, along with other animals including deer, water buffalo and wild boar.

After being let into the site, you walk through the fairly baron grounds and down a slope into Tiger Valley. Here you queue to pass through steel gates into the tiger enclosure. Stepping through the gates, you see a dozen fully grown tigers chained to the ground. It's quite a site. While I don't always feel comfortable with animals in captivity, there is no way you could allow tigers to freely roam around and expect one to stand still long enough to have your photo taken with it, let alone trusting it not to bite your arm off.

While you are inside the enclosure, every move you make is strictly controlled. You are not allowed to make loud noises or wear anything orange or any animal prints. You are then led by the hand (literally) and positioned to the rear of the tiger where you can touch it's back, while another keeper takes pictures with your camera. Unless you get the keeper I did and she passes you the tigers tail.

Catching a Tiger by the tail

I wish to this day that I'd made a biting gesture, but you just don't think do you?

I've got some amazing memories and pictures from this experience. I can't describe what it's like being so close to such a powerful animal. My favourite picture is this one. Please note the tiger to the left of me eyeing up his next meal.

The tiger on the left is wondering "Eat him whole? Or the legs first?"

Controversies around the tiger temple include rumours that the tigers are drugged, that the tigers are allegedly mistreated and that the temple allegedly engages in illegal tiger trading and breeding (meaning that tigers are being bread just to attract more tourists, with tiger cubs being a very popular draw).

I've never met a drugged tiger, but the tigers I saw seemed healthy and alert, and not much different to other big cats I've seen in captivity. We were told that the tigers are fed before being shown to people (good to know), and being nocturnal predators, are naturally sleepy in the afternoon. We were also told that while not on display the tigers are not chained down and that the tigers are rotated so not to be on show every day.

Regarding the rumours about mistreatment and illegal trading, many conservation groups have contacted the Tiger Temple asking for improve links to other tiger conservation efforts. The Thai government should be involved and allow independent inspection of the tigers and the temple's facilities. If it is possible to create an amazing experience for tourists and help tiger conservation efforts, that would be something really positive for Thailand. It's possible to keep animals in captivity without cruelty, so why not here?

Was my money used to care for and feed the tigers I saw that had been rescued and looked after since being cubs? Or was it used to further the profits of a popular tourist attraction at the cost of one of the most precious and amazing species on the planet? Honestly, I don't know, and because of that, I don't think I'd go back.

What I can tell you is that tigers are wild animals, no matter how long they have had human contact, or how tame they seem. But if you still want to meet Tigger, the Tiger Temple is the place to go.

About the Death Railway

Oh, the British. There weren't many places on my trip that I wasn't reminded of British colonialism and occupation. The Death Railway has a particularly ironic twist for the Brits.

The British Government of Burma surveyed a route to connect Burma and Thailand by rail in the early 1900's, but it was thought far too difficult to complete. During the Japanese occupation of Thailand in WWII, 40 years later, the Japanese military needed a way to transport supplies between Burma and Thailand.

Guess what? They'd build that railway after all! And guess who'd be building it? Asian labourers and allied POWs. The POWs included British personnel, over 6000 of which were killed during it's construction.

The railway was completed in just over a year, after the deaths over 100,000 of those working on it. But the death didn't stop there. Some of the labourers were left behind to maintain the railway, which was now a target of allied air bombardment.

I'm not sure what would be worse: bombing a railway where you know your allies are, or rebuilding a railway in horrific conditions knowing the bombers would be coming back.

Wandering around Wat Phra Kaew in the Grand Palace complex, it struck me that it is a good metaphor for Bangkok itself. Wat Phra Kaew is the most sacred Buddhist temple in Thailand, and is an impressive sight. So impressive in fact, its hard to know where to look.

There are six temples, statues and monuments, including the Temple of the Emerald Buddha, all packed together fairly tightly, with enough gold leaf to keep a Wag happy. Not having much room to breath is a fairly common theme in Bangkok.

After the Grand Palace complex, we nipped across the Chao Phrayer river to Wat Arun. Situated on its own, with some great views of the city from the top, the closest thing together here are the steps; not a place for the unsure footed.

Steep steps at Wat Arun

Khao San Road, and the adjacent Rambuttri Road, one of the main tourist hotspots, is packed to the brim with all the usual tourist attractions, as well as the odd cooked insect stand (they taste a bit crunchy and salty, but that's about it), but if you go very far, you'll notice the attractions disappear to be replaced by more authentic Thai shops and offices.

The food in Bangkok is great. While the street food may be a more authentic Thai experience, I'd certainly recommend trying a few restaurants. Eating out is inexpensive and the food available is excellent. I'd recommend May Kaidee, a brilliant vegetarian restaurant around the corner from the southern end of Khao San Road, and a trip down Rambuttri Road to devour some king prawns.

Vegetarian Penang Curry at May Kaidee

Getting around is fairly easy, as long as you don't get caught in one of the many traffic jams. Cabs are everywhere and cheap, and there are plenty of buses. I'd do your best to stay out of tuk-tuks. The worst problem no one ever mentions is that you are just the right height for the local buses to blow their exhausts straight into your face, and that will probably be on the way to a tailor or jewellery seller you don't want to go to (the tuk-tuk drivers get free petrol for taking you there, even if you don't buy anything).

There are a lot of people on the street in Bangkok who will do their best to rip you off. It seems like everyone gets a backhander somewhere along the line, be it from sending you to a certain travel agent, hotel or show. This gets pretty annoying, but it's quite hard to know if you're being ripped off when everything is so cheap. Shop around if you can and be prepared to walk away and you'll do better.

Bangkok is a great city, with enough culture, night-life and activities to keep pretty much anyone happy. You only need a few days there, and I'd advise planning your trip as much as you can to avoid wandering around in the baking heat. This isn't a city to take it easy, it's crowded and can be quite claustrophobic at times, but stay one step ahead of the game and you can pack in great food, ancient history and sightseeing for peanuts.

Getting off my train from the airport in downtown Bangkok, this is who was staring down at me. I know Giggs gets around, but this is ridiculous!

It's not really so suprising if you support a global brand/team like Man U. Talking to a few of the locals, Liverpool FC are quite popular (even though they are having a terrible season), and also Leicester City, because they are sponsored by a Thai company.

Downtown Bangkok isn't great. It's only really any good if you like shopping. One cab ride to the more tousisty area of Ratanakosin took me almost an hour to go about 5km. It only cost £4 though.

My best peice of advice in Bangkok is watch out for mopeds. They are everywhere. On the pavements, going the wrong way down roads, weaving in between cars. I woudn't be supripsed if I saw one riding through my hotel foyer.

I'm leaving for the airport in about two hours to travel the world. Not bad, eh?

It's something I've wanted to do (and been going on about) for years, but today's the day. So, will all my stuff fit in my 60 litre backpack?

I'm starting in Thailand, going through Singapore, Australia, New Zealand and north America. I'll do my best to keep my blog updated with photos and goings on.

I'm flying to Bangkok, and hope to see the Grand Palace and Wat Arun (and maybe a rooftop bar), then head out and see Ayutthaya, the Death Railway, Chang Mai and then further south to see some of the islands.

I'm staying connected while I'm away to look after Sixth Domain. We've been doing loads of work recently behind the scenes to keep everything running smoothly and with minimal admin. The one benefit of being responsible for a web app is you can do it from anywhere. After all, there are worse places to debug code than a beach in Thailand or cafe in Singapore.

Git's speed and simplicity encourages regular, small commits. Commiting more often makes for smaller and easier to understand code changes, but does make it more likely that you will make a mistake in your commits. Fortunatly Git has the --amend commit option, which can be called like this:

git commit --amend

This commit is like any other; only changes staged for commit will be commited. With the amend option, however, the changes made in the current working tree will be added to the changes in the previous commit, and will not create a new commit.

Lets run thought a simple example, starting with creating a directory and initialising a git repo (you will need to have git installed to follow this tutorial).

mkdir amend-test; cd amend-test # Make a new directory and change to it
git init # Initialise an empty git repo
echo 'This is a test file that we will amend.' > test.txt # Echo some text into a new file in our repo
git status # Get the status of our new repo

You will get a message from Git saying one file changed and one insertions. But oh, crap! We forgot to sign off! Quick Batman, add your name!

echo 'Yours, Nick' >> test.txt

We now need to add the files to be included in our next commit, just like a normal commit.

git add test.txt

And now here is the magic...

git commit --amend

Your default Git text editor will now pop up and give you a chance to amend the commit message as well, so practice editing that too. I changed mine to "We added some text, and our name".

(If Vi/Vim pops up are you are not sure what to do, edit the message, press escape, type :x and hit enter).

And that's it! No more commits about forgetting to update a timestamp or adding that all important new script - we have just one commit and our git history is clean. Don't believe me? Run git log and find out for yourself.

A Word of Warning

If you are using remotes with your repositories, you may encounter an error when pushing a branch to a remote repository. If you have already pushed the repo before you apply the amend, and then try to push again, you may get this error:

error: failed to push some refs to 'git@remoterepo.com:dir/repo'
To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes (e.g. 'git pull') before pushing again. See the
'Note about fast-forwards' section of 'git push --help' for details.

This is because git can't merge the changes between the two commits during a push. You have two options to resolve this problem. The first option is to do what the help message says, go a pull:

git pull origin master

Now you may need to resolve any conflicts git has found. If there are conflicts, sort them out, commit the changes (without the --amend keyword this time), and push the result. If there are no commits, you are good to push straight away.

git push origin master

The second option is to force the commit. This is risky as you may loose changes to your repo, but is acceptable if you are sure noone else has access to the repo.

We've seen some greatexamples of HTML5 animation, but I've just come across a service that allows you to embed your own 3D models using HTML5, just like the one below (you'll need to click it to begin).

Sketchfab is a service to publish your 3D content online. As well as being able to upload your models from tons of 3D formats, the site uses HTML5 to render the models in the brower, without the need of any proprietary plug-ins.

This is easily one of the best HTML5 services I've seen. Off the top of my head, it might actually be the first HTML5 based service I've seen at all...

We already have a proven product and clients, and while there is still plenty of work to do (when isn't there?), the future is bright for our little start-up. I'll post more on Sixth Domain soon, and we hope to get a blog live there in the coming weeks.

New Job

As we're bootstraping our start-up, I started a new, part-time job working for edapt, the support & protection service for teachers, (it helped that I know the CEO, a certain John Roberts). edapt is a great young company, starting a business the like of which has never been seen in this county.

I'm the Web Developmenet Manager at edapt, so got to choose the great, open-source technologes with which the site is built and maintained - most notably PyroCMS and Git VCS.

New Place

I'm now based in London for my freelance web development work. Moving from Manchester was a big decision, but I've lived in London before and it is hard to beat for opportunity and vivacity.

New Site

My last site was build on a custom PHP framework I came up with (maybe more on this soon), but as some of you might know, while it's tempting using something brand new for every project, more blogging is going to get done with something stable.

The site is powered by PyroCMS; the theme is based on my Normal theme, which utilises normalize.css and HTML5; the font is called Roboto and is being served by Google fonts; and the design is based on a colour I liked on the Kickstarter site. I designed most of the site in the browser by playing around in Google Chrome's web inspector, and the images were created with GIMP.

I'm hoping to blog more frequently about web development, my tech start-up and the web in general, so please come back soon.

Fluid websites are a great method to create a responsive website. CSS can be used to create both fluid images and videos, but what about other web design elements? I was recently involved with a project that was using media queries to deliver the site over multiple platforms, and needed an image slider that was fluid. Google didn't deliver, so I made one myself!

Create Your Own Image Gallery

The code is available on GitHub, as was created as a plugin for jQuery. Once you have jQuery in your page, create your HTML and CSS as described on the demo page, and then call Fluid Fader like so to create your image gallery.

$('#fluid-fader').fluidFader();

Browser Warfare

Fluid Fader work well across all browsers (yeah, including skanky old IE6), but because it needs quite a lot of CSS to make it work, I would suggest thorough testing.

CSS3 media queries are a useful tool to change the layout of a web page depending on the screen size of the device viewing it. There are plenty of examples of how to create a site suitable for mobile or tablet devices using media queries (including this post on my blog), but what about screen sizes larger than the standard desktop layout width of 980 pixels?

Media queries are usually applied to a standard layout. For devices that do support media queries, the layout will be realigned to suit the device, but for those devices that don't support media queries (such as a PC using IE6), the standard desktop layout will be used.

What's the problem?

A website using the technique described so far may be viewed by a device which supports media queries (such as a PC using Firefox 6) but has a screen size much larger than 980 pixels (devices with screen sizes over 2,500 pixels in width are quite common), yet will still be viewing a site at 980 pixels wide.

Why optimize a layout for screen sizes of the average layout width and below, but not above the average?

The answer to this question is two fold. Firstly, we still want to deliver the average layout width to devices that don't support media queries (which means we must build the original layout to 980 pixels in width), and secondly, we will still want to set an upper limit to the width of our design.

We would wish to do this for usability and design decisions, such as keeping the line length of text to the optimum of 60 - 80 characters, and keeping images from being stretched too much and being distorted.

The solution

You have probably seen many layouts using the max-width media feature, but you can also target CSS to devices above a certain width using min-width. Using these two features, we can write media queries that will fit screen sizes from a top limit (in this case it is 1150 pixels, but you can set the top limit to whatever you like), down to a mobile device width of around 320 pixels, but also, as the original design (the CSS before the media queries are applied) is created to 980 pixels, users without media queries will be served the average layout size.

I have created a demo to highlight this process in action. The demo includes a button to toggle media queries on and off (as long as your browser supports JavaScript).

As you can see, we are creating two queries with only 1 pixel in difference, the first to target screens with width of 1150 pixels and everything above (the width of 1116 pixels is due to the padding on the sides of the central div, and the .media-queries class is for toggling the effect in the demo), and the second to devices 1 pixel smaller, at 1149 pixels.

The third screen query is to align the layout to a mobile screen.

Media queries are a very powerful technique, so if just making a layout wider for larger screens is not enough to create a great design, you could use the positioning or display CSS properties to add, rearrange or reposition new or existing elements.

Using this technique makes targeting layouts to screen sizes of both above and below the average easy, so you can create the best user experience for the most users as possible.

One of the development priorities when I redesigned my website was to use media queries to create a layout that was responsive to as many screen sizes as possible. With the rise of mobile, we can no longer rely on 980 pixel wide layouts delivering the best experience for the various devices being used to browse the web.

Media queries are part of the CSS3 W3C recommendation and can be used to completely restyle a web page depending on the media type (such as print or screen) and media feature of the device's screen, such as orientation, resolution and colour support. For my site, I shall only be using the media type and width of the screen.

Responsive and Fluid

Many of the sites that use media queries also employ another technique to create a responsive website. Fluid layouts use relative widths (such as percentages) that only fill a portion of the screen width of the device being used, meaning content will fit to all screen sizes. A limitation of fluid layouts is that content cannot be hidden or the layout changed significantly, such as moving entire columns or changing background images.

Media queries used alongside fluid layouts provide the best of both worlds: a design that can fit to a screen size exactly, and a layout that can be realigned depending on that screen size.

Not mobile specific?

Another tactic for creating a device specific website is using device detection and redirecting to a separate dedicated site, usually on a sub-domain such as http://m.example.com. Device detection is a great method if the content of your current standard desktop site is incredibly complex, contains large file sizes or would generally be difficult to scale down for a mobile's screen.

A lingering problem with device detection is that it is very difficult to predict and detect every single device before it arrives at your site. Granted, most devices can be predicted, and media queries themselves are not supported perfectly in all browsers, but media queries will at least fit all devices that support them perfectly. For both these cases, the worst case scenario is that the user will see the desktop version of the site.

If you do decide to use device detection, what do you do about tablets? You could create another site specifically for tablets, but tablets have a wide range of screen sizes, so it is imperative that you create a fluid design that will fit to all tablet screen sizes. You will now have created three separate websites! This may be the best tactic for your digital marketing strategy, and you could certainly take steps to reuse the content and media, but this may not be within your budget.

If the content on your site is mainly copy with a small amount of images, which could be downloaded easily on a mobile Internet connection, media queries allow you to serve a design specific to the device, without any redirection or creation of multiple websites. This is the case with my blog, and certainly many other blogs and other types of website.

The Beef

Ok let's finally get down to some code. Firstly, the media queries themselves.

As you can see, only the two. These are positioned right at the bottom of my CSS file.

The first query will apply the CSS for screen sizes (for media types of screen) no larger than 940 pixels. This is the width of the main content of my website; the central column of 900 pixels and padding of 20 pixels at each side.

Without media queries, the layout of my site would result in a horizontal scroll-bar for screens smaller than 940 pixels. With media queries, I have applied widths measured in percentages for the two column's containing the main content and aside, and the central column, leaving a small percentage to create a margin at both vertical edges of the page.

I also have a line of CSS to make the images in the page fluid. The image tags themselves do not have any width or height attributes, and the image files are the same width as the column that they are in. With the following line of CSS, they will become fluid and fit to the column.

.col-a article img
{
width: 100%;
}

Devices with screen widths smaller than 940 pixels wide include the iPad tablet and HTC Desire mobile phone in portrait orientation, among many older desktop monitors and laptops.

The second query creates a single column layout. The aside at the right of the page is moved to below the main content and the header is realigned so that the logo and main navigation are on top of each other and both centrally aligned. The styles from the previous media query mentioned are also still applied, so no need to re-declare styles.

Devices with screen widths smaller than 480 pixels include the iPhone (lower than generation 4) in portrait orientation and the Blackberry Curve in the standard landscape mode.

I wish I could say that was all you had to do, but there are a few more things we must apply before our responsive site works as we want it to for as many devices as possible. Firstly, you must add a few lines of meta data to each page in the head of the document.

The viewport meta data tells mobile browsers that the width of the document should be the same width as the device's screen. Without this present, a device may use the width of a title or image as the maximum width, meaning a user would have to scroll horizontally.

The MobileOptimized is only used by some IE browsers, and stops the browser attempting to fit the layout of your site to the screen itself. You must specify a width for this. I chose 320 pixels, as it is a good baseline for most mobile sites. The HandheldFriendly meta data does a similar job a range of other mobile browsers.

Poly-fill for Internet Explorer

CSS3 is not implemented in IE older than version 9, but there is a great JavaScript poly-fill available on Google code that will parse your CSS and apply media queries to your site, even in IE. It works well, but has the disadvantage that your CSS is downloaded twice for anyone using IE to view your site, adding to your server load. You may to choose not to support older IE versions, as again the worst case scenario is that users will see the non-responsive desktop site.

Why You Shouldn't Just Design for the iPhone

As a final point about design, I would suggest not to design for just one device. Apple's iPhone is a great way to browse the web, but the strength of media queries is that they are "device agnostic" - they respond to the device's screen size, rather than the device itself. You should test your design, and decide for which widths you should alter the layout, considering elements of your design such as line length, floats and accessibility of content.

Looking at the analytics for my site, I have had hits from devices based on the mobile operating systems of Android, iOS and SymbianOS in the last month. The mobile web is a real consideration for my site, and this trend is set to continue. Media queries are a great device for creating flexible and responsive web page layouts, and with the tips in the tutorial you should have mobile appropriate content in no time.