321 lines
14 KiB
HTML
321 lines
14 KiB
HTML
<h1 id="awesome-polymer-awesome">Awesome Polymer <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a href="https://www.polymer-project.org"><img src="https://www.polymer-project.org/images/logos/p-logo.png" align="left" height="64" width="92"></a>
|
||
> A collection of awesome Polymer resources</p>
|
||
<h2 id="general-resources">General resources</h2>
|
||
<ul>
|
||
<li><a href="https://www.polymer-project.org">Official Site</a></li>
|
||
<li><a href="https://blog.polymer-project.org/">Blog</a></li>
|
||
<li><a href="https://plus.google.com/+PolymerProject/">Google+
|
||
Profile</a></li>
|
||
<li><a href="https://github.com/polymer">Github</a></li>
|
||
<li><a href="https://github.com/polymer/project">Project</a> All things
|
||
related to the Polymer project - Roadmap, Code of Conduct, How to
|
||
Contribute, and more.</li>
|
||
</ul>
|
||
<h2 id="polymer-communities">Polymer Communities</h2>
|
||
<ul>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/tagged/polymer">StackOverflow</a></li>
|
||
<li><a
|
||
href="https://groups.google.com/forum/#!forum/polymer-dev">GoogleGroup</a></li>
|
||
<li><a href="https://twitter.com/polymer">Twitter</a></li>
|
||
<li><a
|
||
href="https://plus.google.com/u/1/communities/115626364525706131031">Google+
|
||
Community</a></li>
|
||
<li><a href="http://polymer-slack.herokuapp.com/">Slack channel</a></li>
|
||
</ul>
|
||
<h2 id="tutorialsguides">Tutorials/Guides</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://codelabs.developers.google.com/polymer-summit">Official
|
||
Codelabs</a></li>
|
||
<li><a href="https://www.polymer-project.org/2.0/docs/tools/tests">Test
|
||
your elements</a></li>
|
||
<li><a
|
||
href="https://medium.com/google-developer-experts/polymer-testing-tips-f217ba94a64">Testing
|
||
Tips</a></li>
|
||
<li><a
|
||
href="https://medium.com/@granze/polymer-unit-testing-d6a69910dc31">Unit
|
||
Testing</a></li>
|
||
<li><a
|
||
href="https://www.polymer-project.org/2.0/start/toolbox/deploy">Deploy
|
||
with Firebase</a></li>
|
||
<li><a
|
||
href="https://www.polymer-project.org/1.0/docs/migration.html">Migration
|
||
guide</a></li>
|
||
<li><a
|
||
href="https://elements.polymer-project.org/guides/using-elements">Using
|
||
elements</a></li>
|
||
<li><a
|
||
href="https://elements.polymer-project.org/guides/flex-layout">Flexbox
|
||
layout with iron-flex-layout</a></li>
|
||
<li><a
|
||
href="https://elements.polymer-project.org/guides/using-neon-animations">Using
|
||
Neon Animations</a></li>
|
||
<li><a
|
||
href="https://scotch.io/tutorials/build-a-real-time-polymer-to-do-app">Build
|
||
a real-time to-do app</a></li>
|
||
<li><a
|
||
href="http://blog.charto.net/typescript/Taming-Polymer-with-SystemJS-and-TypeScript-part-1/">Taming
|
||
Polymer with SystemJS and TypeScript</a> Part 1</li>
|
||
<li><a
|
||
href="https://medium.com/@jecelynyeen/polymer-3-0-preview-building-a-mini-card-game-ce8948265fd6">Polymer
|
||
3.0 Preview — Building a mini card game</a></li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.polymer-project.org/1.0/articles/routing.html">Encapsulated
|
||
Routing with Elements</a></li>
|
||
<li><a
|
||
href="https://www.polymer-project.org/1.0/articles/es6.html">Building
|
||
web components using ES6 classes</a></li>
|
||
<li><a
|
||
href="http://www.revillweb.com/tutorials/web-components-with-es2015-es6/">Write
|
||
web components with ES2015 (ES6)</a></li>
|
||
<li><a
|
||
href="http://codingwithgerwin.blogspot.it/2015/07/live-reload-for-polymer-chrome-apps.html">Live-reload
|
||
for Polymer Chrome Apps</a></li>
|
||
<li><a
|
||
href="http://paulusschoutsen.nl/blog/2015/07/using-polymer-with-flux-and-a-global-app-state/">Using
|
||
Polymer with Flux and a global app state</a></li>
|
||
<li><a href="https://aerotwist.com/blog/guitar-tuner/">Guitar Tuner with
|
||
Web audio API</a></li>
|
||
<li><a
|
||
href="https://aerotwist.com/blog/polymer-for-the-performance-obsessed/">Polymer
|
||
for the Performance-obsessed</a></li>
|
||
<li><a
|
||
href="https://www.polymer-project.org/1.0/articles/shadydom.html">What
|
||
is shady DOM</a></li>
|
||
<li><a
|
||
href="http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/">Using
|
||
Polymer webcomponents with Angular JS</a></li>
|
||
<li><a
|
||
href="https://www.bithound.io/blog/post/upgrading-to-polymer-10">Upgrading
|
||
to 1.0</a> bitHound Blog</li>
|
||
<li><a
|
||
href="http://addyosmani.github.io/webcomponent-samples/polymer/modules/">Dynamically
|
||
Loading Elements & ES6 Modules</a></li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/case-study/net-a-porter">NET-A-PORTER
|
||
case study</a></li>
|
||
<li><a
|
||
href="https://medium.com/collaborne-engineering/polymer-loves-redux-f89a863394d9#.7f4z92ppy">Polymer
|
||
loves Redux</a></li>
|
||
<li><a
|
||
href="https://medium.com/dev-channel/how-to-use-polymer-with-webpack-b41812d78b15">How
|
||
to use Polymer with Webpack</a></li>
|
||
</ul>
|
||
<h2 id="videos">Videos</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN">Polycasts</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=TDpiyrcOO30&list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi">Summit
|
||
2017</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=0iM0DZjYGqg&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ">Summit
|
||
2016</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J">Summit
|
||
2015</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=d9tNO3n0RlM">The Web
|
||
Platform Podcast 46: Polymer 1.0</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=cuoZenpQveQ">Google I/O
|
||
2017 - Future, Faster: Unlock the Power of Web Components with
|
||
Polymer</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=fD2As5RmM8Q">Google I/O
|
||
2015 - Polymer and modern web APIs: In production at Google
|
||
scale</a></li>
|
||
<li><a href="https://youtu.be/7WgEuNZCCHk">Componentize your app with
|
||
Polymer Elements</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLPaj_o9gjMYll0sSb47TrzQCjIo5iqQZm">Learn
|
||
Polymer 1.0</a> by Stretch Projects</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLLnpHn493BHGhoGAb2PRKzv4Zw3QoatK-">Level
|
||
up Tutorials</a></li>
|
||
</ul>
|
||
<h2 id="boilerplates">Boilerplates</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/webcomponents/polymer-boilerplate">Polymer
|
||
boilerplate</a></li>
|
||
<li><a
|
||
href="https://developers.google.com/web/tools/polymer-starter-kit/">Starter
|
||
kit</a> Build tools & boilerplate for creating production-quality
|
||
web apps.</li>
|
||
<li><a href="https://github.com/polymerlabs/seed-element">Seed
|
||
element</a></li>
|
||
<li><a href="https://github.com/akveo/polymer-admin">Polymer Admin</a>
|
||
Responsive admin dashboard created using Polymer 1.0 and Polymer Starter
|
||
Kit</li>
|
||
<li><a
|
||
href="https://github.com/aruntk/kickstart-meteor-polymer">Meteor-Polymer
|
||
Starter Kit</a> Kickstart a Meteor - Polymer project with MWC
|
||
packages</li>
|
||
<li><a
|
||
href="https://github.com/aruntk/kickstart-meteor-polymer-with-auth">Meteor-Polymer
|
||
Starter Kit Including Auth</a></li>
|
||
</ul>
|
||
<h2 id="generators">Generators</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/yeoman/generator-polymer">Generator
|
||
Polymer</a> Yeoman generator for Polymer projects, based on the official
|
||
<a
|
||
href="https://developers.google.com/web/tools/polymer-starter-kit/">Starter
|
||
kit</a>.</li>
|
||
<li><a href="https://www.npmjs.com/package/generator-element">Generator
|
||
element</a> Yeoman generator to create Custom Elements using Polymer,
|
||
X-Tag or VanillaJS.</li>
|
||
</ul>
|
||
<h2 id="official-elements">Official Elements</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/Polymer/elements">Elements
|
||
Catalog</a></li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/iron-elements">Iron</a>
|
||
Iron elements are a set of visual and non-visual utility elements.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/paper-elements">Paper</a>
|
||
Paper elements are a set of visual elements that implement Google’s
|
||
Material Design.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/GoogleWebComponents/google-web-components">Google
|
||
web components</a></li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/gold-elements">Gold</a>
|
||
The gold elements are built for e-commerce use-cases like checkout
|
||
flows.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/platinum-elements">Platinum</a>
|
||
Elements to turn your web page into a true webapp, with push, offline,
|
||
and more.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/molecules">Molecules</a>
|
||
Elements that wrap other javascript libraries.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/app-elements">App</a>
|
||
Elements that enable building full web apps out of modular custom
|
||
elements.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/data-elements">Data</a>
|
||
A collection of data/storage related elements.</li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/collection/PolymerElements/layout-elements">Layout</a>
|
||
A collection of layout related elements.</li>
|
||
<li><a
|
||
href="https://elements.polymer-project.org/browse?package=neon-elements">[Obsolete]
|
||
Neon</a> Neon elements implement special effects.</li>
|
||
</ul>
|
||
<h2 id="directories">Directories</h2>
|
||
<ul>
|
||
<li><a href="http://builtwithpolymer.org/">Built with Polymer</a></li>
|
||
<li><a href="https://webcomponents.org/">Webcomponents.org</a></li>
|
||
<li><a href="http://component.kitchen/">Components Kitchen</a></li>
|
||
<li><a href="http://open-elements.org">open-elements</a> Open for all
|
||
elements working with polymer ^1.1</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<ul>
|
||
<li><a href="https://www.polymer-project.org/2.0/toolbox/">App
|
||
Toolbox</a> App Toolbox.</li>
|
||
<li><a href="https://github.com/polymerlabs/polyserve">Polyserve</a> A
|
||
simple web server for using bower components locally.</li>
|
||
<li><a href="https://github.com/PolymerLabs/polybuild">Polybuild</a> An
|
||
all-in-one build tool for Polymer apps.</li>
|
||
<li><a href="https://github.com/PolymerLabs/polyup">Polyup</a> A helpful
|
||
assistant for migrating from Polymer v0.5 to 1.0.</li>
|
||
<li><a href="https://github.com/PolymerLabs/polylint">Polylint</a>
|
||
Detect errors in your code.</li>
|
||
<li><a href="http://polygit.org/">Polygit</a> The Magic Server serves
|
||
files directly from github (via <code>cdn.rawgit.com</code>) in a manner
|
||
that is compatible with HTML Imports natural deduplication feature.</li>
|
||
<li><a href="https://github.com/PolymerLabs/polydev">Polydev</a> DevTool
|
||
extension.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/polymer-ready/aaifiopbmiecbpladpjaoemohhfjcbdk">Polymer
|
||
Ready</a> Show an icon in the address bar when it detects some Polymer
|
||
and Custom components.</li>
|
||
<li><a href="https://github.com/Polymer/vulcanize">Vulcanize</a> Build
|
||
tool for HTMLimports and web components.</li>
|
||
<li><a href="https://github.com/PolymerLabs/crisper">Crisper</a> Split
|
||
inline scripts from an HTML file for CSP compliance.</li>
|
||
<li><a href="https://atom.io/packages/polymer-snippets">Snippets for
|
||
Atom editor</a></li>
|
||
<li><a
|
||
href="https://packagecontrol.io/packages/Polymer%20%26%20Web%20Component%20Snippets">Snippets
|
||
for Sublime Text editor</a></li>
|
||
<li><a
|
||
href="https://github.com/meteorwebcomponents/synthesis">Synthesis</a>
|
||
Use Polymer as the view Layer of Meteor.js</li>
|
||
<li><a
|
||
href="https://github.com/meteorwebcomponents/layout">MWC-Layout</a>
|
||
Control rendering of polymer components.</li>
|
||
<li><a href="https://github.com/aruntk/wc-loader">WC-Loader</a>.
|
||
Webcomponents webpack loader</li>
|
||
<li><a
|
||
href="https://github.com/webpack-contrib/polymer-webpack-loader">Polymer
|
||
Webpack Loader</a>. Polymer webpack loader.</li>
|
||
<li><a href="https://github.com/download/polymer-cdn">Polymer CDN</a>.
|
||
Unofficial CDN for polymer components.</li>
|
||
<li><a href="https://github.com/Polymer/lit-html">lit-html</a> HTML
|
||
templates, via JavaScript template literals.</li>
|
||
</ul>
|
||
<h2 id="testing">Testing</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/Polymer/web-component-tester">Web
|
||
components tester</a> Makes testing your web components a breeze!</li>
|
||
<li><a
|
||
href="https://github.com/thedeeno/web-component-tester-istanbul">Web
|
||
components tester istambul</a> Istanbul coverage plugin for
|
||
web-component-tester.</li>
|
||
<li><a
|
||
href="https://github.com/PolymerElements/test-fixture">test-fixture</a>
|
||
Element that can simplify the exercise of consistently resetting a test
|
||
suite’s DOM.</li>
|
||
<li><a
|
||
href="https://github.com/PolymerElements/iron-test-helpers">iron-test-helpers</a>
|
||
Utility classes to make testing easier.</li>
|
||
</ul>
|
||
<h2 id="behaviors">Behaviors</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/aruntk/polymer-apollo">Polymer-Apollo</a>
|
||
Polymer Apollo GraphQL Integration.</li>
|
||
<li><a href="https://github.com/meteorwebcomponents/mixin">MWC-Mixin</a>
|
||
Reactive meteor data source for polymer elements</li>
|
||
<li><a
|
||
href="https://github.com/meteorwebcomponents/router">MWC-Router</a> Two
|
||
way bind polymer with Meteor Flowrouter.</li>
|
||
<li><a href="https://github.com/tur-nr/polymer-redux">Polymer-Redux</a>
|
||
Polymer bindings for Redux.</li>
|
||
</ul>
|
||
<h2 id="themingstyling">Theming/Styling</h2>
|
||
<ul>
|
||
<li><a href="https://polymerthemes.com/">Polymer Themes</a> Free Polymer
|
||
themes and templates</li>
|
||
<li><a href="https://www.materialpalette.com/">Material Palette</a>
|
||
Palette generator based on Material Design</li>
|
||
<li><a href="https://poly-style.appspot.com/demo/">Polystyle</a> Wrap
|
||
existing stylesheets with Polymer’s style module system.</li>
|
||
</ul>
|
||
<h2 id="notable-projects">Notable projects</h2>
|
||
<p><a href="https://github.com/abdonrd/PolymerProjects">Polymer
|
||
Projects</a> A list of websites and apps built with Polymer</p>
|
||
<h2 id="other-awesome-resources">Other awesome resources</h2>
|
||
<p><strong>If you want more awesome resources, check the <a
|
||
href="https://github.com/sindresorhus/awesome">awesome</a>
|
||
list!</strong></p>
|
||
<hr />
|
||
<h3 id="license">License</h3>
|
||
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
|
||
alt="CC0" /></a></p>
|
||
<p><a href="https://github.com/Granze/awesome-polymer">polymer.md
|
||
Github</a></p>
|