The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

Dominoes: Sep 20, 2007

Der Shovel posted:

It's definitely possible I was taught that with React you want to break poo poo down into component parts, but maybe that's not actually how you're supposed to do it?

There are many patterns, but I've found it's easiest to keep all state in the top-level component, or in something like Redux.

# ? Dec 8, 2019 21:49

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 07:36

Shaman Tank Spec: Dec 26, 2003; *blep*

Dominoes posted:

There are many patterns, but I've found it's easiest to keep all state in the top-level component, or in something like Redux.

Yeah, that makes sense. This website was developed using the age-old "make it up as you go along" pattern, and since I'm new to React I kept making even more poo poo up as I went along than normal.

# ? Dec 8, 2019 22:00

marumaru: May 20, 2013

Dominoes posted:

There are many patterns, but I've found it's easiest to keep all state in the top-level component, or in something like Redux.

As always, YMMV and you always have to decide what's best in each case, but I often keep component-specific state in the component and shared state in a context (or in Redux if I want a few extra kB in my bundles! :angel:

)

# ? Dec 8, 2019 22:04

Roadie: Jun 30, 2013

Der Shovel posted:

The filter:

Use mapping, not loops. Also, put your fetched data in state instead of attaching it to the class instance. Also, don't use imperative calls for synchronously filtered values, just statelessly do it in the render function.

JavaScript code:

render() {
  const filters = howeverYerGettinFilterValuesHere;
  const { fetchedJson } = this.state;

  const filteredJson = fetchedJson
    .filter(
      item =>
        item.minplayers <= filters.players && filters.players <= item.maxplayers
    )
    .filter(
      item =>
        (filters.playingTime === "short" && item.playingtime <= 60) ||
        (filters.playingTime === "medium" && item.playingtime <= 120) ||
        filters.playingTime === "long"
    );

  return (
    <div className="something">
      {filteredJson.map(item => (
        <div key={item.something}>{item.whatever}</div>
      ))}
    </div>
  );
}

Don't worry about optimizing it until you actually notice any problems, and even then your first step should just be to look at memoization based on input values into the filter.

# ? Dec 8, 2019 22:11

Dominoes: Sep 20, 2007

Inacio posted:

As always, YMMV and you always have to decide what's best in each case, but I often keep component-specific state in the component and shared state in a context (or in Redux if I want a few extra kB in my bundles! )

Agree on it depends. To add an example, since my last post was vague: I refactored some code today in a React app where something like this came up. Let's say you have A as a parent to b and c. Part of the state, including code to update it, is in b. You later want c to have access to it; it's a messier op to reroute it around. If it started in A, the refactor's just an issue of adding a prop. So, overall I find this approach makes refactoring easier. A downside is the props lists can get longer, or you may have to make sub structures to combat that. In the framework I posted in a diff thread, I'm forcing behavior like this by not allowing components to have state; everything is channeled through a model the top-level component has access to. Events update it directly without callbacks.

Dominoes fucked around with this message at 22:27 on Dec 8, 2019

# ? Dec 8, 2019 22:15

Shaman Tank Spec: Dec 26, 2003; *blep*

Roadie posted:

Use mapping, not loops. Also, put your fetched data in state instead of attaching it to the class instance. Also, don't use imperative calls for synchronously filtered values, just statelessly do it in the render function.

Don't worry about optimizing it until you actually notice any problems, and even then your first step should just be to look at memoization based on input values into the filter.

Wow, that's cool. I hadn't even thought of putting that junk in the render function. Thanks for the idea!

# ? Dec 8, 2019 22:29

Roadie: Jun 30, 2013

Der Shovel posted:

Wow, that's cool. I hadn't even thought of putting that junk in the render function. Thanks for the idea!

When in doubt, try to put any and all synchronous operations in the render function top to bottom as straightforward as possible. Once you have it working that way, that's when you consider whether you need helper functions or cached versions of processed data. (If you've written everything else to only re-render when absolutely necessary, you probably don't.)

# ? Dec 8, 2019 22:40

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

Dominoes posted:

There are many patterns, but I've found it's easiest to keep all state in the top-level component, or in something like Redux.

