slideout menu

Welcome!

Julian's photo Hi there! I'm Julian M Bucknall, a programmer by trade, an actor by ambition, and an algorithms guy by osmosis. I chat here about pretty much everything but those occupations. Unless you're really lucky...

Most recently this is what I've come up with:

WOFF files and Azure: the 404 conundrum

More than anything, this is going to be a discussion about testing, but the headline is all. 

LazyFinial

Lazy tester

This afternoon, in trying to keep cool inside on this hot day, I thought I’d remove the Google Ads on this site. Frankly they were a pain in the neck to design for: they used to be a sidepanel on the right and trying to get the code to make them disappear when the browser window was too small width-wise was just annoying. Plus the ads were being loaded anyway even if they weren’t being displayed, meaning more code would have to be written to deal with that scenario, etc, etc. Since one of the better presentations I’ve given in the past was all about making your website or application faster to load, it behooved me to chuck ’em. Plus they only brought in on average $5 every month or so … but that wasn’t the real reason, right? Right? (Coughs and moves on.)

So, having done this, I thought the best way to test (in a verification sense) I’d properly removed them was to run the site in the developer tools for the browser and check the GET requests being made across the wire. I’m old school and still use FireBug, but I did also start up Chrome and its developer tools to cross-check. Either way, the ads were gone. Furthermore, the site now loads in under 2 seconds, even with no cache, which is remarkable. (Maybe GoDaddy has also put me on another, faster web server, I don’t know.)

Let’s just check my new homepage under the developer tools, I thought to myself. Let’s see the difference in load times! Less than a second. YESSSSS! But … wait! What is that 404? The CSS is trying to load a couple of WOFF files (Web Open Font Format files) and they’re both being returned as Not Found (404). Here’s the font definition for one of the fonts:

