Please let me know through a comment if you know of any other great HTML5 articles, tutorials or websites, and I’ll be glad to post them. Also thanks to all of the folks who produced all of these great free learning experiences.

Articles

An Exploration of HTML 5

At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it?

HTML 5 differences from HTML 4

HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML 5 differences from HTML 4″ describes the differences between HTML 4 and HTML 5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification itself.

HTML 5 Reference

This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

More on developing naming conventions, Microformats and HTML5

It seems like a lifetime ago that I first sat down with a cup of tea and a bourbon biscuit and thought about the conventions that we use for naming HTML/XHTML id and class attribute values.

Semantics in HTML 5

I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all.

W3C HTML5 Spec

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

Tutorials

A Selection of Supported Features in HTML5

You can refer to the PNG Image with Color Coding or use the tabular data option below. Note: The table includes some modifications in regards to Opera support for audio and video which are not represented in the PNG.

Basic HTML 5 layout

Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

Designing a blog with html5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Drag and drop

As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.

How HTML5 Web Sockets Interact With Proxy Servers

n this article, I’ll explain how HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, I’ll explain how Kaazing WebSocket Gateway and its Web Socket emulation can add additional value.

HTML5, Again

If you’re a front-end developer, I want you to do me a favor. I want you to pick a project and mark it up in html5. I’m not going to ask you to code a game experience inside the canvas element or replicate a youtube video player or do anything really, except challenge you to declare semantic information about your content blocks.

HTML5 Audio Data API – Spectrum Visualizer

The experimental audio data API allows the programmer to access raw audio data and a processed FFT spectrum of the currently playing audio data through the HTML5 audio tag.

HTML5 Boilerplates

Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.

HTML 5 canvas – the basics

The HTML 5 specification includes lots of new features, one of which is the canvas element. HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.

HTML 5 Cheat Sheet (PDF)

XHTML 2 is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.

HTML5 id/class name cheatsheet

The mapping of HTML5 structural elements to id and class names for use with divs

html5 monitoring

Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

HTML 5: Nav Ambiguity Resolved

One of the new things HTML 5 sets out to do is to provide web developers with a standardized set of semantic page layout structures. For example, it gives us a nav element to replace structures like div class=”navigation”.

HTML5 Reset Stylesheet

We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.

HTML 5 + XML = XHTML

I like the xhtml syntax. It’s how I learned. I’m used to lowercase code, quoted attributes and trailing slashes on elements like br and img. They make me feel nice and comfy, like a cup of Ovaltine and The Evil Dead on the telly.

Preparing for HTML5 with Semantic Class Names

Some time ago I was asked in an interview whether I preferred HTML or CSS. It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I find it beautiful when done well, and that’s why watching HTML 5 unfold with new and refined elements is fascinating to me.

The video element

he video element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

When can I use…

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Video on the web

HTML5 defines a standard way to embed video in a web page, using a video element. Support for the video element is still evolving, which is a polite way of saying it doesn’t work yet. At least, it doesn’t work everywhere. But don’t despair! There are alternatives and fallbacks and options galore.

Why HTML5 is worth your time

The debate over HTML5 vs. Flash is great for comments and page views, but all that chatter obscures the bigger issue: Should developers and designers invest in HTML5?

Yes, You Can Use HTML 5 Today!

There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.

Websites

HTML5 Doctor

The site came about following a HTML5 meetup after the Future of Web Design conference in London (2009). We decided that there wasn’t a resource that catered for the people who wished to find out more about implementing HTML5 and how to go about it, so we thought we’d better build one.

HTML5 Gallery

A showcase of sites using HTML5 markup

HTML5 Tutorial

Our website is your one stop website for everything related to the new HTML 5 code, You will find many useful guides for HTML 5 resources including HTML 5 Tutorials, HTML 5 examples and HTML references.

Special thanks to all of the hard working designers that have created these awesome smartphone templates! Also, please check the original source for usage requirements.

Android

Android 1.5 GUI PSD v. 1.0 from Pavel Macek

• Download the files directly

Fireworks template for Android from Unitid

• Download the files directly

Antroid Omnigraffle Stencil from BinarySheep

• Download the files directly

Antroid Icon Template Pack from Google

• Download the files directly

Android Wireframe Templates from Future Platforms

• Download the files directly

Google Nexas PSD from PX Junkie

• Download the files directly

Motorola Droid PSD from Zandog

Some rights reserved. This work is licensed under a Creative Commons Attribution-No Derivative Works 3.0 License.

• Download the files directly

HTC Dream PSD from Zandog

Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

• Download the files directly

HTC Touch 2 PSD from Zandog

• Download the files directly

iPhone

iPhone GUI PSD from Teehan+Lax

• Download the files directly

iPhone PSD from Wordpress Themes Collection

• Download the files directly

Palm Pre

Palm Pre GUI PSD from Teehan+Lax

• Download the files directly (Requires Coconut)
• Download the files directly (Requires Avenir)

Palm Pre GUI PSD from Michael Gresh

• Download the files directly

Palm Pre PSD from Wordpress Themes Collection

• Download the files directly

BTW, if you’re looking for some great iPad Templates and Stencils check out Emily Changs post.

Screenshot of Typekit

Tonight I decided to give the new font service Typekit a try on my website. The service uses your browsers inherent ability to link fonts, and has worked out licensing with a number of font houses so you can link these fonts with no fear of legal action. The quote from Typekit below basically says it all.

While it’s technically quite easy to link to fonts, it’s legally more nuanced. Almost all fonts are protected by copyright — even those available for free — and very few of them allow for linking via CSS or redistribution on the web. This is understandable; font files represent countless hours of finely detailed labor. Appropriately, type designers are concerned that they’ll lose control of all that hard work.

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

I found Typekit easy to implement – you only need to add two lines of javascript to your head tag, and then choose your fonts.

