background preloader

ECMA / JavaScript

Facebook Twitter

WatchMeCode.net – Screencasts To Master The Art Of JavaScript. Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! JSDB.io - The Database of JavaScript Libraries.

Prototypes

Extending JavaScript Natives. Most built-in JavaScript types are constructors whose prototypes contain the methods and other properties that define their default behavior: You can’t delete or replace a native prototype, but you can edit the values of its properties, or create new ones: Et voila!

Extending JavaScript Natives

Our code gets a useful array extension for free. However if you brag about doing this in production code, expect to get pummeled by a wave of fierce disapproval. Some of it carries weight. Riot.js — The 1kb client-side MVP framework. Riot.js is a client-side Model-View-Presenter (MVP) library that weighs less than 1kb.

Riot.js — The 1kb client-side MVP framework

Despite the small size, all the building blocks are there: a template engine, router, event library and a strict MVP pattern to keep things organized. On a finished application the views are automatically updated when the underlying model changes. Riot uses Model-View-Presenter (MVP) design pattern to organize your code so that it's modular, testable and easy to understand. Just like in MVC (Model View Controller) or MVVM (Model View ViewModel), the purpose is to separate your application logic from the view, but MVP is simpler. Let's take MVC for comparison: MVC is more complex. MVP, on the other hand, has less room for interpretation. Let's see how MVP works in Riot. Model Riot models define your application. // Enable MVP pattern (this is the secret for everything) riot.observable(self); // save state self.on("add remove edit", function() { store.put(items); }) } The observable.

A Require.js multi-page shimmed site: How-To. I’ve been working with RequireJS a lot lately and found it really improves the way I manage my code.

A Require.js multi-page shimmed site: How-To

I had previous experience with Require in the context of some of my Backbone posts, but I’d never used it on a more traditional multi-page site before. The process of setting up Require on a multi-page site can be pretty confusing, so I thought I would put together this tutorial to help out others who might be stuck. Overview Note: This tutorial assumes you’re already familiar with RequireJS and its configuration options. If not, I recommend you check out the docs before proceeding Grab the Boilerplate When building single-page apps, many people choose to compile all of their JavaScript into one file before deploying to production.

Basics

Modules. Build better web forms with JavaScript. Web forms are the fundamental method of providing data interaction on the web.

Build better web forms with JavaScript

It's frustrating for a user to fill out a form and encounter bad or broken validation - so this tutorial shows you how to build a user-friendly HTML5 web form. Quaid JS is the open source version of an in-house JavaScript validation library, which has been maintained and updated for over a decade. The current version harnesses the best of HTML5 forms and extends the built-in features with easy-to-implement validation rules and user-friendly behaviour.

Getting started Put a few structural elements in place before getting started on the form. Download the source files for this tutorial.

Frameworks

View.json - A decoupled, framework-agnostic minimal view layer. Goals Unobtrusive and simple.

view.json - A decoupled, framework-agnostic minimal view layer

The view layer should not make decisions about the rest of the application. The &yet blog. Quick intro, the hype and awesomeness that is Node Node.js is pretty freakin' awesome, yes.

The &yet blog

But it's also been hyped up more than an Apple gadget.

Brackets

Opentype.js – JavaScript parser for OpenType and TrueType fonts. Getting Started with Handlebars.js. Web apps are using JavaScript to create dynamic interfaces now more than ever before, and that’s not a trend that will change any time soon.

Getting Started with Handlebars.js

DOM manipulation is great for simpler JavaScript apps, but what do you do when you’re changing huge chunks of the document with each change of the view? JavaScript Performance. Last night I spoke at the San Francisco JavaScript Meetup.

JavaScript Performance

I gave a brand new talk called JavaScript Performance that focuses on script loading and async snippets. The snippet example I chose was the Google Analytics async snippet. The script-loading part of that snippet is only six lines, but a lot of thought and testing went into it. It’s a great prototype to use if you’re creating your own async snippet.

I’ll tweet if/when the video of my talk comes out, but in the meantime the slides (Slideshare, pptx) do a good job of relaying the information. There are two new data points from the presentation that I want to call out in this blog post. Impact of JavaScript The presentation starts by suggesting that JavaScript is typically the #1 place to look for making a website faster. I wanted to test the Alexa Top 100 URLs with and without JavaScript. Performance profiling JavaScript. Firebug has a great built in JavaScript performance profiling tool, but it’s not supported in IE and sadly that’s what the bulk of Internet users browse with.

Performance profiling JavaScript

In particular, IE profiling is something of a dark art. There’s not a lot of resource available to profile that I could find that was particularly useful. So I’ve written a library that allows me to drop in performance timing relatively unobtrusively. Download time.js (compressed time.js) See the tests. A suite of Javascript libraries and tools designed for working with HTML5. Recent Updates Follow @CreateJS November 2014 Added Unit Tests to EaselJSUpdates in preparation for new releases (coming soon).

A suite of Javascript libraries and tools designed for working with HTML5

Storing Objects in HTML5 localStorage.

jQuery