Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

If you use yarn link / npm link, and then modify the dependency package, what behavior should you expect?
1. Like makefiles the change magically resolves and your final dist just works with the new files.
2. You have to do some sort of build operation to a dist folder on the dependency package, but then the new files will work.
3. You have to do some sort of build operation to a dist folder and then also do the whole link process again.

(Asking rather than trying because right now I just have modules from relative paths, and converting those paths to packages is a moderate amount of work that's not worth doing if it's just going to make my workflow worse. I'm only considering it because for some reason the remote-linked modules are complaining about missing tslib if I try to write async/await things, even though their closest tsconfig.json is essentially identical to the one near the non-remote-linked modules which can do async/await things just fine.)

Edit: my current workaround is just writing async functions in the form of functions that return promises and do all that awkward loving around with .then(), which I can keep doing if it's not worth the effort of packaging things properly while they're in parallel development.

roomforthetuna fucked around with this message at 06:08 on Sep 21, 2018

# ? Sep 21, 2018 06:04

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 11:30

geeves: Sep 16, 2004

playground tough posted:

Any thoughts or alternative suggestions? Cannot afford a rewrite - wish I could.

Use The Strangler Pattern. https://www.martinfowler.com/bliki/StranglerApplication.html

Rewrites don't require going dark to change everything. New things = new code. Old code: Refactor piece by piece as you work on each part of the application. It's a bit of a learning process, and you'll improve each time you refactor, so don't sweat getting it right immediately.

It's meant to be a long term process and don't sweat it if there is duplicate code, etc. We just finished our first year from moving from Struts2 to React + Spring Boot and we still have over half our application to go.

# ? Sep 22, 2018 01:59

playground tough: Oct 29, 2007

geeves posted:

Use The Strangler Pattern. https://www.martinfowler.com/bliki/StranglerApplication.html

Rewrites don't require going dark to change everything. New things = new code. Old code: Refactor piece by piece as you work on each part of the application. It's a bit of a learning process, and you'll improve each time you refactor, so don't sweat getting it right immediately.

We've actually implemented early stages of something that I believe, for us, is the beginning of the strategy that's being suggested here. We started by adding a middleware that can act on requests before our existing backend does, and I can definitely add some routes and start building up a new API. That way, we can gradually replace functionality there.

Going to implement the changes I was thinking about when making that post using new code that can be tested properly!

Got so caught up in our existing codebase and how hard it would be to make changes that I wasn't even thinking of leveraging what we just started. Thank you for the nudge in the right direction. I feel a bit silly now!

# ? Sep 22, 2018 06:45

Polio Vax Scene: Apr 5, 2009

When are we getting a safe navigation operator for javascript? I'm so tired of null checking every part of a path / including a library as a dependency just for this.

# ? Sep 26, 2018 17:08

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Polio Vax Scene posted:

When are we getting a safe navigation operator for javascript? I'm so tired of null checking every part of a path / including a library as a dependency just for this.

https://github.com/tc39/proposal-optional-chaining doesn't look abandoned yet

# ? Sep 26, 2018 18:07

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

Polio Vax Scene posted:

When are we getting a safe navigation operator for javascript? I'm so tired of null checking every part of a path / including a library as a dependency just for this.

dehumanize yourself and face to using a proxy object that blocks null property dereference

# ? Sep 26, 2018 18:19

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

Has anyone successfully mixed Python HTML templates (jinja2/etc) with React? I'm making login and registration pages for my React SPA and it would really help to leverage flask_wtf forms. Currently I have a janky setup where Flask templates set window variables in index.html before I call the React <script>s which use dangerouslySetInnerHTML, and that's clearly stupid.

Broadly, this is about how you mix server-side HTML templating with React JS code. If it's better to learn server-side React stuff then I could do that.

# ? Sep 27, 2018 00:24

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Polio Vax Scene posted:

When are we getting a safe navigation operator for javascript? I'm so tired of null checking every part of a path / including a library as a dependency just for this.

_.get from lodash solves this nicely, and you can import just the module.

Or transpile
https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

# ? Sep 27, 2018 02:18

Khorne: May 1, 2002

Analytic Engine posted:

Broadly, this is about how you mix server-side HTML templating with React JS code. If it's better to learn server-side React stuff then I could do that.

You could return the form stuff in the relevant component's render function. That way you don't have to set inner html. This works with fetching pre-rendered code or preplacing it somewhere.

Khorne fucked around with this message at 04:22 on Sep 27, 2018

# ? Sep 27, 2018 04:20

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

Khorne posted:

You could return the form stuff in the relevant component's render function. That way you don't have to set inner html. This works with fetching pre-rendered code or preplacing it somewhere.

Ok, if I did that then I'd want to render different JSX depending on the backend state. From what I know that only works in HTML templates. Can I replace parts of a bundled JS file while serving with Flask? The double {{}} notation in Flask/Jinja2 conflicts with JSX's single {}

----------
myreact.js
----------
...
<div>
{{ jsx_from_backend }}
</div>
...

# ? Sep 27, 2018 05:09

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

Analytic Engine posted:

Has anyone successfully mixed Python HTML templates (jinja2/etc) with React? I'm making login and registration pages for my React SPA and it would really help to leverage flask_wtf forms. Currently I have a janky setup where Flask templates set window variables in index.html before I call the React <script>s which use dangerouslySetInnerHTML, and that's clearly stupid.

Broadly, this is about how you mix server-side HTML templating with React JS code. If it's better to learn server-side React stuff then I could do that.

One alternative is to keep login and registration out of the SPA entirely. Use server-side templates to render all login/registration logic and then on successful login you can redirect to the SPA, pass a token via cookie in the response and then use the token in SPA as usual. On logout, have the SPA hit the server page and you're back out of the SPA again for login.

Mixing this poo poo gets confusing, keep state simple.

# ? Sep 27, 2018 15:59

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

yeah, I don't think you can mix Python server-side templates and React stuff-- all the React elements only exist in javascript or JSX-land, you can't just throw them into HTML directly, right?

now if you were using custom elements it'd be a different story

People don't really talk about it a lot but React takes the holy trinity of HTML, CSS, and Javascript and says "actually Javascript is the boss" (especially if you have some `import "component.css"` poo poo in your JSX)

# ? Sep 27, 2018 21:43

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

Ahz posted:

One alternative is to keep login and registration out of the SPA entirely. Use server-side templates to render all login/registration logic and then on successful login you can redirect to the SPA, pass a token via cookie in the response and then use the token in SPA as usual. On logout, have the SPA hit the server page and you're back out of the SPA again for login.

Mixing this poo poo gets confusing, keep state simple.

Thanks, this is my current approach so let's see how it goes.

Fishmech: That's true about React but I knew it going in. What's more surprising is Flask/jinja2 doesn't have first-class templating for JS (or CSS) files like it does with HTML

# ? Sep 28, 2018 01:43

mystes: May 31, 2006

Analytic Engine posted:

Fishmech: That's true about React but I knew it going in. What's more surprising is Flask/jinja2 doesn't have first-class templating for JS (or CSS) files like it does with HTML

The whole point of jsx is that it's an extension of javascript to allow writing html directly as if in an html file (instead of using strings or functions to build the html). There are (or at least used to be, like the original version of CherryPy) similar systems to allow you to write html in a similar way within python code (requiring an additional preprocessing step prior to running python on th efiles), but jinja2 is different because it takes the philosophy of putting the html in other files rather than modifying python syntax to allow adding markup within the python code, so it's pretty different from jsx in the first place.

There isn't as much demand for templating for JS or CSS based on python code because it usually isn't necessary to dynamically generate separate JS or CSS files based on information from the python code. There are separate programs to extend css if you just need a preprocessor you can run on static files to provide some convenience features, and you can usually add javascript or styles within the html if necessary.

Can you give a specific example of why you would want a python templating engine for JS files?

mystes fucked around with this message at 02:01 on Sep 28, 2018

# ? Sep 28, 2018 01:56

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

I'm not fishmech-- an anonymous hero has been running wild giving (controversial?) YOSPOSters avatars identical to posters with well known brands

# ? Sep 28, 2018 03:03

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

prisoner of waffles posted:

I'm not fishmech-- an anonymous hero has been running wild giving (controversial?) YOSPOSters avatars identical to posters with well known brands

My god... I'm sorry for the slander dude

# ? Sep 28, 2018 05:36

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

maybe one day i can have dog tits too... a man can dream

# ? Sep 28, 2018 06:22

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

Analytic Engine posted:

My god... I'm sorry for the slander dude

nah, I'm happy that someone either

has decided to play super mischief and give lowtax some spine $$$; or
decided my posts were sPiCy and that they wanted to mess with me a bit

# ? Sep 28, 2018 19:11

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

mystes posted:

The whole point of jsx is that it's an extension of javascript to allow writing html directly as if in an html file (instead of using strings or functions to build the html). There are (or at least used to be, like the original version of CherryPy) similar systems to allow you to write html in a similar way within python code (requiring an additional preprocessing step prior to running python on th efiles), but jinja2 is different because it takes the philosophy of putting the html in other files rather than modifying python syntax to allow adding markup within the python code, so it's pretty different from jsx in the first place.

There isn't as much demand for templating for JS or CSS based on python code because it usually isn't necessary to dynamically generate separate JS or CSS files based on information from the python code. There are separate programs to extend css if you just need a preprocessor you can run on static files to provide some convenience features, and you can usually add javascript or styles within the html if necessary.

Can you give a specific example of why you would want a python templating engine for JS files?

Suppose you wanted to serve one of two JS bundles to the frontend depending on a server variable being true/false. If those bundles are 90% the same then it would be easier to use one JS template and programmatically fill in the 10% different code based on the server state. There's an easy way to do this live with HTML templates that ends up serving a single HTML file, but with JS you have to plan out imports/exports/composition before running a bundler (and I don't think it's kosher to bundle in response to User requests). The workarounds I see online come down to wrapping JS in HTML and then composing the "HTML" templates which feels like a hack.

Maybe I have the wrong mental model? It seems like treating JSX as an HTML replacement only works if the JS files have the same access to server state as an HTML templating system would. Since I'm not using a JS web server I feel like that's not straightforward.

Analytic Engine fucked around with this message at 22:43 on Sep 28, 2018

# ? Sep 28, 2018 22:40

Roadie: Jun 30, 2013

Analytic Engine posted:

Suppose you wanted to serve one of two JS bundles to the frontend depending on a server variable being true/false.

That sounds like what you actually mean is "one bundle with dynamic imports based on whatever environmental condition is set by the server".

# ? Sep 29, 2018 02:58

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

Roadie posted:

That sounds like what you actually mean is "one bundle with dynamic imports based on whatever environmental condition is set by the server".

Sure, that would work. How do I change the JS file imports live in response to the server state? I can do that cleanly with HTML template partials.

# ? Sep 29, 2018 03:20

Roadie: Jun 30, 2013

Analytic Engine posted:

Sure, that would work. How do I change the JS file imports live in response to the server state? I can do that cleanly with HTML template partials.

Set a cookie on the response, or even just include a different json file and do fetch('/differentiator.json') in the code.

# ? Sep 29, 2018 06:48

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

A poster a while back ((Malcuno Mario or something like that... I�m sure I am misremembering the name) built a Django / React thing where part of Django�s render was passing JSON to a node processs that did the react rendering and the html that was returned was inserted into the template. At least that is what my bad memories tell me.

# ? Sep 30, 2018 15:12

necrotic: Aug 2, 2005; I owe my brother big time for this!

That's one way to do it, I guess... better might be to have the Django app be the API only and then have the node process call the APIs as if it was the client and render out the initial page.

# ? Sep 30, 2018 17:06

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

necrotic posted:

That's one way to do it, I guess... better might be to have the Django app be the API only and then have the node process call the APIs as if it was the client and render out the initial page.

That's the norm: Django as API only, and clients request server side rendered React from a node process. Was called isomorphic React for a bit, then "universal" React and now maybe something else since it's Ben more than few months since it's been called universal.

# ? Sep 30, 2018 18:02

mystes: May 31, 2006

Is Django really the best choice if you just want a rest API? (I can understand if you have an existing Django site you want to convert to an SPA, though.)

# ? Sep 30, 2018 19:18

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

mystes posted:

Is Django really the best choice if you just want a rest API? (I can understand if you have an existing Django site you want to convert to an SPA, though.)

I doubt there's such a thing as a "best" choice.

Django is one of the good choices, but there's a lot of different dimensions to evaluate and the importance of each dimension varies from project to project and environment to environment...and whichever you choose it going to be worse than other choices on some of the dimensions.

# ? Sep 30, 2018 19:58

porksmash: Sep 30, 2008

mystes posted:

Is Django really the best choice if you just want a rest API? (I can understand if you have an existing Django site you want to convert to an SPA, though.)

Best is subjective, but Django + DRF is definitely my favorite way to slam out an API.

# ? Sep 30, 2018 23:21

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

I've got these two scripts:

code:

<script>
window.onscroll = function () {
	document.getElementById('foo').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpast');
};
</script>

<script>
window.onscroll = function () {
	document.getElementById('bar').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpastrs');
};
</script>

One on its own works, but if I add the second script, the second one works but the first one doesn't. The error is:

code:

Uncaught TypeError: Cannot set property 'className' of undefined
    at nextSlide ((index):261)

I assume because both of them are trying to trigger at the same time?

I also tried a blanket one such as:

code:

<script>
window.onscroll = function () {
	document.getElementsByClass('scroller').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpast');
};
</script>

code:

<script>
window.onscroll = function () {
	document.getElementsByClassName('scroller').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpast');
};
</script>

But both of them threw up the dreaded "is not a function" error (Uncaught TypeError: document.getElementsByClass is not a function at window.onscroll)

What am I doing wrong with any/all of these?

# ? Oct 1, 2018 17:48

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

LifeLynx posted:

I've got these two scripts:

code:

<script>
window.onscroll = function () {
	document.getElementById('foo').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpast');
};
</script>

<script>
window.onscroll = function () {
	document.getElementById('bar').classList[window.scrollY > 0 ? 'add' : 'remove']('scrolledpastrs');
};
</script>

What am I doing wrong with any/all of these?

Imagine this code:

code:

blah = "lol"
blah = "cow"

What do you expect 'blah' to be?

Now imagine this code:

code:

window.onscroll  = functionA()
window.onscroll  = functionB()

What do you expect 'window.onscroll' to be?

You don't want to *replace* window.onscroll, you want to add event listeners to it.

code:

window.addEventListener('scroll', function ().... )
window.addEventListener('scroll', function ().... )

# ? Oct 1, 2018 18:02

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

I think jQuery.on() is stateful and will add additional functions to the same event, so maybe they're coming from that model.

# ? Oct 1, 2018 18:12

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

Lumpy posted:

Imagine this code:
code:
blah = "lol"
blah = "cow"
What do you expect 'blah' to be?

Now imagine this code:
code:
window.onscroll  = functionA()
window.onscroll  = functionB()
What do you expect 'window.onscroll' to be?

You don't want to *replace* window.onscroll, you want to add event listeners to it.
code:
window.addEventListener('scroll', function ().... )
window.addEventListener('scroll', function ().... )

I had a feeling there was some overwriting going on somewhere, but I couldn't figure out where. I'm transitioning from depending on jQuery to using vanilla JS, so sometimes it's not super obvious what's wrong. Thanks!

# ? Oct 1, 2018 19:08

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

consider using

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

and if you really have to, https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

# ? Oct 1, 2018 19:38

geeves: Sep 16, 2004

LifeLynx posted:

I had a feeling there was some overwriting going on somewhere, but I couldn't figure out where. I'm transitioning from depending on jQuery to using vanilla JS, so sometimes it's not super obvious what's wrong. Thanks!

http://youmightnotneedjquery.com/

http://vanilla-js.com/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

The last one in particular, is very good and has Browser compatibility charts. Google, MS and Mozilla also agreed that MDN would be THE documentation site for ECMA standards.

# ? Oct 2, 2018 01:17

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

geeves posted:

http://youmightnotneedjquery.com/

http://vanilla-js.com/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

The last one in particular, is very good and has Browser compatibility charts. Google, MS and Mozilla also agreed that MDN would be THE documentation site for ECMA standards.

Yeah those have been great for me so far. The idea just saying screw it and slamming down a jQuery script with a $ sign is as tempting as using tables was god knows how many years ago when I realized those were out of favor, but I know it's for the best. The only thing is, I'm using Wordpress because most of my sites need to be usable for Joe Customer to update and need to have a wide suite of plugins available at a moment's notice, so I'll never know if I can truly get away from loading jQuery on the front-end. I don't have to use it for my DOM manipulation though.

# ? Oct 2, 2018 03:25

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

LifeLynx posted:

Yeah those have been great for me so far. The idea just saying screw it and slamming down a jQuery script with a $ sign is as tempting as using tables was god knows how many years ago when I realized those were out of favor, but I know it's for the best. The only thing is, I'm using Wordpress because most of my sites need to be usable for Joe Customer to update and need to have a wide suite of plugins available at a moment's notice, so I'll never know if I can truly get away from loading jQuery on the front-end. I don't have to use it for my DOM manipulation though.

jQuery ships with wordpress core.

# ? Oct 3, 2018 06:08

Master_Odin: Apr 15, 2010; My spear never misses its mark...

ladies

Within NodeJS, is there a good mechanism to do automatic plugin discovery? Python has the pkgutil.iter_modules() method to get all "top level modules" and can be used to detect ones that have some given naming convention (like starting with "flask_"). Does NodeJS have a similar method?

Ex:
I've got module "package". I'd like to put in my package.json that I've got "package" and "package-redis" and that "package" automatically detects and requires "package-redis" without me explicitly naming the package.

# ? Oct 7, 2018 00:33

Roadie: Jun 30, 2013

Master_Odin posted:

Within NodeJS, is there a good mechanism to do automatic plugin discovery? Python has the pkgutil.iter_modules() method to get all "top level modules" and can be used to detect ones that have some given naming convention (like starting with "flask_"). Does NodeJS have a similar method?

Ex:
I've got module "package". I'd like to put in my package.json that I've got "package" and "package-redis" and that "package" automatically detects and requires "package-redis" without me explicitly naming the package.

Parcel does exactly this, so take a look at whatever they've got going on for it.

# ? Oct 7, 2018 02:02

22 Eargesplitten: Oct 10, 2010

I'm sure this is a common issue, but I know next to nothing about Linux so I need help. FWIW I'm currently working through the CLI, but I can go to the server downstairs and go through the GUI if that's a lot easier. I'm trying to install Express on Node and I'm getting this error:

[DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

It says warning, but it's also throwing this error and actually failing.

npm ERR! error rolling back Error: EACCES: permission denied, unlink '/home/pi/node_modules/express/node_modules/send/node_modules/.bin/mime'

Does it seem like I maybe installed Express already and forgot about it? Not sure how to check that either. This is the first time I've used Node or Express, but it seems like that's going to be the choice I want for a lightweight simple web server on Raspbian that my wife and I can both SSH into from our (much more power-intensive and frequently sleeping) desktops.

What do I do here? I'm just now getting into this stuff and this is the first time I've started a server rather than using JSFiddle or Codepen or the Atom Live Server or similar.

# ? Oct 8, 2018 21:16

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 11:30

my bony fealty: Oct 1, 2008

Uh could be a permissions error? Try this

https://stackoverflow.com/questions/48910876/error-eacces-permission-denied-access-usr-local-lib-node-modules-react?rq=1

# ? Oct 10, 2018 02:48

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »