Google IO Speaker Name Animation in CSS

While watching the Google IO 2013 keynote, I was inspired to recreate the speaker name animation in CSS3 with transitions and pseudo-elements.

It was a lot easier than I expected. All I had to do was create a pseudo-element over the speaker name with the same background color as the rest of the page. Then on hover simply move the speaker name element and pseudo-element right and left respectively. Using SASS it becomes simpler to keep the background-colors in sync.

Its a simple effect, but quite slick at the same time.

Check out this Pen!

Neaten up meteor.js template related code using underscore and coffeescript

I really love meteor.js, as a result I have been writing a lot of code using recently. Up until now it has bothered me that when writing template related code to register handlebar helpers and passing in the events hash, I was repeating the code “Template.templateName”. I’ve started using underscores extend function to neaten it up a bit…

Instead of:

Template.project_list.projects = ->
  Projects.find({})

Template.project_list.display = (data, options)->
  options.fn @ unless Session.get("current_project_id")?

Template.project_list.events
  "click .project": (event)->
    projectID = $(event.target).closest(".project").data("project-id")
    Session.set("current_project_id", projectID) if projectID?

  "click .project .btn-destory": (event)->
    projectID = Session.get("current_project_id")
    Projects.remove(projectID)

 

You could use the extend function to write this a lot more neatly:

  _.extend Template.project_list,
    projects: ->
      Projects.find({})

    display: (data, options)->
      options.fn @ unless Session.get("current_project_id")?

    events:
      "click .project": (event)->
        projectID = $(event.target).closest(".project").data("project-id")
        Session.set("current_project_id", projectID) if projectID?

      "click .project .btn-destory": (event)->
        projectID = Session.get("current_project_id")
        Projects.remove(projectID)

 

You could go a step further and extend the Template object itself, grouping all template related code together.

Its a small change, but has big impact on the overall readability. Especially when you start adding more and more templates.

Let me know if you have any other tips for DRYing up your meteor code.

Autodesk Maya Generative Art using MEL & Python

Been playing with Autodesk Maya recently, specifically its Mel script and Python libraries in conjunction with the particle system. Came up with some interesting renders and even an actual video. It wasnt exactly simple, quite time consuming and processor heavy, but I definitely intend to play around some more.
 

 

 
smoothedparticalspiral floating_brackets floating_cubes_motion paricle render redcubes

3 Meteor.js Presentations in 3 Weeks, Becoming Johannesburg Captain and RubyFuza Awesomeness

So its been quite a crazy month or so. After discovering the awesomeness that is Meteor.js I immediately felt the urge to spread the word about this amazing web framework. This lead to me to submitting a proposal to present the topic at the very cool ThoughtWorks SA offices as part of the CodedInBraam meetup. To my surprise my topic was chosen and with much anxiety I prepared my first 30min talk and 20min live demo, in which I would build an app for users to vote and comment on what they thought of Meteor.

As preparation I presented the talk at Internet Solutions to colleges. It was very well received and many of the developers left both impressed and excited. This really boosted my confidence and verified that the audience would be willing to engage and participate by using the app afterwards to leave votes. 8/9 developers voted that they thought Meteor was awesome, many left supportive comments and one developer even tried a failed cross-side scripting attack. Everyone left at eager to learn a bit more, mission accomplished.

On the back of the positive responses and general excitement I inquired about becoming the Meteor captain for Johannesburg. The awesome Meteor team, in response to my enthusiasm and desire to spread the word assigned me as captain and organizer of the official Meteor-Johannesburg meetup. 2 weeks later I had already managed to get 20 members to sign up, very cool.

The presentation at ThoughtWorks’ CodedInBraam couldn’t have gone better, about 40 people attended, 12/13 voted Meteor was awesome and everyone was pretty excited and afterward I managed to meet a lot of developers who wanted to chat about the topic further as well as to commend me on my presentation and live coding skills. I left very flattered and confident in my new found interest in public speaking, at least for topics that I’m very interested in.

