camoseven posted:

That's not odd, that makes sense since edges is an array of nodes. Node isn't an accessible key from the array itself. You'd need to do like products.edges[0].node.title

Also since edges is an array you can do .map or .forEach or whatever to access each node

e:
I dunno poo poo about Svelte and I'm having trouble following what exactly your issue is, but this should work better than 4 loops or whatever:

code:

import { getProducts } from '../../store';

export async function load(ctx) {
    let products = await getProducts();
    return { props: { products } };
}

<div class="mainContent">
	<div class="contentBlock">
		<div class="RULES">
			<img src="/image0.jpeg" alt="Hentai Free since 20201" />
		</div>
		<div class="gameShelf">
			{#each products.edges as edge}
				{console.log(edge.node)}
			{/each}
		</div>
	</div>
</div>

Fixins posted:

it works. Is there anyway to destructure it one step more?

LifeLynx posted:

I'm trying to get an infinite "marquee" of logos going, but I can't find anything for it in React. Something like this: https://www.apple.com/apple-tv-plus/ with the marquee/carousel of shows. I'd like to do it in React Spring or Framer Motion, because I plan on trying that for other animations and I'd like to keep from installing too many things.

fakemirage posted:

If you want to write a solution yourself, the basic idea is that you have two copies of whatever you want marquee'd to get the desired effect.

code:

Example: a list of two items "Foo" and "Bar"
            +-- DISPLAY --+
            |+-----+-----+|
            || Foo | Bar ||
            |+-----+-----+|
            +-------------+

By cloning the items you have an identical set of
elements that will show up as the animations starts
            +-- DISPLAY --+    copy
            |+-----+-----++----+-----+
            || Foo | Bar | Foo | Bar |
            |+-----+-----++----+-----+
            +-------------+

Since the elements showing up are identical to
those that exited to the left, it looks like 
they've wrapped around rather than leaving the 
display.
            +-- DISPLAY --+
      +-----+-----+-----+-+---+
      | Foo | Bar | Foo | Bar |
      +-----+-----+-----+-+---+
            +-------------+
        <-- direction

Once the copy of the elements reach the starting
position of the originals you can reset the 
animation (and positions) and start again.
            +-- DISPLAY --+
 +-----+----++-----+-----+|
 | Foo | Bar | Foo | Bar ||
 +-----+----++-----+-----+|
            +-------------+

How you implement this depends a bit on the use case.

You could probably do this in CSS if the elements remains the same throughout the animation and "dumb". If you intend on adding effects or interactivity then it may be easier to write something in JavaScript.

fakemirage posted:

If you want to write a solution yourself, the basic idea is that you have two copies of whatever you want marquee'd to get the desired effect.

code:

Example: a list of two items "Foo" and "Bar"
            +-- DISPLAY --+
            |+-----+-----+|
            || Foo | Bar ||
            |+-----+-----+|
            +-------------+

By cloning the items you have an identical set of
elements that will show up as the animations starts
            +-- DISPLAY --+    copy
            |+-----+-----++----+-----+
            || Foo | Bar | Foo | Bar |
            |+-----+-----++----+-----+
            +-------------+

Since the elements showing up are identical to
those that exited to the left, it looks like 
they've wrapped around rather than leaving the 
display.
            +-- DISPLAY --+
      +-----+-----+-----+-+---+
      | Foo | Bar | Foo | Bar |
      +-----+-----+-----+-+---+
            +-------------+
        <-- direction

Once the copy of the elements reach the starting
position of the originals you can reset the 
animation (and positions) and start again.
            +-- DISPLAY --+
 +-----+----++-----+-----+|
 | Foo | Bar | Foo | Bar ||
 +-----+----++-----+-----+|
            +-------------+

How you implement this depends a bit on the use case.

You could probably do this in CSS if the elements remains the same throughout the animation and "dumb". If you intend on adding effects or interactivity then it may be easier to write something in JavaScript.

Combat Pretzel posted:

How to handle this better? Just run a timer that refreshes the token/session in background, so long the application is open in the browser?

Armauk posted:

How did you make this diagram?

Nolgthorn posted:

But I am not sure how to dig into arrays and say "The returned object has this specific complex structure <blank>."

first move tengen posted:

I'm working on making a typing test webapp as a project and I've run into a stumbling block with making text scroll automatically. I want text inside a div to appear to scroll or update itself as users type through it. That way, I don't have to restrict myself to only rendering a single paragraph of text.

I thought of a couple ways (that might not work or I don't know how to finish).

1: Put all of the text inside the div to begin with, set overflow to hidden in CSS, and...find some way to push the text up to put old lines out of view and new ones into view. But, since the amount of words on a line depends on the size of the viewport and the passage being rendered, I'm not sure how to shift by exactly one line

2: Use JS to only append just enough text to fill the div at a given time, and remove / add by one line whenever the user types to the end of a line. Similar issue here, I'm not sure how I can get my code to figure out where a line ends or at what point it should remove and append more text

Is either of these ideas a good start? I would appreciate any hints on how I might go about this. It's probably a newbie question but it's my first vanilla JS project ever.

first move tengen posted:

I'm working on making a typing test webapp as a project and I've run into a stumbling block with making text scroll automatically. I want text inside a div to appear to scroll or update itself as users type through it. That way, I don't have to restrict myself to only rendering a single paragraph of text.

I thought of a couple ways (that might not work or I don't know how to finish).

1: Put all of the text inside the div to begin with, set overflow to hidden in CSS, and...find some way to push the text up to put old lines out of view and new ones into view. But, since the amount of words on a line depends on the size of the viewport and the passage being rendered, I'm not sure how to shift by exactly one line

2: Use JS to only append just enough text to fill the div at a given time, and remove / add by one line whenever the user types to the end of a line. Similar issue here, I'm not sure how I can get my code to figure out where a line ends or at what point it should remove and append more text

Is either of these ideas a good start? I would appreciate any hints on how I might go about this. It's probably a newbie question but it's my first vanilla JS project ever.

LifeLynx posted:

I thought maybe I could define CSS variables in React, like for example if my stylesheet had this:

code:

.box {
	background: var(--boxColor);
}

If in React I could do something like this:

code:

return (
<div style={'--boxColor': props.boxColor}>Box with BG color</div>
)

And I'd do like

code:

<Box boxColor='#b4d455' />

...to render a box with that color background.

But React doesn't seem to like that because it wants to render the inline style based on the Javascript/JSX version of CSS, not actual CSS. Is there a way to do what I want? That --boxColor variable would control a few different elements, so it would be nice to have.

LifeLynx posted:

I thought maybe I could define CSS variables in React, like for example if my stylesheet had this:

code:

.box {
	background: var(--boxColor);
}

If in React I could do something like this:

code:

return (
<div style={'--boxColor': props.boxColor}>Box with BG color</div>
)

And I'd do like

code:

<Box boxColor='#b4d455' />

...to render a box with that color background.

But React doesn't seem to like that because it wants to render the inline style based on the Javascript/JSX version of CSS, not actual CSS. Is there a way to do what I want? That --boxColor variable would control a few different elements, so it would be nice to have.

LifeLynx posted:

Ima Computer posted:

Defining a CSS custom property inside a style prop object seems to work just fine?

https://codesandbox.io/s/quiet-snowflake-eiws1?file=/src/App.js

Combat Pretzel posted:

Regarding Redux for React, if I want to avoid rerendering unnecessary things, I need to encapsulate components accordingly?

Right now I have a progress bar to indicate loading and an alert box, sitting in App.jsx, both controlled via Redux, so that I don't need to implement it everywhere and run down all files if I want to change looks. However, everytime I'm changing their state, React will rerender everything. I suppose that'll stop if I shove them into a separate component that's separate from App.jsx?

LifeLynx posted:

But React doesn't seem to like that because it wants to render the inline style based on the Javascript/JSX version of CSS, not actual CSS. Is there a way to do what I want? That --boxColor variable would control a few different elements, so it would be nice to have.

teen phone cutie posted:

where in the html doc did you include your script? if it's at the top of the html, then yeah the elements haven't rendered yet

JS scripts typically are best placed under the <body /> tag

e: re-read the post. yeah just put it under the body

gbut posted:

I believe that it needs to be the last tag in the <body>, otherwise it's not HTML5 valid, but that might have changed since the last time I checked.

fakemirage posted:

I'm not that familiar with TypeScript, but I did take a look since the problem seemed pretty interesting.