July 30, 2007
Introducing XRAY for your browser
I wrote a little while ago how much the curent pace of developments with browsers and devices makes me feel the kind of excitement I felt when CSS was young ;-)
In the spirit of this excitement, I've been working on a new version of Style Master, and started revamping the XRAY features first introduced in version 4. And then it dawned on me that with a bit of work, they could work as "favelets" or "bookmarklets" (is there nothing Tantek didn't invent ;-) ) in (theoretically) any browser. So, I did a bit of work, realised it was doable, then spent a bit more work getting to grips with the canvas element (yeah yeah, not a standard - yet), in particular how it differs in Safari 2 from everywhere else, and some polishing.
What the heck is XRAY anyway? Well, a picture tells a thousand words and all that - but in a nutshell, it is a way to inspect the layout of any element on any web page - both visually and in terms of actual values.
Want to give it a try right now? Provided you are using Safari, the Webkit nightlies, or Mozilla (the platform shouldn't matter), just click this link then wait a moment - you'll receive instructions on screen. Basically, just click anywhere on the page, and see what happens.
Turn XRAY off by closing the window which opens.
What to install it permanently so you can use it with any page? Just drag the link to your bookmarks bar (a bug in Safari 3 on Windows means that won't work yet - you'll have to manually paste the link url into the address field for a page should you want to XRAY in Safari on Windows)
More detail available at the westciv site.
Love to hear people's thoughts - and please send suggestions, bug reports, questions, comments and queries.
Love the fact that the web still excites me, after so many years ;-)
July 23, 2007
Geek Trivia Night
Know who invented the Internet? Any ideas what WWW stands for? Clued up on who the first blogger was?
If so, keep August 9th free, as News Digital Media and Web Directions are hosting a night of networking for fun and profit on August 9 at the Vault Hotel in Sydney. Compete with your peers in a world first: a trivia night where all the questions will focus on the web, tech, and online life.
There'll be free drinks and food and all manner of awesome prizes, so be sure to RSVP now as numbers are most certainly limited.
Don't worry about forming teams or otherwise, this will all get sorted out on the night. Just bring yourself and your friends, and a bag to carry home all your bounty.
What: Geek Trivia Night
When: August 9, from 5.30 for 6.15 start
Who: Anyone who thinks they could have a stab at answering the question "Who invented the internet?"
Where: Downstairs at the Vault Hotel, 122 Pitt St Sydney (Map)
July 17, 2007
McFarlane Prize 2007 - Nominations now open
Nominations have just opened for the McFarlane Prize for 2007. This prize for excellence in Australian web design will be awarded to an Australian designer or team for a site launched or significantly upgraded between August 1 2006 and July 31 2007.
The winner of the prize will be announced during Web Directions South, on September 27.
In 2006, its first year, the prize was an enormous success, bringing attention as it did to web standards and accessibility, in combination with excellence in user experience design, and giving recognition to those people and organisations who genuinely address these areas in their work.
A very high standard was set with the entries last year, but we fully expect that standard to be exceeded in 2007.
Full details are available at the McFarlane Prize site, but key dates are as follows:
August 31 - Nominations close
September 22 - Shortlist announced
September 27 - Winner of the McFarlane Prize for 2007 announced
July 15, 2007
Style Master testers wanted
I've been working on a new version of Style Master for quite some time. In fact, I'd done a great deal of work on version 5 when Safari 3, and the whole iPhone thing happened. So, I backtracked a bit, and started thinking about the implications of these developments on CSS 3, the mobile web, and the web more generally.
While its not quite ready for widespread release, the next version of Style Master for the Mac is ready to have some tire kicking done on it (windows won't be too far off - even though we try to keep major releases in lock step, I tend to do a fair bit of development on one platform, then the other, rather than developing in tandem.).
So, if you are interested, drop me an email.
I'm actually really excited about this release. In some ways, with Safari 3 and the iPhone, as well as the good work Opera are doing both with their desktop and mobile/mini versions, and the coming of Firefox 3 and its new rendering engine, it feels much more like the rapidly evolving and exciting late 90's in terms of CSS and web design, than the last few years of more solid, steady progression.
CSS3 support charts
While it might seem a little premature to be delving into CSS3 support in current browsers, when CSS2 support is far from perfect in some of them, both Safari and Mozilla, particularly Safari, have been adding support for some of the highest visual impact features of CSS 3. What's good to see about the support that is out there is that it inherently supports the idea of "progressive enhancement". By using text-shadow, border-radius, box-shadow and the like, where a browser supports these, the viewer sees the design in all its CSS3 glory. Where the feature is not supported, they simply don't know the difference.
I've put together some tests for the most commonly implemented properties of CSS3, and a chart of which browsers (Safari 2/3/iPhone, Mozilla, Opera 9, IE7) support them.
All of the features can be used without much concern for their impact on usability and accessibility.
One case in which you need to be mindful is in the use of multiple backgrounds. In CSS 3 you can have several background images layered on top of one another for the same element. You do this by using comma separated values for the background property like this
background: url('backimages/green.png') no-repeat, url('backimages/orange.png') no-repeat, url('backimages/purple.png') no-repeat, url('backimages/aqua.png') no-repeat top left;
Unfortunately, Mozilla and Opera (but not IE 7) display no background image at all in this case. IE 7 displays the first image, as you might expect, but the first image is the front most one you want to display, which may not be the one you want to display if only one is to be displayed.
Adding a background image in the same statement doesn't work in Opera or Mozilla either.
As a workaround, create a statement with the same selector before this one in the CSS, then give it the background image you want to display if only one will be displayed. Because the specificity of this statement is lower than one with the same selector which follows, where the multiple background is supported the browser will use that property.
This still leaves the issue of what to do about IE, when the first background image is not the one you want displayed. If nothing else, make sure you have a background color, so that your text is legible.
On a related note, I recently wrote an article on just what screen real estate is available on the iPhone for pages in Safari, and about Safari's scaling behavior, and ways to work with it.
You might also find these sites useful if looking for more information about CSS 3 support in various browsers
CSS3.info "Everything you need to know about CSS 3" (and were too afraid to ask?)
Mozilla's documentation of their extensions to CSS
Qooxdoo's Webkit style documentation
Make the most of the iPhone SDK (we know now that the assumption that iPhone Safari has the same webkit as Safari 3 is not true right now. Surely some time soon via software upgrades?)
iPhoneWebDev. A mailing list, bog, examples and resources.
Any other good resources out there you know of? Leave a comment.
July 09, 2007
New workshop for Web Directions - Beginning Ruby on Rails
Maintaining what has become a tradition, we have a late addition to the Web Directions South Workshop program for this year: Dr Nic Williams will be hosting Beginning Ruby on Rails on Tuesday September 25.
Anyone involved with the web would be aware of the phenomenal growth in popularity over the last several years of this full-featured, industrial-strength framework for building web applications.
The really good news for developers who are keen to give it a go is that it is very fast to learn and get started. Useful web apps can be developed after one or two days of education. This workshop is an outstanding opportunity to get that education right here in Australia with one of the most well respected members of the Ruby on Rails community, Dr Nic Williams.
The full day workshop will be perfect for anyone who has a desire to find out more about Ruby on Rails, and put it into practice.
If you have
- basic programming skills in any language
- an understanding of object-orientation
- knowledge of database design and access using SQL
then don't miss this chance to participate in an enlightening, practical day that will stand you in good stead as you move deeper into developing apps with this new framework.
Beginning Ruby on Rails is priced very reasonably at $395 for conference attendees, or attendees of another workshop, $495 standalone.
If you are already attending the conference or another workshop, just register for this new one with the same address and the discount will be applied automatically. And please do get in touch if you would like to swap into Beginning Ruby on Rails from another workshop, as this can be arranged, no problem.
July 05, 2007
Some practicalities of Safari and web content support on the iPhone
The last few days I've been trying to get to grips with some of the technical details of how Safari on the iPhone works. I've started putting some of what has been learned into some articles, which will be published over at westciv, where most of my technical articles tend to be archived.
In the first, I look specifically at how pages are displayed on the iPhone - they are in fact scaled so that if at all possible, the entire page width fits onto the screen. This has particular implications for people developing content specifically for the iPhone, and there are some techniques for working around this default scaling which is not always ideal.
In later articles, I'll be covering what support for CSS3 selectors and properties Safari on the iPhone has. Despite appearances, it seems quite different from the current betas of Safari 3 on Mac and Windows. I'll also look at how you can use a feature of CSS3, Media Queries, to target style sheets specifically for the iPhone, and hide them from other browsers, even if they don't support media queries, or to hide style sheets from the iPhone.
I hope people find them useful.