All in all, I’m starting to love the Typekit services. I would recommend it to all web designers that what to play around with some new fonts beyond our normal “web safe group”. It’s fun, free, and it’s easy.

BTW, I’ll be changing the fonts on my website the next few days to test out the service. More feedback to come.

The basic premiss behind this new breed of music search is that you start by entering a genre, artist, song, or geo-location, and you are returned music that relates to your search term. In most cases the returns are presented as a visualization in order to show the connections between data.

Below you find a list of the sites that I go to when I’m trying to find new music. If you know of any music discovery sites that are not listed please post them in the comments section. Thanks!

Artist Network Visualization
The Artist Network Visualization applet shows the current listening activity of MyStrands users. Every time a user plays a track by a recognizable artist, it will show up on the map as a small circular node (along with the album art of whichever album the track belonged to). The nodes will repel each other away, so that they don’t overlap each other. However, if two or more artists are played consecutively, they will become visibly “linked” and follow each other around the map when clicked and dragged. Watch as networks of artists emerge from our users’ listening behavior.

Audiosurf: Ride Your Music
As the company states, “Audiosurf allows you to experience the intensity and emotion of your songs in real time, in full color, and in 3D. Songs that give you an adrenaline rush are converted into wild roller coaster rides full of color and motion. Songs that calm you down appear as cool colors against a relaxing sky. Audiosurf enhances the experience of your music collection by synchronizing its environment to the events in your songs–the beats, the intense sections, the long pauses followed by a burst of sound, all take on a more vivid meaning. The application builds a highway for any music CD, MP3, iTunes M4A, WMA, or OGG song you choose, so the experience that you have is totally up to you.”

Liveplasma Music Discovery Engine
Liveplasma is a music and movie discovery engine that shows you new music depending on what your interested in. “Data is grouped according to interest, style, epoch and other criteria which suggest that someone will like it. The closer a film or band is to your favorite the greater the chances are that you will like it.

Musicovery – Content Visualization
As a web application designer I’m always looking for new ways to visualize information and content. Musicovery has showed us a different way of visualizing and browsing music. While the menu is a standard set of music categories, the browse interface itself is like a map with your genre of music displayed in a map-like drag enabled environment. You can drag the music map around your genre until you find an interesting artist. Then when you click on their name the artist is repositioned to the center of the map and the music start playing, along with some nice visual effects.

Musiclens – Music Discovery Visualization
There are many search tools for finding new music on the web. Just type in, “artist, genre or title and you’ll find some results. Ho Hum. I’ve been forced to use this same music search paradigm for years. However, there is a new breed of music sites cropping up that will give you new ways to discover new music. “Musiclens enables users to find pieces of music using very vaguely described criteria, such as loudness (perceived volume), mood or purpose. The search or recommendation query can be enhanced or limited by adjusting the ten navigation control sliders”. This site works well and has a great visualization tool.

Music Maps – Who is Listening to What and Where
“The popularity map shows snapshots of current top artist and album charts by geographical location. The Flash-based interactive map works using data from the Gracenote Media Database and shows the latest artist and album lookups in states, regions, countries, and continents around the world.” I like exploring this site as a way to see what the most popular types of music are in different countries. For example, look at the difference in musical tastes between California and Norway. Fun site.

Podbop – Mp3 Concert Calendar

“Podbop is an MP3 concert calendar that helps you discover bands playing in your town, completely powered by the community”. Excellent use of color, oversized text, and a well designed map navigator are highlights of the Podbop start page. The interior uses the same high contrast and highly readable layout. The dark brown and lime green work well together with the white font. The site has a great user experience with inline previews of the band’s mp3’s categorized by date and location.

TuneGlue – Relationship Explorer
TuneGlue is music relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search. By clicking on the artist button, and then release, the app will show all of the releases by this artist.

ScreenVader – Algorithmic Music, Images and Video
In many ways this site feels like an exploration. There is no about section or faqs, so when you arrive you’re not really sure what to expect. As I found out, it turned out to be a wonderful visual experience. The site provides several free software packages that allow you to compose algorithmic music, image and video presentations. The results are stunning as you will see from the examples on the site. While it takes a little getting use to, the flash based navigation is fun easy to use. The downloads are available for Mac and PC.

Whitney Music Box – Visual Harmony
A very fluid music visualization based on the film maker John Whitney. As the developer stated, “This weekend I’ve been playing, once again, with the ideas of experimental film pioneer John Whitney, using both graphics and audio. While Whitney was interested in turning musical ideas into motion graphics, I’m doing the inverse – turning one of his key animation ideas back into music. Whitney made a number of films based around the simple idea of harmonic relationships. Above is a visual example of one his ideas that I implemented in Flash.” Make sure you check out all of the variations in the right column. Great project.

The following is a list of some of the best examples of visual search engines. My comments are now moderated, however, if you have search that you think should be included in this list please leave a comment. Also, if you have a spot on criticisms or relevant information about any app that was posted I also value your comment. Thanks to the developers of these searches for a new way to see what’s out there on the inter-web.

Etsy’s Color Product Search Visualization
While I’ve seen several color based searches they are usually for images. Etsy has created a color based search for products which gives you results based on colors you select in their easy to navigate color grid. To use the search just mouse over the color grid and click on the color. Then click the item to get a closer look and some more details. If you are interested in this item and want to find out more just click the item title. From there you can purchase the selected item.

Faceted Search by Moritz Stefaner
Project Search v1 by Moritz Stefaner is a a flash demo of a faceted search application for architectural projects. I find this form of search very useful for drilling down into a subject. The project has great interaction design.

Grokker – Relational Search Visualization

