Skip to content

Instantly share code, notes, and snippets.

View briancavalier's full-sized avatar

Brian Cavalier briancavalier

714 followers · 5 following
  • Pittsburgh
View GitHub Profile
@briancavalier
briancavalier / dojo-widget-quickstart.html
Created March 3, 2010 12:23
<!DOCTYPE html>
<html>
<head>
<!--
Add theme CSS and Enable parseOnLoad
Most widgets need some theme CSS or they'll look terrible. You can
reference it on the Google CDN, or host it yourself.
Likewise, if you don't enable parseOnLoad, you'll have to manually
@briancavalier
briancavalier / gist:468015
Created July 8, 2010 13:44
// Extend NodeList with a rotateClass method that will rotate among a list of
// classArr, and optionally remove them as part of the rotation.
dojo.extend(dojo.NodeList, {
rotateClass: function(classArr, remove) {
var l = classArr.length;
return this.forEach(function(n) {
var rotated = false;
for(var i=0; i<l; ++i) {
if(remove && i == (l-1)) {
// Found last class, and remove == true, rotate to none
@briancavalier
briancavalier / gist:475957
Created July 14, 2010 19:49
// Rotate classes A -> B, B -> C, C -> A
dojo.query(".mynodes").rotateClass(["A", "B", "C"]);
@briancavalier
briancavalier / digital-clock-digit.html
Created August 27, 2010 21:01
<div class="slot digit">
<div class="element bar center top"></div>
<div class="element bar center middle"></div>
<div class="element bar center bottom"></div>
<div class="element bar left top"></div>
<div class="element bar left bottom"></div>
<div class="element bar right top"></div>
<div class="element bar right bottom"></div>
</div>
@briancavalier
briancavalier / digital-clock-second.html
Created August 27, 2010 21:02
<div class="slot digit second">
<div class="element bar center top"></div>
<div class="element bar center middle"></div>
<div class="element bar center bottom"></div>
<div class="element bar left top"></div>
<div class="element bar left bottom"></div>
<div class="element bar right top"></div>
<div class="element bar right bottom"></div>
</div>
@briancavalier
briancavalier / digital-clock.css
Created August 27, 2010 21:03
/* All elements, when not "turned on", leave slight ghosting */
.element {
opacity: .1;
}
/* LED bars (specialization of element) that make up the digits */
/* Default theme is green, box-shadow glow, slightly rounded corners */
.bar {
background-color: #0f0;
border-radius: 4px;
@briancavalier
briancavalier / screening.js
Created September 14, 2010 11:17 — forked from rmurphey/screening.js
// 1: how could you rewrite the following to make it shorter?
if (foo) {
bar.doSomething(el);
} else {
bar.doSomethingElse(el);
}
@briancavalier
briancavalier / screening.js
Created September 14, 2010 12:57 — forked from rmurphey/screening.js
// 1: how could you rewrite the following to make it shorter?
if (foo) {
bar.doSomething(el);
} else {
bar.doSomethingElse(el);
}
@briancavalier
briancavalier / font-theme.css
Created October 22, 2010 17:01
Using fonts for the CSS3 Digital Clock face
/* Hide the LEDs */
.white .digit .element {
display: none;
}
/* Use :before to create a new block in which
to display the numbers */
.white .digit:before {
display: block;
height: 100%;
margin: -20px 0 0 -20px;
@briancavalier
briancavalier / analog-clock.css
Created October 25, 2010 17:22
Analog clock theme CSS, full of OOCSS antipatterns
/* Hide the first hour, minute, and second digits */
.analog .digit:first-child, .analog .sep + .minute, .analog .minute + .second, .analog .controls .hours {
display: none;
}
/* ... */
/* Rotate the hour hand based on the _two adjacent_ hour digits */
.analog .hour.d0 + .d1, .analog .hour.d1 + .d3 {-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg);}