Category Archives: Technology

Rendering Multiple Partials with Ruby on Rails

So, as we speak, I’m going through a bit of the code that I’ve submitted for the OLM project, and I’ve begun refactoring.

While doing this, I ran into an interesting problem:  I want to use Rails’ remote_function to update two sections of the page with an AJAX call.  For a while, this stumped me, because you can really only have one render call within a controller method, like this:

render :partial => "footer"

But I was determined to render two.  So here’s what I ended up doing:

On the client side, I’ve got this in my view…

<%= remote_function (:url =>{ :action => "codeviewer", :id => @assignment.id, :uid => @uid },
                   :with => "'fid='+fid", :after => "$('working').hide();")%>

And in the Controller, in the “codeviewer” method, I do this: 

render :update do |page|
    page.replace_html 'codeviewer', :partial => 'codeviewer', :locals =>
        { :uid => params[:uid], :filetext => filetext, :annots => annots}
      #Also update the annotation_summary_list
    page.replace_html 'annotation_summary_list', :partial => 'annotation_summary', :locals => {:annots => annots, :fid => @fid}
end

This will render my two partials in the DOM elements with ID’s ‘codeviewer’ and ‘annotation_summary_list’, respectively.

Nice.

MyTTC and StopFinder

So maybe everybody else in Toronto knew about these mashups, but I sure didn’t.

Until this afternoon.

So here’s some free publicity for them…

MyTTC

New to Toronto?  Intimidated or confused by the Toronto Transit System?

If you’ve tried the actual TTC website, you may find it confusing, and lacking in beginner information.  You just want to know how to get from point a to point b.

Enter MyTTC.  Just give it your starting and finishing location, and the hour you plan to leave, and it will plot you a trip through the TTC, lickity split. Google Maps style, with instructions on where to board, and where to get off.

I could have certainly used this during my first year here.

StopFinder

Tired of paying too much for parking?  Think you’re getting ripped off by sketchy lots?  Wouldn’t it be nice to get a good look at the entire “parking” picture of Toronto?

Check out StopFinder.  Just give it your destination, when you intend to arrive, and for how long, and it will show you the nearest lot, the cheapest lot, and all of the other options in the area.  Also via Google Maps.

Cool and useful mashup.  I like.

Making my First Firefox Extension…in 90 Minutes

It’s a race.

I’m going to attempt to create a simple Firefox extension that will display the DOM ID of an element that my mouse cursor is hovering over in the status bar.

There are probably a ton of Firefox extensions that will do that already, but I want to give it a shot as a project.

It’s 3:30PM right now, and I want to try to get this done by 5:00PM.  I’m going to be using Ubuntu 8.04, gEdit, and Google to get me started.

And I’m going to record my progress here in this blog post.

Note: After I’m done, I’m going to edit my sporadic notes so that they make more sense.  So if you’re wondering just how I managed to stay so cool, calm, and collected in my prose under such time pressure, and why the publish date on this article is after 5PM, now you know.

3:35PM:

Gonna start with Google:  “building a firefox extension”

Ok, found an article about how to create a Firefox extension.

Apparently, the first thing I want to do is try setting up a development profile in Firefox.

3:41PM

Finished setting up my dev profile by opening up FF with this command:

firefox -no-remote -P

Then created a profile called “Development”.  After that, I typed “about:config” in the URL bar, and changed some settings as instructed on this site.

3:49PM

According to that last article, I can create a skeleton Extension project using this site.  Done – calling the project DOM ID Displayer

3:53PM

Installed this Extension – apparently, it’ll be some help.  Will let me reload Firefox’s chrome  shtuff without restarting the browser each time.  Useful.

3:55PM

Found this article on making a status bar extension in XUL.  Easy as pie.

4:05PM

Ok, I’ve coded something in XUL that should display a new panel in the status bar.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://domiddisplayer/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://domiddisplayer/locale/domiddisplayer.dtd">

<overlay id="domiddisplayer-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>

<!-- Firefox -->
<statusbar id="status-bar">
  <statusbarpanel id="domiddisplayer" label="Hello, World!" tooltiptext="Dom ID Displayer" />
