Zax71
Explore posts from serversKPCKevin Powell - Community
•Created by Zax71 on 8/15/2024 in #back-end
Rust and Svelte Oauth2 bewilderment
It took me a while to figure out what I am asking here, I think it is: does authjs work on static svelte? And are the rest of my lib decisions applicable to this situation?
I am researching creating a web app that authorises with Google Oauth2 (or some other provider). I plan to use Rust for the backend and a staticly hosted Svelte application for the frontend. For the Rust side of things, I want to use a MongoDB database with it's official driver, Axum for the web framework and OpenIDConnect-rs to handle Oauth on the backend. For the frontend I plan to use AuthJS for oauth.
All in all, I feel like I am severely missunderstanding something seeing how the documentation for all the auth related packages is worded. Would someone be able to show if a static svelte site can work for the frontend (and why not if it can't) as well as how the oauth packages communicate as I feel I must be still missing something even after watching a lot of videos and reading docs.
2 replies
KPCKevin 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
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
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