Skip to content

Instantly share code, notes, and snippets.

@eligrey
eligrey / object-watch.js
Created April 30, 2010 01:38
object.watch polyfill in ES5
/*
* object.watch polyfill
*
* 2012-04-03
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/

#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.

@jboner
jboner / latency.txt
Last active June 29, 2024 19:54
Latency Numbers Every Programmer Should Know
Latency Comparison Numbers (~2012)
----------------------------------
L1 cache reference 0.5 ns
Branch mispredict 5 ns
L2 cache reference 7 ns 14x L1 cache
Mutex lock/unlock 25 ns
Main memory reference 100 ns 20x L2 cache, 200x L1 cache
Compress 1K bytes with Zippy 3,000 ns 3 us
Send 1K bytes over 1 Gbps network 10,000 ns 10 us
Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD
@addyosmani
addyosmani / cranium.js
Last active February 7, 2019 15:02
Cranium
/* Cranium MVC
* A minimalist MVC implementation written for
* demonstration purposes at my workshops
* http://addyosmani.com
* Copyright (c) 2012 Addy Osmani; Licensed MIT */
var Cranium = Cranium || {};
// Set DOM selection utility
@gschema
gschema / intro.md
Last active November 27, 2023 04:35
Basic JavaScript MVC Implementation

Basic JavaScript MVC Implementation

Despite being derived from classical MVC pattern JavaScript and the environment it runs in makes Javascript MVC implementation have its own twists. Lets see how typical web MVC functions and then dive into simple, concrete JavaScript MVC implementation.

How Web MVC typically works

Typical server-side MVC implementation has one MVC stack layered behind the singe point of entry. This single point of entry means that all HTTP requests, e.g. http://www.example.com or http://www.example.com/whichever-page/ etc., are routed, by a server configuration, through one point or, to be bold, one file, e.g. index.php.

At that point, there would be an implementation of Front Controller pattern which analyzes HTTP request (URI at first place) and based on it decides which class (Controller) and its method (Action) are to be invoked as a response to the request (method is name for function and member is name for a variable when part of the class/object).

@dwayne
dwayne / a-modern-frontend-dev.md
Last active March 21, 2021 11:38
Articles, tutorials and tools for modern front-end development.

Problem: What does a Modern Front-End Development Workflow Look Like?

I want to start writing libraries and large applications using the JavaScript language. However, I don't know how to setup the project and which build tools to use. What I do know is that the JavaScript community has moved way beyond using browser developer tool plugins and strategically-placed console.log() statements to debug, test, and build code.

I need help.

Below, I will keep track of articles, tutorials and tools I come across as I search for a way to bring my front-end development chops up-to-date.

The Ultimate Resource

@dypsilon
dypsilon / frontendDevlopmentBookmarks.md
Last active June 13, 2024 10:59
A badass list of frontend development resources I collected over time.
@toolmantim
toolmantim / Makefile
Last active December 5, 2022 23:14
An example of using Make instead of Grunt for fast, simple and maintainable front-end asset compilation.
# A simple Makefile alternative to using Grunt for your static asset compilation
#
## Usage
#
# $ npm install
#
# And then you can run various commands:
#
# $ make # compile files that need compiling
# $ make clean all # remove target files and recompile from scratch
@zenorocha
zenorocha / .hyper.js
Last active November 12, 2023 15:13 — forked from millermedeiros/osx_setup.md
Setup macOS Sierra (10.12)
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 14,
// font family with optional fallbacks