rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update and add index

Browse Source
This commit is contained in:
Jonas Zeunert
2024-04-23 15:17:38 +02:00
parent 4d0cd768f7
commit 8d4db5d359
726 changed files with 41721 additions and 53949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
terminal/webcomponents
View File

@@ -1,12 +1,12 @@
 Awesome Web Components !Awesome (https://awesome.re/badge.svg) (https://awesome.re)
 Awesome Web Components !Awesome (https://awesome.re/badge.svg) (https://awesome.re)
A curated list of awesome Web Components resources.
▐ Note
▐ This project was previously named "Web Components the Right Way"
Web Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) — a suite of different technologies allowing you to create reusable custom elements — with their functionality 
encapsulated away from the rest of your code — and utilize them in your web apps.
Web Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — 
and utilize them in your web apps.
Contents
@@ -168,8 +168,7 @@
Codelabs
- Build a Story Web Component with LitElement (https://dev.to/straversi/build-a-story-web-component-with-litelement-e59)
- Building Custom Elements with Web Components for the 2020 Elections 
(https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a)
- Building Custom Elements with Web Components for the 2020 Elections (https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a)
- Creating Custom Form Controls with ElementInternals (https://css-tricks.com/creating-custom-form-controls-with-elementinternals/)
- From Web Component to Lit Element (https://codelabs.developers.google.com/codelabs/the-lit-path)
- HowTo Components – (https://web.dev/components-howto-checkbox/)
@@ -193,8 +192,7 @@
Architecture
- A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends 
(https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9)
- A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends (https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9)
- Frankenstein Migration: Framework-Agnostic Approach (Part 1) (https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/)
- Frankenstein Migration: Framework-Agnostic Approach (Part 2) (https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/)
- Generating Config driven Dynamic Forms using Web Components (https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e)
@@ -249,8 +247,7 @@
- Looking back on five years of web components (https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components)
- Shipping Web Components in 2020 (https://dev.to/joe8bit/shipping-web-components-in-2020-2h54)
- The Firefox UI is now built with Web Components (https://briangrinstead.com/blog/firefox-webcomponents/)
- Using web components to encapsulate CSS and resolve design system conflicts 
(https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/)
- Using web components to encapsulate CSS and resolve design system conflicts (https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/)
- Web Components at GitHub - Web Components SF Meetup (https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/)
- Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt (https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/)
- Web Development At Scale: Composable Applications With Web Components (https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be)
@@ -383,8 +380,7 @@
- DNA (https://github.com/chialab/dna) - Progressive Web Components library.
- element-js (https://github.com/webtides/element-js) - Simple and lightweight base classes for web components with a beautiful API.
- FAST Element (https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element) - Lightweight library for building performant, memory-efficient, standards-compliant Web 
Components.
- FAST Element (https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element) - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
- Forge Core (https://github.com/tyler-technologies-oss/forge-core) - Building blocks and utilities that are used when building Forge Web Components.
- Joist (https://github.com/joist-framework/joist) - Set of small libraries designed to add the bare minimum to web components to make you productive.
- Lit (https://lit.dev) - Simple library for building fast, lightweight web components.
@@ -473,21 +469,17 @@
- cypress-lit (https://github.com/simonireilly/cypress-lit) - Test your Lit elements and native web components in Cypress with all the modern browsers.
- Developing Components: Testing (https://open-wc.org/guides/developing-components/testing/) - Using @web/test-runner for testing web components in a real browser.
- How To Automate Shadow DOM In Selenium WebDriver (https://www.lambdatest.com/blog/shadow-dom-in-selenium/) - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
- Native Automation support for Shadow DOM (https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e) - Shadow DOM and 
open-source testing frameworks.
- Native Automation support for Shadow DOM (https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e) - Shadow DOM and open-source testing frameworks.
- Open Web Components: Testing (https://open-wc.org/docs/testing/testing-package/) - Opinionated package that combines and configures testing libraries.
- query-selector-shadow-dom (https://github.com/webdriverio/query-selector-shadow-dom) - querySelector that can pierce Shadow DOM roots, useful for automated testing.
- shadow-automation-selenium (https://github.com/sukgu/shadow-automation-selenium) - Shadow DOM automation using Selenium.
- Testing Shadow DOM elements in Selenium (https://reflect.run/articles/testing-shadow-dom-elements-in-selenium/) - In Selenium 4, there is now a way to access Shadow DOM nodes.
- Test web components with Playwright (https://alexbilson.dev/plants/technology/test-web-components-with-playwright/) - So you’ve created a native web component or two. How do you test them 
in popular browsers?
- W3C Webdriver conquering automation of Shadow DOM (https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c) - Shadow DOM tree and its 
interaction with the W3C Webdriver.
- Test web components with Playwright (https://alexbilson.dev/plants/technology/test-web-components-with-playwright/) - So you’ve created a native web component or two. How do you test them in popular browsers?
- W3C Webdriver conquering automation of Shadow DOM (https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c) - Shadow DOM tree and its interaction with the W3C Webdriver.
Tools
- Backlight (https://backlight.dev/) — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale 
and maintain Design Systems.
- Backlight (https://backlight.dev/) — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.
- Custom Elements Locator (https://github.com/open-wc/locator) - Chrome extension to find custom elements on a page.
- @storybook/web-components (https://www.npmjs.com/package/@storybook/web-components) - UI development environment for plain web-component snippets.
- webcomponents.dev (https://webcomponents.dev) - Component IDE for web platform developers.
@@ -532,22 +524,19 @@
- Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM (https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/)
- Labs Talk - Web Components with Peter Muessig (https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig)
- Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald (https://realtalkjavascript.simplecast.fm/eaf3db9e)
- Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement 
(https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement)
- Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement (https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement)
Presentations
- Are Web Components the Betamax of web development? (https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development) by @lostinbrittany 
(https://twitter.com/lostinbrittany)
- Are Web Components the Betamax of web development? (https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development) by @lostinbrittany (https://twitter.com/lostinbrittany)
- Designing Standard Systems (https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view) by @stefsull (https://twitter.com/stefsull) and @bferrua (https://twitter.com/bferrua)
- Frontend Architecture for Scalable Design Systems (https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components) by @salem_cobalt 
(https://twitter.com/salem_cobalt)
- Frontend Architecture for Scalable Design Systems (https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components) by @salem_cobalt (https://twitter.com/salem_cobalt)
- lit-apollo: Data-Driven Components that Use the Platform (https://apolloelements.dev/using-lit-apollo/) by @PowersBenny (https://twitter.com/PowersBenny)
- Mastering Shadow DOM (https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom) by @Martine_Dowden (https://twitter.com/Martine_Dowden)
- Modernizing Large Frontends with Web Components (https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components) by @samjulien (https://twitter.com/samjulien)
- Shadow DOM: off the beaten track (https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing) by @serhiikulykov (https://twitter.com/serhiikulykov)
- Using Web Components to Build a Framework-agnostic UI Library (https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library) by @brianbouril 
(https://twitter.com/brianbouril) and @danciupuliga (https://twitter.com/danciupuliga)
- Using Web Components to Build a Framework-agnostic UI Library (https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library) by @brianbouril (https://twitter.com/brianbouril) and @danciupuliga 
(https://twitter.com/danciupuliga)
- Web Components and the AOM (https://decks.tink.uk/2019/jsconf/index.html) by @LeonieWatson (https://twitter.com/LeonieWatson)
- Web Components and Styles Scoping (https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf) by @bashmish (https://twitter.com/bashmish)
- Web Components can do that?! (https://slides.com/vogloblinsky/web-components-can-do-that) by @vogloblinsky (https://twitter.com/vogloblinsky)
@@ -649,8 +638,7 @@
2017
- Styling is critical to web component reuse, but may prove difficult in practice 
(https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice)
- Styling is critical to web component reuse, but may prove difficult in practice (https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice)
- Web Components: The Long Game (https://infrequently.org/2017/10/web-components-the-long-game/)
- Web Components: Just in the Nick of Time (Polymer Summit 2017) (https://youtu.be/y-8Lmg5Gobw)
- Using Web Components in Ionic (Polymer Summit 2017) (https://youtu.be/UfD-k7aHkQE)