W3C Introduction to Web Components - explainer/overview of the technologies
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://unpkg.com/@webcomponents/custom-elements"></script> | |
<style> | |
body { | |
margin: 0; | |
} | |
/* Style the element from the outside */ | |
/* | |
fancy-tabs { | |
margin-bottom: 32px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Moved to https://github.com/ebidel/puppeteer-examples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright 2018 Google Inc. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This demo shows two ways to detect changes to a DOM node `.textContent`, one | |
using a `MutationObserver` and the other using an ES2015 `Proxy`. | |
From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50. | |
**Update**: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy. | |
This has something to do with how the browser queues/prioritizes Proxies over MO. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Complete feature detection for ES modules. Covers: | |
1. Static import: import * from './foo.js'; | |
2. Dynamic import(): import('./foo.js').then(module => {...}); | |
Demo: http://jsbin.com/tilisaledu/1/edit?html,output | |
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help. | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$fileName = $_FILES['afile']['name']; | |
$fileType = $_FILES['afile']['type']; | |
$fileContent = file_get_contents($_FILES['afile']['tmp_name']); | |
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); | |
$json = json_encode(array( | |
'name' => $fileName, | |
'type' => $fileType, | |
'dataUrl' => $dataUrl, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Watch accesses/sets on a DOM element property. | |
function watchPropsOn(el) { | |
return new Proxy(el, { | |
get(target, propKey, receiver) { | |
//return Reflect.get(target, propKey, receiver); | |
console.log('get', propKey); | |
return el[propKey]; | |
}, | |
set(target, propKey, value, receiver) { | |
console.log('set', propKey, value); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @author ebidel@ (Eric Bidelman) | |
* License Apache-2.0 | |
*/ | |
// Prints the bytes cached by service worker. Breaks out each cache | |
// overall in-memory bytes used by the Cache Storage API for the site. | |
async function getCacheStoragesAssetTotalSize() { | |
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<base href="https://polygit.org/components/"> | |
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> --> | |
<link rel="import" href="paper-input/paper-input.html"> | |
<link rel="import" href="paper-button/paper-button.html"> | |
</head> | |
<body> |
NewerOlder