Zax71
Explore posts from serversKPCKevin Powell - Community
•Created by Zax71 on 6/28/2024 in #front-end
CSS animation not triggering
I have this animation and upon calling
open() with another Svelte component, I can see the toggled-ring class getting added in devtools but it does not cause the animation to play. When I staticly add this class in code, it does play the animation correctly. How can I toggle this animation with JS?43 replies
CDCloudflare Developers
•Created by Zax71 on 6/10/2024 in #general-help
www -> non www redirect
Hi! How can I redirect from https://www.example.com to https://example.com ? It looks like I need to use rules for this but these seem to have changed dramatically since all the questions were asked
3 replies
KPCKevin Powell - Community
•Created by Zax71 on 6/10/2024 in #front-end
<enhanced:img> in masonry layout
I am using <enhanced:img> and Svelte Bricks to create a masonry layout. The setup worked great with a standard
<img> tag but had an atrocious Lighthouse score!
Hence, I have switched to <enhanced:img>. Upon doing this, I switched my images from ./static/ to ./lib/ and also used Vite's import.meta.glob to correctly import the images. Once I did all this, with the code as below, I now get the RangeError: Invalid array length error when loading the images and I am unsure where it is coming from. The stack trace seems to suggest it is svelte-bricks so if that is the issue then I would be happy to switch to another lib.
Here is a SvelteLab project But this is displaying different behaviours I think it is something to do with how SvelteLab works, but the same project gives the RangeError: Invalid array length error locally so make sure to run it locally!10 replies
KPCKevin Powell - Community
•Created by Zax71 on 5/23/2024 in #back-end
Low quantity image storage
Hi, I’m creating a shop backend in Go with MongoDB as a database and I need to store product images for a relatively low quantity of products. After looking around, I wasn’t sure what would be the best option to store these images. I could either use GridFS in MongoDB, Cloudflare R2 or Cloudflare images. CF images seems like it’ll be cheep but I’m unsure if it’s worth adding the complexity of another service when MongoDB can store images already. There is also the concern that there won’t be many products (probably under 50) so that plays in to things too. But, CF images does do optimisation for me so that’s a plus.
I’d love to hear your opinions on what way I should go!
20 replies
KPCKevin Powell - Community
•Created by Zax71 on 5/4/2024 in #front-end
A11Y dialog advice
Hi! I have a HTML dialog that I would like to close by clicking outside of it or using a close button. I chose to use this method from StackOverflow to close it by clicking outside and it works correctly, with some a11y warnings.... These are because I have on:click that is not on a button. When thinking about this I feel that if you were using keyboard navigation, it would make more sense to use the close button instead of selecting the whole outside of the dialog with tab.
So, my question is: should I do something to allow keyboard navigation/screen readers to know that you can click outside, and then how would I achieve that. Or, how do I disable these warnings if I am right that it would be more of a hindrance to screen readers and keyboard navigation to be able to close the dialog by clicking outside and only allow them to use the close button.
4 replies
KPCKevin Powell - Community
•Created by Zax71 on 5/1/2024 in #front-end
Blurred circle inside div
4 replies
KPCKevin Powell - Community
•Created by Zax71 on 4/14/2024 in #ui-ux
Blob generator with colour steps
3 replies
CDCloudflare Developers
•Created by Zax71 on 3/25/2023 in #pages-help
Next/Image not loading
Hi, I've been trying to use
Next/Image on Cloudflare Pages but when loading images via https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks/#nextjs it does't change anything. At the moment all I get is the image alt.
Site: https://traditional-signs.pages.dev/2 replies
KPCKevin Powell - Community
•Created by Zax71 on 3/22/2023 in #front-end
Fit image inside div whilst maintaining aspect ratio and border radius
I know most people here are HTML/CSS purists but I don’t think this leans too heavily on other toolsets for some relevance to here. Would anyone be able to help with this StackOverflow question? https://stackoverflow.com/questions/75816452/fit-next-image-component-inside-div-whilst-maintaining-aspect-ratio-and-border-r
1 replies