HenryVonfire

Step 1: Launch Google Chrome with Remote Debugging support

• windows: <path to chrome>/chrome.exe --remote-debugging-port=9222
• macOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
• linux: google-chrome --remote-debugging-port=9222

Step 2: Install "Debugger for Chrome" extension

Step 3: Setup your application

HenryVonfire

Whether you're trying to give back to the open source community or collaborating on your own projects, knowing how to properly fork and generate pull requests is essential. Unfortunately, it's quite easy to make mistakes or not know what you should do when you're initially learning the process. I know that I certainly had considerable initial trouble with it, and I found a lot of the information on GitHub and around the internet to be rather piecemeal and incomplete - part of the process described here, another there, common hangups in a different place, and so on.

In an attempt to coallate this information for myself and others, this short tutorial is what I've found to be fairly standard procedure for creating a fork, doing your work, issuing a pull request, and merging that pull request back into the original project.

Creating a Fork

Just head over to the GitHub page and click the "Fork" button. It's just that simple. Once you've done that, you can use your favorite git client to clone your repo or j

HenryVonfire

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Concurrency Decendants'
});

HenryVonfire

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    navIntro() {
      this.transitionToRoute('index');
    },
    navExample() {
      this.transitionToRoute('example');
    }

HenryVonfire

app.import() works with node_modules now! As of Ember 2.15. Previously it only worked with bower_components and vendor.

Docs for app.import are here: https://ember-cli.com/managing-dependencies#standard-non-amd-asset

This method (vendor-shim) wraps the global export into an es6 module (but the global one is still present). It doesn't use an es6 interface even if the library offers one, but that's okay for my use case.

Things could still be easier, see this thread for the current state of that.

HenryVonfire

/**
 * This is an example of importing https://github.com/component/color-picker
 * into an Ember app. However, you can import any node module.
 *
 * Create an in-repo addon:
 *
 *   $ ember g in-repo-addon rollup
 *
 * You should have a file `lib/rollup/index.js`.
 * Replace the contents of that file with the stuff below.

HenryVonfire

import Ember from 'ember';

export default Ember.Component.extend({
});

HenryVonfire

import Ember from 'ember';

export default Ember.Component.extend({
  click(e) {
  	console.log(e.target.id);
  }
});

HenryVonfire

import Ember from 'ember';

export default Ember.Controller.extend({
});

HenryVonfire

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions:{
    undoChanges(){
      let model = this.get('model');
      console.log(model.changed());
    	model.rollback();
    }