Google recently released Google Doctype, “…a Google-sponsored open encyclopedia and reference library for developers of web applications.”
I’m a little disappointed in the content of some of the “HOWTO” articles (they just aren’t very deep) though the security articles are very good. The DOM, HTML and CSS References are top notch and are sure to be EXTREMELY handy in the future.
It seems that the Ext team has updated it’s licensing terms to a more restrictive license. Paul Duncan has an excellent review of what changed and what it means to developers who are considering using it.
What this means for us on campus is that if you are going to use the Ext framework, be sure that you read the license fully before you begin your project, and make sure that your project wont conflict with Ext’s new licensing.
Opera recently announced the release of their Dragonfly Web Developer application, that will be built directly into the Opera Browser.
From their website
Opera Dragonfly is Opera’s all-new set of developer tools, designed to give developers a lightweight-but-powerful application that provides effective mechanisms for web standards debugging and problem solving without slowing down the browser, and fits in nicely with the development workflow.
To evaluate it, you will need to download the 9.5 beta 2 version of the Opera browser. Once installed, launch the browser and go to Tools/Advanced/Developer Tools.
It appears that with Dragonfly, Opera is taking aim at Firebug. Although similar, Dragonfly is not yet as robust as Firebug, though it is easy to see that it has potential. This is a very early release, so it will be interesting to see what features Opera decides to add to this tool.
Of course, as a developer, ANY tool that helps us do our job in a faster, more efficient manner is appreciated.
I came across an article this morning and thought I would share.
Average Web Page Size Triples Since 2003
Within the last five years, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced faster load times, dial-up users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers.
WOW. The average size of a web page is now 312K! Granted, if you have broadband, 312K is not that much, but just think back to how long that would take to download over a 56K modem. And while broadband adoption is increasing, most reports show that 20% of Americans are still using dial-up, the majority of which are in rural areas. This gives those of here at the University a very unique challenge: how do we keep our sites looking fresh and modern without leaving dial-up users behind?
The main page at www.missouri.edu comes in at a slim 43K (thank you LORI), Which is about 12 seconds over a 56K modem. A quick, non-scientific sampling of other web pages throughout our University show that most pages appear to be in the 75K range, with a few topping out at over 400K (which would take almost 2 minutes to download over a 56K modem). So what are some easy things we can do to trim down our pages?
Two very simple things you can implement immediately are to save your javascript files and CSS files in a minified version. There are free online tools to help you minify your CSS and to minify your javascript. For example, the styles.css file in use on the www.missouri.edu main page is currently 18K, but could be reduced another 4K if we were to minimize it. And we were able to shave 66K off of the javascript file we are using on the main site.
Be sure to check out websiteoptimization.com’s Speed Tweaks for other tips/tricks on how to speed up/trim down your pages.
In my previous post, I explained what a Javascript Framework is and the criteria by which I used to determine which one I chose. In this post, I’ll talk about which framework I ended up going with, and how it did, and some cases, didnt, meet that criteria.
Before I begin, I need to point out one downside to using a framework that I didn’t mention previously. That is, the code you write for one framework, will most likely NOT work for a different framework. In other words, if/when you decide to switch frameworks, you’re going to end up having to either rewrite your code, or continue supporting the “old” framework even though you might not be using it anymore.
I played with Ext, prototype (mostly because of scriptaculous), dojo, and motools, and ended up choosing mootools. The one that I didn’t try out that I am still planning on evaluating is jQuery.
So why mootools?
One of the great thing about Mootools is you can customize the framework to only include the components that you need. This allows you to customize the mootools javascript file to be as small as possible. Even with every possible component added, the framework (compressed using the YUI compressor) is only 64KB in size. That isn’t to say that other frameworks are larger. For example, jQuery is only 29KB (compressed).
MooTools is compatible and fully tested with Safari, Internet Explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino.
This was one of the deciding factors for me. Mootools has excellent documentation. While it is not 100% complete (for example, there seems to be no documentation on the bind() function), the documentation is easy to navigate, at a glance you know what the function expects (arguments), what it should return and contains a sample of the function in use. In my opinion, it has the best documentation of any of the javascript frameworks (though Dojo comes in at a close second). In addition, Mootools has an incredibly thorough tutorial.
Not only does it support code reuse, it is a primary focus of the Mootools framework. The whole framework is class-based and modular (which is why you dont need to download every available component). It has been designed to assist Javascript developers to more easily build reusable code. Because of this, there is a multitude of plugins/extensions available for Mootools.
This was also one of the deciding factors for me. Mootools contains a custom event called domready that executes a function when the dom tree is loaded, without waiting for images. What does this mean to you as a developer? When combined with the various selector methods, It means that you can keep ALL of your javascript in the head (or in a separate javascript file) and not have to litter the html with javascript snippets, or worry about “element does not exist” error messages (because you tried to access the element before it loaded). It also means that you (or your web designers) can more easily design the page such that, if the user doesnt have javascript available, they wont see any difference.
For example, on the RJI site where we first used the MU Story Gallery rotator, the page is designed statically to display one story, headline, and teaser text. If you do not have javascript, or have it disabled, this is exactly what you will get. But if you have javascript enabled, on domready, the script will take over this section and create the rotating story gallery.
In a word, yes. Announcements are regularly made regarding updates to the framework (v1.2 is close to being released) and answers to my questions in the forums are usually answered within the same day.
Yes, and no. Mootools (and Prototype ) both make heavy use of altering the prototype of native objects (String, Array, Function). Contrast this with JQuery and Dojo which are highly name spaced. What does this mean? This means that JQuery and Dojo will (usually) place nice in situations where you either don’t control the other javascript present on a page, or where you want/need to use more than one framework or javascript collection. Mootools, because of the way it alters the native objects, when used with other javascript libraries, can sometimes cause conflicts. So if you use another framework or library that alters the native Array object to include an .each() function, you’re going to have problems. Of course, this is no different than having a library that has a function named foobar() and then try to use another library on the same page that also has a function named foobar().
As I mentioned earlier, Mootools may or may not be the right framework for you. In fact, I plan on giving jQuery a try in a future project just to see if I might like it more. I strongly encourage you to download two or three different frameworks, and try them out. See which one “fits” you best. But no matter which one you end up going with, you will be AMAZED at how much more efficient your JavaScript development will be.
