How to Make a Chrome Extension

Go beyond the introductory tutorials and learn how to make a Chrome extension in JavaScript that actually does something.

Ember.js: Implementing text fields with save buttons

June 11, 2012

[Note: This post uses Ember master syntax. On 0.9.8.1, you may have to remove view. in the *Binding attributes.]

Live Updating

Ember.TextField and friends live-update their value property as the user enters text. You can use valueBinding to bind to some model property, like so:

1	`{{view Ember.TextField valueBinding="firstName"}}`

Now firstName will be updated immediately as the user enters text.

With Save button

Oftentimes, live updating is not what you want. Instead, you want to update the model data only when the user clicks a Save button.

Plain input field

App.LazyTextField = Ember.View.extend({
  attributeBindings: ['value', 'type', 'size', 'name', 'placeholder', 'disabled', 'maxlength'],
  tagName: 'input',
  type: 'text',
  getCurrentValue: function() {
    return this.$().val();
  }
});

This is a lazy-updating text field. Whenever you set or update its value property, the contents get updated, but when the user changes the contents, they are not written back into value.

Now we can implement a save button like so:

App.PersonView = Ember.View.extend({
  firstName: 'Jane',
  template: Ember.Handlebars.compile(
    '<form>' +
    '{{view App.LazyTextField valueBinding="view.firstName" viewName="textField"}}' +
    '<input type="submit" value="Save" {{action save}}>' +
    '</form>'),
  save: function(e) {
    e.preventDefault(); e.stopPropagation();
    this.set('firstName', this.get('textField').getCurrentValue());
  }
});

Another pattern: One-way bindings

There is another way to achieve this, using the built-in live-updating Ember.TextField and a one-way binding. It’s more compact, though slightly more opaque:

1
2
3

App.LazyTextField = Ember.TextField.extend({
  valueBinding: Ember.Binding.oneWay('source')
});

Now instantiate LazyTextField, and bind your model data to source instead of value, and property changes will propagate only from source to value, but not vice versa (unless explicitly copied by the save function).

App.PersonView = Ember.View.extend({
  firstName: 'Jane',
  template: Ember.Handlebars.compile(
    '<form>' +
    '{{view App.LazyTextField sourceBinding="view.firstName" viewName="textField"}}' +
    '<input type="submit" value="Save" {{action save}}>' +
    '</form>'),
  save: function(e) {
    e.preventDefault(); e.stopPropagation();
    this.set('firstName', this.getPath('textField.value'));
  }
});

[…]

Let’s Talk About Grep!

April 11, 2017

Today, we are excited to introduce our grep analysis engine.

Grep is a long-standing tool that is essential to developers. It allows you to search files for matches against given regular expressions. Now, we are bringing grep to Code Climate to give teams a way to detect specific patterns in their code. The issues emitted by the grep engine are entirely configurable. You can use the grep engine to enforce specific style rules (e.g. don’t define methods that start with set_ or get_), or to help burn-down existing constructs – as seen in this rule to deprecate use of octicons:

  grep:
    enabled: true
    config:
      patterns:
        octicons-deprecated:
          pattern: \.octicon
          annotation: "Don't use octicons"
          severity: minor
          categories: Compatibility
          path_patterns:
            - "**/*.slim"

This will generate the following issues on Code Climate:

Check out our documentation to set up your own grep patterns!

[…]

The Ruby Rails Aggregator