Chris Casciano’s Place Name Here

For a recent project I was given the task of creating a lightbox style help dialog. The dialog was intended to highlight content of an odd or unknown size in addition to the more controlled information box. Essentially a figure in the shape of 2 adjacent rectangles of variable sizes that needed to be highlighted. The backbreaker — the 8 sided popup needed a large, opaque & diffuse drop shadow to make it stand out off the content.

This was the perfect use case for CSS box-shadow, but its also a public facing promotional site that for good reasons couldn’t just thumb its nose atMicrosoft Internet Explorer. The value proposition for any new CSS property – to make things like shadows and gradients easy to develop and manage with one rule replacing old complex solutions – is lost if you still have to code for that old complex solution juggling multiple PNG images and layering in added markup. Still, that work sounded painful to write for IE6, IE7 & IE8 as well as Firefox, Safari and Chrome so I started looking for an alternative in the proprietary MS filters which are supported in Internet Explorer 5.5 and up.

After working with some HTML5 web forms attributes on a small project I have come to the conclusion that for now it is best to…

Use <input required="required"> not <input required>

Some backstory — A few weeks back I was working on a small non-public web site heavy on forms and thought it would be a good fit as an HTML5 test case. For a variety of technical reasons [input formatting in particular] I didn’t go whole hog into it using all the various input type attributes, but did use the required attribute as a hook for JavaScript based form validation and styling. What I found was that generally there was adequate support for styling and selecting based on this new, and unknown to many browsers, required attribute — Yay! we can use this stuff today! However, there were a few browser CSS selector and jQuery 1.3.2 quirks that lead me to the conclusion that it is safest to use the expanded form of the required attribute and not the minimized or shorter form as HTML5 allows. This gives you the most solid and flexible options when choosing selectors in CSS or jQuery code.

On Friday Nov. 20th, ending a wall to wall week of conferences and general geeking out about web technologies I had the pleasure of both attending and speaking at Standards-Next at the Time-Life building in Manhattan. Industry big shots Håkon Wium Lie [inventor of CSS! OMG!], Molly Holzschlag, Andy Budd and Pete LePage of Microsoft [sans flak jacket] guided an enthusiastic audience through the tools we’ll be using to build web sites over the next few years.

With some recent projects — like the redesign of Hike New Jersey and a little Flickr View Larger tool — I’ve had the opportunity to try a few bleeding edge techniques as a means of enhancing the look of a site while keeping code and maintenance down. In his recent book Handcrafted CSS, Dan Cederholm calls this ‘progressive enrichment’ — or providing a little extra spice in the visuals for the few browsers that can follow along, while functionality, page structure, and general styling rules remain at some stated baseline across browsers. While working with these new properties like box-shadow and rgba colors I hit a few quirks that I thought I’d share.

• Bow Ties
• Stars
• Stars 2

This week saw the end of winter mixing with the first day of spring — in the northeast that meant snowflakes on the few flowers that have started poking out. There’s also been a flurry of activity on the net from site launches to reports from the SXSWi and MIX09 conferences and some other good stuff I thought needed to be called out.

Sitepoint sale helping the Australian Red Cross.

Via Molly comes news that Australian based technical book publisher Sitepoint is raising money for the Australian Red Cross in the name of the disastrous fires in Victoria. The Sale — “For just $29.95 you can get 5 downloadable PDF books“http://5for1.aws.sitepoint.com/ — that’s a great deal for you and a great deal for the Red Cross.

Our ambitious plan is to raise over US$50,000. Every single cent generated from this promotion will go directly to the bushfire relief effort—so if you spend $29.95 purchasing 5 books from SitePoint, the whole $29.95 will go directly to supporting this cause. We feel that’s the least we can do.

Included in the sale are books like “The Art & Science Of CSS”, Ian Lloyd’s “Build Your Own Web Site The Right Way Using HTML & CSS” and “The Art & Science of JavaScript”. The sale is on now and goes through Friday the 13th.

If technical books aren’t your thing, donate directly to the Austrailian Red Cross Victorian Brush Fire Appeal 2009.

The Select Series supports The Patrick O’Brien Foundation

The Select Series by Threadless has just launched the “Storytellers Series” a collection of 4 t-shirts, curated by ALS sufferer and filmmaker Patrick O’Brien. All proceeds going towards the PBoF and helping with the production costs of Patrick’s movie about living with Lou Gehrig’s Disease.

For more information and direct donations visit the Patrick O’Brien Foundation website.

So its a bit of a slow work day with a few clients off for MLK day here in the states and I’ve found myself doing some pruning of the feeds I keep track of. While looking at the sites and who hasn’t update in months I’m realizing I’ve been reading a declining number of articles and tutorials on web development and web standards topics from people working on the front lines or the bleeding edge.

The big sites — Ajaxian, A List Apart, ReadWriteWeb, etc. — are prolific as they ever have been, but I’m missing the more personal insights that once filled my reader to the brim.

