Skip to content

Instantly share code, notes, and snippets.

View jdrew1303's full-sized avatar
probably drinking coffee

James Drew jdrew1303

probably drinking coffee
View GitHub Profile
@jdrew1303
jdrew1303 / memoize.js
Last active August 29, 2015 14:22 — forked from addyosmani/memoize.js
/*
* memoize.js
* by @philogb and @addyosmani
* further optimizations by @mathias
* Released under an MIT license.
*/
function memoize( fn ) {
return function () {
var args = Array.prototype.slice.call(arguments),
hash = "",

#Lessons From A JavaScript Code Review

I was recently asked to review some code for a new JavaScript application and thought I might share some of the feedback I provided as it includes a mention of JavaScript fundamentals that are always useful to bear in mind. Code reviews are possibly the single biggest thing you can do to improve the overall quality of your solutions and if you're not actively taking advantage of them, you're possibly missing out on bugs you haven't noticed being found or suggestions for improvements that could make your code better.

##Challenges & Solutions

Code reviews go hand-in-hand with maintaining strong coding standards. That said, standards don't usually prevent logical errors or misunderstandings about the quirks of a programming language. Even the most experienced developers can make these kinds of mistakes and code reviews can greatly assist with catching them.

Often the most challenging part of code reviews is actually finding an experienced developer you trust to complete

// matchMedia is supported and the device has a small screen
if ( "matchMedia" in window
&& window.matchMedia( "(max-device-width: 800px)" )
) {
Array.prototype.forEach.call(
// for each element matching the selector...
document.querySelectorAll(
"a[href*='youtube.com/watch'], a[href*='flickr.com']"
),
// ...replace the href with their mobile equivalent
@jdrew1303
jdrew1303 / README.md
Last active August 29, 2015 14:22 — forked from addyosmani/README.md

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

The Mediator pattern enables communication (mediation) between views using a mediator object.In the latest version of Backbone, the Backbone object itself can be used as a mediator without the need of a seperate helper.

In the following example, triggerSomething in our ToolbarView uses the global event-bus on the Backbone object to broadcast an application wide event somethingHappened with data.

// First view
var ToolbarView = Backbone.View.extend({
  className: ".toolbar",
  events: {
    "click .button":   "triggerSomething"
@jdrew1303
jdrew1303 / deps.md
Last active August 29, 2015 14:22 — forked from addyosmani/deps.md

Dependencies

The official Backbone.js documentation states:

Backbone's only hard dependency is Underscore.js ( > 1.3.1). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( > 1.4.2) or Zepto.

Lo-dash, a fork of Underscore containing performance enhancements is also compatible with Backbone.

What this translates to is that if you require working with anything beyond models, you will need to include a DOM manipulation library such as jQuery or Zepto. Underscore is primarily used for it's utility methods (which Backbone relies upon heaviy) and json2.js for legacy browser JSON support if Backbone.sync is used.

@jdrew1303
jdrew1303 / notes.md
Last active August 29, 2015 14:22 — forked from addyosmani/notes.md

(rough-cut for Backbone Fundamentals)

Better Model Property Validation On Set/Save

As we learned earlier in the book, the validate method on a Model is called before set and save, and is passed the model attributes updated with the values from these methods.

By default, where we define a custom validate method, Backbone passes all of a Model's attributes through this validation each time, regardless of which model attributes are being set.

This means that it can be a challenge to determine which specific fields are being set or validated without being concerned about the others that aren't being set at the same time.

var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
var ChatConstants = require('../constants/ChatConstants');
var ChatMessageUtils = require('../utils/ChatMessageUtils');
var EventEmitter = require('events').EventEmitter;
var ThreadStore = require('../stores/ThreadStore');
var merge = require('react/lib/merge');
var ActionTypes = ChatConstants.ActionTypes;
var CHANGE_EVENT = 'change';
@jdrew1303
jdrew1303 / introrx.md
Last active August 29, 2015 14:22 — forked from staltz/introrx.md

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called Reactive Programming, particularly its variant comprising of Rx, Bacon.js, RAC, and others.

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

//Recursive fibonacci
var fib_recur = function (n) {
if (n == 0) return 0 ;
if (n == 1) return 1 ;
return fib_recur(n-1) + fib_recur(n-2) ;
} ;
//Recursive fibonacci with memoization (but without the Y-Combinator)
var fibonacci = (function ( ) {
var memo = [0, 1];