This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-01-02
Channels
- # announcements (1)
- # beginners (15)
- # calva (6)
- # cider (72)
- # clojure (105)
- # clojure-europe (2)
- # clojure-france (1)
- # clojure-italy (4)
- # clojure-nl (2)
- # clojure-uk (32)
- # clojurescript (14)
- # code-reviews (10)
- # cursive (8)
- # data-science (2)
- # datomic (38)
- # events (1)
- # fulcro (31)
- # graphql (1)
- # hyperfiddle (47)
- # java (4)
- # jobs (4)
- # off-topic (18)
- # overtone (2)
- # parinfer (12)
- # pathom (19)
- # pedestal (4)
- # philosophy (2)
- # portkey (22)
- # re-frame (42)
- # reagent (1)
- # rum (1)
- # shadow-cljs (36)
- # specter (3)
- # tools-deps (2)
What's the typical method of checking if the client is mobile or desktop for providing different hiccup based on that response?
I'd like to create a slightly different Material-UI Grid if it's a mobile client
Is it as trivial as throwing an if at that point of the hiccup?
I'd use css with media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp
And just hide the elements with css.
There was a much simpler method within Material-UI in the old version. I don't know what happened to it
So now I'm having an issue where I'm pulling up my site on my phone and it's being displayed as a desktop site out of the blue. Why is this happening?
I've never used material UI so I'm not sure
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Should be in the generated html, but it isn't
Adding it solved it, but not sure why it wasn't there and clearly was at one point since it rendered correctly yesterday
But I haven't touched the html
Regarding the conditional rendering it was simply a property in the component
{:desktop true}
Something like that
<Grid desktop container...>
I'm trying to figure out this justification and alignment stuff. I want on the mobile site to show one card at a time so thus taking up the full 12 grids, but because there are two items in the container when wrap is enabled it will left justify. How do I get it to stay in the center?
I want them to be on top of each other in the middle of the page
But they are on top of each other and left justified
But I have {:justify "center"}
on the container
On desktop it is centered
Why does it left justify?!
Oh hey. So to disable on a certain breakpoint you just set it to false
{:xs false :xl 3}
I think if I set on mobile to have separate containers for each single item then it will center on the page, but I feel like there is a way to do that without the repeated code
Well then. Just had to set :xs
to 8 instead of 12
CSS is such a PITA...
@whoneedszzz this is a bit off-topic for this channel but anyways: MaterialUI has a few helpers to deal with different screen widths.
hidden
is a simple component to hide its children based on screen width. https://material-ui.com/layout/hidden/#hidden
withWidth
is a higher order component which injects property width
with possible values (‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’) to your component and then you can conditionally modify your hiccup based on those. It provides more flexibility than hidden
, which actually uses withWidth
under the hood.
https://material-ui.com/layout/breakpoints/#withwidth-options-higher-order-component
@lilactown I'm looking to experiment with Apollo Client. From your point of view, does this repo still represent good practice for using apollo from Reagent? Anything go wrong in your experiements? Or any gotchas? https://github.com/Lokeh/apollo-reagent
BTW, I notice this is using shadow-cljs, so I assume that Apollo's npm modules were too much for lein?
@valtteri Thanks for the info. Digging through that more it seems like the simplest would be to use: https://material-ui.com/layout/use-media-query/#using-material-ui-39-s-breakpoint-helpers
Yep, that’s the newcomer. I didn’t mention it because it’s still considered “unstable”. However, if you try it I’m interested to hear your experiences!
Aye, I did note that it was new. After realizing my problem earlier was just me not quite understanding MUI Grids I don't currently need to do the conditional rendering. If it does pop up for something else I'll try that approach first and report back.
someone knows what this :<-
stands for?
(re-frame/reg-sub
:value
:<- [:doc]
(fn [doc [_ path]]
(get-in doc path)))
It's sugar for
(re-frame/reg-sub
:value
(fn [_ _]
(re-frame/subscribe [:doc]))
(fn [doc [_ path]]
(get-in doc path)))
There are some examples here https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/subs.cljs
Hi all, I’m pretty new to reframe and trying to wrap my head around some approaches. If I have some small components like buttons and I want their effects to be driven by whatever containing components they’re in (several layers deep), should I: - pass data down from the parent component to the child to parameterize the effect - pass a function down from the parent component to the child for the child to invoke - find ways to bubble the event from the child to the parent which can then emit the desired effect - decrease the nesting and inline actionable components into the parent component instead where scope is shared - have the parent stage a “desired effect” in the db and have the child emit an effect whose job is to emit the desired effect? - something else?
@rutledgepaulv I'd go with > pass data down from the parent component to the child to parameterize the effect
See this talk for more: https://www.youtube.com/watch?v=JCY_cHzklRs
should have made this a poll. thanks!
Maybe a newbie question. There is one page in particular which does a get on a resource and the data from that resource is stored in the app db. Here is an example: The response from the server is something similar to
[{:username ""
:houses [{:location "Somehwere" :completed true}
{:location "SomeWhereelse" :completed false}]}
{:username "[email protected]"
:houses [{:location "moon" :completed true}
{:location "jupiter" :completed false}]}]
If I wanted to update house completion for any of these users, I would need to first find the index of the username I wanted to update, then find the index of the house I wanted to update, then do an update-in/replace in using those indexes.
So it seems to make more sense to store these values as such
{"" {:username ""
:houses {"Somewhere" {:location "Somewhere" :completed true}
"SomeWhereelse" {:location "SomeWhereelse" :completed false}}}
"[email protected]" {:username "[email protected]"
:houses {"moon" {:location "moon" :completed true}
"jupiter" {:location "jupiter" :completed false}}}}
This would allow me to easily update those values. Is this unconventional?
Another option would be to return the entire user entity from the database each time a change is made and have that method update the app-db? I'm unsure of what the correct way to handle this would be. Any thoughts?There's a nice article about this, scroll down to Indexed Entities https://purelyfunctional.tv/guide/database-structure-in-re-frame/