Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

VagueRant: May 24, 2012

Jimlit posted:

Do you have an example of how your events are set up? There are a million ways to screw yourself over with GTM / dataLayer stuff.

Am a simpleton, so not too sure what info I can provide here, but I intially used the following for phone number events:

code:

const phonelinks = document.querySelectorAll("a[href^='tel:']");
if (phonelinks) {
  for (const phonelink of phonelinks) {
    phonelink.addEventListener('click', () => {
      dataLayer.push({
        "event": "clickedPhoneNumber",
      });
    })
  }
}

Then when that failed to work, I switched from an event trigger to a "Click -Just Links" trigger in GTM with Click URL-"Starts with tel:", that checked Wait For Tags (max wait time 200ms) in case that was a factor.

That references a Tag typed to GA that triggers an action I expect to see in GA.

On form submission inconsistency, we have a redirect on submission and I'm guessing the datalayer change is failing to fire before that kicks in, so I was maybe going to use session storage and trigger the data layer on the thank you page.

# ? May 25, 2021 21:42

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:33

darthbob88: Oct 13, 2011; YOSPOS

React testing question- I have a <ChildComponent /> which makes an async call, and a <ParentComponent /> which relies on that child. In my tests on the ParentComponent, I want to mock the async call made by that child component. How should I do this?

My current attempt is a MirageJS server, but that's failing for some absurd reason. I added debugging logs to the async call in the child component; it fires "Now calling API", and the Mirage server properly logs "Now calling API in Mirage server", but the secondary logs in the fetch().then() handler aren't firing. Maddening.

The other thing I tried was doing `jest.fn().mockResolvedValue()` in ParentComponent.test.js, but that seems to have failed to replace the API call in the child component. The other thing I'm considering is adding an actual mock implementation, but I haven't done that yet.

Any further suggestions or directions to go in troubleshooting this would be appreciated.

# ? May 26, 2021 04:11

marumaru: May 20, 2013

darthbob88 posted:

React testing question- I have a <ChildComponent /> which makes an async call, and a <ParentComponent /> which relies on that child. In my tests on the ParentComponent, I want to mock the async call made by that child component. How should I do this?

My current attempt is a MirageJS server, but that's failing for some absurd reason. I added debugging logs to the async call in the child component; it fires "Now calling API", and the Mirage server properly logs "Now calling API in Mirage server", but the secondary logs in the fetch().then() handler aren't firing. Maddening.

The other thing I tried was doing `jest.fn().mockResolvedValue()` in ParentComponent.test.js, but that seems to have failed to replace the API call in the child component. The other thing I'm considering is adding an actual mock implementation, but I haven't done that yet.

Any further suggestions or directions to go in troubleshooting this would be appreciated.

jest.spyOn doesn't work for you?

code:

import video from './video';

test('plays video', () => {
  const spy = jest.spyOn(video, 'play');
  video.play();

  expect(spy).toHaveBeenCalledTimes(1);
});

# ? May 26, 2021 12:53

smackfu: Jun 7, 2004

If someone asked that at work, I�d say �post your code� because there�s not enough detail to tell what you are doing wrong.

# ? May 26, 2021 13:06

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

smackfu posted:

If someone asked that at work, I�d say �post your code� because there�s not enough detail to tell what you are doing wrong.

Same and I'd wonder why a parent component needs to know what is going on in its child.

I'd just mock the child component completely, since you aren't testing the child. And then I would continue wondering why a parent component needs to know what is going on it its child.

# ? May 26, 2021 14:20

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Lumpy posted:

Same and I'd wonder why a parent component needs to know what is going on in its child.

I'd just mock the child component completely, since you aren't testing the child. And then I would continue wondering why a parent component needs to know what is going on it its child.

# ? May 26, 2021 16:01

Jimlit: Jun 30, 2005

VagueRant posted:

Am a simpleton, so not too sure what info I can provide here, but I intially used the following for phone number events:
code:
const phonelinks = document.querySelectorAll("a[href^='tel:']");
if (phonelinks) {
  for (const phonelink of phonelinks) {
    phonelink.addEventListener('click', () => {
      dataLayer.push({
        "event": "clickedPhoneNumber",
      });
    })
  }
}
Then when that failed to work, I switched from an event trigger to a "Click -Just Links" trigger in GTM with Click URL-"Starts with tel:", that checked Wait For Tags (max wait time 200ms) in case that was a factor.

That references a Tag typed to GA that triggers an action I expect to see in GA.

On form submission inconsistency, we have a redirect on submission and I'm guessing the datalayer change is failing to fire before that kicks in, so I was maybe going to use session storage and trigger the data layer on the thank you page.

Your guess for the form submit is right. The solution would be to write a custom submit function that fires after datalayer push completes. The same might be true for the tel links, but I would just keep the solution you have in GTM since you really are only sending one event.

Jimlit fucked around with this message at 17:39 on May 26, 2021

# ? May 26, 2021 17:28

smackfu: Jun 7, 2004

If you are using Flow (you aren�t), you might be interested in this post where they admit they are only building it for internal Facebook at this point and you can take it or leave it.

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

# ? May 26, 2021 17:56

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

I completely forgot about Flow

# ? May 26, 2021 18:14

marumaru: May 20, 2013

prom candy posted:

I completely forgot about Flow

everyone did

# ? May 26, 2021 18:15

darthbob88: Oct 13, 2011; YOSPOS

Lumpy posted:

Same and I'd wonder why a parent component needs to know what is going on in its child.

I'd just mock the child component completely, since you aren't testing the child. And then I would continue wondering why a parent component needs to know what is going on it its child.

I don't need to know what's going on, I just want to mock out that API call to avoid making a network call in my tests. Except I kinda do need to know what's going, since the stated purpose of this test is the validation that's getting done in the child component. And now that I say that, that should actually be done in the test for the child component itself.

smackfu posted:

If someone asked that at work, I�d say �post your code� because there�s not enough detail to tell what you are doing wrong.

It's for work, so I can't post the actual code, but here's the gist of it.

code:

class ChildComponent extends Component {

    componentDidMount() {
        makeAPICall().then(result => { doStuffWith(result)});
    }
    render() { ... }
}
class ParentComponent extends Component {
	render() {
		return <div><ChildComponent /></div>;
	}
}

And then in ParentComponent.test.js, I have this attempt to mock that makeAPICall both with Jest's in-built mocking and with a Mirage server.

code:

let server;
let makeAPICall;
beforeEach(() => {
    makeAPICall = jest.fn().mockResolvedValue(mockResults);
    server = createServer({
        environment: "test",
        routes() {
            this.get("/api/call", () => {
                console.log("Calling API in Mirage server");
                return mockResults;
            })
        }
    })
})

I've done this sort of thing before with Jest and it's worked when I've done it directly in like ChildComponent.test.js, but for some reason it isn't working here when I try mocking from the parent component.

Another stupid solution I just noticed: The sole purpose of that API call is to populate a field in the Redux store that component uses. I can just skip the API call and populate that field in the mock store with mockResults as part of setting up the test.

# ? May 26, 2021 18:43

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

darthbob88 posted:

Another stupid solution I just noticed: The sole purpose of that API call is to populate a field in the Redux store that component uses. I can just skip the API call and populate that field in the mock store with mockResults as part of setting up the test.

This is the answer but....

darthbob88 posted:

And then in ParentComponent.test.js, I have this attempt to mock that makeAPICall both with Jest's in-built mocking and with a Mirage server.
code:
let server;
let makeAPICall;
beforeEach(() => {
    makeAPICall = jest.fn().mockResolvedValue(mockResults);
    server = createServer({
        environment: "test",
        routes() {
            this.get("/api/call", () => {
                console.log("Calling API in Mirage server");
                return mockResults;
            })
        }
    })
})
I've done this sort of thing before with Jest and it's worked when I've done it directly in like ChildComponent.test.js, but for some reason it isn't working here when I try mocking from the parent component.

All makeAPICall = jest.fn().mockResolvedValue(mockResults); is doing is making a variable named that a jest mock function, in the scope of the test. To actually mock it so that the child component gets the mock, you have to mock the module it lives in.

# ? May 26, 2021 19:26

novamute: Jul 5, 2006; o o o

You can also use libraries like nock to mock the actual web request behind the scenes

# ? May 26, 2021 19:41

darthbob88: Oct 13, 2011; YOSPOS

dupersaurus posted:

All makeAPICall = jest.fn().mockResolvedValue(mockResults); is doing is making a variable named that a jest mock function, in the scope of the test. To actually mock it so that the child component gets the mock, you have to mock the module it lives in.

It doesn't really have a module; it's just a bare export in Services.js like

code:

export const makeAPICall = () => {
	return fetch(APIURL).then(response => {
	        if (response.ok) {
        		return response.json();
	        } else {
        		return Promise.reject("Error making API call.");
	        }
	});
}
export const makeOtherAPICall = () => {
	return fetch(OtherAPIURL).then(response => {
	        if (response.ok) {
        		return response.json();
	        } else {
        		return Promise.reject("Error making API call.");
	        }
	});
}

