A chosen.js select filled via Ember.js

We have a lot of chosen in our ember app, and extracted this superclass to make interaction with them easier, it takes care of refreshing/filling/selecting stuff.

// fix chosen picks up ember script tags -> weird output when search for t or i
// this breaks the bindings within the options tags
// works around https://github.com/harvesthq/chosen/issues/581
App.UnboundSelectOption = Ember.SelectOption.extend({
  template: Ember.Handlebars.compile('{{unbound label}}')
});

App.ChosenSelect = Ember.Select.extend({
  chosenOptions: {},

  template: Ember.Handlebars.compile(
    '{{#if prompt}}{{unbound prompt}}{{/if}}' +
    '{{#each content}}{{view App.UnboundSelectOption contentBinding="this"}}{{/each}}'
  ),

  didInsertElement: function(){
    this._super();
    this.$().chosen(this.chosenOptions());
  },

  _closeChosen: function(){
    // trigger escape to close chosen
    this.$().next('.chzn-container-active').find('input').trigger({type:'keyup', which:27});
  },

  rerender: function(){
    if(this.get('state') == 'inDOM'){
     // remove now disconnected html
      this.$().next('.chzn-container').remove();
    }
    this._super();
  },

  rerenderChosen: function() {
    this.$().trigger('liszt:updated');
  }
});

A placeholder text for chosen.js selects

As soon as you click a chosen select the search input is selected and you cannot add a placeholder anymore, or can you ? 🙂

var $input = $('.chzn-search input');
$placeholder = $('
Type something...
');
$input.after($placeholder);
$input.keyup(function(){
  $placeholder.toggle($(this).val() === '');
});

.chzn-search .placeholder{
  margin-top: -25px;
  margin-bottom: 15px;
  margin-left: 7px;
  color: $gray;
}

Displaying collections and sorting them with ember-data

We had a lot of pain sorting our collections, since they are not there when the page is opened you need to continually re-sort…

App.Controller.Events = Ember.ArrayController.extend({
    init: function() {
      this._super();
      Helper.assignSortedCollection(this, 'content', Oceans.store.findAll(Oceans.Model.Event), function(item){
        return -1 * item.get('created_at').getTime();
      });
    }
  });

Helper = {
  assignSortedCollection: function(to, path, items, sorter){
    items.addObserver('length', function(){
      var temp = Ember.A();
      this.forEach(function(item) { temp.pushObject(item); });
      to.set(path, _(temp).sortBy(sorter));
    });
  }
}

Save & validation callbacks for ember-data/ember.js

You want to do something when your record got saved/validations failed.

Usage

user.observeSaveOnce(success: function(){
  // go to next page
}, error: function(){
  // show validation errors
})

Code

  # your model.js 
  observeSaveOnce: function(options) {
    function callback() {
      var outcome = 'success';
      if (this.get('isDirty')) {
        if (this.get('isValid')) return; // not submitted yet
        outcome = 'error';
      }

      (options[outcome] || Ember.K).call(this);

      this.removeObserver('isDirty', callback);
      this.removeObserver('isValid', callback);
    }

    this.addObserver('isDirty', callback);
    this.addObserver('isValid', callback);
  }

A fresh start with Ubuntu Precise Pangolin 12.04

A fresh install for my laptop, with some Desktop tools and all the rails/ruby stuff I need.

  1. Choose a short name for your computer, it will later show in the prompt.
    Only enter your firstname/alias, it will always show in the toolbar.
    Keyboard layout: English (International AltGr dead keys)
  2. Copy over stuff from old system, decrypt using ecryptfs-recover-private if necessary.
    (Get places.sqlite from firefox folder to recover your history.)
  3. Install RVM + rvm install 1.9.3 
    sudo apt-get install build-essential curl libcurl4-openssl-dev zlib1g-dev libssl-dev libreadline6-dev libncursesw5-dev libxml2 libxml2-dev libxslt1-dev libsqlite3-dev -y
install rvm following instructions in the link...
  4. Git sudo apt-get install git
  5. Dropbox install + start syncing
  6. dotfiles 
    cd ~ && git clone git://github.com/grosser/dotfiles.git
ruby dotfiles/install.rb
  7. Rubymine to /opt/rubymine

    Command key
    If you like OSx like shortcuts e.g. Cmd+T, choose "meta is mapped to left win" in advanced keyboard layout options and you can use your windows key for them.

    Executable
    /opt/rubymine/bin/rubymine.sh and setup mine as executable then

    alias m="mine . > /dev/null 2>&1 &"

    Oracle/Sun-java
    It is no longer in ubuntu repos.

    sudo apt-get purge openjdk*
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
  8. Unity menu key
    Map unity menu from super to Super+z, so you can use it with shortcuts (see below) and with rubymine commands
    sudo apt-get install compizconfig-settings-manager -y
    open compiz application and rebind unity laucher @ "ubuntu unity plugin", dont mess with anything else, I managed to make ubuntu no longer boot into a GUI with just a few clicks
  9. Shortcuts
    Super+D = desktop
    Super+E = open home
    Super+Up = maximize
    Super+Down = minimize
    Super+Q = quit application (Alt+F4)

  10. Chrome sudo apt-get install chromium-browser -y
  11. Ruco commandline editor gem install ruco (atm not working on ruby 1.9.3 / ubuntu 12)
  12. copy important dotfiles + firefox history/forms/... database from .mozilla
  13. dotfiles
  14. Multi-clipboard sudo apt-get install clipit -y
    (set history shortcut: Ctrl+Alt+V)
  15. Skype + add skype to startup
    (video fix in dotfiles --> add add /home/xxxx/dotfiles/bin/video-skype to "Startup Spplications" )

  16. Mysql:
    sudo apt-get install mysql-server mysql-client libmysql-ruby libmysqlclient-dev -y
    I`d recommend no root password
  17. Redis sudo apt-get install redis-server -y
  18. Memcached sudo apt-get install memcached
  19. ImageMagic sudo apt-get install imagemagick -y
  20. Arial/Verdana etc fonts: sudo apt-get install msttcorefonts -y
  21. VirtualBox
  22. Nginx + Passenger
  23. Restrcited codes sudo apt-get install ubuntu-restricted-extras -y
  24. Terminal
    Set Ctrl+Shift+L for clear+reset in terminal, so the history gets removed on keypress
    Set Ctrl+t for new tab
  25. Postgres
    sudo apt-get install postgresql libpq-dev
    gem install pg
    sudo su postgres
    createuser

    use no username / no password in database.yml

  26. Reverse scrolling
    If you often work on macs this can reduce your confusion.
    sudo add-apt-repository ppa:zedtux/naturalscrolling
    sudo apt-get update
    sudo apt-get install naturalscrolling -y