The Web Design & Development Megathread

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

«‹›361 »

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.

Lumpy posted:

I am going insane. Does anyone know / use sinon in a Node + typescript environment to mock fetch calls? This should be so easy, but every solution I have tried doesn't work or typescript won't allow.

Basically I have this:
JavaScript code:
class Lol {
  async doThing() {
    const someData = await fetch(url);
    const myJson = await someData.json();
    return doStuffWith(myJson);
  }
}
What I want to do:
JavaScript code:
import sinon, { SinonSandbox } from "sinon";
import fetchMock from "fetch-mock";

describe("my thing", () => {

  beforeEach(() => {
    sandbox = sinon.createSandbox();
    fetchMock.mock("*", fakeData);
  });

  afterEach(() => {
    sandbox.restore();
    fetchMock.restore();
  });

  it("does a thing", () => {
    const l = new Lol();
   expect(l.doThing()).toBe(whatever);
  })
});
But the request is not mocked. Apparently that's because fetch is not global or something. Every other solution I have researched does not work, or causes typescript to fail the build. Anyone run into this before?

sinon only mocks the xhr, not fetch... What other solutions have you tried?
https://stackoverflow.com/questions/45946284/mock-http-fetch-in-sinon

# ? Nov 5, 2021 16:38

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 12:27

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

Bruegels Fuckbooks posted:

sinon only mocks the xhr, not fetch... What other solutions have you tried?
https://stackoverflow.com/questions/45946284/mock-http-fetch-in-sinon

Millions. The one you linked works for browsers, but not a Node server (at least it does not work for me.) However, I did find something that actually works that doesn't need any other libraries or dependencies:

JavaScript code:

import sinon, { SinonSandbox } from "sinon";
import * as fetch from "node-fetch";  // NOTE! you have to import like this

describe("my thing", () => {

  beforeEach(() => {
    sandbox = sinon.createSandbox();
  });

  afterEach(() => {
    sandbox.restore();
  });

  it("does a thing", () => {
    const l = new Lol();

    // THE MAGIC
    sandbox.stub(fetch, "default").resolves(
          new fetch.Response(JSON.stringify(fakeData), {
            status: 200,
            statusText: "OK",
        }),
    );

   // now this works
   expect(l.doThing()).toBe(whatever);
  })
});

# ? Nov 5, 2021 16:58

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

Maybe I�m misunderstanding or missing something but fetch is a browser function. It doesn�t work in node.

# ? Nov 5, 2021 22:33

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.

mitztronic posted:

Maybe I�m misunderstanding or missing something but fetch is a browser function. It doesn�t work in node.

That's exactly what confused me, but there's a shim for fetch that works on node that people apparently use.

# ? Nov 5, 2021 23:18

Dominoes: Sep 20, 2007

Hey dudes. I have a webapp we use at work etc, and the type="date" inputs don't take the default value ("value" field). This is on Chrome, the browser most people use. It shows something indicated blank (Can't recall example). Any ideas? Using "2021-01-30" ISO format IOC MDN docs. Works on FF/Chrome at home.

This is probably due to work using an old version of Chrome etc.

Dominoes fucked around with this message at 15:31 on Nov 6, 2021

# ? Nov 6, 2021 15:29

fsif: Jul 18, 2003

I work primarily on the front end but my experiences with Docker are mostly bad. It's been a massive resource hog that crashes a lot. A client had a project they pieced together with Lando and it required I maintained an older version of Docker. Said version wasn't compatible with my M1 so I had to use an older computer.

I've run into issues with old repos where SCSS and Gulp nonsense have caused some static, but it's generally been easy enough to just switch things around with nvm or MAMP.

# ? Nov 6, 2021 17:13

fsif: Jul 18, 2003

But also, tbf, I'm not a dev ops guy and I usually work on repos with like half a dozen or fewer developers working on them. I trust that some of my worst experiences with Docker have been because the person setting up the environment (including me) didn't have any idea what they were doing.

# ? Nov 6, 2021 17:58

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

Something sounds off there. The docker daemon is not (to my knowledge) a memory, disk, or CPU hog; it barely does anything active except orchestrate. And on rootless container systems like podman (drop in Docker replacement), there's no daemon at all. A docker container is also not inherently a resource hog; it's just a wrapper around a regular binary. If a container is a resource hog, that's on the program itself, not Docker.

The only thing that might be resource-hogworthy is Docker's use of a layered filesystem; with many layers and/or images, that can soak up disk space easily.

# ? Nov 6, 2021 19:59

kedo: Nov 27, 2007

fsif posted:

I work primarily on the front end but my experiences with Docker are mostly bad. It's been a massive resource hog that crashes a lot. A client had a project they pieced together with Lando and it required I maintained an older version of Docker. Said version wasn't compatible with my M1 so I had to use an older computer.

I've run into issues with old repos where SCSS and Gulp nonsense have caused some static, but it's generally been easy enough to just switch things around with nvm or MAMP.

I had a similar experience with Lando, I think it�s the issue instead of Docker. Not being able to use it an updated version of Docker is was a big red flag. I am very happy to be done with that particular project.

# ? Nov 6, 2021 20:25

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

mitztronic posted:

Maybe I�m misunderstanding or missing something but fetch is a browser function. It doesn�t work in node.

Bruegels Fuckbooks posted:

That's exactly what confused me, but there's a shim for fetch that works on node that people apparently use.

node-fetch is the node version of it.

# ? Nov 8, 2021 16:42

fsif: Jul 18, 2003

minato posted:

Something sounds off there. The docker daemon is not (to my knowledge) a memory, disk, or CPU hog; it barely does anything active except orchestrate. And on rootless container systems like podman (drop in Docker replacement), there's no daemon at all. A docker container is also not inherently a resource hog; it's just a wrapper around a regular binary. If a container is a resource hog, that's on the program itself, not Docker.

The only thing that might be resource-hogworthy is Docker's use of a layered filesystem; with many layers and/or images, that can soak up disk space easily.

Yeah I don't know why it's so resource-hungry, but in practice�

# ? Nov 8, 2021 19:33

barkbell: Apr 14, 2006; woof

docker needs an engine to run on mac, which is resource hungry. on linux you dont need the engine

# ? Nov 9, 2021 02:44

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

I've always understood mocking in tests to be that you mock the `require` as opposed to any global variable. You can mock a global variable as easily as reassigning it before use, otherwise you're overriding node's require statement. So if you wanted to mock `node-fetch` you'd mock `node-fetch`, the resource you are requiring, as opposed to the `fetch` variable that's being created inside your script.

You can encapsulate the fetch in another file and then mock that file, too if that makes it easier.

# ? Nov 9, 2021 13:04

Doom Mathematic: Sep 2, 2008

Nolgthorn posted:

I've always understood mocking in tests to be that you mock the `require` as opposed to any global variable. You can mock a global variable as easily as reassigning it before use, otherwise you're overriding node's require statement. So if you wanted to mock `node-fetch` you'd mock `node-fetch`, the resource you are requiring, as opposed to the `fetch` variable that's being created inside your script.

You can encapsulate the fetch in another file and then mock that file, too if that makes it easier.

Well, since we're here. What's the technique if you're using ES modules? There's no such thing a require and imported values are immutable.

# ? Nov 9, 2021 21:55

uncle blog: Nov 18, 2012

This feels dumb:
What's the cleanest way to set the body font-size to 16px, and yet give the site a globally applied size of 0.875 rem?

# ? Nov 9, 2021 22:01

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

uncle blog posted:

This feels dumb:
What's the cleanest way to set the body font-size to 16px, and yet give the site a globally applied size of 0.875 rem?

code:

html {
 font-size: 0.875rem;
}
body {
 font-size: 16px;
}

# ? Nov 9, 2021 23:11

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

Doom Mathematic posted:

