Andrew
@timshandrewAll solutions
In-browser Markdown Editor
#react#shadcn#tailwind-css#viteSubmitted about 2 months agoMy component structure is currently quite messy I feel and could be cleaned up a lot. Any tips on useful React patterns I could apply would be greatly appreciated!
Bento Grid with Tailwind
#tailwind-css#reactSubmitted 2 months agoTailwind and dynamic data
Using Vite, I imported an image from my src/assets folder with 'import imgSrc from ".."'. My understanding is then that imgSrc becomes the resolved path to the image after the build step. Does this just exist as a variable in the scope of the module which imported it then?
The reason I ask this question is that I tried to use a custom Tailwind class of the form bg-[url(imgSrc)]. Tailwind did not produce a class for it during build. As such, I assume it is because the imports act as I have described above?
My prior thought process was that a static resource import was evaluated during the build step and substituted where it was referenced.
Many thanks to anyone who has read this far - this was essentially me thinking aloud and more for documentation of my learning than anything. If anyone has any insight I'd very grateful.
Frontend Quiz with React
#reactSubmitted 10 months agoOne thing I was wondering though was for things such as the purple button. Is it worth making this a component simply to hold some related styling? The component has no state or special functionality and simply returns a HTML button. It is repeated with the same styling throughout the application however. How would you go about styling this (especially with CSS modules in mind). Would it be best to make a global (non module) button class for styling? My thought was to create a component and have an attached CSS module for the styling.
Thanks
Time Tracking Dashboard with React
#react#bemSubmitted 10 months agoI decided against wrapping the buttons in the ID card section and giving them their own state (for highlighting them when selected). Instead, I have updated their class when the header is re-rendered. In this case there doesn't seem to be much of a difference to me. I'd appreciate any feedback on this though.
Cheers
Interactive Card Component with React
Submitted 10 months agoUp until now, I have always used a link element in my page head to include fonts. The problem is, I want my React components to be encapsulate all of their related dependencies so they are properly modular. Reading around online, people seem to warn against using a CSS @import as it is slower than a element. I have gone ahead and used the @import because it keeps my font dependency for the component together with the component itself. Is this the recommended way with React? Does the bundler do some magic with the CSS @import when using React? I'd greatly appreciate if anyone could explain this a bit better or generally give me some advice.
Cheers
Responsive Landing Page
Submitted 11 months agoI saw somewhere that it is possible to include an inline SVG by referencing it from another place in your markup - say, at the bottom. We then have the advantages of inline SVG without the bulk in the middle of the markup. I'd be grateful if anyone could give me some tips on best practice about doing this sort of thing?
Thanks!
Responsive Card Layout using Grid
Submitted 12 months agoMy problem relates to point number 3 above. It seems it would be nice to give an element a grid area with the intention of using it only later in a media query. This however seems to have stopped the automatic assignment to rows happening. I tried also assigning grid-auto-rows: auto and this fixed it but then broke my desktop layout when I wanted to use the grid areas in a media query.
My question is: am I right in thinking that once a grid-area is assigned, the layout must be done using the grids areas? Or was something else causing this? My solution was to assign the grid areas only in the media query, but if you look at my CSS, it seems better to put the area names in the styles before the media query.
Thanks
Card Feature Page - Made Responsive Using Grid
Submitted 12 months agoMy solution always has a vertical scroll-bar. I would appreciate it if someone could give me an overview of roughly how they would go about eliminating this where possible.
Product Preview Card with Responsive Layout
Submitted 12 months agoI am still unsure of the best way to make text size dynamic. I have thought about using clamp along with view height units for the font size. Would it be best to set the root element font size in this way and then use rem units everywhere?
Thanks
Social Media Card with Responsive footer
Submitted 12 months agoI would like to know how to place the footer using flexbox rather than positioning.
QR Code Component using Flexbox
Submitted 12 months agoShould I use the exact gap measurements as they are given in Figma or should I try translating these into relative units? I imagine this is project-specific and for a simple project like this, static measurements suffice. I will do more projects and see how measurements are given in those to try and answer this myself.