Exact opposite in my experience. Keep state as close as possible to the thing that needs it, and only hoist it when you need to (or if you're pretty certain you will need to down the line, obviously planning your architecture at least a little bit in advance goes a long way here)

# ? Dec 9, 2019 02:43

Dominoes: Sep 20, 2007

If applicable, what do you use (Or notice other people are using) micro backend frameworks for? Eg Flask, Starlette, FastAPI, Rocket, Actix. These frameworks have a lot of active development, are very easy to get started with, and are able to set up servers with a single page of code.

eg: Here's an Actix Hello-World:

Rust code:

use actix_web::{web, App, HttpRequest, HttpServer, Responder};

fn greet(req: HttpRequest) -> impl Responder {
    let name = req.match_info().get("name").unwrap_or("World");
    format!("Hello {}!", &name)
}

fn main() {
    HttpServer::new(|| {
        App::new()
            .route("/", web::get().to(greet))
            .route("/{name}", web::get().to(greet))
    })
    .bind("127.0.0.1:8000")
    .expect("Can not bind to port 8000")
    .run()
    .unwrap();
}

They lack common features used in websites like users/auth, admin, email, database integration etc. Some of these can be handled with bolt-on packages that have varying degrees of compatibility.

Anecdotally, I'm not sure how I'd build a website using these, without doing a lot of work by hand (ie solving solved problems). What are the use-cases, and how do you handle the batteries-not-included parts? I keep coming back to Django, since it includes these things, which for most websites, I'd consider requirements more than extras.

I attempted recently to make a new project using Rust on the server, but gave up due to this. I've used Flask in the past, and was able to make it work by assembling components, but overall it was a hassle getting them to work together. I'm asking to reconcile my anecdotes with the evident popularity of this style.

Dominoes fucked around with this message at 03:23 on Dec 9, 2019

# ? Dec 9, 2019 03:18

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

I'm asking to reconcile my anecdotes with the evident popularity of this style.

People are developing stuff that 1) has just an endpoint or three or 2) they just don't know any better.

Related to #2 is the fact that the more stuff you include in the box (like Django), the better you have to know the framework to know how to use it without the stuff you don't need or how to customize it to your particular usage.

As an illustration of that, I think most people don't realize that Django is perfectly capable of delivering a simple single view/url in a single file with something like 15 lines just like you can with Flask. It's just that the docs, tutorials and community are all focused on illustrating everything it can do without bothering with the minimum you must do.

# ? Dec 9, 2019 04:00

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

Roadie posted:

Don't worry about optimizing it until you actually notice any problems....

This is the A#1 development advice that everyone starting should write in sharpie on their monitor.

# ? Dec 9, 2019 14:16

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

Der Shovel posted:

This is a Photoshop mockup of what I want:

First step to good CSS is good markup. What you need is to divide up that image into boxes that make sense. You need one that is that rounded border, within that you need one that encompasses the image and the title box. The image should be absolutely positioned so that it overlaps the title box. Within the title box you need a box with a margin that takes into account the width of the image.

I'm ignoring the rest of it. With a simple structure you can have perfectly good CSS that only has to do what you need.

# ? Dec 9, 2019 14:30

Shaman Tank Spec: Dec 26, 2003; *blep*

Roadie posted:

When in doubt, try to put any and all synchronous operations in the render function top to bottom as straightforward as possible. Once you have it working that way, that's when you consider whether you need helper functions or cached versions of processed data. (If you've written everything else to only re-render when absolutely necessary, you probably don't.)

Yeah see there we go, this is the kind of stuff I wish I'd learned some place. My background is 100% in things like C#/Python/Java so this is all new to me. Thanks for the explanations and help

# ? Dec 10, 2019 11:18

bigmandan: Sep 11, 2001; lol internet; College Slice

I mostly write/update internal web sites/applications. I'm super lazy and just use bootstrap to get a functional UI out that happens to looks half decent.

That said I still like writing my own css for the very rare time I do something that's public facing and is not an "application".

# ? Dec 10, 2019 18:07

kedo: Nov 27, 2007

Lumpy posted:

This is the A#1 development advice that everyone starting should write in sharpie on their monitor.

If QA doesn't make an issue about it, it's not a bug.

# ? Dec 10, 2019 18:43

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