Not All Quiet

I do have to say its not all doom and gloom. Some of the old standbys that everyone knows pop up with a great post here and there and there are others who are still going strong. Among those I see regular interesting updates from I’d have to suggest Anne van Kesteren on the bleeding edge of the web standards world, Christopher Fahey who has picked it back up at graphpaper.com on the design & UX side, and coworkers Brian and Ben help keep me up on PHP.

Your Suggestions, Please

So what are your favorite blogs to read for keeping your skills sharp? Who is writing about experimenting with CSS, HTML, Canvas, etc? Where are you learning about the ins and outs of JavaScript techniques? Who is breaking down accessibility for the every day developer?

Even if its you and you’d like to do a bit of self promotion, please post a link in the comments.

Some of the most powerful CSS2 and CSS3 selectors defined in the specs are avoided by web developers because they’re not supported by commonly used web browsers. Sometimes in order to work around these shortfalls solutions with large overhead such as javascript libraries are used or code becomes littered with many specialized classes and sites become difficult to maintain.

Over time I’ve developed the habit of using specifically named class attributes to represent exactly where a pseudo-class would have applied. To aid in clarity and maintenance these classes are named with the same text as the name of the pseudo-class being represented.

Drew McLellan has for the 4th year running wrangled a bunch of great authors and launched the Web Development Advent Calendar 24ways.

It isn’t December yet [in this time zone anyways] but the first day’s article has been posted for your enjoyment — Easing The Path from Design to Development. This is a nice piece on interaction between different sides of the site building process, something I’m intimately familiar with. A few pointers from my experience that are worth adding to Drew’s comments…

Creating a site for yourself has always been a refreshing outlet for web builders. Without rooms of stakeholders, you alone have the control over which technologies to use, what features to include and what browsers to support. Part of that control is deciding how you are going to deal with browser bugs and often having the freedom to take the ‘high road’ and leave defects be so that they can be used for bug reporting, test cases, and to help prod browser vendors into maybe making those bugs a higher priority.

While I have no desire to work around them for my personal site, I think its worth it to point out and work to get these bugs fixed at the source, including the following 2 CSS bugs with visible on the new Place Name Here that I decided to let be — one in Microsoft Internet Explorer 8 beta 2 and the other in Google Chrome.

