Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »

Cheston: Jul 17, 2012; (he's got a good thing going)

Here's some next.js. I have router and router.isReady in the effect's dependencies, but the exhaustive-deps rule claims I only need router.

code:


function PreloadDestinationThing() : ReactElement {
  const router = useRouter();
  const [href, setHref] = useState<string>(null);
  useEffect(() => {
    if (router.isReady && href != null) {
      let dest;
      if (Array.isArray(router.query.dest)) {
        dest = router.query.dest[0] ?? '/';
      } else {
        dest = router.query.dest ?? '/';
      }
      router.prefetch(dest);
      setHref(dest);
    }
  }, [router, router.isReady, href]);

...

Are React Hooks required (or at least, intended) to always return a new object when any part of the current object is altered? Is there explicit documentation on the rules Hook authors must follow?

# ? Jan 8, 2023 01:33

Adbot: ADBOT LOVES YOU

# ? Apr 16, 2024 11:32

M31: Jun 12, 2012

Yes, the exhaustive-deps rule assumes the dependencies are not mutable, so router.isReady is unnecessary because if it has changed it would mean router also changed. https://beta.reactjs.org/learn/lifecycle-of-reactive-effects#can-global-or-mutable-values-be-dependencies

Btw, the href state seems like a bug (it will never be != null)? If you are calling setHref somewhere else you are better of calling prefetch at that time as well.

# ? Jan 8, 2023 07:55

Cheston: Jul 17, 2012; (he's got a good thing going)

M31 posted:

Yes, the exhaustive-deps rule assumes the dependencies are not mutable, so router.isReady is unnecessary because if it has changed it would mean router also changed. https://beta.reactjs.org/learn/lifecycle-of-reactive-effects#can-global-or-mutable-values-be-dependencies

Btw, the href state seems like a bug (it will never be != null)? If you are calling setHref somewhere else you are better of calling prefetch at that time as well.

gotcha, thanks!

And yeah, it looks like I fixed that bug somewhere along the way.

# ? Jan 8, 2023 22:39

worms butthole guy: Jan 29, 2021; by Fluffdaddy

e; ignore me, sorry!

worms butthole guy fucked around with this message at 21:47 on Jan 9, 2023

# ? Jan 9, 2023 21:25

prom candy: Dec 16, 2005; Only I may dance

2022 State of JS is out: https://2022.stateofjs.com/en-US/

# ? Jan 11, 2023 21:32

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Summit posted:

If something solves your problem and is a widely accepted solution, who cares if you�re not using all of it?

This is a can of worms tbf

# ? Jan 20, 2023 09:38

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

So if one had a big, old React app that was bootstrapped with create-react-app many years ago, what would people do these days to remove the dependency on c-r-a. Obviously there's just "eject" and leave it. But I know all the kids these days love their Vites and Parcels and all sorts of other fancy things. Starting a new app is one thing, but has anyone switched an old CRA app to something else, and how did it go, what would you do different, etc.

# ? Jan 27, 2023 15:53

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

If you haven�t gone down the hole of webpack customizations or weird import voodoo I�d assume you could create a fresh <whatever> project and copy the source files over pretty easy. I haven�t dug into vite but I don�t think it�s superficially different than webpack?

# ? Jan 27, 2023 16:07

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Yeah just dump CRA and use your source files fresh. The mess of poo poo that ejecting spews out might as well be non-customizable for how complex it is.

# ? Jan 27, 2023 16:43

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Do these other fancy new things do code-splitting and so on out of the box? I suspected "start over, copy the src/ directory was probably the way to go.

Lumpy fucked around with this message at 18:20 on Jan 27, 2023

# ? Jan 27, 2023 17:53

prom candy: Dec 16, 2005; Only I may dance

Lumpy posted:

So if one had a big, old React app that was bootstrapped with create-react-app many years ago, what would people do these days to remove the dependency on c-r-a. Obviously there's just "eject" and leave it. But I know all the kids these days love their Vites and Parcels and all sorts of other fancy things. Starting a new app is one thing, but has anyone switched an old CRA app to something else, and how did it go, what would you do different, etc.

I have switched a couple of CRA apps to Vite, it takes about 25 minutes. I used this guide but it's probably a bit outdated now

https://craftsmenltd.com/blog/2022/06/23/migrating-your-create-react-app-project-to-vite/

Here's a newer one: https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

edit: You may want to consider if you'd be better off migrating to Next or Remix though if you're feeling saucy. That'll be a bigger job of course.

# ? Jan 27, 2023 18:37

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

prom candy posted:

I have switched a couple of CRA apps to Vite, it takes about 25 minutes. I used this guide but it's probably a bit outdated now

https://craftsmenltd.com/blog/2022/06/23/migrating-your-create-react-app-project-to-vite/

Here's a newer one: https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

edit: You may want to consider if you'd be better off migrating to Next or Remix though if you're feeling saucy. That'll be a bigger job of course.

Thanks! And I am definitely not feeling that saucy. Yet.

# ? Jan 27, 2023 20:03

prom candy: Dec 16, 2005; Only I may dance

Lumpy posted:

Thanks! And I am definitely not feeling that saucy. Yet.

Yeah I started down the road of migrating an old CRA app to Next and it's a big job. Also I think I kinda like Remix better.

# ? Jan 27, 2023 20:09

KillHour: Oct 28, 2007

I'm doing a personal next/react project and I'm realizing that I'm loving atrocious at CSS. Obviously, front end design is a whole thing that people spend their entire careers on, but does anyone have good resources on basic modern rules / standards for making things look cohesive and not like poo poo? Even stuff like color guides / accessibility standards are good, but I'm mostly interested in understanding how to organize the code so it's reusable and consistent. And also a cheat sheet for flex / grid / whatever layout definition because holy poo poo none of it makes any sense and I'm just changing things at random to align anything :psyduck:

I'm already using Radix for some basic components and it's... Fine I guess. Kind of fiddly and I don't really like the documentation but it works.

This is a pretty complex app with lots of compositing/dynamic elements and tons of backend state that is in flux while I figure out how it's going to work, so I'm really emphasizing reusability.

Edit: this is a weird ask, but just to highlight how complex the design is, it would be very useful if I could find a clean way to get some kind of per-item sorting that lets me do stuff like A renders on top of B, B renders on top of C, C renders on top of A. I know that could lead to problems if they all end up in the same place.

KillHour fucked around with this message at 01:59 on Feb 1, 2023

# ? Feb 1, 2023 01:56

The Fool: Oct 16, 2003

I just use fomantic and drop components in as needed

i'm never going to be doing en front end as a job, so it's more than good enough

# ? Feb 1, 2023 02:05

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

KillHour posted:

And also a cheat sheet for flex / grid / whatever layout definition because holy poo poo none of it makes any sense and I'm just changing things at random to align anything

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is pretty much my bible, it's been years and I still confuse which versions of justify-X and align-Y I need to do each thing.

# ? Feb 1, 2023 02:12

KillHour: Oct 28, 2007

dupersaurus posted:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is pretty much my bible, it's been years and I still confuse which versions of justify-X and align-Y I need to do each thing.

Thanks for this. Even the small comment that flex is meant for laying out small scale individual elements while grid is meant for laying out the page and larger elements is a huge help.

# ? Feb 1, 2023 02:35

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

KillHour posted:

Thanks for this. Even the small comment that flex is meant for laying out small scale individual elements while grid is meant for laying out the page and larger elements is a huge help.

I haven�t really thrown hands with grid yet but I�ve made whole pages with flexbox so don�t count it out

# ? Feb 1, 2023 02:54

kedo: Nov 27, 2007

KillHour posted:

I'm doing a personal next/react project and I'm realizing that I'm loving atrocious at CSS. Obviously, front end design is a whole thing that people spend their entire careers on, but does anyone have good resources on basic modern rules / standards for making things look cohesive and not like poo poo? Even stuff like color guides / accessibility standards are good, but I'm mostly interested in understanding how to organize the code so it's reusable and consistent. And also a cheat sheet for flex / grid / whatever layout definition because holy poo poo none of it makes any sense and I'm just changing things at random to align anything

I'm already using Radix for some basic components and it's... Fine I guess. Kind of fiddly and I don't really like the documentation but it works.

This is a pretty complex app with lots of compositing/dynamic elements and tons of backend state that is in flux while I figure out how it's going to work, so I'm really emphasizing reusability.

Edit: this is a weird ask, but just to highlight how complex the design is, it would be very useful if I could find a clean way to get some kind of per-item sorting that lets me do stuff like A renders on top of B, B renders on top of C, C renders on top of A. I know that could lead to problems if they all end up in the same place.

Designer but mostly front-end dev here, and you're a perfect use case for something like Bootstrap. Unless you really want to dive deep into UX, visual design and S/CSS, you can save yourself a lot of effort by offloading that portion of the project to a framework. I wouldn't recommend that for anything other than a personal project. The more backend I do the more I realize that front-end dev is loving weird and dumb and unless you really need to learn it you should just stay the hell away from it if you can.

Otherwise if you really DO want to learn it, I'd suggest taking a few Treehouse courses on CSS and Sass. A UX course wouldn't go astray, but the gist of UX is don't try to reinvent the wheel, put things where people expect them, and give your layouts a bit of thought about how users will interact with them before you just start slapping things on the page. The rest of UX is testing your theories to see if they're right or not.

Visual design is a whole 'nother ball of wax and uses a completely different part of your brain and I'm not aware of a good, quick resource to pick up design experience because, as it's taught in school, it's applied art with a background in art history/theory. It's nice to be able to do both and I spent the first half of my career doing so, but I eventually came to the conclusion that it was a good way to be mediocre at both design and dev. Dev pays more, so now I mainly focus on dev and only dabble in design when necessary.

dupersaurus posted:

I haven�t really thrown hands with grid yet but I�ve made whole pages with flexbox so don�t count it out

If you use flexbox to make grids, you will find grid a thousand times simpler to work with. Flexbox is great when you need things to flex, but when you need things to display in a grid, grid is brainlessly easy to pick up and work with.

kedo fucked around with this message at 03:13 on Feb 1, 2023

# ? Feb 1, 2023 03:06

KillHour: Oct 28, 2007

Thanks for the advice. Maybe it will help if I can be a little clearer. The project isn't primarily a website. It's a web based tool and the layout is going to be completely dynamic based on user input. It's not quite as free form as something like Lucidchart, but that's the best comparison I can think of in terms of complexity and how the user is expected to interact with it. It's going to have a lot of state going around everywhere and the entire layout could change (and break horribly) in a few clicks. It's definitely not something where slapping a pre-canned theme will work well.

For the visual side, I realize I'm never going to make a mind blowing piece of visual art, but basic stuff like "here's how you design a toolbar component that is readable and can be reused in different contexts" or "here are some rules of thumb for clarity/whitespace/relative sizing" would be good.

Also, the project relies on a very specific idea I have for how certain things will connect visually. The layout is the main thing of importance, not necessarily the words on the page.

Utilitarian is fine as long as it doesn't look haphazardly thrown together. Just how to make things cohesive.

Also, I really don't care about supporting anything except common desktop and laptop screens, so I don't need to worry about mobile anything, which is nice.

Edit: having things be specific relative sizes exactly where I need them is definitely going to be more common than wanting content to just fill the space. All of the individual modules need to visibly connect up like a jigsaw puzzle and they can't go wandering around.

KillHour fucked around with this message at 04:35 on Feb 1, 2023

# ? Feb 1, 2023 04:31

hey mom its 420: May 12, 2007

I know it's beneficial to know CSS first, but once you're sort of proficient with it, I can't recommend TailwindCSS enough. It provides a bunch of utility classes that make a lot of sense and you just put them inline with your components. It makes a bunch of things faster, you don't have to come up with class names and jump around files and has sensible defaults and tools that make your designs a lot more consistent.

# ? Feb 1, 2023 08:38

prom candy: Dec 16, 2005; Only I may dance

There are lots of ways to avoid learning CSS but ultimately I think all of them are more work than just learning CSS. Box model, flexbox, grid. Even if you used a framework like bootstrap or material you're going to want to lay stuff out your own way sometimes and you're going to spend more time with trial and error than if you just take a day or two to sit down and try to understand the basics.

# ? Feb 1, 2023 15:12

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Grid is great.

The major thing I have to keep remembering with it is to use minmax(0, 1fr) instead of just 1fr when I can't have the grid cell's content growing the grid dimensions if it's too large.

# ? Feb 1, 2023 15:22

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

So, when prototyping or debugging layouts to see where they're going wrong I do the usual thing of temporarily setting background-color to plum or pin., If I'm feeling particularly high-level I'll set the outline property throw on a or box-shadow (possibly inset) instead.

I added the following CSS class declaration to my toolbox of tricks last week and I can't believe I've not been using it before:

CSS code:

.xbox {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' preserveAspectRatio='none'%3E%3Cpath stroke='darkgoldenrod' vector-effect='non-scaling-stroke' d='M0 0L9 9 M9 0L0 9 M0 0L0 9 M9 0L9 9 M0 0L9 0 M0 9L9 9'/%3E%3C/svg%3E");
  background-size: 100%;
}

# ? Feb 1, 2023 15:28

Sistergodiva: Jan 3, 2006; I'm like you,
I have no shame.

Do you know about chromes grid and flex debugging? Works great for showing you what is happening as well as toggling flex options to test things.

# ? Feb 2, 2023 10:14

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Sistergodiva posted:

Do you know about chromes grid and flex debugging? Works great for showing you what is happening as well as toggling flex options to test things.

Oh hell yeah, use it (and Firefox's slightly more advanced version) all the time. Just sometimes I want to see the extents of more than one region at a time, so quickly adding .xbox classes on a few elements help.

# ? Feb 2, 2023 10:46

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I've found color scheme generators indispensable. There's a ton of them around but the idea is that you fiddle around with it and before your very eyes are a set of as few as three and as many as 5 coordinated and complimentary colors. Mixing warm and cold, whatever you want.

You can use some lightening/darkening but overall never use more than like 4 colors on your webpage.

A second piece of advice I've found useful to keep in the back of my mind is that the best website is just a button in the middle of the screen that when clicked does what the user came to the website to do. Anything else added to the page needs to have a good reason for being there. Of course one button in the middle of the page isn't realistic but it's a visual ideal.

Nolgthorn fucked around with this message at 13:44 on Feb 2, 2023

# ? Feb 2, 2023 13:01

HaB: Jan 5, 2001; What are the odds?

Nolgthorn posted:

I've found color scheme generators indispensable. There's a ton of them around but the idea is that you fiddle around with it and before your very eyes are a set of as few as three and as many as 5 coordinated and complimentary colors. Mixing warm and cold, whatever you want.

You can use some lightening/darkening but overall never use more than like 4 colors on your webpage.

I use paletton for this and it's great. Can pick a color and decide how you want the complimentary colors to be picked. Then it gives you several shades of each, and shows you all the combinations. Will even dump CSS vars out in the flavor of your choice.

edit: 1 L, 2 Ts. link fixed.

HaB fucked around with this message at 16:13 on Feb 3, 2023

# ? Feb 2, 2023 13:29

KillHour: Oct 28, 2007

HaB posted:

I use palleton for this and it's great. Can pick a color and decide how you want the complimentary colors to be picked. Then it gives you several shades of each, and shows you all the combinations. Will even dump CSS vars out in the flavor of your choice.

Uhhh, are you sure that's the correct link?

# ? Feb 3, 2023 16:05

HaB: Jan 5, 2001; What are the odds?

KillHour posted:

Uhhh, are you sure that's the correct link?

Ha. I fixed it. Good catch.

# ? Feb 3, 2023 16:13

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

I really like Schemist. You put in a color and add colors based on that original color to come up with a scheme, and also has buttons to show you the WCAG-approved contrast pairings.

# ? Feb 3, 2023 16:16

zynga dot com: Nov 11, 2001; wtf jill im not a bear!!!

A dossier and a state of melted brains: The Jess campaign has it all.

I've been playing around with Next.js and NextAuth.js, and I've been able to get auth working with the Google provider. Now, for local dev, I want to be able to change the logged in user via a dropdown box containing a list of available test users, so I can test various permission levels without restarting the app. A submit button underneath the dropdown calls signIn() for my provider (I'm using the Credentials provider for local dev), and this works on a fresh start of the app and a new browser tab.

Where I'm running into trouble is CSRF protection. When I try to change users, the sign in will fail on a call to /api/auth/csrf. If I wait a period of time and try again, sometimes it will work, but I'm guessing that's due to some expiration value. My initial assumption was that I needed to force a logout of the existing user via signOut(). I made a Sign Out button to test, but if it had any effect it hasn't fixed the CSRF issue. Frontend development is not really my area, and so I feel like I'm missing something fundamental in my approach - any ideas?

# ? Feb 4, 2023 20:52

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

What do you mean by "fail on a call to /api/auth/csrf"? What's the actual error message?

# ? Feb 4, 2023 23:01

zynga dot com: Nov 11, 2001; wtf jill im not a bear!!!

A dossier and a state of melted brains: The Jess campaign has it all.

Jabor posted:

What do you mean by "fail on a call to /api/auth/csrf"? What's the actual error message?

The endpoint exists server-side (I can curl it) but the error is client-side and looks like this:

Only registered members can see post attachments!

# ? Feb 5, 2023 17:38

zokie: Feb 13, 2006; Out of many, Sweden

Failed to fetch is usually the generic error message you get why you have CORS problems.

# ? Feb 5, 2023 17:46

smackfu: Jun 7, 2004

Feels like Chrome could use a deep dive into improving their CORS error messaging. How much time has been wasted by this error message:

code:

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

# ? Feb 5, 2023 17:57

zynga dot com: Nov 11, 2001; wtf jill im not a bear!!!

A dossier and a state of melted brains: The Jess campaign has it all.

It looks like the answer was just my lack of React experience. I was using a <form> element with a <select> to handle the dropdown, a <button> to handle the Submit button, and using the form's onSubmit to handle the signin based on the selected email value. The fix was that I needed to add a preventDefault() to avoid the form's default submission behavior. Once I did that, the CSRF weirdness went away and this is working as expected. Thanks all for the replies.

# ? Feb 6, 2023 01:31

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

smackfu posted:

Feels like Chrome could use a deep dive into improving their CORS error messaging. How much time has been wasted by this error message:

This is out of Chrome's hands it just receives a response and then protects you if the server is doing something wrong by binning it, it's up to whatever server software you are using to deliver more info. It's demanding the server issues more headers.

Unfortunately in Javascript especially for some reason all server implementations don't care about CORS, it's like a second thought. The server doesn't even know what methods are available at the given url. Take a look at express for example and it's ridiculous (not even bundled) recommended cors module, you tell it at the root to tell the client that all methods are available at any url.

Why? Because developers are bad, and developers that use bad modules are even worse.

# ? Feb 7, 2023 01:46

smackfu: Jun 7, 2004

Yeah, that�s kind of my point, I wish it didn�t give false hope that you could fix CORS errors client-side.

# ? Feb 7, 2023 01:51

Adbot: ADBOT LOVES YOU

# ? Apr 16, 2024 11:32

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I think it's assuming you don't necessarily have access to server code and if you did you'd improve it, almost like giving the benefit of the doubt.

# ? Feb 7, 2023 02:07

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »