Working with Webpack you get hot module reloading, ES6 module syntax, babel, eslint, and CSS style injection. With React/Redux, you get Redux Dev Tools, and principles of functional programming. This tooling is sorely missed when moving off to a legacy project without them.

The community surrounding React is very supportive. Whether its a full free course on Egghead.io by Redux creator Dan Abramov, or the thousands of questions and answers on Stack Overflow, the React community is thriving.

Mainly, I use create-react-app and run the eject script to get up and running quickly. This provides me with the latest from the React/Webpack dev team. Lately, I’ve been using preact-compat as an alias in my Webpack config to benefit from the smaller file size of preact. create-react-app also adds offline first support with Service Worker, something I haven’t taken advantage of yet.

Finally, there was some issues with licensing recently with React, but that has since cleared up. My next personal project will be to rearchitecture my personal site using preact/webpack/redux and XHR requests to WordPress.

The post High Praise for React and the React Ecosystem appeared first on Pete Schuster.

Example Service #1:

angular.module('ActivityApp').service('PersonService', [
  '$resource',
  function ($resource) {
    'use strict';

    var Person = $resource('', null, {
      get: {
        method: 'GET',
        url: '/apis/person'
      }
    }));

    return Person;
  }
]);

Example Service #2:

angular.module('ActivityApp').service('ActivityService', [
  '$resource',
  function ($resource) {
    'use strict';

    var Activity = $resource('', null, {
      query: {
        method: 'GET',
        url: '/apis/activity'
      }
    }));

    return Activity;
  }
]);

Example Controller:

angular.module('ActivityApp').controller('PersonController', [
  '$scope',
  'PersonService',
  'ActivityService',
  function ($scope, PersonService, ActivityService) {
    'use strict';

    $scope.person = PersonService.get();
    $scope.activity = ActivityService.query();
    $scope.formData = {};

    $scope.resolveAll = function (response) {
      // response is an array of both resolved promises
    };

    $scope.save = function () {
      PersonService.save($scope.formData);
    };

    $q.all([$scope.person.$promise, $scope.activity.$promise]).then($scope.resolveAll);
  }]);

Example Controller Spec:

describe('PersonController', function() {

  var $controller,
      $scope,
      PersonService,
      ActivityService;

  beforeEach(module('ActivityApp'));

  beforeEach(function () {
    PersonService = jasmine.createSpyObj('PersonService', [
      'get',
      'save'
    ]);

    ActivityService = jasmine.createSpyObj('ActivityService', [
      'query'
    ]);

    module(function ($provide) {
      $provide.value('PersonService', PersonService);
      $provide.value('ActivityService', ActivityService);
    });
  });

  beforeEach(inject(function(_$controller_, $rootScope) {
    $scope = $rootScope.$new();

    $controller = _$controller_('PersonController', {
      $scope: $scope
    });
  }));

  it('should be defined and call services', function() {
    expect($controller).toBeDefined();
    expect(PersonService.get).toHaveBeenCalled();
    expect(ActivityService.query).toHaveBeenCalled();
  });

  describe('$scope.save', function() {
    it('save formData to PersonService', function() {
      $scope.formData = { test: 'test' };
      $scope.save();
      expect(PersonService.save).toHaveBeenCalledWith({ test: 'test' });
    });
  });
});

The spec for the PersonController above asserts that when it is initiated, it will call both the PersonService and the ActivityService with their respective methods. Additionally, the $scope.save method will call the PersonService save method with the $scope.formData object.

It’s not the concern of the controller for what the service does. If the rest of your controller depends on the return value from the service, you can mock that out and create a promise for the other functions to react to.

Example 2 Controller Spec:

describe('PersonController', function() {

  var $controller,
      $scope,
      PersonService,
      ActivityService
      PersonGetPromise,
      ActivityQueryPromise;

  beforeEach(module('ActivityApp'));

  beforeEach(function () {
    PersonService = jasmine.createSpyObj('PersonService', [
      'get',
      'save'
    ]);

    ActivityService = jasmine.createSpyObj('ActivityService', [
      'query'
    ]);

    module(function ($provide) {
      $provide.value('PersonService', PersonService);
      $provide.value('ActivityService', ActivityService);
    });
  });

  beforeEach(inject(function(_$controller_, $rootScope, $q) {
    PersonGetPromise = $q.defer();
    ActivityQueryPromise = $q.defer();

    PersonService.get.and.returnValue({ $promise: PersonGetPromise.promise });
    ActivityService.query.and.returnValue({ $promise: ActivityQueryPromise.promise });

    PersonGetPromise.resolve('MOCK DATA');
    ActivityQueryPromise.resolve('MOCK DATA');

    $scope = $rootScope.$new();

    $controller = _$controller_('PersonController', {
      $scope: $scope
    });
  }));

  it('should be defined and call services', function() {
    expect($controller).toBeDefined();
    expect(PersonService.get).toHaveBeenCalled();
    expect(ActivityService.query).toHaveBeenCalled();
  });

  describe('$scope.save', function() {
    it('save formData to PersonService', function() {
      $scope.formData = { test: 'test' };
      $scope.save();
      expect(PersonService.save).toHaveBeenCalledWith({ test: 'test' });
    });
  });
});

Now both promises have resolved without making a call to the external API. Instead of resolving the promises in the before each, you could also resolve then in the it() block or in another beforeEach() in a lower describe() block. This would allow you to create tests with different return values or with a rejected promise to test error cases.

The post Jasmine Testing Angular Controller with Service(s) appeared first on Pete Schuster.

Example Service #1:

angular.module('ActivityApp').service('PersonService', [
  '$resource',
  function ($resource) {
    'use strict';

    var Person = $resource('', null, {
      get: {
        method: 'GET',
        url: '/apis/person'
      }
    }));

    return Person;
  }
]);

Example Service #2:

angular.module('ActivityApp').service('ActivityService', [
  '$resource',
  function ($resource) {
    'use strict';

    var Activity = $resource('', null, {
      query: {
        method: 'GET',
        url: '/apis/activity'
      }
    }));

    return Activity;
  }
]);

Example Controller:

angular.module('ActivityApp').controller('PersonController', [
  '$scope',
  'PersonService',
  'ActivityService',
  function ($scope, PersonService, ActivityService) {
    'use strict';

    $scope.person = PersonService.get();
    $scope.activity = ActivityService.query();

    $scope.resolveAll = function (response) {
      // response is an array of both resolved promises
    };

    $q.all([$scope.person.$promise, $scope.activity.$promise]).then($scope.resolveAll);
  }]);

Now in the $scope.resolveAll function you can act on the data and be sure that you have access to sets of data.

The post Waiting for Promises to Resolve in Angular 1.x appeared first on Pete Schuster.

The rules

• text-align: start;
  The same as left if direction is left-to-right and right if direction is right-to-left.
• text-align: end;
  The same as right if direction is left-to-right and left if direction is right-to-left.

What makes these rules helpful is that you don’t need to specify left or right alignment which helps with internationalization. Content with adjust automatically to users’ language preferences that are RTL or LTR.

Browser support for these values is pretty high, missing only IE and Opera.

Bonus

Today I also learned that text-align is actually a shorthand property for text-align-all and text-align-last properties.

Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
https://drafts.csswg.org/css-text-3/#text-align-property
https://drafts.csswg.org/css-text-3/#text-align-all-property
https://drafts.csswg.org/css-text-3/#text-align-last-property

The post CSS Text Align Start and End appeared first on Pete Schuster.