Articles for Tag: javascript

Two Big JavaScript Projects Debut

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.

Processing.js

Unless you’ve been living off the grid you’ve probably seen some mention of John Resig’s ‘big and pretty’ project, Processing.js. He’s gone and done it again, this time with a port of the Processing visualization language to the web via JavaScript and the canvas element. If that means nothing to you visit the site and check out some of the pretty demos.

Is this the beginning of the end of Flash? I’m not gonna go anywhere near that one, but Chris Blizzard has point out a few ways the open web has embraced the code in just a few days.

Flow

Richard Herrera, who I’ve had the pleasure of working with over the last year, has completed and released his JavaScript library — Flow. Sure, you say that the JavaScript library space is already crowded, but that doesn’t mean that there isn’t room for another tool in your arsenal.

Richard has aimed to create a small, lean, code base for cross browser implementation of standard DOM features and the ability to customize the library by picking and choosing the additional features you’d like.

Flow is already in use at the new South Park Studios, and you can see examples and docs and grab the code from its project site.

What Does X-UA-Compatible Mean For Me?

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?

There’s been lots and lots of discussion of the proposals via blogs, mailing lists and other forum, but they’ve focused on either how the proposal was raise and whether its appropriate direction for the technologies web developers work with to take. Through all those discussions however I’m still having trouble wrapping my head around the long term impact of the proposals and how I need to manage my very non-theoretical code and projects. In a search for discussion of these practical examples on how one would start to tailor their code in this new model I’m turning to you all. Can the extensions, and the additional rendering mode they’re implying be worked around with no impact at all, or if it requires new planning on the part of developers, or is it just more of the same planning we’ve been doing for ages.

Right Now

In an XHTML1.0 IE6 & IE7 world my typical structuring of code to ease browser hacking and targeting has been as follows:

  • use an XHTML1.0 [transitional or strict] doctype that triggers “not-quirks-mode”
  • start code with no browser hacks
  • For combined IE6&7 adjustments [hasLayout type stuff usually] use a separate style sheet linked inside conditional comments
  • For IE6 but not IE7 use the * html hack when needing to hide stuff, or remember a few extra rules that anyone can get safely [display:inline; float:left;]
  • Ignore IE5.x and less
  • Keep more complex CSS and other hacks to a bare minimum [e.g. clearfixing, etc.] and instead design and code as ‘universally’ as possible

That has worked for the last 1-2 years in a world that knew nothing about IE8.

With IE8 in our sights

But now we’re in a world that knows IE8 exists which changes things just a little bit if I want to be a responsible web developer. Any document I publish or help a client publish from today on I have to consider [with limited knowledge of details] if and how I want to prepare them for the upcoming browser changes.

  • Do I leave my above solution in place and do nothing? In doing so I have to hope that IE8 will be good enough to not get IE7 hacks but act like Gecko or WebKit — that or reside myself to expecting that some adjustments will have to be made once IE8 lands.
  • Do I prematurely start to include the like-IE7 meta tag so that I don’t have to revisit the site later and just let the site live forever as IE7 compatible? Is it realistic to expect that this will still work, and there will not be any testing when IE8 hits required, and that things will work flawlessly without going through the same motions that should happen with any new browser release?
  • Does it make a difference if I think the site will have regular staffing and updates or if its just a site build to get something published and nobody manages it again until the next redesign in a year or two?

Reasonable approaches all — I may flip flop some while I decide what I think works best and see what others are doing. However, they’re also solutions for the extreme near term. Looking further out the answers and options start getting fuzzier.

After IE8 hits

Shortly after IE8 hits web developers will have to switch from asking themselves how to code for the unknown, isntead having to code for the new known. It is easy to anticipate that a requirement for any new site in this time will be to cover exsiting compatibility [IE6 & IE7] and extend to the new kid on the block. So how might we do that with all these rendering modes floating around? At the pace standards move along, as well as the need to avoid total screwy quirks mode in the older browsers lets presume we’ll need to stick to the same languages that we’re using currently [for some time at least]. So to revisit my current model of structuring code for compatibility’s sake out 2 or 3 years what would that look like?

  • Do we continue to play in IE7-standards-mode, coding down for IE6 and hope IE8 needs no adjustments and get nothing out of the IE8 progress?
  • Do we use no compatibility flag and presume IE7 compatibility mode and then code up or down as needed and cross our fingers?
  • Do we use the use the IE8 compatibility flag and code down to both IE6 and IE7?

What about JavaScript?

One thing we, as web developers, haven’t had to deal much with — ok, I lie, we’ve had to deal a lot with — but anyway, IE8 promises to have some large javascript feature changes and it has been cited [or presumed] that this as a big reason about why the separate “mode” is needed. Though I welcome the progress on the scripting front, the “rendering modes” is not an angle that has yet impacted JavaScript code. What real impact if any will the same browser and version changing javascript behavior based on mode have on our existing or future sites? Will it have any impact at all? Is the last option for browser version management feasible if the JS changes are indeed drastic?