Relational search engines help you find more of the information you are looking for faster than with a traditional liner meta search. Grokker does a good job at relational search by federating content from Yahoo and Wikipedia. The results page has two main views which are a list view and a map view. The list view is interesting because it shows you a collapsable / expandable outline view of the categories, and a detail view. It also give you some tools to narrow your search such as a date slider, view by either Yahoo, Wikipedia or both, by keyword within the outline, and finally, by domain. The map view gives you the same tools with an expanded visualization map of the results and relationships. Very fun, easy to use, and great for discovering related results.

Kart00 – Visual Search
Kartoo is a meta search engine which presents its results on a map. To try it enter your request and click on the “OK” button. As soon as you launch a search, Kartoo analyses your request, questions the most relevant engines, selects the best sites and places them on a map. In this map, the found sites are represented by more or less important size pages, depending on their relevance. When you move the pointer over these pages, the concerned keywords are illuminated and a brief description of the site appears on the left side of the screen. A series of keywords appears. You can refine your search by clicking subjects. To go to the next map, click on the “map nb x” button.

oSkope – Visual Search
If you frequent websites like Amazon, YouTube, flickr and eBay you probably love the mass of content that you can see at sites like these. As a designer I tire of “sameness” in ways to browse websites. With the exception of flickr the only way to browse the content on these sites is the all to common linear list view. oSkope gives you another. As they say on their website, “oSkope is a search assistant with a highly intuitive visual interface. oSkope lets you browse quickly through a large number of images a preview information with minimal paging. Selected items can be saved by registered users.” In many of my test searches I found the information or product I was looking for much more quickly than on the websites themselves. While I can save individual products in a folder I also wish I could save searches. The product is still in beta, however, it is a very fun, intuitive and functional way to search the selected websites. Thanks to the developers and designers.

Quintura Search Visualization
Quintura is a tag cloud based visual search engine. After your initial search you’re presented with a two pane screen. On the left is grouping of tags that are related to your search term. On the right are standard liner search results. From an interaction standpoint I think the combination works well. In one screen I get readable results and suggested related search terms. You can also embed your search term cloud on your own website.

Quintura Kids – Child Friendly Search Visualization
If you have children you know that many search engines retrieve sites you may not want them to see. If you’re a kid you know how boring most search engines can be. “Quintura, Inc. is the next-generation web search company that was launched with a mission to make Web search easier and faster by adding context or meaning to keywords and visualizing search. The patent-pending technology of Quintura is based on over a decade of the founders’ innovative research and development in the area of neural network and artificial intelligence”. Quintura also has a wonderful search for standard use, and a women’s version is planned soon. So far I love both versions that are public.

Searchme – Visual Search Engine

Searchme is new search visualization which lets you see the webpage before you surf there. The idea is pretty neat. As you start to enter a search term you are shown a list of categories that are associated with that term. You can either choose a category, or search all categories. The results are shown in “coverflow” paradigm. You can still sort by category, or just click though the “coverflow” of all of the pages. I love the idea and the execution, however, from a user interface perspective there are a few interactions that would help the UI a great deal. For example, a full screen mode would make seeing the webpages much more useful. Even with a 30 inch Apple HD monitor the pages are a little hard to read. If searchme added a high-rez full screen mode or a way to magnify the page images it would give me a way to see the page relevance to my search. One step beyond that would be to show the highlighted search term(s) on each page as it flew by. Props out to the developers/designers! In my opinion it just needs a little UX love and then we could have a real winner.

Snap – Search Visualization
Recently new forms of search visualization have been on the rise. Snap is a great example of a new way to view search results. The applications allows you to view an image of the page your about to visit before you go there. The site is broken into two panes one with the search results and the other with a screenshot of the page. In the screenshot pane you can choose three different sizes of screenshots. You can view the site with either a new window or in the larger left pane. As a visual person I found it to be a fun way to browse search results.

TouchGraph Google Browser
The TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites. Use this free Java application to explore the connections between realted website.

Also, if you want to see or learn more about data visualizations please visit DesignDemo and VizLIst. I post visualizations on a daily basis in both of these sections.

Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, Max.

The Sputnik Legacy
“The Soviet launch of Sputnik in 1957 kicked of the space race. Since then mankind has sent more than 150 missions to explore outer space. The Newsweek captures all 150 world wide space flights in an easy to use timeline format. The visualization is sortable by year, timespan, planet and country. When you roll over a timeline point you get additional information about the flight. Additionaly, if you click on the Inside Sputnik tab you get a visualization of Sputnik 1 and all of its parts. Very fun and easy to use.”

British History Timeline
“Explore all of British history, from the Neolithic to the present day, with this easy-to-use interactive timeline. Browse hundreds of key events and discover how the past has shaped the world we live in today. ‘Take a Journey’ when the timeline has loaded to follow themes such as Slavery, Women’s Rights and Technology.”

Timepiece – Visualize Film Ideas
“Timepiece is an experimental data visualization that help you explore Filmforay’s site content including, all of their film ideas, new members, comments and votes on each film idea. Presently there is five months worth to data explore, however, this will undoubtedly grow. As stated by LInden at Filmforay, “The visualization is done with Adobe Flash and pulls all recent data from the site, updated every 30 minutes. Currently it takes a pretty heavy toll on your CPU and loading does take some time, so older computers might have some trouble running it. And I’ll admit the design wouldn’t scale very well given a larger data set, but for the meager traffic filmforay has received so far it does just fine!” Time is one of the most challenging aspects to represent in data visualizations. Linden has created a very unique view of his site’s content over time.”

circaVie – Create and Share Timelines
“circaVie allows you to easily create multimedia timelines all about your life. Special events, noteworthy achievements, relationships, memorable vacations, interests and hobbies, celebrations, announcements… you name it. If it’s about life, it’s circaVie. By creating a circaVie timeline and adding events to it, you’re automatically able to share your life and interests with your friends, your family and the rest of the world in a brand new way. You can think of circaVie as a souped-up, unique way of blogging, where you can seamlessly share photos, video and text that other users can comment upon. Your timelines are also portable and can be shared anywhere you like since they’re all embeddable into your personal Web site, or online profile. Just create your timeline here and take it with you wherever you like!”

