Skip to content

Instantly share code, notes, and snippets.

Brian Cavalier briancavalier

Block or report user

Report or block briancavalier

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View dojo-widget-quickstart.html
<!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
View gist:468015
// 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
View gist:475957
// Rotate classes A -> B, B -> C, C -> A
dojo.query(".mynodes").rotateClass(["A", "B", "C"]);
View digital-clock-digit.html
<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>
View digital-clock-second.html
<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>
View digital-clock.css
/* 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;
View screening.js
// 1: how could you rewrite the following to make it shorter?
if (foo) {
bar.doSomething(el);
} else {
bar.doSomethingElse(el);
}
View 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 Oct 22, 2010
Using fonts for the CSS3 Digital Clock face
View font-theme.css
/* 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 Oct 25, 2010
Analog clock theme CSS, full of OOCSS antipatterns
View analog-clock.css
/* 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);}
You can’t perform that action at this time.