aperfectcirclefan posted:2. Is it possible to do a switch case in JSX for conditional rendering? It's probably an anti-pattern, but I love making little self-executing functions for stuff like that: code:
|
|
# ? Jan 10, 2022 19:46 |
|
|
# ? Jun 13, 2024 05:06 |
|
Yeah that's what I ended up doing. Thanks goons. Now I have to figure out how to correctly useContext and useReducer
|
# ? Jan 10, 2022 19:53 |
|
The logic I use is:code:
|
# ? Jan 10, 2022 20:00 |
|
While convenient, a downside is that most text editors won't syntax-highlight that properly, even those that are JSX-aware. So when I do that, I keep it to very short fragments.
|
# ? Jan 10, 2022 20:30 |
|
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?
|
# ? Jan 10, 2022 20:53 |
|
aperfectcirclefan posted:Few questions...I haven't used React in a while. React-redux is all hooks-based now. I still use Redux for a lot of stuff. Redux-toolkit is really nice to use and RTK Query is a great data fetching library. I use ternaries for if/else if/else execution flow in JSX: code:
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. I'd like to stop using Chrome but my efforts to switch to anything else never end well.
|
# ? Jan 11, 2022 19:11 |
|
I prefer to usecode:
prom candy posted:I'd like to stop using Chrome but my efforts to switch to anything else never end well.
|
# ? Jan 11, 2022 19:21 |
|
Nolgthorn posted:I prefer to use What does the null syntax gain you? Or what could NOT using it cause?
|
# ? Jan 11, 2022 19:39 |
|
Yeah I use ternary also. Thanks for all the help. It's been a while since I dealt with React
aperfectcirclefan fucked around with this message at 20:35 on Jan 11, 2022 |
# ? Jan 11, 2022 20:24 |
|
One thing to keep in mind if you're using the && syntax is that if you're checking the value of a number it'll print it out. so likecode:
|
# ? Jan 11, 2022 21:15 |
|
camoseven posted:What does the null syntax gain you? Or what could NOT using it cause? It's just explicit. Returning null from a component is also a convenient way not to render it, if you ever need to do that.
|
# ? Jan 12, 2022 10:41 |
|
Is there any way to "undo" a 301 redirect from site A to site B if I no longer have access to site B? All the stuff I've read involves setting up a reverse redirect from site B to site A, but I can't do that... If the redirect is gone from the .htaccess of site A, will the internet eventually catch on and stop redirecting people? Is it just an individual browser cache issue or does the redirect actually get stored by DNS servers etc? e: right now I can't even get the redirect to stop firing on my local machine, even though I swear there's nothing cached locally fuf fucked around with this message at 15:49 on Jan 21, 2022 |
# ? Jan 21, 2022 15:39 |
|
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? e: Also, apropos of nothing – don't ever use aplus.net for anything. I have a client that requires we use them for a project, and it's been nothing but an incredibly frustrating shitshow. I've had to contact their tech support for everything from creating a database to adjusting DNS records, because every single thing I try to do throws an error message in their lovely-rear end control panel. I've been trying to launch an incredibly simple site with them for a goddamn week now. e2: The fastest response I got from their support was when I called them out on their terrible control panel, and I got back a canned "sorry!" reply in less than a second. kedo fucked around with this message at 16:36 on Jan 21, 2022 |
# ? Jan 21, 2022 16:29 |
|
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. hmm the redirect was setup in cPanel so I'm not sure if it was done with .htaccess or something else. the main domain for the cPanel account was domain A, and domain B was a domain alias with a permanent redirect to domain A. I've removed it as an alias and added it as an addon domain instead, but it's still redirecting to domain A.
|
# ? Jan 21, 2022 18:08 |
I'm having some trouble with using different auth_basic_user_file for separate location blocks, as soon as I log in to something.com/location2 it starts using that authentication for something.com/location1 - that should be possible right? Here's what I've got:code:
|
|
# ? Jan 23, 2022 06:14 |
|
Any ASP.NET experts here? Particularly with the web.config and IIS10? We have a custom error page to handle any errors, and we need that initial form data to go along for the ride. This works when deployed to our old Server 2012 instance on AWS, and run on localhost via Visual Studio and IISExpress on a Server 2019 machine: code:
I feel like I'm missing some setting in IIS10, but Googling isn't bringing anything up.
|
# ? Jan 23, 2022 21:45 |
|
aperfectcirclefan posted:Few questions...I haven't used React in a while. 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
|
# ? Jan 24, 2022 12:40 |
|
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 But that forces you to be using class-based components, which is rare and while not deprecated, are very out of favor with React itself. But if using them makes your app easier to manage / understand, then they are still there.
|
# ? Jan 24, 2022 15:10 |
|
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 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"
|
# ? Jan 24, 2022 20:48 |
|
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" If they die off, can we use "class" instead of "className" in JSX please?
|
# ? Jan 25, 2022 02:54 |
|
LifeLynx posted:If they die off, can we use "class" instead of "className" in JSX please? No, because it's a javascript thing, not a React thing, that makes it a reserved word.
|
# ? Jan 25, 2022 03:03 |
|
Lumpy posted:No, because it's a javascript thing, not a React thing, that makes it a reserved word. But JSX isn't a JavaScript thing either. Just unreserve the word in the transpiler!
|
# ? Jan 25, 2022 05:32 |
|
htmlFor is always going to be a thing too. Both of those alternative identifiers for HTML attributes have their roots in the DOM (see: Element.className, HTMLLabelElement.htmlFor)
|
# ? Jan 25, 2022 06:56 |
|
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 ?
|
# ? Jan 25, 2022 20:43 |
|
If anyone feels like picking apart a relatively simple NextJS project from someone still learning the ropes of React, I'd appreciate it! I got inspired to remake my friend's photography website. I'm not sure he'll use it, but I needed something to experiment on and got inspired. I'm still considering options for the photo gallery, though anything is probably good if I convince him that prospective clients don't really spend time looking through 100+ wedding shots when he can just show his best samples and pop the rest on Instagram. - 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. - I'm using Framer Motion. It took a long time to find how to code something where the transformations would calculate based on a starting point of when the element entered the screen, because all of the tutorials and examples from the official docs I could find assumed you'd be calculating from the top of the document. I found this useInViewScroll hook and modified it slightly. I think I could rewrite it to use react-intersection-observer, but I'm not sure if it would make a difference performance-wise. - Please ignore the CSS and any placeholder stuff, I need to clean it up a bit (form is just proof-of-concept, navigation needs tuning, some things aren't linked to their respective targets, there are some placeholder images, etc.) but it's like 90% there as far as placement. - There are two pages: the homepage and the Portfolio page. I'm not sure if I'd split the individual portfolio sections into pages. I really want to know if I'm committing any sins of React, optimization, file naming, etc. because I don't want to start with and continue bad habits, so if anyone wants to critique my code... thank you! Site is here: https://hearthandoak.vercel.app Github is here: https://github.com/Ultharite/hearthandoak P.S. Ignore the Kanye quote, that's all on him.
|
# ? Jan 25, 2022 20:44 |
|
Hello! I'm making a small project to test out svelte and sveltekit and I'm running into a some basic/general dev questions about some stuff that I've never had to deal with before. My app is one where you can ask or answer questions, and then when you submit your question/answer, it will lead you to the question page to see all the submitted answers and discuss them. I blocked out four different pages I might need like so: So my questions are... 1. How do I decide if I want to make things into something like a single page app or if I make it multi-page? I'm coding up the form submission code and api calls and thinking maybe it would be less jarring to use AJAX to submit the data and then some fancy animations to transform the upper right and bottom left pages into the bottom right page. The problem is, due to the fact I've never done it before, making it an SPA using sveltekit appears to be difficult, possibly requiring me to duplicate code when I'm transforming the ask/answer pages into the discussion page. I think this more of an open-ended design question, but any input would help... 2. Somewhat related, when I write my form submission endpoint, I was going to make it redirect to the bottom right landing page. But should I instead just return JSON to indicate a successful transaction and then use the framework to do the redirect? This is in an attempt to make the api more flexible in case I want to add a question/answer to my database without being forced to redirect to a specific page. e. Whoops, I reversed the ask and answer pages. Hopefully the problem still makes sense? Cory Parsnipson fucked around with this message at 21:12 on Jan 25, 2022 |
# ? Jan 25, 2022 20:57 |
|
shot in the dark question, does anyone know why I can do this in Chrome but not SafariTypeScript code:
|
# ? Jan 26, 2022 01:49 |
|
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. 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.
|
# ? Jan 26, 2022 03:29 |
|
teen phone cutie posted:shot in the dark question, does anyone know why I can do this in Chrome but not Safari 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.
|
# ? Jan 26, 2022 03:56 |
|
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. just running it in the browser console
|
# ? Jan 26, 2022 04:44 |
|
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 helpBoba 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. Boba Pearl fucked around with this message at 07:29 on Jan 26, 2022 |
# ? Jan 26, 2022 06:25 |
|
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. Thanks! Running refs and props around is something I'm getting used to. teen phone cutie posted:shot in the dark question, does anyone know why I can do this in Chrome but not Safari 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.
|
# ? Jan 26, 2022 06:38 |
|
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 think Kent C Dodds has a really good course but I also think it's a bit pricy. React is definitely unique compared to pretty much anything else but I haven't done that Tic Tac Toe tutorial specifically. Also if you have questions
|
# ? Jan 26, 2022 06:45 |
|
teen phone cutie posted:shot in the dark question, does anyone know why I can do this in Chrome but not Safari :facepalm: I also left out this is on a youtube video. Specifically it's the fullscreen button LifeLynx posted:Thanks! Running refs and props around is something I'm getting used to. didn't seem to work
|
# ? Jan 26, 2022 07:07 |
|
Why do you need to fullscreen a video by typing text into the browser console and running it?
|
# ? Jan 26, 2022 07:25 |
|
Jabor posted:Why do you need to fullscreen a video by typing text into the browser console and running it? Some other site with a video player hides the fullscreen button on mobile breakpoints, so it's not accessible. I also noticed that when I removed the display: none style from the button, clicking it again did nothing. So I tried to force a fullscreen with JS But it didn't work so I tried to see if it was happening with all video players (like youtube) and the same issue was happening.
|
# ? Jan 26, 2022 07:34 |
|
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 I saw KillHour posted something about making really pretty links in the other thread. That's pretty good, if you wanna try to make the buttons look different. Also, seconding that you're getting ripped off for $200/yr for a navigation bar. Making one yourself is pretty achievable imo, though if you're not familiar with basic HTML and CSS it will be kind of a journey. I took a look at the bar in the chrome inspector and it looks like they actually already applied css-grid to the outer wrapper of the navigation, but as far as I could tell, they didn't set any of the other grid properties. So I added in "grid-template-columns" to try and get them to line up next to each other. Maybe this is closer to what you want? Tbh, this isn't the only way to configure the grid and I'm not even sure if it's the best way to do it. There's some other properties you can set to center the items too, but I didn't dig any further. As for modifying it on the wordpress website, it's a little tricky because IIRC you need to edit the html code inside a little window and there's a bunch of wordpress boilerplate in the way, making it confusing to look through. ====== Here's a really comprehensive guide on css grid that'll explain how you can use CSS to arrange page elements -> https://css-tricks.com/snippets/css/complete-guide-grid/ It's really long though, and probably too difficult a learning curve for a beginner, but maybe we can try and help you through it? vv
|
# ? Jan 26, 2022 08:30 |
|
Thanks, I'm gonna look at it tomorrow and see what I can do, until then I'm reading up on js and how to get a navigation field that doesn't cost me a ton of money for nothing lol
|
# ? Jan 26, 2022 10:05 |
|
You mentioned this is a wordpress site, so you'll probably have to set the link (href property on a tag) with php instead of js.
|
# ? Jan 26, 2022 14:43 |
|
|
# ? Jun 13, 2024 05:06 |
|
WordPress makes it real easy to do stuff like that with built in functions. Can't believe they're charging $200 a year for that. This should do exactly what you need it to do albeit without stylePHP code:
|
# ? Jan 26, 2022 14:50 |