From aaff661b97340332a7c04c471ff92b11b988a592 Mon Sep 17 00:00:00 2001 From: Avichay Eyal Date: Sat, 29 Apr 2017 21:48:44 +0300 Subject: [PATCH 1/3] Update resources.md slim.js has documentation. skate.js.org (documentation) is 404 and doesn't exist anymore --- static/resources.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/resources.md b/static/resources.md index 758d7fe..2352f96 100644 --- a/static/resources.md +++ b/static/resources.md @@ -4,7 +4,7 @@ The WebComponents.org Resources section is a place to showcase useful tools and Web Components is a set of specs that introduce powerful new capabilities to the web platform. Before getting started with your first custom element, it will be helpful to understand the scope of these new features. The [Introduction](/introduction) section contains an overview of these APIs. The [Community](/community) section is also a great way to catch up on the latest goings-on in the Web Components world. We’d also recommend starting out by reading the Getting Started sections of: * [Polymer's documentation;](https://www.polymer-project.org/) - * [SkateJS's documentation.](http://skate.js.org/) + * [Slim.js's documentation.](http://slim.js.org/) * [X-Tag's documentation.](http://x-tag.github.io/docs) These will give you an idea on how these libraries for building web components work and what might be best for you. From d0a305d3b2784b15a1615b18cda1137081b67f89 Mon Sep 17 00:00:00 2001 From: Avichay Eyal Date: Tue, 2 May 2017 22:52:47 +0300 Subject: [PATCH 2/3] Update resources.md --- static/resources.md | 1 + 1 file changed, 1 insertion(+) diff --git a/static/resources.md b/static/resources.md index 2352f96..cb3846c 100644 --- a/static/resources.md +++ b/static/resources.md @@ -5,6 +5,7 @@ The WebComponents.org Resources section is a place to showcase useful tools and Web Components is a set of specs that introduce powerful new capabilities to the web platform. Before getting started with your first custom element, it will be helpful to understand the scope of these new features. The [Introduction](/introduction) section contains an overview of these APIs. The [Community](/community) section is also a great way to catch up on the latest goings-on in the Web Components world. We’d also recommend starting out by reading the Getting Started sections of: * [Polymer's documentation;](https://www.polymer-project.org/) * [Slim.js's documentation.](http://slim.js.org/) + * [Skate.js's documentation.](https://skatejs.gitbooks.io/skatejs/content/) * [X-Tag's documentation.](http://x-tag.github.io/docs) These will give you an idea on how these libraries for building web components work and what might be best for you. From ffe0c5ee4329d0db77d1a37e0704efb1834b88dc Mon Sep 17 00:00:00 2001 From: eavichay Date: Sun, 28 Oct 2018 09:42:33 +0200 Subject: [PATCH 3/3] Adding showroom as a tool --- static/libraries.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/static/libraries.md b/static/libraries.md index 8406466..d177220 100644 --- a/static/libraries.md +++ b/static/libraries.md @@ -15,14 +15,18 @@ When choosing a web component library, make sure it has a large enough featurese This list has been compiled by the community and can be modified [via pull request under the community repository](https://github.com/webcomponents/community/edit/master/static/libraries.md) for this website. Projects are listed alphabetically and are known to support all four aspects of the web components specification. - * [Hybrids](https://github.com/hybridsjs/hybrids) is a UI library for creating web components with simple and functional API. The library uses plain objects and pure functions for defining custom elements, which allow very flexible composition. It provides built-in cache mechanism, template engine based on tagged template literals, and integration with developer tools. + * [Hybrids](https://github.com/hybridsjs/hybrids) is a UI library for creating web components with simple and functional API. The library uses plain objects and pure functions for defining custom elements, which allow very flexible composition. It provides built-in cache mechanism, template engine based on tagged template literals, and integration with developer tools. * [LitElement](https://github.com/Polymer/lit-element) uses [lit-html](https://github.com/Polymer/lit-html) to render into the element's Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html. - + * [Polymer](https://www.polymer-project.org/) is a web component library built by Google, with a simple element creation API. Polymer offers one- and two-way data binding into element templates, and provides shims for better cross-browser performance. * [Skate.js](https://skatejs.gitbooks.io/skatejs/content/) is a library built on top of the W3C web component specs that enables you to write functional and performant web components with a very small footprint. Skate is inherently cross-framework compatible. For example, it works seamlessly with - and complements - React and other frameworks. - + * [Slim.js](http://slimjs.com) Slim.js is a lightweight web component library that provides extended capabilities for components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the hassle of dependencies and an overhead of a framework. - + * [Stencil](https://stenciljs.com/) is an opensource compiler that generates standards-compliant web components. + + # Development tools + + * [showroom](https://github.com/eavichay/showroom) is a visual development and testing environment for web components of any stack. It provides a user-inserface and a puppeteer plugin to test custom elements in isolated environment.