Trailing Comma or Leading Comma

7 Dec 2008

,


We all know that Internet Explorer is a pain in the backside. But the particular pain I wanted to write about is its pickiness about commas in Javascript. For example:

var cars = new Array(
   'Saab' ,
   'Volvo',
   'BMW',
);

If you’re used to programming in Php or Perl, that trailing comma is perfectly okay, and could even be considered good practice because it makes really easy to extend the array – just add a new line and leave another trailing comma. The only problem is – this trailing comma is not strictly legal in Javascript. However, just about every implementation out there will allow it except for (cue drum roll) Internet Explorer.

So I’ve taken to coding lists like this:

var cars = new Array(
   'Saab' ,
  ,'Volvo'
  ,'BMW'
);

I’ve taken to using the same style pretty much everywhere I have a comma-separated list of things – it’s particularly helpful in SQL server stored procedures.

insert into t_users (
   store_id
   , user_accesslevel
   , user_status
   , user_number
   , user_title
   , user_firstname
   , user_lastname
) values (
   @store_id
   , @user_accesslevel
   , @user_status
   , @user_number
   , @user_title
   , @user_firstname
   , @user_lastname
)

One moving picture is worth many many powerpoint slides

20 Feb 2008


This is a Digg Swarm

Digg is a website which allows its users to select (digg) things that they find interesting. Other users then read and rate these nuggets, and this determines how popular an item is; building a community of users who sieve online content and disgard the junk.

The Digg Swarm shows the process visually. Stories arrive as little circles, and the diggers “swarm” around them. As stories get more popular, they increase in size and as people dig more stories they also increase in size.
It’s a great representation of some complex data relationships; it’s also a really hypnotic display. Courtesy of Stamen Design who are doing lots of wonderful stuff – not just the pretty.

I love visual explanation’s of complex data. The classic of course is this 19th century chart drawn by Charles Joseph Minard. Beginning at the Polish-Russian border, it shows the size of Napolean’s army as the width of a line that shrinks from an initial size of 600,000 in June of 1812 to fewer than 10,000 by early December. As well as the number of troops remaining, the chart also shows geography, time, temperature and the course and direction of the army’s movement.

And here’s an article from the Economist (Dec ’07) which describes a couple of pioneering charts (one from that well-known statistician Florence Nightengale). But I particularly liked this:

And Playfair was already making a leap of abstraction that few of his contemporaries could follow. Using the horizontal and vertical axes to represent time and money was such a novelty that he had to explain it painstakingly in accompanying text. “This method has struck several persons as being fallacious”, he wrote, “because geometrical measurement has not any relation to money or to time; yet here it is made to represent both.”

Faster, Webpage, Faster

5 Oct 2007

, , ,


Steve Sounders gave one of the few developer “how-to” talks based on his book High Performance Web Sites

Basic premise: Performance-tune the front end, not the back end.

When users request a page, about 5-10% of the response time is spent building and delivering the html; the rest of the wait is for the associated content – images, css, javascript etc. So stop worrying about database optimization (just for a minute) and look at your front-end.

14 Rules for doing it better

  1. Fewer HTTP requests
    Combine disparate javascript files – guilty. Yes, I’ll do this
  2. Use a Content Delivery Network to store static files, so you can delivery content to users from the server which is closest to them
    Uh – pass. I’m sure it helps Yahoo and the BBC, but not me.
  3. Use the Expires header
    Okay, this needs to go in. Very helpful for people who’ve already got a primed cache.
  4. Gzip components such as css and javascript files.
    This goes along with number (10) – basically lets work on making those humongous javascript libraries download a little quicker.
  5. Put stylesheets on the top
    Slightly bemused – where else would I put them?
  6. And put javascript files at the bottom
    This is the one which staggered me – I’ve always always stuck all the javascript in the document header and now he’s telling me to move it.
    Two good reasons:

    • Downloading scripts blocks parallel downloading
      Everything else just sits there in the queue and waits patiently until our javascript files (our disperatejavascript files) have finally arrived.
    • Scripts block the page rendering
      The browser won’t render any content under the scripts until the scripts have finished downloading. So get the content down first – that way your users have something to look at while they wait. Um – with some sites this means we’ll get the flash effect – content shows and then it changes dramatically once the javascript kicks in.
  7. Avoid CSS expressions
    Steve, I won’t dream of using css expressions
  8. Javascript and css should be in external files
    Duh!
  9. Reduce DNS lookups
    Okay, so if I’m downloading components from more than one server then DNS lookup for each separate server = delay!
  10. Minify Javascript
    Make that (humongous) javascript file smaller by stripping out all comments, whitespace and newlines before uploading.I really like the Mootools downloader. You pick the components you need, select the compressor you want to use and then get ONE javascript file (fewer http requests!), compressed, minified, whateverified.
  11. Avoid redirects
    I tend to use redirects in code, can be very useful in avoiding that nice little message about “Do you want to resubmit your form” which tends to freak people out.
    But yes, I know that missing off the ‘/’ at the end of directory names means another round trip to the server. And many other lazinesses.
  12. Remove duplicate scripts
    DUH! But apparently this happens. And it’s not uncommon.
  13. Use ETags in your headers
    Entity tags are an http response header that browsers & servers use to determine whether the item in the cache is EXACTLY the same as the one on the server. Think I might pass on this one, but there’s a lot I want to learn about http response headers and apache config files
  14. Make sure the browser can cache Ajax – use the expires header

Things for me to do

  • Combine small javascript files
  • Minify/gzip the large javascript libraries
  • Make more use of the expires header
  • Put javascript at the bottom of the page, not the top
  • Play with yslow

All nicely explained in Best Practices for Speeding Up Your Web Site

And something I didn’t know – there’s a YSlow plugin for firefox which will analyse webpages and tell you where the bottlenecks are.

If it’s worth doing, it’s worth doing in lego

21 Sep 2007


It’s Friday afternoon, and I have so much work I have to do. In honour of procrastination, here’s how some other people have spent their time. Andrew Lipson and Daniel Shiu have made a model of Escher’s “Ascending and Descending” in lego.

Escher

Escher in Lego

Shaenon K. Garrity has written and drawn a spot-on tribute to Edward Gorey. Visually and literally this is a wonderful take on Gorey. Of course, it’s also pretty spot-on for Star Trek.

Things you didn’t want to know about Excel, part 37 of many

3 Sep 2007

, ,


When you try to open a text file or a comma-separated variable (CSV) file in Excel, you may receive the following error message:

SYLK: File format is not valid

This problems occurs because the first two letters in the file are uppercase “I” and “D”

Yes, that’s right – if you output data to a comma-separated text file and if the first fieldname is “ID” then Bang! Crash! Kaboom! Unhelpful error message! Confused user!

MS knowledge base article about the problem http://support.microsoft.com/kb/323626 confirms that this is a problem with Excel 97, 2000, 2002, and 2003. Two possible fixes: you can change the uppercase “ID” to a lowercase “id” or you can put an apostrophe in front of the “ID”.

A few other things I have done this evening:

  • Uploaded pdf files for a customer. (New to the job, got a website to look after, and it’s all rather daunting.)
  • Set up example html pages to demonstrate how width of the browser window will affect the page design and layout.
    For this site, the designer’s original concept filled the page, and it was liquid, so when you resized the browser the webpage changed to fit. This affects text and image placement in ways which people never understand when they’re looking at a jpg or if you’re trying to explain it to them over the telephone; they’ve got to see a real-life example. So I made one.I used my pictures of a knitted dalek instead of the standard stock images – oddly satisfying.
  • Php Problem with one of my sites
    Hosting company upgraded to latest version of PHP (5.2.4) over the weekend, and there’s a bug (http://bugs.php.net/bug.php?id=42523) which means that PHP_SELF isn’t giving the correct name for the executing script.
    Result : none of the forms work properly.
  • Email Problem
    Some emails from site are not arriving. Tracked down to a smtp mail relay problem.
    Note to self: Should have been picked up in testing last week. In future always test with mail to and from addresses which are outside my main domain.
  • Maximum upload size in IIS 6
    Trying to explain settings for AspMaxRequestEntityAllowed and MaxRequestEntityAllowed.
  • Looking at configuration options for a suite of shopping carts, where we may (or may not) want to show prices, quantities, price + quantity (as a dropdown) or none of the above. It all depends. And it’s confusing.
  • Deleted 309 spam comments from the blog moderation queue.
    The usual porn, but there were a suprising number about cars and ringtones. Have downloaded and installed the TanTanNoodles Spam Filter
    http://tantannoodles.com/toolkit/spam-filter/

And my mother is under the impression that I spend my time making websites.

Getting ready for hackday

8 Jun 2007


Hack Day: London, June 16/17 2007

Got the invite and now wondering what on earth I’ve let myself in for. Panic time.

Friday afternoon update

It’s almost here. I’m not ready at all. I’ve booked an hotel (I’m too old to crash out on the floor in a sleeping bag), checked maps and train timetables, bought some little oranges to see me through the day and started panicking. I’m now having visions about 500 programmers, all of whom know each other, and all of whom know what they’re doing. And I’ve just realised that I do not have a digital photo of myself anywhere, so I’ve updated my backnetworkprofile with evil Alice.

My big problem is thinking of something to do – I can take other people’s ideas and run with them, and build an application which works, but I’m not great on inspiration from a standing start. I need an inspirer. Or (honest to God, I didn’t make this word up), some idearation

Children, don’t try this at home

7 Jun 2007

,


Advice on personal productivity from Marc Andreessen (co-founder of Netscape):

… don’t keep a schedule … By not keeping a schedule, I mean: refuse to commit to meetings, appointments, or activities at any set time in any future day.

When someone emails or calls to say, “Let’s meet on Tuesday at 3”, the appropriate response is: “I’m not keeping a schedule for 2007, so I can’t commit to that, but give me a call on Tuesday at 2:45 and if I’m available, I’ll meet with you.”

Of course, this advice comes with lots of caveats, and apparently it doesn’t work for everyone (you don’t say), although it does work for that well-known guru of business productivity, Arnold Schwarzenegger.

I’m still boggling.

Who needs web design?

5 Jun 2007


I loved this – www.noonebelongsheremorethanyou.com Breaks soooo many rules about web design and accessibility blah-blah-blah, but I loved it. Essentially an online ad, but such a witty one.

Getting real with subversion

,


I’m getting serious about using source control (although you can call it version control if you want to) for my projects.I’ve been using subversion for about a year now, and have had a few applications under source control, but since I’m a sole developer there’s never been the urgency you get in a shared environment. In other words, I’ve never had the kind of major disaster which really convinces a development team to take source control seriously. (Usually happens after one programmer realises that their code has been overwritten and tries to murder the culprit.)
But even on my own I’ve found it very very useful.

  • I like the separation between the repository and my working folder
  • I like being able to get a historical list of changes made. And yes, I do log sensible comments, not just ‘code updated’

So, from now on, all live projects are going into source control.

Eric Sink on Source Control

Php Swift Mailer

4 Jun 2007


I’ve recently been using Php Swift Mailer and will now be using it for all my php applications which require email.

The initial impetus was I needed to send mail via a SMTP server which required authentication, and I also wanted to setup and post multipart (text + html) messages and messages with attachments. Swift Mail does both of these very nicely.

It also checks for mail injection attacks, which php mailer doesn’t, so I’ve ditched my own message checking code in its favour. This matters, because I’ve been noticing a LOT of mail injection attacks / site hacking attempts on one of my php sites recently.