Recreating Movement

“Recreating Movement is a computer program for analysing film sequences and has been developed within a diploma thesis. With the help of various filters and settings Recreating Movement makes it possible to extract single frames of any given film sequence and arranges them behind each other in a three-dimensional space. This creates a tube-like set of frames that “freezes” a particular time span in a film. By using the keyboard the viewer can browse through the sequence of frames, chose any kind of view of the sequence of frames and influence the displayed frames directly via a displayable menu bar.”

Comment Timeline Visualization
“While gawking at some of the really cools toys by Moritz Stefaner , I got particularly interested in his post about visualizing time gaps in data and had a moment of inspiration. Instead of vertically gaping the data, you could “timeline” the data like we used to do in gradeschool.”

Slife
“Slife 1.3 offers a whole new way to keep track of what you do in your computer. Visualize your activities, improve your productivity and manage your time more efficiently. Slife observes everything you do in your computer and plots your activities in a graphical timeline. Its unique approach to activity tracking and time management opens up a world of possibilities.”

Timepedia Chronoscope
“Chronoscope is a visualization platform under development at Timepedia for time series datasets. Chronoscope stems from a desire for responsiveness and interactivity when navigating or authoring datasets. Ultimately we aim to bring something like the experience of Google Maps or Google Earth to time series data.”

Timeline of Trends & Events
“Timeline of Trends & Events (1750 to 2100) from futureswatch. Social change in America follows remarkably consistent patterns of behavior dating back to the time of the War of Independence. A close analysis of those patterns reveals why American society, at the beginning of the 21st century, is so bitterly divided. Those patterns also reveal the direction social and political values are likely to move over the next quarter century.”

SIMILE project
“SIMILE is a joint project conducted by the MIT Libraries and MIT CSAIL. SIMILE seeks to enhance inter-operability among digital assets, schemata/vocabularies/ontologies, metadata, and services. A key challenge is that the collections which must inter-operate are often distributed across individual, community, and institutional stores. We seek to be able to provide end-user services by drawing upon the assets, schemata/vocabularies/ontologies, and metadata held in such stores.”

Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, m4x.

AJAX for Wordpress

Live Spell Checker
“AJAX Live Spell Checker for Wordpress”

imgViewJX Wordpress Plugin
“imageViewJX is a Wordpress plugin which takes all images from a given directory and flips through them on your WordPress site, without reloading the page imgViewJX uses AJAX library ‘xajax’. It is meant as a first experiment in using xajax in Wordpress. Use it if you like it, or learn from it if you want to built something yourself.”

AJAX’d Wordpress
“AJAX’d Wordpress (AWP), formerly know as INAP, is an extremely powerful plugin that harnesses the power of AJAX and Wordpress to improve the user experience, the administration capabilities and the design potential of any Wordpress based blog. AWP’s basic features include inline paginated posts, inline comments, threaded comments, the ability to submit comments with AJAX, pagination of your homepage, live comment preview and much more, but it does not, however, force you to use any feature, and it also allows all aspects of the plugin to be easily customized through a single Administration panel. AWP is built to integrate with other plugins and features an advanced module system–based off of WordPress’ plugin system–that allows it to be modified with the addition of third-party extensions. It also has special features that will ensure compatibility with many other plugins.”

WP Ajax Edit Comments
“WordPress Ajax Edit Comments (for WP 2.1+) allows users and admins alike to edit comments on a post. Users can edit their own comments for a period specified by the admin, and admins can edit all post comments. What better way to show reader appreciation than letting the readers edit their own typos?”

AJAX Comments WPMUified

“This is a rework of an original plugin called AJAX Comments by contributors DjZoNe, Mike Smullin. Probably one of the best ways you could spice up your WordPress Blog with AJAX; readers love it! Must see for yourself. This plugin works well in all major Web browsers, and uses discrete AJAX. That means if JavaScript disabled, it’s using the original comment posting method.”

AJAX Calendar (now WordPress 2 compatible!)
“AJAX Calendar is a plugin that will display an AJAXified WordPress calendar.”

AJAX Page Loader
“AJAX Page Loader will load posts, pages, etc. without reloading entire page. This was my first plugin and is still a little quirky. There is problems working on some themes. I am working a little at a time on this but if anyone wants to contribute, feel free.”

WP-Polls 2.21
“Adds an AJAX poll system to your WordPress blog. You can easily include a poll into your WordPress’s blog post/page. WP-Polls is extremely customizable via templates and css styles and there are tons of options for you to choose to ensure that WP-Polls runs the way you wanted. It now supports multiple selection of answers.”

WP AJAX Edit Comments
“WP Ajax Edit Comments (for WP 2.1+) allows users and admins alike to edit comments on a post. Users can edit their own comments for a period specified by the admin, and admins can edit all post comments. What better way to show reader appreciation than letting the readers edit their own typos?”

Plug ‘n’ Play Google Map
“This plugin creates a google map on a Wordpress static page of your choice. Any post that you attach a latitude and longitude to will appear on the map as a marker, with a pop-up bubble and a link to the post.”

Inline Ajax Page
“Inline Ajax Page (INAP) is an extremely powerful plugin that allows you to harness the power of AJAX to improve your user’s experience. INAP is not only able to load posts, comments and the add comment box inline, but can also submit comments, paginate posts, paginate your homepage, display a live comment preview. Other than a few minor theme edits when you first install the plugin, nothing has to be changed to test the power of INAP. All options can be controlled directly from the Administration Panel which allows you to customize nearly every aspect of INAP.”

AJAX Login

