The Web Design & Development Megathread

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

«‹›361 »

The Dave: Sep 9, 2003

The Merkinman posted:

Thinking on the flip side, ecommerce you could have a list of products and throw it in a table with columns for "image" "name" "size" "price" "rating" etc, but websites don't do that because...?

You could, and you often see that in ecommerce sites where people know exactly what they want and aren't being convinced to buy something. Think a contractor supply store where you need to look at a lot of parts, reference a lot of data points, and be able to easily search and filter that data, works really well.

However shift over to something more like amazon, best buy, etc. and you'll get something that's more like a card system because the objects you can purchase get the space and hierarchy to convince the customer that they should buy them. It allows you to have more space for conversion-focused headlines and content, fit different lengths of content in a layout that's less restrictive then columns. Allows you to have different card templates based on the objects and how you want to prioritize them, and gets you away from everything needing to fit on one row, which would just be impossible to do in any way that would be appealing.

The downside is that makes it harder to compare the specific features of one item against a group of items, but you'll see amazon saves that sort of view for the product details page, after it's convinced you to investigate a little more.

That's not to say you can't put an amazon item list in a table, it would just be restrictive and more transactional, leading to less sales.

# ? Dec 8, 2021 11:14

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 11:09

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

A friend is starting up in a ui/ux bootcamp and I�d like to get her a small Christmas gift to keep her inspired, and preferably something useful for her work. Any neat gift ideas for someone going into that field? Books, tools, etc.

# ? Dec 9, 2021 21:02

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

Verisimilidude posted:

A friend is starting up in a ui/ux bootcamp and I�d like to get her a small Christmas gift to keep her inspired, and preferably something useful for her work. Any neat gift ideas for someone going into that field? Books, tools, etc.

https://www.cafepress.com/+,399750000?gclid=CjwKCAiA78aNBhAlEiwA7B76p73JZiTANxvEX1Nmiwi_HAEXAdcGzSzNRdwVYjHs6AbTWuTl1FfPUxoCnU0QAvD_BwE

# ? Dec 9, 2021 21:13

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

Lumpy posted:

https://www.cafepress.com/+,399750000?gclid=CjwKCAiA78aNBhAlEiwA7B76p73JZiTANxvEX1Nmiwi_HAEXAdcGzSzNRdwVYjHs6AbTWuTl1FfPUxoCnU0QAvD_BwE

Did a double take and realized that it even has the ultimate troubleshooting technique of border: 1px solid red

# ? Dec 9, 2021 21:33

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

Lumpy posted:

https://www.cafepress.com/+,399750000?gclid=CjwKCAiA78aNBhAlEiwA7B76p73JZiTANxvEX1Nmiwi_HAEXAdcGzSzNRdwVYjHs6AbTWuTl1FfPUxoCnU0QAvD_BwE

excellent

# ? Dec 9, 2021 21:45

Violator: May 15, 2003

LifeLynx posted:

Did a double take and realized that it even has the ultimate troubleshooting technique of border: 1px solid red

I�ll have muscle memory for typing that for the rest of my life. Probably hear it tapping out of my coffin when I�m dead and my muscles contract.

# ? Dec 10, 2021 00:29

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

I went years repeatedly coding a floating div with monospace text so I could arbitrarily innerHTML() poo poo into it before I realized that browsers had a thing called a "console"

# ? Dec 10, 2021 00:51

kedo: Nov 27, 2007

I once met a developer who used border: 1px solid green; for troubleshooting and that person was a loving psychopath.

# ? Dec 10, 2021 19:26

Leshy: Jun 21, 2004

outline: 1px solid red; superiority.

Although border is so muscle-memory-ingrained that I use it all the time as well.

# ? Dec 10, 2021 21:37

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

outline gang here too. i don't understand why people opt for border when outline doesn't affect the dimensions. that's something i nitpick in PRs like all the time.

e: unless the designs call for a partial border of something

# ? Dec 10, 2021 21:41

fsif: Jul 18, 2003

