Pro Tips

Pro Tip: Learning the DOM September 3rd 2015

Learning about DOM Properties/Methods, Events, and Attributes will help you learn more about how to write better HTML and CSS. I think it is commonly overlooked at the skill required to write truely elegant HTML and CSS. Knowing as much as you can about the browser and DOM will make you a better Front End Engineer. Check out some of these resources.

Mozilla Developer Network
W3 Schools (Don’t knock it before you try it)
CSS Tricks


Pro Tip: npm shrink wrap August 30th 2015

This command locks down the versions of a package’s dependencies so that you can control exactly which versions of each dependency will be used when your package is installed. The package.json file is still required if you want to use npm install.

npm shrinkwrap allows you to control with versions of each dependency you use for an npm install all the way down the dependency tree. This is useful for distributed systems as well as collaboration by many developers on a project. Read more about it here.


Pro Tip: Learn ES6 June 27th 2015

Read “You Don’t Know JavaScript: ES6 & Beyond” for free online! Click Here.


Pro Tip: Play with ES6 June 26th 2015

Take advantage of the tools out there to play around with ES6 and practice your new skills.

ES6 Fiddle

Babel Playground


Pro Tip: Determining visibility June 18th 2015

Before March of 2013 for something to not be visible it could have display: none, opactiy:0, or visibility: hidden. New standards say that an element with a width or height is visible (along with other metrics). This means “isDisplayed()” like tasks in test won’t work for transparent and visibility hidden elements, you need custom logic.

See this documentation on W3 WebDriver Standards


Pro Tip: Emulate different iOS devices (June 10th 2015)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//For Ionic
ionic emulate ios --target="<Device Name>"

//For Cordova
cordova emulate ios --target="<Device Name>"


//Valid values for "--target" (case sensitive):

//iPhone-4s
//iPhone-5
//iPhone-5s
//iPhone-6-Plus
//iPhone-6
//iPad-2
//iPad-Retina
//iPad-Air
//Resizable-iPhone
//Resizable-iPad

Pro Tip: Reference MDN (April 15th 2015)

Personally I love to look for the MDN (Mozilla Developers Network) link on my Google results. They have great and accurate documentation. Here is an article on HTTP headers:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers


Pro Tip: Gulp Run Sequence (April 6th 2015)

Use the gulp plugin runSequence to specify the order your gulp tasks will take place or two allow them to run in parallel. See the example below from their npm page.

1
2
3
gulp.task('build', function(cb) {
  runSequence('build-clean', ['build-scripts', 'build-styles'], 'build-html', cb);
});

In This example build-clean will run, then the tasks in the array will/can run in parallel, then build-html will run.


Pro Tip: (March 19th 2015)

Ionic Platform utility gives you access to all kinds of handy device checks. You can check for iOS, Android, deviceReady, etc.. Below is a link to the documents and complete list:

ionic.Platform – Utilities


Pro Tip: Use Promises: (March 5th 2015)

Promises allow for asynchronous function calls and give you access to their return values when they are ready. Don’t limit yourself to using these with HTTP Requests! Below is an example of a diolog box directive that uses promises:

Directive JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
angular.directive('dialogPopUp', [ '$log', '$rootScope', 'DialogPopUp',
        function ($log, $rootScope, DialogPopUp) {
            return {
                restrict: 'E',
                scope: true,
                replace: true,
                templateUrl: 'build/global/directives/dialogPopUp.html',
                link: function ($scope, $element, $attrs) {

                    $scope.show = false;

                    $scope.title = '';
                    $scope.message = '';

                    $rootScope.$on('dialog-show', function($event, title, message){
                       $scope.show = true;
                        $scope.title = title;
                        $scope.message = message;
                    });

                    $scope.yes = function(){
                        DialogPopUp.yes();
                        $scope.show = false;
                    };

                    $scope.no = function(){
                        DialogPopUp.no();
                        $scope.show = false;
                    };

                }
            };
        }
    ]);
});

Directive Partial:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="dialog-background" ng-show="show">
    <div id="dialog-wrap">
        <div class="dialog-inner-wrap">
            <div class="dialog-box">
                <div class="dialog-yes" ng-click="yes()"><div class="btn btn-blue">Yes</div></div>
                <div class="dialog-no" ng-click="no()"><div class="btn btn-blue">No</div></div>
                <div class="dialog-title">
                    <p>{{title}}</p>
                </div>
                <div class="dialog-message">
                    <p>{{message}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Dialog Service:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
angular.factory('DialogPopUp', ['$rootScope', '$q', '$log', function ($rootScope, $q, $log) {

        var current;

        return {
            show : function(title, message){
                if(current){
                    current.reject();
                }
                $rootScope.$emit('dialog-show', title, message);
                current = $q.defer();
                return current.promise;
            },
            yes : function(){
                current.resolve();
                current = null;
            },
            no : function(){
                current.reject();
                current = null;
            }
        };

    }]);
});

