aperfectcirclefan posted:

2. Is it possible to do a switch case in JSX for conditional rendering?

aperfectcirclefan posted:

Few questions...I haven't used React in a while.

1. Have people transitioned to Hooks exclusively or is it worth still using Redux?
2. Is it possible to do a switch case in JSX for conditional rendering?

Thanks

kedo posted:

I'm curious what browser ya'll develop in these days. I used Chrome for a loooong time, basically from when it came out up until a couple of years ago when I got finally got too creeped out by Google, so I switched to Firefox. However Firefox is buggy on a lot of sites and does weird things with colors, so I'm thinking about switching back.

Anyone have strong opinions they'd like to share?

camoseven posted:

prom candy posted:

I'd like to stop using Chrome but my efforts to switch to anything else never end well.

Nolgthorn posted:

I prefer to use

code:

return (
  {condition ? ( 
    <div>
      <p>This will render if condition is true. Otherwise null isn't rendered in jsx.</p>
    </div>
  ) : null}
)

It's not much different just really like explicit null syntax in jsx.

Brave to escape Google creepiness while also developing for Chrome.

camoseven posted:

What does the null syntax gain you? Or what could NOT using it cause?

kedo posted:

In theory if you remove the redirect on site A, the page will eventually get indexed again and it'll start showing up in search results. It'll just take longer than if you were to create a new redirect on site B.

If it's an .htaccess redirect it shouldn't be getting cached anywhere, changing it should be instantaneous unless I'm terribly mistaken. Is it defined anywhere else?

aperfectcirclefan posted:

Few questions...I haven't used React in a while.

1. Have people transitioned to Hooks exclusively or is it worth still using Redux?

Thanks

Honest Thief posted:

the community is going full hog with hooks but i gotta wonder if there wont be some backlash to them eventually, if closures dont come naturally to you it can be harder to maintain a big app with hooks than with the tried and used lifecycle methods

Honest Thief posted:

the community is going full hog with hooks but i gotta wonder if there wont be some backlash to them eventually, if closures dont come naturally to you it can be harder to maintain a big app with hooks than with the tried and used lifecycle methods

prom candy posted:

I really don't see this happening. There's a very small minority of people who are like "I don't see what's so good about hooks, class components are just fine" but I think these are largely the same people who originally went "I don't see what's so good about React, jQuery is just fine"

LifeLynx posted:

If they die off, can we use "class" instead of "className" in JSX please?

Lumpy posted:

No, because it's a javascript thing, not a React thing, that makes it a reserved word.

LifeLynx posted:

- I noticed there's a lot of rerenders, and I think it's because of the cursor component, namely the useMouse hook. It constantly needs to update the state of the position. On top of that, certain things use the ImageHover component, which also updates the global state (useContext) in order to change the styling of the cursor so it doesn't visually block buttons or photos. My question is, is the rerendering just an unavoidable tradeoff for having a cool cursor effect? I saw a lot of sites on Awwwards using the same effect and wanted to see if I could replicate it.

teen phone cutie posted:

shot in the dark question, does anyone know why I can do this in Chrome but not Safari

TypeScript code:

// full screen button
document.getElementsByClassName('ytp-fullscreen-button')[0].click();

In Safari, nothing happens but in Chrome, it correctly goes fullscreen

fisting by many posted:

What triggers this code? Generally, script that simulates user interaction is blocked unless it is triggered by user interaction (eg. you can bind a function that clicks to a keypress event, but you might not be able to call click() on page load.) It's a security feature that may differ between browsers. Video interaction is particularly restricted.

Boba Pearl posted:

I have a website and it's garbage, and every second writing html, css, php, or javascript is bringing me an inch closer to ventilating my own skull. I thought wordpress would make things easier, but instead it makes things juuuust easy enough to create something that looks like poo poo.

https://bobapearlessence.com/
https://bobapearlescence.com/

At the bottom of this page is a "series" box that I pay 200$ a year for, because I don't know how to do what I need to do (write a script that generates first, next, previous, last) buttons.

https://bobapearlessence.com/42-2/

Whenever I use the thing, it makes the buttons line up like this:



I want them to go left to right and be buttons. The thing is, I don't know which part of the code controls that, and when I e-mailed the company I paid for the plugin, they just said it was planned in a future update.

Honestly, I don't want to pay this company every year, 200$, to put buttons on my web comic. I don't know where to go to teach me what I need to know.

Can you point me to where I could find the information I need?

Alternatively, how much do you think it would cost just to pay someone one off to make me the code so I don't have to pay this company every year, 200$? I'm planning to do comics for the next few years, and like, next year I'll have given them 400$, and there has to be a point where I break even just paying a guy to set it up. Or teach me tbh.

Ima Computer posted:

Calling useMouse at pretty much the root of the application (in your Layout component) means that you're re-rendering the entire page for every mouse position update.

Since the only thing that needs to re-render when the mouse moves is the circle element, you could move rendering code for that element and the useMouse hook call into it's own component, and pass the ref from the Layout component to it as a prop. It should be a big performance improvement.

Changes to overButton state will still trigger a re-render of the entire page, but considering that occurs far less frequently than mouse position updates, it's a lot less of a concern.

teen phone cutie posted:

shot in the dark question, does anyone know why I can do this in Chrome but not Safari

TypeScript code:

// full screen button
document.getElementsByClassName('ytp-fullscreen-button')[0].click();

In Safari, nothing happens but in Chrome, it correctly goes fullscreen

The Merkinman posted:

Does anyone have any recommendations for learning React? I have plenty of Angular and Vue experience, but it feels like without React, I'm unhirable.

I did the Tic Tac Toe tutorial, and that just made me really confused about how React does things as a whole compared to Angular and Vue. Is React that different or is that Tic Tac Toe a poor example of how things would "really" be ?

teen phone cutie posted:

shot in the dark question, does anyone know why I can do this in Chrome but not Safari

TypeScript code:

// full screen button
document.getElementsByClassName('ytp-fullscreen-button')[0].click();

In Safari, nothing happens but in Chrome, it correctly goes fullscreen

LifeLynx posted:

Thanks! Running refs and props around is something I'm getting used to.

Some Googling led me to some answers - either make sure the element you're clicking on has cursor: pointer, and/or that element or some ancestor has to have an onclick= set on it.

Jabor posted:

Why do you need to fullscreen a video by typing text into the browser console and running it?

Boba Pearl posted:

Hey so you guys talked me into just setting up a wordpress site a year(?) ago, and I want to say I hate it. I hate everything about it. I hate managing a website. And now I need help