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. The versions under the “Configuration” tab of the Content Editor are not the latest versions of the Application Launcher. Later versions are available for download below.
  2. The OS X version of the Application Launcher bundled with Roxen CMS 4.5 is not compatible with Snow Leopard (10.6) or newer.
  3. Users of Mountain Lion (OS X 10.8) or newer should upgrade to Roxen Application Launcher 4.2.16.
  4. Roxen CMS 5.1 still bundles the 2.2 version of the Windows launcher. Version 3.x of the Roxen Application Launcher in Windows was rewritten in .NET and moved closer to feature parity with the OS X version. Version 3.2 or newer is required for Windows 8 compatibility.

OS X version

Roxen Application Launcher 4.2.16 (.dmg)
Modified: 7 June 2012, 16:07

Windows version

Roxen Application Launcher 3.2.8 (.zip)
Modified: 7 October 2013, 12:51

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, Chrome (Firebug Lite), Safari (Firebug Lite)
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
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
Site: http://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."

Firefox Web Inspector

Browser: Firefox
Site: http://firefox.com

The Web Inspector built into the Firefox browser is evolving into one of the best available inspector tools. Find it under Tools → Web Developer  → Inspect, or use the Inspect Element contextual menu.

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.

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

Windows XP Mode and Windows Virtual PC, available for Windows 7, allow you to run multiple Windows environments, such as Windows XP Mode, from your Windows 7 desktop.

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]