This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
/* | |
You want to use webworkers, but you host all of your js files on a different domain than where | |
your app lives (es. app.example.com and js.example.com). Given that the static file served from | |
js.example.com are CORS ready (in that the response header includes Accept-origin: *), I thought | |
I could load a Worker from other domains. I was almost wrong, but at last I found a solution: | |
XHRing the worker source and create an inline worker. This is tested only on Firefox (latest). | |
*/ | |
// This is an example webworker that is on js.example.com. It just echoes messages it receive. | |
self.onmessage = function(e) { | |
self.postMessage(e.data); |
// from google javascript style guide: | |
// One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a | |
// result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak. | |
// For example, in the following code: | |
// Leaky example | |
function foo (element, a, b) { | |
element.onclick = function() { | |
// uses a and b | |
// this func keeps a pointer to foo, its enclosing scope |
//////////////////////////////////// | |
// | |
// Internet Explorer localStorage polyfill | |
// MIT-style license. Copyright 2012 Matt V. Murphy | |
// | |
//////////////////////////////////// | |
(function(window, document) { | |
"use strict"; | |
var userData, attr, attributes; | |
/** | |
* Add dataset support to elements | |
* No globals, no overriding prototype with non-standard methods, | |
* handles CamelCase properly, attempts to use standard | |
* Object.defineProperty() (and Function bind()) methods, | |
* falls back to native implementation when existing | |
* Inspired by http://code.eligrey.com/html5/dataset/ | |
* (via https://github.com/adalgiso/html5-dataset/blob/master/html5-dataset.js ) | |
* Depends on Function.bind and Object.defineProperty/Object.getOwnPropertyDescriptor (polyfills below) | |
* All code below is Licensed under the X11/MIT License |
function inferInputModel() { | |
if (window.navigator.msPointerEnabled) { | |
return 'pointer'; | |
} else if (window.ontouchstart !== undefined) { | |
return 'touch'; | |
} else { | |
return 'unknown'; | |
} | |
} |
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;
/* ---------------------------------------------------------- */ | |
/* */ | |
/* A media query that captures: */ | |
/* */ | |
/* - Retina iOS devices */ | |
/* - Retina Macs running Safari */ | |
/* - High DPI Windows PCs running IE 8 and above */ | |
/* - Low DPI Windows PCs running IE, zoomed in */ | |
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
/* - Android hdpi devices and above */ |
/* | |
To see a demo of these in use, check out: http://test.getify.com/test-canvas-clear-alt.html | |
Example uses: | |
*/ | |
clearCircle(context,/*x=*/120,/*y=*/80,/*radius=*/60); | |
clearLineSquared(context,/*x1=*/10,/*y1=*/10,/*x2=*/53,/*y2=*/67,/*thickness=*/5); | |
clearLineRounded(context,/*x1=*/15,/*y1=*/100,/*x2=*/90,/*y2=*/170,/*thickness=*/10); |