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 »

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

spacebard posted:

If it's a confirmation modal, then I'd re-use it. If it's anything complex, then I make a new component for each form. But I'm using @ng-bootstrap/ng-bootstrap too so it's trivial to implement. Usually my dismiss/close returns some value so that my parent component can subscribe / pipe the result using from().pipe().subscribe();

If you need to do something like this yourself, you need a component resolver service using ComponentFactoryResolver to create the component instance. The resolver uses a ViewContainerRef passed to it by whatever the parent component.

Yeah it's definitely like a modal/dialog that could contain basically anything... super clear requirements I know. Some instances are a video; some copy; a form with multiple fields...

So I'll end up doing the ComponentFactoryResolver stuff, thanks.

# ? Jun 16, 2020 18:40

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 22:03

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

I feel like this is a really open ended question and I'm sorry if it's too broad for anyone to answer. I'm starting on node stuff at work and I have really enjoyed using TypeScript with React in the past, but mostly my knowledge and experience lives in the C# .NET world, so this is all kind of unfamiliar to me. I understand broadly that TypeScript is transpiled into JavaScript that will work on a specified 'target' implementation of JS, and I understand you can package these modules and import them using a package manager like npm.

What I'm having trouble grokking is the relationship between this transpilation step and the packaging/importing of external modules. If I have a module that I write in TypeScript, is it the JS version or the TypeScript version that should be packaged up? If I then import that into a separate TypeScript module, does the transpilation step then take care of transpiling the external module as well?

If I've completely misunderstood the whole concept, please tell me I won't be offended, just want to get my head around this. There's a lot of "how to make todo list" poo poo out there but not much I could find about handling larger pieces of work that contain modules that are shared across multiple projects etc.

Fake edit: I do have access to LinkedIn Learning, so if there's anything on there that people have seen that would be good for this kind of high-level ecosystem stuff, I'd love to hear about it.

putin is a cunt fucked around with this message at 00:15 on Jun 17, 2020

# ? Jun 17, 2020 00:11

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

Typically I think if you were writing a package in typescript you would distribute the compiled version of it so that people who aren't using TS could use it.

You don't have to do it this way though, you could easily import a TS module from node_modules and configure your build step to compile that too. Typically anything meant for public distro will be precompiled though. You can always poke around in your node_modules folder to see what other packages are doing.

# ? Jun 17, 2020 05:17

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

a hot gujju bhabhi posted:

I feel like this is a really open ended question and I'm sorry if it's too broad for anyone to answer. I'm starting on node stuff at work and I have really enjoyed using TypeScript with React in the past, but mostly my knowledge and experience lives in the C# .NET world, so this is all kind of unfamiliar to me. I understand broadly that TypeScript is transpiled into JavaScript that will work on a specified 'target' implementation of JS, and I understand you can package these modules and import them using a package manager like npm.

What I'm having trouble grokking is the relationship between this transpilation step and the packaging/importing of external modules. If I have a module that I write in TypeScript, is it the JS version or the TypeScript version that should be packaged up? If I then import that into a separate TypeScript module, does the transpilation step then take care of transpiling the external module as well?

If I've completely misunderstood the whole concept, please tell me I won't be offended, just want to get my head around this. There's a lot of "how to make todo list" poo poo out there but not much I could find about handling larger pieces of work that contain modules that are shared across multiple projects etc.

Fake edit: I do have access to LinkedIn Learning, so if there's anything on there that people have seen that would be good for this kind of high-level ecosystem stuff, I'd love to hear about it.

If you are publishing a package to npm for others to use, it will be the compiled version. They're not touching your source code, tho it might also be included. Think of it like a dll in C#, whoever is using it is just using whatever the public interface of the lib is. Same thing with publishing an npm package.

If you DO want people using Typescript, you should also create a corresponding types file, so someone can go:

code:

import 'bhabilib';
import @types/bhabilib;

const widget: BhabiWidget = new BhabiWidget();

or whatever, but it can still be used in Typescript without corresponding types, just depends on how strict their set up is with allowing use of any. Only difference between the above code and a plain JS version would be importing the types, and declaring widget as a specific type.

# ? Jun 17, 2020 12:14

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Thanks guys - one of the specific cases I have is a common library that I want other team members to use in their repos. The way we've done this currently is adding the repos as npm package references like:

code:

{
    ...
    {
        "devDependencies": {
        "@our-company/some-common-lib": "<url of git repo>",
    }
}

I assume from what you guys have said that in this scenario, they will get the entire contents of the repo as the TypeScript source, but if they're not using TypeScript they won't be able to use it? I guess there's no way to make it work with regular JS unless I commit the transpiled source (and the type definitions for convenience) as well?

# ? Jun 19, 2020 02:25

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Yep, you'd have to commit transpiled code to make it available if you're consuming the git repo directly. You could, instead, simply publish the code as a private package to NPM (requires a paid account).

Edit: or, even better, just open-source that poo poo.

# ? Jun 19, 2020 02:37

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Anony Mouse posted:

Yep, you'd have to commit transpiled code to make it available if you're consuming the git repo directly. You could, instead, simply publish the code as a private package to NPM (requires a paid account).

Edit: or, even better, just open-source that poo poo.

Haha, it's no good to anyone, it's just internal domain-specific code.

# ? Jun 19, 2020 15:11

Spraynard Kruger: May 8, 2007

a hot gujju bhabhi posted:

I assume from what you guys have said that in this scenario, they will get the entire contents of the repo as the TypeScript source, but if they're not using TypeScript they won't be able to use it? I guess there's no way to make it work with regular JS unless I commit the transpiled source (and the type definitions for convenience) as well?

We get around this with internal code by using the "prepare" script in our package.json to run the compilation when other developers install it. Here's the docs on npm scripts: https://docs.npmjs.com/misc/scripts

# ? Jun 24, 2020 19:35

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.

console.trace();

you're welcome.

# ? Jun 25, 2020 11:20

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

EDIT: one dog walk later, duh... referential equality. :smith:

I'm having one of those stupid moments where I will ask a question, and 2 seconds later someone will point out the obvious answer and I will go "oh, duh" and wonder why I didn't see it.

I have this code which renders a tree of things a user can open / close, select things from, etc:

JavaScript code:

  const renderGroups = () => {
    const _els: React.ReactNodeArray = [];
    filteredData.groups.forEach((group: SelectorGroup, id: string) => {
      _els.push(renderGroup(group));
    });
    return _els;
  };

const renderGroup = (group: SelectorGroup) => {
    return (
      <GroupItem
        filterOpen={filterValue !== ""}
        key={group.id}
        group={group}
        initialOpen={initialSelectedAssets.groups.has(group.id)}
      >
        {renderBuildingIds(group.buildings)}
      </GroupItem>
    );
  };

return <Wrapper>{renderGroups()}</Wrapper>

It returns a bunch of nodes which have child nodes, and all is well. The GroupItem components mount once, and as the user opens, closes, and selects, the components update as they should. Things are great!

When I change the renderGroup function to this (Groups now have two child lists, either of which may be open independently):

JavaScript code:

  const renderGroup = (group: SelectorGroup) => {
    const isSelect = isGroupSelected(group);
    const initOpen = initialSelectedAssets.groups.has(group.id) || isSelect;
    return (
      <GroupItem
        filterOpen={filterValue !== ""}
        key={group.id}
        group={group}
        disabled={false}
        onClick={handleGroupLevelSelect}
        initialOpen={initOpen}
        childAssetList={renderBuildingIds(group.buildings)}
        commodityList={commoditiesForGroup(group)}
        isSelected={isSelect}
      />
    );
  };
// rest is the same

When a user done anything, every GroupItem is un-mounted and a new one is created and rendered. I know I am doing something obvious to cause this, but lack of sleep and me being stupid are preventing me from seeing it!

Lumpy fucked around with this message at 22:33 on Jul 7, 2020

# ? Jul 7, 2020 20:45

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Ape Fist posted:

console.trace();

you're welcome.

Who are you talking to?

# ? Jul 7, 2020 23:34

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

The Merkinman posted:

Yeah it's definitely like a modal/dialog that could contain basically anything... super clear requirements I know. Some instances are a video; some copy; a form with multiple fields...

So I'll end up doing the ComponentFactoryResolver stuff, thanks.

I finally got back to coding this and I just can't get it to work

it's complaining about

code:

 No component factory found for ModalDialogComponent. Did you add it to @NgModule.entryComponents?

and so I put it as an entryComponent in modal-dialog-module.ts but I guess that's not where it wants it? Based off this modal

# ? Jul 8, 2020 16:09

Fellatio del Toro: Mar 21, 2009

Did you actually import the modal module into your app module or just declare the components?

# ? Jul 8, 2020 18:28

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

Fellatio del Toro posted:

Did you actually import the modal module into your app module or just declare the components?

ugh jeez I imported it into the page module, not the app modlel! :doh:

Now getting some error

code:

ERROR TypeError: this.componentRef.instance.loadData is not a function

which has to do with my modifications, but at least the modal is appearing now!

Thanks so much.

EDIT: Got it all to work!

...but...

now the second use case is where the content is an entire _module_ and I tried importing that and getting an error of "r is undefined"..
This modal thing is driving me crazy. Rather than make a thing that's used a certain way, I have to build something that can do all the variety of things we're doing one off.

The Merkinman fucked around with this message at 21:12 on Jul 9, 2020

# ? Jul 8, 2020 19:14

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.

GraphQL is a solution without a problem invented by, may Allah forgive me, React Developers.

Ape Fist fucked around with this message at 07:58 on Jul 12, 2020

# ? Jul 10, 2020 21:37

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

And then your product owner starts insisting on federated GraphQL "to tie all the APIs together", may Allah forgive them.

# ? Jul 10, 2020 21:43

Jadeilyn: Nov 21, 2004

The Merkinman posted:

ugh jeez I imported it into the page module, not the app modlel!
Now getting some error
code:
ERROR TypeError: this.componentRef.instance.loadData is not a function
which has to do with my modifications, but at least the modal is appearing now!

Thanks so much.

EDIT: Got it all to work!

...but...

now the second use case is where the content is an entire _module_ and I tried importing that and getting an error of "r is undefined"..
This modal thing is driving me crazy. Rather than make a thing that's used a certain way, I have to build something that can do all the variety of things we're doing one off.

Modals are pretty terrible. They have a lot of UI/UX, mobile, and accessibility issues. Nowadays, I don't like using them for anything more sophisticated than a styled confirm window that maybe passes an ID back to the parent. At an old job, my boss wanted an complex and multiple-stage wizard located entirely in a modal. We used RxJS for state but it was still awful to manage. We ended up rebelling and moving it all to routed components, and then he liked the look better. :shrug:

One part of modal management you want to make sure you have covered is some sort of global state. You want to prevent the ability to open multiple modals (at least, I hope you do!), and a way to clear all of them. On that same former project, we had an automatic logout after inactivity, and it could lead to navigating to the login route with a modal still on the screen.

# ? Jul 10, 2020 21:52

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

Jadeilyn posted:

Modals are pretty terrible. They have a lot of UI/UX, mobile, and accessibility issues. Nowadays, I don't like using them for anything more sophisticated than a styled confirm window that maybe passes an ID back to the parent. At an old job, my boss wanted an complex and multiple-stage wizard located entirely in a modal. We used RxJS for state but it was still awful to manage. We ended up rebelling and moving it all to routed components, and then he liked the look better.

One part of modal management you want to make sure you have covered is some sort of global state. You want to prevent the ability to open multiple modals (at least, I hope you do!), and a way to clear all of them. On that same former project, we had an automatic logout after inactivity, and it could lead to navigating to the login route with a modal still on the screen.

Oh yeah I really didn't want modals either! I was always in favor of adding content inline near whatever target trigger the modal. But yeah No, wasn't as ~pretty~ or whatever, so we're dealing with the accessibility losing focus stuff.

# ? Jul 10, 2020 22:11

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

Ape Fist posted:

GraphQL is a solution without a problem invented by, my Allah forgive me, React Developers.

Counterpoint: it�s not. It has its place, but like every new hotness on the web, everyone tries to use it for everything.

# ? Jul 11, 2020 06:04

Vincent Valentine: Feb 28, 2006; Murdertime

It's a solution to the problem of wanting something interesting and fun to work with, which in and of itself is a reasonable goal to pursue :shrug:

# ? Jul 11, 2020 12:56

Macichne Leainig: Jul 26, 2012; by VG

Lumpy posted:

Counterpoint: it�s not. It has its place, but like every new hotness on the web, everyone tries to use it for everything.

Yeah, everyone just assumes it to be the next logical step for web APIs. It has its place, it�s just not an automatic drop in replacement for REST.

I actually helped build out a GraphQL API for third party platforms to integrate with the whole system at my old job. I feel like it�s perfect there (though the implementation was... rocky) as third parties are free to grab whatever data they deem necessary at the time.

# ? Jul 11, 2020 15:44

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.

Ape Fist posted:

GraphQL is a solution without a problem invented by, my Allah forgive me, React Developers.

I thought odata was too much of a pain the rear end and a solution looking for a problem and then GraphQL came out. Development... development never changes.

# ? Jul 11, 2020 15:57

marumaru: May 20, 2013

Lumpy posted:

Counterpoint: it�s not. It has its place, but like every new hotness on the web, everyone tries to use it for everything.

what do you mean my api with 4 endpoints doesnt need graphql

# ? Jul 11, 2020 18:31

marumaru: May 20, 2013

but yeah graphql is good, when used properly and with purpose
just like... most everything else

# ? Jul 11, 2020 18:32

spiritual bypass: Feb 19, 2008; Grimey Drawer

GraphQL is cool because it's transport agnostic, which means you can use any HTTP method you want to fetch data. Also, why does my site keep going down?

# ? Jul 11, 2020 19:20

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

I tried it and had an impossible time integrating it well with SQL server much less an interface layer that didn�t defeat the whole purpose of it existing in the first place

# ? Jul 11, 2020 20:12

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

The big problem with GraphQL is it's hard to do eager loading when you don't know what data the client is asking for. Overall I've enjoyed working with it though, although I will say a lot of that is because Apollo came out at a time where doing data caching in Redux was a huge pain in the rear end. I recently went back to our other front-end project that uses Redux and I added the official Redux toolkit library and the whole experience is WAY better now, possibly even better than using Apollo. Hand-rolling reducers with Typescript was painful, it was like twice as much boilerplate as a Javascript reducer (which was already a lot of boilerplate.) createSlice takes all that poo poo away.

# ? Jul 11, 2020 21:37

uncle blog: Nov 18, 2012

I'm trying to bold the function names in VSCode. Added this to settings.json:

code:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.function",
        "settings": {
          "fontStyle": "bold"
        }
      }
    ]
  }