�you opt for outline over border in PRs? Like, for production code?

# ? Dec 11, 2021 02:44

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

box-shadow lets you create complete and partial borders without affecting the dimensions.

# ? Dec 11, 2021 02:48

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Related to the earlier video sizing question - nowadays there is a native aspect-ratio property in CSS. No need for the hideous padding trick any more.

# ? Dec 11, 2021 17:08

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

fsif posted:

�you opt for outline over border in PRs? Like, for production code?

yeah usually just because it takes 2 extra pixels and for tighter spaces, sometimes you need that extra space. Especially when the border is bigger

# ? Dec 11, 2021 19:24

fsif: Jul 18, 2003

I'm not fully tracking, but are you describing something that can't be addressed via box-sizing: border-box?

Borders are pretty bread and butter CSS properties and I'd probably lose it if someone requested I change to outlines in a PR without a pretty good reason, heh.

# ? Dec 11, 2021 20:07

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

box-sizing: border-box doesn't matter. Borders will always stack on top of your defined dimensions.

And if you ever need to hide/show the borders on the fly, you end up needing to make up for the lost/gained space by tweaking the padding or margin, or else you get shifting: https://jsfiddle.net/16eztcqr/

# ? Dec 11, 2021 20:53

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

Ima Computer posted:

box-sizing: border-box doesn't matter. Borders will always stack on top of your defined dimensions.

That is incorrect. border-box makes borders fit inside the defined width / height.

https://jsfiddle.net/td41oanj/

# ? Dec 11, 2021 21:57

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

Lumpy posted:

That is incorrect. border-box makes borders fit inside the defined width / height.

My bad. It stacks when the dimension is inherited from the content/children, but not when the dimension is explicitly defined. So in your demo, the border is only adding additional height to the element.

# ? Dec 11, 2021 22:18

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

That is incorrect. border-box makes borders fit inside the defined width / height.

https://jsfiddle.net/td41oanj/

well

that works too. TIL lol

but yeah I mean i'm not saying i'm a nazi about it but I think it's a nice alternative if you're working inside a small container like a drawer or something

# ? Dec 11, 2021 22:41

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

Here's another example of borders being annoying, even with defined dimensions. A list of items with identical padding where some of the items are highlighted with a border. If you avoid using an actual border, you don't need to worry about adjusting your padding so that the content of each item still lines up: https://jsfiddle.net/uxdaw01L/

# ? Dec 11, 2021 23:20

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Ima Computer posted:

Here's another example of borders being annoying, even with defined dimensions. A list of items with identical padding where some of the items are highlighted with a border. If you avoid using an actual border, you don't need to worry about adjusting your padding so that the content of each item still lines up: https://jsfiddle.net/uxdaw01L/

thank you for coming up with concrete examples because i made this argument and instantly forgot every scenario where i suggested it in PR review.

# ? Dec 11, 2021 23:30

fsif: Jul 18, 2003

Yeah, but I'd still argue we're in edge case territory and you've made the code more difficult to read versus just adding new padding values. If I'm not working in your codebase all the time, I'm not going to assume a box-shadow refers to a border.

And using outline or box-shadow in place of border has other trade offs, too. If you default to outline, you're likely setting up weirdness for people using their keyboards to navigate. If you default to box-shadow, you're using a more convoluted syntax, particularly if you actually need to add a proper drop shadow.

Nevermind that you can't, you know, specify different border sizes for different sides of the element.

# ? Dec 11, 2021 23:59

Roadie: Jun 30, 2013

Ima Computer posted:

Here's another example of borders being annoying, even with defined dimensions. A list of items with identical padding where some of the items are highlighted with a border. If you avoid using an actual border, you don't need to worry about adjusting your padding so that the content of each item still lines up: https://jsfiddle.net/uxdaw01L/

Just use a transparent border on the things that aren't highlighted. If you're using css-in-js or the like this even makes things easier because then the only thing you're changing on highlight/selection status is the border color.

