@steventoben
Posted
Hey this looks great I'll answer your questions first. For the first questions, yes you can do that. I personally do that for my Typography.jsx components. It basically looks like this:
const Typography = ({as, children, ...props}) => {
return React.createElement(${as}, props, children);
}
So you could apply the same logic to a button. Basically what I'm doing is creating a functional component with the props de-structured, so you'll have access to the 'as' prop, which is just a string of what element you want to create. You also have access to the children and all other props passed. So <Typography as={'h2'} className={"Display4"}> Some text </Typography> would come out rendered to the dom as <h2 class="Display4">Some Text</h2>. So that's an approach I like using, you could just use an if statement and check if the prop exists. I have a React UI component library and my Buttons are extremely customizable and reusable, reusable code and styles is such an important part of front-end development.
For resetting your form you could create a ref for your form DOM node and then you would be able to access the form on the actual DOM and call methods. So you could do ref.current.reset(); If you're using React state for the values you want to reset, you could simply just set the state to it's initial value, you could keep an initial value in a ref (instance variable kind, not DOM node kind) I couldn't quite tell how you were controlling the form's state.
It looks like you're attempting to update the value of the image in a function in your functional component. You'll need to put that function inside of a React.useEffect hook, and i'm guessing the dependency array would be window.innerWidth, unless you're rendering from the server. Try putting it in a useEffect hook like I said so basically every time the window width changes, it will call that function and check with the new value. You could also wrap it in a Memoized function since you only want to calculate if the one variable changes, but I'd go for the useEffect approach first.
Ok sorry I'm not exactly sure what you mean by this one. Not sure how much help I can be with this one but off the top of my head if it was rendering a square but you wanted a curved part then I'd try to set the clip-path property on it's class or the mask-image. Clip-path is really useful and I use it quite a bit, it let's you make shapes out of your box model, you can do circles, ellipses, polygons, and I think arcs. There's a lot you can do with that styling rule so maybe it could work, I'm not too sure sorry tho.
So yeah now onto just some general stuff, first off don't set font-size to 62.5% in your html tag. I have to tell people this every single project lmao but you should either set font-size to 100% or don't add the rule and let it be inherited from the browser settings (either way it should default to 16px). I know people use it so that 1em=10px but really, 16px is better anyways plus you don't mess with the user's accessibility settings. Also i find it kinda odd that you're using sass, you even made a partial for variables, but you're using standard css variables lol. Also just a quick typography lesson because every single person uses the properties incorrectly; font-size (unless you're initializing root size to 100%) should always set in rem units and idealy you should have a typographic scale set up but that's kinda overkill for these small challenges. Letter-spacing should be set with em units. Line-height should be unitless. It's a multiplier of the font-size, typically paragraphs have a line-height around 1.5, and headings are generally lower at around 1-1.25. Also I would try to avoid setting font-styles to tags like h1 or p, because usually you'll have many different sets of headings or body classes, and you don't want to be that broad with selectors. Also good jobs measuring all of your widths and heights and paddings and stuff in rem units, that's good practice. I don't know where a lot of the sizes are coming from tho, there seems to be a lot of magic numbers in there. This is just a personal design rule but I try to make sure I never see a number in my sass. If it's an important number it will be a variable, if it's not in my set of variables (which are limited and meaningful, which lets my pages have vertical rhythm and a sense of harmony) then there's probably a better way of sizing or positioning something. But that's just me being pretentious because I like UX lol. The last thing is I recommend to try to reduce the amount of nesting your do with sass. Nesting too much can make your compiled css file size huge.
Oh and one last thing, there definitely are annoying html tags that won't let you restyle them, especially the select and options. That doesn't mean you can't make your own custom dropdown tho. I have like 10 different variants of dropdowns, you just have to make sure to correctly set the attributes saying that it's a select or an option. I would definitely have done that in your case because mapping out all of those options would have been so simple compared to listing them all out. I often make custom textfields too because they always look much better if I have a fake placeholder element and a label element that animate, it increases people's interest quite a but. Sorry I rambled so much lol this was just a pretty great looking project and it uses React which I love lol. Great job tho I think overall this looks great. Good job!! Let me know if you have any questions!
@emestabillo
Posted
@steventoben This is great!! How did you style your select dropdowns? Would love to see that! And awesome tip with the reusable button, thank you! I'll be jotting that down.
I knew you were going to comment on the 62.5% lol. I've asked this in my last project and haven't gotten a direct answer. Not sure if there's actually a "correct" answer. I like it for easy math, and seems every experienced developer has a different opinion on it. The most important thing I've gathered is that it doesn't affect accessibility as thought of in the past. If I'm using 13px (or whatever's in the guide) - those I consider “magic" numbers with 3-4 decimals. The numbers currently are based on the design files. I used px if it’s much much less than half a rem. I'm open to changing my approach though, if this is what's used in real life projects.
I've actually tried saving initialState. For some reason, I couldn't get it to work with reset. The values are controlled by useForm.js. I'll definitely try again per your suggestion. As for the bg image, yes here's the file with the useEffect hook that I should have also posted earlier. It may be my syntax, I'm still trying to get to know React.
Thank you so much for answering my questions. It helped me a lot, really. Please continue to ramble for next time lol 😅
@ApplePieGiraffe
Posted
@steventoben
Say, I thought I might jump in and ask how setting the root font-size to a percentage of the default value affects users' accessibility settings. I personally set my font-size to 50% so that I can work with a rem being equal to 8px in most browsers (I like it better than a rem being equal to either 10px or 16px). As long as one sets the root font-size to a percentage and not a fixed value, any changes the user makes to their default font-size should be reflected in the website, right? For example, if a user sets their default font-size to 24px instead of the usual 16px, both a website with the root font-size set to 100% and another with the root font-size set to 50% will experience a 150% increase in the font-size of the text on the site.
In the case where default font-size is unchanged,
1rem is 100% of 16px -> 2rem is 32px.
…then the user bumps up the font-size. Now,
1rem is 100% of 24px -> 2rem is 48px.
48/32 = 150% increase
In the case where default font-size is changed,
1rem is 50% of 16px -> 2rem is 16px.
...then the user bumps up the font-size. Now,
1rem is 50% of 24px -> 2rem is 24px.
24/16 = 150% increase
The only thing one would have to adjust if they change the root font-size is the values that they set in rem in their CSS (to ensure that they meet accessibility guidelines and text is a clear, readable size, etc.), meaning if I set the root font-size to something 50%, then naturally, I'd set the font-sizes of text in my website to larger values of rem than I would if the root font-size were 100%. As far as I can tell, the only difference it would make would be to the developer, since changing the root font-size doesn't prevent users from scaling text by changing their browser's default font-size and neither does it affect the impact of a user changing the default font-size on size of the text on a website.
Sorry if I started rambling a little, too, LOL, but this question has been bugging me for a really long time and I'm still trying to make sense of it. 😀
@ApplePieGiraffe
Posted
@emestabillo
Like steventoben said, very good job! 👍 Everything looks pretty great (as usual)! 😆 I noticed a little transition on the accessible outlines of things and I thought that was pretty cool! 😀 Happy coding! 😄
@steventoben
Posted
@emestabillo For the dropdowns I have lots of variations but it's essentially composed of a trigger and then a menu right below it. So it's basically either a custom button that opens the menu when clicked, or a custom textbox that opens the menu when it either has focus or is given a value. The menu is just a ul with all of the options mapped and put in a custom Option component that's just an li element. I have a lot of different versions for different use cases, like forms, filtering, sorting by, multiselect, searchbox, etc. I've been thinking about putting all my components together in a package and posting it on github, so if you want to see what all my components look like you could follow me on there and I can upload the source. And if you want to make custom highly-reusable components, having PropTypes is great. I also like CSS Modules, that way all my css files are scoped to the component and I don't have to use those annoying class names.
And lmao I'm pretty sure my entire comment history is just telling people to use font styles correctly ahah. And I could explain to you why 16px is LITERALLY the perfect value for designers and how it creates the best layouts, but that would take me forever lol. It'd be easier for me to just post my ACTUAL style guide. The style guide for these projects is so tragic lmao. I have a sass file filled with carefully picked values for lots of different things; typography scale, padding values, elevation levels, z-index stacks, color scales, sizing, aspect ratios, etc. It's got tons of comments too lol I explain the reason for every value and it really makes sense when you see it all come together. I mean for real life projects, that's always up to the UX team but most competent designers will pick the 16px base and use that. 16px was the standard for both places I developed at, and I mean the last one was Amazon, so I feel like I'm decently qualified to make comments about good software engineering practices. I actually haven't even tried a single project on here lol, but the funny thing is that I just found out there's a wall of fame on here and I'm ranked the #1 mentor lmfaoooo.
Ok let me check out that effect hook and I can look at the custom hook too. I'm not that great at React idk I've been using it for like 3 years now but I'm still a little confused by context and dom refs/ref forwarding. So it looks to me like that useEffect is only fired on the initial render. Since your dependency array is empty there's no values it will ever need to check for a change. If you put window.innerWidth inside the array then the useEffect will fire every time that value changes, so whenever a resize occurs basically. I think it would technically work, but you might think about debouncing it. Like I'm not too sure if there's much point in updating the state while you're resizing, because you really just want the value when you've finished resizing. You could play around with that concept if you want. In your huge form component try to add onClick={handleSubmit} on the bottom button of type submit. Idk honestly I don't know much about forms, I try to handle that kind of logic on the backend.
And no problem!! Feel free to ask me any questions idk if i can answer them but I'll try. I like the way you write your code lol your jsx looks really similar to mine actually. I've been drawing up the architecture for a pretty large full stack project so if you'd ever want to help out on something like that feel free to lmk!
@steventoben
Posted
@ApplePieGiraffe honestly this hurt my brain lmfao I don't really get the point you're trying to make. Yeah a 150% increase of two different numbers is not comparable. A pixel is a pixel. I really hope you're not actually setting your rem to 8px.... you know that 8px is far below even the smallest font size on a typographic scale right? 16px is the standard paragraph size. Do you know that the point of rem units is being able to scale the website up to the user's seeing ability? You're essentially blowing off all users with disabilities, and I mean even a normal person can't see 8px text. I genuinely don't understand the logic. At least 10px I could understand but why just cutting it in half? You cut it in half just to scale it back up? So you can deal in multiples of 8px? Just don't touch the root size and use 0.5rem. There that's 8px. I genuinely don't understand any of the logic here. As a general rule, just don't touch stuff you don't have to. Also 16px is the most important value on the web. It's the foundation of every major design system.
@ApplePieGiraffe
Posted
@steventoben
My point is that changing the root font-size to a percentage of the default browser font-size does not do anything to hurt people who change the default browser font-size for accessibility reasons (and the math explains my reasoning why).
I try to always compensate for setting the default font-size to 50% by adding a rule to reset all the text on a page to 1.875rem or 2rem, which comes out to around 15-16px (and as you mentioned, that's just about the standard size). Even if that seems redundant, it's only a few extra lines of CSS and I find working with 1rem being equal to 8px relatively easy (since I didn't learn a 16 times table in school). And it fits very nicely with a design system based on 16px because it's just half of that number (so it's kind of like part of it).
I think it's just another way of working. I understand using 16px for design purposes and integrating with other design systems and stuff but I don't see how setting the root font-size to a percentage hurts users (at least, not yet). 😀
@emestabillo
Posted
@ApplePieGiraffe Thanks APG! I placed a transition on the base file, I think that’s what’s causing it. Trying a bunch of different stuff. Hpe to get to your level of transition/animation at some point 😊
@emestabillo
Posted
@ApplePieGiraffe Ramblings are always welcome on my page 😄. Seriously though. Getting other devs’ point of view gets me unstuck in my own methods.
@ApplePieGiraffe
Posted
@emestabillo
Yeah, it's definitely helpful! 👍 This is just something I've been thinking about for a while and I'm curious to see if I can learn more about it. 😉
@ApplePieGiraffe
Posted
@emestabillo
Oh, at first I thought the transition on the outlines was intentional! 😅 No worries, though—I've done that before, but I think sometimes it's kind of cool. 😀
@ApplePieGiraffe The problem with this approach is that some people won't be able to read your site when 8px is scaled up by even 200%+
By changing that base font size you are actually placing a barrier in there for people who need extra to enlarge web content.
My general rule is don't ever touch base html font size, let it be 100%. And if general text size is being scaled on a site, it should always go UP.
That's my 2 pennies worth :)
@steventoben
Posted
@ApplePieGiraffe You can do whatever you want, I'm just trying to warn you that it's bad practice and would never fly in an enterprise environment. You're just doing so much extra work and also using bad UX principles. Why don't you just use em units instead? Leave root size alone and in your body set font-size = 0.5rem. Now your default font-size is 8px and is also the size of 1em. You could also just make a sass mixin to convert pixels to rem. That way you leave rem alone and would just set font-size to @include pxToRem(20), which would take the number 20 and respond back with the equivalent of 20px in rem units. There's lots of ways to get around working with rem units if you're trying to avoid them so much. I'm not sure how much experience/professional experience you have but every place i've ever worked, our typography guide had a base of 16px. That doesn't mean it's the default value, it is just how the scale is calculated. 12px is usually the smallest in the set, but the scale is calculated by using 16 as a base and a scale factor of 1.25 (or anything you want) and making an exponential scale, rounding each size to the nearest 4px. Lol I'm mainly just confused because 16px is just double 8px, you can just use 0.5rem increments to achieve the effect. Again, do whatever you like but that's bad practice and is terrible in terms of maintainability and code re-usability.
@ApplePieGiraffe
Posted
@steventoben
Thanks, I'll keep that in mind. Yeah, I agree that as far as maintaining and reusing code in a regular design system goes, using 16px as a base font-size is probably better. 👍
@ApplePieGiraffe
Posted
@grace-snow
Thanks for your input, Grace! 😀 Even though I'm setting 1rem to 8px, I won't set the font-size to the text in a website to 1rem. I'll make sure I set to something more like 2rem or 2.25rem (which will come out to around 16-18px). As Steven said, this might not sit well with many design systems, but users will not be scaling 8px text—they'll be scaling something more like 16-18px text, which should produce the same result as a regular website that uses 1rem equal to 16px but with text set to just 1rem (rather than 2rem like in my site or something). :)
@ApplePieGiraffe unfortunately though that isn't how it works all the way through web browsers.
Somewhere along the lines there will be elements that don't inherit font size. All of those go off of that html base font size, so you setting the size of the body to 2rem wouldn't affect them. It is so easy to miss those edge cases and not set a font size on them.
@emestabillo
Posted
@steventoben Oh ok noted on useEffect, thanks! I've also re-read the entire thread and I think the takeaway is to not touch the base font, I hope I got this right. Sure, let me know if I can contribute to your project. It'd be good to get to know how you tackle problems. I might be three times slower with deliverables though lol but yes, do let ME know since it's your project. Thanks again for taking the time to take a quick look and for all the useful comments!
@steventoben
Posted
@emestabillo Yeah that's basically what I was trying to advice but somehow a chain of 20 comments appeared debating which was is right lol. Like Grace said, don't mess with the user's font-size. The 100% is only there as an edge case. The way to handle fonts is leaving the root size as default which is usually 16px. Then for any other font size you want to use you set it in terms of rem. So you could have a heading on 32px because you set the heading's font-size to 2rem. I'm still trying to plan out my project and make sure I have everything thought out right but for sure I'll let you know if I could use some help
@ApplePieGiraffe
Posted
@steventoben
👍
@emestabillo
Posted
@steventoben In all honesty, if you'd led with this, the thread would probably be 15 messages less lol. Thank you for sharing your knowledge though. This entire discussion has been informative in many ways. Til the next one! 😄
@steventoben
Posted
@emestabillo bruh "So yeah now onto just some general stuff, first off don't set font-size to 62.5% in your html tag. I have to tell people this every single project lmao but you should either set font-size to 100% or don't add the rule and let it be inherited from the browser settings" lmfaooo tbf I could see it easily being lost cause my first comment was pretty long lol and I touched on a lot of stuff.
