View observer.js
!function() {
var emitter = {
emit: console.dir.bind(console)
}
function emit(mutation) {
var target = mutation.target
var name = mutation.attributeName
var value = target.getAttribute(name)
View observer.js
!function() {
var emitter = {
emit: console.dir.bind(console)
}
var disabled = 'disabled'
var enabled = 'enabled'
var hidden = 'hidden'
var unhidden = 'unhidden'
View rotate.css
.rotate {
transition-property: transform; }
.rotate--0deg {
transform: rotate(0deg); }
.rotate--90deg {
transform: rotate(90deg); }
.rotate--180deg {
View namespacing.md

Imagine a web application that uses multiple CSS frameworks, libraries, components, etc. Class names are bound to conflict. Imagine two libraries: freeform.css and aid.css

Namespaced by prefixing classes

<a class="freeform-text--bold freeform-display--block aid aid--focusable">example</a>

Namespaced by data attribute

<a data-freeform="text--bold display--block" data-aid="focusable">example</a>
View counter.css
.counter__reset {
counter-reset: module;
}
.counter__increment {
counter-increment: module;
}
.counter__before::before,
.counter__after::after {
View directive.js
!function(root, name, make) {
(root.angular || require('angular')).module(name, []).directive(name, make = make())
typeof module != 'undefined' && module.exports ? module.exports = make : root[name] = make
}(this, 'myDirective', function() {
return function() {
var angular = window.angular || require('angular')
return {
link: function (scope, element, atts) {
}
View webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
externals: {
dns: '{}'
}
}