This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-03-09
Channels
- # announcements (4)
- # aws (3)
- # babashka (86)
- # babashka-sci-dev (31)
- # beginners (171)
- # biff (15)
- # calva (3)
- # clerk (47)
- # cljdoc (11)
- # clojure (59)
- # clojure-dev (11)
- # clojure-europe (122)
- # clojure-losangeles (1)
- # clojure-nl (2)
- # clojure-norway (4)
- # clojure-uk (2)
- # clojurescript (40)
- # cursive (5)
- # data-science (3)
- # datahike (1)
- # datomic (5)
- # fulcro (9)
- # graalvm (8)
- # hyperfiddle (17)
- # introduce-yourself (1)
- # java (28)
- # jobs (1)
- # malli (11)
- # membrane (9)
- # missionary (1)
- # nbb (1)
- # off-topic (5)
- # other-languages (1)
- # pedestal (1)
- # re-frame (4)
- # reagent (16)
- # releases (3)
- # remote-jobs (3)
- # shadow-cljs (83)
- # spacemacs (1)
- # sql (5)
- # tools-deps (28)
- # xtdb (15)
What's the proper place for global and local configurations? Anything from style and default paragraph width, background color, to local component dimensions (I might want to make a component resizable and the paragraph width to refer to that local dimension)
The end goal is to try and make these configurations easy to edit for designers. In the meantime, I think this is still an area where we don't have a lot of data points to know what the best practice should be. It's really common to arbitrarily scatter these values across html/css/javascript which is not what we want to do. Having said that, here's some thoughts to get started. If the value is rarely going to change, then top level defs in namespaces might make sense. If the value is really only related to a component, then you can just make it a component property with a default value. That looks something like:
(defui my-component [{:keys [foo]}]
(let [foo (or foo 42)]
...))
If they don't pass in :foo
, then it just uses the default value of 42
. If they do pass in :foo
, then it will use whatever value was passed in and refer to that property in intents.
If the value will change and might be used across components, then marking the property as contextual makes a lot of sense.
(defui my-component [{:keys [^:membrane.component/contextual
accent-color]}]
(ui/filled-rectangle accent-color
10 20))
If :accent-color
isn't explicitly passed, then it will use the :accent-color
found in the implicit context. If it is explicitly passed, then it will use the explicit value and reference.
For something like local component dimensions, I would just use a regular property with a default value.
You might also be interested in stretch layouts, https://github.com/phronmophobic/membrane.alpha.stretch.For a much longer, more general explanation on the subject, there's this section https://blog.phronemophobic.com/reusable-ui-components.html#Incidental-State
I'm in the process of working on some new stuff that should help with features like resizable components, number sliders, and scrollviews. The thing these all have in common is that once you start dragging, you want the drag events to respond to any mouse move in the window, not just within the initiating component's bounds.
I'm thinking every part of the UI should be configurable in any context, but right now I don't know how to give a user an option to change fonts, sizes, colors, component sizes, etc
I would start with putting that type of info in contextual properties
Would love to hear your thoughts if you get to try some of the ideas out. I think there's a lot of low hanging fruit here, but not all of the answers are obvious.