The most important part of this code is the_post(), which initializes a global $post PHP object containing all of the page data. The loop construct is also required for single post view, because all functions for presentation of data rely on the presence of the $post object. These functions are called template tags, and their main purpose is to output formatted data. Usually, they do not output HTML tags so that they can be used in different scenarios.
A complete guide to theme development is available here.
Joomla’s Content-Based Model
Joomla has a completely different theming approach. Joomla’s templates are built on a common structure defined in an index.php file.
This file contains both static content (i.e. content that is common throughout the website) and template tags, which serve as content place-holders and are replaced by HTML output during the page-rendering phase.
Template tags differ in the type of content they provide: component, message, module, head.
This structural backbone implies that each view in the CMS outputs not a complete page but just what’s needed to present content. At first glance, a developer used to the theming model of WordPress might think that there’s no way to customize this content block. In fact, Joomla relies on the MVC architectural pattern, meaning that data extraction and presentation are separated, the latter being rendered by the view part of the application.
Template Customization
To customize the default view, Joomla has a pattern called template override, through which the system scans the template folder for a custom view file to use in place of the default one. The image below shows the folder structure and naming convention of a default view and its override.
An example of the folder and file structure of a Joomla template override (from the “ja_purity” template).
Joomla overrides are an excellent way to customize a website template without hacks. Still, they are often overlooked, and Joomla’s support of legacy extensions make this pattern unusable, even for popular packages such as Virtuemart (which uses its built-in template system).
A complete reference for Joomla’s template system is available here.
In the last few years, plug-ins have made a big difference in the software industry, one of the most notable examples being Mozilla Firefox.
As we noted, modern CMS’ are developed to be extensible, allowing us to use the core as a backbone and build specialized parts on top of it. This resulting modular design is an effective development model for many reasons:
Better maintainability Developers don’t need to modify the core in order to add or customize functionality.
Lightweight and safer Only features that are needed are included, resulting in less memory consumption, a smaller code base and fewer vulnerabilities.
Separate development cycles for core and features By offering an extensions API, third-party developers can add new features while the core team focuses on the reliability and performance of the system.
With open-source projects, this last point is both a blessing and a curse. It benefits from shared development effort but leads to unverified work and a less organized workflow.
Joomla and WordPress have tried to overcome this curse by providing coding guidelines. Still, little effort is spent documenting the back-end and front-end UI design.
Aside from their different naming conventions, the extensions models of WordPress and Joomla differ in how third-party code interacts with the core by mean of the extensions API.
The key point to understand is that while Joomla is based on MVC pattern, WordPress relies on an event-like system to which extensions can be hooked. Let’s look at some details.
WordPress’ Hook Method
WordPress’ extensions model is based on the execution of a set of functions attached to the system flow by mean of “hooks.”
Hooks contain a list of functions that are triggered at various points as WordPress is running. They manipulate (in the case of filter hooks) and output (in the case of action hooks) database data and can be accessed from within the theme itself and from a specialized plug-in package.
WordPress lacks comprehensive documentation for hooks, but a list of hooks is available here.
To understand the mental model behind WordPress’ hook system, we can compare it to the sequence of actions in baking a cake. In the beginning, we have an idea of what kind of cake we want to bake, so we get our ingredients. We cannot just throw everything together and bake it. So, we execute an ordered list of actions, such as “filtering” egg shells and mixing the eggs in with flour and sugar. As we’re doing that, we might want to customize the recipe. So, we “plug in” some chocolate and perhaps reduce the quantity of another ingredient by half. The result is a proper cake, created from discrete ingredients and a touch of creativity.
WordPress bakes its pages the same way.
Sidebars and Widgets
While plug-ins are broadly related to hooks, a widget is a special type of plug-in. It provides a means of showing information in a theme’s sidebar. The main advantage of widgets is that they are configurable in the back-end interface, allowing quick customization even for novice users.
All available widgets are listed in an administration panel.
In terms of theme development, the sidebar is similar in its mental model to Joomla’s template tags. It is a placeholder for something. The misleading bit is that a sidebar doesn’t have to be placed in the actual sidebar of a layout. It could go in the footer, navigation, header or elsewhere.
To learn more about the new API for widget development, have a look at the official documentation.
Adding Functionality
Until now, the problem with WordPress’ extension API was that it gave you no simple way to add complex functionality, such as e-commerce carts and event listings. Most developers excused this shortcoming by pointing out that WordPress is a blog engine. This will hopefully be resolved with the release of WordPress 3.0 and its system for “post types,” which makes it possible to use the “post” and “page” interfaces for different types of content.
As for other popular CMS’ (such as Drupal), post types function as a kind of “Content Construction Kit,” giving you the ability to smartly add, manage and present specialized content. If you’re interested in trying this new feature, here is a good tutorial.
Other than post types (and until major plug-ins update support for this feature), the only feasible way to add complex functionality is to use already existing pages as containers, placing in the body a place-holder (called a “shortcode“) that is replaced with HTML output by specific filter hooks.
This approach is used by plug-ins such as Buddypress and WP e-Commerce, which extend the blog engine with social network and shopping-cart capabilities.
Another great example of shortcode implementation is Contact Form 7, a fully featured contact-form management plug-in.
Extending Joomla
An often overlooked aspect of Joomla is that it is built on the solid MVC framework. So, extending its core is really much like working with products such as Zend Framework and CodeIgniter, which give you an already designed back-end interface upon which to integrate your own extensions. This approach also gives designers the ability to use template overrides, even for third-party extensions.
A diagram depicting Joomla’s Model View Controller system flow.
To better understand MVC and how it works in Joomla, here is a complete reference.
Joomla’s Extension Types
Joomla’s extension model comes in three flavors, each with different tasks: components, modules and plug-ins.
Components extend the core by adding specific functionality, such as e-commerce carts, event listings and forums. From the user’s point of view, we can think of components as discrete sections of a website, not connected to other content. A popular example is JEvents, an events calendar.
In the theme system, a component’s output replaces the component placeholder in the template’s index.php file:
Modules are like widgets in WordPress: they show a component’s information, which is extracted from the database. They are “attachable” to module positions and can be put on every page of a website.
Modules are primarily intended to be teaser blocks, but they can incorporate full text and image galleries, which makes them handy for static parts of a layout, such as footer notes. They are also useful for showing related content on a page. For example, you could highlight interesting products for Web developers as they’re browsing a list of barcamp events.
The template tag, which serves as module place-holder, looks like this:
Plug-ins work similar to WordPress’ hook system, because they bind to specific system events to format, manipulate and replace HTML output. Possible fields of action range from content for articles (such as video embedding tools—AllVideos is a popular one) to HTML filtering and user-profile extension. Commonly used Joomla plug-ins include URL rewriting filters, which come bundled with administrative components such as Sh404SEF.
You probably use Google Analytics on a regular basis, for basic stats tracking the performance of your site. And, just like most GA users, you probably very rarely venture far from the comfort of the reports shown on the dashboard. That’s all the analytical information you need, you may be thinking … or is it?
Did you know that Google Analytics can generate up to 85 different reports that will help you analyze all possible data about your website traffic. It not only tracks visitors to your site or the number of page views, it can be used to see which content gets the most visits, time on site per visit, which ads are driving the most visitors to your site, it track the performances of your marketing campaigns, including AdWords, Adsense and emails and much, much more.
This post is not a be-all-and-end-all look at GA, but a rough guide to its many under-used features and reports. It is an easy to read guide that will help you understand and use the full power of Google Analytics. Honestly, it’s not that daunting.
Google Analytics will only track pages that contain the Google Analytics tracking code, this is a small Javascript snippet that needs to be added to each page of your site, either manually or through the use of plugins or tool. You will find some tools and plugins to help you do this near the bottom of this post.
For a static webpage or if you want to manually install the code into your pages, copy and paste the code segment into the bottom of your content, immediately before the body tag of each page that you wish to track.
To access your tracking code
Sign in to Google Analytics.
From the Analytics Settings page, find the profile for which you would like to retrieve the tracking code. Please note that tracking code is profile-specific.
From that profile’s Settings column, click Edit.
At the top right of the Main Website Profile Information box, click Check Status.
Your tracking code can be copied and pasted from the text box in the Instructions for adding tracking section.
The Dashboard and Analytical Reports
Log into Google Analytics and you’ll arrive at dashboard, the central hub that gives you an overview of all the popular reports (visitors, content, traffic sources and the cool map overlay) generated by Google Analytics. You can customize this page by changing what reports are shown, as well as dragging and dropping the reports into a format that suits your needs.
Google Analytics Interface Tutorial A brief overview of how to use the Google Analytics interface. If you are new to Google Analytics or you’d like to pick up a few tips on how to use some of the different features, this video is a good place to start.
Interpreting Reports
Google offers comprehensive tutorials and guides to using Analytics, in the form of a series of Adobe Breeze Presentations. Below you will find the guides and presentations to understanding and using the reports generated by GA.
Guidelines to interpreting GA Reports In this presentation you will learn the best practices for analyzing data, how to analyze data trends and how to use the data visualizations in Google Analytics.
Pageviews, Visits, and Visitors Learn where to find Pageviews, Visits, and Visitors metrics, how Pageviews, Visits, and Visitors are calculated, the difference between Pageviews and Unique Pageviews and the difference between Absolute Unique Visitors and New vs. Returning Visitors.
Time Metrics How Time on Page and Time on Site are calculated, how Avg. Time on Page and Avg. Time on Site are calculated and learn about the Length of Visit report from this presentation.
Traffic Sources Learn about the different kinds of traffic sources, how to identify quality traffic, how to identify revenue and conversion drivers, what kinds of information to look for in keyword reports, how campaign attribution works in Google Analytics
Content Reports How to use and interpret the Top Content, Content by Title, and Content Drilldown reports; how to use the Top Landing Pages report; how to use and interpret the Navigation Summary report; how to use and interpret the Entrance Paths report.
Analyze Traffic Sources, Content, and Navigation Use your Google Traffic Sources, Content, and Navigation reports effectively. In this video you will see the different sources of traffic, tracking content performance and analyzing visitor navigation.
Analytics and Flash and Flex Content
One of the most common Google Analytic implementation challenges has been tracking Flash content. In the past, Flash tracking was not provided out of the box, and every implementation had to be tailored to each individual site, developers who tracked Flash had to create their own processes to get it working.
Google now provides easy to implement tracking libraries for both Flash and Flex, the libraries include: Flash visual component, Flash AS3 library, Flex MXML component and Flex AS3 library. Download: Flash and Flex Analytics Tracking Libraries. Documentation: Developer Documentation.
Learn how easy it is to track Flash content using the new Google Analytics Tracking For Adobe Flash.
Analytics and Ecommerce
After you have enabled ecommerce transactions, Google Analytics will generate very detailed reports about every single transaction
Tracking Ecommerce with Google Analytics By using Google Analytics with your Ecommerce website, you can gain valuable insights about your transactions, ROI, and customers.
Step-by-Step to enabling Ecommerce Reporting
The first step of tracking ecommerce transactions is to enable e-commerce reporting for your website’s profile.
Log in to your account.
Click Edit next to the profile you’d like to enable.
On the Profile Settings page, click edit next to Main Website Profile Information.
Change the E-Commerce Website radio button from No to Yes.
Analytical Goals
As a simplified explanation, Goals are only a page view, nothing complicated about that. If you define a goal in Google Analytics, you are telling it what page view constitutes the completion of a Goal, and Analytics then tracks it. It is an easier way to generate the reports that you need as well as a great way to measure your business objectives.
Select the account that contains the profile you’ll be creating goals in from the Overview page.Find the profile for which you will be creating goals, and click ‘Edit’ under the ‘Actions’ column.
Under the ‘Conversion Goals and Funnel’ section, select one of the four goal slots available for that profile and click ‘Edit.’
Turn the goal ‘On’ or ‘Off.’ If you choose ‘On,’ that means you want Google Analytics should track this conversion goal at this time. Since there are no ways of deleting goals, turning it ‘Off’ can make the goal inactive.
Select from one of the three match types that Google Analytics uses to identify the goal.
Enter the Request URI in the Goal URL box. Reaching this page marks a successful conversion. For example, a registration confirmation page, a checkout complete page, or a thank you page.
Enter the ‘Goal name’ as it should appear in your Google Analytics account.
If your goal URL is case sensitive, this means your goal URLs are capitalized exactly like the visited goal URLs.
Enter the ‘Goal value.’
10 Must Track Google Analytics Goals The author of this article gives you 10 ideas for using Analytics Goals. He advises to setup goals for visitor comments on your blogs, social bookmarking actions, newsletter subscriptions, track feed subscriptions… and much more.
Import your Google Analytics Goals into AdWords and use them with Conversion Optimizer In order to track your ROI from AdWords, you need to be able to see which keywords, ads and campaigns lead to conversions on your site. If you use Google Analytics, you can now import your Google Analytics Goals and Transactions into your AdWords account to use as conversion actions. This lets you track the ROI from your AdWords campaigns directly inside the AdWords interface.
Custom Reporting
Custom reports in Analytics give faster access to the information you need and less data reports to sift through. Simply, they remove the data that is relevant to you, leaving you with the bare bones reports that you need. You choose the information and metrics you want to see, organized in the way you want to see it.
Quick Start Guide to Custom Reporting
If you are stepping into custom reporting you should really read this official guide, from Google Support. You’ll learn to get from conceptualizing your custom report to actually building it, and will give you a basic insight into concepts and terminology involved in analytics and custom reporting. Check out also Quick Start Guide for Custom Reporting and Google Analytics Glossary
Custom Reporting in Analytics Video Learn how to create custom reports in Google Analytics that show the information you want to see, organized in the way you want to see it.
Google Analytics has lots of tools and can generate reports that can help you with AdWords and Adsense campaigns.
Adsense Reporting in Google Analytics If you are an AdSense publisher, you can use Google Analytics to see and perform in-depth analysis on your AdSense data.
Step-by-step guide to linking Adsense and Analytics
Linking Adwords with Google Analytics Linking Google AdWords and Analytics helps provide insights on keywords, ROI, visitors, and more! Learn how to easily link your accounts.
Step-by-step guide to linking AdWords and Analytics
Below you will find the simple step-by-step guide from Google Support.
If you don’t have an Analytics account, click the Continue button to sign up for one.
If you already have an Analytics account, click I already have a Google Analytics account.
From the Existing Google Analytics Account drop-down list, select the name of the Analytics account you’d like to link to. Can’t see it there? You’ll need to add your AdWords username to your Analytics account as an Account Admin ( Learn how).
Keep the checkboxes selected on this page, unless you’re sure you’d like to disable auto-tagging and cost data imports.
Click Link Account.
Google AdSense Reports in Analytics – Guide This article gives you a basic guide to Adsense and Analytics, it covers top content, referrers, revenue, trending and revenue sharing.
Google Analytics Desktop Apps
Polaris for Google Analytics The sleek and stylish Polaris is the most popular and quite possibly the best desktop application for Google Analytics. It has been developed using Adobe AIR, making it cross-platform desktop widget for Google Analytics. With 8 standard reports available, you can view your stats instantly.
Polaris is a free download for everyone who manages one website profile, and for those who are managing multiple profiles, the upgrade to the full version is $15 a year.
Analytics Reporting Suite This is another useful and feature rich Adobe AIR app for Google Analytics. It uses it’s own custom API to interact with Google and nearly implements all features of Analytics. With Analytics Reporting Suite you can use multiple profiles from different Analytics accounts, all popular reports (visitors, traffic and content) are available and you can also view your goal values and data segmentation.
Dashalytics – MAC Dashboard Widget Dashalytics is a free Dashboard Widget for your Apple Mac that offers quick access to Google Analytics statistics.
Google Analytics Firefox Extensions
Fire Analytics The Fire Analytics extension allows you to view your Google Analytics reports within a popup from Firefox.
Is Google Analytics Installed This is a great little utility for web developers, checks automatically that Google Analytics is installed on any given page.
Web Analytics Solution Profiler/Debugger (WASP) WASP provides detailed information about the data being collected from Google Analytics, through Query String and Cookies by web analytics solutions (called “tags”, “trackers” or “web bug”), ad networks, behavioural targeting and multivariate testing tools.
Grease Monkey Firefox Extensions
Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function. You will need this extension to run the following useful little scripts.
The Better Google Analytics Firefox Extension (BetterGA) BetterGA is a compilation of the best Greasemonkey userscripts from various authors, brought together to create this feature (Auto Access, Content Search, Cleaner Profile Switching, Export to Google Docs…) rich extension. Remember and install Greasemonkey first.
Include Today in the Default Google Analytics Date Range By default, Google Analytics shows you the statistics for a 30 day period up to the previous complete day. This Greasemonkey script includes the current in all reports.
Silverlight Analytics SilverlightAnalytics lets you use the power of Google Analytics within your Silverlight application. You can track web stats such as button clicks, mouse-over’s, events, page views, or anything else you might want without having to call Invoke().
Google Analyticator Google Analyticator is an easy to implement WP plugin that adds Google Analytics tracking support to all WordPress posts and pages. It comes with an easily customizable widget that can be used to display specific information from the Google Analytics API. It supports all of the tracking mechanisms that Google Analytics supports such as external link tracking, download tracking, tracking without counting administrative users, and any other advanced tracking the user wishes to add.
Google Analytics for WordPress This useful plugin adds the ability to tag and segment all outgoing links, so you can see whether a click came from a comment or an article. It also adds the possibility to track just the domain, instead of the complete link, so you get a better view of how much traffic you’re sending where.
Dashboard Reports Plugin Wordpress Google Analytics Reports plugin helps you to get real time live reports from Google Analytics using the data API, and viewed from the Wordpress Dashboard.
Google Analytics and Feedburner Reports Plugin This plugin allows you to easily view quick and basic Google Analytics and Feedburner reports in your WordPress admin area. It adds a top-level Reports tab and when you click on it, you’ll get a quick 7 day overview of what’s going on with your site (pageviews, visits, referrers, etc). You’ll have to login to Google Analytics or Feedburner directly if you want more detailed stats.
Drupal Module
Google Analytics Module This powerful and feature rich Drupal module allows you to add the following statistics features to your site: Selectively track certain users, roles and pages; Monitor what type of links are tracked (downloads, outgoing and mailto); Monitor what files are downloaded from your pages; Cache the Google Analytics code on your local server for improved page loading times; Track user segmentation from Drupal profile data; Site Search support; AdSense support.
Google Analytics Tracking Module Google Analytics Tracking Module is a simple module for Joomla! 1.0.x. and Joomla! 1.5 used for inserting Google Analytics tracking code into a Joomla site via a module. This module makes it possible to add the tracking code before the closing body tag in template, which is recommended by Google.
Mobile GA for Android Mobile GA for Android is a secure, fast and lightweight application for accessing your Google Analytics data. The app is intended to help you keep an eye on your key summary statistics while you’re on the move. The price for this app is only $2.99.
Google Analytics Tips and Ideas
The Google Analytics: Power User Guide This guide is a compilation of VKI’s Google Analytics: Power User series, presenting an overview of several key features and uses of Google analytics—some basic, some advanced—and how you can use these features to analyze, interpret, and optimize your websites traffic. Also available as PDF.
Google Analytics Tips You Should Know AboutA round-up of six useful resources, with some of the handiest Google Analytics tips out there, starting from the simplest and moving on to trickier stuff.
50 Resources for Getting the Most Out of Google Analytics Google Analytics is a very useful free tool for tracking site statistics. For most users, however, it never becomes more than just a pretty interface with interesting graphs. The resources below will help anyone, from the beginner to those who have been using Google Analytics for some time, learn how to get the most out of this great tool.
Youtube Channel The official channel for all videos about and related to Google Analytics. 13 videos at this time.
Advanced use of Google Analytics and the new interface Since Google Analytics was launched in 2005 it has become one of the top analytics packages for small to medium sized websites. Growth was initially slow due to the frustrating waiting list system initiated by Google to avoid over stretching their servers. Now that the waiting list has been removed anybody can sign up to use this great service.
5 Lesser Known Google Analytics Features Google Analytics is a great program that can do a lot more than most people realize. Here are a few features that you may not know about.
Measure Online Advertising with Google Analytics Google Analytics is a free web analytics application that is quickly becoming one of the most widely used web analytics tools around. A common misconception that many people have is that GA can only be used to track Google AdWords. That’s simply not true. GA can be used to track any online marketing activity.
Twitter and Google Analytics: What to Track By default, traffic from Twitter will be tracked as referral traffic in Google Analytics. A better way to track a Twitter campaign would be to use GA’s campaign tracking feature.
Tracking Email with Google Analytics Tracking email campaigns in Google Analytics is done using a process called link tagging. This process is the manipulation of the links in your emails.
Optimize Form Length with Input Analysis In this post, I will share with you E-Nor’s technique in determining the forms fields that people are most likely not to complete. I will show you how to make this data available to decision makers and web optimizers so they are able to make the necessary changes.
Google Analytics Reporting Suite The Google Analytics Reporting Suite brings Google Analytics to the desktop, with a host of features that help you understand how your website is performing and where you can improve. From tracking your visitors, referrals and campaigns to viewing your AdWords ROI metrics, the Google Analytics Reporting suite is a must-have for every web business.
Forcing Google analytics to show real time data Google Analytics generally updates your reports every 24 hours. This means that it could take 24 hours for data to appear in your account after you have first installed the tracking code. Learn how you can get real time data from Google Analytics.
Measure Online Advertising with Google Analytics A common misconception that many people have is that GA can only be used to track Google AdWords. That’s simply not true. GA can be used to track any online marketing activity. And not only will Google Analytics track online marketing, it will also identify the conversion events that your online marketing creates.
5 Lesser Known Google Analytics Features Google Analytics is a great program that can do a lot more than most people realize. Here are a few features that you may not know about.
SiteScan It may take some time to check the correct and complete code integration manually. This service helps you to check the correctness of the code snippet automatically.
How to track Social Media Users with Google Analytics One of the questions we are often asked is how we track various social media sites users and their interaction with sites the answer is in a variety of ways but here is just one of the techniques we use with Google Analytics.
Tracking regional Search Engines in Google Analytics Google Analytics recognises 41 search engines by default. Although this is constantly being added to, there are of course a great many other search engines in the world – language and region specific, as well as price comparison and vertical portals.
Adding Business Data to Google Analytics Data “We tried using Google Spreadsheets to store business info but it never worked. People did not take the time to open up a spreadsheet and add information. We figured that adding some type of ‘note’ functionality to GA would be the easiest way to change this behavior. That’s how GA Notes was born.”
Luna Metrics Blog A blog of an Internet consulting firm that specializes in configuring and evaluating Google Analytics.
Analytics Talk Justin Cutroni’s blog about Google Analytics.
And finally…
Google Analytics may be lying to you, even though it tells the truth — simply because you’re not telling it how to track your site effectively. Are you guilty of any of the following?
Are those really your conversion rates?
Do customers actually find your site using that keyword?
Are you sure that Digg story sent you all that traffic?
jQuery UI The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.
Google Web Toolkit The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks.
Jx Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.
Freestyle Webtop Toolkit Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).
Script# Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.
Aptana Jaxer Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS.
JS Regex Generator JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.
WaveMaker WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.
Documentation Tools
JSDoc Toolkit JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles.
jGrouseDoc jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.
JavaScript Debugging Tools
Firebug Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.
Venkman JavaScript Debugger Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.
Drosera Drosera is an excellent debugging tool for Safari and WebKit-based browsers.
Opera Dragonfly Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly.
NitobiBug NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications.
DebugBar DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.
Internet Explorer Developer Toolbar Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.
JavaScript Testing and Validation Tools
Test – JavaScriptMVC Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.
JsUnit JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution.
JSLint JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.
Crosscheck Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers.
YUI Test YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.
J3Unit J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode.
Regular Expression Tool The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.
JSLitmus JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.
Security Tools
AttackAPI AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities.
jsfuzzer jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.
New and Alternative JavaScript and Ajax Development Frameworks
Clean AJAX Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.
SAJAX SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.
JavaScriptMVC JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development.
qooxdoo qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.
SimpleJS SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.
Image Manipulation and Graphing
Reflection.js Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.
typeface.js typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text.
CanvasGraph.js CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.
flot flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.
JavaScript Diagram Builder The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.
The Dojo Charting Engine The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.
AJAX Libraries API Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website.
DamnIT DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications.
ie7-js ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model.
Lazy loader Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.
JavaScript Code Optimization and Minification Tools
JS Minifier JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.
JSMIN JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size.
YUI Compressor The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!.
Scriptalizer Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.
ShrinkSafe ShrinkSafe is a compression tool that reduces JavaScript file sizes.
SlickSpeed Selectors Test SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.