Well, since we're here. What's the technique if you're using ES modules? There's no such thing a require and imported values are immutable.

I'd suggest Node doesn't know what it's doing and it's a miracle native Javascript imports work at all. But from what I understand in order to make import work it uses require behind the scenes and it should ultimately work the same way with regard to import. Pretend import is require.

Nolgthorn fucked around with this message at 12:07 on Nov 15, 2021

# ? Nov 10, 2021 00:11

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

uncle blog posted:

This feels dumb:
What's the cleanest way to set the body font-size to 16px, and yet give the site a globally applied size of 0.875 rem?

Rem only applies in relation to the root font size so if you want one that is specific you can just define it directly instead of using rem again.

Nolgthorn fucked around with this message at 00:33 on Nov 10, 2021

# ? Nov 10, 2021 00:30

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

I'm having a weird problem in chrome.

I have a web app that was working fine but this morning all session data has stopped persisting between requests. It only happens on my chrome profile. If I try it in incognito or a different chrome profile everything is fine. It also works on my normal profile if I switch https off.

I assume I've switched a setting in chrome somewhere which stops it from sending the cookie for a given host but have no idea where or when I've done that.

Does anyone have any ideas what I've done?

edit:
nevermind. Cleared my cookies and it's working again.

Tea Bone fucked around with this message at 12:58 on Nov 12, 2021

# ? Nov 12, 2021 12:48

The Dark Souls of Posters: Nov 4, 2011; Just Post, Kupo

I work on multiple apps, all have different PostgreSQL and Ruby versions that aren't able to be easily updated. Docker resolved many issues I had switching between them. This was especially true when I was a fresh developer with very little (instead of a little) understanding of how computers work.

# ? Nov 15, 2021 01:34

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the proper way to split pages in Chrome for printing, so that they layout correctly?

Say when I declare one <div> as a portrait page and the following one as a landscape one, Chrome shows it as such in the print preview. Except the viewport on the second page is as wide as on the first page. Means if the first page is in portrait mode, it'll leave tons of white space on the landscape one. If I force the elements on the second landscape page wider, it affects those on the portrait page and change all the scaling of that page. If the first page is landscape and the second portrait, elements in the portrait page overflow the page borders, unless I constrain them.

That seems a whole lot of loving stupid poo poo. If I can mix page orientations, I'd assume that layout would deal it. Or is the only way to deal with this to create a first but hidden landscape page and adjust page widths accordingly from there on out?

I spent all day today trying various things to get a feel for it, and it makes me want to hang myself. The best was probably Firefox ESR deciding that all my printers only support Letter and not A4 like they do, and therefore break layouts Paged.js spits out.

# ? Nov 15, 2021 18:08

worms butthole guy: Jan 29, 2021; by Fluffdaddy

I just rewrite css for printing and it saves a million headaches. Not t sure if that will help you out though.

# ? Nov 15, 2021 19:51

barkbell: Apr 14, 2006; woof

You can do a media query selecting for print. Google �print stylesheets� for helpful tips and special css rules that apply for page breaks and stuff

# ? Nov 15, 2021 20:13

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

Do all you docker fans run Linux? We use docker to build and deploy our apps but it's slow as gently caress on MacOS for development. I also can never get hot reloading working with it.

It's an absolute godsend for poo poo like fixing bugs on the app I built for my friend's company 13 years ago that they still use daily but for day to day development it's just really not good in MacOS in my experience. I did run Xubuntu for a while a couple years ago and it was great on there.

# ? Nov 16, 2021 05:52

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

prom candy posted:

Do all you docker fans run Linux? We use docker to build and deploy our apps but it's slow as gently caress on MacOS for development. I also can never get hot reloading working with it.

It's an absolute godsend for poo poo like fixing bugs on the app I built for my friend's company 13 years ago that they still use daily but for day to day development it's just really not good in MacOS in my experience. I did run Xubuntu for a while a couple years ago and it was great on there.

I�ve used it on OSX and windows�never really had much to say about performance of build time in either direction though

