Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
MrMoo
Sep 14, 2000

some kinda jackal posted:

Can someone recommend a technology-agnostic book or tutorial on designing a web UI or user experience for an app?

I started learning Angular to design a UI to wrap around an API I'm also writing, but the more I learn about the technology the more I feel like a builder who knows how to use his tools but doesn't actually know how to put them together to build a house.

So like.. Patterns? Concepts? I don't really know what the term I'm looking for is.

I suppose it's just system design overall, but I think with a focus on designing a user experience. I can go into some detail on what the app itself is supposed to do, but getting too specific might be a mistake right now. I don't really want advice on how to build MY app, but more theory on the workflow and thought process/considerations when building a user facing app in general. So even lacking a specific link or tutorial, if someone can tell me the term I'm trying to hunt i'm happy to go away and do my own research. Thanks!

Did you try ChatGPT? Here is the response from that:

quote:

Certainly! One highly regarded book that is technology-agnostic and focuses on the principles of designing a good user experience is "Don't Make Me Think" by Steve Krug. It's a classic in the field of web usability and provides practical advice on how to create intuitive and user-friendly interfaces.

Here are some other recommendations:

1. "The Design of Everyday Things" by Don Norman: While not specifically about web design, this book delves into the principles of good design and usability, providing insights that can be applied to web UI/UX.

2. "Seductive Interaction Design" by Stephen Anderson: This book explores the concept of creating engaging and compelling user experiences. It covers various aspects of interaction design and provides practical examples.

3. "Lean UX: Designing Great Products with Agile Teams" by Jeff Gothelf and Josh Seiden: This book focuses on integrating user experience design into the agile development process. It's practical and emphasizes a collaborative approach.

4. "Rocket Surgery Made Easy" by Steve Krug: Another excellent book by Steve Krug, this one focuses on usability testing. It's a practical guide that can help you understand how users interact with your design and make improvements based on real-world feedback.

5. Online Course - "Human-Computer Interaction" by Stanford University on Coursera: This is a more extensive resource that covers various aspects of human-computer interaction, including user interface design. It's taught by Scott Klemmer, a professor in the Department of Cognitive Science at UC San Diego.

Remember, the field of web UI/UX is constantly evolving, so it's also a good idea to stay updated with the latest trends and best practices by following blogs, attending conferences, and participating in online communities related to UX design.

I was hoping the books were fake but they are actually real.

Some are available here:

https://ia902800.us.archive.org/3/items/thedesignofeverydaythingsbydonnorman/The%20Design%20of%20Everyday%20Things%20by%20Don%20Norman.pdf
https://github.com/cmupitts/ebooks_4/tree/master/startups
https://yes-pdf.com/electronic-book/1916
https://ptgmedia.pearsoncmg.com/images/9780321725523/samplepages/0321725522.pdf (Sample, ~30 pages)

I hope that's legit.

MrMoo fucked around with this message at 23:06 on Nov 14, 2023

Adbot
ADBOT LOVES YOU

some kinda jackal
Feb 25, 2003

 
 
:lol: somehow it didn’t even cross my mind to ask the machine. Thanks! Those actually sound legitimately like what I’m after. If anyone has any other suggestions I’ll add to my list, otherwise it sounds like I can kick off from here :)

huhu
Feb 24, 2006
I feel like this thread exists exactly for questions like what he’s asking and I wouldn’t trust ChatGPT if I know nothing about the question I’m asking. From the books I know from that list it generated, I don’t think it’s a good place to start.

some kinda jackal posted:

Can someone recommend a technology-agnostic book or tutorial on designing a web UI or user experience for an app?

I started learning Angular to design a UI to wrap around an API I'm also writing, but the more I learn about the technology the more I feel like a builder who knows how to use his tools but doesn't actually know how to put them together to build a house.

So like.. Patterns? Concepts? I don't really know what the term I'm looking for is.

I suppose it's just system design overall, but I think with a focus on designing a user experience. I can go into some detail on what the app itself is supposed to do, but getting too specific might be a mistake right now. I don't really want advice on how to build MY app, but more theory on the workflow and thought process/considerations when building a user facing app in general. So even lacking a specific link or tutorial, if someone can tell me the term I'm trying to hunt i'm happy to go away and do my own research. Thanks!

Sounds like you’re describing the entire career choice that is “ux/ui designer”. Asking developers this question might not get you the best results but there might be some designers here.

“Material design” by Google could be a good place to start. You can learn about the philosophy by googling the term. There’s also MUI which is a design library, based on Material Design, for React which offers a lot of pre built and well designed components like buttons and form inputs.

huhu fucked around with this message at 01:07 on Nov 15, 2023

MrMoo
Sep 14, 2000

huhu posted:

I feel like this thread exists exactly for questions like what he’s asking and I wouldn’t trust ChatGPT if I know nothing about the question I’m asking. From the books I know from that list it generated, I don’t think it’s a good place to start.

That's why I found the PDF links, no harm in reading the first few chapters.

prom candy
Dec 16, 2005

Only I may dance

some kinda jackal posted:

Can someone recommend a technology-agnostic book or tutorial on designing a web UI or user experience for an app?

I started learning Angular to design a UI to wrap around an API I'm also writing, but the more I learn about the technology the more I feel like a builder who knows how to use his tools but doesn't actually know how to put them together to build a house.

So like.. Patterns? Concepts? I don't really know what the term I'm looking for is.

I suppose it's just system design overall, but I think with a focus on designing a user experience. I can go into some detail on what the app itself is supposed to do, but getting too specific might be a mistake right now. I don't really want advice on how to build MY app, but more theory on the workflow and thought process/considerations when building a user facing app in general. So even lacking a specific link or tutorial, if someone can tell me the term I'm trying to hunt i'm happy to go away and do my own research. Thanks!

You might like Refactoring UI

some kinda jackal
Feb 25, 2003

 
 
thanks gang. Yeah, for sure I'm basically saying that I'd love to get up to speed on a whole practice people spend their entire career perfecting, with my eyes wide open. No expectations that I'm fluent on day one, but I always love to see how the other half thinks :)

HaB
Jan 5, 2001

What are the odds?

some kinda jackal posted:

thanks gang. Yeah, for sure I'm basically saying that I'd love to get up to speed on a whole practice people spend their entire career perfecting, with my eyes wide open. No expectations that I'm fluent on day one, but I always love to see how the other half thinks :)

Weirdly, someone sent me a comic yesterday about UI vs UX and I feel like it was a really good illustration of the difference between the 2:

Corb3t
Jun 7, 2003

I have a Masters in UI/UX but I'm just a lowly Business Analyst who works with his art team and front-end developers to figure out UI/UX. Bigger orgs have an entire UI/UX team working on their design system. It's a very competitive field. I'd just suggest constantly iterating and ideating on your design as you conduct usability tests with new users - it's important to remain unbiased and not nudge people to how your app functions while somebody is walking through your app and giving observations for the first time.

MrMoo posted:

Did you try ChatGPT? Here is the response from that:

I was hoping the books were fake but they are actually real.

Design of Everyday Things is the gold standard in UI/UX - Everybody should read it, really.
Lean UX is pretty good too.

Haven't read the others.

Corb3t fucked around with this message at 17:23 on Nov 15, 2023

hey mom its 420
May 12, 2007

some kinda jackal posted:

Can someone recommend a technology-agnostic book or tutorial on designing a web UI or user experience for an app?

I started learning Angular to design a UI to wrap around an API I'm also writing, but the more I learn about the technology the more I feel like a builder who knows how to use his tools but doesn't actually know how to put them together to build a house.

So like.. Patterns? Concepts? I don't really know what the term I'm looking for is.

I suppose it's just system design overall, but I think with a focus on designing a user experience. I can go into some detail on what the app itself is supposed to do, but getting too specific might be a mistake right now. I don't really want advice on how to build MY app, but more theory on the workflow and thought process/considerations when building a user facing app in general. So even lacking a specific link or tutorial, if someone can tell me the term I'm trying to hunt i'm happy to go away and do my own research. Thanks!

I would recommend this: https://www.refactoringui.com/

I'm was pretty much in the same boat as you, and this was right up my alley.

some kinda jackal
Feb 25, 2003

 
 
I mean I was instantly sold because “I know this looks terrible, but I have no idea why” is basically my tagline at this point

Second reco for Refactoring UI, consider it a done deal. Thanks!

smackfu
Jun 7, 2004

I like how it’s a $100 book but since people will just expense it as training, that is perfectly reasonable.

Maybe we have some training budget left.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Corb3t posted:


Design of Everyday Things is the gold standard in UI/UX - Everybody should read it, really.


:emptyquote:

HaB
Jan 5, 2001

What are the odds?
Does anyone know why a <form> with method POST and a url will succeed while an XHR post of the same data to the same url does not?

I assume it's CORS related, since that's what the error was, but is there some structural difference in how the requests are made that makes one fail on the preflight, but the other not?

Ima Computer
Oct 28, 2007

Stop all the downloading!

Help computer.
The CORS header only impacts XHR/fetch requests. It doesn't prevent a your browser window from navigating to a new URL, which is what submitting a form does.

Haystack
Jan 23, 2005





HaB posted:

Does anyone know why a <form> with method POST and a url will succeed while an XHR post of the same data to the same url does not?

I assume it's CORS related, since that's what the error was, but is there some structural difference in how the requests are made that makes one fail on the preflight, but the other not?

What's the server's response to your XHR request?

HaB
Jan 5, 2001

What are the odds?

Haystack posted:

What's the server's response to your XHR request?

a CORS error. it fails the preflight.

Ima Computer posted:

The CORS header only impacts XHR/fetch requests. It doesn't prevent a your browser window from navigating to a new URL, which is what submitting a form does.


Ah. Thanks.

M31
Jun 12, 2012
I remember reading about an exception to CORS somewhere (spec?) exactly because it could be done by a form post. If it's not working for you it's probably for some other reason, maybe something like sending JSON instead of form data?

zokie
Feb 13, 2006

Out of many, Sweden
If you do a manual fetch, maybe you are sending some headers that need to be controlled? Because otherwise a POST isn’t really supposed to be preflighted. CORS is for reading

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
just took a job using Nextjs, but 90% of the site is still client-side rendered. My previous job 3 jobs ago also did a complete rewrite from Vue to Nextjs and also client-side rendered basically all of the app.

What's the deal with this? I feel like i'm seeing a trend of dev teams reaching for SSR frameworks, but not SSRing anything with the logic of "our app doesn't need SEO or cached content"

teen phone cutie fucked around with this message at 17:43 on Dec 4, 2023

Vesi
Jan 12, 2005

pikachu looking at?
it's relatable because I just started a new next project with big plans of doing everything right this time, noped out after one day not because it's too hard or anything, I just wanted results more quickly so I went back to vanilla single page react

prom candy
Dec 16, 2005

Only I may dance
Next is an opinionated way to set up a react project with a big community and a bunch of helpers so it kinda makes sense. Plus you can SSR the routes that you need to easily.

Macichne Leainig
Jul 26, 2012

by VG
Yeah even Next's tutorial doesn't drop you straight into the SSR stuff, most of it is "here's our (superior) project file structure, some other opinionated bits, its own backend API section. goodluck"

Obfuscation
Jan 1, 2008
Good luck to you, I know you believe in hell
React documentation also tells you to use Next and create-react-app isn't updated anymore. I guess you can just set up a new node project with your favorite bundler but that's probably too many fiddly bits to include in the official documentation.

The Fool
Oct 16, 2003


Obfuscation posted:

React documentation also tells you to use Next and create-react-app isn't updated anymore. I guess you can just set up a new node project with your favorite bundler but that's probably too many fiddly bits to include in the official documentation.

I still use CRA and will move to vanilla js before I use Next.

hey mom its 420
May 12, 2007

Also relatable to me. We started writing an app with Next 12 pages router, and most of it is client-side rendering. The main reason for that is that while the SSR in the pages router is good for stuff like webpages, it's a little weird for stuff that's used like an app. Because if you want to fetch data on the server, every page has to know what data its descendants might need and then it has to somehow propagate it down the tree. So if you have a sidebar that's present on many pages (but not all of them), the easiest thing to do is to just do the fetching client-side. And once you're doing that, you might as well do all of it client-side instead of doing it half and half. We also had to integrate with an existing API's auth, so we'd have to do the auth twice (once for getServerSideProps and once for the client fetching). Mutations were also a problem if you didn't want to just reload the whole page.

The app router addresses a lot of those things and makes the whole experience much better (for developers as well as for users), but despite being supposedly production ready, it's still not very mature. For instance, I found a bug where the server-side fetch deduplication doesn't work if you just import the cookies function anywhere in the same file. And monkey-patching the native fetch function was a really bad decision, which I think they're going to walk back on now thankfully.

I'm pretty optimistic about the app router and RSC because the whole thing makes sense and is really nice to code with, but they did release it way too early.

edit: oh and another thing, in the pages router if you did a lot of fetching, your TTFP would be through the roof because everything had to be fetched at once before the user started seeing anything other than a white screen. That's why you had to do a mix of fetching on the server and the client, at which point why bother

hey mom its 420 fucked around with this message at 16:19 on Dec 4, 2023

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

The Fool posted:

I still use CRA and will move to vanilla js before I use Next.

Try Vite, it's very good

KillHour
Oct 28, 2007


