Announcing the Swat Web Application Toolkit

Swat Web Application Toolkit

Over at in the silverorange Labs today, we announced our first open-source project. Swat is a web application toolkit build on PHP5. It’s not totally x-treme or all web-twenny. Rather, it’s a solid (or at least “solidifying”) toolkit containing many of the widgets we use to build web applications.

We’ve had a few generations of our own in-house web toolkit, first in Cold Fusion, then PHP. This time around we’ve used an open-source license for the code, and at least as important, an overall approach to the development that is based on those generally found in the world of open-source software.

I’ll try to answer a couple of questions I expect we’ll get:

Does it use Ajax?
Sort of, kind of, not really. We have a package that runs along side of Swat for any XMLHttpRequest stuff we might need. None of the current Swat widgets use it by default, but it will be easy to extend in that direction. We’re going to be careful to only use these technologies where appropriate and in a way that degrades gracefully.
Why didn’t you just use Ruby on Rails?
We looked at every web application framework we could find. Some, like Ruby on Rails, were quite good (there’s a lot of crap too). However, we have enough of an application base that we can justify the support of our own toolkit. This also let’s us build on the concepts we’ve established in the previous iterations of our formerly proprietary toolkits.

Back in our days programming in ColdFusion, we ran into the perils of working with a platform that makes the easy things really easy and the hard things really hard. We’re doing our best to make something that will be as useful in a powerful and complex (if need be) application as it would building a simply weblog engine.

The toolkit is only a few months old, but we’re already reaping the benefits in our development process at silverorange. There’s more info in the announcement and you can find all the other goodness (Subversion repository, mailing lists, documentation, jabber chat, etc) from the Swat website.

 

Using MediaWiki to Build a “normal” Website

Despite the misleading title, this is not a tutorial on how to use MediaWiki to build a website. Rather, it is an observation that MediaWiki can be used to build sites that look and feel like tradition (non-Wiki) websites.

What the heck is a “wiki”?

First, some background. A wiki is a special kind of website that anyone can edit. Pages on a wiki-powered website have an “edit” button, and anyone can make a change. MediaWiki is one of many software systems that can be used to power wiki sites. MediaWiki is most well known as the software behind the Wikipdia.

When I first started playing with MediaWiki to do some visual customization for the Mozilla wiki, I felt a little bit like I was wandering lost through a jungle of PHP, HTML, and CSS. However, after stripping out a lot of the features I didn’t want or need, I started to get the hang of visually customizing the MediaWiki interface.

I’ve since done some minor skin/theme design for our silverorange wiki, and the WikiPEI site, though I hope to improve both in the coming months.

What I’ve found most interesting about MediaWiki is that people are starting to use it to build “normal” non-wiki websites. Pages can be locked-down, so only certain users have editing privledges. This essentially merges the administration tools of the website into the front-end of the site. This merger has the advantage of making administration easier and more direct. However, it can also make the experience of browsing the site (as a non-editor) and bit less enjoyable (hence the attitude that “wikis are ugly and weird”).

While I’m not about to advocate MediaWiki as the ideal content management system for all websites, it is an interesting use of the technology. Some of the design folks in the Linux group at Novell have been pumping out some pretty slick looking websites based on MediaWiki. Here are some examples of their work:

Examples of MediaWiki-powered “Normal” Websites

Hula website screenshot
Hula Project
Hula is a free/open-source calendar/mail server. The Hula Project website was the first site I found that had a traditional stable website feel to it, but was built on MediaWiki. The header is bold and attractive, and the primary navigation is dead-simple.

Mono website screenshot
The Mono Project
Recently redesigned, the Mono site has a light, fun, cartoon-y feel to it. If it weren’t for the “edit” links sprinkled throuout, you’d never know it was a wiki.

Bealge website screenshot
Beagle Project
Beagle is a desktop search tool for Linux. The Beagle website follows the model of the Hula site, with a bold header, and simple navigation.

Are there other good examples of sites powered by MediaWiki (or other wikis) that look and feel like beautiful websites, rather that weird plain old wikis?

 

WikiPEI: The Prince Edward Island Wiki

WikiPEI

For years, our humble Canadian province of Prince Edward Island had a far better government website than any other I have seen. A few years ago I even posted on Slashdot about how great the site was. The site was built by my friend Peter Rukavina and his company Reinvented. Recently, though, Peter decided to move on to work for other clients and ended his relationship with the PEI government website.

Predictably, the quality of the PEI government website has gone downhill since the end of the involvement of Reinvented. This month, the provincial government put out a request for proposals for a redesign of the site.

This got some of us at silverorange thinking about the government of PEI website. As citizens of PEI with an understanding of web technology we feel a bit of responasbilty to help ensure that our province is well represented online. That said, we just don’t have room in our minds for another large government client.

The peculiar and fortunate chemistry that Peter Rukavina seemed to have the government website staff was something that is unlikely to happen again. Instead, we thought, why not create a wiki-powered website about Prince Edward Island that anyone can contribute to and edit.

A few days later, we have WikiPEI. The site is powered by MediaWiki, the software that also powers the Wikipedia (and the silverorange wiki).

The site is still only a few days old and still quite light on useful content. The idea, though, is that if you have anything useful to add, you can do it. Hopefully, if there is enough interest and participation, the site will grow to become a useful resource for locals and visitors to PEI.

 

Free and Open Source Software at silverorange

I’ve written a short article about how we use free and open source software at silverorange, the web development firm where I work.

Over the past few years at silverorange we have become more interested in and more aware of free and open source software. The interest started on the server side, where the open-source revolution was well underway with the growth of the Apache/Linux web server and then of PHP and other web scripting languages. Since then, however, our interest and experience in open source software has spilled over on to our desktops and laptops.

Since open source software doesn’t have a PR firm to tell the world that a small business like ours can run linux on a majority of desktop machines, I thought we could share a bit of information about the open source software projects we use and follow.

Read the full article over, Free and Open Source Software at silverorange, at our silverorange labs weblog

 

Thoughts on Tabs and Windows

Tab screenshot

If you had asked me, before Firefox came along, if tabs were a good idea for a web-browser, I would have said no, absolutely not. The old Mozilla Browser had them, and Opera had them. Both were clunky and intrusive.

The real reason I would have thought it was a bad idea, though, is that tabs introduce a whole new metaphor to desktop document management. We already have windows – adding tabs inside windows just messes everything up. You can’t use existing operating system window management techniques to switch between tabs, such as Alt+Tab or the window-list taskbar. Why should some documents be in tabs and in a window, while others are each in their own window. It would be anarchy!

Yes, all of the above criticisms of tabs are true, but it doesn’t matter. Regardless of broken and mixed metaphors, after about two years of using Firefox (and the betas that led up to it), I use tabbed-browsing extensively.

Having used them for a while now, I have some thoughts one why tabs do work well for web browsing:

  • You don’t have to use tabs. You can use the browser without even knowing that tabbed-browsing is possible. Just go about your pre-tab browsing business and you’ll not be bothered. No one is forced to learn a new metaphor.
  • Tabs Work well maximized. A lot of my friends and family, especially those with relatively low screen resolutions (800×600 or 1024×768), always run all windows maximized. When running only maximized windows, tabs work almost exactly like new windows.
  • Windowing applications and documents is not always a great system. This article about the file-system browser in Gnome quotes a 1995 study by Microsoft that concluded that “[a]ll but the most advanced users did not understand how to manage overlapping windows efficiently.”
  • Tabs allow grouping of pages, like multiple workspaces in Linux/Unix systems. You can have a set of weblogs open in one window, and a set of work-related pages open in another. This isn’t a killer feature, but I’ve noticed myself doing this.
  • Tabs don’t need to be “managed”. Windows often need to be resized, moved, and rearranged in order to make the best use of their contents and of the rest of your desktop. This isn’t so with tabs. You can’t do any of those things to tabs. I suspect this is one of the reasons people often run all windows maximized – this also eliminates the need to ever move or resize windows.

One of the big disadvantages of tabs compared to windows is that you can never see the contents of two tabs simultaneously. With windows, you can arrange two windows side-by-side, or only partially overlapping. While this is useful in some cases (visual comparing two documents, typing in one windows while using another for reference, etc.), it is not often needed when browsing the web. You just don’t often need to see two web pages side-by-side, and in the few cases where you do, you still can (using windows).

It’s a good thing I wasn’t in charge of the user interface design for Firefox, because I was completely wrong. This is a good reminder that you cannot rely solely on your own intuition when designing software that people interact with.

 

Clients with Weblogs: The Horton Brasses Company

Horton Brasses Weblog

At the web development firm where I work, we have done work for people who have weblogs before (we’re doing some right now, actually). However, none of our core, long-term, clients have maintained weblogs. That is starting to change.

When you realize your professional clients read your personal weblog, it can be a bit disconcerting (see killing independent George). I like to think that I am the same person, regardless of what sphere of my life I’m in (family, work, friends, etc.) but it still takes a better person than I to be truly “yourself” in all such aspects of life.

Such was the case over the last year, when one of our favourite clients, the good people at the Horton Brasses company in Cromwell, Connecticut started reading some of our weblogs. At first, it felt a bit weird. Even though I know it’s all publicly accessible, I still do a lot of talking out of my ass on this site – stuff I wouldn’t say directly to my mom, or my clients. After a while, though, we got used to it, and now I really enjoy getting feedback on a personal weblog post from a client.

Now, Barb and Toby Rockwell, and their son Orion, from the Horton Brasses company have started a weblog of their own: the Horton Brasses Weblog.

Why read a weblog about an authentic reproduction cabinet and furniture hardware company? You’d be surprised – their lives are far more interesting than my own.

For example, Barb and Toby recently returned from a six-week trip to Vietnam. The travel diary of the trip you’ll find in the Travel category of their weblog is fascinating. The’ve also posted loads of photos from their Vietnam trip in their photo gallery.

They’re also writing about company news and some of the great projects their customers are producing.

 

2005 silverorange Summit Keynote Address

silverorange slice logo

Earlier this month, those of us at silverorange retreated to a beautiful cottage on the north shore of Prince Edward Island to take stock of the year past and plan for the year to come.

Dan James, the CEO of silverorange, has posted his keynote address from our summit. Don’t be fooled, though, by our appropriation of large corporate terminology (summit, keynote, CEO). There was no convention center, no podiums, and no power-point projections (though we did use a projector to play Mario Kart). Our technology infrastructure for the weekend consisted of a mass of ThinkPad power adapters, wifi hubs, and game consoles.

We were really just 10 people sitting around a fireplace talking about how to make next year better than the last.

 

Thoughts on Weblog Comment Spam Prevention

As has been publish on a zillion weblogs today, a group of the most significant search engines (Google, Yahoo, and MSN Search) and weblog tool publishers (Sixapart, Blogger, WordPress, LiveJournal, etc.) have agreed to implement a new tool to prevent weblog comment spam.

The idea is simple. Weblog tools will tag links left in comments with a rel=”nofollow” attribute. When search engines see this, they will not follow the link and as a result, comment spammers will not get a bump in the search engines by leaving rogue links.

I can understand that comment spam is a serious problem. It has been quite a problem for me here on this weblog. However, I would like to add my small voice to those who are concerned about the ramifications of this new tag.

Tagging all links in comments left by weblog readers means that none of these links will contribute to the great hive mind that is Google PageRank. There are loads of great and valuable links in weblog comments.

Some systems will likely turn off this feature for comments from “trusted” people, such as logged-in Blogger users, TypeKey users, or LiveJournal-friends. However, this limits the wild-westiness™ of weblogs and the ability to benefit from the mass of communication by improving search results.

I applaud those involved for working to curb weblog comment spam. However, I fear this may hurt the web in the long run.

 

An Article Buried in Junk

LinuxWorld.com article screenshot

I came across an article on LinuxWorld.com today that was so buried in other site features and advertising, that I had to share it.

This full-size screenshot (1.5MB) shows the full length of the page, with the actual article text highlighted in red. This smaller version gives a good feel of how much of the page is used for the actual article.

The website also offers a printer-friendly version of the article that is much easier to read, but even the printer version has an animated Flash advertisement.

I never did get around to reading the article.

 

Some Good Firefox Extensions

Screenshot of my Extensions windowI use a few Firefox extensions that I thought might be useful to others. Here’s a quick overview of the extensions I use and why I like them.

Linky

I’ve written about Linky before, and I still use it regularly. Linky is a simple extension that adds the ability to open a group of links in new tabs or windows. For example, if you have a page with a linked list of screenshots, you can select the list of links, and use Linky to open all of the links in new tabs. Then the screenshots will download each in their own tab, and you can easily browse through them. Here’s a screenshot of the Linky menu.

McSearchPreview

This is a simple extension that makes Google search results pages (and A9, MSN, del.icio.us, and Amazon) display thumbnails of the sites next to each of the search results. Here’s a screenshot of a Google search results page with McSearchPreview installed.

It’s a cool example of how extensions can build and improve upon existing websites/services. All you do is install the plugin, and go search Google. The thumbnails, which from Amazon’s Alexa service, are not available for every site, but the coverage is quite good (and seems to improve).

I saw someone using this plugin at the Gnome Summit this year and thought it was an awesome idea. It has been interesting to see, though, after having used it for a while that the thumbnails are not actually as useful as you might think in Google search results. Maybe that’s why Google hasn’t done this themselves.

Web Developer Extension

Web developer toolbar screenshotMaintained my Chris Pederick, the Web Developer extension add a new menu to the context (right-click) menu on the web page area, the same menu is added to the “Tools” application menu, and a new set of toolbar items are available.

You can put the Web Developer-supplied new toolbar items anywhere in the normal toolbar. Here’s a screenshot of how I organize the tools in my toolbar setup (the Web Developer extension tools are the row of icons aligned to the right under the search box). As the name indicates, this extension is geared towards web-developers. A few of the features I rely on are:

View Style Information
This option lets you click on a web page element (a link, an image, a block, anything) and it will open a new tab listing all of the CSS applied to that element. Very useful for debugging.
Validate Local HTML
Along with slew of other handy validation options (including the basic W3C.org “Validate this Page”), the “Validate Local HTML” grabs the HTML source of the current page and runs it against the WDG Validator. They key to this feature is that the page does not have to be publicly accessible so you can validate password protected pages (of course, you’ll be sending the source out unencrypted), and validate pages on your local hard-drive.
Outline Block Level Elements
The outline menu provides options to outline a variety of different sets of elements, but the Block Level option will put colored outlines on all DIV, P, BLOCKQUOTE, or other block level HTML elements. This is also a great debugging tool.
Display ID & Class Details
This option displays the CSS ID and class names of all the elements on a page. When used in conjunction with the “Outline Block Level Elements” feature, it’s a great way to find out what part of the HTML and CSS a particular problem is stemming from. Here’s a screenshot of a page with these features turned on.
Edit CSS
This feature opens up a sidebar displaying the CSS for the current page. You can actually edit the CSS and see the results in real-time. Of course, you can’t save your changes from here, but it’s a great way to try things out.
Resize
This option will resize your browser to a pre-set or custom size. Very handy when designing for smaller screens (800×600/640×480 in particular).