</statusbar>
</overlay>

I put that in the “overlay.js” file in my ~/Experiments/Extensions/domidinspector/content folder that was created using that Wizard from 3:49.

Now, to get this thing to run in my Development profile, I create a symbolic link to it in the Development profile’s extensions directory

ln -s ~/Projects/Experiments/Extensions/domidinspector ~/.mozilla/firefox/nzuzbdpz.Development/extensions/domiddisplayer@mike.conley

Open Firefox with Development profile:

firefox -P Development &

4:16PM

Looks like I can access and relabel the XULElement that I’ve ID’d as “domiddisplayer” using this:

domiddisplayer.updateDisplay = function(event) {
var dom_element_id = event.relatedTarget.id;
document.getElementById('domiddisplayer').setAttribute('label', dom_element_id);
}

Cool – I can now change my text in the Firefox status window.  Now I just need to capture any time a mouse moves over a DOM element….yikes, that might be tricky.

4:33PM

Been tinkering with this as a way of putting a mouseover event listener on everything in the window:

window.addEventListener("mouseover", function(e) {
  domiddisplayer.updateDisplay(e);
}, false);

4:35PM

Seems to only be capturing mouseover/mouseout events on Chrome elements – so I can get the ID’s of the statusbar, etc.  These are XUL Elements, not the DOM elements of a web page…

So I’m close.

4:44PM

This page is super helpful…

Apparently, I need to wait for the content of the page to load before I can attach observers to all of its sub-elements.  Makes total sense.

So, in my domiddisplayer.onLoad function, I write this:

var appcontent = document.getElementById("appcontent");
if(appcontent)
  appcontent.addEventListener("DOMContentLoaded", domiddisplayer.onPageLoad, true);

And now, I create a function called onPageLoad, which looks like this:

domiddisplayer.onPageLoad = function(aEvent) {
//Runs when the page is loaded
  window.content.document.addEventListener("mouseover",
  function(e) {
    domiddisplayer.updateDisplay(e);
  }, false);
}

5:03PM

Done.  I’m over time, but I’ve finished a (relatively) working extension.

Here, it’s a mess, but you can download the whole thing right here if you want to tinker with what I did.

Download domiddisplayer.zip

DemoCamp – March 3rd, 2009

Note: This was published in a rush, and needs some tidying. Expect some cosmetic/spellign fixes over time

So, I’m sitting at DemoCamp ’09 in the Imperial Pub on Dundas. Right now. And I’m just going to shotgun my impressions, and what’s going on here.

Now on to the presentations:

BackType

There are two guys on stage right now who are presenting something called “BackType”. Essentially, it looks like a web application that allows you to search and sort comments on social media sites such as Digg, Reddit, WordPress, etc. Hmmm….apparently, they’re also planning on releasing a plug-in for WordPress that will allow your comments to be submitted automatically. Nice. Kind of lackluster presentation, but an interesting idea.

Woop – they just got quizzed on the business model, and the crowd laughs. “Making money isn’t a huge priority for us”, is the response. Alright.  Though apparently, they’re making money through their API somehow…not sure how.

Dex

A business application.  Big shift recently:  individuals and companies are now on the same playing field – potential employees are now shopping around for work, instead of just employers shopping around for employees.  So how do you market yourself?

Social media?  Some companies are going for it.

Tim O’Reilly called this “the next big thing on the internet”.

It’s a CRM (Customer Relationship Management) tool.  Tool scours the web looking for information on who you’re interested in, through social media, etc.  Rates them on their “strength” as a customer, “opportunity”, etc.  Tracks sales, opportunities, more…

Maybe I’m missing something, but as a consumer, this sounds kind of creepy.  I see a couple of business folk licking their chops.  *shudder*.

Actually, it sounds like this is for smaller businesses, with large numbers of regular customers.  That’s not so bad.

It’s a tool for the individual – your profile exists even if you leave your current company.  This means that if you’re looking for a job, you can show your “baseball” card, which lets you show off your Dex sales stats, etc.

Foodea.com

