erikringsmuth

Ractive Layout Views

I'd like to propose a new Ractive feature. The goal is to use a JavaScript router to load a view without an intermediate step to render the layout (header, footer, etc.). In most frameworks you have to start the "App" then start the router. The "App" is the layout and the router loads and populates the main content. I prefer to have the router run the app without an intermediate step to render the layout. The router should load a view, let's start with the HomeView, and the HomeView should specify a LayoutView. Creating the home view should also create and render the layout. When you attach the home view to the document you're also attaching it's layout.

Here's an example:

// layout/layoutView.js
define([
  'ractive',

erikringsmuth

// listen for the konami code
function konami(callback) {
	var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, B = 66, matchedIndex = 0, konami = [UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A];
	window.addEventListener('keydown', function(event) {
		event.keyCode === konami[matchedIndex] ? matchedIndex++ : matchedIndex = 0;
		if (matchedIndex === konami.length) {
			callback();
			matchedIndex = 0;
 }

erikringsmuth

// view.on - delegate events. These are bound once to the root object so subsequent calls to view.render()
// don't need to re-bind events. Events work differently than jQuery delegate events since there aren't
// native ECMAScript delegate events. jQuery swapped event.target and event.currentTarget. Who knows why...
//
// var MyView = View.extend({
//   this.on: {
//    'click span a': function(event) {
//       this; // will reference your instance of `MyView`
//       event.target; // will reference the DOM element the action took place on. This is `a` in this example.
//       event.currentTarget; // will reference `this.el` which is the root element that all events are bound to.

erikringsmuth

[CSS3] Neon Glow

Designed for use with Chrome.

A Pen by NobodyRocks on CodePen.

License.

erikringsmuth

'use strict';

var googleOAuth2 = require('./googleOAuth2'),
    clientId = '...',
    clientSecret = '...';
    // DON'T STORE YOUR CLIENT ID AND SECRET, GET THEM FROM YOUR CONFIG!


module.exports.createOAuthTokens = function createOAuthTokens(req, res) {

erikringsmuth

// The DI pattern assumes that MyService will be a class or constructor function
import {MyService} from './myService';

@Inject(MyService)
export class MyThing {
  constructor(myService) {
    this.myService = myService;
  }

  someAction() {

erikringsmuth

Here's a more in depth explanation of Angular's DI, RequireJS, and what's coming up in Angular 2.0 and ES6 modules.

Angular DI is not a module loader! It injects objects that have already been loaded using script tags. It does not do lazy-loading. Angular 2.0 will use ES6 import for module loading. Angular 2.0 will also add a DI layer that runs after the modules load.

I need to go over Java's import vs. JavaScript's require/import and Java singletons to further explain what Angular's DI is doing.

Java's import allows you to access another package's types without fully qualifying the package name. JavaScript's import loads a module and creates references to the module's exported objects. These are very different operations. JavaScript's import is powerful stuff! You have the objects, not just aliases to a package's types.

Singleton is a pattern, not the object itself. In Java you start with a type and have to create an instance. The singleton pattern ensures you have only 1 instance of that t

erikringsmuth

alert('java zcript!');

erikringsmuth

gulp.task('lint', function() {
  gulp.src(['src/*.js', 'src/*.html'])
    .pipe(jshint.extract('always'))
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('jshint-stylish'));
});

erikringsmuth

I played around with this and got it to a point where I'm not getting errors anymore. I'm not sure if it actually works though...

First, put jasmine-jquery.js in the root folder (next to amdSpecRunner.js).

You won't be able to load jasmine-jquery.js with a normal <script> tag. You have to load it with RequireJS so that you can specify it's dependency on jasmine. That way the code in jasmine-jquery.js won't be executed until jasmine has been loaded.

amdSpecRunner.js

• line 19: specify it's dependency on jasmine
• line 31: load jasmine-jquery