michaeldrotar
TTCTheo's Typesafe Cult
•Created by jairrard on 5/31/2024 in #questions
useLayoutEffect vs useEffect (with a setTimeout)
setTimeout runs after the frame paints, so it'd technically affect the next frame and the delay can be noticeable
requestAnimationFrame runs before it paints - I usually use this when struggling with useLayoutEffect and it would be a fine option for your case
if you want to figure out why useLayoutEffect isn't working though, it'd be helpful to reproduce the issue somewhere like StackBlitz. There's no cut and dry answer for it. I could guess that perhaps optionRefs.current[0] is defined yet but then it'd be a dozen questions to figure out why it's not defined since I have limited context. What you did provide certainly seems reasonable enough that it should work.4 replies
TTCTheo's Typesafe Cult
•Created by Asger on 5/16/2024 in #questions
Security: How to genuinely not allow HTML?
User input is never to be trusted. Validation is only a guide to help people, not to secure anything.
I don't think there's a general answer to "not allow html." It was literally recommended when sending a zip in Outlook to just change the extension to txt and provide instructions for the recipient to change it back because Outlook would commonly block zip files.
From what I can see, if users can upload image, video, audio, and pdf files and if someone masks an html file as being one of those, that doesn't seem harmful to you. That does not equate to "you've been hacked." They'd only be hacked, potentially, if the code were executed as html code. You can try to render it as an image safely and it'll just fail. You can try to play it safely and that'll fail too. Users can download it and their PDF render will likewise safely fail to render it.
3 replies
TTCTheo's Typesafe Cult
•Created by karlosos on 5/15/2024 in #questions
Weird rendering bugs on mobile. Is it NextJS or my CSS skills?
Exact reproduction steps would be helpful for these things, along with a video with audio to talk through what you're doing and what you expect to happen vs what you see happening.
From examining the site for a bit and watching the video a few times it looks like you're going to
/matches/upcoming and then going back to the homepage, but you're seeing a blend of the two pages. And once you start highlighting content, it starts to properly paint the homepage over the parts still showing the upcoming matches page.
That would likely point to a memory or other hardware issue with your device. Apps are all just pixels and computers do complicated things to figure out which pixels need to be updated on each frame and which ones don't. For some reason it didn't detect the page change requiring all that old content needing to be updated until you started highlighting text, which then needed to re-paint things to show the highlight. I'd reboot it and also try different browsers. Check for things that mess with what the screen shows like accessibility, debug, and dev tools.4 replies
TTCTheo's Typesafe Cult
•Created by kal on 5/4/2024 in #questions
next 14 Showing image fallback on public folder image 404
getting there, couple issues I see:
- nothing updates
activeSrc when src changes
- nothing sets hasLoaded back to false if it needs to load something new
- ...restProps.style should be listed first so your override wins
I'm not sure how to better explain what I meant by using a ref without showing the code so I updated my demo.
- I added a small test bed to page.tsx so I can play with it.
- Mine updates when props change
- but the visibility flash on a cached image from handling the props updating is pretty noticeable in a side-by-side comparison. It'd need more testing. Maybe it's fine in a real world scenario. Maybe something like requestAnimationFrame(() => if (status === 'loading') visibility = 'hidden') to delay hiding it long enough to check if it will load immediately or not might help. Maybe it's not necessary at all (I was thinking to prevent seeing a "broken image" but in testing so far I'm not seeing one regardless - maybe onerror swapping the img.src prevents it from flashing, at least in Chrome.)
- And I also hit the TS error on the event object, I didn't spend time figuring it out.
- But you can see how to use the ref to do everything without the dummy img element if nothing else.
https://stackblitz.com/edit/nextjs-ygikmj?file=app%2FMyImage.tsx,app%2FImageWithFallback.tsx,app%2Fpage.tsx14 replies
TTCTheo's Typesafe Cult
•Created by Teodorant, Tech-Priest on 5/14/2024 in #questions
Tailwind classes aren't applying in dev and sometimes in production when login via credentials
13 replies
TTCTheo's Typesafe Cult
•Created by Teodorant, Tech-Priest on 5/14/2024 in #questions
Tailwind classes aren't applying in dev and sometimes in production when login via credentials
hm I've seen similar happen in a scenario like this
- tailwind config includes
/old/path/foo.tsx but not /new/path/bar.tsx
- both use bg-red-500
- if you first go to a page using foo.tsx then the class loads, and if you then go to the page using bar.tsx the class still exists so it seems to be working
- but if you reload on that page, the class disappears because bar.tsx isn't actually covered by tailwind's config
this would line up with your auth doing some kind of reload, and reloading more aggressively in dev
double check all your files are covered like ./src/**/*.{tsx,jsx,html,etc}13 replies
TTCTheo's Typesafe Cult
•Created by Hamza K Dev on 5/13/2024 in #questions
Managing Multiple Promises in Next.js
These are trade-offs. Server components are really great to have access to all your data without creating complex APIs with potentially huge JSON payloads.
But if you want fine-grained control of how the UI updates then you're going back to what hooks, APIs, and state management are good for.
And that's perfectly fine, albeit it might be more complexity than you hoped for. Load the initial page from the server. Then handle updates on the browser.
26 replies
TTCTheo's Typesafe Cult
•Created by kal on 5/4/2024 in #questions
next 14 Showing image fallback on public folder image 404
To not flash the broken state I'd use
visibility: hidden until you have a working image in there - this way if a height/width are given then you avoid the layout shift that comes with other options (using the NextJS <Image /> component also helps here and might be a better abstraction than <img />)
Sorry "better" wasn't a good word choice. I was skimming over the code and there are a number of things that could improve code clarity and functionality:
- {...props} looks like all props but it's not, I'd name this restProps since you're already taking src and fallbackSrc out of what would be the full props (this is where I thought you weren't destructuring at all when I first looked)
- I'd destructure onError as well and call it if given, or exclude it from the type (I'm assuming it's part of ImgHTMLAttributes<HTMLImageElement>
- once you are setting visibility: hidden while it loads, you'll need to ensure you still respect any given props.styles
- you could also use a single useEffect, having one effect to set a variable to trigger another one delays things for an entire render cycle and uses 2 renders to do what a single one could do
- you're not currently handling if src or fallbackSrc change14 replies
TTCTheo's Typesafe Cult
•Created by kal on 5/4/2024 in #questions
next 14 Showing image fallback on public folder image 404
it is a new
<img />, yes - this is a common approach from long before React was ever around so that the user doesn't see what's going on
if you're seeing two requests, only the first should actually be made and any additional ones should be coming from your disk cache
you could also tweak this to use only a single <img /> via a ref and destructuring the props better so that you're directly assigning onError and src through the ref and jsx only assigns the other ones, but then I'd also do something to hide the image until the end so it doesn't flash the broken state14 replies
TTCTheo's Typesafe Cult
•Created by kal on 5/4/2024 in #questions
next 14 Showing image fallback on public folder image 404
You need to guarantee that
onerror is set before src is set. Check out the useEffect I added here that properly shows the error:
https://stackblitz.com/edit/nextjs-ygikmj?file=app%2FMyImage.tsx,app%2Fpage.tsx14 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
lol glad I could help, can be easy to get lost in the weeds and need a rubber duck from time to time
73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
just like how
Header there is a client component but other parts can still be a server component73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
I think it'd go in
(client)/layout so all your client pages have access to it73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
that'll also make it easier if you want to animate it opening in the future, you won't have to go around finding all the
{ showHamburgerMenu && ... } things, just update the one spot73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
yup like that
73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
I'd probably also put
<Portal> inside the hamburger menu so it's more self-contained and use some doc comments to explain it should only exist once73 replies
TTCTheo's Typesafe Cult
•Created by beroer on 5/3/2024 in #questions
React Portal renders the element passed as children 2 times
that's why I'd take this one step further and take the hamburger menu out of the
NavBar and make it a sibling component instead... so it's more clear that no one component "owns" it but any other component can open/close it73 replies