Dine challenge with React

@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 😅

@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. 😀

@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! 😄

@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!

@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.

@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). 😀

@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 😊

@ApplePieGiraffe Ramblings are always welcome on my page 😄. Seriously though. Getting other devs’ point of view gets me unstuck in my own methods.

@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. 😉

@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 :)

@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.

@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. 👍

@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.

@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!

@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

@steventoben

👍

@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! 😄

@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.

@mattstuddert Hi Matt, thank you for the feedback! Yes the CSS structure was one of the earliest things that stopped me in my tracks. I actually didn’t know where to put global styles for scoped-based CSS lol so I had to rely on what’s familiar to me. I’ll be trying out 1:1 for the next one. Just have to add here that reading other people’s multipage submissions have helped me a ton in finishing this project so big props to the platform for helping devs grow 👍🏼

@emestabillo that's awesome to hear! Reading other people's code is such a great way to learn!

For the global styles, you could load them in the App.js file if you like. Then anything more specific can be broken into more modular files that map 1:1 with a component.

Looking forward to seeing your next project! 🙂

p.s. meant to say, well done for wrestling through with React! It's certainly not easy to learn and this is excellent for an early attempt!

@grace-snow I appreciate every suggestion 😀 fieldset and legend were in the original version of the completed form...until I attempted to style the select dropdown. I found out it was impossible to style these tags like the design so I experimented with the divs. It went nowhere as you know lol but you’re right that I should’ve placed them back. I forgot to address them.

Thanks also for the focus tidbit! And every bit of advice when I was still building it. I’ll be sure to adjust the code 👍🏼

@emestabillo lol I've just been studying UX and researching for a long time now and I think this website is an interesting concept, but I see lots of solutions here with "Pixel for Pixel Perfect" or something like that in the title and it hurts watching developers practice trying to recreate a page exactly to the pixel because that's just not how the real world works and I feel like they're not learning how to correctly style. Lol I could but I honestly don't really know which one to do, a lot are pretty boring but maybe I'll check again.

Most companies have their own design system, so every single thing branded by them is consistent and recognizable/feels familiar. And lol I mean your code seems to be pretty good it looks similar to mine, I made it to the final round of interviews at Google and I mean I just had an internship last summer at Amazon doing full stack development with Angular, sass, TypeScript, Java, Spring, and AWS, and I was only 20 years old and a college dropout. It's easier than you think to get into those companies. And I actually take a lot of principles from Google's MaterialUI design system. If you want to take a look at really well established and researched design principles you should take a look at their design articles. Here's one about typography https://material.io/design/typography/the-type-system.html

@steventoben Not to stick my nose in this rather heated debate, but... 😂

I do agree with Em here that it would be great for you submit a project, even one of the really simple ones, to better illustrate your points and best practices. It'd be a good resource and reference for the community, much like Grace's solutions that illustrate accessibility practices, and I think many people would appreciate it.

@brasspetals Design systems are used to build a brand and integrate consistency and brand recognition through all of their products. The challenges here aren't really customizable, most of them are just placing images in a layout. And like I said earlier I don't really find these challenges to be interesting at all since I'm not a beginner. I'm not really sure what you want me to illustrate, if you're interested in a resource look here https://material.io/design/introduction

@brasspetals How to upvote more than once? 🙂

@emestabillo lol i mean if you really want me to do a challenge I guess I could make a codepen or something but I don't really see why you guys think it would help. It would look similar but with my own components and fonts and spaced out more thoughtfully. I could do the log in one or something because that one looks really bad and is like one of the only one that's not based on images. I feel like this is really overblown lmao if you work as a professional dev you'll know what a design system is it's literally just a list of sizes and colors and stuff to implement consistently.

@steventoben I understand where you’re coming from, and of course no pressure to do a challenge. You’ve been contributing to the community by giving loads of feedback, which is fantastic.

But just saying if you wanted to do your version of a challenge, throwing pixel-perfect (are you cringing?) to the wind, using your own components, thoughtful spacing, etc. as you said, and then explained why you made the choices and changes you did, it could be a good teachable moment for some of us beginners who don’t have the same insights and perspective you do. I understand as an experienced dev these projects are going to be simple and even boring. The contribution would be for the community as an example for people to bookmark and come back to as a reference, not really practice for you. That’s all I meant. Seriously, zero pressure. If you don’t want to do it - totally cool. I just enjoy reading other people’s code and seeing different methods and opinions. We’re all just trying to learn and get better, yeah? 🤷‍♀️

And thank you for sharing the Material Design resource. Appreciated. 👍

@steventoben

Some of the Pro challenges come with actual design systems if you have access to the design files for those challenges. IDK what you'll think of them, but they're there if you want to take a look.

@emestabillo

Haha, your solution page has become like the longest thread in FEM history, LOL. 😄 I guess I'll just change to font-size: 100%, too. 😊

@ApplePieGiraffe Haha agreed, badge worthy lol. This was fun.😅

@brasspetals Yeah I totally understand, I've been thinking of making a blog website I could probably make that real quick and make a post rambling on about my opinions lol. That would probably be a better showcase since it would be from scratch and include multiple pages and reinforce brand recognition. I was looking through the challenges and I think the best way would be combining a few of the newbie ones and making them related to each other. I'll try to make something to showcase the power of typography, spacing, color, and repetition. I'll lyk when I come up with something to make real quick