github/shoelace-style/shoelace
▻https://github.com/shoelace-style/shoelace
« A collection of professionally designed, every day UI components built on a framework-agnostic technology. 🥾 »
-
-
«Styling in the Shadow DOM With CSS Shadow Parts» by Ollie Williams, 13.04.2020
▻https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts -
« Form design — Best practice, research insights and examples » by Geri Reid
▻https://gerireid.com/forms.html« Working on a design system for a bank has taught me a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist accessibility organisations. I’ve seen forms tested by disabled people and users of assistive technology. I’ve also read a lot of research.
From all this learning I’ve formed my own forms best-practice guidelines. I thought it would be useful start recording it. Here’s my work in progress. I do UI/UX so I’m coming at this from a designer’s perspective. »
#ux #forms #css #webComponents #reference
-
« CSS and Network Performance » by Harry Roberts, 09.11.2018
▻https://csswizardry.com/2018/11/css-and-network-performanceImportant for Custom Elements / Web Component authors: CSS @import performance is poor; the article describes why, in great detail.
« Summary: lazyload any CSS not needed for Start Render; avoid @import, in CSS especially; be wary of synchronous CSS and JavaScript order; load CSS as the DOM needs it. »
-
« Browser Sign-in API » by Eiji Kitamura and Meggin Kearney, 30.07.2019
▻https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials
#webFundamentals #authentication #webComponents -
« pwa-auth: A New Sign-in Component for the Modern Web » by Judah Gabriel Himango, 14. 04.2020
▻https://medium.com/pwabuilder/pwa-auth-a-new-sign-in-component-for-the-modern-web-e8c0257273f0
#webComponents #pwa #authentication -
« Recreating The Arduino Pushbutton Using SVG And ‹lit-element› » by Uri Shaked, 20.01.2020
▻https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg#webComponents #svg #html #usability #accessibility #aria #article
Cet article est truffé d’astuces et il adresse richement l’utilisation de lit-html et lit-element pour créer un composant SVG, bien fichu et accessible qui plus est.
Pardonnez-moi, oui, je m’intéresse parfois à ces extremum de technicalité (si vous me passez encore ce néo-anglicisme de mon cru) et arcanes du web. J’adore les technologies du web en fait, suis accro.
-
«
composed: trueconsidered harmful? » by Johnson Westbrook, 07–08.11.2019
▻https://dev.to/open-wc/composed-true-considered-harmful-5g59
#webComponents #events #javascriptDetailed description of event propagation with various use cases; and description of one pattern, for event propagation in the DOM and web apps. I would not much recommend using this pattern, yet the article triggers reflection on those patterns and spawned an interesting discussion on Twitter.
-
« Managing events in your custom elements » by Open WC, 03.01.2020 (collective)
▻https://open-wc.org/faq/events.html
#webComponents #events #javascript -
« Building a Complex Application with Web Components and LitElement » by Justin Fagnani (vidéo, 48mn.)
▻https://www.youtube.com/watch?v=x9YDQUJx2uw
#webComponents #litElement #patterns #talk« Advanced techniques necessary for building large apps: cross-component coordination, state management, lazy loading views and components, deferred rendering, context-like APIs based on events, render-props with lit-element, theming, and possibly SSR and rehydration. This will focus much more on overall architecture and advanced techniques than web components basics. Non-web components topics like service workers and PWAs may be touched on, but the focus will be web components and LitElement. »
-
« How to create an image gallery with CSS Grid » by Abhishek Jakhar, 27.12.2018 ▻https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c #css #grid #webcomponents #gallery
-
« Web components: the secret ingredient helping power the web » by Arthur Ewans, 18.06.2019, at Google I/O 2019 ▻https://web.dev/web-components-io-2019 #webComponents
-
« Why We Use Web Components » by Ionic, Max Lynch, 08.07.2019
▻https://dev.to/ionic/why-we-use-web-components-2c1i #webComponentsBon essai, qui déplace le débat hors du champ technique ; et de la comparaison entre les APIs des WebComponents et les frameworks React/Vue/Angular/Ember ; vers les problèmes métier d’interopérabilité des composants UI, et de conception d’un système de composant d’entreprise.
-
« Why I don’t use web components » by Rich Harris, 20.06.2019 ▻https://dev.to/richharris/why-i-don-t-use-web-components-2cia #webComponents
-
A JavaScript library that makes observing changes to the DOM easy ▻https://github.com/rafaelw/mutation-summary #webcomponents
-
« Detect DOM changes with Mutation Observers » by Paul Kinlan ▻https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers #webcomponents
-
Quick tour of Polymer - Polymer Project
▻https://www.polymer-project.org/1.0/docs/devguide/quick-tourLa présentation du fonctionnement de Polymer vu du côté codeur.
Polymer, framewok développé par Google, permet de découper une application web en plusieurs morceaux (composants), indépendants, qui contiennent le code HTML (structure), le style CSS et le code Javascript . Le framework fourni un ensemble de composants Polymer préexistants et donne la possibilité de créer ses propres composants.
Voir aussi : ▻https://github.com/Polymer/polymerPour le concept plus général de « web component », voir ▻http://jonrimmer.github.io/are-we-componentized-yet
et ▻http://webcomponents.orgPour la version Mozilla des webcomponents (= X-tag), voir ▻http://x-tag.github.io
#polymer #google #framework #application #web_dev #composant #webcomponents