Fast forward one week later, the day before RubyFuza, waiting for my manager at the airport, I impulsively decided to sign up to do a 5 minute lightning talk about a JavaScript web framework at a Rails conference in front of 120 Ruby developers. Quite a cocky decision in retrospect. The conference was amazing, listened to interesting presentations and met really passionate and smart developers from all over the world, some of which worked at amazing companies such as GitHub and Heroku.  My presentation went amazingly well and was better received than I would have thought from the Ruby on Rails community. They’re awesome.

I’ve been lucky to meet many awesome developers this last month and have sparked a deep-seated desire to do presentations and teach people about Meteor and other topics that interest me. I intend to do a lot more over the next year, I’ll keep you posted.

Presentation Apps:

Presentation slides

Presentation Source

 

 

Some HTML5 Canvas Experiments

I’ve played around with the awesome canvas element made available in HTML 5 for a year or so.
The result was 2/3 small experiments which allowed me to get a feel for how to work with the canvas element. I it has huge potential not only for online games, but also data visualization and even complex UI elements.
I recommend any developer interested in graphics based development check it out. Play with my own or other developers experiments, view the source. You’ll be surprised how easy it is, especially if you use Backbone.js and Coffeescript :D

Munin Monitor Chrome Extension – using Coffeescript and BackboneJS

Just finished a simple chrome extension that polls a specified Munin overview page for warnings or errors. I created it for the sys admins at my work (Internet Solutions), so they can be made aware of any device issues sooner.
I also used it as an opportunity to flex my Coffescript and BackboneJS muscles.

The extension can be installed from the chrome webstore. The source code has also been made available on github.

I may write up a tutorial if anyone asks for one, otherwise the source should be quite self explanatory.

Marketing Applications for Alcatel

About a year ago Brandfluent, a marketing company, approached me to develop a set of applications for Alcatel.
The first was a touch screen application to be displayed at a marketing event. The application was displayed on a 42 inch touch screen and was meant to showcase some of the Alcatel phones features and apps.

The application was written in ActionScript through Flash Builder.

Touch Screen App

The second application, Alcatel 803 One Touch was a facebook competition app in which entrant who invited the most users to join in on the competition won a R30 000 beach holiday. The competition was relatively successful with 120 entrants and 38633 invites sent out. The competition was also featured on 5fm.

The application was written mostly in PHP with a fair amount of javascript on the client side.

Alcatel One Touch 803

The last and by far the most challenging was the In Touch with a Million Lives facebook application. The requirements were for the application to allow users to upload photos, along with some description data such as date, name and location, which would then be added to a mosaic in the shape of South Africa. When users hover over a photos on the mosaic a larger version of the photo is shown, with the photos details. The application also has the ability to allow professionally commissioned photographers to upload large numbers of photos via FTP. Later on an added requirement was to create a mobile web application to allow users to upload photos from their phones.

The application also needed to keep track of how many photos were taken, and if possible how many people where in the photos. In order to achieve this I had to add facial detection (not to be confused with facial recognition) to the upload process.

The application was, unfortunately, not very successful, with only 1600 photos being uploaded at the time of writing this post. There are many possible reasons for this, however I believe the most likely was a lack of incentive for users to take part. Nevertheless the application is one of my proudest achievements from a software development stand point.

The frontend was written in ActionScript, while the backend was written in Python.

In Touch with a Million Facebook App


In Touch with a Million Lives Mobile App


Example of face detection on a photo of friends and I

At times working on these applications was extremely frustrating both from a development and project management point of view. From Facebook API issues to constantly changing requirements, there were various challenges. However, during the course of the projects, I learnt a great deal, not only technically but also business and project managment skills. I also had the opportunity to work with very talented professionals including Murdo Mackenzie and Iveta Krajcirova in London, as well as Ange Surridge here in South Africa. Thank you to them and Brandfluent for giving me the opportunity to work with/for them.