twokul

<img {{bind-attr src=lazyUrl}} />

twokul

import { get, set }    from 'ember';
import InViewportMixin from '../mixins/in-viewport';

export default Component.extend(InViewportMixin, {
  lazyUrl: null,

  elementInViewport: observer('enteredViewport', function() {
    // assuming the url was passed into the component
    set(this, 'lazyUrl', get(this, 'url'));
  }).on('didInsertElement')

twokul

export default Component.extend(InViewportMixin, {
  elementInViewport: observer('enteredViewport', function() {
    // do crazy things!
  }).on('didInsertElement')
});

twokul

(function() {
  // assuming the jQuery is defined
  var image = $('img');
  
  image.on('load', function() {
    console.log('seems like the image is loaded!');
  });
  
  image.on('error', function() {
    console.log('bummer! image cannot be loaded!');

twokul

Hidden classes in JavaScript and Inline Caching

Knowing how internals work is always a good. Pretty much for everything. Cars, trains, computers, you name it. It gives you an insight on what happens under the hood. You also act/react differently based on this knowledge.

As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.

A little about V8

V8 is a JavaScript engine built by Google. Firefox built SpiderMonkey, Opera built Carakan and Microsoft built Chakra. One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScr

twokul

desc "Compile all the assets named in config.assets.precompile"
task :precompile do
  # We need to do this dance because RAILS_GROUPS is used
  # too early in the boot process and changing here is already too late.
  if ENV["RAILS_GROUPS"].to_s.empty? || ENV["RAILS_ENV"].to_s.empty?
    ENV["RAILS_GROUPS"] ||= "assets"
    ENV["RAILS_ENV"]    ||= "production"
    Kernel.exec $0, *ARGV
  else
    Rake::Task["environment"].invoke

twokul

twokul

App.Person = Ember.Object.extend({
  firstName: null,
  lastName: null,
  fullName: function(key, value, oldValue) {
    // setter
    if (arguments.length > 1) {
      var nameParts = fullNameString.split(/\s+/);
      this.set('firstName', nameParts[0]);
      this.set('lastName',  nameParts[1]);
    }

twokul

App.AjaxObject = Ember.Object.create({
  value: function() {
    // makes an ajax call to get new value
    return service.getValue();
  }.property().volatile()
});

twokul

$('<span></span>').css({display:'none',whiteSpace:'nowrap'}).appendTo($('body')).text('U. S. Government Accountability Office, http:// www.gao.gov').width()