The Web Design & Development Megathread

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

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

Help computer.

Tei posted:

I find the => operator ugly

Have you tried any fonts with programming ligatures, like FiraCode or Hasklig?

# ¿ Nov 26, 2020 07:40

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 15:48

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

Help computer.

uncle blog posted:

code:

jQuery.fn.init�[div.page-root]
jQuery.fn.init�[div.page-root]
jQuery.fn.init�[div.page-root]
jQuery.fn.init�[div.page-root]
undefined
jQuery.fn.init�[div.page-root]
undefined
jQuery.fn.init�[div.page-root]
undefined
jQuery.fn.init�[div.page-root]

I don't have any answers, but I find it extremely curious that you're getting back a list of jQuery collections from a library that's meant for selecting React components.

# ¿ Dec 4, 2020 23:04

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

Help computer.

I can't seem to appreciate any other front-end framework's template syntax now after using JSX for a few years. It all looks like yucky old mustache or angular 1.x to me.

# ¿ Jan 14, 2021 01:45

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

Help computer.

A 50-something KB JSON is probably smaller than most of the images on your page. Sure, it has some parsing cost, but it's a negligible amount. It's certainly not a big enough problem to be worth exploring other encoding formats which would require custom parsing code and likely result in the same if not worse performance. Sticking with JSON gives you a native parser implementation from the browser.

# ¿ Feb 25, 2021 17:32

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

Help computer.

For small clients, grab a reseller account from MXRoute to sell to them.

# ¿ Feb 26, 2021 00:42

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

Help computer.

Given the target audience is low income high school students, I don't know if assuming they have SMS access is a great idea. Even if they or a parent do have a phone, it might be a prepaid without any minutes on it.

# ¿ Mar 10, 2021 02:41

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

Help computer.

Lumpy posted:

That will only strip out the first space character. Also, the + should probably go inside the capture group.

I'm gonna recommend something more like this:

code:

/^\s*(?:\+\d{1,3})?\s*(?:\d\s*){8}\s*$/

^\s* - start of string, with optional leading whitespace
(?:\+\d{1,3})? - optional non-capturing group to get the country code (a + followed by 1 to 3 digits). If the country code is always supposed to be +50, then swap in (?:\+50)? instead.
\s* - more optional whitespace
(?:\d\s*){8} - non-capturing group, repeated 8 times to match exactly 8 digits, with optional whitespace after each digit. If you want to match 8 or more digits, swap in (?:\d\s*){8,} instead.
\s*$ - end of string with optional trailing whitespace

Putting optional leading/trailing whitespace at the start and end of the regex is generally a bad look and in some situations can open you up to regex denial-of-service attacks, so I agree that trimming the string beforehand with .trim() or even stripping spaces as a pre-processing step is probably a good idea. Then the regex would become:

Assuming a trimmed string (.trim()):

code:

/^(?:\+\d{1,3})?\s*(?:\d\s*){8}$/

Assuming stripped all space characters (.replace(/\s/g, '')):

code:

/^(?:\+\d{1,3})?\d{8}$/

Ima Computer fucked around with this message at 16:27 on Mar 25, 2021

# ¿ Mar 25, 2021 16:24

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

Help computer.

Biowarfare posted:

all/most browsers already alias $ to querySelector and $$ to querySelectorAll

This only works while you're in the console.

# ¿ Apr 13, 2021 23:00

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

Help computer.

Skyarb posted:

Any ideas?

Can you change the markup at all?

You could add a wrapper element around your padding-aspect-ratio-ed element with a max-height/max-width.

Or maybe you could add the max-dimension styles to the element itself and move the padding into a ::before pseudo-element?

Ima Computer fucked around with this message at 23:41 on Apr 16, 2021

# ¿ Apr 16, 2021 23:37

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

Help computer.

marumaru posted:

Forgive my ignorance, what's a managed VPS?
Is it something like a DigitalOcean droplet?

In the webhosting world, "managed" refers to products that come bundled with services/maintenance/support.

For a VPS, a "managed" offering would mean that someone who isn't you would take care of all the software installation, configuration, updates, security patches, etc for you.

DigitalOcean's droplets are an example of an "unmanaged" VPS, where they just give you the credentials to access the server and from there you're on your own.

# ¿ May 7, 2021 00:07

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

Help computer.

Anony Mouse posted:

Ok hold up. iOS 15 Safari now floats the navbar over the bottom of the page? It seems to collapse when you scroll, but who the hell thought it was a good idea to overlay browser chrome directly over webpage content? This is one of the dumbest design decisions I've seen, and directly interferes with the usability of webpage content and interfaces at the bottom of the viewport.

My tinfoil hat theory is that they're trying to force people to start using env(safe-area-inset-bottom) in their CSS.

# ¿ Jun 17, 2021 02:15

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

Help computer.

fuf posted:

Any suggestions on how to accomplish this? I can crop the video by setting its width or height to >100%, but I can't figure out how to set like a "max crop".

There's no way to do this with pure CSS... at least not until container queries are a thing.