@font-face {
  font-family: 'Gentleman500';
  src: url('./../fonts/Gentleman-500-Book.eot'); /* IE9 Compat Modes */
  src: url('./../fonts/Gentleman-500-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./../fonts/Gentleman-500-Book.woff') format('woff'), /* Modern Browsers */
       url('./../fonts/Gentleman-500-Book.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./../fonts/Gentleman-500-Book.svg#Gentleman500-Book') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

On a 404 for a WOFF file, the browser then falls back to loading the TTF file instead.

Oops! This page has been up for three weeks now and I’ve only just discovered I’d forgotten to upload the proper font files? Talk about a testing failure. Except … the fonts had been uploaded, to the right folder, and were even named correctly (the next things I checked). So why was the web server – in this case, Azure – lying about the presence of the font file? 404 means “Not Found”, and not “It’s there but I’m going to pretend it isn’t”.

A quick bit of googling later, I came across this post on CodePal: WOFF files return 404 (Not Found) in Azure Web Sites. Even though the site is static, I have to have a web.config file that has at least this declaration in it:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

…so that the web server “knows” about the WOFF MIME type.

(Note: there are posts on StackOverflow that say the mimeType attribute should be x-font-woff instead, others that say you should also have a remove element [example]. This minimal web.config works fine for me though.)

After that minimal change, Azure serves up the WOFF font files just fine.

So, as I said in the beginning, although this post was ostensibly about WOFF files and Azure, in reality it’s all about the need for testing and verifying. In creating this new web page, I should have checked that everything rendered and worked correctly (which I did, going through several iterations of the CSS, tweaking away), but also that the loading and caching at the browser were working as expected. This latter part was even more important since I certainly didn’t write that @font-face declaration and hence had only the vaguest notion if or how it worked.

In short: do not assume anything. Test, test, and test again.

Now playing:
Vegas - Walk into the wind
(from Vegas)
Aside: this is a brilliant album from 1992 by Dave Stewart and Terry Hall. No longer available, but it is on YouTube. For now...


My new homepage

There’s a TV program on the BBC at the moment that we’re watching called Celebrity Masterchef. In it a bunch of celebrities (90% of which are completely unknown to me) tackle preparing and cooking dishes, competing against each other for the best one, well presented. There’s a couple of jokey judges (who I again have never heard of) to shake their heads in wonderment at the inability of the “celebrity in the street” to actually cook something appetizing.

After watching a few of these, we’re getting the idea that, in order for someone to have the best chance of winning, they’ve just got to cook a pretty ordinary dish – even simple – but present it well. Those who try for a fancy dish but don’t present it well, get marked down.

Over the past July 4th weekend, I’ve been putting that maxim to good use myself. Not in cooking, mind you, but for a new domain I wanted to have as a goto place for all things Julian. In the past I’ve used imetjulian.com – “hey, if you want to find out about me, go to imetjulian.com – I Met Julian, geddit?” – which was moderately successful, in the sense of no one really followed my exhortations at parties to do so. I copied the HTML/CSS layout – the rendering of a couple of business cards – from other versions of the same idea under a Creative Commons license, and added things like FontAwesome icons and the like.

And then once Twitter got its act together and had some nifty looking homepages for your accounts, I created whoisthisjulian.com, with rather more success, even though it had the same content as before. To keep them separate in my mind, I’ve now added a background image to whoisthisjulian.com and rearranged the Creative Commons stuff. But still it didn’t satisfy. The layout and content was fairly simple, sure, but it didn’t really snap. So I bought another domain, jmbucknall.com, to act as the entry point for people to find out about me and wondered how to design it.

Coincidentally, last week I read an article on minimalist website design (The Roots of Minimalism in Web Design) and it had an image of a homepage for a designer:

Homepage for designer Brian Danaher

Current homepage for Brian Danaher

That was it, I felt; the design for my new website. Now as it happens, Danaher decided for whatever reason to use images for the elements on his page and there was no way I wanted to do that – and his HTML was … let’s generously say, templated, scripted, and old fashioned. Mine had to be HTML5 and CSS, and, if I could get away with it, no JavaScript. Also I’d recently bought a font I liked (it’s Gentleman: “a legible typeface with clear geometry and spiced with nice humanist terminals enhancing its identity”) in a one-day sale, so I was eager to use that too. The kicker: it came with a licensed Webfont version as well. As you can see: simple ingredients to make an ordinary website, but the presentation is going to be all.

After that it was pretty much plain sailing. I designed it in Microsoft Word to begin with so that I could decide on the weights of the font I wanted to use and to futz around with the names of the links. Then the HTML/CSS took about an hour to code up and test. I also used an idea from a post by Eric A. Meyer on CSS popups (no JavaScript!) to display the descriptive text for each link. In essence, put the description in a span:

    <ul class="links">
      <li>
        <a href="http://blog.boyet.com" rel="bookmark" title="Personal blog">
          BLOG
          <span>Read posts Julian has written on topics that have piqued his interest (and still do)</span>
        </a>
      </li>
      <!--more links-->
    </ul>

…hide it by default via CSS, and then style it when the link is hovered (again in CSS). I went for casting it as a block element underneath the link word.

.links a {
  color: black;
  text-decoration: none;
  display: block;
}

.links a span {
  display: none;
}

.links a:hover {
  color: #008000;
}

.links a:hover span {
  display: block;
  font-family: "Gentleman500", Verdana, Georgia, sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: #444444;
  padding: 0 0 10px 10px;
}

Of course, once that was done, I had to do the mobile version. I’m surprised as to how quickly that went, truth be told. The hover/popup stuff works well on a phone or tablet: the first tap shows the description, the second navigates to the link. And then, I decided to write a proper About page. That caused me to introduce some @media queries in the CSS, by which time I was in danger of overdoing the simplicity of the dish, even though the presentation was good.

Anyway, it’s done now. I must say that I like the design, I feel it is nicely minimal and works extremely well with the font I chose. It also gives a professional impression to someone navigating to it from Twitter or LinkedIn. And did I mention that it has no JavaScript?

Now playing:
The Jazzmasters - Smooth Groove
(from The Jazzmasters 2)

Open sourcing EZDSL on GitHub

Finally, and I mean FINALLY, I’ve uploaded my old Data Structures Library for Delphi (EZDSL) to GitHub. I’ve been meaning to do it for a while, and now it’s there and you can download it, issue pull requests, the whole nine yards. I also updated it for the Delphi XE series (the last time I ‘officially’ updated it was for Delphi 2009). It includes linked lists (single and double), queues, deques, priority queues, binary trees, binary sort trees, a mildly-broken red-black tree, hash tables, skip lists, and a binary array. The type of data objects you can store are limited only by your imagination, but be warned, they’re just pointers in the interface and you’ll have to be adept at casting back and forth.

Rusty padlock

The padlock to EZDSL

Having said that, I’m warning you that it is way old. Most of the original code is 22 years old, and the class wrappers are 20 years old or so. If you’ve used it in the past, more power to you, have at it. If you haven’t and are looking to use it in, say Delphi XE8, well, my advice is don’t. For a start, there’s no generics, not that they couldn’t be added to wrap the container classes that are there. No 64-bit – there’s a lot of assembly code in there too (these days I just shake my head at my propensity to do that in the past). No interfaces. What you have to go through to use long or Unicode strings would make anyone blanch. And all that 8.3 file naming is so passé.

But, hey, I’ve made a first pass at converting the documentation to Markdown!

Nevertheless, despite all those negatives, it’s now on GitHub in my repository at jmBucknall/EZDSL.

Album cover for ElectrifiedNow playing:
Boris Blank - Future Past
(from Electrified)


CST-01: the world’s thinnest watch

OK, this is a weird one. Well over two years ago now, there was a Kickstarter for a watch. Not just any old watch, or even a smart watch, just the thinnest one in the world. It’s 0.8mm thin, or, for you non-metric types, 0.00315 inches. All it does is tell the time. So, I plonked down my $99 as one of the original backers and pretty much forgot about it, as I do with anything I back on Kickstarter.

For those not in the know, Kickstarter is a site that helps people gather money (that is, backers) and kickstart some project they want to do. Now obviously for them to get backers, the people devising the project have to work out how much they want, record a video to entice others to back them, and hope that over the course of a month, they get enough backers to reach their goal. Kickstarter do all the logistics of registering backers and collecting the money they want to invest. If the project reaches its goal, Kickstarter take their cut, and the rest of the money goes to the project owners. At that point they go ahead and complete the project and hand over to the backers whatever rewards they’d promised as part of the investment. Of course, if the monetary goal is not met, no one gets anything and the backers don’t pay out.

The big thing to understand is that Kickstarter is not an online store: you aren’t buying the product. You are backing the project to make the product, and, as a reward, if it succeeds, you get a copy of the product. If it fails then tough. You curse perhaps, and move on.

CST-01 watch

The CST-01 watch

Over the years, more so in the past than these days, I’ve backed a few technology projects, things like Snappgrip, Brydge, and so on, at the level where I’d receive one of the items as my “reward”. I’ve even backed books and the like. In my opinion, most of the technology items turned out to be meh, to be honest. As an example, Snappgrip (a snap-on camera controller for iPhones) turned out to be too cumbersome and flaky: it was easier to just use the iPhone camera as normal. But the CST-01, the thin watch, seemed to be better than those and usable to boot, so I backed it. In fact, it was so popular there were 7,658 backers pledging $1,026,292 (the original goal being $200K).

One of the things I learned about the technology kickstarters is that producing the final object, whatever it may be, takes way longer than the project owners originally thought. So, as I said, I forgot about it after backing it. In the early days of the project, we backers would get fairly regular project updates by email and published on the Kickstarter site, and I’d peruse them and move on.

Until the updates dried up. We heard nothing more.

Finally, two years after backing it, I got a box in the mail in February, this year. Inside was my CST-01 watch. Nice! They’d pulled though. I plugged it into the charger for a few hours, and then put it on. It’s a bit weird at first since it’s essentially a wide bracelet, but after a while you forget it’s on. There’s enough flex in the materials so slip it on and take it off, and it gently grips your wrist. The time display is an e-ink display, like on Kindle e-readers, with a special designed-for-the-watch numeric font.

Unfortunately, after just over an hour, the watch stopped. I recharged it again, thinking I hadn’t given it enough time. Again, after an hour unplugged from the charger, the watch stopped. Perfect time plugged in, worked for an hour unplugged.

I politely emailed the project owners stating that I had a defective copy, that perhaps the battery inside (and think about how thin that battery has to be) was faulty. They asked me to send it back and they’d replace it.

Except that was when the whole project seemed to fall apart. They’d only managed to build a couple of hundred copies of the watch and, essentially, had run out of cash. The manufacturing quality was such that around one out of every two watches was coming out faulty. In essence, rather than costing roughly $100 per watch, it was nearer $300. The project folded. The Kickstarter comment thread for the watch then exploded. Personally, I just wrote it off; after all it was now over two years ago that I’d paid out $99 and it wasn’t like I needed it back. Shrug, oh well.

The Consumerist published an article on the whole kerfuffle (Watch Company Collects $1 Million On Kickstarter, Spends It All, Then Hides), as did the New York Observer (Did the Creators of a $1M Kickstarter Botch Production or Blow the Cash on Mojitos?).

Then last week, while I was away in The Hague in the Netherlands, a box arrived at home. I unpacked it on Sunday when I got back and it was a replacement CST-01. The one in the photo. I put it on to charge overnight and it has been keeping perfect time ever since. I even noticed that it flashes when it’s the top of the hour. It fits nicely, although it feels a little too tight now – maybe I put on weight since I first measured my wrist to decide which size to order as a reward.

I don’t know why I got one (well, OK, two) when so many have not. I’m nonplussed at it all, but I’m guessing that I now have an extremely rare timepiece, one of just a couple of hundred.

Album cover for Aladdin SaneNow playing:
Bowie, David - Time
(from Aladdin Sane)


How to search a web page in Safari with iPhone/iPad (iOS7+)

OK: here’s the scenario. You’ve just loaded a long  text-heavy web page on your iPhone or iPad and want to search through it for a particular word or phrase. How do you do it? The problem is that the user interface no longer has a Search box on the screen in iOS7, unlike earlier versions of Safari. Similarly, there’s nothing in the browser’s underlying menu or options. How can I search this text? The solution, believe it or not, is to use the address box. No, really, bear with me. If you type...

Read more »

Hello Dell XPS 13

Once I’d resolved the Surface Pro 3 had to go , I had to decide what to replace it with. I’ve had a Dell XPS 12 for two years now and love it, apart from one drawback. It’s heavier than a “normal” touch ultrabook because of the swivel screen (it needs a sturdy frame). My wife has been using one of the original XPS 13s for three years and it’s wonderfully light, and I bought her one of the new ones with the “Infinity display” earlier this year to replace it. I’d have to say it’s a beautiful machine...

Read more »

Bye-bye Surface Pro 3

In February, I decided to buy and try out a Surface Pro 3. I’d read reviews such as Hanselman’s where he recounted using one for a couple of months and liking it, and it seemed to me that it was possibly a good replacement to my nearly two-year-old Dell XPS 12 . The one primary reason for upgrading was DevExpress’ release of their grid for Xamarin.Forms : I’d bought a MacBook Air 11 for demoing that on travels, and I needed a lighter ultrabook to demo everything else we do. (And before someone pipes...

Read more »

Now we are nine

Yesterday was an anniversary in the Bucknall household. It marked nine years since I joined DevExpress as their CTO. It was on the Ides of March, 2006 that I started this life of a remote employee – I live in Colorado, DevExpress was in Vegas and is now in Glendale, CA – and I must admit it’s been fairly successful, at least on my side. What can I say about the last nine years from that personal viewpoint? Working at home Yeah, brilliant. Well, sometimes. Close, but no cigar For the first 8 years...

Read more »

Generating permutations with Heap’s algorithm

This evening I wanted to solve a particular problem, and it required me – or so I thought – to permute an array of items. Back in the day I wrote an article for PCPlus on the subject and mentioned in there Heap’s algorithm . I hasten to add here that “Heap” here is not the traditional computer science heap, or even the application memory heap, but B.R. Heap, who first formulated and published this algorithm in 1963 (pdf). Permutation 1: we're out Wikipedia has a small article on Heap’s algorithm...

Read more »

Issues using MathJax 2.5 with Chrome

So yesterday I wrote an article about the conditional support of MathJax in my posts here on the blog. The post required MathJax since I deliberately put an equation in it. Today I noticed that viewing that post in Chrome led to the equation being rendered three times across the page: Chrome displays three equations. Whut? Even refreshing the page didn’t solve the issue. A mild bit of panic later – Does it work in FireFox? Yes. In Internet Explorer? Yes. In Safari on the Mac? Yes. On an iPad? Yes...

Read more »

Extras

Search

About Me

I'm Julian M Bucknall, an ex-pat Brit living in Colorado, an atheist, a microbrew enthusiast, a Volvo 1800S owner, a Pet Shop Boys fanboy, a slide rule and HP calculator collector, an amateur photographer, a Altoids muncher.

DevExpress

I'm Chief Technology Officer at Developer Express, a software company that writes some great controls and tools for .NET and Delphi. I'm responsible for the technology oversight and vision of the company.

Validation

Validate markup as HTML5 (beta)     Validate CSS

Bottom swirl