“AJAX Login means that the login process is executed without reloading the entire page. The user is alerted through messageboxes on errors, and the page is only reloaded when login succeeds. The same goes for registration and lost password retrieval! This plugin adds a nice templated box on your Wordpress, either with a template tag or as a sidebar widget. In the default template the box contains functionality for logging in, registering as well as retrieving new passwords. If already logged in a logout link is displayed.”

Better-Than-Live AJAX WordPress Search v2
“Just a little less than a year ago I launched Better-Than-Live AJAX WordPress Search. I felt it was time to get back in the swing of things, so I’m now releasing version 2 of the script.”

AJAX for Expression Engine

AJAX Linktracker
“This module allows you to track clicks on arbitrary links. You can use it to track file-downloads, outgoing links or even your internal navigation links. All you got to do is to add an unique id-attribute to any link you want to be tracked. The module utilizes javascript and a XMLHttpRequest to count the clicks. This has the disadvantage that you will not capture clicks by people who have javascript disabled . But on the other hand I see a lot of benefits. It uses no redirects which makes it pretty unobtrusive, your links look like always and there is no rank denial. It’s easy to apply to virtually any link on-the-fly. And it’s not triggered by crawlers but only by people behind browsers.”

EE Ajax Edit Comments

“Allows One To Edit Comments Via AJAX”

Edit Tab AJAX
“Adds the Ability for Dynamic Searching and Sorting in the Edit Tab”

ExpressionEngine and AJAX
“As the introduction said I’m going to show you how I added the Ajax functionality to the Jambor-ee homepage, or more specifically, how you can replace certain content (in our case the showcase site details) through a user click without the need for a page refresh.”

Expression Engine Ajax Slideshow
“Adding an ajax slideshow to Expression Engine easily and simply. Expression Engine can easily have ajax functions added due to its inate configurability and template system.”

Expression Engine Ajax Photo Gallery
“An ajax photo gallery done in Expression Engine. Expression Engine being easily configured and a simple template system makes adding ajax photo galleries and ajax media display and other ajax functions a simple matter.”

AJAX enabled EE Tags
“The Tag Module allows you and your users to tag weblog entries with keywords or phrases. Using the module, you can build templates that pull entries by tag. You can show tag clouds and more.”

AJAX for Moveable Type

Movable Type AJAX Search
“This article allows you to easily implement in-page search results in any Movable Type page. What exactly does this mean? Your standard Movable Type blog has a nifty search form on every page. One thing I have always wanted is to display the search results IN the page without refreshing to another page. This is quite easy to do using Javascript and a few commands [notably XMLHttpRequest() ] that make up something we call AJAX.”

Ajax Archive Drop Downs
“In this thread, Gary highlighted how to have drop downs of archives that basically redirected to the appropriate page once an archive was chosen. With this tutorial, I’ll take that one step further and use AJAX such that when you select an archive, rather than redirecting to the corresponding archive page, the appropriate posts will just replace those currently shown.”

Movabletype Ajax Photo Gallery
“Using some php and ajax I have a new demo of an ajax photo gallery I created for Movable type. I can see many uses for this integrated into your website or as a stand alone gallery. It’s nice to be able to view the photos without constant page reloads and also free of jumping as the next photo loads.”

AjaxRating
“Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog.”

Quote
“Quote 2.0 is a plugin for Movable Type 4.0 that easily allows commentators to quote a previous comment. It uses AJAX/JSON to retrieve previous comments and enter their quoted text into comment boxes.”

MTYahooMaps
“MTYahooMaps is a Movable Type Plugin that allows you put Yahoo Maps in Posts.”

Easy AJAX comments in MovableType using Mootools
“The title says it all. Using the AJAX library from Mootools I was able to AJAXify the comment forms in Movable Type. Mootools makes it easy by supplying a Send() method in the Ajax class.”

Ajaxify: EnhancedEntryEditing

“Ajaxify is a series of BigPAPI plugins that adds various javascript and AJAX widgets into Movable Type’s interface. It has, of course, been built for Movable Type 3.2. The first of which is EnhancedEntryEditing.”

Also, if you want to see or learn more about data visualizations please visit DesignDemo and VizLIst . I post visualizations on a daily basis in both of these sections.

Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, Max.

Visualization Programming Languages

Processing
Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production.

Visualization Software

OpenDX
The open source software project based on IBM’s visualization data explorer. If you need visualization for anything from examining simple data sets to analyzing complex, time-dependent data from disparate sources, OpenDX has what you need: features and functions that let you easily gain meaningful insight into your data.

Packet Garden
Packet Garden captures information about how you use the internet and uses this stored information to grow a private world you can later explore. To do this, Packet Garden takes note of all the servers you visit, their geographical location and the kinds of data you access. Uploads make hills and downloads valleys, their location determined by numbers taken from internet address itself. The size of each hill or valley is based on how much data is sent or received. Plants are also grown for each protocol detected by the software; if you visit a website, an ‘HTTP plant’ is grown. If you share some files via eMule, a ‘Peer to Peer plant’ is grown, and so on.

Visualization Toolkits

The Flare Visualization Toolkit
Flare is a collection of ActionScript 3 classes for building a wide variety of interactive visualizations. For example, flare can be used to build basic charts, complex animations, network diagrams, treemaps, and more. Flare is written in the ActionScript 3 programming language and can be used to build visualizations that run on the web in the Adobe Flash Player. Flare applications can be built using the free Adobe Flex SDK or Adobe’s Flex Builder IDE. Flare is based on prefuse, a full-featured visualization toolkit written in Java. Flare is open source software licensed under the terms of the BSD license, and can be freely used for both commercial and non-commercial purposes.

Prefuse Visualization Toolkit
A Java-based toolkit for building interactive information visualization applications.

Enterprise Visualizations

i2
i2 Inc. is the leading worldwide provider of visual investigative analysis software for law enforcement, intelligence, military and Fortune 500 organizations.

Visualization Tools

Graph Gear – Graph Visualization Component
This is a very simple example of the graph gear component. The contents of simple.xml are rendered as an interactive graph through javascript to a flash component.

