Skip to content

Instantly share code, notes, and snippets.

@sjmiles
sjmiles / cookery.md
Last active August 29, 2015 14:23
cookbook stuff
@sjmiles
sjmiles / attributes.md
Last active August 29, 2015 14:23
[DRAFT] Curmudgeon's Corner: Attributes, Properties, and Bears, Oh My!

@sjmiles, 6/17/2015

... shooing away some flying monkeys ...

Attributes Use Dash-Case

First, when we use attributes in Polymer we always use dash-case for the name. In other words, we never write <x-foo coolSetting>, instead we always write <x-foo cool-setting>. This is true regardless of how we are going to use cool-setting, whether for styling, data binding, or whatever.

We do this because attributes in HTML are case-insensitive.

Howe: Was there something you wanted?

Woody: Well, uh, Miss Howe, I've been here at Cheers for quite a while now. I'm a good worker, I don't take vacations, I'm never sick, and I was just wondering if...

Howe: No, Woody, Woody, I'm going to have to stop you right there. I cannot give you a title.

Woody: "Title"?

Howe: Yes, I know you deserve it, but the front office just doesn't let me hand those things out.

Polymer Feedback

Things I've come accross that are unpleasant with polymer.

Template Binding

  1. There is TemplateBinding which is standalone
  2. It doesn't seem like a direct implementation of the template tag
// irand.html
<script>
modularize(function() {
// whatever we return constitutes our `module`
return function(n) {
return Math.floor(Math.random() * n);
}
});
</script>
@sjmiles
sjmiles / async-import-test.html
Last active August 29, 2015 14:02
async-import problem (?)
// index.html
<!doctype html>
<link href="sync-import.html" rel="import">
<link async href="async-import.html" rel="import">
<script>
if (window.asyncImportHasExecuted) {
alert('derp: async-import executed before body script');
@sjmiles
sjmiles / 0_reuse_code.js
Created June 17, 2014 13:00
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
<link rel="import" href="../paper-form/paper-form.html">
<link rel="import" href="../paper-form/paper-fields.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
@sjmiles
sjmiles / State Musings.md
Last active August 29, 2015 14:01
Musings about State, Dependency Injection, Data Binding et al in relation to Web Components and Standards

The phrase explicit state comes up in discussions about component architecture. I find this an abstract concept, I'm guessing that it means there is a state object I can store/interrogate that contains the complete component state.

Forgiving for a moment the assumption that the state of the object is one thing (I suggest state is dependent on context), then it's true the DOM does not provide information in this format. It's also true that Web Components does not have anything to say on this point.

It's understandable that vendors of tools that want to consume state in this way would be happier if all DOM elements (and transitively all Custom Elements) produced such an object. Otherwise, there is an impedance mismatch with their particular flavor of application design.

IMO, there is a very similar issue with respect to dependency injection, where proponents want their particular inflection baked into the lowest level possible so they have maximum interoperability.

Again, such desires are understand

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-order-0</title>
<style>
body {
background-color: orange;