Monday, December 15, 2014

several points on Angular JS usage

Just things in random order, I've came across last days.

Thursday, November 20, 2014

Webdev workflow schema

  • http://yeoman.io/ and install npm install -g yo
  • http://bower.io/ and install npm install -g bower
  • http://gruntjs.com/ and install npm install -g grunt-cli

Sunday, November 9, 2014

more AngularJS details

AngularJS scope and watch

1) $scope.$watch(VAR, CALLBACK)
2) $scope.$apply() - notify about changes
3) AngularJS scopes are organized in a tree structure and a scope can access its ancestor’s variables. Well, this means that $digest() needs to happen on every child scope in every iteration! Internally, this code is a bit messy in AngularJS, but each iteration of the $digest() loop does a depth-first search and performs the watcher check on every child scope. If any child scope is dirty, the loop has to run again!
4) UI is blocked while $digest() is running
5) angular.equals(A, B) - internal angular function for comparing

Wednesday, November 5, 2014

services and factories in angular explained

Compilation of very-very useful explanations for beginners what are services and factories and what are their key useful details. Credentials go mostly to stackoverflow.com threads.

Keep in mind all providers in AngularJS ( = value, constant, services, factories) are singletons !

If you want your function to be called like a normal function, use factory. If you want your function to be instantiated with the new operator, use service. If you don't know the difference, use factory.

Wednesday, September 10, 2014

REST APIs documentation tools

Good article about the topic: Automated Documentation for REST APIs

i/o docs
https://github.com/mashery/iodocs
runs on Node.js, needs Reddis, express, jade and some connectors

Swagger
http://swagger.io/https://github.com/wordnik/swagger-ui
the whole toolbox for creating/documenting REST services

JSON Doc
http://jsondoc.org/getting-started.html

..
and there are several more.

lodash (Lo-Dash) and its performance

Lo-Dash is a js library with loooong list of utility methods, originally forked from Underscore.js and now super-optimized for high productivity.

Also see a nice talk about approaches towards performance in JS by John-David Dalton the creator of lodash lib:

Way to stop page load and rendering using javascript

window.stop(); //works in all browsers but IE    
if (IE) {document.execCommand("Stop");}; //works in IE, 

Wednesday, August 20, 2014

icons in pseudo-element ::before ::after content


With CSS3 you can use content property of any pseudo-element, like ::before or ::after. By utilizing this property you can easily implement basic icons for you HTML-markup.
There are in total 18+ icons and symbols available out of the box!


Using this in DOM elements selectors

The word this in JavaScript has a several meaning depending on a contest of a function call. But also in DOM-manipulations this can invoke useful properties of element if used properly. Below is the list of 15 cases how this can be used for DOM manipulations with all tags, inputs/selects and specifically interesting with parts of HREF attribute of <a> tag.

choosing native javascript vs jquery - links


At some point every front end developer comes to thought that in some cases using native JS can be preferential to jQuery due to performance overhead. Below is the list of articles I've recently came across that cover this topic.

How to retrieve position X,Y of html element

How to define in what exactly position (X,Y) is the DOM element on page?
For example you have svg-area on your page and you need to adjust events on it, or 

1) For mouse events you can use event.clientX and event.clientY properties

2) When you use jQuery you can call position() method which will return object with 2 properties:

var position  = $(elem).position();
//position.left, position.top

3)  But if you have to make it in pure javascript you should use getBoundingClientRect() method on your DOM-element. It works like this:

var rect = document.getElementsById('svg').getBoundingClientRect();
//rect.top, rect.right, rect.bottom, rect.left

Monday, August 11, 2014

3 interesting details of jQuery functionality

1) $.makeArray - for handling Array-like objects in JS like nodeList and arguments
usually is't workaround by this
[].forEach.call(list, function() {...});

but one can also use:
$.makeArray(list).forEach(function() {...});
2) function attr can do more - removing attribute as well
it meas that
attr('xxx') -> removeAttr('xxx')

or you can have such a nice construction
$(selector).attr(anAttr, condition ? value : null);

3) jQuery.type() instead of typeof

Friday, January 31, 2014

phone links color on iOS broser - iPad/iPhone



Among a variety of CSS attribute selectors some behave specifically when viewing form mobile device. This occasionally happens for iOS devices - the phone number starts looking like a link.

Thursday, January 30, 2014

Сравнение носимых часов AGENT Watches vs Metawatch vs Toq Smartwatch vs COOCKOO Watch

Сравнение описаний 4х моделей умных часов или носимых смартфонов. В списке отсутствует самый популярный на сегодня Pebble Watch (доступно для заказа, $250), но зато есть: AGENT Watches, Meta watch, Toq Smartwatch, COOCKOO Watch. 
Информация которую удалось собрать на сайтах производителей и в техно-блогах.