PurpleBooth

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

addyosmani

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

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

addyosmani

What are we trying to observe? Raw object data.

// Objects
var obj = { id: 2 };
obj.id = 3; // obj == { id: 3 }
 
// Arrays
var arr = ['foo', 'bar'];
arr.splice(1, 1, 'baz'); // arr == ['foo', 'baz'];

rvillars

angular-translate with Spring bundles

Synopsis

AngularJS itself doesn't provide any features to translate the texts of your application to different languages and switching the language right on the page. Fornutalty there is now another open-source project called angular-translate that implements the needed functionalities.

AnularJS proposes a technologiy where as much as possible application behevior is exeuted on the client (the browser). So it makes sense to hold translated texts clientside and enrich the static templates with the transalted texts there.

Spring message bundles in the opposite are a collection of serverside key=value files that hold the translated texts each for one language. A well known and widly used pattern.

NV

stopBefore.js

2min screencast

Examples

stopBefore(document, 'getElementById')
stopBefore('document.getElementById') // the same as the previous
stopBefore(Element.prototype, 'removeChild')

addyosmani

/*
    A basic implementation of the Publisher/Subscriber design pattern.
    Developed by @addyosmani and @integralist

    Example Usage:

                    // Create subscriber function to be called when topic publishes an event
                    var testSubscriber = function (topics, data) {
                        console.log(topics + ': ' + data);
                    };

paulirish

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.

Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

christophercurrie

   
@Override
public ServletContainer getJerseyContainer(DropwizardResourceConfig resourceConfig,
                                           MyServiceConfig serviceConfig) {
    // I like having a root module, but you can use as many as you like
    final Injector injector = Guice.createInjector(new MyServiceModule(serviceConfig));

    return new GuiceContainer(injector) {
        @Override
        public ResourceConfig getDefaultResourceConfig(Map<String,Object> props, WebConfig webConfig) {

leostratus

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;