The Web Design & Development Megathread

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

«‹›361 »

Cugel the Clever: Apr 5, 2009; I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

Look at all this baffling JS syntax! It's impossible to read without fully studying it!!!!

JavaScript code:

var myList = ['a', 'b', 'c'];

I can't make heads or tails of this. What's a "var"? Why is "myList" one word? That's not proper English! The word "myList" obviously doesn't equal brackets and letters wrapped in single quotes, whatever that's intended to be.

And look at the end there! They either didn't finish the sentence or fat-fingered a semicolon instead of a period. Boy, I hope someone got fired for that blunder.

Anyways, in all seriousness, I don't really see ES6+ as having anything more inscrutable than any other syntax, it's just a matter of gaining a little familiarity. Once you've read once what they do, all the examples you gave seem pretty intuitive :shrug:

# ? Oct 8, 2021 01:57

Adbot: ADBOT LOVES YOU

# ? May 20, 2024 12:08

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

at least use const :colbert:

UtahIsNotAState fucked around with this message at 20:40 on Oct 8, 2021

# ? Oct 8, 2021 20:31

Doom Mathematic: Sep 2, 2008

prom candy posted:

I mean we should probably be preventing accidental assignment via testing, not weird little syntax conventions

Or just use the linting rule for preventing accidental assignment?

# ? Oct 9, 2021 12:44

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Of all the Node based CMSs Apostrophe might actually be both the best and worst documented of all of them.

# ? Oct 9, 2021 17:07

worms butthole guy: Jan 29, 2021; by Fluffdaddy

lol. That's why I rolled my own in node/express.

Anyone know where I can go to find a graphic designer or inspiration for a personal site? I am so not artistic at all.

# ? Oct 11, 2021 21:48

uncle blog: Nov 18, 2012

I cloned a repo to a new Mac, and now the IDE (VSCode) is giving my new errors. I have some custom code to check if a request is allright:

code:

export function handleErrors(response: AxiosResponse<any>) {
  if (
    response.status !== 200 &&
    response.status !== 201 &&
    response.status !== 202
  ) {
    console.log('error', response.statusText);

    throw Error(response.statusText);
  }
  return response;
}

And some other code where I use a try catch to trigger the request:

code:

export function getStuff() {
    try {
      const response = await sendRequest({
        getStuff: {}
      });
      handleErrors(response);
    } catch (error) {
      console.log(error.message));
    }
 }

The catch retrieves the thrown error, and the IDE used to be able to infer the type of the error.
But now it is considered unknown, and gives an error. Any idea what�s wrong?

Typescript version 4.0.2.

# ? Oct 13, 2021 12:25

kedo: Nov 27, 2007

Anyone familiar with Github Actions that can help me figure something out? I'm trying to see if I can them to run a gulp build and then deploy to a server without using a third party service like DeployHQ or whoever. The deployment bit is easily accomplished with easingthemes/ssh-deploy, but I'm running into some issues with building.

My problem is this: I want to ignore the contents of the dist directory in my project folder because I don't want files from local builds to be committed during normal development. So I have this in the .gitignore inside that directory to ignore the directory contents (except the .gitignore itself):

code:

*
*/
!.gitignore

My workflow looks like this:

code:

name: Build & Deploy
concurrency: 
  group: production
  cancel-in-progress: true
on:
  push:
    branches: [ deployment-test ]
jobs:
  # Job 1: Gulp Build
  build:
    runs-on: ubuntu-latest
    steps:
    #Step 1: Gulp Build
    - uses: actions/checkout@v2
      with:
        persist-credentials: false
        fetch-depth: 0
    - uses: actions/setup-node@v1
      with:
        node-version: 10.16.3
    - run: npm ci
    - run: gulp build
    #Step 2: Get date (for commit)
    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(date +'%Y-%m-%d %H:%M:%S')"
    #Step 3: Commit to a branch
    - name: Commit files
      run: |
           git config --local user.name  ${{ github.actor }}
           git add -A
           git commit -m "Gulp build ${{ steps.date.outputs.date }}" -a
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.REPO_GITHUB_TOKEN }}
        branch: deploy