Many Eyes
Many Eyes is a visualization tool created by the Visual Communication Lab which is part of IBM’s Collaborative User Experience research group. As they say on their website, “Many Eyes is a bet on the power of human visual intelligence to find patterns. Our goal is to “democratize” visualization and to enable a new social kind of data analysis. Jump right to our visualizations now, take a tour, or read on for a leisurely explanation of the project.”

Slife
Slife 1.3 offers a whole new way to keep track of what you do in your computer. Visualize your activities, improve your productivity and manage your time more efficiently. Slife observes everything you do in your computer and plots your activities in a graphical timeline. Its unique approach to activity tracking and time management opens up a world of possibilities.

Below you’ll find a list of the sites I’ve visited to learn more about Javascript and AJAX security. Please let me know through email or a comment if you know of any other great security resources, and I’ll be glad to post them. Most of the descriptions below are taken from the developers of the example. Thanks, Max.

AJAX Security Articles

Ajax Security: Stronger than Dirt?
“Ajax allows the development of more feature rich, asynchronous applications, but in doing so opens up new possibilities for attackers. We look at the relevant security issues and their possible solutions. Ajax (Asynchronous JavaScript and XML) lurched into being in 2005. As a web services model, Ajax is touted as the next big thing by many who work in web development. Like all big things however, Ajax is not without its faults, one of the most pronounced being that not many people actually know what Ajax is, and what potential risks could be introduced into enterprise environments by embracing it. This article examines what Ajax is, the security implications for Ajax applications, and details a range of potential attack vectors against this technology together with possible defences.”

Developers Warned to Secure AJAX Design

“Security firm Fortify Software has stepped forward to warn Web site developers that most frameworks for deploying interactive functionality use JavaScript in a way that could lead to their applications leaking user data. The problem, dubbed JavaScript hijacking by the firm, occurs because popular asynchronous JavaScript and XML (AJAX) toolkits use the scripting language as a transport mechanism without due consideration to security. The basic threat is that malicious Web sites could use cross-site request forgery (XSRF) to steal data from other AJAX-enabled Web applications, Fortify stated in a report released on Monday.”

JSON is Not As Safe As People Think It Is
“I saw some discussion recently about using JSON for secured data, and I’m not sure that everyone understands the risks. I believe that JSON is unsafe for anything but public data unless you are using unpredictable URLs. There are 2 problems. CSRF (Cross Site Request Fogery) allows attackers to bypass cookie based authentication. I blogged about it a while ago. Wikipedia talks about it. CSRF allows you to invoke cookie protected actions on a remote server. It allows Mr. Evil to trick Mrs. Innocent into transferring money from her bank account into his. Far less known perhaps, is the JSON/Array hack that allows a user to steal JSON data on Mozilla and any other platform with a modern JavaScript interpreter.”

Myth-Busting AJAX (In)security
“The hype surrounding AJAX and security risks is hard to miss. Supposedly, this hot new technology responsible for compelling web-based applications like Gmail and Google Maps harbors a dark secret that opens the door to malicious hackers. Not exactly true. Even the most experienced website developers and security experts have a difficult time cutting through the buzzword banter to find the facts. And, the fact is most websites are insecure, but AJAX is not the culprit. Although AJAX does not make websites any less secure, it’s important to understand what does.”

New chapter and verse on Ajax Security
“The increased use of Ajax has brought to the forefront concern about its security. Recognizing that this is an issue, the Open Web Application Security Project (OWASP) is updating its Guide to Building Secure Web Applications to include a separate chapter on Ajax. Andrew van der Stock, who is heading the Guide project and who also wrote the Ajax chapter, spoke with SearchAppSecurity.com recently about Ajax security and what risks developers need to be concerned about.”

The Cross Site Scripting (XSS) FAQ
“Websites today are more complex than ever, containing a lot of dynamic content making the experience for the user more enjoyable. Dynamic content is achieved through the use of web applications which can deliver different output to a user depending on their settings and needs. Dynamic websites suffer from a threat that static websites don’t, called “Cross Site Scripting” (or XSS dubbed by other security professionals). Currently small informational tidbits about Cross Site Scripting holes exist but none really explain them to an average person or administrator. This FAQ was written to provide a better understanding of this emerging threat, and to give guidance on detection and prevention.”

Top 10 Ajax Security Holes and Driving Factors
“One of the central ingredients of Web 2.0 applications is Ajax encompassed by JavaScripts. This phase of evolution has transformed the Web into a superplatform. Not surprisingly, this transformation has also given rise to a new breed of worms and viruses such as Yamanner, Samy and Spaceflash. Portals like Google, NetFlix, Yahoo and MySpace have witnessed new vulnerabilities in the last few months. These vulnerabilities can be leveraged by attackers to perform Phishing, Cross-site Scripting (XSS) and Cross-Site Request Forgery (XSRF) exploitation.”

AJAX Security Tools

AJAX Secure Service Layer

“We see it all around us, recently. Web applications get niftier by the day by utilising the various new techniques recently introduced in a few web-browsers, like I.E. and Firefox. One of those new techniques involves using Javascript. More specifically, the XmlHttpRequest-class, or object.”

AJAX: Is Your Application Secure Enough?
“aSSL is a library distributed under MIT License thats implements a technology similar to SSL without HTTPS. aSSL enables the client to negotiate a secret random 128-bit key with the server using the RSA algorithm. Once the connection has been established, the data will be sent and received using AES algorithm. aSSL is composed of some Javascript files and a server side component. Because I have recently changed the negotiation algoritm from RC4 to RSA, only a pure Javascript (ASP) server component is currently available. I will do a porting for the main web languages (PHP, Java, Perl, Python, TKL, etc.) as soon as possible once the library has passed the beta phase.”

