ui2code

// ~, !, +, & -
// http://dreaminginjavascript.wordpress.com/2008/07/04/28/
//Cara o "~" é um operator lógico (bitwise) NÃO (not). Ele tem um algorítimo simples que é o -(n+1). 
//O que foi usado nesse caso, foi apenas para retornar true ou false. É um uso bem legal! 

//Outra coisa legal também é que o "double tilde" (~~) é bem usado para substituir o Math.floor(), por ser menor, e em algumas situações, mais rápido!



console.log(~-2); //1

ui2code

<div class="conteudo">
  <h1>Logotipo</h1>  
</div>
<footer class="footer">Footer</footer>

*{margin:0;}
html, body{height: 100%;}
.conteudo{min-height:100%; margin-bottom:-142px;}
.conteudo:after{content:""; display:block;}
.footer, .conteudo:after{height: 142px;}

ui2code

;(function( window, document, undefined ) {
  "use strict";

  var app = (function() {
    var $private = {};
    var $public = {};
    /**
     * Private Variables
     */
    $private.privateVar = 'private var';

ui2code

<div class="android">
		    <div class="cabeca">
		        <div class="olhos"></div>
		    </div>
		    <div class="corpo">
		        <div class="bracos"></div>
		    </div>
		</div>
<div class="apple"></div>

ui2code

<div class="device">
    <div class="conteudo">
        <div class="alto-falante"></div>
        <div class="imagem-device"></div>
        <div class="botao"></div>
    </div>
</div>

.device{background:#000; border-radius:3em; box-shadow:0 4px 15px rgba(0,0,0,.6); border:1px solid rgba(48,48,47,.5); height:340px; margin-left:-90px; position:absolute; top:70px; left:50%; padding:3px; width:180px; -webkit-transform:rotateY(40deg); -webkit-transition:2s ease-in;}

ui2code

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>

body{margin:0; padding:0; background-color:#f5f5f5;}
textarea{				
    display:block;
    min-height:686px;
    width:598px;
    margin:10px auto;
    border:1px solid #ededed;

ui2code

<div id="bussola">
    <div id="centro-bussola">
        <div id="ponteiro"></div>
    </div>
</div>

body{margin:0; padding:0;}
#bussola{background:linear-gradient(135deg, #bcc0c2 0%,#262729 55%,#bcc0c2 100%); border-radius:150px; height:300px; margin-left:-150px; margin-top:-150px; position:absolute; left:50%; top:50%; width:300px;}
#bussola:before{background:linear-gradient(to right, #8a8a8f 1%,#e6e6e8 52%,#8a8a8f 100%); border-radius:190px; border:1px solid #000; content:''; display:block; height:340px; top:-20px; left:-20px; position:relative; width:340px; z-index:-1;}
#bussola:after{background:#a7abae; border-radius:140px; content:''; height:280px; position:absolute; left:10px; top:10px; width:280px; z-index:0;}

ui2code

// HTML
<div class="loader"></div>

// CSS
html {height:100%; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:300; background:#222 -webkit-radial-gradient(50% 0, ellipse farthest-corner, #444 0%, #222 100%)}
.loader {width:8px; height:8px; margin:40px auto; opacity:0.5; border-radius:50%; box-shadow: 0 -14px 0 rgba(255,255,255,0.8), 10px -10px 0 rgba(255,255,255,0.7), 14px 0px 1px rgba(255,255,255,0.6), 10px 10px 1px rgba(255,255,255,0.5), 0px 14px 2px rgba(255,255,255,0.4), -10px 10px 2px rgba(255,255,255,0.3), -14px 0px 3px rgba(255,255,255,0.2), -10px -10px 3px rgba(255,255,255,0.1); -webkit-transform-origin: 50%; -webkit-animation:load 0.5s steps(8, end) infinite;}
@-webkit-keyframes load {
  0% {-webkit-transform: rotate(0);}
  100% {-webkit-transform: rotate(360deg);}
}

ui2code

require(["dojo/Deferred", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Deferred, dom, on){
  function asyncProcess(msg){
    var deferred = new Deferred();
    dom.byId("output").innerHTML += "<br/>I'm running...";

    setTimeout(function(){
      deferred.progress("halfway");
    }, 1000);
    setTimeout(function(){

ui2code

require([
  'dojo/aspect'
], function (
  aspect
) {

    var a = {
        foo: function (param) {
          console.log(param);
        }