|
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 |
|
|
# ? May 16, 2024 18:12 |
|
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 |
|
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 |
|
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 |
|
Lumpy posted:https://www.cafepress.com/+,399750000?gclid=CjwKCAiA78aNBhAlEiwA7B76p73JZiTANxvEX1Nmiwi_HAEXAdcGzSzNRdwVYjHs6AbTWuTl1FfPUxoCnU0QAvD_BwE excellent
|
# ? Dec 9, 2021 21:45 |
|
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 |
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 |
|
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 |
|
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 |
|
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 |
|
…you opt for outline over border in PRs? Like, for production code?
|
# ? Dec 11, 2021 02:44 |
|
box-shadow lets you create complete and partial borders without affecting the dimensions.
|
# ? Dec 11, 2021 02:48 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
Lumpy posted:That is incorrect. border-box makes borders fit inside the defined width / height.
|
# ? Dec 11, 2021 22:18 |
|
Lumpy posted:That is incorrect. border-box makes borders fit inside the defined width / height. 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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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:
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 |
|
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 |
|
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 |
|
Verisimilidude posted:My company is looking for a full stack engineer, with a focus on react. 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 |
|
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 |
|
geez yeah you can get that salary as a FE-only dev not in NY
|
# ? Dec 13, 2021 20:27 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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:
|
# ? Dec 16, 2021 13:55 |
|
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. 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 |
|
^^ 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 |
|
|
# ? May 16, 2024 18:12 |
|
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. Where is the code that adds the new thing to allThings?
|
# ? Dec 16, 2021 15:52 |