Web Info & Tutorials

Brian Dillard heard the call and has volunteered to take over maintenance and development of Brad Neuberg’s Really Simple History framework. RSH was created to provide back-button and bookmarking support for Ajax applications.

Brad’s been too busy with other projects to upgrade RSH for a variety of new and existing browsers: IE7, Opera, Safari/Mac and Safari/Windows. I asked Brad to let me take care of his baby for several reasons. For one thing, I’ve been an enthusiastic user of the library. For another, I’ve been wanting to get involved on a more formal basis with open-source JavaScript projecst. But most of all, I believe RSH remains a great tool for folks who want a solution to the Ajax history issue without the overhead of a larger Ajax framework.

I’m so glad that Brad’s work will be carried on and I believe that Brian will be a fantastic steward for RSH!

Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.

These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)

How It Works

We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match.

Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that can’t be achieved with display: none; or visibility: hidden;).

Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.

ActiveState have announced the launch of The Open Komodo Project which will offer an open source code base from which to develop integrated development environments.

The Open Komodo Project, based on the award-winning Komodo IDE, is a new initiative by ActiveState to create an open source platform for building developer environments. The Open Komodo Project will create Firefox-integrated web developer tools that support the open web.

The Open Komodo Project aims to create a full-featured web development tool for client-side web development integrated with Firefox©, Mozilla’s free, open source web browser, and based on the award-winning Komodo IDE. This new tool, codenamed Komodo Snapdragon, will be developed in collaboration with the open source community.

Best known for their ActivePerl, Komodo Edit and Komodo IDE development tools, ActiveState wanted to give back to the open source community which has long supported their products and efforts:

Meanwhile, our friends within the Mozilla Community were looking for tools and applications that advocate the open web. Since Komodo is built on the Mozilla platform and ActiveState has had a long-standing relationship with the open source community, making Komodo a part of the technology stack for the open web was an obvious choice, one that benefits both the open source community and ActiveState.

This announcement even got Dojo’s Alex Russell all worked up:

Very few of the Web IDE vendors seem to really “get” the web, and along with the folks at Aptana and Panic, the ActiveState bunch have impressed the hell out of me with their constant support of Open Source, deep understanding of why webdev sucks, and what they can do to fix it.

The first technology preview is expected to be ready by early November along with access to a public source repository and the Open Komodo website.

Full information about the project can be found on their project page

One of the reason's I like reading articles by Christian Heilmann is because of his innovative solutions to common problems and his ability to clearly explain the rationale behind the solutions. I was first exposed to this when I was reading his book, Beginning JavaScript with DOM Scripting and Ajax. I became a fan then and continue to enjoy his articles.

Christian recently had to tackle a problem where ensuring that the layout for an ad campaign just wasn't as easy as expected:

One of these problems we came across recently was that an advertising campaign had a small banner in one column of the layout and a large banner in another column. This wouldn’t be a problem, but the ads required that the banners line up on the bottom for the “wow” effect to happen. The problem is clear to anyone who ever worked in a web environment with third-party-maintained content.

The 3rd party content was causing the layout to shift depending on the font size and data elements being presented.

Christian and the Yahoo team leveraged CSS and the YUI Dom Collection’s Region methods to control the layout:

CSS + JavaScript Solution:

So by leveraging methods of the Region class, they were able to dynamically adjust the elements of the page to ensure that the layout remained consistent, irregardless of what was passed by the 3rd party:

This little gem in the YUI allows you to read out the position and size of an element on the screen at any moment in time regardless of its positioning. Region works the same for absolutely, relatively or statically positioned elements, all it expects is the element to be available and not hidden with display:none.

By now, most have read Yahoo!'s Thirteen Simple Rules for Speeding Up Your Web Site as well as used the YSlow Firefox extension to determine how pages are performing.

Sometimes, though, its just better to actually see and hear the concepts to get a good grasp of things. Now you can see a video of Steve Souders, Chief Performance Yahoo for Yahoo! and author of High Performance Web Sites, going into details about Yahoo!'s best practices for providing optimal performance on their site.

Yahoo! is famous for having a comprehensive organisation patterns library providing patterns for a difference of ingest cases. Their newest ornament aims to face Digg & Reddit types of scenarios in which a individual wants to “promote a portion example of noesis in a accord bet of submissions”.

Rationale

This ornament has become to popularity fresh (most notably on link-popularity sites Digg, Reddit, Newsvine, among others). Such systems for agglomerated pick are a beatific artefact to encourage accord participation, and wage a low-cost effectuation for surfacing favourite content. Note, however, that favourite noesis does not needs equal to calibre content, so no promises of noesis calibre should be made.

Use When

Use this resolution when

• Users in the accord hit the knowledge to accede noesis to a ‘pool’ of resources.
• Some egalitarian modify of sentiment is needed, to earmark the accord to study the prejudiced calibre of digit humbleness to another.
• A sizeable-enough accord is required. Ideally, favourite submissions in the bet should obtain significantly more (dozens, hundreds?) votes than non-popular ones, in visit to attain comparisons meaningful.

In constituent to the newborn pattern, Yahoo! has today introduced the construct of a ornament room which, in union with diagrams and templates module earmark developers to wager actualised examples of limited ornament practice via a Flickr gallery. The “Vote to Promote” ornament is the prototypal to use a ornament gallery.

Last month, we posted about the Blueprint & YAML CSS frameworks and reactions to the frameworks were mixed. Some folks absolutely loved it while others considered them a crutch for non-CSS savvy developers. So should CSS frameworks be used?

Gary Barber & Jonthan Christopher offer their perspectives on where CSS frameworks should fit.

Jonathan offered his opinion:

A CSS framework is a different story entirely. To me, CSS can not be framed. While many of the concepts, techniques, and ideas of creating websites with CSS can be repeated many times over, in my opinion, it is impossible to create pre-written documents that will help you in your process. CSS and (X)HTML go hand in hand. (X)HTML is a language semantic in nature, which is impossible to wrap up in the style of a framework.

as did Gary:

However this segmentation of the code base into various mini files, has benefits and drawbacks too. On the whole they are handy to work with, but very can add some real load to a server with the extra http request per page view.

Both writers do list the positive aspects of CSS frameworks and both appeared to like Eric Meyer's Reset Reloaded baseline set of styles as a starting point for an application.

There's much more insight in their postings so be sure to check out Gary's post, Treading Lightly with CSS Frameworks and Jonathan's post, Please do not Use CSS Frameworks.

Along the same lines, Agile Ajax's Brian Dillard discusses how CSS3 might work to alleviate some of the cross-browser layout headaches that these same frameworks try to address:

No, my favorite CSS 3 spec is the Advanced Layout Module. (Thanks to my buddy Zack for alerting me to its existence.) This "concept album" exploring advanced layout strategies recently received its first refresh since 2005 (discussion here). For anybody who's ever struggled with CSS layout, there's a lot to love in this proposed templating system. Basically, the spec calls for a new type of display that combines the best aspects of table-based and float-based layout but provides far more flexibility than either.