Simple Carousel
Finally got chance to get the carousel script committed and a project page built. This has been hanging around on my desktop for weeks so, a little shameful that its taken this long to get it online. Oh well its up now :)
One of the things I found interesting while writing this, was the significant difference between using easing and not using easing. The linear progression looked far slower than an exponential progression, even though it was in fact taking the same amount of time to move the slide - its as though your mind glosses over the slow changes at the beginning or end of the transition, and only takes account of the fast bit in the middle.
The second thing of note, was although I’ve seen this solution used occasionally, no one seems to have taken the Opera integer percent width issue into account, which is unusual…
Haiku OS
Given how much I lusted after BeOS when I was using Mac System 7, its probably no surprise that when I saw Haiku I immediately downloaded a VM.
Haiku is open source implementation of BeOS, which has just been released after 8 years(!) of development. The VM I downloaded booted quickly, and hit me with a wave of nostalgia as I opened the documentation.
There’s some ported software included on the VM:
- Vision IRC client
- WonderBrush graphic editing tool
- BeZillaBrowser, a port of Firefox 2
Apparently this early release is to faciliate application and platform development, so theres a bunch of development tools on there too.
Given that BeOS is over 10 years old, compared to the GUI I’m currently using on my Debian VM, its remarkably fresh. Hope I see more from this in the future. :)
What do we need from a javascript library?
So, over the last year or so, to a certain extent the world has changed for javascript libraries. There’s been a subtle but palatable switch away from libraries towards using native browser functions. Take this article for instance…
This makes perfect sense of course, the browser vendors optimise the heck out of their native function calls so it will always be quicker to cal document.getElementById(‘myID’) than to call $(‘myID’).
I don’t even think there’s ever been any argument about that: most users likely never considered that there could be a speed difference, and those that knew were probably happy to take the speed difference in exchange for a more compact way of writing the call.
With the second coming of mobile web tho, there’s been a change in the tide and libraries are going out of fashion.
I’d argue that with the imminent death of IE6, we don’t really need a library for Ajax calls, or, depending on what you support, for complex element selections. I think most would struggle to have extensive animations with out a library, but even that is starting to go native, so where will the javascript library be in 5 years time?
Perhaps not so far from where it is now. Sadly, I think that the biggest challenge here will be getting users to adopt the new functionality. They’re so ingrained in the “download a plugin” philosophy, its going to take time and effort to ween them off it.
Polarfox
This morning there was an invitation for Polarfox waiting for me in my inbox. If you’ve not heard of it, Polarfox is an app which lets you edit and post images, and is delivered as an Adobe Air app.
I’ve used Photoshop for years, but I’m always happy to give new things a try so booted it up.
The desktop is very minimalist, the interface doesn’t give you many pointers as to how to get started, and theres no video intro to get you on the right track. That said, there’s only five buttons and a quick process of elimination gets you to the up arrow, top left.
Once you’ve uploaded a photo, more of the interface appears - the geometric shapes are preset values for brightness/contrast, the images below are coloured filters (that the app refers to as colour moods) that can be applied to the image.
I couldn’t see any crop or resize tools, they could still be in development, or maybe not planned at all, as you can resize the image when you save it.
The down arrow brings up the save dialog box and the output seems good, certainly seemed to make my goat picture even prettier :)
The cog button opens an email settings panel, where you can enter your details for various services to post directly. Its a shame not to see Tumblr there, as I think that would be my preference.
Click on the star brought up a load of app information links, including a helpful tip that right clicking would bring up more options. That could possibly be handled a bit better, theres no other clue on screen that right clicking would have any effect.
The right click menu includes options to add a frame to the image and flip it. Options to change the interface background and make the app full screen are also in the right click menu. Still no crop tho :(
It’s very pretty and I’ve not found a bug so far, so I’d say its pretty high quality. But the lack of support of crop, and with no integration with Tumblr I’d probably not use it so much. Overall, nice, but not for me.
String length in different languages
So, in my recent multilingual project, one of the difficulties I faced when building the site templates was how much room to leave for text to change length when the template content was translated into different languages.
The templates had to support at least 21 different languages, so manually pre-emptively testing them wasn’t in the picture. I took my best guess at the time, which luckily wasn’t too far off, but I thought that now that I have the project out the door, it’d be good to get some empirical data.
So, for each of the 21 languages, knowing that the pages were direct translations, I grabed example strings and then calculated a mean value so that the different languages could be easily compared, see below:
- French 20.4
- Polish 18.0
- Russian 17.6
- German - Swiss 17.25
- German - Austrian 17.2
- Portugese - Brazilian 17.2
- German 17.0
- Spanish 16.95
- Spanish - Mexican 16.65
- Thai 16.6
- Romanian 15.85
- Danish 15.5
- Norwegian 15.5
- Swedish 15.25
- Dutch 14.65
- Hungarian 14.5
- Finnish 14.4
- Czech 14.25
- Italian 14.15
- English 13.45
- Chinese 4.25
That French came out as the most verbose really surprised me, but looking down the list of values theres enough high values for me to think that this isn’t just an anomolous result caused by one outlier.
Anecdotally, although French had the largest mean value, Russian was the only language that caused me issues at the time by breaking the template. This was as although the mean string length is lower than french, the individual words were far longer.
So the strings didn’t break and wrap in Russian as easily as in French, and in the smaller width areas, they were far more likely to overflow in Russian than in French.
Surprising results though, prior to this project I was expecting German with its compound words to be my main problem, but thats not how it turned out in the end.
Why is a radio button a radio button?
It occurred to me last night that I have no idea why a radio button is called a radio button, so, Wiki to the rescue…
Radio buttons were named after the physical buttons used on older car radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position.
From Wikipedia
Learn something new every day :)
Learning round up
So after what I consider to be the success of the SaaS class, I’ve gone a bit nuts with the online learning and signed up for 4 courses running this month.
I’m not entirely convinced this was a wise idea, but so long as I don’t get too burned out I’m going to give it a go.
Taught by Nick Parlante from Stanford University, this course aims to teach the basics of computer science, and although I think this will probably be pretty easy given my previous experience, I’m hoping to learn a little more on the theory of computer science rather than the pratical aspects. Nick’s using javascript in the class, which is an interesting choice…
By and by, its interesting to note some of the changes to Coursera since the SaaS class finished, particularly the forums. Nice to see that its still being refined and expanded upon.
I’m also taking CS101 on Udacity, taught by David Evans from the University of Virginia, which might seem a bit odd but there’s a good reason. David’s teaching using Python and aside from being interested generally, the other classes on Udacity are also taught in Python and recommend doing CS101 first as a primer for the language. By the end of the course, the aim is to have built a search engine.
Again, so far I’m finding this pretty easy going, I did the first two weeks and started on the third before slowing down a bit - although the course is now in a self service mode, the final exam is only released after 7 weeks. No point getting all the way through the course and then having to swot up again is there.
CS253 is taught by Steve Huffman, and is titled Web Application Engineering. It feels in some ways like a good compliment to the SaaS class I did previously on Coursera. While the Coursera class covered building software that will be long lasting and high code quality, this course seems to be focusing on building a robust and secure web application, with topics on scaling, caching and security for instance. Again, Python is used in this class in common with the other Udacity courses, and we’re also using Google App Engine. Hopefully, by the end of this we should have a blogging platform live on the web.
Last, but not least, I’m also signed up for CS262: Programming Languages. This is taught by Westley Weimer of the University of Virginia, and I think is possibly the one I’m finding the most engaging at the moment. There’s lots of detail on regexes which is something I’ve always felt a bit unsure of, so all this practice is doing me no end of good. Python is the language of choice here, and the aim of the course is to build a web browser… Exciting huh!
Found app
A little present was waiting in my mail today - I’ve just received an access code for Found App.
If you’ve not heard of it before, essentially it’s a Mac OS app that augments your system search and also searches your GMail account, Google docs and DropBox account.
We use Google docs and GMail corporately, so for me if this works, it’ll be really handy.
Setting the app up is a great experience. The initial login screen is very pretty, and immediately followed by a quick intro video.
I’ve just set it up, so a little early to draw any early conclusions, but I do like the side panel that appears when you invoke Found.
And the document preview is also really handy.
I guess the real test will be how much use I get out of it in the coming weeks - its currently indexing my GMail, no small task I can tell you, so a bit early to judge how good the results are at the moment.
Will keep you posted, but certainly going to recommend this to a few colleagues - I can see them getting lots of use from it :)
IE9 and image maps
Gosh, April has been a bad month for writing! Hopefully tho, once I’ve got a couple of projects updated a bit further I can write all about them to make up for it :)
Anyway, Internet Explorer 9 has been making my life hell again, and having just triumphed I thought it was time to document.
On a site for a multinational company, they wanted a fancy map that let you click on a continent and then zoom in and select a country where they operate. As they wanted this to work on an iPad, flash was out, so I implemented something fancy using image maps, javascript and magic.
All was fine and dandy, until a wild bug report popped up in my email. The border of the active area was showing when the customer clicked on a continent in IE9.
Try as I might no CSS seemed to be removing the style of the active/focussed state. Javascript to remove the focus on focus also had no effect in Internet Explorer, and made things worse in Firefox. Extremely frustrating!
The answer came from an ancient forum post that mentioned an attribute I’ve never heard of - hidefocus. If you set hidefocus=”true” on the image with the usemap attribute, the outline magically disappears.
Turns out hidefocus is a proprietary Internet Explorer attribute, introduced with Internet Explorer 5.5, and hides focus on an element’s content.
Learn something new every day :)
Battling Blackberry 5
As has been noted many times before, there are simply too many mobile devices out there to test a new site on all of them. In order to produce a site of reasonable quality on a mobile device requires strategy.
I’ve written previously about the tools I use to test on mobile devices, but it should come as no surprise that testing in emulators can only be a partial substitute for testing on the device itself.
I’ve spent the day on a problem that illustrates just that difference. The site in question is responsive, and the customer had just discovered it wasn’t rendering as expected on a Blackberry 5 device.
Luckily we have a Blackberry 5 device in the office, because trying to get the emulator working on a Windows VM on my mac was extremely frustrating.
The problem was an unusual one, it seemed that the Blackberry was just giving up half way through loading the page, and after a certain point no images or anything else was loaded.
Testing in Blackberry 6 and 7 didn’t show the same issue, so it looked likely that the issue wasn’t a Blackberry problem so much as a problem with the browser in Blackberry 5 (they switched to a webkit based browser for 6+).
My first guess was that this was something to do with javascript, as it was around the point that a particular javascript function was called that the browser gave up. But using a minimal starting point showed that the function didn’t seem to cause any errors on its own.
The other activity at that point was a whole bunch of img tags, I mean a lot of img tags, at least 49. Again starting from the minimum and building up again showed that it was when there were about 35+ img tags on the page that everything went wrong.
The images themselves where all tiny pngs, so file size didn’t seem to be the problem, more the number of HTTP requests encountered. Which makes life interesting, reducing file size is routine, but reducing HTTP requests on this scale is far harder.
And after reducing the number of HTTP requests from 70+ to 30ish, using CSS sprites, Blackberry seems much much happier. Thank goodness!
