Skip over navigation

Roxen Developers' Toolkit

Below are the list of common software tools that we in WDS use to help us create websites.

Roxen Application Launcher

The browser-based code editor in Roxen CMS is not very powerful. However, Roxen also supplies a helper application that you can install, which facilitates editing raw code files by acting as a bridge between your web browser and your text editor of choice.

Installing the Application Launcher

  1. Enter the Content Editor.
  2. Click on the "Configuration" tab.
  3. Click on "Download Application Launcher," choose your operating system, and follow the on-screen instructions.
  4. NOTE: The supplied Mac OS X version in Roxen CMS 4.5 is not compatible with Snow Leopard (OS X 10.6) or Lion (OS X 10.7); these users can download Roxen Application Launcher 4.2.10, which is compatible with Mac OS X 10.4 through 10.7.

Using the Application Launcher

  1. Enter the Content Editor.
  2. Select the "Editor Profile" dropdown in the top toolbar.
  3. Select "Application Launcher."
  4. When you edit a file, the Application Launcher will open the file in your application of choice.
  5. When you first open files, you need to make associations with the file types. Thus, if you open a .css file, the Application Launcher will ask you what program you want to use to open .css files now and in the future. Once you save these settings, the Application Launcher will remember them and automatically launch your file in your application.

Text Editors

We in WDS use a variety of text editors. Each have their advantages, which can include code completion, code highlighting, and error validation. Below, in alphabetical order, are the common ones that we have used:

  1. Aptana Studio. Free. Mac, Windows, Linux.
  2. Dreamweaver. DESC/MME License or PSR Web Store. Mac, Windows.
  3. Komodo Edit. Free. Mac, Windows, Linux.
  4. Notepad++. Free. Windows.
  5. TextMate. ~$43 (edu discount, 30-day trial). Mac.
  6. BBEdit. $49 (edu discount, 30-day trial). Mac.
  7. TextWrangler. Free. Mac.

Browser Extensions

There are hundreds of browser extensions out there that help developers troubleshoot and write code. Below are the ones that WDS developers can't live without. All browser extensions are free.

Firebug

Browser: Firefox, Site: www.getfirebug.com

Firebug allows you to peek under the hood of your site and tweak it to your needs. Below are some of the features:

  1. Inspect and Edit HTML. View
  2. Tweak CSS. View
  3. Visualize CSS metrics. View
  4. Monitor network activity. View
  5. Debug JavaScript. View
  6. Quickly find errors. View
  7. Execute JavaScript on the fly. View.
  8. JavaScript logging. View

Web Developer toolbar extension

Browser: Firefox, Flock, and Seamonkey suite
Site: https://addons.mozilla.org/en-US/firefox/addon/60

The Web Developer toolbar extension allows you to quickly view source, disable CSS, and disable JavaScript. There are also tools that allow you to overlay a ruler on your site, quickly validate your site against W3C standards, and check how your site performs against accessibility guidelines.

User Agent Switcher

Browser: Firefox, Flock, and Seamonkey suite
Site: https://addons.mozilla.org/en-US/firefox/addon/59

Companion extension to Web Developer's Toolbar. Allows to to spoof various user agents to test whether site scripts are delivering different content to different web clients.

The list is extensible; here is a sample list to import:
http://roxen.princeton.edu/resources/toolkit/useragentswitcher.xml

IE Developer Toolbar

Browser: Internet Explorer 7
Download the Internet Explorer  7 Developer Toolbar

For IE8 and newer, the Developer Toolbar is pre-installed. You activate it via the Tools menu or the F12 key.

This is Microsoft's attempt to recreate Firebug. It is useful for troubleshooting basic rendering issues with IE.

Safari Web Inspector

Browser: Safari 3.1+
Site: http://www.apple.com/safari/

Web Inspector is included with the Safari browser, so there's no need to install a plugin. To turn it on, go to Preferences > Advanced. Then check the box labelled "Show Develop menu in menu bar."

The version included with Safari 4 is greatly improved.

MODIv2

Browsers: Firefox, Mozilla, Netscape 8, Opera 7.5+, MSIE 6+
Site: http://slayeroffice.com/tools/modi/v2.0/modi_help.html

The Mouseover DOM Inspector (MODI) is a favelet that offers similar functionality to the above tools, except that it works in more browsers. It provides information on node structure, layout, and attributes.

ColorZilla

Browser: Firefox
Site: https://addons.mozilla.org/en-US/firefox/addon/271

ColorZilla works very similarly to the eyedropper in Photoshop and GIMP. Click on the extension in your lower left corner of the browser, and a set of crosshairs will appear. Use your cursor to gain valuable color information about the site you are viewing.

Resizeable Textarea

Browser: Firefox
Site: https://addons.mozilla.org/en-US/firefox/addon/3818

For the times when using the Roxen CMS "Built-in" editor is more convenient, this add-on allows you to resize the editor window. Google Chrome and Safari 3.1+ allow resizing of form text areas by default.

Testing Internet Explorer

Testing multiple versions of Internet Explorer used to be complicated, unpredictable, and not always reliable. However, Microsoft has released free versions of IE in multiple operating systems so that developers can test their sites effectively and accurately.

Windows

  1. Download and install Virtual PC 2007. This software will allow you to run multiple images of Windows XP SP3 or Vista that contain Internet Explorer 6, 7, or 8. Windows 7 users should instead install Windows XP Mode and Windows Virtual PC.
  2. Download and run the Windows operating system image(s) that are relevant to your testing needs: 
  3. NOTE: These images are set to expire within 4 to 6 months. Microsoft does this because, for all intents and purposes, they are giving away free copies of XP, Vista, and Windows 7. Microsoft provides new versions when the current images expire.
  4. NOTE: The version of XP that one can install with the version of VIrtual PC for WIndows 7 (otherwise known as Windows XP Mode) does not appear to have an expiration.

Mac

VMware Fusion is an application that allows you to run Windows inside of a virtual machine (VM) on OS X on Intel-based Macs. It is available at the PSR Web Store, as well as copies of XP, Vista, and Windows 7.

Linux (and Windows and Mac)

VirtualBox is an open source alternative to VMware Fusion. You will still need to have a licensed copy of XP, Vista, or Windows 7.

Scanning for Broken Links

Stale content with broken links can become a significant issue for websites with infrequently updated content, especially on pages buried a few levels deep within a site. It is common practice to enhance site content by linking to original source material on external sites; however, external sites can shut down or reorganize site architecture without warning, breaking these links and diminishing the value of your content.

An automated tool that can crawl through a site to verify the source of each item of linked content is the only practical solution for a large site.

Xenu’s Link Sleuth

Platform: Windows (Mac users should use a Virtual Machine)
 
“Xenu, or Xenu's Link Sleuth, is a computer program that checks websites for broken hyperlinks. It is written by Tilman Hausherr and is proprietary software available at no charge. The program is named after Xenu, the Galactic Ruler from Scientology scripture. Link Sleuth runs on Microsoft Windows. Link verification is performed on links which appear in <a> tags, as well as images, frames, plug-ins, backgrounds, local image maps, style sheets, scripts and Java applets.” [source: Wikipedia]