Random carousel review, or ... randousel?!

[Weihua4455]

Good afternoon!

We're wrapping up the development of the random carousel for ARPASPENDING, which is basically a card that shows people a CJ-related ARPA spending in their state/district, and goes down the list to show them another one from other states if they click "show me another."

Here's a preview page for the card. We also pulled some texts from the draft and put them in the post, so it can give us a better sense of placement. And here's the story draft.

We're experimenting with the format, and I would love to submit it to a code review. @eads has some edit tickets that he'll write up tonight. In the meantime, please don't hesitate to hit me with design edits/suggestions!

One thing I'd love some help with is setting up trackers to keep track of how/if people interact with the card. I think we can start with tracking the "show me another" button?

Ohh and one more thing: right now we're reading data directly from Airtable through fetching. We'll disable that when we launch & import static data instead.

Thank you SOOOO much for reviewing this and for giving some really valuable advice before we developed it. We're planning to publish this next week, though exact timing is still a bit in the air.

[katiepark]

Hey! I skipped past the python parts of this and just looked at the graphic component of it, FYI. I think this is the first Svelte thing I've code reviewed, it's neat seeing it in action!

Right now my biggest hangup with this is the text. The longer items feel pretty overwhelming and I find my eyes kind of glazing over -- and on mobile, the scrollbar is hidden by default so it looks like the text just cuts off in the middle of a line. I don't think length is the only issue, though. The kind of dry, legal-ish language used in government reports can really obscure the WTF nature of these items. The user has to really work to understand what's so WTF about them, and I don't know whether users will commit to doing that.

I honestly think these kinds of modules (whether carousel, randousel or just "cards") work best when they have a uniform format and when the text is tightly written/edited to highlight the most salient bits. Writing 51 blurbs is a lot of work, though — does it make sense to cut this down to 10-12 and display them randomly instead of by geolocation?

I think this is a cool take on re-thinking how the carousel works, but it needs some tightening up.

[eads]

@katiepark:

The kind of dry, legal-ish language used in government reports can really obscure the WTF nature of these items. The user has to really work to understand what's so WTF about them, and I don't know whether users will commit to doing that.

I agree in principle, but given our limited resources, we are experimenting here with just showing whatever they wrote with this one! If it still drives good engagement, maybe it's good enough to skip that level of polish for stories where it's not necessarily needed or we are trying to pick up the pace.

[rdmurphy]

Hello @Weihua4455! Great work! I have some larger observations/suggestions so figured that would be easier as a standalone comment.

Styles

• Unless the description text gets edited down significantly across the board (and maybe it will!) I'd suggest to not use italics for this. Some of those get quite long and the italics treatment makes them difficult to read when they get up there in length.
  

• The line height on the project name is pretty high and leads to some awkward wrapping. I'd probably bring that down to 1.2 or 1.3. (I also don't think you need Project name:!)

UI/UX

• This may be a hot take but I'd recommend dropping the inline scroll/max-height. It works okay on desktop, but having an almost full width scrolling element within the page on mobile can get frustrating. Folks are already going to have to scroll up and down on mobile to view this either way (either inline or the page itself) so I'd vote just letting the page do what it does best and scroll! This will mean however that the button "moves" depending on the height of the card — not ideal but IMO that's not a deal breaker. Having the page move around when someone clicks a button is typically fine because the user had agency in that action. (It's when it happens without user input that it gets maddening!) Maybe could explore a way to move the button above the card?
• I know the randomizer is kind of the point here, but I did find myself wishing for a way to just pick a card based on the state. I was hitting the button over and over trying to find the one from another state I cared about. Good news for any button tracking, but might be frustrating for a user. This could *gulp* be addressed with... a dropdown. 😶 (I do think there could be room for both options.)
• Additionally, I think it would at minimum be useful to give some indication of how many "cards" are here. Am I getting a random one out of 10? 50? Could maybe add some sort of like 4 / 51 thing so you know how deep it goes.
• I don't know what our general policy is on disclosure but I do think it wouldn't be the worst to have some light set up text on this: "We have 51 examples here, and we're showing you one closest to you. Click the button to explore others." (But you know better written than this.)

Etc.

• I figure this is still in the works but I could see where those descriptions would benefit from a copy edit pass — they all read pretty differently (and some are more comprehensible than others).
• This is kind of funky — maybe could have these cases only say State of X?

[katiepark]

I just noticed on the preview page that there seem to be some Svelte styles affecting the entire page. I haven't seen this on previous Svelte projects from y'all — are you able to namespace the theme CSS so it doesn't hijack the article page?

[rdmurphy]

I just noticed on the preview page that there seem to be some Svelte styles affecting the entire page. I haven't seen this on previous Svelte projects from y'all — are you able to namespace the theme CSS so it doesn't hijack the article page?

This is coming from svelte-materialify — I don't know why it so aggressively applies global styles but it's no bueno. It's even trying to change our default font-size and apply a margin-bottom to every <p> tag on the entire page. 😬

[eads]

I just noticed on the preview page that there seem to be some Svelte styles affecting the entire page. I haven't seen this on previous Svelte projects from y'all — are you able to namespace the theme CSS so it doesn't hijack the article page?

This is coming from svelte-materialify — I don't know why it so aggressively applies global styles but it's no bueno. It's even trying to change our default font-size and apply a margin-bottom to every <p> tag on the entire page. 😬

100% -- this isn't svelte but this component that doesn't feel necessary to me and is going to fight our styles.

[Weihua4455]

I just noticed on the preview page that there seem to be some Svelte styles affecting the entire page. I haven't seen this on previous Svelte projects from y'all — are you able to namespace the theme CSS so it doesn't hijack the article page?

This is coming from svelte-materialify — I don't know why it so aggressively applies global styles but it's no bueno. It's even trying to change our default font-size and apply a margin-bottom to every <p> tag on the entire page. 😬

100% -- this isn't svelte but this component that doesn't feel necessary to me and is going to fight our styles.

We switched from MaterialApp to MaterialAppMin, which seems to solve the problem of Svelte being too greedy. Note to self: we should shy away from svelte-materialify in the future.