Skip to content

Instantly share code, notes, and snippets.

View basecode's full-sized avatar

Tobi Reiss basecode

28 followers · 4 following
  • Adobe
  • Basel
View GitHub Profile
@basecode
basecode / climate-audio.js
Created November 6, 2014 19:53
var tessel = require('tessel');
var audio = require('audio-vs1053b').use(tessel.port['A']);
var climate = require('climate-si7020').use(tessel.port['B']);
var chunks = [];
// When we get data, push it into our array
audio.on('data', function(data) {
chunks.push(data);
});
@basecode
basecode / bookmarks.md
Last active August 29, 2015 14:03
WebVTT
@basecode
basecode / dom-adapter-mock.js
Last active August 29, 2015 14:01
Abstract DOM
// Mock mainly exposes empty functions
return function() {
return {
createElement: function() {}
};
};
@basecode
basecode / custom.css
Last active August 29, 2015 14:00
GitX: diff custom css (forked from https://github.com/rowanj/gitx/blob/master/html/css/diff.css)
/*
$ cd /Applications/GitX.app/Contents/Resources/html/css/
$ open diff.css
*/
.diff .file {
margin: 10px;
line-height: 1.5em;
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: 12px;
@basecode
basecode / 7-things-react.md
Last active January 2, 2016 13:59
7 things I learned from React sourcecode. Website: http://facebook.github.io/react

It's all about Components.

  • Components can be created at runtime via createClass
  • Stringified and parsed
  • Existing DOM can be parsed via a "mount" algorithm.

DOM changes

  • React is event based and not "frame" based. It's not using a timer. DOM changes are cached until all events are done and flushed at once.
  • setState triggers DOM changes explicitly
@basecode
basecode / rAF.js
Last active January 1, 2016 23:38 — forked from paulirish/rAF.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@basecode
basecode / di_requirejs.js
Last active December 31, 2015 20:09
Dependency injection using RequireJS. I don't like it!
// EntryPoint.js
define(function () {
return function EntryPoint(require) {
this.modul1 = new require("./Model1");
this.model2 = new require("./Model2");
};
});
// Model1.js
define(function () {
@basecode
basecode / dom_renderer.md
Last active December 26, 2015 10:09
DOM Renderer

A quick draft of a "layered based" DOM renderer.

Why Layers?

A Layer, also referred to as "Stacking Context", describes a group of DisplayObjects that can be flattened and combined to one "Context". Why does that matter? Chances are supposed to be higher that continuous attribute changes due to animations can be applied much faster on a Layer that can potentially managed by GPU than on all children individually managed by GPU or even CPU. Especially when considering a frame-budget of only 16ms. Which means the animation could run at 60FPS.

When to create a Layer?

@basecode
basecode / debug_html_media_element.js
Last active December 21, 2015 08:49
Debug HTMLMediaElement
/**
* log events and properties
* from http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html
*/
(function(media) {
if (media instanceof HTMLMediaElement) {
console.log('Found', media);
} else {
console.log('Media not found');
}
@basecode
basecode / css-animation-off-ui-thread.html
Last active December 15, 2015 17:49
CSS animations off the UI thread
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>CSS animations</title>
<style>
.spin {
-webkit-animation: 3s rotate linear infinite;
animation: 3s rotate linear infinite;
background: red;