Node.js interview questions

  • What is an error-first callback?
  • How can you avoid callback hells?
  • How can you listen on port 80 with Node?
  • What’s the event loop?
  • What tools can be used to assure consistent style?
  • What’s the difference between operational and programmer errors?
  • Why npm shrinkwrap is useful?
  • What’s a stub? Name a use case.
  • What’s a test pyramid? How can you implement it when talking about HTTP APIs?

ref: http://blog.risingstack.com/node-js-interview-questions/

Javascript debugging tips

  1. Quick find your DOM elements.
    1. Chrome inspector keeps the last 5 elements in its history, so the last marked element will be displayed with $0
  2. Display object as tables
    1. console.table(animals);
  3. Get the stack trace for a function
    1. trace <functionName>
  4. Quick find a function to debug
    1. Type debug(car.funcY) in the console and the script will stop in debug mode when it gets a function call to car.funcY
  5. One thing you can do to keep a better structure of your outputs is to use more console functions like: Console.log, console.debug, console.warn, console.info, console.error and so on. You can then filter them in your inspector.
    1. In the console.log() you can for example set %s for a string, %i for integers and %c for custom style.
    2. console.todo = function( msg){
          console.log( ‘%c %s %s %s ‘, ‘color: yellow; background-color: black;’, ‘–‘, msg, ‘–‘);
      }
      console.important = function( msg){
          console.log( ‘%c%s %s %s’, ‘color: brown; font-weight: bold; text-decoration: underline;’, ‘–‘, msg, ‘–‘);
      }
      console.todo(“This is something that’s need to be fixed”);
      console.important(‘This is an important message’);
  6. Quickly access elements in the console
    1. A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the first match of CSS selector. $$(‘css-selector’) will return all of them.
  7. Javascript Debugging With Black Box
    1. – Alt 1. Go to source in the inspector. Right click the file you want to black list and choose black box script.
    2. – Alt 2. Click on the cog to open up the settings view. Click the button “manage framework black boxing”. In the new pop up you can write a regexp as a path. This is great if you for example want to black box the entire vendor folder.
  8. $_
    1. Returns the value of the most recently evaluated expression.
  9. $(selector): Returns reference to the first DOM element with the specified CSS selector.This function is an alias for document.querySelector() function. The following example saves a reference to the first <img> element in the document and calls displays its src property: $(‘img’).src;
  10. $$(selector)
    Returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().
  11. $x(path)
    Returns an array of DOM elements that match the given XPath expression. For example, the following returns all the <p> elements that contain <a> elements:: $x(“//p[a]”)
  12. clear(): Clears the console of its history.
  13. copy(object): Copies a string representation of the specified object to the clipboard.
  14. debug(function): When the function specified is called, the debugger will be invoked and will break inside the function on the Sources panel allowing you to be able to step through the code and debug it.
  15. dir(object): Displays an object-style listing of all the properties of the specified object. This method is an alias for the Console API’s console.dir() method.
  16. getEventListeners(object): Returns the event listeners registered on the specified object.
  17. keys(object)
    Returns an array containing the names of the properties belonging to the specified object.
  18. monitor(function)
    When the function specified is called, a message is logged to the console that indicates the function name along with the arguments that are passed to the function when it was called.
  19. profile([name])
    Starts a JavaScript CPU profiling session with an optional name. To complete the profile call profileEnd().
  20. table(data[, columns])
    Log object data with table by passing in a data object in with optional column headings. For example, to display a list of names using a table in the console you would do:
  21. Write multi-line commands
    When in the console’s multi-line editing mode, you can treat blocks of text as if you were using a standard text editor. Shift + Enter allows you enter multi-line mode in the console.
  22. A shortcut to launch in inspect-element mode
    Ctrl + Shift + C or Cmd + Shift + C will open up DevTools in inspect element mode (or switch focus to it) so you can inspect the current page immediately. Repeating returns focus to the page. On Mac, use Cmd + Shift + C to achieve the same.

Ref:

Egghead Angular Videos Notes

Egghead.io – AngularJS – resolve $routeChangeError – YouTube.mp4
always have a root level controller that takes $rootscope and handles global events like if routing fails, using $routeChangeError

Egghead.io – AngularJS – Route Life Cycle – YouTube.mp4
$routechangeStart -> resolve -> $routechangeSuccess -> new controller

Egghead.io – AngularJS – $index, $event, $log – YouTube.mp4
$index is index in ng-repeat
$event is event in ng-repeat
$log is to log stuff..turn it off in prod using $logprovider.debugEnabled(false)

Egghead.io – AngularJS – Experimental -Controller as- Syntax – YouTube.mp4
this. is the replacement of $scope

Egghead.io – AngularJS – Thinking Differently About Organization – YouTube.mp4
you can group controllers like phoneApp.controllers = {} ; phoneApp.controllers.ctrl1 = function(){}; app.controller(phoneApp.controllers);
Same can be done for Directives but not Filters

Egghead.io – AngularJS – templateUrl – YouTube.mp4
templateUrl is usually external html file, but it needn’t be. Instead u can, in ur index.html, create <script type =”text/ng-template”> … </script> . Note that it should be inside the <div ng-app></div>

Egghead.io – AngularJS – Providers – YouTube.mp4
Factory is just a syntactic sugar on Provider, as Provider’s syntax is longer, but internally Factory is compiled to a $provide.provider, which returns the object in $get. Provider is more flexible though as it can be manipulated using app.config(function(myProvider) {myProvider.setNameValue = “test”});

Egghead.io – AngularJS – Directive Communication – YouTube_2.mp4
inject the controller Ct of any Directive Di into the link function of any other Directive Di2. Note that u also have to require Di in Di2 using this syntax: require: “^Di”.
require can take array of Directives and in that case the last parameter of link function will be array of all controllers
Note, only parent directive can be injected into Child, not the other way round

Egghead.io – AngularJS – Promises – YouTube.mp4
var defer = $q.defer();
defer.promise.then(function(var){ return “pass to next then”}).then(function(var){}); ;
defer.resolve(“pass to first then”);

Egghead.io – AngularJS – Components and Containers – YouTube.mp4
Components are directives where u have attributes taken from the template
Containers are directives that contain Components and position them using transclusion
<panel title=”im a container”>
<clockComponent time=”10pm”>
<clockComponent time=”11pm”>
</panel>

All you have to do is that in panel’s template, :
app.directive(“panel”, function(){
return {
restrict: “E”,
transclude: true,
scope: {
title: “@”
},
template: “<div>{{title}}</div> <div ng-transclude></div> ”
}
})

Egghead.io – Bower – Intro to Bower – YouTube.mp4
bower init // create bower.json file
bower install angular //install angular and add entry to bower.json
bower search angular
bower install //restore all packages from bower.json
NOW, to register your custom js file on gitHub to bower, simply commit the bower.json file to github and then do, > bower register someName http://linkToGitHubRepo
Then anyone can install it using > bower install someName
Egghead.io – AngularJS – redirectTo – YouTube.mp4
$routeprovider.otherwise({
redirectTo: “/”
})
OR
$routeprovider.when(‘/pizza/:crust/:topping’, {
redirectTo: function() {
console.log(path); // when user types
}
})
Egghead.io – AngularJS – Animating with JavaScript – YouTube.mp4
app.animation(“.toggle”, function() { //toggle is a class here
return {
leave: function(element, done) {
TweenMax.fromTo(element, 1, {opacity: 1}, {opacity: 0})
},
enter: function(element, done) {
TweenMax.fromTo(element, 1, {opacity: 0}, {opacity: 1})
}
}
})

Egghead.io – AngularJS – animation basics – YouTube.mp4
1.2 onwards, use CSS for animation. No JS needed at all, but make sure to declare ngAnimate dependency in module def:
.toggle{
transition: linear 1s;
}
.toggle ng-enter{
opacity: 0;
}
.toggle ng-enter-active{
opacity: 1;
}
.toggle ng-leave{
opacity: 1;
}
.toggle ng-leave-active{
opacity: 0;
}
Egghead.io – AngularJS – resolve conventions – YouTube.mp4
resolve is used to resolve stuff when changing route

Egghead.io – AngularJS – Sharing Data Between Controllers – YouTube.mp4
using a factory that u then inject into both controllers

Egghead.io – AngularJS – Directive for Route Handling – YouTube.mp4
basically u can create a <error> directive that can then be used in all views to show the error, in case the routing didn’t work
in error directive, simply listen to $rootscope.$routechangeError and it’s handler, set isError to true, and show it like in alertBox: <div class=”alert-bpx alert” ngShow =”isError”>Error!!!</div>

Egghead.io – AngularJS – ngmin – YouTube.mp4
is used to minify angular code. It mostly just handles injection by converting it to the longhand array syntax

Egghead.io – AngularJS – Unit Testing Hello World – YouTube.mp4
Note that u need to compile the angular code first and then when expecting/asserting, digest the html to get the output

Egghead.io – AngularJS – Injectors – YouTube.mp4
injectors allow providers ie services to be injected.
$injector.invoke() is used to inject stuff like services into the host
there’s 1 injector per module

Egghead.io – AngularJS – Transclusion Basics – YouTube.mp4
yanks the html inside directive into wherever the directive’s template declares ng-transclude

Egghead.io – AngularJS – Intro to Karma – YouTube.mp4
simple karma init and then in files define your jasmine test files and do karma run

Intro to Chrome Dev Tools with AngularJS – YouTube.mp4
select any element and then to get scope: scope = angular.element($0).scope();
Egghead.io – AngularJS – Binding – YouTube.mp4
2 way data binding comes out of the box

Egghead.io – AngularJS – Unit Testing a Directive – YouTube.mp4
if your directive uses isolated scope, using scope: {}, then in jasmine tests, you need to get this using the element.scope property before testing it…

Egghead.io – AngularJS – Defining a Method on the Scope – YouTube.mp4
simply do $scope.myMethod() = function() {}; now u can call it from html

Egghead.io – AngularJS – Testing Scope – YouTube.mp4
Egghead.io – AngularJS – Controllers – YouTube.mp4
its just MVC controller. Don’t put business logic here. Put that in a service

Egghead.io – AngularJS – Testing Underscores – YouTube.mp4
in test cases, use $rootScope while injecting so that $rootScope can then be defined outside $inject function and hence be available everywhere

Egghead.io – AngularJS – The Dot – YouTube.mp4
To keep the scope inheritance intact, use abc.prop in the ng-model, coz if u just use prop, then the child controllers will not get prop and the default scope inherence of angular will not work as expected
Note that $scope is not model, abc here is model. $scope is just a container of the model

Egghead.io – AngularJS – Resolve – YouTube.mp4
to resolve stuff in routing

Egghead.io – AngularJS – No custom markup – YouTube.mp4
there’s a way to replace ng-app with a class=”app” if u want to keep ur HTML clean
but its misleading and so not recommended

Egghead.io – AngularJS – ng-repeat-start – YouTube.mp4
starting in 1.2, ng-repeat can have multiple elements, so use ng-repeat-start and ng-repeat-end to signify the bounds of ng-repeat

Egghead.io – AngularJS – angular.bootstrap – YouTube.mp4
ng-app can be replaced by angular.bootstrap function.

Services in Angular 2

Services in Angular 2 are simply Classes,

These can be injected using “appInjector”

An instance of the svc injected in a component is available to all child components

If any child/other component explicitly adds the svc using “appInjector” again, then it gets a new instance of the svc.

Eg: http://plnkr.co/edit/fltmVw8VWYOOUlOipWZU?p=preview