Tag Archives: prototype

Another update to the Ensemble UI Mockup

First of all, thanks for the great feedback on my mock-up from last week.

I’ve updated my mock-up again. Here are the highlights:

  • The contact tag selector has been decoupled from the search input, and is now on its own
  • Added widgets for sorting the contact list (currently only decorative)
  • Search queries can be cleared by clicking “X” on the search input
  • Support for semi-hierarchical tags
  • The contact list has been made wider
  • Moved the add / remove contact buttons

I’ve also updated the feedback form. Please give me feedback on this design. Once again, just to reiterate, at this point I’m primarily interested in how the mock-up lists contacts, and allows you to display that list. The view for individual contact details is of less interest to me right now.

Anyhow, check out the new mock-up here.

Usual disclaimer: The code is ugly as hell, and I haven’t tested outside of Firefox.

Note: Each tag should have some contacts. If you’re seeing empty tags (No search results for “”), try the following:

  1. Go here, and click refresh
  2. Then go here, and click refresh
  3. Then go here, hold down shift, and click refresh.

Don’t ask me why this happens, or why the above works. I think people.mozilla.org is doing some caching, and sometimes doesn’t realize that I update my stuff. Or maybe I’m doing my rsync all wrong. I have no idea.


Update to my address book mock-up

Update: I also added “instant” style searching a few minutes ago. I thought it was cool enough that I’d update my mock-up right away.

Thanks so much for the great feedback this past week for my initial mock-up!

Today, I’ve decided to zoom in a little bit, and try to make some adjustments to the contact list, the category selector, and the search input.

The contact search, category selector, and list have been updated.


Here’s a list of the things I’ve changed, in no particular order:

  • “Instant” style searching.
  • Names in the contact list are not bold unless selected
  • The contact list is wider
  • Names in the contact list are sorted alphabetically – regardless of accents. Accents are ignored.
  • I’m using pinyin.js to help me sort the Japanese names. Hopefully the order they’re in makes some sense.
  • The category selector toggle now exists outside (but adjacent to) the search input. It’s the grey button with the “tag” icon.
  • Choosing a category puts the search query for that category into the search input, and then focuses the search input.
  • Searching within a category is now possible, with searches like: “tag:clients guertin”
  • The “Add X” items from the contact details view have been removed. I’ve got something less noisy in mind now – I’ll focus on that soon.

I got a lot of feedback about sorting during my last iteration. It sounds like sorting contacts is something people want to be able to do.

I’m curious if that’s true, and why sorting is so important. So I’ve updated my feedback form to hopefully give me some insight.

Note: If you used the old mock-up, you might need to flush your cache to view the changes. Press and hold SHIFT while reloading to flush your cache.

Another note: The same disclaimer about code quality and browser compatibility still applies.

Enough already, here’s the link to the updated mock-up.

And here’s a direct link to the feedback form.


A glimpse of a new address book for Thunderbird

I’ve been working on a new address book for Thunderbird.

And I’m making progress.

I’ve reached a point where I feel like the back-end can do something useful, and I want to start worrying about how the front-end works and feels and functions.

Now I’ve got a web-based super-early prototype for you to try.

A screenshot of the mockup in my Firefox browser.

Some caveats:

  1. Bear in mind this thing is super early, and super incomplete.
  2. The primary goal of this version of the prototype is to determine if the general layout makes sense
  3. Adding contacts, and adding new fields to existing contacts does not work
  4. Expect hacky hacky crap code if you look inside the mockup. Here there be monsters.
  5. The menu button in the right-top corner does not work
  6. I’ve only tested / developed in Firefox. Other browsers are not supported, and I don’t plan to sweat about it too much.

Wow, so it sounds like this thing doesn’t do a whole lot. So what does it do?

  1. It loads a list of 500 fake contacts for you to browse through.
  2. It allows you to see the email addresses for each contact that has an email address
  3. Simple searching works
  4. Different contact categories can be viewed
  5. Gives you a sense of how the layout would be. Hide Firefox’s navigation bar for bonus points!

There’s also a big fat FEEDBACK button at the top of the mock. Please give me feedback. Or click here to go to the form directly. Am I heading in the right direction?

Here’s the link to the mock-up. Give it a whirl!

And here’s the Github repository if you want to cry while reading my crappy mockup code.

Expect more of these.

Mouseover / Mouseout on Nested Elements

Did I mention I’m code-sprinting over the next three days?  Actually, next two days – I just finished my first day today.

What’s code-sprinting?  It’s a trendy term for sitting down with your team, and plowing through code en masse, trying to get as much done as possible.  8 hour days, cookies, coffee, whiteboards, pizza, crashes, bugs, tickets, fixes, etc.  We’re trying to cram 3 weeks of work into 3 days.  Cool.

In case you don’t remember, I’m working on a project called Checkmark (or OLM…still undecided on the name) – a tool for Professors/TAs to receive student code submissions, and to facilitate easy marking and annotating of the submitted code.

So here’s something I learned today while coding:

Say you have some nested DIV’s, and the parent DIV has a mouseout trigger.  Something like this:

<div id="parent" onMouseOut="alert('Mouseout triggered on parent');">
  <div id="child_1">This is some child</div>
  <div id="child_2">This is another child</div>

As you would expect, the mouseout event will get triggered if you move your mouse over the parent DIV, and then move the mouse back out again.

But it also gets triggered when you move your mouse OVER any of the child DIV’s.

Say what?  That’s right – even though you’re still inside the parent DIV, the mouseout event got triggered.  I found this out today when I was trying to code dropdown menus in Javascript/CSS using Prototype – I could get the dropdown menus to appear find when I clicked on the appropriate button, but they’d disappear again as soon as I put my mouse over any of the sub-elements of the DIV.

So how did I fix this?  I found this example code, and adapted it for my purposes.  This code assumes that you’re using the Prototype Javascript library.

  function(event) {
     //We could probably replace the following with Event.element(event), but oh well.
     var target = $('some_dropdown');
     var mouse_over_element;  //What the mouse is currently over...
     //So let's check to see what the mouse is now over, and assign it to mouse_over_element...
     if( event.toElement ) {
        mouse_over_element = event.toElement;
     else if(event.relatedTarget) {
       mouse_over_element = event.relatedTarget;
     //In the event that the mouse is over something outside the DOM (like an alert window)...
     if(mouse_over_element == null) {
     //Now we just make sure that what the mouse is currently over is NOT a descendant of
     //the dropdown, and that the target is not the current mouse_over_element (I can't
     //remember which case this covers, but it's important)
     if(!mouse_over_element.descendantOf(target) && target != mouse_over_element) {

And it works.  Whew!  Just thought I’d share that little snippit.