FOWA 2009: The Future of HTML5

13/10/2009

“The web is too important for society to be in the hands of any one vendor”

– Bruce Lawson, Opera

HTML5 is more a collection of new technologies than a single new standard – we can start using parts of it today.

You can use Moderizr to check what HTML5/CSS3 features are available in your browser. You can see it in action at FindMeByIP.

Canvas/SVG

Cross-browser canvas support & speed

Canvas is possible in IE using a single script tag: check out Excanvas

Filament have created accessible charts from HTML tables using the canvas element: jQuery Visualise plugin

Accessibility: canvas or SVG?

  • With images off, canvas elements are essentially blank, whereas SVG remains as text
  • Use SVG for content and canvas for bling (for now)

Forms

Browser handles special field display and front-end validation that has traditionally required Javascript (popup calendar, focus on field, email validation, required field validation).

Examples: http://people.opera.com/brucel/demo/html5-forms-demo.html

Geolocation

Currently iPhone Safari and Firefox 3.5 only.

Examples: http://html5demos.com/geo

No Comments

Linux: email alert when disk is nearly full

30/09/2009
#!/bin/bash
# Send an email when disk space used reaches a certain threshold
FS="/"
SERVER_NAME="linux02"
EMAIL="user@example.com"
THRESHOLD=95
OUTPUT=($(LC_ALL=C df -P ${FS}))
CURRENT=$(echo ${OUTPUT[11]} | sed 's/%//')
[ $CURRENT -gt $THRESHOLD ] && df -h | mail -s "$SERVER_NAME disk space alert: $CURRENT% full" $EMAIL

I’ve set this up as a cron job run at 3am daily:

0 3 * * * ./root/maintenance/check_free_space.sh

Based upon http://www.cyberciti.biz/faq/mac-osx-unix-get-an-alert-when-my-disk-is-full/

No Comments

Is IE rendering in quirks mode?

11/09/2009

To find out, load the page in question and then paste this into your address bar:

javascript:alert(document.compatMode);

‘backCompat’ is quirks mode; ‘css1Compat’ is standards mode.

More info on quirks mode: http://www.quirksmode.org/css/quirksmode.html

No Comments

Configuring the viewport on iPhone and iPod Touch

4/08/2009

By default, Mobile Safari assumes that the page is 980px wide and sizes the viewport accordingly. If your page is significantly smaller, you can use the viewport meta tag to configure the viewport dimensions. For example:

<meta name="viewport" content="width=320" />

Detailed documentation is available at developer.apple.com.

In portrait mode, the viewport is 320px wide; in landscape mode, it’s 480px wide.

1 Comment

Apache: rewriting requests for iPhone and iPod Touch

4/08/2009

This snippet will rewrite all requests to the page iphone.html when viewed on iPhone or iPod Touch. Requests for .gif and .css files are not rewritten, so you can include stylesheets and images in your iPhone-specific page.

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari
RewriteRule !\.(gif|css)$ /iphone.html  [L]

Source: http://webdirect.no/mobile/apache-rewrite-rule-for-iphone-users/

No Comments

Find files created in the last x minutes

31/07/2009

To find files created in the last 30 minutes:

find -cmin +30
No Comments

httperf

13/07/2009

Get latest version from
ftp://ftp.hpl.hp.com/pub/httperf/

Usage

httperf --server staging.myserver.com 
--uri /test/report_generation --num-conns 1000 --rate 10

(1000 connections at a rate of 10 per second)

There’s an excellent Peepcode screencast on the subject:

http://peepcode.com/products/benchmarking-with-httperf

No Comments

Dealing with Outlook 2007

13/07/2009

You can use conditional comments to target Outlook 2007.

A common problem is that unordered lists do not appear with bullets. This can be fixed using:

<!--[if gte mso 9]>
<style>
ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]-->

More details at: http://www.campaignmonitor.com/blog/post/1774/using-conditional-comments-to-1/

No Comments

Why getting good quality user feedback is hard

22/05/2009

Ask a person why they bought a “blue Acura RX”, and the answer you’re likely to get is one that the person has created in their mind, a sort of cover for instinctive decisions made following intrinsic rules of fundamental human desires.

It is sort of like that old saying – “the heart has reasons that reason doesn’t know about”.

There is actually a proven psychological principle that sort of validates the Ford quote – it is called the Peril of Introspection Problem and it’s the result of some great work by UVA professor Timothy Wilson… asking people to think about what they want causes them to change their opinion of what they want. In fact, it screws up their ability to recognize what they want. To prove this he did a very simple experiment called the Poster Test, and it goes something like this:

He had a bunch of posters in a room and brought in a group of college students and told them to “pick any poster you want, take it home and hang it up”. Then he brought in a second group of college students and told them to “pick any poster you want, tell me why you want it, take it home and hang it up.”

A couple of months pass and he called up the students and says, that poster you got a couple of months back, do you like it? Do you still have it hanging on the wall? The kids in the first group, the ones that didn’t have to explain their choice, all still liked their poster. The kids in the second group, the ones that had to explain their choice, now hate their poster. Not only that, the kids who had to explain their choice all choose a very different poster. So, making people explain what they want causes them to change their preferences, and change them in a negative way. It causes them to gravitate towards something that they actually weren’t interested in.

Now, there is one little detail here – there were two kinds of posters: there were these impressionist prints and then there were some posters of kittens hanging on a bar with a slogan that read “Hang in There Baby!” and the students who had to explain their choice overwhelmingly chose the kitten poster. The students who didn’t have to explain their choice overwhelmingly chose the impressionist painting – and all those with the impressionist poster were still happy. Why is that?

Why is it when you ask someone to explain their preference do they gravitate towards the least sophisticated offering? It’s a language problem, right? You know in your head you like the impressionist painting, but you have to give an explanation for your choice and you don’t have the language to do that. What you do have the language to say is that, “well, I chose the kitten poster because I had a kitten when I was a kid” or “college is really stressful, I chose the motivational poster to help me get through the long nights of studying”. So, forcing someone to explain a choice when they don’t have the vocabulary to explain it automatically shifts them to the most conservative and the least sophisticated choice.

People don’t know what they don’t know – so, asking people what they want in a website (or car or toothpaste) will yield answers analogous to the “faster horse” from the Ford quote.

That is why so many design, process improvement or innovation projects fail – they are built on a foundation of false assumptions and misinformation.

Getting user feedback is one step in a comprehensive design effort – the tricks are how you go about involving the users, how you gather their feedback and how you get beneath the surface of what they tell you.

From a comment on http://www.disambiguity.com/design-is-a-good-idea-on-ugliness-with-some-thoughts-on-the-designguys-craiglist-realignment/

No Comments

Bash: replacing a string in files using sed

7/04/2009
sed -i 's/old-word/new-word/g' *.txt

More: http://www.cyberciti.biz/faq/unix-linux-replace-string-words-in-many-files/

No Comments