Matthew Andrews
Product Manager ・ Software Engineer ・ Executive MBA Graduate ・ Tokyo Resident
Abstract class in Sass / Scss via the placeholder selector

Super useful snippet that is going to literally save us bytes of useless CSS from our web apps.

Sass / Scss supports abstract selectors – which are removed from the compiled CSS but can be @extend‘ed.

Here’s some SCSS:-

1
2
3
4
5
6
7
8
9
10
11
%abstract-class {
font-family: Verdana;
}

#my-div {
@extend %abstract-class;
}

#my-other-div {
@extend %abstract-class;
}

Which will be compiled as:-

1
2
3
#my-div, #my-other-div {
font-family: Verdana;
}
Inner Mongolia

The web really does open up a wide variety of opportunities to bore people with your travel photos in all sorts of creative ways. The following is pure shameless self promotion.

Enjoy.

But first – “Where is Inner Mongolia?”

  • Mongolia is a country to the north of China.
  • Inner Mongolia is an autonomous region of the People’s Republic of China (like Tibet, but doesn’t require special visa to visit).
  • Outer Mongolia is an old name for what is now roughly Mongolia, the country.

After a recent business trip to FT Chinese, my employer’s brand in China, I took a few days off for a long weekend in Inner Mongolia with an old university classmate who lives in Beijing.

Hohhot (the capital Inner Mongolia) was our first stop, where we stayed at Anda Guest House and then signed up for their 3 day 2 night tour, which was actually really fun as well as being cheap and super easy to get arranged. Everyone on the tour was foreign but all apart from me seemed to be in China on a somewhat long term basis so it didn’t feel touristy at all. Everyone could at least speak my level of broken Mandarin, although that was not really necessary – the English of the tour guides / hostel was fine (for some of the locals Mandarin as much as a foreign language as English is).

Me on a camel

Hohhot International Airport

We then travelled lots of miles, through many police check points to… well, nowhere.

The Hotel

Inside the Yurt

Sky

Wasn’t so sure of the locals though.

They told us that if we woke up at 5.30am we could see the sunrise. This was the view from the Yurt at 5.40am

But after waiting for an hour in sub zero degree temperatures, we finally gave up at 6.30am since the sun still hadn’t risen and went back to sleep.

Somewhat disconcertingly it was our driver’s first time in deep Inner Mongolia too and we got lost a lot. These are some villagers he exchanged cigarettes for directions.

Sand at the Gobi Desert

More sand

We then went here, the Museum of Inner Mongolia.

The world according to China

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.

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.