web components
A comment @n1xx1 made over in #development-basics (https://discord.com/channels/732325252788387980/754127569246355477/883296860092117032) got me thinking about something -- would there be any value to a shared set of UI components built on the Web Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) spec? With or without something like
lit. Kind of like our own little design system to take care of tasks like accordions, pagination, etc.Web Components | MDN
Web Components is 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.
C
Calego•985d ago
Let's thread this
I'm intrigued but skeptical
W
wyrmisis•985d ago
What concerns do you have?
C
Calego•985d ago
I come from react land for my day job and somehow despite my best efforts every time I try to make a component library the exceptions outnumber the commonalities.
My skeptical side says "very few people will use this because every one will have a different use case"
However, I'm all for working together and love the idea of making a library module which provides ui patterns ready made for people to use (and core to consider implementing perhaps)
Accordions for instance are a great example.
Imo if I need one I use
details elements, but my use cases are never very complex.
Core has at least 2 cases where it used them, if you include 5e
They're thus a pretty ubiquitous pattern that everyone has probably done a little differently
Standardizing that work would rockW
wyrmisis•985d ago
That's where my head is -- standardization of function, even if it's not standardization of style.
C
Calego•985d ago
Yeah that makes a lot of sense
I've never used web components, this would be a fun way to see their potential
W
wyrmisis•985d ago
My day job until recently was to build this kind of component library, using Web Components. The Shadow DOM stuff is a little different to get your head around at first, but once you understand how to work with it, it's not too bad.
C
Calego•985d ago
What are some prime candidates for this sort of pattern that either:
A) Core does not handle
B) You feel core does not handle sufficiently
?
I'd prefer to focus on A before B, but that's obviously just me
You mention pagination, it's a good classic example but I don't think I've seen any examples of it in foundry
Accordions are the biggest thing I can think of.
Otherwise most patterns (that I've seen in foundry) are covered with something common already. For things that core kind of had but not really, it would be neater to extend core rather than seek to replace.
E.g. "free floating menu" is a pattern that's gaining popularity. These are Applications at their heart, but with a common set of changes that would be cool to standardize.
W
wyrmisis•985d ago
I should preface this with, I'm pretty darn green to the Foundry ecosystem, and I don't know what the norms are in UI development in this ecosystem. That said...
* Accordions
* Pagination
* Filterable/sortable tables
* Tab groups that don't rely on any JS-level configuration
* Dynamic lists of data structures (example: having n+0 items in a list that can contain a character class feature and the level it's unlocked at)
There are a lot of other little niceties, like icon buttons, multiselects that display their output in a relatively nice form, typeaheads, stuff like that, that I'd wonder about bringing in, too.
As well as a set of CSS vars to control styling all of this.
C
Calego•985d ago
Oh autocomplete selects is a good call!
I'm not convinced about tab groups as core does have stuff for that.
Filterable anything is another good call, not just tables but lists too
In your shoes I'd start with accordions and autocomplete/multi selects; as those are the two biggest missing-from-core things in your list
Web components smells like exactly the kind of tech Atro would be interested in using as well, so if be fun to show off how powerful they can be
W
wyrmisis•985d ago
Heck yeah. I'll get something spun up after work today. I could probably use a break from this OSR system I'm porting in 😅
Want results from more Discord servers?
More PostsUI element JS Classeshttps://discord.com/channels/732325252788387980/734922093967310910/882979923483037696
@wyrmisis
> Imid-milestone ping feedback@dnd5e **No Action Required**
Wanted to ping you to make you aware that the 1.5.0 milestone is >50%Hot ReloadingIs there a way to do something like hot module reloading/live reloading on change for Foundry?Tagger Code ReviewWould anyone be keen to code review Tagger? I'd like to git better 😄
https://github.com/Haxxer/Founsocket woesnot the socket firingpreUpdateSo for some reason ItemPF#_preUpdate changes aren't sticking.. what is PF1 doing that prevents this?mergeObject`mergeObject` is a beast of a function which lets you smash two objects together and that options arselect in sheetAlso, is the data actually saved on the actor? You can inspect the data in the console opened with FIC 5e DocsI'm not looking to ping about this but for anyone who sees this: I'm interested to know if anyone hecustom hud elementMaybe I'm missing something simple here. I'm making my own custom hud element (NOT based on a FoundrCover@badgerwerks how does the cover application for 5e helpers work?
I know you do black magic to calculGitpod WorkflowHas anyone figured out a codespaces workflow?Dynamically get Object property from user inputAnyone know how I can do this?
I have an Actor (`myactor`) and I'd like to have an input box which autopublishI'm trying to use @varriount's AutoPublish, but I keep getting this error. Any ideas?https://github.symlinking foundry.js and vscodeIs this something you were able to do with vscode? I'm trying right now with both WSL2 symlinks and Releases to ChangelogI just automatically made a Changelog by going to https://github.com/arcanistzed/scs/releases and rucodespacesGo to any github repository and press `.`
You'll get kicked over to a `github.dev` version of the reequipmentType bonus⚠️ Breaking Changes ⚠️
The `DND5E.equipmentTypes` type of `bonus` has been removed. Any in-world `Scroll Into View troublesAnyone know why `Element.scrollIntoViewIfNeeded()` is working, but `Element.scrollIntoView()` isn't?DevMode Settings Explorer feedbackSo, I'm working on the styling for a little potential addition to Calego's 'Developer Mode' module a