This might be bad design because I'm not a professional web developer but when you are writing a middle tier, something with built in server side functionality can really help since you don't need to deal with CORS bullshit.

smackfu
Jun 7, 2004

Another terrible idea is to just use nginx to put everything on the same domain.

I’m not even sure if this is terrible but it feels like cheating.

Macichne Leainig
Jul 26, 2012

by VG
Nah nginx is specifically designed as a reverse proxy. And you probably should design your applications so that the only web access is through something like a reverse proxy for security reasons anyway :shrug:

Or just give into Vercel entirely and yolo it onto their platform

Splinter
Jul 4, 2003
Cowabunga!

The Fool posted:

I still use CRA and will move to vanilla js before I use Next.

Post-username combo :smuggo:

prom candy
Dec 16, 2005

Only I may dance
If anyone does want a React SSR option Remix is very good and being owned by Spotify means they're not trying to sell you hosting.

Vincent Valentine
Feb 28, 2006

Murdertime

Speaking of CRA going to no update, what's the New Hotness for "I just want something to scaffold out a simple app that runs exclusively on my machine that isn't going to be used by really anyone other than me and maybe four dudes" and/or "This job interview gave a take home assessment that shouldn't take more 180 minutes and I don't want to spend 30 of them getting set up"? I'm specifically aiming for just React and Typescript, just client-side stuff. Any other bells and whistles should be to improve or facilitate that simplicity, or should be able to be ignored in a way that still qualifies as Best Practices™.

I saw Vite mentioned and I know Next is the standard for Real Projects, but I'm not sure what other options are out there.

Vincent Valentine fucked around with this message at 06:46 on Dec 5, 2023

prom candy
Dec 16, 2005

Only I may dance

Vincent Valentine posted:

Speaking of CRA going to no update, what's the New Hotness for "I just want something to scaffold out a simple app that runs exclusively on my machine that isn't going to be used by really anyone other than me and maybe four dudes" and/or "This job interview gave a take home assessment that shouldn't take more 180 minutes and I don't want to spend 30 of them getting set up"? I'm specifically aiming for just React and Typescript, just client-side stuff. Any other bells and whistles should be to improve or facilitate that simplicity, or should be able to be ignored in a way that still qualifies as Best Practices™.

I saw Vite mentioned and I know Next is the standard for Real Projects, but I'm not sure what other options are out there.

Vite

Vesi
Jan 12, 2005

pikachu looking at?

nice, inspired by this I switched my project from CRA to Vite now, took about 20 mins of minor fiddling

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

prom candy posted:

If anyone does want a React SSR option Remix is very good and being owned by Spotify means they're not trying to sell you hosting.

We are kicking off a new app, and we're deciding between using Remix and NX Standalone. We also looked at Next as well as Redwood. Redwood was interesting, and if I was a one-person shop getting an app up fast, I might use it. Next wasn't bad from a technical perspective, just concerned more about lock-in and if we decided to stop using it, how much code would be "useless" because it was just framework code.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

We are kicking off a new app, and we're deciding between using Remix and NX Standalone. We also looked at Next as well as Redwood. Redwood was interesting, and if I was a one-person shop getting an app up fast, I might use it. Next wasn't bad from a technical perspective, just concerned more about lock-in and if we decided to stop using it, how much code would be "useless" because it was just framework code.

How is NX Standalone? We have a very large Angular SPA, and I'd like to be able to not have to build the entire project every time I make any change.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Merkinman posted:

How is NX Standalone? We have a very large Angular SPA, and I'd like to be able to not have to build the entire project every time I make any change.

Honestly I didn't get toooo much into it, but everything about it I liked. It came recommended from a few folks, including some here.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

quote:

If you need to write environment-specific code, you can check the value of NODE_ENV with process.env.NODE_ENV. Be aware that checking the value of any environment variable incurs a performance penalty, and so should be done sparingly.

https://expressjs.com/en/advanced/best-practice-performance.html

can anyone tell me if this also applies to next.js? it seems next might be changing the variables at build time instead of runtime, after some googling i just did??

e: and can someone link me to documentation i can bring to my team maybe?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Has anyone used launchdarkly for A/B testing, feature gating, etc. If so, any thoughts and opinions?

Adbot
ADBOT LOVES YOU

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Lumpy posted:

Has anyone used launchdarkly for A/B testing, feature gating, etc. If so, any thoughts and opinions?

my team uses it extensively for feature gating since we rely on another service with a different release cycle and also sometimes want to release features to specific users for testing in production. it’s been great and i have nothing bad to say about it

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply