Common mistakes to avoid when creating an Om component. Part 1.

For the past few months I’ve been creating various Om components and most of the time it goes smoothly. But sometimes I do something silly, and it’s not always obvious what it is. What’s obvious is that the UI doesn’t work and throws (sometimes cryptic) errors at me instead. Today I’m gathering what I remember into a tiny post. Maybe someone will find it helpful. And maybe I’ll finally remember those mistakes after putting them down on paper interwebs. One can hope!  :-)

  1. Form inside of another form.
    Error: Invariant Violation: findComponentRoot(..., .2): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables or nesting <p> or <a> tags. Try inspecting the child nodes of the element with React ID ``. 
    Easy crime to commit if you’re moving some html tags around and leave one behind.

    GitHub issue here.
  2. Reading application state during user input, e.g. onClick, onChange. etc.
    Uncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed.
    You need to deref to read the value:
    (:some-value @cursor)
  3. Same error as above but coming from your om/transact!
    Common mistake in the function that you pass to om/transact! is to do something like this:
    (om/transact! data :messages (fn [cursor] (conj (:messages data) some-value))
    Cursor is actually your (:messages data) so you just do:
    (fn [cursor] (conj cursor some-value))
  4. React.js < v. 0.11.0 Render method not returning a valid component
    Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned null, undefined, an array, or some other invalid object.
    You *must* return a single div. It might contain nested stuff, other divs, components, etc. but everything must be wrapped in a single div. And if you want to return nothing because you have no data to display, you still need to return an empty div from your render method.
    Starting from React 0.11.0 you are free to return null. Thanks @locks for pointing this out!

And an obvious tip: don’t use a minified build of React library for development if you want to see meaningful error descriptions.
I’ll add more pitfalls as I remember them.

Code snippets for Keynote

I’ve been looking for an easy way to format code snippets for my Keynote presentation and everything seemed quite awkward to use (especially taking screenshots!). I could just add a link to the example and make it open a local webpage, but I’d rather not do that for very short snippets. After some quick research I’ve settled with highlight.

You can install it with homebrew:

brew install highlight

I put my snippets into a file (snippets.clj in the example below), and then run this to copy the formatted snippet to clipboard:

pbpaste | highlight --syntax=clojure -O rtf snippets.clj | pbcopy

-O rtf specifies format of the output file (which is rtf for Keynote). Highlight supports lots of languages and customising possibilities are endless. The end effect looks like this:

Sample slide with code snippet
Sample slide with code snippet formatted using highlight

The end of summer. The end of internship. The end of awesome.

This has been a whirlwind of a summer, and I can’t believe it’s come to an end.  Working at Mastodon C has been exactly what I wanted it to be: an awesome experience. I can honestly say I enjoyed every single day. Whether I was working my way out of JavaScript’s scoping labyrinths or learning the power of Cascalog, there was a sense of pride for me knowing that I had directly participated as a part of the team. With a very very rare coffee requests ;-)


With the recent rise of big data and open data I feel very lucky to have been in the middle of it. During my first week of the internship I was introduced to the CDEC Open Health Data Platform idea, given a bunch of files, some examples of maps and Cascalog queries, and off I went.

It took me a couple of hours to work through Paul Lam’s “Cascalog for the Impatient” - enough to start writing my own queries. Cascalog, and Clojure for that matter, are amazing. You get to do stuff fast, clean and in a functional way. I used it to scrub the data and calculate diabetes prevalence stats.  If a recent graduate whose only experience is in Java, is able to do that in a few days, then everyone who is dismissing the power of Clojure should go and ponder over their technology choices ;-) Feel free to have a look at the GitHub repo, all code is open source.

I have been a frequent user of online maps, but I have not created any maps myself. This was about to change. I was going to take the data processed with Cascalog  and visualise it on interactive maps and charts. Brilliant JavaScript libraries made this process much easier: leaflet and dimple. And although my JavaScript was rusty, it all soon started to come together. The (still ongoing) results can be seen on the alpha site. The feedback it received on the day of the launch was the best reward I could imagine.

Since then I have crated more maps, more charts and more queries. And during that time I have always been myself: I came to code, Mastodon C allowed me to do just that. It has been like working in this unreal world where I wake up in the morning wanting to go to work, and where every day helps me to live my life in a more rewarding way. Being able to use my skills to help someone and see their positive reaction – priceless.

Thank you to all Mastodonians for guiding the way for me throughout the entire summer.

Fran (@fhr), for being a friendly, approachable boss, for introducing me to Women in Data, for inspiring me to overcome my fears of public speaking and balancing out the sci-fi references.

Bruce (@otfrom), for always having a positive attitude and constantly helping to point me in the right direction, for introducing me to the world of Clojure and for the long list of all sci-fi films/books I’m yet to watch/read.

Neale (@sw1nn), for the Iron Maiden talks, for always willing to help out, for inspiring me through your passion for technology and keeping lunch breaks interesting thanks to your amazing skill of remembering facts.

Steve (@sf105) and Merici (@merici), it’s been a pleasure to work with you both, even if only briefly. Thank you for advice on professional career and for the froyo!

It has been a wonderful experience to be part of a company that does meaningful things. If I were asked again what I wanted to be when I grow up, my answer would be: a Giant Robot Mastodonian: professional, expert and geeky. You guys rock!