kedo posted:

If QA doesn't make an issue about it, it's not a bug.

Premature optimization in the best case leads to code that is overly complex for no reason, at the worst just breeds bugs - I've spent hundreds of hours in meetings about bugs involving data that was cached when it wasn't expected or didn't need to be cached, and oh wait the cache itself was useless. I'm not saying you should slam a method that runs in factorial time just because gently caress it, it works, but often I find that people skip the the step where they write a functional version of the code and profile it to see where the pain points are.

# ? Dec 11, 2019 14:34

Null of Undefined: Aug 4, 2010; I have used 41 of 300 characters allowed.

Bruegels Fuckbooks posted:

Premature optimization in the best case leads to code that is overly complex for no reason, at the worst just breeds bugs - I've spent hundreds of hours in meetings about bugs involving data that was cached when it wasn't expected or didn't need to be cached, and oh wait the cache itself was useless. I'm not saying you should slam a method that runs in factorial time just because gently caress it, it works, but often I find that people skip the the step where they write a functional version of the code and profile it to see where the pain points are.

Working at my current job is a constant fight against pre-mature optimization, and adding in every 3rd party library in existence. Luckily I�m finally at a point in my career where the product owner listens when I say No.

# ? Dec 11, 2019 16:49

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

What's a good way to handle the case when someone updates the email address in their profile to an email address that belongs to another account?

I don't think it's right to just tell them "hey that email address belongs to another account" as that leaks information about other users on the site.

# ? Dec 11, 2019 19:29

Data Graham: Dec 28, 2009; 📈📊🍪😋

If it were me I'd require any email change (assuming you're not using it as the login id) to go through a confirmation loop.

If someone tries to change to someone else's email address, it would just tell them "Hey check your email at otherguy@otheremail.com for the confirmation link", only it would have checked silently in the backend, found that it was already in use by another account, and not sent an email out at all.

Any holes in that logic I'm not thinking of? Aside from operational stuff like "you have to maintain a field for the user's current email and the pending one they're trying to change to" and such cruft.

# ? Dec 11, 2019 19:53

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Data Graham posted:

If it were me I'd require any email change (assuming you're not using it as the login id) to go through a confirmation loop.

If someone tries to change to someone else's email address, it would just tell them "Hey check your email at otherguy@otheremail.com for the confirmation link", only it would have checked silently in the backend, found that it was already in use by another account, and not sent an email out at all.

Any holes in that logic I'm not thinking of? Aside from operational stuff like "you have to maintain a field for the user's current email and the pending one they're trying to change to" and such cruft.

This seems right and is what I've done in the past. I just forgot!

# ? Dec 11, 2019 19:56

Volguus: Mar 3, 2009

Data Graham posted:

If it were me I'd require any email change (assuming you're not using it as the login id) to go through a confirmation loop.

If someone tries to change to someone else's email address, it would just tell them "Hey check your email at otherguy@otheremail.com for the confirmation link", only it would have checked silently in the backend, found that it was already in use by another account, and not sent an email out at all.

Any holes in that logic I'm not thinking of? Aside from operational stuff like "you have to maintain a field for the user's current email and the pending one they're trying to change to" and such cruft.

Even if you're using it as the login id, there's no reason to not go through the confirmation loop. You'd log them out and until the new email is confirmed they should still be able to login with the old one. Only once confirmed, the change is actually performed.

# ? Dec 11, 2019 20:09

Data Graham: Dec 28, 2009; 📈📊🍪😋

Yeah, I just meant if I were using it as the login ID I would probably not let them change it at all :buddy:

# ? Dec 11, 2019 20:13

Volguus: Mar 3, 2009

Data Graham posted:

Yeah, I just meant if I were using it as the login ID I would probably not let them change it at all

Ouch, that's not something that I would even consider. A user should be able to change anything and everything visible about their account. Should have an internal ID which they cannot see or change, but otherwise, should be able to go nuts.

# ? Dec 11, 2019 20:17

Data Graham: Dec 28, 2009; 📈📊🍪😋

Yeah, fair point. Most of my sites have been low-traffic enough that I can say "contact support to change your email", but I'm gonna add that functionality to the todo list on the one I'm currently working on.

# ? Dec 11, 2019 20:27