:(

Word from NetNewsWire developer Brent Simmons is that the next update to the great OS X feed reader will drop microformats support.

Those who read photography blogs may have already come across the dustup, but the discussion over [ab]use of the Flickr API and application developers not respecting copyright on content should be of interest to the web developers out there as well.

The discussion centers around the realization that last weekend Every Flickr Photo Ended Up on Sale as cell phone wallpaper at MyxerTones.com

This last week saw two big JavaScript projects debut with releases and live code. John Resig has released Processing.js and Richard Herrera has introduced the Flow library.

So here I am a couple weeks after the IE team announced through a variety of different channels their proposal to help cushion the blow of their next browser release through the use of a META declaration and HTTP header, “X-UA-Compatible” describing what browser(s) the page and its associated styles and javascript files target.

I’ve got plenty of thoughts on why vendor extensions and related adjustments to behavior are bad. I also have some concerns over this one in particular. Extensions, and more general workarounds and hacks of all kinds [vendor driven or not] get buried into code, reused, copy and pasted, dropped in application templates, removed by accident, and generally used by people who don’t know why they’re doing it, but instead just because it works. As anything other then a very temporary, one time use solution this doesn’t seem to me to solve any problems that are inherent with either web standards or an ecosystem where content publishers are open to who they let see their content. But let me not get too far off onto that tangent and consider first that the proposed solution goes through.

For the moment I want to focus on the practical — what does the additional rendering mode and the ability to switch to it via META declaration mean to me as a working web developer?

Through ALA and the IEBlog comes a proposal for a new mechanic of handling the backwards compatibility of web sites — pushing the familiar DOCTYPE Switch aside and going with a new mechanism of declaring target browser versions via meta tag.

• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 by Aaron Gustafson at A List Apart
• From Switches to Targets: A Standardista’s Journey by Eric Meyer at A List Apart
• Compatibility and IE8 by Chris Wilson at the IEBlog
• Opting-in to standards support and Microsoft’s Version Targeting Proposal at the WaSP

The perfect solution or the last sign of the web standards apocalypse? If you’ve got an opinion let it be heard.

Molly recently lamented that twitter has sucked the blogging out of her. I’ve been feeling the same way for some time, though I was never as prolific a writer has she is. Though for me I think it was Web 2.0 that has sucked the blogging out of me, and unfortunately the slow down isn’t all that recent.

Don’t miss these!

• Joe Hewitt releases a script for Firebug for iPhone
• jQuery 1.1.3 released
• Abe Fetting blogs some other iPhone scripting findings including keypress and drag&drop related events.

I’m reading John Resig’s Pro JavaScript Techniques and really digging it. Expect a review in the coming weeks.

I didn’t want to let today go by without a post acknowledging the 2nd birthday of Microformats.org and the related community.

Thought the first year was huge for microformats, the second one has seen additional growth in all areas from format maturity, to huge growth in the community and sites using various markup constructs, to greater support from application vendors.

Here’s a recap of a few recent news items or tidbits incase you missed them.

• John Allsopp’s book on Microformats was published
• NetNewsWire 3.0 is supporting microformats thus avoiding the need for one of my earlier hacks
• Other applications like Firefox are promising support in future releases
• Sites keep adopting various formats — from new sites like Twitter [hCard, XFN & hAtom] to older standbys like LinkedIn with 9million+ hResume based profiles!

Drew McClellan has just posted The State of Textpattern over on his site. Drew is not a core TXP developer, but a long time user who has seen the product change and change hands over its life. His concerns are no surprise to me, as we’ve often gone back and forth over IM trying to ease each other’s frustration with the state of the project.

I think Drew has covered most of my frustrations in his State of Textpattern address. I’ve been using it since the Place Name Here redesign in late 2004, and evaluated it for other projects before and used it since. In that time there are some enhancements to the sites I’ve done via other’s plugins, plugins written myself after I’ve seen a need, times when I’ve done things simply to participate in the community and make it look like it had some life [like the theme contest and been in the code enough to know how it works and make a fair amount of my own customizations.

But as time has passed, like Drew, I find myself both concerned and hesitant about continuing to contribute in any way, or keeping it in future plans for my own sites.

Bulletproof Ajax is a newly released book from New Riders and author [and fellow WaSP member] Jeremy Keith. Devoted to teaching the proper way to design for and use the technologies behind everyone’s current favorite buzzword. If you’re looking for a step by step guide on how to recreate your companies Flash application click for click this probably isn’t going to help too much (other then perhaps help push you into the direction of rethinking your approach, or just going back to your old friend), but instead it does a wonderful job of breaking down the systems that make Ajax work and putting them in context — that being a new dynamic way of enhancing, interacting with and manipulating web documents.

Read on for full review

Tomorrow, April 5th, we will see the return of CSS Naked Day a novel idea where participating sites will remove all styling information in an effort to promote standards, get a little self promotion, and have a little fun. My take, reposted from the discussion at webstandards.org, is below. I said a bit more about it last year in I’m Not Naked, most of which still applies.

It’s meant to illustrate the importance of CSS and graceful degradation.

My interpretation on it is that it is meant to illustrate the importance of good HTML and markup practices as much as anything else — that CSS is great, but it should overshadow it all. Or maybe that’s just my own philosophy bleeding through. I surely would have called it “Naked HTML day” had I thought the idea up, and explicitly included scripting in the ’stripped’ category.

Quickies! Don’t miss these.

Ethan Marcotte just posted his slides from his presentation today at An Event Apart Boston. Grab them from this post. He’s been busy, also writing Where Our Standards Went Wrong for A List Apart.

And John Allsopp wraps up links to microformat presentations given around the world by Tantek Çelik, Dmitry Baranovski and himself over at Microformatique. John too has been busy, his new book, Microformats: Empowering Your Markup for Web 2.0 was released this week.

I’ve just updated my microformat plugin for the textpattern CMS and blogging tool. This update is a maintenance fix to add support for Textpattern v1.0.4 and some changes made in the way tag helpers are built. Users of older versions of TXP should stick with the 1.0 version of the plugin.

Oops. Looks like I brushed aside the browser report updates around here last month. That’s OK, cause its all up to date now — both here and here. Like most months I’ve had to update the script I use just a bit to account for new user agents that come up this time with a few more bots trying to spoof Firefox, and a few new sightings in the “fun” category:

• Opera/9.00 (Nintendo Wii; U; ; 1309-9; en)
• Mozilla/5.0 (PLAYSTATION 3; 1.00)

[Wondering if that means I get to write off my Wii as a business expense?]

Interrupting the dearth of posts to bring you this important announcement… 24 Ways is back this year with a round of daily web development related articles. So far we’ve got a few great pieces, with a mix of immediately useful information and some things to look forward to.

• Day 5 brings Accessible Dynamic Links by Mike Davies covers a few different ways to enhance the links around your site.
• Rachel Andrew contributed Day 2 with the simple but powerful Faster Development with CSS Constants
• And as a look into what is coming up in the future (or present for Safari users) of CSS Andy Budd wrote Rounded Corner Boxes the CSS3 Way

And don’t overlook the comments, which can be as interesting as the pieces themselves.

Andy Clarke has posted a quick write up of his approach to browser testing new site designs.

I’ve gushed here numerous times about the Mozilla / Firefox DOM Inspector tool and how the insights it provides into the way the page is parsed and rendered by Gecko are indispensable when building a web site. What I haven’t spent nearly enough time doing is gushing about similar tools in other browsers—specifically Internet Explorer and Safari.