JSFiddle

  • <link rel="stylesheet"> shadow dom bug

    Multiple elements on the page that use the same href do not get the stylesheet applied.

    <template id="link-stylesheet-template">
      <link rel="stylesheet" href="https://edge.fscdn.org/assets/components/fs-styles/dist/familysearch-styles.min-f51c06d962233bdd57e3e238d55c51c1.css">
    
      <div class="fs-alert">
        <p>Success!</p>
      </div>
    </template>
    
    <template id="test-template">
      <link rel="stylesheet" href="https://edge.fscdn.org/assets/components/fs-styles/dist/familysearch-styles.min-f51c06d962233bdd57e3e238d55c51c1.css">
    
      <button class="fs-button fs-button--recommended">It worked!</button>
    </template>
    
    <link-stylesheet></link-stylesheet>
    <link-stylesheet></link-stylesheet>
    
    <script>
      (function() {
        const template = document.querySelector('#link-stylesheet-template');
    
        customElements.define('link-stylesheet', class extends HTMLElement {
          constructor() {
            super();
    
            const root = this ...</script>
  • Simple Audio loading test for all browsers

    Auto load: Chrome, Firefox, Safari, iOS 8, Kindle Auto play: Chrome, Firefox, Safari Play on user interaction: iOS 8, Kindle

    var audio = new Audio();
    var canPlay = {};
    
    canPlay.mp3 = audio.canPlayType('audio/mpeg;').replace(/no/, '');
    canPlay.ogg = audio.canPlayType('audio/ogg ...
  • Unit Testing Sinon.js and sinon.stub in Safari #7 is the latest revision

    jQuery 1.10.1, HTML, CSS, JavaScript

    test("window.myFunc should equal myFunc", function () { 
      // this will pass
      ok(window.myFunc === myFunc);
    });
    
    test("window.myFunc should equal myFunc ...
  • Avoid filter

    Example of using $filter provider to avoid using the filter binding.

    angular.module('myApp', []);
    
    angular.module('myApp')
        .controller('myCtrl', function ($scope) {
        $scope.contacts = [{
            name: 'John Doe',
            phone: '(404) 776-8932',
            address: '1234 ...
  • Limit Bindings

    Example of limiting the number of bindings by just working with the native DOM.

    angular.module('myApp', []);
    
    angular.module('myApp')
        .controller('myCtrl', function ($scope) {
        $scope.contacts = [{
            name: 'John Doe',
            phone: '(404) 776-8932',
            address: '1234 ...
  • Lean Controller - empty #4 is the latest revision

    Empty stub for converting to a lean controller

    angular.module('myApp', []);
    
    angular.module('myApp')
        .controller('myCtrl', function ($scope) {
    
    });
    
    angular.module('myApp')
        .controller('otherCtrl', function ($scope) {
    
    });
    
    /*
    angular.module('myApp ...
  • Lean Controller - incorrect way #6 is the latest revision

    A not so lean controller that lets the controller do all the work.

    angular.module('myApp', []);
    
    angular.module('myApp')
        .controller('myCtrl', function ($scope) {
    
        $scope.items = ['one', 'two', 'three', 'four'];
        $scope.selectedItem = -1;
    
        $scope ...
  • Lean Controller - correct way

    A lean controller that lets the model do all the work.

    /**
     * 1. Model/data in a service
     * 2. Model/data manipulation in a service
     * 3. Logic in a service
     */
    angular.module ...
  • The "Angular" way - empty

    Empty Angular starter project for converting jQuery to Angular

    angular.module('myApp', []);
    
    angular.module('myApp')
        .controller('myCtrl', function ($scope) {
    
    });
    
    
    
    /* JQUERY CODE
    var items = ['one', 'two', 'three', 'four'];
    var $ul ...
  • The "Angular" way - completed

    Correctly converted Angular example from jQuery

    angular.module('myApp', []);
    
    angular.module('myApp')
        .factory('myModel', function () {
        var myModel = {};
    
        myModel.items = [{
            name: 'one'
        }, {
            name: 'two'
        }, {
            name: 'three'
        }, {
            name ...