Use a ResizeObserver to detect when the container <div> changes dimensions. Calculate the aspect ratio of the div, and then toggle a class on the <video> that swaps between object-fit: cover and object-fit: contain based on whether or not the aspect ratio is within a certain range (plus or minus some % of the video's original aspect ratio).

# ¿ Dec 6, 2021 20:01

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

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

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

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

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

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

Help computer.

htmlFor is always going to be a thing too. Both of those alternative identifiers for HTML attributes have their roots in the DOM (see: Element.className, HTMLLabelElement.htmlFor)

# ¿ Jan 25, 2022 06:56

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

Help computer.

LifeLynx posted:

- I noticed there's a lot of rerenders, and I think it's because of the cursor component, namely the useMouse hook. It constantly needs to update the state of the position. On top of that, certain things use the ImageHover component, which also updates the global state (useContext) in order to change the styling of the cursor so it doesn't visually block buttons or photos. My question is, is the rerendering just an unavoidable tradeoff for having a cool cursor effect? I saw a lot of sites on Awwwards using the same effect and wanted to see if I could replicate it.

Calling useMouse at pretty much the root of the application (in your Layout component) means that you're re-rendering the entire page for every mouse position update.

Since the only thing that needs to re-render when the mouse moves is the circle element, you could move rendering code for that element and the useMouse hook call into it's own component, and pass the ref from the Layout component to it as a prop. It should be a big performance improvement.

Changes to overButton state will still trigger a re-render of the entire page, but considering that occurs far less frequently than mouse position updates, it's a lot less of a concern.

# ¿ Jan 26, 2022 03:29

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

Help computer.

tRPC has gotten popular enough that people are trying to reimplement the tRPC developer experience for GraphQL servers now.

# ¿ Mar 4, 2023 06:33

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

Help computer.

Lumpy posted:

Because I'm lazy and didn't read the documentation, does tRPC require your front and back end be in he same repo?

You don't need to. You could have your tRPC server in its own repo and publish it as an npm package that includes the generated type definitions. But it's significantly less convenient to work that way, even if you use npm link or a tool like yalc to avoid constantly doing the publishing step.

Ima Computer fucked around with this message at 12:27 on Mar 5, 2023

# ¿ Mar 5, 2023 12:23

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

Help computer.

I moved all my domains to Porkbun a while back because they had reasonably competitive pricing and a cute pig mascot. Would recommend.

# ¿ Aug 1, 2023 14:56

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

Help computer.

Polio Vax Scene posted:

Trying to get npm build to get my output files juuust right...

I'm using the rewired package to change the output filenames.

Webpack is painful to configure, even for those of us who've been doing it for years. And it's especially awkward to try to patch an existing config from create-react-app.

I think there's a solution for your problem that doesn't involve fiddling with webpack though.

According to this docs page, you can add this line to your package.json to build for relative paths:

JSON code:

  "homepage": ".",

Polio Vax Scene posted:

For context I just started trying to learn how to use React and npm yesterday so I have no idea wtf I'm doing

I would recommend considering checking out some other options besides create-react-app - it's no longer maintained, supported, or recommended anymore.

The docs currently recommend starting out with a framework like Next.js, but if a framework is overkill, Vite's react template is a strong replacement for create-react-app, and also much easier to configure and customize.

# ¿ Aug 23, 2023 03:38

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

Help computer.

As a general rule, you should always include a text label on your inputs.

The only time you can reasonably exclude them is if there are other context clues that make it clear what the intent of the input is, such as submit buttons that are paired exclusively with that input, or iconography. For example, google's homepage doesn't put a label on their search field, because the icon on the input and labels of submit buttons make it obvious what that input is for.

You should still include an aria label for screen readers even if you find a case where you can exclude the visual label though.

kedo posted:

I've thought about going the moving label/fake placeholder route (where the label pretends to be a placeholder and then, upon field focus, it moves up and out of the way of the field which was all the hotness maybe 5-10 years ago)

This is what Material Design does. It's fine, but it still requires that designers accommodate for the space of the label when the field is populated by a value.

kedo posted:

most of the forms I deal with allow for non-devs to edit the label text, so there's a distinct possibility of someone putting 200 characters into a label or something like that.

Can you set a reasonable character limit for text field labels? Otherwise, I would just let it overflow with ellipsis, then retroactively complain at people who put obnoxiously-long labels on inputs.

# ¿ Nov 13, 2023 18:38

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

Help computer.

kedo posted:

Any ideas? I'm going nuts over here.

Most likely the issue is being caused by a shared reference to an object somewhere where there shouldn't be, but I wasn't able to identify the origin of it, based on your modified code sample.

Does anything change if you call marker.setIcon() instead of this.setIcon()

I would also try attaching the event directly to the marker (which looks like it should be supported, according to the docs)

JavaScript code:

marker.addListener('mouseover', () => {
  marker.setIcon(iconActive);
});
marker.addListener('mouseout', () => {
  marker.setIcon(iconOut);
});

# ¿ Dec 5, 2023 22:45

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

Help computer.

America Inc. posted:

In my mind, React works like this: you've got a hierarchy of components, each with their own state. When the state of the parent updates, the children are re-mounted, and the state is reset to initial values.

When the state of a parent component updates, as long as that parent renders a given child component in the same position of the render tree, that child will be re-rendered, not re-mounted.

If you want to force a component to be remounted/reset like that, the easiest thing to do is probably to throw the value of query into the key prop:

JavaScript code:

<ListingsPage key={query} query={query} />

There's a decent article in the new react docs that goes into this in more detail as well.

# ¿ Apr 21, 2024 20:56

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 15:48

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

Help computer.

prom candy posted:

Also not sure exactly what you're doing...

That effect was only being used for debugging purposes (to detect when a new instance of the component gets mounted)

# ¿ Apr 22, 2024 19:10

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