Matt Andrews
Software engineer making apps – that aren’t apps – and more at the FT. 会说汉语.
Snippet: CSS Tabs without JavaScript or Hashtag URLs

Lately in the lab we’ve been experimenting with using <form> elements to shift the burden handling basic functionality from JavaScript to CSS and HTML to keep our apps as responsive and our JavaScript code as clean as possible, especially whilst the JavaScript engine (which, of course, with few exceptions is only able to do one thing at a time) is busy processing.

Check out the result.

Here’s the CSS that does the heavy lifting:-

1
2
3
4
5
6
7
8
9
10
11
12
13
input:nth-child(1):checked ~ .tabs li:nth-child(1) label,
input:nth-child(2):checked ~ .tabs li:nth-child(2) label,
input:nth-child(3):checked ~ .tabs li:nth-child(3) label,
input:nth-child(4):checked ~ .tabs li:nth-child(4) label {
/* Put the CSS to show the tab button is active here */
}

input:nth-child(1):checked ~ .sections li:nth-child(1),
input:nth-child(2):checked ~ .sections li:nth-child(2),
input:nth-child(3):checked ~ .sections li:nth-child(3),
input:nth-child(4):checked ~ .sections li:nth-child(4) {
/* Put the CSS to show the tab content is active here */
}

For the following HTML markup:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="radio" id="s1" name="s" checked />
<input type="radio" id="s2" name="s" />
<input type="radio" id="s3" name="s" />
<input type="radio" id="s4" name="s" />
<ul class="tabs">
<li><label for="s1">One</label></li>
<li><label for="s2">Two</label></li>
<li><label for="s3">Three</label></li>
<li><label for="s4">Four</label></li>
</ul>
<ul class="sections">
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
<li>Section four</li>
</ul>

If you don’t mind using hash tag URLs a potentially better alternative is on CSS Tricks.

The importance of tones in Mandarin Chinese

When I was last in China I visited the small city (by Chinese standards – with a population of just 5.7 million) of Hefei in Anhui province. The person I was with was not a particularly proficient user of either chopsticks or Mandarin so as we ate breakfast I asked the waitress “Can you get us knives and forks?“. She walked over toward the kitchen, then came back and poured us two cups of tea.

Actually what I had said was 来刀叉可以吗?Which literally translates to bring knife fork, is it possible? But it turns out 来到茶可以吗?(Bring & pour tea, is it possible?) sounds almost identical.

刀叉 dāo chā – knife and fork.
倒茶 dào chá – pour tea.

声调的重要性

上次去中国我去了安徽合肥(一个小城市:人口只有5.7亿)。 因为我的旅友不但不会说普通话而且不会用筷子,所以我们有一次吃早饭时我对服务员说,”来刀叉可以吗?”。她往厨房走,然后她回来的时候给我们饭桌倒了两杯茶…

What I wish I could have read before starting at the FT

Tutorial: How to make an offline HTML5 web app, FT style
There are plenty of great resources already written for offline HTML5 websites, but just getting a website to work offline is not enough.
In this tutorial we will build two versions of an offline website in order to demonstrate how to add functionality to an existing offline website in such a way that existing users won’t get left behind using an old version.
Read the full tutorial on the FT Labs website…

Earlier this month I wrote that – my first contribution to the Financial Times’ (my employer) technical web development blog.

I’d been at the FT for 6 months – and it really was the article I wish I could have read when I started – getting my head around the FT Web App‘s source code wasn’t easy as there were so few resources available on the internet to help. It seemed not many people had made client side database powered, responsively designed, touch enhanced fully featured offline web apps, even less written tutorials or books about it.

The feedback within the company and on Twitter as well as the analytics data to the post have been awesome – and it has inspired me to finally get around to starting this blog and write more.

I’m working on the follow up “Tutorial 2: Going cross platform with an FT style web app” – where I add full compatibility with IE10 (including Windows Metro) and Firefox as well as gracefully degrading partial support right down to IE6 – with a bit of luck part 2 of the tutorial will be online from the 1st September 2012.