# ? Dec 12, 2021 00:02

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

A transparent border is still an unintuitive hack and still impacts the layout, since it effectively becomes additional padding on the element. If you're using a strict design system with a scale of spacing values, it feels bad to define bespoke spacing to accommodate a border on an element (or worse, to put a calc() in there).

It's not without it's trade-offs (mostly the convoluted syntax, which can be worked around with a SCSS mixin or a CSS-in-JS utility function) but if you want the ability to set a border without impacting the layout, or to set an inset border, using box-shadow can be worth it.

# ? Dec 12, 2021 00:44

fsif: Jul 18, 2003

Going to stick my way neck out and say it: a commonly used transparent border for edge cases is way more intuitive than using a utility function on a box-shadow every time you want to add a border.

# ? Dec 12, 2021 01:06

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I have this element that needs to wiggle sometimes, and not wiggle other times. My problem is that switching from wiggling to not-wiggling is not smooth.

code:

.pulse {
  background-color: red;
  width: 200px;
  height: 200px;
}

.pulse:hover {
  background-color: blue;
  animation: 1s ease-in-out infinite alternate pulseAnim;
}

@keyframes pulseAnim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

In the above, the box pulses correctly when hover is applied, but when hover is removed the scaling snaps instantly back to 100% with no animation, but I'd like it to transition back instead.

Any suggestions?

e: transition: all 1s on .pulse above makes the color change smooth, but not the size :/

Newf fucked around with this message at 03:38 on Dec 12, 2021

# ? Dec 12, 2021 03:24

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

There's no transition on the base element. Something like transition: scale 0.2s would probably look smooth. Someone correct me if transitions and animations complete with each other or something dumb I'm forgetting.

# ? Dec 12, 2021 07:05

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

My company is looking for a full stack engineer, with a focus on react.

If you're interested, please feel free to apply here and email me at jmartinez729 at gmail to expedite the process.

Pay range is unlisted but internally it's $75k-$100k/year based on experience. Remote. Excellent healthcare benefits. Preferably EST but open to other options.

Verisimilidude fucked around with this message at 20:05 on Dec 13, 2021

# ? Dec 13, 2021 20:01

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

Verisimilidude posted:

My company is looking for a full stack engineer, with a focus on react.

If you're interested, please feel free to apply here and email me at jmartinez729 at gmail to expedite the process.

Pay range is unlisted but internally it's $75k-$100k/year based on experience. Remote. Excellent healthcare benefits. Preferably EST but open to other options.

Is there equity involved in the comp package? Cause if not this is laughably low, especially for an NYC company (even if the position is remote)

# ? Dec 13, 2021 20:19

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

camoseven posted:

Is there equity involved in the comp package? Cause if not this is laughably low, especially for an NYC company (even if the position is remote)

Def low for NYC but I hired a good coder ~1 yr ago in that range in non-figgies-land with that level of experience before. You're gonna get someone without a CS degree but they don't list degree requirements. Shouldn't be TOO hard to fill since fully remote.

That said, they may well leave in a year for $125K.

# ? Dec 13, 2021 20:24

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

geez yeah you can get that salary as a FE-only dev not in NY

# ? Dec 13, 2021 20:27

The Dave: Sep 9, 2003

You can get someone but oh boy is the quality going to be awful at that pay or they really really don't know any better.

# ? Dec 13, 2021 20:33

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

camoseven posted:

Is there equity involved in the comp package? Cause if not this is laughably low, especially for an NYC company (even if the position is remote)

No equity unfortunately.

# ? Dec 13, 2021 20:42

fawning deference: Jul 4, 2018

As a junior developer on the job hunt, it is both odd and encouraging that people scoff at 75-100K as laughably low for a remote position. I guess I'm in the right industry.

# ? Dec 13, 2021 23:40

Armauk: Jun 23, 2021

Verisimilidude posted:

Pay range is unlisted but internally it's $75k-$100k/year based on experience.

What's the range of experience your company's looking for to get a $100K+ start?