How to Protect a JSON or Javascript Service
“There have been lots of explanations recently of the dangers of JSON or JavaScript remoting. This post is about what you can do to protect your scripts.”

DOM Security

DOM Based Cross Site Scripting or XSS of the Third Kind

“We all know what Cross Site Scripting (XSS) is, right? It’s that vulnerability wherein one sends malicious data (typically HTML stuff with Javascript code in it) that is echoed back later by the application in an HTML context of some sort, and the Javascript code gets executed. Well, wrong. There’s a kind of XSS which does not match this description, at least not in some fundamental properties. The XSS attacks described above are either “non-persistent”/”reflected” (i.e. the malicious data is embedded in the page that is returned to the browser immediately following the request) or “persistent”/”stored” (in which case the malicious data is returned at some later time). But there’s also a third kind of XSS attacks – the ones that do not rely on sending the malicious data to the server in the first place! While this seems almost contradictory to the definition or to common sense, there are, in fact, two well described examples for such attacks. This technical note discusses the third kind of XSS, dubbed “DOM Based XSS”. No claim is made to novelty in the attacks themselves, of course, but rather, the innovation in this write-up is about noticing that these belong to a different flavor, and that flavor is interesting and important.”

General Client-Side Component Security

Hacking Web 2.0 Applications with Firefox
“AJAX and interactive web services form the backbone of “web 2.0″ applications. This technological transformation brings about new challenges for security professionals. This article looks at some of the methods, tools and tricks to dissect web 2.0 applications (including Ajax) and discover security holes using Firefox and its plugins.”

Prepare for Attack!–Making Your Web Applications More Secure
“Arm yourself and prepare for battle! This post is intended as a reminder about the possible security attacks your Web application may be vulnerable to. While it is not meant as a comprehensive guide to Web-application security, it can give you some ideas on how to better protect your applications.”

XSS, Cookies, and Session ID Authentication – Three Ingredients for a Successful Hack

“Cross site scripting (XSS) errors are generally considered nothing more than a nuisance — most people do not realize the inherent danger these types of bugs create. In this article Seth Fogie looks at a real life XSS attack and how it was used to bypass the authentication scheme of an online web application, leading to “shell” access to the web server.”

Vulnerability Scanning Web 2.0 Client-Side Components
“Web 2.0 applications are a combination of several technologies such as Asynchronous JavaScript and XML (AJAX), Flash, JavaScript Object Notation (JSON), Simple Object Access Protocol (SOAP), Representational State Transfer (REST). All these technologies, along with cross-domain information access, contribute to the complexity of the application. We are seeing a shift towards empowerment of an end-user’s browser by loading libraries.”

Javascript Security Articles

Community Creators, Secure Your Code!
“Personalization is a great feature–it allows users to make their personal pages come to life by adding colors, pictures, and even sound–but as with any user input, it is a security threat if not properly sanitized. The creation of a secure online community is a balancing act: your users should be able to personalize their pages using pseudo code or actual HTML, while remaining protected from vandals who might inject malicious JavaScript or otherwise cause harm. One piece of the larger security puzzle is cross-site scripting (XSS). In part one of this two-article series, we will look at various XSS techniques you should be aware of, and at common methods of defending your community against them. In part two, we’ll use real-world examples to explore these techniques in greater detail.”

Detecting, Analyzing, and Exploiting Intranet Applications using JavaScript

“Imagine visiting a blog on a social site or checking your email on a portal like Yahoo’s Webmail. While you are reading the Web page JavaScript code is downloaded and executed by your Web browser. It scans your entire home network, detects and determines your Linksys router model number, and then sends commands to the router to turn on wireless networking and turn off all encryption. Now imagine that this happens to 1 million people across the United States in less than 24 hours. This scenario is no longer one of fiction. ”

Javascript Security Tools

Javascript Security Tutorial
“JavaScript has its own security model, but this is not designed to protect the Web site owner or the data passed between the browser and the server. The security model is designed to protect the user from malicious Web sites, and as a result, it enforces strict limits on what the page author is allowed to do. They may have control over their own page inside the browser, but that is where their abilities end.”

Security for GWT Applications
“It is a sad truth that JavaScript applications are easily left vulnerable to several types of security exploits, if developers are unwary. Because the Google Web Toolkit (GWT) produces JavaScript code, we GWT developers are no less vulnerable to JavaScript attacks than anyone else. However, because the goal of GWT is to allow developers to focus on their users’ needs instead of JavaScript and browser quirks, it’s easy to let our guards down. To make sure that GWT developers have a strong appreciation of the risks, we’ve put together this article..”

Preventing Cross Site Scripting Attacks

“Cross site scripting (XSS) is basically using JavaScript to execute JavaScript from an unwanted domain in a page. Such scripts could expose any data in a page that is accessible by JavaScript including, cookies, form data, or content to a 3rd party. Here is how you can prevent your web pages from being exploited on both the client and the server. This is followed with tips on how to avoid vulnerable sites.”

Javascript Encryption

Cryptography: JavaScript MD5
“Over the web, JS cryptography can only protect against passive eavesdropping, as the JavaScript itself is downloaded over an insecure link. If an attacker can modify network traffic, they can make malicious changes to the JavaScript code. In any case, JS interpreters are not designed for secure programming. They may leave sensitive information lying about in memory. They’re too slow for some algorithms, e.g. BSD-style MD5 passwords, or RSA with full-size keys. Bitwise operations are buggy in several implementations.”

JavaScript Encryption Program
“This page includes an open source JavaScript implementation of the RC4, AES, Serpent, Twofish, Caesar and RSA ciphers. Ciphers can encrypt and decrypt information such that persons who do not know the password (the decryption key) can not read it. The implemented ciphers are strong enough to protect important information such as your passwords and PIN numbers. ”