# ? Nov 16, 2021 06:01

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

I'd heard Docker on MacOS was slow due to filesystem issues, but there are some optimizations you can make to improve performance. Personally I run Linux in a VM on MacOS (and I use podman rather than docker), and I haven't encountered any performance issues.

# ? Nov 16, 2021 07:20

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

I have a website that gets a fair bit of traffic via Facebook. The problem is the Facebook App opens it in its own in-app browser rather than chrome/safari which is not ideal.

For Android I have the following link to open the site in chrome which works great:

code:

<a href="intent://myWebsite.com#Intent;scheme=https;package=com.android.chrome;end">Open in Chrome</a>

I'd like to do something similar for iOS. The general wisdom on Stack is "you can't" but I've found at least one workaround. If I link to a ftp protocol it will open in Safari, so I can link to something like

code:

ftp://mywebsite.com/forward.html?forward_to=https://mywebsite.com/path

Then catch the request in forward.html and redirect to the https site. I just feel a little bit uneasy about linking to and using ftp this way. Does anyone have any other ideas?

edit. Okay the above doesn't seem to work anyway. it does indeed open safari but then can't load the forward.html page. Still, it shows you can get Safari to open via the Facebook Webview.

Tea Bone fucked around with this message at 10:20 on Nov 16, 2021

# ? Nov 16, 2021 10:09

go play outside Skyler: Nov 7, 2005

I remember seeing a site that detected FB browser and would just show a full screen message with an arrow pointing to the "open on safari" button.

These practices are anti-competitive in my opinion and I hope one day Apple does something to block them from doing that.

# ? Nov 16, 2021 12:17

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

go play outside Skyler posted:

I remember seeing a site that detected FB browser and would just show a full screen message with an arrow pointing to the "open on safari" button.

These practices are anti-competitive in my opinion and I hope one day Apple does something to block them from doing that.

You mean Facebook's in-app open in safari button? That's the only other option I've come up with but I figure the number of people who won't bother and just close the site makes it negligible. Also, any site telling you to touch anything outside its content looks suspicious in my opinion.

Ultimately I don't really care which browser people use to access the site, as long as it works properly (and I can't imagine anybody picks the Facebook browser out of choice) but since there's no way of opening in the set default browser I figure chrome and safari are the safest bets.

# ? Nov 16, 2021 13:44

uncle blog: Nov 18, 2012

Is there a rule of thumb for how big a React build should be? Under x megabytes?
I have some json data I want to bundle with it, but don�t want the page to be too slow to load. That�s the main drawback of larger builds, the initial load? They won�t be slower performing based on a meg or two of extra size?

# ? Nov 16, 2021 18:23

Roadie: Jun 30, 2013

uncle blog posted:

Is there a rule of thumb for how big a React build should be? Under x megabytes?
I have some json data I want to bundle with it, but don�t want the page to be too slow to load. That�s the main drawback of larger builds, the initial load? They won�t be slower performing based on a meg or two of extra size?

Use dynamic import (assuming your bundler can handle it properly) and build the page with an appropriate loading state while the data isn't ready yet.

# ? Nov 16, 2021 18:30

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Fixins posted:

I just rewrite css for printing and it saves a million headaches. Not t sure if that will help you out though.

Thanks I will look into it.

barkbell posted:

You can do a media query selecting for print. Google �print stylesheets� for helpful tips and special css rules that apply for page breaks and stuff

My main issue is that the browser doesn't handle layouting on a per-page basis. As said, if I declare one page as portrait and the next as landscape, and simply just dare to use all available space on the landscape page, that'll affect the portrait pages, too, because it extends the viewport in width everywhere.

