January 6, 2009 7:42 PM
Inspiration comes from the strangest sources. In my case, the way the
font Myriad Pro Black looked with drop shadow on a Flex Application
Control Bar1 made me want to design and develop a full fledged text
based Flex application2. Being bombarded with Flex related questions
all the time, a Q & A site for the flex and flash community seemed a
logical choice. Adobe Inspire and stackoverflow.com heavily inspired
me and I wanted to see for myself how my attempt at implementing a Q &
A site in Flex would look like. The result is
sandboxviolation.appspot.com - a site built in Flex on Google App
Engine for the flex and flash community where users can post questions
/ answers and vote a question or answer up or down earning
"reputation" points along the way.
Developing on Google App Engine
Google App Engine (GAE) is very intriguing considering the amount of computing power that it puts at a developer's disposal. Building an application on GAE was something on my list ever since I first heard of it. Working within the limitations that GAE and its datastore imposes is challenging and gratifying in its own way3 even for implementing something as simple as paging the questions when they are sorted on votes or views. That though deserves its own blog post.
During development, Aral Balkan's excellent blog posts related to GAE were immensely helpful.
OpenID is used for login4. GAE's undocumented full text search (SearchableModel) is used to search through question titles though it seems to return all the records when noise words are queried.
Syntax Highlighting
Apart from being in Flex and running on GAE, another unique detail about sandboxviolation is live syntax highlighting of code as you type it. Google has this amazing javascript library called google-code-prettify that can syntax highlight almost any language5. I ported this beauty into ActionScript, tweaked it a bit to add support for recognizing ActionScript within MXML and coloring "function" and "var" a little differently so that the statement "private function" looks like the way it would look in Flex Builder. The result is a custom TextArea that can syntax highlight code sections written in almost any programming language.
I must admit that I'm the type of programmer that fusses over silly things like the font the code is displayed in. I needed to have a font for code that would match with Myriad Pro Black. Consolas Bold fit the bill, but you need to purchase a license to embed it in a flash / flex application. Then I looked upon Inconsolata which is a beautiful monospaced free open source font. It was too thin compared to Myriad Pro Black, but since the author published the source of the fonts, I made it slightly bolder.
Take a look at how the code looks on the site.
Design
Designing sandboxviolation has been fun and I must say I enjoyed it immensely. Much of the design choices are personal and out of my love for programmatic skins and graphics. They are not necessarily following the best practices.
The first component I did was the custom UIComponent on the top right that indicates asynchronous activity; a circle moves along the inner boundary of a ring to show progress. The triangular voting button and circle depicting a tag in the tags view are all programmatic skins applied to the button. The progress bar is also programmatically skinned to depict it as a chain of circles as visible in the initial loading and login processing bar.
Somehow, I love the way the combo box showing the sort order looks. That was only CSS though.
There are two custom effects. One which slides the entire list so that the selected question comes on top and another which is invoked on the click of the voting button. Red / green bitmap copies of the voting button move up / down.
I tried to implement a smooth scrolling List based on Alex's efforts and succeeded partially. My implementation works decently in most cases. But it has some serious bugs and disadvantages like the lack of mouse wheel scrolling support. This also deserves its own blog post which will be coming soon.
Searchability
As I was not sure how well google would index the textual content in the flex application since I'm using the framework RSL, I'm also spitting out HTML for each question and its answers and generating a sitemap XML file which lists links to the HTML version of all questions. Visiting the HTML version of a question redirects the user to the Flex version (effortlessly done thanks to Flex 3 Deep Linking) regardless of who they are. There is no sneaky misdirection; users are informed of this in the HTML version and are redirected regardless of who they are. The HTML version is solely for improving searchability.
Community
sandboxviolation is by no means intended to compete with flexcoders or the official Adobe forums. Instead it is intended to complement them by preserving good questions and answers related to flex and flash. The site is solely targeted at developers who are into flash and flex.
To improve the ranking of questions, users can vote on questions and answers. Votes on a question or answer also increases or decreases the author's "reputation" points. All questions and answers will be heavily moderated.
Why Flex?
One of the aims while developing sandboxviolation was that the above question would transform into "Why not Flex?" while thinking about developing such sites.
Post your feedback regarding bugs6, ideas or the above question at sandboxviolation.uservoice.com.
[1] Maybe Debussy's Clair De Lune might have also played a little
part.
[2] Yes, even after seeing the responses from people to Adobe Inspire being
in Flex.
[3] I'm hoping that the site won't go down because of the short term
CPU limits.
[4] Issue 404 with urlfetch was fixed.
[5] Sadly, Lisp isn't one of them.
[6] Being in an alpha state, there are bound to be many bugs.