Javascript

33 Javascript concepts

javascript prettifier

https://ponyfoo.com/articles/tagged/es6-in-depth

https://learnredux.com/

https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/

http://mint-ui.github.io/#!/en

timezone library

use of nexttick for testing

SO on mocking es6

  //scroll to the first field_with_errors field
  if ($(".field_with_errors").first().length) {
    $ele = $(".field_with_errors").first();
    $("html, body").animate({ scrollTop: $ele.offset().top }, 1000);
  }

Taken from the 'Classical Inheritence is Obsolete' talk

Delegate prototype

  // decent way of creating a function object + prototype method

  var proto = {
    hello: function hello(){
      return 'Hello ' + this.name;
    }
  };

  var patrick = Object.create(proto);
  patrick.name = 'Patrick';

Cloning style prototype

  1. Great for default state
  2. Mixins
  var proto = {
    hello: function hello(){
      return 'Hello ' + this.name;
    }
  };
  
  var patrick = _.extend({}, proto, { name: 'Patrick' });

Functional Inheritance

  1. Great for encapsulation / privacy
  2. Functional mixins
  3. Replace Constructors, Init functions, replace super()
  var model = function(){
    var attrs = {}; //private

    this.set = function(name, value){
      attrs[name] = value;
      this.trigger('change', {
        name: name,
        value: value
      });
    };

    this.get = function(name){
      return attrs[name];
    };

    // example creating an event emitter
    _.extend(this, Backbone.Events);
  };


  // use it like this

  var patrick = {};
  model.call(patrick).set('name', 'Patrick');
  patrick.get('name'); // 'Patrick'
  
  patrick.on('change', function(event){
    console.log(event.name);  
  });
  
  patrick.set('name', 'Blah'); // Blah

http://developer.telerik.com/featured/tools-learn-javascript/

Speedtest snippet

How to give an object Public + Private methods & properties links from codeschool best practices

Good write up on Bind

http://ejohn.org/apps/learn/#2

http://perfectionkills.com/understanding-delete/

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

CoffeeScript cookbook

http://www.objectplayground.com/

Javascript Design Patterns

https://devmynd.com/blog/2014-7-rails-ember-js-with-the-ember-cli-redux-part-1-the-api-and-cms-with-ruby-on-rails https://docs.google.com/presentation/d/1Is4f881t0pImLAQLCz4AlcLaUL8Fk4-C_Q2Hbu2DhS4/edit#slide=id.g3f35b2e42_0218

http://6to5.org/

http://js2.coffee/

Mapping thread on HN - world map

https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

http://www.sitepoint.com/video-an-introduction-to-component-state/

// from https://railsware.com/blog/2017/01/10/mocking-es6-module-import-without-dependency-injection/
// feature.js module
import { fetchData as originalFetchData } from './backend';
 
let fetchData = originalFetchData;
 
export function mock(mockedFetchData) {
  fetchData = mockedFetchData || originalFetchData;
}
 
export function doSomething() {
  // some code which calls fetchData
}

//use it with

// feature.test.js module
import { expect } from 'chai';
import { mock, doSomething } from './feature';
 
const dummyFetchData = () => {};
 
describe('doSomething', () => {
  beforeEach(() => { mock(dummyFetchData); });
  afterEach(() => { mock(); });
 
  it('does something meaningful', () => {
    // use doSomething with mocked fetchData
  });
});

//advantage, once ES6 modules roll out proper, you won't be able to mock them as they're immutable bindings. So there.

Page created on 6 Jun 2020