code – Ugly Duckling Blog

Import custom HTML element with shadow DOM


<!-- importing document -->
<link rel="import" href="my-element.html">


<!-- my-element.html -->
<template>
    <!--
    HTML, JavaScript, CSS here will not be accessible from importing document
    -->
</template>

<script>
(function() {
    var component = document.currentScript.ownerDocument;
    var tpl = component.querySelector('template');
    var MyProto = Object.create(HTMLElement.prototype);

    MyProto.createdCallback = function() {
        this.root = this.createShadowRoot();
        this.root.appendChild(document.importNode(tpl.content, true));
    };

    document.registerElement('my-element', {
        prototype: MyProto
    });
})();
</script>

<!--

HTML, JavaScript, CSS here will not be accessible from importing document

-->

</template>

(function() {

var component = document.currentScript.ownerDocument;

var tpl = component.querySelector('template');

var MyProto = Object.create(HTMLElement.prototype);

MyProto.createdCallback = function() {

this.root = this.createShadowRoot();

this.root.appendChild(document.importNode(tpl.content, true));

};

document.registerElement('my-element', {

prototype: MyProto

});

})();

</script>

Most used Git commands

Working tree status git status

Stage only tracked files git add -u

Unstage git reset

Review changes between HEAD and working tree before each commit git diff.

git commit

git push origin master

Deploy git pull origin master

JavaScript workflow in 2013

Bower vs NPM confusion

“Bower is created solely for the front-end and is optimized with that in mind (…) requires a flat dependency tree.”

How to add new client javascript library to a project?

Edit bower.json
bower update
grunt wiredep*

* See Gruntfile.js.

Edit or create package.json and use npm to install grunt and wiredep.

Shades of gray


# p - percentage of black

def gray(p):
	h = hex(int(255 - int(255/100*p)))
	return '#' + h[2:] + h[2:] + h[2:]

# p - percentage of black

def gray(p):

h = hex(int(255 - int(255/100*p)))

return '#' + h[2:] + h[2:] + h[2:]

WordPress download and extract script


<?php
/**
 * @author Ruslanas Balčiūnas
 */

/* DELETE AFTER USAGE */
$url = 'http://wordpress.org/latest.tar.gz';
$fname = 'latest.tar.gz';
file_put_contents($fname, fopen($url, 'r'));

// remove old version
if(file_exists('latest.tar')) {
	unlink('latest.tar');
}

$p = new PharData($fname);
try {
	$p->decompress();
} catch (Exception $e) {
	die($e->getMessage());
}

try {
    $phar = new PharData('latest.tar');
    $phar->extractTo('./', null, true);
} catch (Exception $e) {
    $e->getMessage();
}

unlink('latest.tar');
unlink($fname);

echo 'Done!';
?>

<?php

/**

* @author Ruslanas Balčiūnas

/* DELETE AFTER USAGE */

$url = 'http://wordpress.org/latest.tar.gz';

$fname = 'latest.tar.gz';

file_put_contents($fname, fopen($url, 'r'));

// remove old version

if(file_exists('latest.tar')) {

unlink('latest.tar');

}

$p = new PharData($fname);

try {

$p->decompress();

} catch (Exception $e) {

die($e->getMessage());

}

try {

$phar = new PharData('latest.tar');

$phar->extractTo('./', null, true);

} catch (Exception $e) {

$e->getMessage();

}

unlink('latest.tar');

unlink($fname);

echo 'Done!';

Import custom HTML element with shadow DOM

Most used Git commands

JavaScript workflow in 2013

Bower vs NPM confusion

Shades of gray

WordPress download and extract script

Recent Comments

Search

Recent Posts

Tags

Alex MacCaw

Recent RFCs

Chris Lowis

Meta

Pages