Call the directive in your DOM:

1
<dialog-pop-up></dialog-pop-up>

Reference it in your Controller:

1
2
3
4
5
6
7
8
9
angular.controller('myCtrl', function($scope, DialogPopUp){
    DialogPopUp.show("Remember You?", "Would You Like Us To Save Your Password?")
        .then(function(){
            //action for when user clicks yes
        })
        .catch(function(){
            //action for when user clicks no
        });
});

Pro Tip: Create A New Public Bower Package: (February 3rd 2015)

Create a bower.json file in your project (more about bower.json here):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

To create your package:

1
bower register <my-package-name> <git-endpoint>

That’s it, now you can check your package by running the following command:

1
bower info <my-package-name>

Pro Tip: Make Your ng-repeat Scrollable (January 29th 2015)

You can make your list of links scrollable by wrapping your fa-modifier ng-repeat="link in links" in a fa-scroll-view.

Usage:

1
2
3
4
5
6
7
8
9
10
11
12
<fa-scroll-view fa-pipe-from="scrollHandler">
    <fa-modifier ng-repeat="link in links"
        fa-translate="linkTimelines.translate(link.transform)"
        fa-opacity="linkTimelines.opacity(link.opacity)"
        fa-animate-enter="linkEnter(link.transform, link.opacity, $index, $done)"
        fa-size="[400, 40]"
        fa-index="$index">
        <fa-surface fa-pipe-to="scrollHandler">
            {{link.text}}
        </fa-surface>
    </fa-modifier>
</fa-scroll-view>

And update our Javascript to:

1
2
3
4
5
6
.controller('secondController', function($scope, $famous, $timeline) {
  var Transitionable = $famous['famous/transitions/Transitionable'];
  var Easing = $famous['famous/transitions/Easing'];
  var EventHandler = $famous['famous/core/EventHandler'];
 
  $scope.scrollHandler = new EventHandler();

And now we have a scroll-view!


Pro Tip: Lint your CSS and LESS in Gulp (January 23rd 2015)

While error logging with gulp-util is one way to catch error in your CSS and LESS during Gulp tasks, you can also use gulp-recess for linting!

Install:

1
$ npm install --save-dev gulp-recess

Usage:

1
2
3
4
5
6
7
8
9
var gulp = require('gulp');
var recess = require('gulp-recess');

gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(recess())
        .pipe(recess.reporter())
        .pipe(gulp.dest('dist'));
});

Pro Tip: Setting Headers for All HTTP Request in Angular App (January 20th 2015)

Let’s say, for example, you want to add an Authorization header to all requests you send from your Angular application. Well Angular makes it easy, simply use the following code:

1
    $httpProvider.defaults.headers.common.Authorization = "MY_AUTH_TOKEN";

The above example would set the Authorization header for ALL requests. To learn more about what you can do with $httpProvider click here


Pro Tip: Switching from Grunt to Gulp (January 15th 2015)

Switching from Grunt to Gulp is very easy to do, so don’t hesitate to do it if Gulp will work better for your project. There are even plugins out there that help take your Grunt config file and use them with GulpJS and vice versa!

Using Grunt in Gulp

Using Gulp in Grunt


Pro Tip: Updating Bower Package (January 7th 2015)

Updating your bower package is quick and easy!

1
2
3
4
5
6
7
8
# commit your changes
git commit -am "Made some awesome new changes, now its even awesomer"

# tag the commit
git tag -a v0.0.2 -m "Release version 0.0.2"

# push to GitHub
git push origin master --tags

You can also quickly bump your version numbers throughout your files using: grunt-contrib-bump

Source: bob.yexley.net


Pro Tip: Manipulate DOM with Chrome’s Console (December 27th 2014)

When you select a DOM Node with the Inspect Element tool chrome automatically assigns it to a variable. $0. If you want to do quick and dirty testing in the console before taking the time to code up a solution you can manipulate said element in Chrome’s Console using this variable. For example adding a CSS class with Jquery. $($0).addClass('myClass')


Pro Tip: Debugging iOS Simulator (December 24th 2014)

When your app build is running in your iOS simulator you can still access all of your console.log’s and other debugging methods.  Open Safari, make sure developer tools are enabled, click “Develop” in toolbar, and select the files you want to inspect from the “iOS Simulator” dropdown.


Pro Tip: Write Unit Tests! (December 18th 2014)

Writing tests for your application is one of the most useful tools you can use to ensure your code has less bugs (I can’t in good conscious say any code is bug free), ensure a smooth user experience, protect against the dangers of large teams working on the same source, and much more. The benefits of testing are endless and I think it’s something everyone should educate themselves on!


Pro Tip: Chrome Has DOM Breakpoints (December 17th 2014)

You can insert breakpoints on your DOM that are triggered on: Node Removal, Subtree Modifications, or Attribute Modifications. Once inside your dev tools panel and the “Elements” tab, right click on any node and navigate to “Break On…” at the bottom of the menu!