What would that look like? Following the Jest docs, something like this?

code:

jest.mock("../Services");
makeAPICall.mockResolvedValue(mockResults);

# ? May 26, 2021 21:15

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

darthbob88 posted:

It doesn't really have a module; it's just a bare export in Services.js like

code:

export const makeAPICall = () => {
	return fetch(APIURL).then(response => {
	        if (response.ok) {
        		return response.json();
	        } else {
        		return Promise.reject("Error making API call.");
	        }
	});
}
export const makeOtherAPICall = () => {
	return fetch(OtherAPIURL).then(response => {
	        if (response.ok) {
        		return response.json();
	        } else {
        		return Promise.reject("Error making API call.");
	        }
	});
}

What would that look like? Following the Jest docs, something like this?

code:

jest.mock("../Services");
makeAPICall.mockResolvedValue(mockResults);

Anything exported is part of a module. Your example there doesn't work because you're setting the return value of the Services module as a singular mock function, but you want to mock the individual members.

Someone might have a better way, but in a situation like that I do this:

code:

jest.mock("path in relation to the test file", () => ({
   __esModule: true,
   makeAPICall: mockResolvedValue(mockResults),
   makeOtherAPICall: mockResolvedValue(mockResults)
})

Things to keep in mind:

1) You might not need the __esModule: true, I'm unclear about when exactly you need to use it
2) jest.mock gets called before anything else, so if you want to use the mockResults object you have to do something hacky like assign it to global scope
3) If you don't want to mock every member of the module, add to the top of the object ...jest.requireActual("module path name"), and then add the mocks after that

# ? May 26, 2021 21:35

darthbob88: Oct 13, 2011; YOSPOS

dupersaurus posted:

Anything exported is part of a module. Your example there doesn't work because you're setting the return value of the Services module as a singular mock function, but you want to mock the individual members.

Someone might have a better way, but in a situation like that I do this:
code:
jest.mock("path in relation to the test file", () => ({
   __esModule: true,
   makeAPICall: mockResolvedValue(mockResults),
   makeOtherAPICall: mockResolvedValue(mockResults)
})
Things to keep in mind:

1) You might not need the __esModule: true, I'm unclear about when exactly you need to use it
2) jest.mock gets called before anything else, so if you want to use the mockResults object you have to do something hacky like assign it to global scope
3) If you don't want to mock every member of the module, add to the top of the object ...jest.requireActual("module path name"), and then add the mocks after that

Much thanks.
2. Yeah, it's going as a const at the top of the test file.
3. I probably will need to mock everything in that module, but as long as I have a method that works for the one API call I can do the same for the others.

# ? May 27, 2021 00:28

HaB: Jan 5, 2001; What are the odds?

So I am spitballin' on a new thing, and need some suggestions.

I need to write a backend, and I have written many, but never one quite like this, so I am seeking good ideas.

The site is basically a daily question. Answers are binary, but with a short (< 100 chars) comment.

Upon answering you get taken to a feed of other ppl's answers.

So the basics of this are easy. The part I am struggling with, having never done it before, is the feed. I want it to be so that if you are on the page, you are watching other ppl's answers display in real-time. New answers come in at the top, pushing older answers down the page. And I guess I'll do some sort of infinite scroll thing if you want to scroll thru all the answers.

So I plan on storing the previous 5 days' worth of questions/answers, but nothing beyond that. The days will just rotate out as they pass the 5 day old mark.

So what are my options here? I am perfectly fine writing a quick n dirty backend in Hapi or Express or something similar, I'm just wondering how to handle the feed thing. Should I look into something like PubNub (or better yet - a free alternative?) Should I just setup something to poll on the frontend to check for new messages every 10 seconds or something?

Also not averse to trying completely new things - so yeah - suggest things at me.

# ? Jun 1, 2021 16:05

marumaru: May 20, 2013

if you want it to be *really* real time maybe websockets?

# ? Jun 1, 2021 16:06

Vesi: Jan 12, 2005; pikachu looking at?

yeah I'm running something similar to that in many places, using websockets and postgres database triggers, backend in golang

# ? Jun 1, 2021 16:37

frogbs: May 5, 2004; Well well well

frogbs posted:

So i'm an old that's probably 10 years behind when it comes to modern web development. I have an idea for a little project that i'm inclined to just build using HTML, CSS and Javascript, but thought maybe there's a reason to use it as an excuse to check out some more modern frameworks/workflows. There's so many places to start it's a little daunting, but maybe someone could recommend something?

I wanted to mock up a page to help you choose a bag for photo gear. Basically the top of the page would have a form where you could enter the height/width/depth of your camera. From this we'd calculate the volume of the camera. The lower part of the page would then load a list of bags that could contain that size camera. The list of bags wouldn't be dynamic or anything, it'd just be a json array or something with a 'volume' attribute, we'd just want to load any bags that were larger than what you list in the form.

It's nothing crazy, so is even trying to use a modern framework overkill? I started looking at next.js, is that a good place to start as any?

So i've actually got this up and running as a prototype. I decided to focus on learning a few things at once, so right now it's Hugo with Netlify CMS, deployed on Netlify, and Tailwind for styling. I think i'm going to tackle using React or Vue later, for now it's just some simple JS handling the sorting stuff.

The biggest stumbling block has actually been Tailwind. I feel like i'm doing this wrong? Is it bad to have a class list like this for a simple button? I'm getting a headache looking at my templates:

code:

<a class="content-center px-2 py-2 mr-2 text-sm font-bold text-center text-white bg-red-700 border-0 rounded mx-r-1 sm:w-full md:w-1/3 focus:outline-none hover:bg-red-600 drop-shadow-lg" href="{{ .Permalink }}" role="button" target="_blank">{{. Title }}</a>

I know this is what it's like to use an unopinionated/utility-first library, but it goes against the years of 'styling goes in the stylesheet' that's ingrained in my brain. Like, I wish there was some sort of processor to combine Tailwind styles into single classes if they were duplicated or something. I do know that I can setup PostCSS to automatically trim the Tailwind stylesheet based on what's actually used, that's next on my list, but that just cuts down on the size for the main stylesheet.

frogbs fucked around with this message at 01:24 on Jun 3, 2021

# ? Jun 3, 2021 01:13

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

When you get into React/Vue you'll just have a <Button /> component and you'll only need to look at those classes when you're making changes to your button component.

# ? Jun 3, 2021 02:23

HaB: Jan 5, 2001; What are the odds?

frogbs posted:

So i've actually got this up and running as a prototype. I decided to focus on learning a few things at once, so right now it's Hugo with Netlify CMS, deployed on Netlify, and Tailwind for styling. I think i'm going to tackle using React or Vue later, for now it's just some simple JS handling the sorting stuff.

The biggest stumbling block has actually been Tailwind. I feel like i'm doing this wrong? Is it bad to have a class list like this for a simple button? I'm getting a headache looking at my templates:
code:
<a class="content-center px-2 py-2 mr-2 text-sm font-bold text-center text-white bg-red-700 border-0 rounded mx-r-1 sm:w-full md:w-1/3 focus:outline-none hover:bg-red-600 drop-shadow-lg" href="{{ .Permalink }}" role="button" target="_blank">{{. Title }}</a>
I know this is what it's like to use an unopinionated/utility-first library, but it goes against the years of 'styling goes in the stylesheet' that's ingrained in my brain. Like, I wish there was some sort of processor to combine Tailwind styles into single classes if they were duplicated or something. I do know that I can setup PostCSS to automatically trim the Tailwind stylesheet based on what's actually used, that's next on my list, but that just cuts down on the size for the main stylesheet.

If you're gonna do that list of classes for every button, then pluck it out and create a class in your css file using @apply with all those classes.

# ? Jun 3, 2021 13:53

Macichne Leainig: Jul 26, 2012; by VG

prom candy posted:

When you get into React/Vue you'll just have a <Button /> component and you'll only need to look at those classes when you're making changes to your button component.

Yeah you can't really do much about the quantity of classes, but you can at least extract them out into your own components. I think if I was doing a really small basic app with pure JS (i.e., no React/Vue) I wouldn't use Tailwind, I would prefer something like Bootstrap or Bulma for sure.

# ? Jun 3, 2021 15:24

Analytic Engine: May 18, 2009; not the analytical engine

Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that

# ? Jun 4, 2021 05:41

Jimlit: Jun 30, 2005

Analytic Engine posted:

Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that

He wants to spend $1000 to teach someone frontend from the ground up instead of just hiring somebody? This is oozing dumb rear end small business boss energy.

# ? Jun 4, 2021 12:26

smackfu: Jun 7, 2004

Maybe the Kent C Dodds course? $600. I generally consider him to be a smart guy about React stuff.
https://epicreact.dev

# ? Jun 4, 2021 12:36

marumaru: May 20, 2013

Analytic Engine posted:

Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that

freecodecamp, You Don't Know JS and documentation for libraries :shrug:

# ? Jun 4, 2021 13:25

Queen Victorian: Feb 21, 2018