A food related website.  Lists recipes, lets users rate them, comment, etc.  As a user, you can add this recipe to your “Favourites”.  Recipes can have back-stories, you can add photos and videos (great for folks like me who need to see cooking happen to pull it off).

Lets you add ingredients from recipes to your “shopping list”, which is cool.  In the shopping list, you can view more information on that particular ingredient (alternatives, comments, good prices, etc).

“Anybody can edit it, anybody can add to it”…

People can add their own food related articles, like on “Cupcake Camp”.  Cool.  Users can respond to these articles.

“My Kitchen” is your central page/hub on Foodea.  Tells you about YOU, and what you’ve done.  Shows you your Favourites, your Cookbook.

Besides food, there are also areas for drinks!

There is a “Market Area”, for food related businesses (caterers, food products, etc).  These businesses can purchase profiles, which can be viewed and interacted with by the sites users.

Imagespark

It’s an image searching and tagging web application.

“Found”, “Visualize”, “Dropular” are mentioned as similar applications.

Woop, and just as it started, it stopped:  no Internet access on the presentation Mac, all of a sudden.

Oh Mac.

“Try shaking the cable” yells someone.  Another yells “I blame the shitty DemoCamp set up” (he’s from Microsoft It turns out that he’s one of the guys who’s running the show).

Ok, back up and running.

Interesting in that it displays images in a mosaic.  The presenter mentions “inspiration” a lot…does he really mean “image theft”?  Just curious.

Anyhow, images can be uploaded, tagged, viewed by users.  You can see what images are currently popular.  Images get three “strikes” before they’re removed from public viewing (thus eliminating the element of “surprise porn”).

Users can view one anothers libraries.  It’s a nice web design.  Smooth, clean.  Very pretty.

I like this feature: the “mood board”, which lets you group/arrange images together into a mosaic.  Reminds me of some notebooks I’ve seen from our designers in the Drama department.

I think I could use this.

There are some desktop applications provided to help you capture and upload images to ImageSpark.  Pretty cool.

Woop – some problems uploading.  I feel bad for this guy.  It’s a cool app, but his stuff is breaking.  Gremlins, probably.  He just said that they built it in 3 months – wow… pretty good.

Sub-note – concerning Bacon

There seems to be a lot of talk about “bacon” here.  I’ve heard two bacon related questions here.  Inside joke?  Geek humour?  Bacon’s great, but I have no idea what’s going on.

Pizza

“Pizza” isn’t a presentation.  They’re serving it.  So I’m going to eat some.

Woop – spoke too soon, the buzzards are descending, and I’ll probably have to wait to get a chance at a slice.

After Pizza

Wow, I guess pepperoni and cheese just doesn’t cut it with this crowd.  Some pretty exotic pizzas here:  layer of veggies, layer of feta cheese, mushrooms, and a massive slice of ham on top.  Not bad.

Anyhow, back to the demos…

Kontagent

“Contagion analytics” – viral analytics for Facebook applications.

A platform to let developers track and optimize their social applications.

Think of it like Google Analytics, but geared towards Facebook apps.  In particular, Facebook games.

Whoa, apparently, a recent Waterloo dropout created a game on Facebook, released about 6 months ago, and is making 7 figures.  Holy smokes.  Apparently, this is pretty common, too.

Two things that Google Analytics doesn’t show you that Kontagen does:  How to filter by age, location, gender, number of friends, etc.

Privacy-wise, my hair is standing up, just a little bit.  Probably just a reflex.

Shows you “virality” – a statistic on how Facebook applications spread…  for example, on the demo that’s being shown, women are shown to see more viral on this particular application.

How many Facebook invite notifications are sent, acceptances, rejections, ignored, etc…

They’re apparently working with Google on integrating with OpenSocial, they’re funded by Facebook…they were 1 in 5 companies who won Facebook Funds money.

That’s all for the Demos…now for Ignite Presentations

Ignite presentation concept:  Standard slideshow presentation, but adds constraint:  20 slides, and the slides have to auto-advance every 15 seconds.

Leigh Honeywell

Hacker spaces…places in Toronto to do geek stuff, like hallways at a conference.

Hackerspaces.org:  How to create these spaces.

