Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nobitagit/all-about-web-components

Web components learning resources gathered and ordered
https://github.com/nobitagit/all-about-web-components

Last synced: about 1 month ago
JSON representation

Web components learning resources gathered and ordered

Awesome Lists containing this project

README 

        
# All about Web Components

Webcomponents resources are still pretty sparse and scatterd around the web.

Hope this helps finding relevant informations and organize them in sensible way.



## Main references

The basics

+ [W3C Web Components Specifications](http://w3c.github.io/webcomponents/)

+ [Webcomponents.org](http://webcomponents.org/)



## Libraries

+ [Polymer](http://www.polymer-project.org/), created by Google

+ [Bosonic](http://bosonic.github.io/)

+ [X-tags](http://x-tags.org/), created by Mozilla



### APIs

+ [Pomlymer core](http://www.polymer-project.org/components/core-docs/index.html)

+ [Web Components Style Guide](https://github.com/GoogleWebComponents/style-guide)



## Tools

+ [Bower](http://bower.io/): a packet manager for the web

+ [Yeoman](http://yeoman.io/): command line scaffolding tool



## Boilerplates

Kickstart your web components development with a solid base

+ [Seed Element for Polymer](https://github.com/PolymerLabs/seed-element)

+ [Polymer boilerplate](https://github.com/webcomponents/polymer-boilerplate)

+ [X-tags boilerplate](https://github.com/webcomponents/x-tag-boilerplate)

+ [Vanilla js boilerplate](https://github.com/webcomponents/element-boilerplate)



## Browser support checking

Stay up to date with the current browser support of web components

+ [Are we componentized yet?](http://jonrimmer.github.io/are-we-componentized-yet/)

+ [Can I use web components?](http://caniuse.com/#search=web%20components)



## Galleries, bundles & demos

Search and Test drive ready-made components in these repos before adding them to your projects.

+ [Customelements.io](http://customelements.io/)

+ [Component Kitchen](http://component.kitchen/)

+ [Brick](http://mozilla.github.io/brick/index.html)



## Videos

+ [Polymer and front-end tooling, A Polymer workflow example](https://www.youtube.com/watch?v=EwQkyplZHDY#t=220)

+ [Web Component Mashups by Rob Dodson](https://www.youtube.com/watch?v=75EuHl6CSTo)

+ [Building modern apps with Polymer & Web Components](https://www.youtube.com/watch?v=VMVj_jR75vE)

+ [Advantages of Web Components - Jan Miksovsky](https://www.youtube.com/watch?v=qfpEOGW-zUc)



## Articles

### Introductions

+ [Introduction to custom elements](http://www.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/)

+ [Ten Principles for Great General Purpose Web Components](https://github.com/basic-web-components/components-dev/wiki/Ten-Principles-for-Great-General-Purpose-Web-Components)

+ [Defining new elements in HTML](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/)

+ [Getting Started With Web Components and polymer.js](http://4waisenkinder.de/blog/2013/09/21/getting-started-with-web-components-and-polymer-dot-js/?utm_medium=referral&utm_source=pulsenews)

+ [Shadow DOM 101](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)



### A little bit more in depth

+ [Styling elements in Polymer](http://www.polymer-project.org/articles/styling-elements.html) (useful article for theming your own components)

+ [Polymer Styling reference](http://www.polymer-project.org/docs/polymer/styling.html)

+ [A guide to styling elements in Polymer](http://www.polymer-project.org/articles/styling-elements.html)

+ [Sharing Polymer Components: Part 1](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-1--cms-21264)

+ [Sharing Polymer Components: Part 2](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497)

+ [Repeating templates in Polymer](http://robdodson.me/blog/2013/11/12/repeating-templates-in-polymer/)



## Demo Apps

+ [Polymer Todo App](http://todomvc.com/architecture-examples/polymer/index.html)



## Snippets, tips and tricks

Short snippets and quick tips. Learn something in 30 seconds.



+ How to avoid FOUC leveraging the [:unresolved pseudoclass](https://plus.google.com/+EricBidelman/posts/bbK5scDoPnc)



## Get help

Qustions tagged Polymer on [Stack Overflow](http://stackoverflow.com/questions/tagged/polymer)



## Who to follow

You should probably follow these people:

+ Polymer project on [Twitter](https://twitter.com/polymer)

+ Addy Osmani on [Twitter](https://twitter.com/addyosmani)

+ Rob Dodson on [Twitter](https://twitter.com/rob_dodson)

+ Eric Bidelman on [Twitter](https://twitter.com/ebidel)

+ Zeno Rocha on [Twitter](https://twitter.com/zenorocha/)



---

Credit where it's due. The present list is inspired by [this](https://github.com/nobitagit/AngularJS-Learning) AngularJs list.

Do I need to add a license to this? I don't think so.

But in case I do, I'd say [this one](https://tldrlegal.com/license/do-wtf-you-want-to-public-license-v2-(wtfpl-2.0)) quite fits.