Riddle's Em Calculator is probably the one thing I use most in terms of web-based widgety calculators.
It's very clean, super-intuitive (give it a try, although you have already) and has some nice extras like being able to round to your choice of decimal places.
In fact it had become so much part of my work routine that when it went down the other day, I was more than a little screwed - I haven't done manual em calculations for a while, as this thing makes it so easy...
]]>This is actually a bloody handy piece of functionality that shows your browser's support for various css selectors.
Recently the css3.info site has had a lovely makeover... except their reskin style overwrites the support / no support / buggy indication in the
test :(
Now all browsers support everything - awesome!
Strip out all.css using Firebug, or your dev tool of choice and you'll see what I mean...
[Edit 17-11-08] Thankfully everything's back to normal now, and the tool is showing correct colours and so on. Excellent!
]]>
The Camden Woodcraft Folk got themselves an Expression Engine driven site, which went live yesterday. Built by yours truly, designed-by-commitee by myself and the redoubtable Ms Clare Turner...
The Woodcraft Folk is an educational movement for children and young people, designed to develop self-confidence and activity in society, with the aim of building a world based on equality, friendship, peace and co-operation.
The Woodcraft Folk was founded in 1925 as an alternative to the military style youth groups of the time. We do not have a set uniform; instead our members can choose to wear a hoodie or t-shirts designed by our members. We are for boys and girls. Contrary to the myth, we are not a woodwork club. "Woodcraft" in this context meant the skill of living in the open air, close to nature. The Woodcraft Folk, like other youth movements, traces its origins back to Ernest Thompson Seton's pioneering work.
Our motto is "Span the World with Friendship".
Coming from a world where the Cubs and Scouts held sway (i.e. Berkshire) it's always surprising just how many people know all about these guys. Anyway, they are all good - find out more at www.camdenwoodcraftfolk.org.uk.
The site is a simple build on top of EE, there's a few different blogs for each section - news, events, etc. As usual, the Leevi Graham TinyMCE plugin helps out a lot in giving the editors some (finely tuned) freedom. There's also a wee Freeform in there for contacting the group.
At the moment the build is very simple - just a small content managed site. The future possibly holds a lot more in the way of member areas, forums, mailing lists and all kinds of exciting geekery! Stay tuned...
]]>
Once upon a time, all front-end web developers used to get worried about html dropdown menus going over Flash movies. Or anything html going over them for that matter.
Time and work drags on, and we have wmode="transparent", swfobject and a lot more confidence. So it was without too much trepidation that I approched some very "designed" dropdown menus at work - you know the sort, rounded corners, translucency, the usual fun and games. And it's while building and testing these that I started to have some "fun".
There's a rendering issue on Mac browsers, where dropdown menus using "fancy backgrounds" and rollover sprites flicker pretty badly when over an swf. In some cases it's enough to make the menu unusable. The Adobe site menus on the homepage are a good place to see this in action if you've got a Mac. But it has to be a certain kind of Mac - and this is where the "fun" starts.
Our own project's dropdown menus were basically shit on my test Mac, to the point of unusability. But the design's signed off, the menus are fine on Windows. No retreat, no surrender.
After initially looking at various browsers and flash player versions in the name of "research", the flicker effect got pinned down to an illogical list of browsers (and this is obviously not an exhaustive one, you can tell by reading it):
It was the Firefox bit that got me. How can a browser introduce this issue after it's been fine in an earlier incarnation?
Oh well, these things happen all the time - we'll just turn off the dropdown menus if you're on a mac, the traffic stats can back this decision up as it's a niche platform in terms of this site's visitors. Which is a bit of a crappy solution to say the least, so a little bit more thought and some more research was applied.
The upshot of what's been found out is that the flicker bug seems to appear on PPC Macs, and not on newer Intel based machines. My "death's door" G4 Mini tester didn't like it, neither did a fancy G5 tower. But any Intel Mac I could lay my mitts on was happy as larry.
It also turns out you can still serve menus to PPC users by simplifying the area that will go over the swf to the point of "just a coloured background box with links in" - as I found by simply stripping back each element piece by piece. But at least something's working for the PPC crowd, and that's better than bugger-all.
Our own compromise is to sniff for "macppc" navigator.platform (I know I know) and if we hit it, simply substitute the css class for the menu - for instance from ".dropdown" to ".fallback" or something along those lines. The fallback class is the stripped back dropdown. This way Mac users all still get the dropdown, and only PPC based Macs get a reduced experience. You could take this approach much further if you wished, basically going to browser version rather than just the platform. However the PPC is no longer in production, so it doesn't seem such a great idea to go back to the ugly old sniffing days to that extent unless it's really critical.
Hopefully someone out there might find this vaguely useful - it's actually renewed my confidence now the issue's pinned down and there's a workaround for it 
Not too many moons ago, the new Design UK site launched
Built on top of the newer version of the DUK LavaSuite cms system, which thanks to Mr Mark Drew and the peeps upstairs, is proving much more of a pleasure to use than it used to be...
Front end build by yours truly, with a loving smatter of design tweaks and IA work 
Zozobra is another supergroup under the Hydrahead label - members of Old Man Gloom, Cave In, Isis and all that...
The new album is a bit of a stonker - have a listen on the wee promo site: www.zozobra-birdofprey.com...
It's a bit more of a chugfest that the original Harmonic Tremors, but that's all for the greater good. Good album for writing javascript I found... Not sure what that implies really.
]]>With a fresh new email template design and some very old school html (you know what I mean if you've coded an html email), they are proving a bit of a success.
Visuals to come... or why not subscribe? You might find someting interesting in Academia...
]]>
It was spam
One of the standouts at this year's Latitude festival - Mira Calix in the Music & Film tent.
Helping a lot were some really beautiful visuals by some people called Flat-E - and on their site there's a video of the Mira Calix tour work. Amazing.
]]>
It's the A List Apart survey... for 2008
]]>
Here's the first review to kick off. It's of a book called "High Performance Web Sites: Essential Knowledge for Frontend Engineers"
It's really good, you should read it.
I'd been using the Firebug extension for quite a while, and heard about Yahoo's YSlow piggy-back plugin which analyses a site's performance and provides lots of handy data and tools.
Load a page, check YSlow, and find out the page seems to have a crap mark, like an "F" or something, and 13 sub items. Some of these items are quite obvious - like "GZip components" or "make fewer http requests" - and relatively straightforward to implement. However there are some mystery meat items there - like "configure ETags". Personally I had no idea what that meant at all, so pretty much started getting "C" grades by fixing the simple stuff.
It turns out there's a complementary book, which goes into detail about the research and thinking that led to YSlow, and behind that the desire to get the best performance possible from a website. It's quite thin too, which seems to be either a good sign or an indicator that what's inside is top-level mindfuck. This one (for Brains here anyway) contains a bit of both.
Probably one of the best things about the book is the way it gives you an insight into the way browsers actually function, without killing you stone dead. An overview of the process of downloading a web page in a browser is fundamentally important, and here are laid out in a helpful way. Know your medium etc.
I've been putting as much of these steps into practice as possible on recent builds, and there's a really noticeable jump in speed and responsiveness. It's also good to have this stuff in mind when developing - I guess it's like the 'ol gifs-n-jpegs, where the considerations should simply become habit.
The one that got me, and seems to have a huge effect: "Put JS at the bottom".
A big thumbs up for this one, in fact a "must read".
]]>Thanks Mr Rob Mann for the lovely photo, hope that wasn't the last time these get ridden...
]]>This version isn't a huge departure from the previous one, but my God I had to get rid of all those rounded panels. Sheesh.
Having shifted into a bit of a different work pattern - part time - I figured why not? It was starting to look a bit tired anyway.
Just as everyone starts to get a bit weary and slow down on the blog habit, well what a great time to finally start one up. Hmmm.
The theory being that Demotive will have news, reviews, handy links, the odd picture(!), almost like a tumblelog with verbal diarrhea. So not quite a blog then - excuses already.
So would you like to geek out a bit on the new version build? If so, read on. If not, things aren't getting any more interesting from here downwards.
The new site's built on Expression Engine, after having read some good things about it, and although there's a bit of a learning curve I'm sold.
I don't think I've scratched the surface of it yet, but after an abortive grapple early on with WordPress and then a slightly more civilised Gelato install, it seems like the perfect fit. Why? Well...
Anyway, it's good, and the core version is free for gawd's sake!
Otherwise it's html/css all the way, with a tiny bit of jQuery farting about on top. I also had a play with the feeds from Last.fm, which was fun if you like that sort of thing although they might be too revealing, I dunno.
]]>