Skip to content

Instantly share code, notes, and snippets.

View nkabrown's full-sized avatar

Nathan Brown nkabrown

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active May 15, 2024 09:21
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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@paulirish
paulirish / bling.js
Last active May 1, 2024 19:56
bling dot js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@takuma7
takuma7 / opencv-fourcc-on-mac-os-x.md
Last active April 3, 2024 07:29
OpenCV Video Writer on Mac OS X
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@swenson
swenson / gist:cf74cd8e282443b43b8a
Created May 21, 2014 15:51
Google Interview Study Guide
Author unknown.
1.) Algorithm Complexity: You need to know Big-O. If you struggle with
basic big-O complexity analysis, then you are almost guaranteed not to
get hired.
For more information on Algorithms you can visit:
http://www.topcoder.com/tc?module=Static&d1=tutorials&d2=alg_index
2.) Coding: You should know at least one programming language really
well, and it should preferably be C++ or Java. C# is OK too, since
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active May 2, 2024 05:55
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

@lrvick
lrvick / bitcolor.js
Created March 18, 2012 20:02
Javascript functions for doing fast binary/hex/RGB color conversions using bitwise operations.
// convert 0..255 R,G,B values to binary string
RGBToBin = function(r,g,b){
var bin = r << 16 | g << 8 | b;
return (function(h){
return new Array(25-h.length).join("0")+h
})(bin.toString(2))
}
// convert 0..255 R,G,B values to a hexidecimal color string
RGBToHex = function(r,g,b){

#Understanding MVC And MVP (For JavaScript & Backbone Developers)

Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns. Design patterns are proven solutions to common development problems and can suggest structural paradigms to help guide us in adding some organization to our application.

I think patterns are exciting as they're effectively a grass roots effort that build upon the collective experience of skilled developers who have previously faced similar problems as we do now. Although developers 10 or 20 years ago may not have been using the same programming languages for implementing patterns, there are many lessons we can learn from their efforts.

In this section, we're going to review two popular patterns - MVC and MVP. The context of our exploration will be how these patterns are related to the popular JavaScript framework Backbone.js, which will be explored in greater detail later on.