brianally

// app/authenticators/admin.js
import Ember from "ember";
import Base from "simple-auth/authenticators/base";
import ENV from "../config/environment";

export default Base.extend({

  // called by login form action
  // this.get("session").authenticate("authenticator:admin", credentials).then(...)
  

brianally

// app/routes/login.js
import Ember from "ember";
import ENV from "../config/environment";

export default Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set("errorMessage", null);
  },

  actions: {

brianally

// config/environment.js
module.exports = function(environment) {
  
  var ENV = {
    
    // ...

    APP: {
      inIframe: false
    }

brianally

// some controller
import Ember from 'ember';

export default Ember.Controller.extend({

  responses        : [],
  filteredResponses: [],
  sectors          : [],
  dateFrom         : null,
  dateTo           : null,

brianally

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['embed-src'],
  regex     : /https?:/,
  width     : null,
  height    : null,
  src       : null,

brianally

<?php
// see User model at:
// https://gist.github.com/brianally/f4f70f5bb8c0f2304307

App::uses('AppShell', 'Console/Command');

class UserShell extends AppShell {
  
  public $uses = array('User');

brianally

<?php
App::uses('AppModel', 'Model');
App::uses('SimplePasswordHasher', 'Controller/Component/Auth');

class User extends AppModel {

  public $actsAs = [
    'Acl' => ['type' => 'requester']
  ];

brianally

<?php
// app/Lib/Routing/Route/PageSlugRoute.php
// 
App::uses('Page', 'Model');
App::uses('CakeRoute', 'Routing/Route');
class PageSlugRoute extends CakeRoute {

  public function parse($url) {
    $params = parent::parse($url);
    if (empty($params)) return false;

brianally

<?php
class Category extends AppModel {

  public $hasAndBelongsToMany = [
    'Item' => [
      'className'             => 'Item',
      'with'                  => 'CategoryItem',
      'foreignKey'            => 'category_id',
      'associationForeignKey' => 'item_id'
    ]

brianally

One of Mike Bostock's examples shows how a line can be made to appear to be animated as its drawn to the screen using a trick with the CSS stroke-dasharray property. You can see it in action here.

As usual with d3, the code is very concise and easy to understand. (OK, not all d3 code is easy to understand but still.) However, i wondered whether the transition could be applied with CSS. Not completely, of course, as we require the length of the line to set up the initial dasharray. But what if we wanted to set the transition time in our CSS?

Sure, it's a bit ridiculous, but let's just pretend our workflow involves designers handling all the styles. Or, we have a component that does this one thing and we don't want to have to set the timing in our JS, even if just to pass it in as an int. Maybe we're anal about having presentation logic in our JS.

Yeah, i know--it's SVG.

So, right away i figured it should be easy enough to declare the stroke-dashoffset transition in