среда, 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, 

среда, 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