# # # SSH deployment code # # #

The problem I'm running into is that if I have that .gitignore in my dist directory when the gulp build is performed, there's nothing to git add because the files that were just built are ignored. If I remove the .gitignore, everything processes as expected and build artifacts are successfully committed, but then they'd also be committed from local builds which is the whole thing I'm trying to avoid!

I know I could use .git/info/exclude locally to ignore the files which would solve the problem, but I'm trying to make this process easily reproducible so that anyone on my team can just clone the repo and start working without having to muck around with their git settings.

# ? Oct 13, 2021 16:17

Impotence: Nov 8, 2010; Lipstick Apathy

what are you actually trying to accomplish here? this is usually extreme bad code smell type of thing - it will crap up your commit history, diffs, etc.

you can have ci run `git add -f dist/` if you really want

(also that is a ludicrously old version of node)

# ? Oct 13, 2021 18:15

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

uncle blog posted:

I cloned a repo to a new Mac, and now the IDE (VSCode) is giving my new errors. I have some custom code to check if a request is allright:
code:
export function handleErrors(response: AxiosResponse<any>) {
  if (
    response.status !== 200 &&
    response.status !== 201 &&
    response.status !== 202
  ) {
    console.log('error', response.statusText);

    throw Error(response.statusText);
  }
  return response;
}
And some other code where I use a try catch to trigger the request:
code:
export function getStuff() {
    try {
      const response = await sendRequest({
        getStuff: {}
      });
      handleErrors(response);
    } catch (error) {
      console.log(error.message));
    }
 }
The catch retrieves the thrown error, and the IDE used to be able to infer the type of the error.
But now it is considered unknown, and gives an error. Any idea what�s wrong?

Typescript version 4.0.2.

Seems like this was an intentional change to TS in 4.4. Which honestly seems like a sensible change :shrug:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#use-unknown-catch-variables

edit: But you did say you're on 4.0.2 which is strange. Is VSCode using it's own version or your workspace's version

# ? Oct 13, 2021 19:17

kedo: Nov 27, 2007

I figured it out, I was going about it in a dumb way. Github provides a method for retaining and later serving built files within a workflow, so I was able to just use that instead of mucking around with committing.

Biowarfare posted:

what are you actually trying to accomplish here? this is usually extreme bad code smell type of thing - it will crap up your commit history, diffs, etc.

you can have ci run `git add -f dist/` if you really want

Basically when someone pushes to main, the workflow runs the build scripts and then pushes it up to a server via SSH. A few different resources I read suggested building the code and then re-committing it, which seemed weird to me because putting compiled CSS and JS into version tracking makes my skin crawl.

Biowarfare posted:

(also that is a ludicrously old version of node)

Yes! I'm on a ~3 month retainer with a design shop I've worked with off and on for several years, and they lost their main developer back when that was not such an ancient version of node. He created their project template, and while they have another developer on staff, she is fairly junior and always slammed because she's the only dev, so she's just working with what she's got. Part of my assignment is to bring this template into 2021, or at least as much as I can as a contractor who doesn't have to live with any decisions he makes (I'm pushing to get them to switch to a documented framework, but we'll see how that goes). My next hurdle is updating node/all of the npm packages which are all at least 3 years out of date, so that'll probably be interesting.

# ? Oct 13, 2021 21:33

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

If I'm rendering whatever markup inside of an iframe is:

code:

  [bracket] iframe sandbox="" srcdoc="myMarkup" [/bracket]

Accomplish the same end result as sanitizing the markup and escape script tags? I know they do different things, but are they just as secure?

e: forums not letting me post my code correctly so sorry for the ugliness

# ? Oct 14, 2021 22:43

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Fixins posted:

lol. That's why I rolled my own in node/express.

I absolutely cannot be hosed to build my own even though I, like everyone else, have mapped an entire one out in my head.

My post was vague though. Apostrophe is the best CMS, but has the worst documentation. Strapi is pretty good but Apostrophe inches ahead purely because it can be used headed or unheaded with Nunjucks(Would have preferred EJS or Handlebars but whatever). Ghost is also very good but its really just for 'Blogging', and in rather inflexible. You can really build anything out of Apostrophe with a little bit of effort but, again, the docs are loving _awful_ and its holding the entire project back because it really blows everything else out of the loving water once you get a handle on it.

# ? Oct 15, 2021 07:54

mitztronic: Jun 17, 2005; mixcloud.com/mitztronic

When we released apostrophe to production it was a disaster in terms of site speed. I don�t work there anymore, no idea if they fixed it. I wasn�t interested at all in working on that poo poo.

# ? Oct 15, 2021 15:28

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

mitztronic posted:

When we released apostrophe to production it was a disaster in terms of site speed. I don’t work there anymore, no idea if they fixed it. I wasn’t interested at all in working on that poo poo.

Huh? Really? Interesting. I've had decent results with it. Weird.

# ? Oct 16, 2021 17:06

Skyarb: Sep 20, 2018; MMMPH MMMPPHH MPPPH GLUCK GLUCK OH SORRY I DIDNT SEE YOU THERE I WAS JUST CHOKING DOWN THIS BATTLEFIELD COCK DID YOU KNOW BATTLEFIELD IS THE BEST VIDEO GAME EVER NOW IF YOULL EXCUSE ME ILL GO BACK TO THIS BATTLECOCK

I have a weird versioning schema on my app. Basically you can tag entities. From a top level view you can view entities through a filter of the top. Something like

code:

/cars?tag="foo"

However when you drill down to get info on a car, you have to provide the tag in the url to make it stateful, because its not that a single entity is associated with tags, but that a tag denotes a truly different version of the entity. So to see this tagged verison of a car the url would need to be:

code:

/cars/[car_id]/[tag_id]

So expand on this, if there are two tags on this car, there are truly two differnet pages that exist for this car.

This is all well and fine, but part of the problem is, with the breadcrumbs on the page, I want to take the user back to the filtered overview, but the url obviously loses its query parameter when in the detaul view. I've looked into matrix parameters but those seem like they never left the proposal stage and are not really fit for actual use.

Any suggestions?

# ? Oct 18, 2021 16:40

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

Skyarb posted:

I have a weird versioning schema on my app. Basically you can tag entities. From a top level view you can view entities through a filter of the top. Something like
code:
/cars?tag="foo"
However when you drill down to get info on a car, you have to provide the tag in the url to make it stateful, because its not that a single entity is associated with tags, but that a tag denotes a truly different version of the entity. So to see this tagged verison of a car the url would need to be:
code:
/cars/[car_id]/[tag_id]
So expand on this, if there are two tags on this car, there are truly two differnet pages that exist for this car.

This is all well and fine, but part of the problem is, with the breadcrumbs on the page, I want to take the user back to the filtered overview, but the url obviously loses its query parameter when in the detaul view. I've looked into matrix parameters but those seem like they never left the proposal stage and are not really fit for actual use.

Any suggestions?

code:

/cars/[car_id/[tag_id]?tags=foo,bar,blah

# ? Oct 18, 2021 17:18

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

I'm trying to get an infinite "marquee" of logos going, but I can't find anything for it in React. Something like this: https://www.apple.com/apple-tv-plus/ with the marquee/carousel of shows. I'd like to do it in React Spring or Framer Motion, because I plan on trying that for other animations and I'd like to keep from installing too many things.

Here's a codesandbox for a Framer Motion attempt: https://codesandbox.io/s/stupefied-lamarr-mqlvk

# ? Oct 19, 2021 22:39

kedo: Nov 27, 2007

It�s not terribly difficult to code from scratch. I�ve accomplished it before by having all the items in an array that I loop through on an interval, and then append and remove each item on a timeout. Use CSS transitions to handle the actual animation. So item one is appended at 0ms, has a 5s transition, removed after 5s, item two appended at 500ms, same transition and removal times, etc. When you reach the end of the array, loop again.

E: iirc correctly you can save some paints by appending multiple items at once and transitioning them as a block, but don�t quote me on that, it�s been awhile.

kedo fucked around with this message at 04:57 on Oct 20, 2021

# ? Oct 20, 2021 04:54

mitztronic: Jun 17, 2005; mixcloud.com/mitztronic

LifeLynx posted:

I'm trying to get an infinite "marquee" of logos going, but I can't find anything for it in React. Something like this: https://www.apple.com/apple-tv-plus/ with the marquee/carousel of shows. I'd like to do it in React Spring or Framer Motion, because I plan on trying that for other animations and I'd like to keep from installing too many things.

Here's a codesandbox for a Framer Motion attempt: https://codesandbox.io/s/stupefied-lamarr-mqlvk

Oof, why not code it yourself than import a bloated npm package? Every carousel I�ve ever used at my old work had been hot garbage, they take up huge payloads, perform slow and cumbersome, turn into tech debt, and always could have been done with just a couple hours of code to begin with because nobody ever needs 100 different carousel settings. $0.02

# ? Oct 20, 2021 14:06

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

mitztronic posted:

Oof, why not code it yourself than import a bloated npm package? Every carousel I’ve ever used at my old work had been hot garbage, they take up huge payloads, perform slow and cumbersome, turn into tech debt, and always could have been done with just a couple hours of code to begin with because nobody ever needs 100 different carousel settings. $0.02

100% agreed, maybe some even higher percentage because most of the time I've done site support to see why a site is so slow it's because a slider plugin is loading huge amounts of CSS and JS. The slider doesn't use any fancy animations right now, but maybe it might, so let's load jQuery and an entire animation library just in case.

That's why I wanted to know if using something I was going to in the first place like react-spring or Framer Motion was a good way to do it... but I won't use either if I don't need to. I could whip something up in vanilla JS, but React doesn't like simple DOM manipulation. If I were to code it myself, would the best way be with useState with an array of the images, and then update that array every X ms and change the transform with requestAnimationFrame? I want to avoid not only npm bloat, but unnecessary rerenders.

# ? Oct 20, 2021 15:59

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

mitztronic posted:

Oof, why not code it yourself than import a bloated npm package? Every carousel I�ve ever used at my old work had been hot garbage, they take up huge payloads, perform slow and cumbersome, turn into tech debt, and always could have been done with just a couple hours of code to begin with because nobody ever needs 100 different carousel settings. $0.02

I'm working on one in house and I feel like I'm going to have to add that many options because Creative is making the carousel different on every page.

# ? Oct 20, 2021 16:04

Tea Bone: Feb 18, 2011; I'm going for gasps.

I'm pulling my hair out over this.

I have an API running from api.mywebsite.com
The API is consumed from app.mywebsite.com and mywebsite.com.

If I make a call to an endpoint from mywebsite.com it works fine, but then if I make a call to the same endpoint from app.mywebsite.com I get the error:

code:

Access to fetch at 'https://api.mywebsite.com/api/v1/endpoint' from origin 'https://app.mywebsite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://mywebsite.com' that is not equal to the supplied origin.

If I clear my cache then I'm able to make the call from app.mywebsite.com but then get a similar error from 'mywebsite.com'. This leads me to believe this is a caching issue.
I've checked and the Vary header is present and has a value of Origin so it should be requesting a new headers from the server from each origin right?

The response headers from a working request:

code:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Origin: [url]https://mywebsite.com[/url]
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Connection: Keep-Alive
Content-Type: application/json; charset=utf-8
Date: Fri, 22 Oct 2021 09:19:31 GMT
ETag: W/"ceb3066459b786782d836ac9e51cd349"
Keep-Alive: timeout=5, max=99
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache
Set-Cookie: _my_website_session=abc123; path=/; HttpOnly
Transfer-Encoding: chunked
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 8fefc93c-b320-4276-acd4-8177b7745068
X-Runtime: 0.021539
X-XSS-Protection: 1; mode=block

And from a failing request:

code:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Origin: [url]https://mywebsite.com[/url]
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
Date: Fri, 22 Oct 2021 09:19:32 GMT
ETag: W/"ceb3066459b786782d836ac9e51cd349"
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache
Set-Cookie: _my_website_session=abc123; path=/; HttpOnly
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 8fefc93c-b320-4276-acd4-8177b7745068
X-Runtime: 0.021539
X-XSS-Protection: 1; mode=block

Everything works fine on my local machine using nginx, but the problem arises on production which is using Apache.

# ? Oct 22, 2021 11:26

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

Tea Bone posted:

I'm pulling my hair out over this.

I have an API running from api.mywebsite.com
The API is consumed from app.mywebsite.com and mywebsite.com.

If I make a call to an endpoint from mywebsite.com it works fine, but then if I make a call to the same endpoint from app.mywebsite.com I get the error:
code:
Access to fetch at 'https://api.mywebsite.com/api/v1/endpoint' from origin 'https://app.mywebsite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://mywebsite.com' that is not equal to the supplied origin.
If I clear my cache then I'm able to make the call from app.mywebsite.com but then get a similar error from 'mywebsite.com'. This leads me to believe this is a caching issue.
I've checked and the Vary header is present and has a value of Origin so it should be requesting a new headers from the server from each origin right?

The response headers from a working request:
code:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Origin: [url]https://mywebsite.com[/url]
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Connection: Keep-Alive
Content-Type: application/json; charset=utf-8
Date: Fri, 22 Oct 2021 09:19:31 GMT
ETag: W/"ceb3066459b786782d836ac9e51cd349"
Keep-Alive: timeout=5, max=99
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache
Set-Cookie: _my_website_session=abc123; path=/; HttpOnly
Transfer-Encoding: chunked
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 8fefc93c-b320-4276-acd4-8177b7745068
X-Runtime: 0.021539
X-XSS-Protection: 1; mode=block
And from a failing request:
code:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Origin: [url]https://mywebsite.com[/url]
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
Date: Fri, 22 Oct 2021 09:19:32 GMT
ETag: W/"ceb3066459b786782d836ac9e51cd349"
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache
Set-Cookie: _my_website_session=abc123; path=/; HttpOnly
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 8fefc93c-b320-4276-acd4-8177b7745068
X-Runtime: 0.021539
X-XSS-Protection: 1; mode=block
Everything works fine on my local machine using nginx, but the problem arises on production which is using Apache.

CORS is hell. A very necessary hell, but nevertheless....

The simple answer is:

code:

app.mysite.com

is not in your Access-Control-Allow-Origin. Things in there have to match EXACTLY.

These link are ones I have found helpful:

https://httptoolkit.tech/blog/how-to-debug-cors-errors/
https://httptoolkit.tech/will-it-cors/

# ? Oct 22, 2021 13:27

Tea Bone: Feb 18, 2011; I'm going for gasps.

Lumpy posted:

CORS is hell. A very necessary hell, but nevertheless....

The simple answer is:
code:
app.mysite.com
is not in your Access-Control-Allow-Origin. Things in there have to match EXACTLY.

These link are ones I have found helpful:

https://httptoolkit.tech/blog/how-to-debug-cors-errors/
https://httptoolkit.tech/will-it-cors/

Thanks yeah, I get that. I can see from the debug log the correct Access-Control-Allow-Origin is getting sent from the server, the browser just is just ignoring it and using the cached one for whatever reason.

I've since found it works fine in Safari, it's Chrome that seems to have the issue.

# ? Oct 22, 2021 15:05

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

You could work around this by using ACAO * and manually validating the origin on the backend (if required), right?

# ? Oct 23, 2021 01:02

Tea Bone: Feb 18, 2011; I'm going for gasps.

Jabor posted:

You could work around this by using ACAO * and manually validating the origin on the backend (if required), right?

I'm sending credentials so * automatically fails.

However, the request is actually hitting the backend fine anyway.

Even weirder, the preflight goes through fine.

Fortunately it's quite a small application at the moment so I'm thinking in the short term I can just make disparate end points for app.mywebsite.com and mywebsite.com which should bypass any caching.

However in the long term I need to work out what's going wrong here.

Just to confirm my suspicion poo poo the cache, does anyone know of a tool in chrome or a plug-in that will tell me where the response is coming from (i.e if it's using the actual server response or if it is using a cached response)

# ? Oct 23, 2021 02:03

LongSack: Jan 17, 2003

Tea Bone posted:

Just to confirm my suspicion poo poo the cache, does anyone know of a tool in chrome or a plug-in that will tell me where the response is coming from (i.e if it's using the actual server response or if it is using a cached response)

In Chrome, at least, developer tools - Network tab shows status 200 when loaded for real, and 304 when loaded from cache (at least I think that's what it means).

# ? Oct 23, 2021 17:37

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

Looking for feedback on the codebase and features if anyone has interest, it's a node request listener. I know there's not a lot of demand for one of these since express is popular enough to do a performance on next top model. Besides that, I'm interested in your thoughts.

https://github.com/Kequc/kequapp

# ? Oct 25, 2021 10:40

Tea Bone: Feb 18, 2011; I'm going for gasps.

LongSack posted:

In Chrome, at least, developer tools - Network tab shows status 200 when loaded for real, and 304 when loaded from cache (at least I think that's what it means).

It was still showing 200.

However, I finally got to the bottom of it. Chrome may still use the cached header even if the origins are different if the ETag values match. I unset the ETag in apache and everything works.

It's probably not ideal and I should be varying the ETag based on the origin, but since this server is purely a JSON endpoint and won't be hosting any assets I think that should be okay unset the ETag right?

# ? Oct 25, 2021 11:41

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

I need to ask about hosting. I've been developing a headless Wordpress website using NextJS, and it's nearing the ready-to-launch phase. I just don't know where to host it where I can give it to someone and say "here, pay X dollars a month for this on your card".

Right now NextJS is on Vercel, and the Wordpress install is on SiteGround. I don't want to tell them they have to register and pay for:

Vercel: $20/month (for a commercial site, even though it won't get that much traffic since it's a local business with no eCommerce)?
SiteGround: $15/month (for Wordpress)?
Domain name (anywhere but GoDaddy): $10/yr?

What's the best all-in-one solution? I guess it's okay to have the domain name be registered externally, but it's better if it's all included because small businesses have a habit of losing track of their domain name registrar statements and having their domain name swiped.

# ? Oct 28, 2021 13:21

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

Namecheap offers hosting solutions, I've never used it before but they're who I use for all of my domains and they've been great.

# ? Oct 28, 2021 15:27

kedo: Nov 27, 2007

All in one domain name + hosting is a bad idea. Hosts are generally terrible with domain names and registrars are usually terrible hosts.

I have all of my personal domains on Namecheap because they're cheap and have reasonable tools. For hosting, $15/mo is cheap for WP, and if you're happy with Siteground I'd say just leave it there. The "good" WP hosts (Kinsta, Pantheon, Flywheel, etc.) all cost at least double that per month for their rock bottom hosting, but they're selling managed hosting with lot of great features like automated backups, multiple environments, etc. I've used all three on different projects recently and like each of them. I tend to use Digital Ocean droplets for small personal projects, but there's a whole lot of setup involved.

# ? Oct 28, 2021 15:36

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

kedo posted:

All in one domain name + hosting is a bad idea. Hosts are generally terrible with domain names and registrars are usually terrible hosts.

I have all of my personal domains on Namecheap because they're cheap and have reasonable tools. For hosting, $15/mo is cheap for WP, and if you're happy with Siteground I'd say just leave it there. The "good" WP hosts (Kinsta, Pantheon, Flywheel, etc.) all cost at least double that per month for their rock bottom hosting, but they're selling managed hosting with lot of great features like automated backups, multiple environments, etc. I've used all three on different projects recently and like each of them. I tend to use Digital Ocean droplets for small personal projects, but there's a whole lot of setup involved.

Okay, I wasn't sure if anyone had managed to bridge that host <-> registrar gap. Namecheap has been my go-to registrar for years.

SiteGround is fine for WP hosting. It reminds me of HostGator from back when it was Goon-run instead of gobbled up by whatever lovely company acquired them. My smaller clients might notice the speed increase from Kinsta/Flywheel (I haven't heard of/tried Pantheon) but it wouldn't be worth the extra cost.

I'm used to using SiteGround for WP and hooking up GoDaddy domain names to it (because the clients usually buy their domain names on GoDaddy before doing anything else) but I don't know what to do about the Javascript front-end.

# ? Oct 28, 2021 16:15

kedo: Nov 27, 2007

Is there a reason why you couldn't serve it from SiteGround?

# ? Oct 28, 2021 16:39

worms butthole guy: Jan 29, 2021; by Fluffdaddy

Digital ocean or Cloudways. Kinda is the best WordPress host though

# ? Oct 29, 2021 04:38

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

kedo posted:

Is there a reason why you couldn't serve it from SiteGround?

They don't seem to host Node.js stuff anymore. I see references to it everywhere, everywhere except for their own site that is. Looks like they stopped around 2019 and the engagement farmers who write their "top places to host your Node.js site" lists haven't caught up.

A Digital Ocean droplet for Wordpress might be what I go with. It just has to run the CMS and hold the MySQL database. If I do anything larger scale than a simple business site that needs an event calendar + blog I'll try Kinsta though.

Random story, but I showed someone one of my sites-in-development today. In person, first time in almost two years. I forgot what "normal" people computers are like. It looked perfect except for some weird Firefox glitch involving named grid areas, but not everyone maximizes their windows, has their display color calibrated, or has possibly any amount of free RAM? I think I need to buy a five-year-old laptop to have next to me to test things out on and remind myself how long I struggled with responsive design all those years ago.

# ? Oct 29, 2021 05:01

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

If your next js app is fully SSG you can host it for free on netlify

# ? Oct 29, 2021 05:14

uncle blog: Nov 18, 2012

More redux questions:

In my react app, I have a page where the user can create a new thing. This is done by filling in a form and submitting which dispatches a redux action to create the thing with an api. If an error occurs, a pice of state is set to true (createThingError).
When the user hits "Create" I want to either send them back to the previous page if there is no error, or have them stay here if there was one.

The problem is checking the piece of state in the submit handler function.

code:

const CreateThingPage = () => {

	  const createThingError = useSelector((state: State) => state.things.createThingError);

	const handleSubmitClick = () => {
		const newThing = formData
		dispatch(createThing(newThing))

		if(!createThingError) {
			history.goBack()
		}
	}
}

The variable createThingError isn't updated automatically in this component, and I can't call the useSelector again inside the submitHandler, as hooks need to be called on the root level. So what's the right way to do the thing I'm trying to do?

Edit:
It seems the variable IS updated. But now I need a way to wait for the dispatched method to complete before checking the value of the variable. Tried putting an "await" before it, without much luck.

uncle blog fucked around with this message at 11:30 on Oct 29, 2021

# ? Oct 29, 2021 11:12

worms butthole guy: Jan 29, 2021; by Fluffdaddy

prom candy posted:

If your next js app is fully SSG you can host it for free on netlify

Or Vercel. That's what I use. So I have the WordPress on kinstas because I love their support and backups and then the nextjs site on Vercel. Works perfectly

# ? Oct 29, 2021 12:42

Adbot: ADBOT LOVES YOU

# ? May 20, 2024 12:08

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

Is the free tier of Vercel good for a commercial site? One that isn't going to get that much traffic?

# ? Oct 29, 2021 13:57

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

«‹›361 »