Using a VPN from the guest OS in Parallels

Problem statement: I am running OS X 10.6 (Snow Leopard), and have a Windows 7 virtual machine running under Parallels 5. I want to have both of them connected to a remote VPN at the same time. Getting the host Mac to connect to the VPN was not a problem. But connecting to the VPN from the Windows 7 guest would not work. It would just sit there at the “Verifying user name and password…” message.”

Solution:

  1. Set the virtual machine instance to use Bridged Networking (Default Adapter) instead of Shared Networking.
  2. Make sure that the advanced options for the VPN in the host OS X are not set to send all traffic over the VPN connection. (This is actually the default setting, but if you’ve just spent an hour fucking around with your network configuration trying to make it work, you may very well have changed this.)

This now allows me to connect the VPN on the host and the guest completely independently. (Either one or the other, or both at the same time.) I have no idea if this is a universal solution; if it doesn’t work for you, asking me why really isn’t going to help.

The mobile web is an illusion

Here’s an old joke: there’s a man crawling around on the ground just under a streetlight, searching for his keys. A friendly passer-by offers to help him out. When they still haven’t found anything after a few minutes, the passer-by says, “are you sure this is where you dropped the keys?” “No,” the man says, “but this is the only place I can see well enough to look.”

This reminds me of the technique of leading a target, which means to shoot ahead of a moving target, so that the target and projectile will eventually collide. Basically, you don’t aim where the duck is, you aim for where the duck will be.

And this, in turn, reminds me of the current situation in web development right now. The mobile web is moving so fast that you can’t base your next year’s development plan on current browser statistics. You have to be planning for the future.

The growth of mobile internet usage has taken a lot of companies by surprise, and mobile web skills are so hot right now you risk serious burn injuries by just adding them to your LinkedIn profile. So now we are going to see wave upon wave of “mobile versions” of existing web sites, optimized for 320px-wide screens running webkit.

But that’s where the duck was; it isn’t there any more. Adaptive or responsive techniques allow you to build web sites that adapt to the capabilities (primarily screen resolution) of whatever device is viewing them. This is not a new idea, but it has taken the rise of mobile devices (face it: the iPhone) to convince stakeholders that the same web site cannot look exactly the same on every browser…and that that’s okay.

This is why I think “the mobile web” is an illusion, or at least just a passing phase. Remember when Ajax was the new hotness? How we were going to build fast, rich apps, and how we all started calling ourselves “web application developers”? Well, Ajax isn’t a separate thing any more. It’s just how we build the web.

Remember how “social” was going to transform everything? How deep integration with Twitter and Facebook would lead to new modes of customer involvement, and more meaningful experiences? Well, ditto. In 2011, that’s just how we build the web.

You know how “mobile” is going to revolutionise customer behaviour? How “mobile web developers” chortle at the idea of separate sites for desktops and small-screen devices (take two web sites into the shower?), and sit around earnestly discussing “mobile strategy”? Yep, same deal. Two years from now, we will have web devices with so many different sizes and capabilities to render the distinction between “mobile” and “desktop” web completely meaningless. The device does not imply the context. It’s just how we build the web.

A shotgun approach to mobile development (iPhone app! Android app! Blackberry app! Mobile site!) is not enough. Adaptive design for a web site is not enough. Just flipping stylesheets depending on screen resolution is pretty, but it doesn’t in itself lead to better web sites, as measured by ongoing customer satisfaction and engagement. The reality of the web is that as a site owner, your control of how someone consumes your content is limited. Companies that learn how to deal with this limitation, and turn it to their advantage, will be the big success stories of the next few years.

Further reading:

CSS 2.1 is the new hotness

Forget for a moment about border-radius, box-shadow, and all the other funky CSS3 properties you can use in modern browsers. The (slow) death of IE6 is causing a quiet revolution at the other end of the browser spectrum.

IE6 does not natively understand many significant features of CSS2.1, such as the child (>), adjacent sibling (+), and attribute ([attr]) selectors. Because of this, many web developers (myself included) often ignore them, and work with a more highly-compatible subset of CSS. But if you have the luxury of ignoring IE6–and unfortunately it is still a luxury–then all of these cool features (and more!) suddenly come into play, and they can make your code a lot cleaner.

My favourite illustration of CSS2.1 hotness is nested modules. Here’s some typical HTML:

<div class="mod mod-blog">
  <div class="hd">My awesome blog</div>
    <div class="bd">
    ...
      <div class="mod mod-blogentry">
      <div class="hd">My awesome breakfast</div>
      <div class="bd">
        ...
      </div>
      <div class="ft"></div>
    </div>
  ...
  </div>
  <div class="ft"></div>
</div>

If you use a descendant selector to style the .hd of the outer module, you have to be careful to override any styles for the .hd of the inner module, otherwise the outer styles will apply to it, too:

.mod-blog .hd {
  font-size:167%;
  font-weight:bold;
}

.mod-blogentry .hd {
  font-size:100%;
  font-weight:normal;
}

Alternatively, you end up decorating the .hd element with additional classnames so that you can target the elements more specifically in your CSS (e.g. <div class=".hd .hd-blog">).

By using child a child selector, you can be much more specific in which elements you target. In this example, you can ensure that the “big and bold” style only gets applied to the header of the outer module by using the child selector:

.mod-blog > .hd {
  font-size:167%;
  font-weight:bold;
}

And boom, your code is a lot cleaner, and your modules can be coded in a much more modular style–without having to worry quite so much about nesting issues and inherited rules.

Of course, even if you do have to support IE6, there is nothing to stop you from using these selectors anyway. You can use a polyfill like Selectivizr to implement the missing support in IE, or you can provide IE6-specific overrides in a separate stylesheet, like so:

.ie6 .mod-blogentry .hd {
  font-size:100%;
  font-weight:normal;
}

I don’t recommend doing this, though, because IE6 is already the slowest mainstream browser on the block. Adding additional cruft is just going to make it even slower, and give your site’s visitors an even worse experience than they already have.

But seriously: if you’ve been drooling over rounded corners and gradients without background images, you owe it to yourself to remind yourself of these older features as well. You’ll be very pleasantly surprised by what you can do with them.

Further reading

The Skyscanner 1,000,000 tweet challenge

When I arrived at Skyscanner HQ earlier today, I’d been expecting a pleasant chat with the folks here, maybe a nice lunch out somewhere. I was definitely not expecting the whirlwind of activity around a 24-hour challenge day! The plan is to build a flight search tweetbot, launch it, and serve 1,000,000 tweet replies by 12:00 (UK time) tomorrow. The tech team is frantically putting together servers and message queues; the commercial and marketing team is all a-buzz planning publicity, and figuring out landing pages and campaigns. I just get to sit around and watch the fun for a while.

Skyscanner, if you don’t know, is a flight search engine. They have some cool natural language search capabilities in place, and this new tweetbot will take advantage of that. The idea is that you can write a tweet to @flyscan, for example “flights from Amsterdam to Edinburgh on 19 April, back on 26 April”, and it will tweet you back a link. The link will take you to a page with the best flight options for your query.

Putting the technology together quickly enough is only half the challenge, though; getting the word out to enough people to generate 1,000,000 tweet queries is the other. The @skyscanner Twitter account will be providing updates throughout the next 24 hours, but the buzz machine is going to have to go into overdrive to hit that number. Will they make it? Follow @skyscanner and @flyscan over the next 24 21 hours to find out!

Disclaimer: I’m a former Skyscanner employee, and I will be doing some work for them in the future, but I’m blogging about this because I happened to land right in the middle of it today, and it’s nifty.

Searching for IE9 on Bing

Really, Microsoft? I mean, really? This is the best you can do when I search for “ie9”? Your own search engine…your own browser? That’s just embarrassing beyond words.

Here are the actual links from that search (performed from various IP addresses in Amsterdam, fucking Netherlands):

  1. IE9中文版官方下载_Internet Explorer 9浏览器_IE9.0中文…
  2. IE9专区】IE9中文版官方下载_Internet Explorer 9正式版 …
  3. IE9_IE9.0浏览器官方下载
  4. IE9 – ยอดดาวน์โหลด IE9 2.3 …
  5. IE9|IE9下载|IE9浏览器|IE9浏览器下载 – IE9
  6. Microsoft (IE9) on Twitter
  7. IE9/IE8/IE7–Windows7之家 Win7之家
  8. Internet Explorer 9 Test Drive
  9. IE9 – IE浏览器中文网站
  10. Internet Explorer 9 – Ontdek de nieuwe…

Adapti(ng|ve)

Just a short posting to mark the v6 layout of Legends. I find myself reading a lot more content on my phone these days, and the fact that my own blog did not display nicely on a small screen was starting to feel a bit embarrassing. So: mobile first, boys and girls. It’s the only way to fly.