Skip to content

Instantly share code, notes, and snippets.

@chintamanil
chintamanil / what-forces-layout.md
Created June 14, 2016 19:06 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@chintamanil
chintamanil / FizzBuzz.js
Created March 10, 2016 02:33 — forked from jaysonrowe/FizzBuzz.js
FizzBuzz JavaScript solution
for (var i=1; i <= 20; i++)
{
if (i % 15 == 0)
console.log("FizzBuzz");
else if (i % 3 == 0)
console.log("Fizz");
else if (i % 5 == 0)
console.log("Buzz");
else
console.log(i);
@chintamanil
chintamanil / angular-jqlite.adoc
Created September 30, 2015 22:36 — forked from esfand/angular-jqlite.adoc
Angular jqLite

Angular jqLite

jQuery and Angular

Angular doesn’t depend on jQuery. In fact, the Angular source contains an embedded lightweight alternative: jqLite. Still, when Angular detects the presence of a jQuery version in your page, it uses that full jQuery implementation in lieu of jqLite. One direct way in which this manifests itself is with Angular’s element abstraction. For example, in a directive you get access to the element that the directive applies to:

var fn = function(arg1, arg2) {
var str = '<p>aap ' + this.noot + ' ' + arg1 + ' ' + arg2 + '</p>';
document.body.innerHTML += str;
};
var context = {
'noot': 'noot'
};
var args = ['mies', 'wim'];
// Calls a function with a given 'this' value and arguments provided individually.

Introduction

Author: Ari Lerner.

AngularJS offers a single framework that can be used to build dynamic, client-centric applications. It provides:

  • Module support
  • DOM manipulation
  • Animations
  • Templating