But no luck! Any ideas?

# ? Jul 15, 2020 13:41

marumaru: May 20, 2013

my biggest problem with graphql is that i loved working on it as a front end developer, but absolutely despised it as a backend developer. i imagine it's fine if you work on a hugeass team (read: facebook) with very separate teams so you never have to gently caress with it in the backend

# ? Jul 15, 2020 13:43

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

uncle blog posted:

I'm trying to bold the function names in VSCode. Added this to settings.json:
code:
"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.function",
        "settings": {
          "fontStyle": "bold"
        }
      }
    ]
  }
But no luck! Any ideas?

Find a theme that does it, copy that. Or, your theme is overriding it. :iiam:

# ? Jul 15, 2020 16:30

SAVE-LISP-AND-DIE: Nov 4, 2010

Inacio posted:

my biggest problem with graphql is that i loved working on it as a front end developer, but absolutely despised it as a backend developer. i imagine it's fine if you work on a hugeass team (read: facebook) with very separate teams so you never have to gently caress with it in the backend

Yep, as someone who can modify the back-end and has new versions of front and back-end roll out at the same time I don't see the value prop for GraphQL. OTOH if I had to send 20 emails to Bob over in Back-End to get a change added to the Customer Data Micro-Service and Jerry over in infra to update the Name Service it might be worth using GraphQL.

# ? Jul 16, 2020 11:29

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

I've been curious about Hasura and similar solutions out there. Anybody has any thoughts/experience?

I think GraphQL can be helpful in those managed solutions, but extremely unhelpful for tacking it onto an existing custom-built datastore that already has a classic REST API, just because your manager is feeling FOMO/wants a project to advance their career.

e: sorry, just realized which thread this is. didn't mean to sass with this back-end talk (*fart*)

gbut fucked around with this message at 12:21 on Jul 16, 2020

# ? Jul 16, 2020 12:18

Macichne Leainig: Jul 26, 2012; by VG

It's made more muddy by front-end frameworks like Gatsby revolving around a central GraphQL API for data retrieval. Graph all the things.

# ? Jul 16, 2020 16:59

Vincent Valentine: Feb 28, 2006; Murdertime

My company is not Agile. We've never been Agile. We'll never be Agile. But we keep saying we're Agile.

Every six months we move even further away from Agile.

Today, the team finally decided that QA should be done in the sprint following development sprints(which were made sequential over the years). So over time we have naturally implemented more-or-less by the books Waterfall.

But we're still gonna veto ideas because they Aren't Agile�.

# ? Jul 16, 2020 17:12

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.

Vincent Valentine posted:

My company is not Agile. We've never been Agile. We'll never be Agile. But we keep saying we're Agile.

Every six months we move even further away from Agile.

Today, the team finally decided that QA should be done in the sprint following development sprints(which were made sequential over the years). So over time we have naturally implemented more-or-less by the books Waterfall.

But we're still gonna veto ideas because they Aren't Agile�.

Let me guess, the stuff that isn't Agile� is having written requirements or useful documentation?

# ? Jul 16, 2020 17:48

Vincent Valentine: Feb 28, 2006; Murdertime

Bruegels Fuckbooks posted:

Let me guess, the stuff that isn't Agile� is having written requirements or useful documentation?

Look, all Storys have to be written from a Clients point of view. If it's not something a Client would use, you're not delivering Value. Do you think a Client wants to read documentation? Dream on, nerd! Nobody wants to read anything!

# ? Jul 16, 2020 18:08

abraham linksys: Sep 6, 2010

Vincent Valentine posted:

Look, all Storys have to be written from a Clients point of view. If it's not something a Client would use, you're not delivering Value. Do you think a Client wants to read documentation? Dream on, nerd! Nobody wants to read anything!

as a client, I want the developers of my software to know what the gently caress they're doing, so that they don't deliver me lovely software

(my current company is the first time I've had a PM who is totally happy to have purely-technical tickets he doesn't really care about in the sprint, as long as we make a justification for them)

# ? Jul 16, 2020 18:14

MadFriarAvelyn: Sep 25, 2007

Vincent Valentine posted:

My company is not Agile. We've never been Agile. We'll never be Agile. But we keep saying we're Agile.

The same thing is happening at my company. A waterfall model just works better for our product team, who have been the major blockers whenever anyone on the development team raises the discrepancy and tries to get management to correct it. :shrug:

# ? Jul 16, 2020 19:16

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

To be glib: Agile is just waterfall on a smaller timescale.

To put it another way: if you said you were gonna do waterfall but your delivery date was 1 month from now, the process you'd come up with would look very similar to how Agile looks.

# ? Jul 16, 2020 19:46

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 22:03

DrPossum: May 15, 2004; i am not a surgeon

the only things about agile I want in any of my workflows is getting feedback from clients frequently (and listening to it), not planning too far ahead, and everyone on board with the expectation that sometimes what we were doing is dumb and we should try something else to avoid sunk cost fallacies

# ? Jul 19, 2020 14:11

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

«‹›235 »