The Dave: Sep 9, 2003

I think if it matches an email on an account, you might want to send some sort of communication to that email that an attempt was made to use this email on an account and that if it was done in earnest you already have an account and here's the path to reset your password if you've forgotten it.

Also allows that person to be alerted that someone may be trying to hack their stuff if they get multiple attempts. Guess the downside to this would be someone using it to spam someone? Need to figure out a rate for it.

# ? Dec 11, 2019 21:19

Data Graham: Dec 28, 2009; 📈📊🍪😋

Volguus posted:

Even if you're using it as the login id, there's no reason to not go through the confirmation loop. You'd log them out and until the new email is confirmed they should still be able to login with the old one. Only once confirmed, the change is actually performed.

Actually hey, what's the reasoning behind logging them out when they submit the new email address, if they're still able to login using their old one? Why not just leave them logged in and refresh their session once they confirm?

Because otherwise they could login with their old address again and be in the same state as they would have been if I hadn't logged them out, right? And what's the exposure of that�just that they would then be in a weird "email change pending" state that I might (depending how transparent I want to be) have to display in the UI?

# ? Dec 11, 2019 21:21

Volguus: Mar 3, 2009

Data Graham posted:

Actually hey, what's the reasoning behind logging them out when they submit the new email address, if they're still able to login using their old one? Why not just leave them logged in and refresh their session once they confirm?

Because otherwise they could login with their old address again and be in the same state as they would have been if I hadn't logged them out, right? And what's the exposure of that�just that they would then be in a weird "email change pending" state that I might (depending how transparent I want to be) have to display in the UI?

You're right, there's no reason to log them out. There probably would be if you wouldn't allow them to log back in until they confirm the new address, but that's a bit nuts.

# ? Dec 11, 2019 22:02

drainpipe: May 17, 2004; AAHHHHHHH!!!!

I don't know if this is the right place to ask this but here we go. I'm learning GraphQL and I'm wondering if I'm implementing field resolvers in a particularly bad way.

I have a GraphQLTypeObject that has a few fields, say name and creator, but it is uniquely identified by another field id. I've written resolvers for both name and creator that findOnes the entry in the Mongo database using id and returns the name and creator fields.

This works fine, but it seems wildly inefficient since each resolver has to do a findOne. So if I want both name and creator, it does two database queries whereas it could be done easily with just one. Is there a way to combine these two resolvers if I know I'm going to be getting both? Am I even writing resolvers in the right way?

# ? Dec 19, 2019 14:49

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Is everyone having as much fun with CCPA as we are where I work?

# ? Dec 19, 2019 16:29

Tei: Feb 19, 2011; Can't post for 36 hours!

The Merkinman posted:

Is everyone having as much fun with CCPA as we are where I work?

These laws exist so the legal world could syphoon money from the IT world and lowers companies ability to compete with others. Are damaging society and probably are against the stated goals.

Here in europe have a lot of them and sometimes I think Brexit is not that bad a idea, but a violent revolution against the people that voted for these laws would be better.

# ? Dec 19, 2019 18:13

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

As a developer I hate dealing with those sorts of regulations, but honestly, they are necessary because a lot of people do a lot of shady poo poo that needs to be stopped.

Even as a small-time developer, I've had clients ask me to do things that are morally questionable and would be prohibited under these regulations, and I like being able to point to the regulations and say, "no, you can't do that, it's illegal" instead of "no, I won't do that, it's wrong."

# ? Dec 19, 2019 19:33

Jimlit: Jun 30, 2005

Tei posted:

These laws exist so the legal world could syphoon money from the IT world and lowers companies ability to compete with others. Are damaging society and probably are against the stated goals.

Here in europe have a lot of them and sometimes I think Brexit is not that bad a idea, but a violent revolution against the people that voted for these laws would be better.

ah yes, imagine a boot stomping on a human face forever...

# ? Dec 19, 2019 20:32

spiritual bypass: Feb 19, 2008; Grimey Drawer

Is it common for people running an important website at a big company to not know how http caching works? A client has been asking me for weeks why their site is slow or down and I keep telling them to stop setting a session cookie on anonymous traffic. It's maddening!

# ? Dec 20, 2019 00:31

The Dave: Sep 9, 2003

rt4 posted:

Is it common for people running an important website at a big company to not know

yes

# ? Dec 20, 2019 00:54

Tei: Feb 19, 2011; Can't post for 36 hours!

rt4 posted:

Is it common for people running an important website at a big company to not know how http caching works? A client has been asking me for weeks why their site is slow or down and I keep telling them to stop setting a session cookie on anonymous traffic. It's maddening!

Maybe the site have parts that require a session system and what you suggest would require a programmer since disabling sessions globally would break these parts

# ? Dec 20, 2019 10:16

drainpipe: May 17, 2004; AAHHHHHHH!!!!

I'm curious how to do a certain CSS thing. I'm trying to replicate the scrolling behavior of something like Google calendars. The entire page doesn't scroll, but an individual component does. The problem is that I don't know the height of that component to effectively use overflow.

If you look at Google calendar in day/week view, the actual calendar part scrolls, not the entire page. However, the height of that component is not known as it depends on the size of the viewport along with all the junk above it (like the header bar). Is there a CSS trick to do this kind of scrolling?

drainpipe fucked around with this message at 17:07 on Dec 23, 2019

# ? Dec 23, 2019 17:05

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

drainpipe posted:

I'm curious how to do a certain CSS thing. I'm trying to replicate the scrolling behavior of something like Google calendars. The entire page doesn't scroll, but an individual component does. The problem is that I don't know the height of that component to effectively use overflow.

If you look at Google calendar in day/week view, the actual calendar part scrolls, not the entire page. However, the height of that component is not known as it depends on the size of the viewport along with all the junk above it (like the header bar). Is there a CSS trick to do this kind of scrolling?

I'm phone posting, but basically you make a parent that is fixed 100:vh, then using flexbox or grid (or absolute positioning, or whatever) you make the content area fill remaining height past the header. Then you give a child of that heifght:100%; overflow-y:auto; and you are done. There are some weird tweaks you have to so for some browsers (like setting min-height: 0) but I don't remember them off the top of my head. Google it and all will be revealed!

# ? Dec 23, 2019 17:19

drainpipe: May 17, 2004; AAHHHHHHH!!!!

I'm doing something like that, but it doesn't seem to be clipping correctly. Here's my setup (this is translated from what React will output):

code:

<div style="height: 100vh, display: flex, flex-direction: column">
  <Header />
  <div style="display: flex, flex-direction: row">
    <SomeComponent />
    <div style=" width: 100%, height: 100%, overflow: auto">
      <BigOverflowingComponent />
    </div>
  </div>
</div>

However, the BigOverflowingComponent is not clipping correctly to its parent and instead is overflowing onto the page causing the entire page to scroll.

edit: What's weird is that even setting the top level div's overflow to scroll still doesn't work as the result is the same. Only setting the top level div to scroll: hidden stops the entire page from scrolling, but that doesn't allow the right thing to scroll.

drainpipe fucked around with this message at 17:52 on Dec 23, 2019

# ? Dec 23, 2019 17:35

drainpipe: May 17, 2004; AAHHHHHHH!!!!

After googling, I found that there's a calc function for CSS that allows you to do stuff like "height: calc(100vh - 10em)". This will probably suffice for now.

# ? Dec 23, 2019 18:43

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 07:36

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

drainpipe posted:

I'm doing something like that, but it doesn't seem to be clipping correctly. Here's my setup (this is translated from what React will output):
code:
<div style="height: 100vh, display: flex, flex-direction: column">
  <Header />
  <div style="display: flex, flex-direction: row">
    <SomeComponent />
    <div style=" width: 100%, height: 100%, overflow: auto">
      <BigOverflowingComponent />
    </div>
  </div>
</div>
However, the BigOverflowingComponent is not clipping correctly to its parent and instead is overflowing onto the page causing the entire page to scroll.

edit: What's weird is that even setting the top level div's overflow to scroll still doesn't work as the result is the same. Only setting the top level div to scroll: hidden stops the entire page from scrolling, but that doesn't allow the right thing to scroll.

This should get you heading in the right direction:

https://jsfiddle.net/dh3wt4jo/1/

# ? Dec 24, 2019 15:02

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »