Blog
I'm really excited about this new project I'm working on. LiveOn is a Kansas City based Startup developing a site that helps people capture and share memories with their family today, and preserves them for future generations. Check out the LiveOn Video on the homepage. It's an awesome idea and we're building some great technology behind it. We've already built some cool Flash components to capture webcam video and microphone audio and we're working with an open source video conversion/repository platform.
I'm still cranking on Doodlekit the Free Website Builder as well. We're working on some awesome new features for layout management and doing some ground breaking work with image/color management, dynamic HTML/CSS elements (like menus) and user interface design.
We're using Java as the core language for LiveOn (long story), which has actually been kind of nice. I'm realizing again that Java is a great language, it just needs more attention from pragmatic people, instead of "Architects". My hope is to start with a solid foundation and start to play with some new tech like server side Javascript. I have some ideas around Server Side Dom Manipulation that could revolutionize the view layer (hopefully someone else does it first).
Anyway, sorry for the rambling, I'm really just trying to get the phrase LiveOn with a link to the site in here as much as possible. ;) So yeah, LiveOn!
I've been using Engines for a couple of years and I've found it way to cumbersome for just organizing code. I looked into Namespacing, but I don't want to have the namespaces in the URLs. All I want is to be able to organize code into subdirectories.
Right now I just need one extra subdirectory for Addons. Here's what my directory structure looks like.
app
-- controllers
---- sites_controller.rb
---- ...
---- addons
------ forms_controller.rb
------ ...
-- models
---- site.rb
---- ...
---- addons
------ form.rb
------ ...
-- views
---- sites
---- ...
---- addons
------ forms
------ ....
Just like you would have with namespacing, but I'm not actually namespacing. To get this to work you only need to add a few lines to your environment.rb file.
Rails::Initializer.run do |config|
....
config.load_paths += %W(
#{RAILS_ROOT}/app/controllers/addons
#{RAILS_ROOT}/app/models/addons
#{RAILS_ROOT}/app/helpers/addons
)
config.controller_paths += %W(
#{RAILS_ROOT}/app/controllers/addons
);
.....
end
ActionController::Base.view_paths.insert(1, "app/views/addons")
We're working on some cool new image management tools for Doodlekit and one small feature we wanted to add was number re-ordering, like you can do in your Netflix queue.Maybe I'm dense but it took me quite a while to get the logic down for this and I went through a number of different revisions before I nailed it. I thought I'd post it here just incase anyone is looking for it, and for feedback
The algorithm I settled on is very simple. Get the elements that you want to change, remove all of them from the array, reinsert them at their new positions in the array (in ascending order), and reindex the entire array. This is all done before saving anything and you should only save what changed.
The example is from a Ruby on Rails controller, but it's simple enough that sans some Ruby magic it should easily translate to other languages.
Once you add the code you can call it like so...
$('my_div').centerVertically();
$('my_div').centerHorizontally();The code is paste below and also on Gist.
New features coming in HTML5 and CSS3 represent a sigh of relief for people using kludgey code and hacks to get things working the way you want. However, there's one element that you can find on almost every single web app that's getting no attention, the File Input. In particular there's no standardization on what it should look like or how you can style it. It seems it's time for the W3C to take care of this.As I'm sure you're aware, the file input looks different in different browsers.

To make matters worse it's impossible to style it like other controls, as it's actually two elements in one. For example, stetting the background and border does this...

You can't even set the button text!
And, as if to deliberately put you into a browser war fueled rage, there are inconsistencies in how the input reacts to JavaScript calls. What I mean is, a hypothetical solution would be to hide the actual file input and have a button that controls it. In theory the fake button would just call the click() method on the file input opening the browse dialog. The problem is this works in Safari and IE, but not Firefox (I didn't test Opera or Chrome). Furthermore, IE will not let you submit the form through JavaScript if you call the click() method, only through a submit button.
The only solution available is a nasty hack that requires you to put an invisible input in front of a styled button. No offense to the people that thought of it, it's clever, but it makes me cringe. It seems to be the accepted practice now, even Apple uses it in MobileMe Mail.Recently my Partner in Crime Heath Huffman tweeted to Jeremy Keith (Author of the amazing HTML5 for web designers) that HTML5 needs to have a way to style the file input, to which he replied "That's a job for CSS, not HTML.". Looking at the CSS3 spec I found...
In addition, this document does not attempt to solve all user interface related issues / features that can be found in modern user interfaces. Perhaps future versions may attempt to solve these. For example:
* Complex or composite controls (e.g. the HTML4 <INPUT type="file"> and the <ISINDEX> elements).
Looks like neither side wants to touch it.
I'm not sure what the solution is. Could be extending CSS to recognize these composite elements, or it could be simplifying the HTML component itself. Maybe HTML could let you have a class for each of the sub components (textbox and button).
Either way this is a design problem many run into and the only workable solution leaves a lot to be desired. Now's the time to do something about it.