I learned React on Udemy. Forget which course exactly but it was one of the popular ones. It also taught Redux (though I have since removed Redux from my stack because it made everything way too complicated and I hated it). You can usually find Udemy courses for sale for under $20 (normal price $100+).

There are also general frontend courses but I get the sense these are broad and not very deep.

# ? Jun 4, 2021 17:18

The Fool: Oct 16, 2003

marumaru posted:

freecodecamp, You Don't Know JS and documentation for libraries

Freecodecamp and mdn for me

# ? Jun 4, 2021 17:29

Analytic Engine: May 18, 2009; not the analytical engine

Jimlit posted:

He wants to spend $1000 to teach someone frontend from the ground up instead of just hiring somebody? This is oozing dumb rear end small business boss energy.

I already know frontend and am mediocre at React, it's more about reaching an expert level in something

# ? Jun 4, 2021 17:51

Jimlit: Jun 30, 2005

Analytic Engine posted:

I already know frontend and am mediocre at React, it's more about reaching an expert level in something

in that case, go with this if you absolutely need to burn the budget.

smackfu posted:

Maybe the Kent C Dodds course? $600. I generally consider him to be a smart guy about React stuff.
https://epicreact.dev

Otherwise he would be better off getting a business account with udemy for all his employees. Honestly though, no online course is going to give you the level of expertise that plugging holes in your own lovely react app will. If he has a project in mind I'd say take the time you would dedicate to online training and just use it to get started on that.

# ? Jun 4, 2021 18:25

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.

Analytic Engine posted:

I already know frontend and am mediocre at React, it's more about reaching an expert level in something

I've found that classes can take you from no knowledge to basic understanding of a new language/framework faster than solo learning, but you can't reach expert level anything by taking classes - if you've worked with react for a year on the job on your own and shipped something using it, it's unlikely that taking any kind of react class will teach you much.

# ? Jun 4, 2021 18:46

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

Queen Victorian posted:

I (though I have since removed Redux from my stack because it made everything way too complicated and I hated it).

If you ever need redux again it absolutely whips when you use redux-toolkit. They eliminated pretty much all my complaints with it.

# ? Jun 5, 2021 04:08

VagueRant: May 24, 2012

Anyone got any recommended resources for learning Typescript?

I've worked with it a little, got the basic theory, syntax and practice but get totally lost in the docs and youtube tuts when it comes to telling apart interfaces and enums and which parts I should actually be using for what.

# ? Jun 6, 2021 13:29

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

VagueRant posted:

Anyone got any recommended resources for learning Typescript?

I've worked with it a little, got the basic theory, syntax and practice but get totally lost in the docs and youtube tuts when it comes to telling apart interfaces and enums and which parts I should actually be using for what.

Might not be the best method but after I learned the basic syntax I just started using it and then googling stuff or posting here when I ran into "how do I..." type questions.

# ? Jun 6, 2021 21:38

barkbell: Apr 14, 2006; woof

https://basarat.gitbook.io/typescript/

I like this. It covers JS stuff too

# ? Jun 6, 2021 22:55

fsif: Jul 18, 2003

prom candy posted:

Might not be the best method but after I learned the basic syntax I just started using it and then googling stuff or posting here when I ran into "how do I..." type questions.

Yeah, I'm still new to TS but I very quickly got diminishing returns from the online courses I watched once I had the basics down. Too many of them are structured like a dry run through the docs and don't meaningfully demonstrate how you'd integrate TS into a normal rear end project.

# ? Jun 7, 2021 02:34

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

fsif posted:

Yeah, I'm still new to TS but I very quickly got diminishing returns from the online courses I watched once I had the basics down. Too many of them are structured like a dry run through the docs and don't meaningfully demonstrate how you'd integrate TS into a normal rear end project.

It's kind of deceptively simple. Just type your inputs, and try to rely on implicit typing for outputs and variables until you can't. When you run into a more difficult situation google it or ask some internet nerds. And if something takes more than 45 minutes just use any :v:

# ? Jun 7, 2021 03:23

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

haha the guy the maintains the user styles archive (https://uso.kkx.one/) rewrote the site in Svelte and TypeScript. And it's pretty dang nice looking too. Makes me want to try it out

# ? Jun 8, 2021 21:58

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:33

Plank Walker: Aug 11, 2005

What is the standard way to test a front end app hosted at https://localhost that needs to call a production API and get around CORS? All online resources point to "just disable cors" and I could allow access from any origin to my backend, but I'd rather not.

I'm leaning towards having a test and prod environment for the backend, and allowing localhost:* in the test env only, but then there's no way for the front end dev to test their code against the production backend before deploying.

# ? Jun 9, 2021 14:18

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »