Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/heybran/web-components-resources

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/heybran/web-components-resources
Owner: heybran
Created: 2022-08-06T11:08:28.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-02-03T12:06:04.000Z (10 months ago)
Last Synced: 2024-02-03T13:23:55.805Z (10 months ago)
Size: 8.79 KB
Stars: 8
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Web Components Resources

## For New Comers
- MDN: https://developer.mozilla.org/en-US/docs/Web/Web_Components
- JAVASCRIPT.INFO: https://javascript.info/web-components
- web.dev: https://web.dev/web-components/
- https://github.com/knowler/custom-element-lifecycle-element

## Standalone Web Components

### David Darnes
- https://darn.es/is-playing-web-component/

### Zach Leatherman
- https://www.zachleat.com/web/snow-fall/
- https://github.com/zachleat/browser-window

## Web Components Projects

- https://webcomponent.io/

## Testing Web Components

- https://lea.codes/posts/2023-12-18-testing-web-components/

## Articles

### Smashing Magazine

- https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
- https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/
- https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/

### Lea Verou

- https://projects.verou.me/nudeforms/button-group/

### Camilo Reyes

- https://www.sitepoint.com/frameworkless-web-components-introduction/
- https://www.sitepoint.com/build-frameworkless-web-app-modern-javascript-web-components/

### Chris Haynes

- https://lamplightdev.com/blog/tag/web%20components/
- https://waferlib.netlify.app/

### Francesco Strazzullo

- https://github.com/francesco-strazzullo/frameworkless-front-end-development

### Ayush Gupta

- Part 1: https://ayushgp.xyz/html-web-components-using-vanilla-js/
- Part 2: https://ayushgp.xyz/html-web-components-using-vanilla-js-part-2/
- Part 3: https://ayushgp.xyz/html-web-components-using-vanilla-js-part-3/

### From Mastodon

- [Introduction to Vanilla Web Components](https://tomascornelles.com/en/blog/2023/introduction-to-vanilla-web-components/)
- https://www.leereamsnyder.com/web-component-and-somehow-also-js-101
- [HTML web components](https://adactio.com/journal/20618)
- [Improving a web component, one step at a time](https://blog.ltgt.net/web-component-step-by-step-improvement/)

### Others

- https://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
- https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
- Part 1: https://jack.ofspades.com/developing-small-javascript-components-without-frameworks/
- Part 2: https://jack.ofspades.com/frameworkless-javascript-part-2-templates-and-rendering/
- Part 3: https://jack.ofspades.com/frameworkless-javascript-part-3-one-way-data-binding/

## Web Components Router

- Vaadin Router: https://github.com/vaadin/router
- https://github.com/markcellus/router-component
- https://github.com/andreasbm/router-slot
- https://github.com/colscott/a-wc-router
- https://github.com/Simplr/simplr-router
- https://github.com/dedego/web-component-router
- https://github.com/aaronshaf/html-router
- https://github.com/ryansolid/webcomponent-router

## Frameworkless Movement

- https://github.com/frameworkless-movement/awesome-frameworkless#javascript

## New Things

- CSS Module Scripts (https://web.dev/css-module-scripts/)

## Web Components Library

- Shoelace: https://github.com/shoelace-style/shoelace
- Spectrum Web Components: https://github.com/adobe/spectrum-web-components
- Nord Web Components: https://nordhealth.design/web-components/
- Lion: https://lion-web.netlify.app/components/
- UI5 Web Components: https://github.com/SAP/ui5-webcomponents
- Vaadin Web Components: https://github.com/vaadin/web-components