xl1

# convert .obj file to JSON

try:
  import json
except ImportError:
  import simplejson as json


class ModelData:
  def __init__(self):

xl1

class window.WebCam
  constructor: ->
    @video = document.createElement('video')

  init: (playCallback, failCallback) ->
    userMedia = navigator.getUserMedia or navigator.webkitGetUserMedia
    if not userMedia
      return failCallback?()

    @video.addEventListener('canplay', => @video.play())

xl1

CSS でドラッグをきめる

これは CSS Programming Advent Calendar 2012 の 7 日目の記事です。

CSS プログラミングの基本は、「ユーザの操作をなんとかして受け取ってスタイルをあてる」ということの繰り返しです。 クリックの検出に :checked や :active, mouseover なら :hover を使う……とやるわけですね。 ならば次は「ドラッグ」も検出したいところです。

それ CSS でできるよ！

xl1

precision mediump float;
uniform vec2 u_textureSize;

void main(){
  float x = u_textureSize.x - 50.0;
  gl_FragColor = vec4(x / 250.0, 0.0, 0.0, 1.0);
}

xl1

@import "util.scss";

$sticky-area: 100%;
@mixin use-stickers($height){
  $sticky-area: $height;
  body {
    margin: 0;
    height: $height;
    overflow-x: hidden;
  }

xl1

CSS でペライチ

これは CSS Programming Advent Calendar 2012 の 14 日目の記事です。

Sticky Positioning

8 月の末に、WebKit に position: sticky というプロパティが追加されました。 position: sticky が指定された要素は、親要素との位置関係によって、position: fixed または position: relative が指定されたかのように振る舞います。 例えば、ある程度スクロールするとサイドバーやナビゲーションが固定されるサイトをたまに見かけますが（例えば Togetter, LESS のサイト, etc.）その動作が CSS で指定できるようになったわけです。 HTML5Rocks に詳しい解説があるので、「ただしい」使用法についてはそちらを参照してください。

xl1

CSS で切る・貼る・コピーする

これは CSS Programming Advent Calendar 2012 の 18 日目の記事です。

現在、いくつかのブラウザベンダーから新しい CSS の機能が提案・実装されており、CSS で今までにできなかった表現も可能になってきています。 例えば、Firefox や Chrome では、要素を自由に切ったり貼ったりできるようになりました。

element() function

Firefox 4 以上では、要素を画像として取得する element() 関数 が実装されています。

xl1

CSS でフォームの値を読む

これは CSS Programming Advent Calendar 2012 の 21 日目の記事です。がすでに 22 日になってしまいました。ごめんなさい。

7 日目の記事（ドラッグをキメる） で、input 要素の value の値は「CSS で検知できない」と書きましたが、嘘です。ごめんなさい。

それ実は CSS でできるよ！

Client-Side Form Validation の仕組みを無理やり使います。 input の pattern 属性と :valid, :invalid 疑似クラスで、特定の文字列のみに反応してスタイルを適用できます。

xl1

$color-base: #eee !default;

$color-border: darken($color-base, 50%);
$color-border-light: lighten($color-border, 30%);
$color-button: $color-base;
$color-button-hover: darken($color-button, 5%);
$color-button-push: darken($color-button, 15%);
$color-button-text: darken($color-base, 60%);

$check-size: 20px;

xl1

{ IF, ELSE } = Retention

get = (url) ->
  r = new Retention()
  xhr = new XMLHttpRequest()
  xhr.open 'GET', url, true
  xhr.onload = -> r.resolve xhr.responseText
  xhr.onerror = -> r.reject xhr.statusText
  xhr.send()
  r