Tag Archives: javascript

My Resources

Scrolllooper

https://addons.mozilla.org/en-US/firefox/addon/162030/

Scrolllooper is a Firefox Addon that I created to allow automatic  page scrolling in an infinite loop. This addon was designed to allow a web page to be displayed in public on a large screen. The aim of the addon is simply to automatically scroll to the bottom of the page, and then jump back to the top. The scrolling speed is variable and can be defined in the Preference pane.

The motivation for creating this addon was two-fold: firstly, someone needed this exact functionality, and it did not seem to be available elsewhere; secondly, I was curious as to how exactly addons were put together. In total, it took about 12 hours of work from start (no idea) to finish (addon available on Mozilla addon website), and of course this included many wrong turns and dead ends. Oddly, this was the only case I can ever recall where Google failed to help me find any really useful information on how to proceed. Initially I tried to follow a number of different guides, but they all seemed to be out of date, incomplete or incomprehensible (especially those relating to JavaScript). In the end, I proceeded by using an online generator, some disparate documentation, preexisting addons (open source is handy) and plenty of trial and error. Right when I got to the final stages, I discovered two rich sources of information, which I would recommend as great starting points:

  • Addon Builder at the Firefox Addon Developer Hub – this page provides a customised starter-kit for addon developers, which acts as a springboard, taking a lot of fiddling out of the early stages of development. The site also contains plenty of documentation. I wish I had had this at the outset.
  • XUL Documentation at the Mozilla Developer Center – XUL is Mozilla’s XML based language for defining application interfaces: this is useful when tailoring the Firefox interface to meet your needs. The API provided here seems very thorough and well organised.

Having been through the process of creating an addon, I think there is plenty of educational potential in this process. With proper guidance, there is no reason why senior students should not be able to create and distribute their own Firefox Addons. This would provide a fantastic and realistic introduction to the wide world of open source software, with combination of integrated technologies (XML, JavaScript, CSS) providing a reasonable challenge.

Other Resources

Firefox Addons for Web Designers & Developers

Mozilla Firefox is a free, open source web browser which aims to provide a simple, light and fast way to browse the web. It is one of the main driving forces in the web today, and the competition it provides is one of the reasons that Microsoft’s Internet Explorer has seen so much development in the last 3 years (it is scrambling to become relevant again).

In an effort to avoid the bloating that effects many mature software products, Firefox ships with a relatively minimal feature set, including some of the best features that most people require from a browser (such as tabs, smart addressing etc). However, to ensure that Firefox can meet the needs of all users, there is a huge selection of additional functionality, available as optional addons. The purpose of these plugins ranges from the sublime to the ridiculous, and there are literally thousands to choose from. As an indicator of their popularity, the Firefox website shows that there are currently more than 127 million addons being used around the world! The list below shows some of my favourites, most of which are related to website design and development:

  • Firebug provides a sophisticated environment for analyising and debugging websites. Of particular use is the feature which allows users to see the effects of CSS code visually, making the process of turning an idea into reality that much easier.
  • Wappalyzer shows which technologies (such as Drupal, Google Analytics, jQuery, etc) are used in the website you are currently viewing. This is very useful if you are curious as to how a particular website is put together, and to gauge the popularity of various technologies.
  • ColorZilla provides a color picker, allowing you to grab the RGB code of any colour you happen to see on the web.
  • Firesizer allows users to make their Firefox window a particular size. I mostly use this when creating training videos, to ensure that the Firefox window matches the size of my video container.
  • FoxyProxy extends Firefox’s built in proxy settings, allowing a user to store multiple proxy settings and quickly switch between them. I made extensive use of this whilst working on my laptop in government schools in New South Wales, as it allowed me to quickly switch between work and home settings.
  • Delicious Bookmarks: I am a massive Delicious fan: in fact, most of the articles on this site begin life as Delicious bookmarks. This addon allows you to quickly create and manage Delicious bookmarks from within your browser. In the development process I often bookmark sites that I find interesting and inspiring, and Delicious provides a great way to store, index and retrieve these.
  • Download Statusbar: one of my few gripes with Firefox is its download window, which always pops up and gets in the way of the site I am using. This addon replaces the window with a discreet bar, making browsing flow that little bit better. This addon also ensures that you can keep an eye on your downloads and continue browsing at the same time: great when downloading lots of fonts, images and software during the development process.
  • Flagfox is very simple: it displays, in flag form, the country in which the current web page is hosted. I find this interesting for its own sake, but it is also useful for security and localalisation issues.
Other Resources

Useful AJAX Auto-Suggest Scripts

http://woork.blogspot.com/2009/02/useful-ajax-auto-suggest-scripts.html

When building a website there is no need to produce each component by hand, from scratch. A far more efficient work is to bring together components developed and made available by others. This site offers scripts for Auto-Suggestion, which can help make the process of completing online forms easier and more consistent.