Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky
JanMiksovsky / index.html
Created December 3, 2018 21:54
Styling sugar example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Custom styling example</title>
<style id="customButtonStyle">
#inner {
background: white;
@JanMiksovsky
JanMiksovsky / portStatus.dot
Last active August 22, 2016 16:38
Component porting status
digraph G {
// Dependency graph of Paper/Iron elements
//
// solid (default) lines = dependency
// sotted lines = devDependency
//
// green = generally works under Polymer 2.0: unit tests pass, demo looks reasonable (except for styling)
// yellow = some porting work has been done
// gray = porting status unknown or not begun
{
"name": "issue-16",
"version": "0.0.0",
"dependencies": {
"iron-pages": "PolymerElements/iron-pages",
"paper-tabs": "PolymerElements/paper-tabs"
}
}
@JanMiksovsky
JanMiksovsky / BasicWebComponentsArchitecture.js
Created March 14, 2016 23:19
Summary of Basic Web Components architecture, focusing on its use of mixins
Basic Web Components architecture
=================================
The project seeks to provide a comprehensive set of solid, well-designed web
components that implement very common user interface patterns.
Goals:
* Usability excellence
* Work in a wide variety of situations (Gold Standard)
* As functionally complete as possible
@JanMiksovsky
JanMiksovsky / realTemplate.html
Created October 2, 2015 21:49
Create a Polymer element using a real <template>, not a <dom-module>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="../components/polymer/polymer.html">
<template id="test-element">
Hello, <content></content>.
</template>
@JanMiksovsky
JanMiksovsky / gist:16f7f5f2fc5cca95fda1
Created May 29, 2015 22:08
Repro case for Polymer 1.0 element which can't be instantiated in Shady DOM
<!--
Repro case for bug that appears under Shady DOM.
Attempting to instantiate this component will trigger an exception. Both the
hostAttributes and the property change observer appear necessary to trigger the
exception.
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
@JanMiksovsky
JanMiksovsky / gist:4f06a2e4cf0ea054ccbd
Created October 30, 2014 03:57
Does an akyral-modal instance pick up body styling?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="akyral-modal/bower_components/platform/platform.js"></script>
<link rel="import" href="akyral-modal/bower_components/akyral-modal/akyral-modal.html">
@JanMiksovsky
JanMiksovsky / index.html
Created May 16, 2014 21:22
Web components example: text-input-with-button
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="text-input-with-button.html">
<script>
document.addEventListener( "go", function( event ) {
alert( event.detail );
});
@JanMiksovsky
JanMiksovsky / gist:45c25682d5c7a15c49a5
Created May 16, 2014 21:22
Slides for talk: Web Components — SeattleJS, 5/15/2014
Web Components bring sanity, efficiency and fun to front-end web development
============================================================================
* New HTML standards enable the creation of reusable, shareable
web user interface components
* Can start today
* Numerous implications for front-end JavaScript development
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic HTML import of element definition doesn't trigger upgrade</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<!-- If uncommented, the static version of this link works. -->
<!-- <link rel="import" href="http://jsbin.com/vovun/2"> -->