coderberry

Cheat sheet extracted from https://www.youtube.com/watch?v=2zmUSoVMyRU by That JS Dude.

---

$()

If you pass any of the CSS selectors to $(<identifier>) you get the first element.

> $('a')

getify

In old-school web architecture (pre SPA's), we created a server-side session with an ID, then set a cookie with that session ID, so that each new page-request included the session-ID in it (to resume the session).

In new-school web archicture, where we do SPA's and we ditched cookies in favor of sessionStorage/localStorage, now we've lost a key part of that interaction paradigm: the session-ID can be stored in sessionStorage and used by the SPA to render session-aware pages, and we can even send that session-ID along with any subsequent Ajax/WebSockets messages to the server... BUT we cannot, currently, have that sessionStorage-stored session-ID automatically transmitted with each normal page request.

This means that the initial page-response from the server, even in the case where someone has a valid session, must be session-unaware, and the SPA code on the client side must update the page with session-aware info "later", since the session-ID on the client wasn't provided with the initial HTTP request like

zenorocha

// 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

ebidel

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

• Custom Elements
• HTML Imports
• Shadow DOM
• CSS Scoping Module

getify

// hopefill to wrap the built-in Error.prototype.string() with an improved version
(function(){
    var errToString = Error.prototype.toString;

    Error.prototype.toString = function() {
        var stack;
        // some browsers track the much more useful `.stack`, so use it!
        if (this.stack) {
            // some print the name/message in .stack, some don't. normalize it.
            stack = (this.stack + "").replace(new RegExp(this.name + ": " + this.message + "\n"),"");

paulirish

I wrote this in early January 2012, but never finished it. The research and thinking in this area led to a lot of the design of Yeoman and talks like "Javascript Development Workflow of 2013", "Web Application Development Workflow" and "App development stack for JS developers" (surpisingly little overlap in those talks, btw).

Now it's June 2013 and the state of web app tooling has matured quite a bit. But here's a snapshot of the story from 18 months ago, even if a little ugly and incomplete. :p

---

In the beginning…

• Intro to tooling

unscriptable

The Future of Javascript Modules

John Hann @unscriptable

Who?

• co-founder of cujo.js
• engineer at SpringSource
• javascript barbarian everywhere else as @unscriptable

WebReflection

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

csswizardry

Bringing BEM to inuit.css

BEM is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative.

The naming convention follows this pattern:

.block{}
.block__element{}
.block--modifier{}

jameswomack

Function.prototype.runOnBackgroundThread = function (aCallback) {
  var _blob = new Blob(['onmessage = '+this.toString()],{"type":"text/javascript"});
  var _worker = new Worker((webkitURL.createObjectURL || URL.createObjectURL)(_blob));
  _worker.onmessage = aCallback;
  _worker.postMessage();
}

var _test = function () {
  postMessage((1+1).toString());
}