Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<!-- Helpful things to keep in your <head/>
// Brian Blakely, 360i
// http://twitter.com/brianblakely/
-->
<head>
<!-- Disable automatic DNS prefetching.
@brianblakely
brianblakely / vertical-alignment.html
Last active September 25, 2015 12:37
Vertical Alignment That Works in IE
<!-- IE6+ -->
<!--
NOTES:
1. For this to work in IE6 or 7, your elements must have a "natural" display value of inline. <span>, <img>, <a> — these are a few elements that qualify.
2. These two elements must be the only immediate children of their parent.
3. valign-content cannot be 100% the width of the container. But it can be 99% width! Play with it.
@brianblakely
brianblakely / gist:1473024
Created December 13, 2011 17:26
Feeding DOM Elements Directly to jQuery
// Element By ID
var $foo = $(document.getElementById('foo'));
// Multiple Elements By ID
var $$foobar = $([
document.getElementById('foo'),
document.getElementById('bar')
]);
// Node List
@brianblakely
brianblakely / dabblet.css
Created March 14, 2012 17:07
Improved Windows 8 Logo
/* Improved Windows 8 Logo */
* {
font-family: "Myriad Pro";
font-size: 96px;
}
body {
padding: 50px;
color: #646464;
}
@brianblakely
brianblakely / gist:2220593
Created March 27, 2012 21:40
Very Semantic Table
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
@brianblakely
brianblakely / stars.css
Created June 21, 2012 20:47
Star Rules
* {
/* makes border and padding grow inward from width & height
- mix-and-match units for various box model properties
- ex. width: 25%; padding: 15px;
- no workie in IE7
*/
-moz-box-sizing: border-box;
box-sizing: border-box;
/* hiding overflow creates a block formatting context
@brianblakely
brianblakely / rem-calibrate.css
Created July 13, 2012 18:55
Simulate vw with rems
/* Android stock browser won't let you set font-size smaller than 8px unless you apply this. */
:root {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
@brianblakely
brianblakely / objectObserveDebugging.js
Last active August 29, 2015 14:07
Object.observe for JavaScript Debugging
// By observing changes to an object with Object.observe,
// and turning on Async Call Stacks in Chrome Dev Tools,
// you can find the source of those changes.
var myObject = {
foo: 'bar'
};
Object.observe(myObject, function(changes) {
// This asynchronous callback runs when myObject is changed
@brianblakely
brianblakely / es6_eli5.txt
Last active August 27, 2021 16:22
ES6 ELI5
Foreword
===
These short descriptions will familiarize you with new things in ES6,
quickly and simply.
A lot of details are ignored to aid this purpose. This content is only intended
as a starting point or brief refresher.
Most of the descriptions use pre-ES6 JavaScript as a frame of reference.
@brianblakely
brianblakely / 1_brocbab_pre-promise.js
Last active March 11, 2019 16:26
Broccoli Babel Plugin with and without Promises
// Unfinished - before throwing up hands and moving on to refactor
Babel.prototype.write = function(readTree, destDir) {
var self = this;
return readTree(self.inputTree).then(function(srcDir) {
var promise = new rsvp.Promise(function(resolve, reject) {
recreaddir(srcDir, function(err, files) {