Primarily I'll probably just need landscape pages for full-page charts when mixing orientations, so I'm gonna attempt to see how much a pain in the rear end rotational transforms will be in regards to layout breakage (I'm using ECharts with the SVG renderer), so that I can just use one page format.

Also, I'm sure glad that the Firefox using the wrong paper format is an issue that goes back to 2005-2006 and still happens.

# ? Nov 16, 2021 18:42

barkbell: Apr 14, 2006; woof

what does your current css/markup look like?

# ? Nov 17, 2021 03:09

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

minato posted:

I'd heard Docker on MacOS was slow due to filesystem issues, but there are some optimizations you can make to improve performance. Personally I run Linux in a VM on MacOS (and I use podman rather than docker), and I haven't encountered any performance issues.

How does this work? Your code directory is mounted into Linux, and then mounted into Docker (or podman)?

# ? Nov 17, 2021 03:50

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

I edit directly in linux via SSH, but you can mount the code dir back to MacOS easily enough using Samba, NFS, or sshfs. (Performance may vary depending on which one you choose)

# ? Nov 17, 2021 04:23

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

Do you use vim then? This is always where the VM workflow has fallen apart for me, I want to edit using VSCode, which means some kind of mounting, which comes with problems. I guess I could install like a full desktop Linux environment VM on my Mac but I have no idea what performance would be like. Plus dealing with ctrl instead of cmd for modifiers :barf:

# ? Nov 17, 2021 05:38

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

barkbell posted:

what does your current css/markup look like?

I don't have a copy of the offending stuff at hand. But the issue is essentially this, consider this code:

code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            @page {
                size: A4;
            }
            @page portrait {
                size: A4 portrait;
            }
            @page landscape {
                size: A4 landscape;
            }
            .portrait {
                page: portrait;
            }
            .landscape {
                page: landscape;
            }
            div { border: 1px solid black; width: 100%; }
        </style>

    </head>

    <body>
        <div class="portrait">
            Fooooooooooooooooo
        </div>
        <div class="landscape">
            Fooooooooooooooo
        </div>
    </body>
</html>

The result in the print preview is this, note how the DIV on the landscape page is the same width as the one on the portrait page (they're set to 100%), not utilizing the full space:

If I force the second DIV to use the full width of the page, the viewport of the first one extends to the same size and then everything gets scaled down accordingly.

If I flip the order of the two pages, the DIV on the portrait page suddenly overshoots the page width.

I managed to work out a (fudged?) solution now that involves forcing page sizes, a rotate transform and budging the rotated result around a bit: https://pastebin.com/b2TcyFb3

# ? Nov 17, 2021 16:48

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

What's the best HTML+CSS -> PDF engine?

I've used Puppeteer, and Print-CSS.rocks lists a bunch of other engines. Some I recognise like PrinceXML (which I think is based on Opera, pre-Chrome) but there's also PagedJS and :confused:

N.Z.'s Champion fucked around with this message at 21:14 on Nov 18, 2021

# ? Nov 18, 2021 20:10

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

What do you feel is the obligation is when turning over a website/domain to someone else?

Basically, one of my clients contacted me and said "we've had a new site made, here's the guys, can you give them all the info on the domain name to switch it over?"

I didn't register the domain in the first place but I did have the login info from when I switched DNS in the first place, so I said "yeah, sure, here's the info, this is all you need to change the nameservers, also here are the existing DNS records so you can maintain all services."

New web designers say "hey it's not working to switch the A record! Do you have the login info for *DNS provider for sites I manage*?"

Yeah I have it, and you aren't getting it. Get your own drat DNS provider!

I don't mind looking up the login info for free, even though it's honestly none of my loving business because I didn't register it in the first place and it just so happens that I have a record of it, and I don't mind providing the current DNS records as a professional courtesy, but I really draw the line at being bothered again because the new company doesn't know what the gently caress a nameserver is. I, personally, think I'm within my rights to write another invoice at this point, I just want to know if that seems overly petulant or, as I think, reasonable.

# ? Nov 19, 2021 04:10

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 12:27

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

I would say "you'll need to provide your own name servers, I don't provide DNS hosting as an a la carte service" and not invoice anything.

# ? Nov 19, 2021 05:36

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

«‹›361 »