Create complex form field showing and hiding rules with jQuery Interdependencies library

jQuery Interdependencies is a library to create rules for showing and hiding form fields dynamically on your HTML form. It’s use case are the situations where the form filling can take different decision tree paths and the field choices and values affect other fields. The most common scenario is that you have  a “please specify” style text field which becomes available if the user marks a certain checkbox choice.

Test the simple demo above online. This is what the rule code for the above form looks like (see the orignal blog post for syntax highlighting):

// Start creating a new ruleset
var ruleset = $.deps.createRuleset();

// Show diet text input option only when special diet option is selected
var dietRule = ruleset.createRule("#diet", "==", "special");

// Make these fields visible when user checks hotel accomodation
var hotelRule = ruleset.createRule("#accomodation", "==", true);

// Make the ruleset effective on the whole page

However, jQuery Interdependecies can do much more. Using the jQuery Interdependecies library simplifies the process of creating form logic rules over vanilla Javascript / jQuery a lot.

  • Your code does become a spaghetti of ifs, elses and Javascript callback functions
  • It is not limited to an input type, but works with all HTML controls: text, checkbox, radio button, select dropdown, etc.
  • It correctly handles nested decision trees, where your form 1st level choice reveals 2nd level choices which in turn reveal 3rd level choices and so on
  • It works well with dynamically generated forms and situations where there are multiple forms on a single page
  • It has API documentation based on JSDuck. Everyone loves good documentation.
  • It is independent from any HTML markup or form framework: you can use it in any project

So, let’s a have little more complex example what we can do:

The example above is from real life system, but you can try the simplified demo version online.

Enjoy – jQuery Interdependencies Github.

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

New Plone addon: Image Portlet


imageportlet add-on provides a portlet for Plone CMS for easily add images, banners and carousels around the content on your site.

This is very useful with ContentWentPortlets to bannerize your size.


  • Inline image upload from a local computer directly into the portlet. No separate image bank folder management needed.
  • Image can act as a link or simply serve as a decorative banner
  • Plain text slots for heading, footer, over-the-image text (button) and <img> alt text
  • Carousel images via jQuery Cycle Lite
  • Cache friendly: unique URLs after each edit allows the images cached forever in the front-end cache


The benefit over static text portlet + TinyMCE uploaded images is vastly easier user experience. You don’t need to separate portlets or place to upload the image: images are managed within the portlet.

The management is much streamlined for non-power users.


The add-on is compatible down to Plone 3.3.5.

Update buildout.

Plone 4.2 and newer: add imageportlet to eggs in buildout.cfg:

eggs =

Old releases: With Dexterity 1.1 pindowns:

# Change the number here to change the version of Plone being used
extends =

eggs =

Run buildout.

Install the imageportlet add-on in Site Setup.

Go to any portlet manager and choose Add new portlert… Image Portlet.

Source code and issue tracker

Similar add-ons

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Online presentation on Wednesday: Chris McDonough – Pyramid Web Framework

For Helsinki Python meetup tomorrow (Wed 14.11.2012) we have a guest star presenter: Chris McDonough. Chris is a long time Python developer and currently one of the lead developers of Pyramid web framework.

The presentation is streamed online and it is viewable by anyone. By streaming the live presentation we hope that people who otherwise cannot attend the meetup events could participate online: people from distant Finland locations like Oulu (…and Stockholm), or people who need to stay home on the meetup date. We wish that the audience is not limited to our Nordic Python community, but people from all over the would come to enjoy the presentation as the internet gives us an opportunity for it.

1. About Pyramid web framework

Pyramid is a small, fast, down-to-earth, open source Python web application development framework. It makes real-world web application development and deployment more fun, more predictable, and more productive.

Pyramid’s advantages over alternatives include flexibility (not tied to a particular database model, no globals, no singletons, …), robustness (100% statement unit test coverage, Python 3 compatibility, …), high quality documentation and mature, professional, developer community.

More information

2. How to watch the presentation

Tomorrow 14.11.2012 18:00 – 18:30 Helsinki time (16:00 – 16:30 GMT+0) we will announce the stream URL in this email thread and in @pythonfinland Twitter. It’s an anonymous Youtube URL and any Flash capable browser should be able to view it. The streaming is done using Google+ Hangout and YouTube.

There will be a video recording published later on.

3. How to participate the online discussion

To ask questions or comment the presentation, you can send your message to channel on IRCNet network (send questions to the channel, mostly nordic people hre)

@pythonfinland on Twitter (public message, mention @pythonfinland)

We will pick the question and ask them from Chris in via Hangout.

4. Other notes

This is our first time using Google Hangout for such online presentation session. We hope to get big audience and we are excited to see how everything goes!

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Remote presentation screencasts with YouTube recordings for meetups in Google Hangout

After seeing it in happening in a HelsinkiJS, I figured out that having a remote presenter in your local meetup kicks ass. Thanks Oleg for getting our meta meetup together for sharing the best practices!

Why a remote presenter via screencast?

  • Remote presenters offer some more color over seeing the same old faces in your meetup all the time
  • More information trade across organizational borders… or countries.
  • The benefits of the online presentation are not limited for the local participants – anyone can join to see the online presentation online – like all those home daddies who often miss the chance to be there in person.

1. Meet Google Hangout

Google offers Hangout video sharing feature in their Google+ social service. The benefits of doing a screencast presentation in Google Hangout include

  • Anyone can watch the live stream
    • The number of participants is not limited or pre-selectd like e.g. in Skype.
    • You get anonymous Youtube short URL where anyone can follow live broadcast
  • You get automatically YouTube video recording out of your broadcast. This is a big plus as post-processing recordings from the conferences have always been great pain.
  • Google Hangout works on any OS, maybe even on some mobile devices?
  • Google is generously offering the bandwidth from their streaming CDN network. You don’t need to provide the bandwidth for those 100 viewers of 2 mbit stream 🙂

2. Do the math

  • In local meetup you reach the 30 people in the room
  • With live Google Hangout you can reach 100 or so people if you advertise the event beforehand in your community medias
  • With YouTube recording you can reach all those 5000+ people who were not there in time or space when it happened

… this is not good only for the local community, but also good in general to have high quality recordings of your presentation to share later on for anyone.

3. The disadvantages of Google Hangout

  • You need a Google+ account for sharing your webcam or screen (your soul, real name, I know…)
  • The hangout organizer must be able to bind his/her Google+ account to YouTube account with real name policy permanently
  • … Google is little shortsighted here: you may need to create fake non-person G+ credentials for meetup organizations (now I hear Eric Schmidt crying)


4. Using Hangout with Google Apps user account

If your organization is using Google Apps for email you may be able to enable both YouTube and G+ in your domain settings. After this, there still exist real name policy problems and you cannot use a name like “Secretary of Python Finland” in G+. So better come up with a foreign fake name… Also settings the name in G+ will silently enforce this name on Gmail and other Google services, so be careful.

Another warning: YouTube cannot be enabled for Google Apps accounts in all countries, so check this beforehand before trying to create an organizational G+ account. Finland was such a country. Rogue Gmail account, here I come…

5. Preparing for live Google Hangout broadcasting

Start preparing a day before the event! As you can see the account policy and such may lie down obstacles on your way to become a screencast ninja. As sad it is, you need to practice the technical aspects of Hangout thing to make sure it works when the great day comes.

The encoding of live video will max out at least one of your CPU cores. Make sure you have powerful enough hardware under your fingers when you share your screen.

First your Google identities and cookies will become messed up in your web browser if you try to use G+ and/or Youtube with several Google accounts at once. In theory Google has some clever cookie tossing to tackle this problem, but in practice it just doesn’t work. Use Multifox Firefox extension and open a new identity window where the only logged in Google user is your Hangout user.

Make sure all your presenters have their G+ account created beforehand and you have added them on your friend list. Make sure that the presenters have test drived the screensharing on their personal laptops – it would be shameful if streaming would fail because of something like a Linux driver bug. You will need to install a browser plug-in for the video encoding: I know at least Google Chrome and Firefox work, but I don’t suspect other major desktop browsers should have any problems (Lynx, Iceweasel and others, sorry again…)

To test things out, ask people to come to a test Hangout session where you really see their screensharing is working with you and you learn how to use Cameraman feature (more below).

6. Creating your Hangout

Just login to Google, click G+ and then Hangout > Create hangout.

A new pop-up window ensures. You need to also accept some additional site policy and Google warns you that you must have permission to broadcast and record the material. Make sure you obtain necessary permission from the presenters beforehand.

7. Starting the screencast

Hangout offers options to stream your webcam, screencast any of your monitors or screencast a particular window. There doesn’t seem to be option for a floating head on the top of presentation yet.


8. On Air

(oblig. related Reckless Love music video)

The broadcasting can be public or private (only for invited hangout participants). The latter doesn’t scale well when you try to make it as pain free as possible for others to see the presentation online.

When you go public “on air” you’ll receive the YouTube short URL which has live broadcasting as Flash video widget (no HTML5 or WebRTC yet, sorry!). No YouTube login is needed in order to see the video in this URL: you can share it in IRC, Twitter and other social networks for your audience.

As the summoner of the Hangout, you have a Cameraman feature which controls who of the participants “is live” in the main live stream. You can switch the stream between any of the presenters and your local webcam, just for the audience to say hi for the presenters.

You have a group chat feature  in Hangout. But often the chat is best to handle offband, like in IRC, where your target audience naturally come together online and you have better moderation tools in your possession.

Please note that public broadcasting may attract unwanted attention. My fellow friends in Bitcoin Hackathlon got flooded over by kids when they were experimenting with Hangout. You can directly share your Hangout URL from the web browser’s address bar, but it means that anyone using that URL can join in Hangout for chat and video streaming.

9. Ending the Hangout and video postprocessing

After you press “terminate the call” icon in the top right corner, you’ll get a message telling that the recording of the live stream will be uploaded to YouTube.

You can edit the recording later on in YouTube.

10. Bonus photo

I found a lovely Google Effects panel in Hangout. You can play sounds (drums, applause) or glue artifacts on the top of live video stream. It’s Movember and I seem to be victorious.


\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+