# ? Dec 14, 2021 02:53

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

Armauk posted:

What's the range of experience your company's looking for to get a $100K+ start?

Strong personal skills and projects built in modern react. A couple years of professional experience (1-3) helps but isn�t necessary.

# ? Dec 14, 2021 04:50

uncle blog: Nov 18, 2012

I'm not too experienced with Redux. Have a page that lists a bunch of things, and another to create more things. The problem I encounter is that after creating a new thing (by dispatching the create function which contacts the API to actually create the thing) and sending the user to the page that lists the things (and dispatches a fetch function with useEffect), the list page hasn't received the latest thing in the state object.

code:

const CreatePage = () => {
  const handleCreateClick = () => {
    dispatch(createThing(newThing))
    history.push("/listPage")
  }

  return (
    <div>
      <ThingForm />
      <Button onClick={handleCreateClick}>CREATE</Button>
    </div>
  )
};


const ListPage = () => {
  const things = useSelector((state: State) => state.allThings?.things);

  useEffect(()=> {
    dispatch(getListOfThings())
  }, [dispatch])

  return(
    <div>
      {things.map(thing => 
        <div>{thing}</div>  
      )}
    </div>
  )
}

What's the good way of actually doing this right?

# ? Dec 16, 2021 13:55

Verisimilidude: Dec 20, 2006; Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges

uncle blog posted:

I'm not too experienced with Redux. Have a page that lists a bunch of things, and another to create more things. The problem I encounter is that after creating a new thing (by dispatching the create function which contacts the API to actually create the thing) and sending the user to the page that lists the things (and dispatches a fetch function with useEffect), the list page hasn't received the latest thing in the state object.
code:
const CreatePage = () => {
  const handleCreateClick = () => {
    dispatch(createThing(newThing))
    history.push("/listPage")
  }

  return (
    <div>
      <ThingForm />
      <Button onClick={handleCreateClick}>CREATE</Button>
    </div>
  )
};


const ListPage = () => {
  const things = useSelector((state: State) => state.allThings?.things);

  useEffect(()=> {
    dispatch(getListOfThings())
  }, [dispatch])

  return(
    <div>
      {things.map(thing => 
        <div>{thing}</div>  
      )}
    </div>
  )
}
What's the good way of actually doing this right?

It could be that because the history.push is occurring asynchronously with your call to getListOfThings, your useEffect that watches for dispatch is not triggering when your page finally loads, since dispatch was called before the page loaded rather than after. Since the data may not be loaded in yet, and no rerender was forced, the data is not appearing to change.

You can try another useEffect that watches for things. It should force a rerender whenever things changes.

Verisimilidude fucked around with this message at 14:56 on Dec 16, 2021

# ? Dec 16, 2021 14:27

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

^^ That's probably what's up but is it possible for your createThing() action to just add the new thing to state so that you don't need to fetch them all again?

# ? Dec 16, 2021 15:12

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 11:09

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

uncle blog posted:

I'm not too experienced with Redux. Have a page that lists a bunch of things, and another to create more things. The problem I encounter is that after creating a new thing (by dispatching the create function which contacts the API to actually create the thing) and sending the user to the page that lists the things (and dispatches a fetch function with useEffect), the list page hasn't received the latest thing in the state object.
code:
const CreatePage = () => {
  const handleCreateClick = () => {
    dispatch(createThing(newThing))
    history.push("/listPage")
  }

  return (
    <div>
      <ThingForm />
      <Button onClick={handleCreateClick}>CREATE</Button>
    </div>
  )
};


const ListPage = () => {
  const things = useSelector((state: State) => state.allThings?.things);

  useEffect(()=> {
    dispatch(getListOfThings())
  }, [dispatch])

  return(
    <div>
      {things.map(thing => 
        <div>{thing}</div>  
      )}
    </div>
  )
}
What's the good way of actually doing this right?

Where is the code that adds the new thing to allThings?

# ? Dec 16, 2021 15:52

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

«‹›361 »