RubyGems - pleeease - Versions diffs - 0.0.2 - Mend

@@ -0,0 +1,562 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+	<title>One-color.js - JS color manipulation made easy</title>
+	<link href="../3rdparty/CSSS/slideshow.css" rel="stylesheet" />
+	<link href="../3rdparty/CSSS/theme.css" rel="stylesheet" />
+	<link href="talk.css" rel="stylesheet" />
+    <link type="text/css" rel="stylesheet" href="colorcat/css/demo.css">
+    <link type="text/css" rel="stylesheet" href="colorcat/css/colorcat.css">
+</head>
+<body data-duration="30">
+<section title="Introduction">
+    <header id="intro" class="slide">
+	    <h1>One-color.js</h1>
+	    <h2>JS colors made easy</h2>
+	    <p class="attribution">Peter Müller, Web developer @onecom</p>
+    </header>
+	<header class="slide">
+		<h1>Introduction</h1>
+		<ul class="presenter-notes">
+            <li>One.com, shared hosting webspaces</li>
+            <li>8 frontend webdevs adding value to product</li>
+            <li>Webmail, Abook, Calendar, Filemanager, Blog, Gallery, Webcreator etc...</li>
+            <li>All partially or completely JS → Huge toolchain → Modular libs</li>
+		</ul>
+	</header>
+</section>
+<section title="Applications">
+	<section class="slide">
+		<h2>Why do we need it?</h2>
+	    <img class="delayed" src="images/blog.png">
+	    <ul class="presenter-notes">
+	        <li>Administration for blog, gallery etc</li>
+	        <li>User choice</li>
+	        <li>Webpages should look different than the other customers's</li>
+	    </ul>
+	</section>
+	<section class="slide">
+		<h2>Why do we need it?</h2>
+	    <img src="images/calendar.png">
+	    <ul class="presenter-notes">
+	        <li>Alternate colors hues</li>
+	        <li>Color variants based on a user choice</li>
+	        <li>Text legibility on random background color</li>
+	    </ul>
+	</section>
+	<section class="slide">
+		<h2>?</h2>
+		<ul class="presenter-notes">
+		    <li>Custom color picker components</li>
+		    <li>Automatic colorization of maps etc</li>
+		    <li>Animation</li>
+		    <li>Canvas manipulation</li>
+		</ul>
+	</section>
+</section>
+<section title="Getting to know the domain">
+    <header class="slide">
+        <h1>But first...</h1>
+        <p class="presenter-notes">
+            A little domain knowledge
+        </p>
+    </header>
+    <section class="slide">
+        <h2>Displays</h2>
+        <img src="images/Pixels.jpg">
+    </section>
+    <section class="slide">
+        <h2>RGB</h2>
+        <img class="delayed" src="images/RGB.png">
+    </section>
+    <section class="slide">
+        <h2>HSV</h2>
+        <img class="delayed" src="images/HSV.png">
+        <ul class="presenter-notes">
+            <li>Hue: 360 degrees pure color</li>
+            <li>Saturation: colorfullness</li>
+            <li>Value: amount of light</li>
+            <li>More intuitive than RGB</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>HSL</h2>
+        <img class="delayed" src="images/HSL.png">
+        <ul class="presenter-notes">
+            <li>Lightness vs value</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <img src="images/RGB_HSL_HSV_comparison.png" style="margin-top: 180px;">
+        <ul class="presenter-notes">
+            <li>Conversion to RGB looses information</li>
+            <li>Uniquely defined in RGB</li>
+            <li>White and black ambiguous in HSV, HSL</li>
+            <li>Bonusinfo: There are a lot more color spaces</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>CSS syntaxes</h2>
+        <ul class="nofade">
+            <li class="delayed"><code>#123456</code></li>
+            <li class="delayed"><code>rgb (100, 100, 100)</code></li>
+            <li class="delayed"><code>rgba(100, 100, 100, 0.5)</code></li>
+            <li class="delayed"><code>hsl (100, 100, 100)</code></li>
+            <li class="delayed"><code>hsla(100, 100, 100, 0.5)</code></li>
+        </ul>
+    </section>
+    <footer class="slide">
+        <h1>No Javascript syntax <span class="delayed">:'(</span></h1>
+    </footer>
+</section>
+<section title="Lets find a library">
+    <section class="slide">
+        <h2>Specifications</h2>
+        <ul>
+            <li class="good delayed">RGB, HSL and HSV</li>
+            <li class="good delayed">Colorspace conversions</li>
+            <li class="good delayed">A 'datatype'</li>
+            <li class="good delayed">Pluggable architecture</li>
+            <li class="good delayed">Chainable modifiers</li>
+            <li class="good delayed">SMALL!</li>
+        </ul>
+    </section>
+	<section class="slide">
+	    <h2>Options</h2>
+	    <ul>
+	        <li class="delayed">Ext JS</li>
+	        <li class="delayed">Micro library</li>
+	        <li class="delayed">Roll your own</li>
+	    </ul>
+	</section>
+    <section class="slide">
+        <h2>Ext JS</h2>
+        <img class="delayed" src="images/ExtJS.png">
+        <ul>
+            <li class="bad delayed">Seriously?</li>
+        </ul>
+        <ul class="presenter-notes">
+            <li class="bad">Representation: Hex-string</li>
+            <li class="bad">Color spaces</li>
+            <li class="bad">Color conversion</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>Micro library</h2>
+        <ul>
+            <li class="good delayed">Lots to choose from</li>
+            <li class="bad delayed">Lots to choose from!</li>
+            <li class="good delayed">Math is well documented</li>
+            <li class="bad delayed">Architecture is difficult</li>
+        </ul>
+    </section>
+    <section title="Microlib examples">
+        <section class="slide">
+            <h2>Lack of data model</h2>
+            <ul>
+                <li class="bad delayed"><code>"#000000"</code></li>
+                <li class="bad delayed"><code>[0, 0, 0]</code></li>
+                <li class="bad delayed"><code>{ R: <span style="color: #FAA">0</span>, G: <span style="color: #AFA">0</span>, B: <span style="color: #AAF">0</span> }</code></li>
+                <li class="good delayed"><code>{ space: 'rgb', R: <span style="color: #FAA">0</span>, G: <span style="color: #AFA">0</span>, B: <span style="color: #AAF">0</span> }</code></li>
+            </ul>
+        </section>
+        <section class="slide conversion">
+            <h2>Conversion methods</h2>
+            <ul class="delayed">
+                <li><code>fromHexToRGB()</code></li>
+                <li><code>fromRGBToHex()</code></li>
+            </ul>
+            <ul class="delayed">
+                <li><code>fromHexToHSV()</code></li>
+                <li><code>fromRGBToHSV()</code></li>
+                <li><code>fromHSVToHex()</code></li>
+                <li><code>fromHSVToRGB()</code></li>
+            </ul>
+            <ul class="delayed">
+                <li><code>fromHexToHSL()</code></li>
+                <li><code>fromRGBToHSL()</code></li>
+                <li><code>fromHSVToHSL()</code></li>
+                <li><code>fromHSLToHex()</code></li>
+                <li><code>fromHSLToRGB()</code></li>
+                <li><code>fromHSLToHSV()</code></li>
+            </ul>
+            <img class="delayed" id="conversion" src="images/PullingHair.png">
+            <ul class="presenter-notes">
+                <li>RGB and HEX. Simple</li>
+                <li>Lets add HSV</li>
+                <li>Now HSL... You see where this is going</li>
+                <li>Lots of methods, lots of bytes, lots of mental maintenance</li>
+            </ul>
+        </section>
+        <section class="slide">
+            <h2>Chained modifiers</h2>
+            <ul>
+                <li class="delayed">Object with conversion methods</li>
+                <li class="delayed">Object with channel modifier methods</li>
+            </ul>
+        </section>
+        <section class="slide" id="reps">
+            <h2>Color representation</h2>
+            <ul class="delayed">
+                <li>Red: [0;255]</li>
+                <li>Green: [0;255]</li>
+                <li>Blue: [0;255]</li>
+            </ul>
+            <ul class="delayed">
+                <li>Hue: [0;360]</li>
+                <li>Saturation: [0;100]</li>
+                <li>Value: [0;100]</li>
+                <li>Lightness: [0;100]</li>
+            </ul>
+            <p class="delayed">Color math: [0;1]</p>
+            <ul class="presenter-notes">
+                <li>RGB: Integers</li>
+                <li>HSL/HSVL: Floating point? Browsers don't get it</li>
+                <li>Math: Infinetly precise → Aproximate by using floating point</li>
+                <li>Other libs only think one conversion at a time</li>
+            </ul>
+        </section>
+        <section class="slide">
+            <h2>And the winner is...</h2>
+            <ul>
+                <li class="bad delayed">None :(</li>
+            </ul>
+            <p class="delayed">... but take a look at <a href="https://github.com/harthur/color">https://github.com/harthur/color</a>, lots of good ideas!</p>
+        </section>
+    </section>
+</section>
+<section>
+    <header class="slide">
+        <h1>One-color.js</h1>
+    </header>
+    <section class="slide" id="specs">
+        <h2>Specifications</h2>
+        <ul>
+            <li class="good">RGB, HSL and HSV</li>
+            <li class="good">Colorspace conversions</li>
+            <li class="good">A 'datatype'</li>
+            <li class="good">Pluggable architecture</li>
+            <li class="good">Chainable modifiers</li>
+            <li class="good">SMALL!</li>
+        </ul>
+        <ul class="nofade">
+            <li class="good delayed">Parse once</li>
+            <li class="good delayed">Round once</li>
+            <li class="good delayed">Avoid loss of precision</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>Base</h2>
+        <pre>one.color = { <span class="comment">// General namespace for One.com libs</span>
+    <span class="delayed">color = function( <span class="delayed">one.color.*</span> <span class="delayed">| Array</span> <span class="delayed">| String</span> <span class="delayed">| Int</span> ), <span class="comment">// Parser</span></span>
+};
+<span class="delayed">one.color.installColorSpace: function ( <span class="delayed">str space</span><span class="delayed">, [str channelNames]</span><span class="delayed">, obj methods</span> )</span>
+<span class="delayed">one.color.installColorSpace("RGB", "<span style="color: #FAA">Red</span>", "<span style="color: #AFA">Green</span>", "<span style="color: #AAF">Blue</span>", "Alpha", {...});</pre>
+        <pre class="delayed">one.color.RGB  = function ( <span style="color: #FAA">[0;1]</span>, <span style="color: #AFA">[0;1]</span>, <span style="color: #AAF">[0;1]</span>, [0;1] ) <span class="comment">// Constructor</span></pre>
+        <p class="delayed">And with plugins:</p>
+        <pre class="delayed">one.color.HSV  = function ( [0;1], [0;1], [0;1], [0;1] ) <span class="comment">// Constructor</span></pre>
+        <pre class="delayed">one.color.HSL  = function ( [0;1], [0;1], [0;1], [0;1] ) <span class="comment">// Constructor</span></pre>
+        <pre class="delayed">one.color.CMYK = function ( [0;1], [0;1], [0;1], [0;1] ) <span class="comment">// Constructor</span></pre>
+    <ul class="presenter-notes">
+        <li>This is the new API</li>
+        <li>Array: toJSON and back!</li>
+        <li>String: Hex, RGB, HSL, HSV</li>
+        <li>Notice the normalization to [0;1]</li>
+    </section>
+    <section class="slide">
+        <h2>installColorSpace</h2>
+        <p>Metaprogramming FTW!</p>
+        <p class="delayed">Methods added to all installed one.color.* prototypes:</p>
+        <ul class="nofade">
+            <li class="delayed"><code>toString()                   → "[one.color.RGB: Red=0 Green=0 Blue=0 Alpha=1]"</code></li>
+            <li class="delayed"><code>hex()                        → "#<span style="color: #FAA">RR</span><span style="color: #AFA">GG</span><span style="color: #AAF">BB</span>"</code></li>
+            <li class="delayed"><code>css()                        → "rgb(<span style="color: #FAA">[0;255]</span>, <span style="color: #AFA">[0;255]</span>, <span style="color: #AAF">[0;255]</span>)"</code></li>
+            <li class="delayed"><code>cssa()                       → "rgb(<span style="color: #FAA">[0;255]</span>, <span style="color: #AFA">[0;255]</span>, <span style="color: #AAF">[0;255]</span>, [0;1])"</code></li>
+            <li class="delayed"><code>toJSON()                     → ["RGB", <span style="color: #FAA">[0;1]</span>, <span style="color: #AFA">[0;1]</span>, <span style="color: #AAF">[0;1]</span>, [0;1]]</code></li>
+            <li class="delayed"><code>equals(otherColor, ε = 10<sup>-9</sup>) → Boolean</code></li>
+            <li class="delayed"><code>[colorSpace]                 → one.color[colorSpace]</code></li>
+            <li class="delayed"><code>[channelName]                → Number [0;1]</code></li>
+            <li class="delayed"><code>[channelName]([0;1])         → new one.color[colorSpace], channelName =  [0;1]</code></li>
+            <li class="delayed"><code>[channelName](±[0;1], true)  → new one.color[colorSpace], channelName ±= [0;1]</code></li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>installColorSpace</h2>
+        <p>How to write a colorSpace plugin</p>
+        <pre>one.color.installColorSpace('<span class="delayed">HSV</span>', [<span class="delayed">'Hue'</span><span class="delayed">, 'Saturation'</span><span class="delayed">, 'Value'</span><span class="delayed">, 'Alpha'</span>], {
+    <span class="delayed">fromRgb: function () { // Becomes one.color.RGB.prototype.toHSV
+        <span class="comment">// SNIP! Colormath is boring, lets go shopping!</span>
+        return new one.color.HSV(h, s, v, this.alpha);
+    },</span>
+    <span class="delayed">rgb: function () {
+        <span class="comment">// SNIP! Colormath... Go read wikipedia</span>
+        return new one.color.RGB(r, g, b, this.alpha);
+    },</span>
+    <span class="delayed">hsl: function () {
+        <span class="comment">// SNIP! Colormath... Just copy/paste from someone else</span>
+        return new one.color.HSL(this.h, s, l, this.alpha);
+    }</span>
+});</pre>
+    </section>
+    <section class="slide">
+        <h2>API usage</h2>
+        <p>Color space conversions</p>
+        <pre class="delayed">one.color("<span style="color: #99FFFF">#99FFFF</span>")<span class="delayed">
+    .hsv()</span><span class="delayed">
+    .hsl()</span><span class="delayed">
+    .cmyk()</span><span class="delayed">
+    .hex();</span><span class="delayed"> → "<span style="color: #99FFFF">#99FFFF</span>"</span></pre>
+        <p class="delayed">Conversions are implicit, why bother...</p>
+    </section>
+    <section class="slide">
+        <h2>API usage</h2>
+        <p>Channel manipulation methods</p>
+        <pre class="delayed">one.color("<span style="color: #99FFFF">#99FFFF</span>")<span class="delayed">
+    .red(0.5)</span><span class="delayed">
+    .hue(-0.2, true)</span><span class="delayed">
+    .magenta(0)</span><span class="delayed">
+    .hex();</span><span class="delayed"> → "<span style="color: #99ff80">#99ff80</span>"</span></pre>
+    </section>
+    <section class="slide">
+        <h2>Future possibilities</h2>
+        <ul>
+            <li class="delayed">More color spaces</li>
+            <li class="delayed">Text contrast method</li>
+            <li class="delayed">Intuitive adjustment methods</li>
+            <li class="delayed">Photoshop blending modes</li>
+            <li class="delayed">To/from canvas array</li>
+            <li class="delayed">Color picker components</li>
+        </ul>
+    </section>
+    <section class="slide">
+        <h2>FAQ</h2>
+        <p>Based on the rewritten API version on the 'newapi' branch</p>
+        <ul>
+            <li class="delayed">File size: <a href="https://raw.github.com/One-com/one-color/master/one-color.js">5.4k minified, </a></li>
+            <li class="delayed">License: <a href="https://raw.github.com/One-com/one-color/master/LICENSE">3 clause BSD</a></li>
+            <li class="delayed">Works in any browser</li>
+            <li class="delayed">Works in NodeJS</li>
+            <li class="delayed">Github: <a href="https://github.com/One-com/one-color">https://github.com/One-com/one-color</a></li>
+        </ul>
+    </section>
+</section>
+<section>
+    <header class="slide">
+        <h1>DEMOTIME!</h1>
+    </header>
+    <section class="slide colorcat">
+        <div id="colorCat">
+            <div id="mainContainer">
+                <div id="nyanCat">
+                    <div id="wholeHead">
+                        <div class="skin ear"></div>
+                        <div class="skin ear rightEar"></div>
+                        <div id="mainHead" class="skin">
+                            <div class="eye"></div>
+                            <div class="eye rightEye"></div>
+                            <div class="nose"></div>
+                            <div class="chick"></div>
+                            <div class="chick rightChick"></div>
+                            <div class="mouth">E</div>
+                        </div>
+                    </div>
+                    <div id="toastBody">
+                        <div>&nbsp;  &nbsp; &nbsp;.&nbsp;&nbsp;.&nbsp; &nbsp; &nbsp;..&nbsp;  &nbsp; &nbsp;.&nbsp;.&nbsp; &nbsp; &nbsp;&nbsp&nbsp&nbsp;..&nbsp;  &nbsp; &nbsp;.&nbsp;&nbsp;.</div>
+                    </div>
+                    <div id="wholeTail">
+                        <div class="tail skin"></div>
+                        <div class="tail middleTail skin"></div>
+                        <div class="tail backTail skin"></div>
+                    </div>
+                    <div id="allYourLegAreBelongToUs">
+                        <div class="skin leg back leftBack"></div>
+                        <div class="skin leg back"></div>
+                        <div class="skin leg front leftFront"></div>
+                        <div class="skin leg front"></div>
+                    </div>
+                    <div class="rainbow"></div>
+                    <div class="rainbow r2"></div>
+                    <div class="rainbow r3"></div>
+                    <div class="rainbow r4"></div>
+                </div>
+                <div class="star starMovement1">
+                    <div number="1"></div>
+                    <div number="2"></div>
+                    <div number="3"></div>
+                    <div number="4"></div>
+                    <div number="5"></div>
+                    <div number="6"></div>
+                    <div number="7"></div>
+                    <div number="8"></div>
+                </div>
+                <div class="star starMovement2 backwards">
+                    <div number="1"></div>
+                    <div number="2"></div>
+                    <div number="3"></div>
+                    <div number="4"></div>
+                    <div number="5"></div>
+                    <div number="6"></div>
+                    <div number="7"></div>
+                    <div number="8"></div>
+                </div>
+                <div class="star starMovement3">
+                    <div number="1"></div>
+                    <div number="2"></div>
+                    <div number="3"></div>
+                    <div number="4"></div>
+                    <div number="5"></div>
+                    <div number="6"></div>
+                    <div number="7"></div>
+                    <div number="8"></div>
+                </div>
+               <div class="star starMovement4">
+                    <div number="1"></div>
+                    <div number="2"></div>
+                    <div number="3"></div>
+                    <div number="4"></div>
+                    <div number="5"></div>
+                    <div number="6"></div>
+                    <div number="7"></div>
+                    <div number="8"></div>
+                </div>
+                <div class="star starMovement5">
+                    <div number="1"></div>
+                    <div number="2"></div>
+                    <div number="3"></div>
+                    <div number="4"></div>
+                    <div number="5"></div>
+                    <div number="6"></div>
+                    <div number="7"></div>
+                    <div number="8"></div>
+                </div>
+            </div>
+        </div>
+        <form id="sliders">
+            <fieldset>
+                <legend>RGB</legend>
+                <p>
+                    <input name="Red" id="Red" type="range" min="-1" max="1" step="any">
+                    <label for="Red">Red</label>
+                </p>
+                <p>
+                    <input name="Green" id="Green" type="range" min="-1" max="1" step="any">
+                    <label for="Green">Green</label>
+                </p>
+                <p>
+                    <input name="Blue" id="Blue" type="range" min="-1" max="1" step="any">
+                    <label for="Blue">Blue</label>
+                </p>
+            </fieldset>
+            <fieldset>
+                <legend>HSV</legend>
+                <p>
+                    <input name="Hue" id="Hue" type="range" min="-0.5" max="0.5" step="any">
+                    <label for="Hue">Hue</label>
+                </p>
+                <p>
+                    <input name="Saturation" id="Saturation" type="range" min="-1" max="1" step="any">
+                    <label for="Saturation">Saturation</label>
+                </p>
+                <p>
+                    <input name="Value" id="Value" type="range" min="-1" max="1" step="any">
+                    <label for="Value">Value</label>
+                </p>
+            </fieldset>
+            <fieldset>
+                <legend>CMYK</legend>
+                <p>
+                    <input name="Cyan" id="Cyan" type="range" min="-1" max="1" step="any">
+                    <label for="Cyan">Cyan</label>
+                </p>
+                <p>
+                    <input name="Magenta" id="Magenta" type="range" min="-1" max="1" step="any">
+                    <label for="Magenta">Magenta</label>
+                </p>
+                <p>
+                    <input name="Yellow" id="Yellow" type="range" min="-1" max="1" step="any">
+                    <label for="Yellow">Yellow</label>
+                </p>
+                <p>
+                    <input name="Black" id="Black" type="range" min="-1" max="1" step="any">
+                    <label for="Black">blacK</label>
+                </p>
+            </fieldset>
+            <fieldset>
+                <p>
+                    <input name="Alpha" id="Alpha" type="range" min="0" max="1" step="any" value="1">
+                    <label for="Alpha">Alpha</label>
+                </p>
+            </fieldset>
+        </form>
+        <div class="credits">
+            <p>The <a href="https://github.com/michalbe/css-nyan-cat">CSS NYAN CAT</a> was created by <a href="http://twitter.com/#!/michalbe">Michal Budzynski</a> for <a href="http://mozillalabs.com/demoparty/helsinki">Mozilla Demo Party</a> in Helsinki June 2011</p>
+            <p>Sound was disabled for the audiences/visitors pleasure...</p>
+        </div>
+    </section>
+</section>
+<section>
+    <header class="slide">
+        <h1>Questions?</h1>
+    </header>
+</section>
+<footer class="slide">
+    <h2>Thank you!</h2>
+    <p>Get it at <a href="https://github.com/One-com/one-color">https://github.com/One-com/one-color</a></p>
+    <p>Get in touch:</p>
+    <ul>
+        <li>Email: <a href="mailto:munter@fumle.dk">munter@fumle.dk</a></li>
+        <li>Twitter: <a href="http://twitter.com/#!/_munter_">@_munter_</a></li>
+    </ul>
+    <p>Colorcat: <a href="https://github.com/Munter/colorcat">https://github.com/Munter/colorcat</a></p>
+</footer>
+<script src="../3rdparty/CSSS/slideshow.js"></script>
+<script type="text/javascript" src="colorcat/js/one-color-debug.js"></script>
+<script type="text/javascript" src="colorcat/js/colorcat.js"></script>
+<script>
+var slideshow = new SlideShow();
+</script>
+</body>
+</html>