Web Component Interoperability - sgml/signature GitHub Wiki
https://medium.com/@WebReflection/js-is-not-worse-than-84a5fca0e87d
- https://dev.to/nandod1707/should-you-care-about-xss-in-vuejs-1ea6
- https://blog.sqreen.com/xss-in-vue-js/
- https://vuejs.org/v2/guide/security.html
- https://012.vuejs.org/api/global-api.html
- https://nuxtjs.org/api/context
- https://reactjs.org/docs/react-api.html
- https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- https://developer.salesforce.com/blogs/2020/02/designing-lightning-pages-for-scale.html
- https://pdfernhout.net/on-moving-to-mithril-and-typescript-for-narrafirma.html
- https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/#running-hooks-within-a-loop
- https://americanexpress.io/hydra/
- https://peteroshaughnessy.com/posts/disappearing-frameworks/
- https://blog.bitsrc.io/9-web-component-ui-libraries-you-should-know-in-2019-9d4476c3f103
- https://www.infoq.com/news/2019/05/svelte-3-interview-rich-harris/
- https://home.aveek.io/blog/post/get-started-with-svelte/
- https://mithril.js.org/keys.html
- https://gilbert.ghost.io/mithril-js-tutorial-1/
- https://medium.com/@miiny/getting-to-know-mithril-js-b6825641e043
- https://vadosware.io/post/mithril-systemjs-and-rollup-getting-started-guide/
- https://news.ycombinator.com/item?id=17032866
- https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-svelte-here-are-the-differences-c0bd2cc9b3f8
- https://www.mikenikles.com/blog/why-i-moved-from-react-to-svelte-and-why-others-will-follow/
- https://www.twilio.com/blog/building-a-single-page-application-with-symfony-php-and-react
xtag.create('x-clock', class extends XTagElement { connectedCallback () { this.start(); } start (){ this.update(); this._interval = setInterval(() => this.update(), 1000); } stop (){ this._interval = clearInterval(this._data.interval); } update (){ this.textContent = new Date().toLocaleTimeString(); } 'tap::event' (){ if (this._interval) this.stop(); else this.start(); } });
vCard
iCal
creativecommons
schema.org
csv/tsv
Let's say you provide component A which contains component B which contains component C. Someone else wants to replace C with D, so they have to customize B to create D instead of C (which results in component E) and then customize component A to instantiate E instead of B. So the end goal was A contains B contains D, but the result was F contains E contains D.
##HTML5 Interactive Elements
<menu>
element
jpeg-xr
requestidlecallback
`<base>` decorator
`<href>` proxy
`<form>` validation
`<canvas>` throttling
`<pre>` escaping
`<iframe>` cors
bookmarklet csp
`<img>` srcset
`<svg>` transclusion
wai-aria
i18n
- https://semantic-ui-vue.github.io
- https://react.semantic-ui.com
- https://ng-semantic.herokuapp.com/
- https://edcarroll.github.io/ng2-semantic-ui/
The collections are the key:
Added React.Children.toArray which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. In addition, React.Children.map now returns plain arrays too.
With CommonJS, on the other hand, the shape of a module is not known until after the code is evaluated. What this means is, without making significant changes to the ECMAScript language spec, it will not be possible to use Named Imports from a CommonJS module.
Pattern Category Library API Method Name URL Exception Handler React componentDidCatch https://reactjs.org/docs/error-boundaries.html
You can have a single module that exports many React components.
Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering.
Some “falsy” values, such as the 0 number, are still rendered by React. To fix this, make sure that the expression before && is always boolean
Conversely, if you want a value like false, true, null, or undefined to appear in the output, you have to convert it to a string first
So if you're a new React developer who wants to do something out of the ordinary like, oh, I don't know, handle errors, then you'll need to learn this big old class-based API that you'll probably never see again in your life.
<multistep-form>
<form action="https://postman-echo.com/post" method="post">
<fieldset>
<legend>Your Info</legend>
<p>
<label for="firstname">
First Name:
</label>
<input type="text" id="firstname" name="firstname">
</p>
<p>
<label for="lastname">
Last Name:
</label>
<input type="text" id="lastname" name="lastname">
</p>
<p>
<label for="email">
Email:
</label>
<input type="email" id="email" name="email">
</p>
</fieldset>
<fieldset>
<legend>Payment Info</legend>
<p>
<label for="ccnumber">
Credit Card Number:
</label>
<input type="text" id="ccnumber" name="ccnumber">
</p>
<p>
<label for="ccv">
CCV:
</label>
<input type="text" id="ccv" name="ccv">
</p>
<p>
<label for="expdate">
Expiration Date:
</label>
<input type="text" id="expdate" name="expdate">
</p>
</fieldset>
<fieldset>
<legend>Shipping Info</legend>
<p>
<label for="street">
Street:
</label>
<input type="text" id="street" name="street">
</p>
<p>
<label for="City">
City:
</label>
<input type="text" id="city" name="city">
</p>
<p>
<label for="state">
State:
</label>
<input type="text" id="state" name="state">
</p>
<p>
<label for="postalcode">
Postal Code:
</label>
<input type="text" id="postalcode" name="postalcode">
</p>
<input type="submit">
</fieldset>
</form>
</multistep-form>
label { display: inline-block; width: 140px; }
class MultistepForm extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode:'open'}); this.totalSets = this.querySelectorAll('fieldset').length; this.current = 0; const wrapper = document.createElement('div'); wrapper.innerHTML = `Previous Step 1 of ${this.totalSets} Next
`; this.$nextButton = wrapper.querySelector('#nextButton'); this.$prevButton = wrapper.querySelector('#prevButton'); this.$currentSetNum = wrapper.querySelector('#currentSetNum'); shadow.appendChild(wrapper); } connectedCallback() { this.$nextButton.addEventListener('click', e => this.nextSet(e)); this.$prevButton.addEventListener('click', e => this.prevSet(e)); this.$sets = this.querySelectorAll('fieldset'); this.$sets.forEach(s => { s.style.display='none'; }); this.updateDisplay(); } nextSet() { if(this.current+1 == this.totalSets) return; this.current++; this.updateDisplay(); } prevSet() { if(this.current == 0) return; this.current--; this.updateDisplay(); } updateDisplay() { this.$sets.forEach((s, x) => { if(x === this.current) this.$sets[x].style.display = 'block'; else this.$sets[x].style.display = 'none'; }); this.$currentSetNum.innerText = this.current+1; } } customElements.define('multistep-form', MultistepForm);
- http://jeffcarp.github.io/frontend-hyperpolyglot/
- https://apache.github.io/royale-docs/create-an-application/migrate-an-existing-app/migrate-from-flex.html
- https://github.com/glimmerjs/glimmer-vm/blob/master/guides/11-glossary.md
- https://ngdev.space/custom-elements-v1-and-angular-eb6b3fdb5c51
- https://netbasal.com/understanding-the-magic-behind-angular-elements-8e6804f32e9f
- https://community.alfresco.com/community/ecm/blog/2017/01/16/deja-vue
- http://www.ibiblio.org/hhalpin/homepage/notes/vcardtable.html
- https://www.w3.org/2011/rdfa-context/rdfa-1.1
- https://itnext.io/a-wicked-custom-elements-alternative-6d1504b5857f?source=user_profile---------2------------------&gi=a1ec46e1619f
- http://devdocs.io/requirejs/
- http://grml.in/learn/
- https://bugzilla.mozilla.org/buglist.cgi?quicksearch=product%3Adevtools+summary%3Areact+component%3Ageneral+resolution%3Afixed
- https://hackernoon.com/transforming-callbacks-into-promises-and-back-again-e274c7cf7293
- http://vuetips.com/vue-web-components
- https://codepen.io/Codebryo/pen/wGEzwv
- https://thesoftwaresimpleton.com/blog/2017/11/05/accessible-react
- https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n
- https://vuejsdevelopers.com/2019/05/13/accessibility-validation-aria-vuejs/
- https://marketing.adobe.com/resources/help/en_US/sc/implement/accelerated-mobile-pages.html
- https://www.webcomponents.org/specs
- https://developers.google.com/web/updates/2017/01/webcomponents-org
- https://onsen.io/blog/create-reusable-future-proof-ui-components-with-custom-elements-v1-web-components/
- https://skatejs.gitbooks.io/skatejs/content/docs/api/Component.html#connectedcallback---supersedes-static-attached
- http://robdodson.me/interoperable-custom-elements/
- https://webkit.org/blog/7027/introducing-custom-elements/
- https://steele.blue/custom-elements-angularjs/
- https://material.io/components/web/docs/framework-integration/
- http://krasimirtsonev.com/blog/article/react-js-in-design-patterns
- http://vuetips.com/global-event-bus
- https://staltz.com/nothing-new-in-react-and-flux-except-one-thing.html
- https://medium.com/@foxdonut00/you-dont-need-redux-mobx-rxjs-cerebral-6a735b150a02
- http://zhenhua-lee.github.io/react/state-manage.html
- https://reactjs.org/docs/uncontrolled-components.html
- https://daveceddia.com/angular-directives-mapped-to-react/
- https://docs.microsoft.com/en-us/sharepoint/dev/general-development/build-reusable-components-for-sharepoint
- http://josdejong.com/blog/2015/01/06/code-reuse/
- https://circleci.com/blog/why-we-broke-our-philosophical-vows-to-bring-you-circleci-2-0/
- http://dehora.net/journal/2008/06/24/plugin-pros-and-cons/
- https://gcc.gnu.org/wiki/GCC_Plugins
- https://thorsten-hans.com/i18n-in-angular-apps-c0ed022c8a02
- https://www.npmjs.com/package/react-mutation-observer
- https://yiochen.github.io/blog/post/state-aware-pipe/
- https://stackoverflow.com/questions/40788115/reactjs-how-to-know-when-a-component-is-removed-from-dom
- https://marcysutton.github.io/react-a11y-presentation/#/8
- https://medium.com/@StartXLabs/how-to-get-react-js-to-work-with-fullcalendar-js-9d4c1270b4b
- https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday
- https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
- http://lucybain.com/blog/2018/react-js-pure-component/
- https://60devs.com/pure-component-in-react.html
- https://github.com/facebook/react/issues/7778
- https://www.youtube.com/watch?v=dRo_egw7tBc
- https://github.com/facebook/react/issues/3657
- http://cheng.logdown.com/posts/2016/03/23/672523
- https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
- https://material.io/guidelines/components/widgets.html#widgets-behavior
- https://www.w3.org/blog/wai-components-gallery/
- https://spin.atomicobject.com/2016/04/05/single-page-app-components/
- https://medium.com/@TheStrazz86/create-a-fully-reactive-ui-framework-with-javascript-proxies-and-virtual-dom-c6fb28253776
- https://www.frontendhandbook.com/tools/ui.html
- https://www.w3.org/TR/xhtml11/xhtml11_schema.html#a_xhtml11_schema
- https://www.w3.org/TR/xml-events/
- https://medium.com/@samerbuna/you-dont-know-node-6515a658a1ed
- https://medium.com/the-node-js-collection/node-js-and-the-web-tooling-benchmark-c982a88cf5b6
- https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
- https://javascriptplayground.com/functional-stateless-components-react/
- https://github.com/facebook/react/issues/11896
- https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields
- https://www.lullabot.com/articles/processing-forms-in-react
- https://stackoverflow.com/questions/43085762/how-to-pass-form-values-as-formdata-in-reactjs-on-submit-function
- https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34
- https://blog.benestudio.co/test-driven-react-js-development-react-js-unit-testing-with-enzyme-and-jest-366190741169
- https://codeburst.io/revisiting-node-js-testing-part-1-84c33bb4d711
- https://www.ynonperek.com/2017/09/07/6-react-mistakes-to-avoid/
- https://j5bot.github.io/react-capitalized-reference-dynamic-component-demo/
- https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
- https://www.filamentgroup.com/lab/accessible-responsive.html
- https://stackoverflow.com/questions/38442091/how-to-do-responsive-components-in-angular2
- https://github.com/facebook/react/issues/2127
- https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/
- http://neekey.net/2016/08/28/implementing-responsive-design-in-react/
- https://developer.salesforce.com/page/Webinar_FAQ:_Intro_to_Force.com_Canvas
- https://developer.salesforce.com/blogs/developer-relations/2016/05/streaming-salesforce-events-heroku-kafka.html
- https://engineering.salesforce.com/the-full-picture-on-http-2-and-hol-blocking-7f964b34d205
- https://engineering.salesforce.com/delivering-mobile-data-tcp-or-udp-95d9d271be2f
- https://engineering.salesforce.com/the-full-picture-on-http-2-and-hol-blocking-7f964b34d205
- https://developer.salesforce.com/page/Network_Best_Practices_for_Salesforce_Architects
- https://www.bennadel.com/blog/2860-an-experiment-in-what-react-s-jsx-might-feel-like-in-angularjs.htm
- https://github.com/facebook/react/issues/2401
- https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918
- https://yuilibrary.com/yui/docs/imageloader/
- https://stuartashworth.com/blog/handling-image-load-errors-in-ext-js-universal-apps/
- https://mootools.net/more/docs/1.6.0/Utilities/Assets
- https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15841301/
- https://medium.com/the-node-js-collection/an-update-on-es6-modules-in-node-js-42c958b890c
- https://stackoverflow.com/questions/46110799/is-there-an-equivalent-for-ng-show-and-ng-hide-in-react-js/48651306
- https://medium.com/@baphemot/a-react-job-interview-recruiter-perspective-f1096f54dd16
- https://github.com/reactjs/react-future/issues/35
- https://stackoverflow.com/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js/36771363
- https://reactjsnews.com/NgRepeat-Equivalent-in-React
- https://docs.sencha.com/extjs/6.5.3/modern/Ext.field.Search.html
- https://slonoed.net/react-animation-done-right
- https://stackoverflow.com/questions/51223592/triggering-imperative-animations-using-react-refs https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/ https://www.vuemastery.com/courses/advanced-components/evan-you-on-proxies/ https://dev.to/solkimicreb/the-ideas-behind-react-easy-state-utilizing-es6-proxies-1dc7 https://medium.com/intrinsic/proxies-and-reflection-in-javascript-334412028f69 https://reactjsnews.com/proxies-with-redux-types https://github.com/tshaddix/react-chrome-redux/wiki/Advanced-Usage https://redux.js.org/introduction/ecosystem
- https://www.sitepen.com/blog/web-components-in-2018/
- https://www.npmjs.com/package/component-literal
- https://stackoverflow.com/questions/41408477/nested-element-web-component-cant-get-its-template
- https://codepen.io/trentmwillis/pen/NaBYWN/
- https://code.haxe.org/category/beginner/strings.html
- https://medium.com/@aravishack/es6-features-a-walk-through-1ffd8eb82f6
- https://medium.com/content-uneditable/implementing-single-file-web-components-22adeaa0cd17
- https://ayushgp.github.io/html-web-components-using-vanilla-js-part-3/
- https://ayushgp.github.io/html-web-components-using-vanilla-js/
- https://www.balisage.net/Proceedings/vol13/html/Milowski01/BalisageVol13-Milowski01.html
- https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/
- https://dev.to/ben/why-the-react-community-is-missing-the-point-about-web-components-1ic3
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
- https://medium.com/@wilsotobianco/es6-template-literal-use-cases-e20458992fe
- https://dev.to/thepassle/web-components-from-zero-to-hero-part-two-38p4
- https://github.com/Microsoft/vscode/issues/51171
- https://blogs.msdn.microsoft.com/onecode/tag/vue-js/
- https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
- https://blogs.msdn.microsoft.com/webdev/2017/11/28/improve-website-performance-by-optimizing-images/
- https://msdn.microsoft.com/en-us/magazine/mt632272.aspx
- http://odinodin.no/2015-07-14-react-hover/
- https://www.balisage.net/Proceedings/vol21/html/Thompson01/BalisageVol21-Thompson01.html
- https://codeburst.io/the-true-delight-of-reacts-error-and-warning-messages-137002a3bbd4
- https://amp.dev/documentation/examples/
- https://dev.to/ben/why-the-react-community-is-missing-the-point-about-web-components-1ic3
- https://github.com/vuejs/vue-router/pull/1448
- https://github.com/vuejs/vue-router/pull/1396
- https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-the-initmixin-function-part-1-dc951603a3c
- https://www.tutorialspoint.com/vuejs/vuejs_instances.htm
- https://medium.com/js-dojo/use-any-javascript-library-with-vue-js-3f7e2a4974a8
- https://github.com/Wildhoney/ReactShadow
- https://joecritchley.svbtle.com/transclusion-in-react
- https://blog.scottlogic.com/2017/05/24/creating-semantic-components-in-angular-and-react.html
- https://hackernoon.com/how-to-turn-react-component-into-native-web-component-84834315cb24
- https://vahrushev.info/2018/02/03/angular-like-multi-slot-transclusion-in-reac/
- https://www.polymer-project.org/blog/2018-10-02-webcomponents-v0-deprecations
- https://vuejs.org/v2/guide/migration.html
- https://vuejs.org/v2/guide/computed.html
- https://medium.com/@gilfink/gil-fink-s-blog-a04dc4f49f45
- https://dev.to/vonheikemen/creating-react-components-using-only-es5-features-52a1
- https://reactjs.org/docs/react-dom.html#reference
- https://mithril.js.org/framework-comparison.html
- https://www.thefutureoftheweb.com/blog/the-simplest-svelte-component-is-an-empty-file
- https://codepen.io/cfjedimaster/pen/xxJoXad