Lots of interesting hacker spaces all around the world.

There’s one in Toronto:  Hacklab.To

Nice presentation, pretty big applause.

Amos Latteier – N8R TxT

A location-specific nature haiku by SMS.  Cool – you send a text to 416-662-3408 telling it your location, and it sends you back a haiku about where you are.

Hilarious!  Already, I love this.  I’ve added it to my phone contacts.

It’s pretty interesting how this thing works – Python, and a pastiche of web-services (Google Maps, other geo-location stuff….).

There’s also an iPhone client that detects your location automatically.  Awesome.

Interfaces

Interfaces are changing over time.  They’re going towards “ubiquitous, wearable” computers (hey, my CSC301 group sort of wrote a paper on this!).

Remember the command line?  The behaviour that this enforces is one of recall – you need a wealth of commands in your head to make this thing work.  Plus, the response is disconnected from the input that you gave it.

Remember Douglas Englebart?  Mouse, keyboard, GUI, etc.  This was the next step after the command line (though command line can still rock, right Wolever?).  GUI gives back an indirect response; the mouse cursor moves, but now you’re proxied by your mouse.

Enter the NUI (Natural User Interface) – an interface with objects with a particular affordance.  Think Microsoft Surface.

This is a trend toward Gestural computing.

General tip:  little animations or “polish” on your interface qualifies as part of the interface affordance.  Don’t just write them off as showing off, they make the interface pop, and can help your users “get it”.

Varun Mathur – Web 2.0 Startup Lessons

  • Focus on a niche.
  • Verun helped create an RSS Reader called Alertle, which they were very proud of
  • They got feature-itus.  Over-engineered, piled on features, etc.
  • They didn’t have an office!  Met at the Bahan centre, and worked out of their basements
    • Cool, but slowed down decision making
  • Out-sourcing works.  It doesn’t matter where your developers are, it matters who they are.  They have to be the right people for you.
  • They didn’t have a business plan – just had a start, but had no planned exit
  • Startups are like babies – need undivided attention…
  • Startups are a great experience, and open up a lot of opportunities.
  • “Jump off the cliff and start building the plane on your way down..you will be surprised with what you can do”
  • Lots of good audience response, and “kudos for the balls to get out there”

Communitie

Connecting layed-off skilled technicians with non-profit agencies, community services, etc.

This helps non-profit agencies get work done, lets technicians add community service to their resume (awesome), and network.

Project based work:  limited time, fast deployment, ability to bow out.

This guy is a good presenter – told a good story.  Got my attention.  It also sounds like he’s working with Andrew Louis.

And that’s the ball game!

http://www.democamp.com

http://crowd.democamp.net

And now…awkward networking with strangers.

Parts of Firefox…coded in JavaScript? News to me…

So, maybe I’m about to state the obvious here, but believe it or not, parts of Mozilla Firefox are coded in JavaScript.

JavaScript?  Powering Firefox?  Holy smokes, I had absolutely no idea.

Let me back up for a minute.

There’s a very small possibility that I’m going to be working with Mozilla for Google Summer of Code this year, so I downloaded the Firefox code base to take a look at what their code looks like.

And it looks good.  Really good.  Clearly, the guys at Mozilla are pros.

So I was digging around in the source code, and in the folder mozilla/browser/base/content/browser.js, there is a JavaScript file that essentially details how Firefox behaves.

Look – here’s the function that handles when a new tab is opened in Firefox:

function BrowserOpenTab()
{
  if (!gBrowser) {
    // If there are no open browser windows, open a new one
    window.openDialog("chrome://browser/content/", "_blank",
                      "chrome,all,dialog=no", "about:blank");
    return;
  }
  gBrowser.loadOneTab("about:blank", null, null, null, false, false);
  if (gURLBar)
    gURLBar.focus();
}

JavaScript.  My mind is starting to get blown here, and I’m getting excited by the possibilities – seeing as how I’ve grown quite comfortable with JavaScript over the years.

And it’s all thanks to the Mozilla framework, apparently.  I’m only scratching the surface here, but I’m really interested in this, and I’ll post more as I learn it.