Tag Archives: web development

Learning SVG

Man painting a pictureI thought I’d share the resources that have most helped me learn SVG.

It’s an old technology but getting a lot of interest recently so I finally got round to doing some experimenting myself (so far an SVG game and a geolocation demo). I still have a long way to go but already I’ve found myself returning to the same few sites when I get stuck. Here they are, in order of complexity:

  • SVGBasics
    Each page is fairly short but it covers the basics (hence the name) and is useful for quickly referring to when you forget an attribute name or syntax.
  • carto:net
    Not quite as user-friendly but much more in-depth. The section I keep going back to is Manipulating SVG Documents Using ECMAScript because, with Internet Explorer 9 supporting SVG but not SMIL, this is what you need if you want animation to work in IE.
  • SVG Essentials
    Hats off to O’Reilly for making a whole book freely available online. As you’d expect, professionally put together with lots of code snippets and diagrams. There’s also a hard copy version available.

Of course, working for Opera I should also point you to the SVG section of our developer reference site (dev.opera.com). Finally, credit for the graphic goes to Nicu Buculei who has his own collection of public domain SVG clipart.

Do you know of any other good resources or examples for people to learn from? Please add them in the comments.

How to do alphanumeric validation with PHP

Hardly worth a whole blog post but it may help somebody…

is_numeric() is the function to use for validating numeric-only user input with PHP but unfortunately there is no is_alphanumeric(). Or so I thought.

Meet ctype_alnum()

Here’s an example of its usage:

if (ctype_alnum($_POST['username'])) {
    echo "Thanks - that's a good username.";
} else {
    echo "The username must contain only letters and numbers.";
}

I’ve seen lots of people using regular expressions to get round this, myself included, and it’s not complicated but it’s still nice to simplify where possible.

Free online web development checkers

A green checkmark

Inspired by a forum post I came across the other day I’ve compiled a list of free online checkers/validators for web developers. Please let me know if you’re aware of others. (Updated 16th September 2010)

(X)HTML

XML/FEEDS

CSS

MOBILE

ACCESSIBILITY

LINKS

MICROFORMATS

OTHER

Debug menu, where have you been all my life?!

By accident, I came across a feature today which has pretty much made Firefox redundant for me.

I’m sure I’m not alone in reverting to Firefox occasionally for one or two key features that don’t exist in Opera (or at least I haven’t found them yet). The Web Developer toolbar was my addictive feature but without wishing to sound like a cheesy commercial, all that changed when I found the Dragonfly team’s debug menu.

Although it doesn’t do everything the Web Developer toolbar can do, it’s got plenty to keep me productive and happy in a single browser. The only time I need fire up an orange fox, blue “e”, etc. is for cross-browser testing but in an ideal world, that would be redundant too.

I highly recommend you try it out and here’s an updated version of the menu which has the addition of a feed validator, W3C HTML5 validator, headers checker and window resize options (thanks Christian).