Skip to content

Instantly share code, notes, and snippets.

View bkardell's full-sized avatar

Brian Kardell bkardell

129 followers · 12 following
View GitHub Profile
@bkardell
bkardell / question.md
Last active August 29, 2015 13:55

Has something really simple like actually exposing the render tree in some basic ways ever been proposed?

For example, what if there were an object called

css.renderTree;

And it just had a couple of static methods...

@bkardell
bkardell / render.md
Last active August 29, 2015 13:56
Progressive rendering facilitation

#Our Asynchronous Past One of the things that made the early Web interesting was the fact that the page could render as it was downloading. When we introduced images, design wasn't much of a thing on the web, so we made them async. The browser rendered a placeholder and when the image downloaded it would pop into existence. This was great in some respects because authors could get the (then) majority text content much more quickly so a user can start reading, and on the low banwidth connections of the past this was a pretty huge deal.

Still, a page isn't exactly readable if the text is radically jumping around. To combat this, we simply made sure that the placeholder itself could be appropriately sized and the screen simply 'painted' that part later. This wasn't much of a problem because typically images play a pretty important design element role, so the page would know how big it should be.

#Our Unhappy Middle As the Web started to gain capabilities and grow in new and originally unexpected ways we

@bkardell
bkardell / observer-confusion.html
Last active August 29, 2015 13:56
A fairly minimal example of confusion about the results I see with MutationObservers
<!doctype html>
<html>
<head>
<style>#gonnaputstuffhere { position:absolute; top:0; right:0; background-color:yellow!important; padding:5em; color:blue !important;}</style>
<script>
/* setup a mutation observer watching subtree of body and begin observing immediately...
collect information about the total number of mutation records, as well as their type
*/
var total = 0;
var matrix = {};
@bkardell
bkardell / whatiwasthinking.md
Last active August 29, 2015 13:56
object mapping to DOM

We identify HTML :mappable types. All form elements are :mappable, but it should be plausible to create your own.

:mappable types have a .mapToObject(?Object) method and an .mapFromObject(Object) methods

##mapToObject(?Object)

Given

    <input name="foo" value="bar">
@bkardell
bkardell / attrs.md
Last active August 29, 2015 14:01

Given markup like:

<audio-synth id="foo" osc1="square" osc2="sine" frequency="320"></audio-synth>

I can grab a reference to this:

var synth = document.getElementById("foo");
@bkardell
bkardell / mutationobserverquestion.html
Last active August 29, 2015 14:03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
// select the target node
var target = document;
var total = {};
var observer = new MutationObserver(function(mutations) {
@bkardell
bkardell / feedback
Last active August 29, 2015 14:04
tag panel feedback
If you went to the W3C TAG Panel Part Deux at #BostonJS
(the official hashtag of the Boston JS meetups), I'd love to hear your thoughts..
Was it interesting? Good? Bad? What were you hoping for, etc?
If you don't feel comfortable sharing publicly, feel free top send me
an email @ bkardell@gmail.com.
@bkardell
bkardell / require-weirdness
Last active August 29, 2015 14:07
require(["foo"], function (foo) {
try {
foo.bar(); // foo does nothing with z below, or x
} catch (e) {
debugger; // sometimes I hit this and it reports z undefined?
console.error("wtf", e);
}
});
function x () {
@bkardell
bkardell / gist:1c160ff1d40c9cc2c8dc
Created November 6, 2014 15:49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Custom Properties/attributes</title>
<style>
:root {
--x-thinger: one;
}
</style>
@bkardell
bkardell / crazy.css
Created November 13, 2014 23:10
crazycss
x-panel-set {....lots of properties... }
x-panel-set::before {....lots of properties... }
x-panel-set::after {....lots of properties... }
x-panel-set::titlebar::before {....lots of properties... }
x-panel-set::titlebar {....lots of properties... }
x-panel-set::titlebar > ::title {....lots of properties... }
x-panel-set[is-destructable]::titlebar > ::button.destroy {....lots of properties... }
/* and so on... quick, what view is this? tabset? accordion? carousel? */
@media(...) {