Below you’ll find a list of the sites I’ve visited to learn more about Javascript and CSS compression. Please let me know through email or a comment if you know of any other great compression resources, and I’ll be glad to post them. Most of the descriptions below are taken from the developers of the example. Thanks, Max.

Javascript and CSS Compression

Bundle-Fu – Bundle Your JS/CSS Assets in 10 Seconds or Less
“Web 2.0 sites have lots of tiny javascript/css files, which causes one extra round trip per file to the server and back! This is bad! Bundle-fu throws it all up into a big package and sends it out all at once. ”

Make Your Pages Load Faster by Combining and Compressing Javascript and CSS Files
“About six months ago I noticed the pages generated by the content management system were in itself very clean and small, but that these pages still took a long time to load for new visitors. Even on a fast internet connection it took more than 8 seconds to load a basically empty page. The server generated the page in about 350ms, so that wasn’t the problem. The problem turned out to be a combination of two things: each page used more than 12 different css files because each plugin supplied its own css definitions and because the use of the rather large prototype and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution public, so others can benefit from it.”

Faster Page Loads – Bundle Your CSS and Javascript
“Have you ever watched your status bar while you wait for a page to load and wondered why several files seem to be downloaded before you see anything at all on your screen? Eventually the page content displays, and then the images are slotted in. The files that keep you waiting are generally the CSS and Javascript files linked to from the “head” section of the HTML document. Because these files determine how the page will be displayed, rendering is delayed until they are completely downloaded..”

Pack:Tag
“A serverside static-resource compressing JSP-Taglib. Could cache ad hoc compressed JavaScript or CSS in memory or in a file. The compressing-algorithms are pluggable.”

AJAX and CSS Optimization
“Roland pointed me to an article about the amount of Javascript on digg.com’s home page. Seems a few Digger’s found it interesting. Well here at Zimbra we’ve got tons of Javascript and CSS in our AJAX web app. I decided to try an experiment to see if the techniques we use for Zimbra, a rather large AJAX app would help a site like digg.”

Javascript Compression

Serving JavaScript Fast
“With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”

JSMin – The JavaScript Minifier
“JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.”

YUI Compressor
“The YUI Compressor is a JavaScript compressor which, in addition to removing
comments and white-spaces, obfuscates local variables using the smallest
possible variable name. This obfuscation is safe, even when using constructs
such as ‘eval’ or ‘with’ (although the compression is not optimal is those
cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).”

GZip output compression with AJAX
“To make page downloading quicker, I added GZipStream into the
Response filter.”

Javascript and CSS Compression With Java

LZ77-Algorithm-Based JavaScript Compressor
“LZ77 is known as the basic loseless data compression algorithm. It is used very wide. For example, common .png, .zip, .gzip, .jar, .war file formats use LZ77 compressing algrightm. Here is a Java implementation of such LZ77 algorithm. And by using the Java2Script Simple RPC technology, it sends the string, which is going to be compressed, back to server, which is a Java Serlvet container, and the server runs LZ77 algorithm to compress given string, and then packs compresed string back to browser side. As this compression is specially designed for JavaScript sources, it gives options for how JavaScript codes are compressed. In most cases, this compressor compresses JavaScript at the ratio of 40%~60%. And if you check off those JavaScript options, this compressor can compress any given string.”

Combine and compress your CSS and Java

“So you have your site running on the latest and greatest Java libraries, but your supporting CSS and JavaScript files are really starting to slow things down. You’re no JavaScript expert, so what do you do? Lucky for us some other people have already encountered this problem and have a great solution.”

Javascript Compression With PHP

Packer JavaScript in PHP
“PHP Version of the Dean Edwards ’s Packer de Dean Edwards, a JavaScript Compressor/Obfuscator.”

Javascript and CSS Compression With Rails

Rails plugin: Blazing fast page loads through bundled CSS and Javascript
“I recieved an interesting Sitepoint newsletter the other day which talked about bundling CSS and Javascript ressources (or “assets” like that’s called in Rails talk) to achieve faster page loads. This caught my attention specifically because I experienced the need to repackage many small CSS files on the fly a while back when I worked on a large CMS-type system. Skimming through the PHP source article and code I thought that something similar could be done as a Rails plugin pretty easily and elegantly. I couldn’t resist, sat down and started coding away … so here are my results.”

Javascript Compression With Rhino and Maven

Rhino and Maven for JavaScript Compression at Build Time
“AJAX-based Rich Internet Applications (RIAs) make heavy use of JavaScript. To improve the user experience of RIAs we can minimize the number of (JavaScript) file requests and reduce their size.”

ShrinkSafe
“ShrinkSafe is a JavaScript “compression” system. It can typically reduce the size of your scripts by a third or more, depending on your programming style. Many other tools also shrink JavaScript files, but ShrinkSafe is different. Instead of relying on brittle regular expressions, ShrinkSafe is based on Rhino, a JavaScript interpreter. This allows ShrinkSafe to transform the source of a file with much more confidence that the resulting script will function identically to the file you uploaded. Best of all, ShrinkSafe will never change a public variable or API. That means that you can drop the compressed version of your JavaScript into your pages without changing the code that uses it.”

MobilVox Maven JavaScript Plugin

“The MobilVox Maven JavaScript Plugin (maven-js-plugin) is a Maven Plugin that manipulates JavaScript in a web application. The currently implemented goal is compress which compresses all JavaScript in a Java web application.”

Compression Research

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
“This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.”

Minification v Obfuscation
“JavaScript is a load-and-go language. Programs are delivered to the execution site as text (not as executable or semi-compiled class files) where it is compiled and executed. JavaScript works well with the Web, which is a text delivery system, because it is delivered as text.”

Optimizing Page Load Time

“It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.”

My Other Post About Minimalizm and Compression

Decrease Load Time and Increase ROI in Web 2.0 and AJAX Sites

Facilitate User Experience with CSS Compression

Minimalist Website Design Patterns