We may not know how to answer this until some concrete information on JavaScript changes in IE8 is posted, or even still not until we see a public beta build released to the public. That said, I’m not sure the question, nor the answers are premature if we’re being asked now to evaluate and embrace the proposal.

Thoughts?

In a roundabout way I’m trying to both air, but also think through, my concern that the middle term outlook [2-3 years, or as long as XHTML 1.0, IE6 and IE7 all live] the additional rendering mode of IE8 and mode switching mechanics will keep developers in a “think like its IE7” mindset and not take real advantage of IE8 because of the difficulty of mixing the IE8 benefits with something that would work reasonably well in IE7.

I think its great to have a handle on the short term solutions, and its certainly enjoyable to envision a future with HTML5, CSS3, SVG, Canvas, DOM3, XML, XSL, and whatever other standards may be in the works. But should I be concerned that we’re setting ourselves up for a /worse/ middle term outlook then we would be if we kept on as we have been? Am I way off base with these concerns? Have I totally missed the point or the timeline?

Are there potential solutions or coding practices I haven’t thought of?

Some JavaScript Links

Don’t miss these!

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

Bulletproof Ajax Reviewed

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.

Bulletproof Ajax by Jeremy Keith

Rating: *****
Bulletproof Ajax

People who are new to the concepts of Ajax, or may have rusty JavaScript chops will find the introductory chapters quite useful although I found I breezed through them. For the developers who have been using these technologies for some time, or those whose experience is primarily via using a specific library or toolkit and simply learning its API the books coverage on some topics that you may not have put much thought to is worth the read.

This is where the book shines. While other venues may be touting Ajax for their wiz bang animations, or flashy page updates Jeremy makes sure that core topics like progressive enhancement, unobtrusive Javascript are covered. Throughout the book he covers using the new wiz bang technologies appropriately and in ways that don’t compromise accessibility, overall browser compatibility and other benefits that come with good web development practices.

Having been knee deep in a few projects with Ajax usage from heavy to light over the course of the last year or two I was left feeling like it could have offered just a bit more in the way of complex coding examples. Without recreating some monstrous desktop application and running the risk of flying in the face of the advice found in earlier chapters, I think it would have been helpful to see some examples or suggestions on how to deal with situations where multiple parts of pages or updated or you would have to reinitialize events on multiple objects. Perhaps that area is best left up to a text on proper object oriented JavaScript coding, but I find they come up quite often when dealing with more complex interaction, and it certainly has a good deal of impact on how one architects an Ajax based site.

On the flip side of that, by its nature and scope Bulletproof Ajax would be a book I’d encourage non-coders — those who plan, design, and work with web sites — to spend some time with the book [possibly skipping specific coding examples on the way] to get a grasp on the fundamentals.

At the end of his review, Gary Barber also notes that the book does not cover server side implementation in depth, which is also true, but I cannot say that I noticed it was gone until it was brought to my attention. Its a topic much like general JavaScript coding topics that couldn’t be covered in a complete manner in this book, but just maybe could have been given a little more bandwidth.

But for a 200 page book it covers what it sets out to do extremely well and I’d highly recommend it to anyone working on the web.

Redesign: The New Place Name Here

Hey look, I did it!

After roughly six months of sitting on a design I was happy with I’ve found both the time and ambition to finish building an update to Place Name Here. Not quite sure what version of the site this is, but 6 seemed like a good number when I started.

Like with all previous versions of the site the new layout is fairly simple, and doesn’t use a lot of images or tricks to play things up. This site always proves to be difficult to rebuild in a uniform way because of the patchwork of different side projects, and technical demos that have been posted since the site first launched in late 1998. The new design and slightly rearranged navigation will hopefully help give a better perspective of what is hiding on the site.

Though not glitzy, there are a few tricks hiding in the new design which I’ll cover in detail in a future post. One element in particular is the code used to create a “liquid” like layout via JavaScript. If you are reading this and seeing a two column layout the left column is made of content that has been pulled out of the main column and repositioned to fill the gap on the left. This is similar to using floats where content will stack if there isn’t enough room to go side by side, but in this method I can pull content from anywhere in the flow of the main column depending on the given page — introduction content from the top, extra content from the bottom, or something I’d like to highlight from the middle.

Another new site feature is the beginning of better integration with the aggregated content on Place Name Where?. This can be seen in the combined tag searches found on pages such as the PHP tag page. This was really what I build the mechanics behind PNW for, but hadn’t gotten to any implementation before this redesign.

More about the guts of the site can be found in the updated colophon. Please take the new look for a spin and let me know what you think in the comments.

Friday Link Wrapup

Because I’ve been so quiet around these parts lately here’s a big ole list of links for the web builder in you!