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 »

The Fool: Oct 16, 2003

Lumpy posted:

I'm tired and too lazy to see if the first approach is valid, but I would either:

1. Plop an event handler on the iFrame to see when it is done loading
2. Check for `segment` existing, if it does not, sleep a bit and check again in a loop until it's there (failing completely after X seconds.)

Thanks for the ideas. I ended up using settimeout to delay the function and it's working for me.

A little fragile, but it'll work for this project.

# ? Dec 11, 2019 22:23

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 23:07

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

The Fool posted:

Thanks for the ideas. I ended up using settimeout to delay the function and it's working for me.

This really isn't a good way to solve this problem

# ? Dec 12, 2019 04:19

The Fool: Oct 16, 2003

HappyHippo posted:

This really isn't a good way to solve this problem

Have you done any custom development for Dynamics 365?

# ? Dec 12, 2019 05:54

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

You can hook into the iframes onload event to run your code

code:

const iframe = document.querySelector('#frame_id');
iframe.onload = () => {
   console.log('iframe is completely loaded');
}

# ? Dec 12, 2019 07:00

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.

ddiddles posted:

You can hook into the iframes onload event to run your code
code:
const iframe = document.querySelector('#frame_id');
iframe.onload = () => {
   console.log('iframe is completely loaded');
}

there's some complexity with this - pretty sure if it's a cross domain iframe it isn't going to work. iframes suck rear end.

# ? Dec 12, 2019 13:54

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Bruegels Fuckbooks posted:

there's some complexity with this - pretty sure if it's a cross domain iframe it isn't going to work. iframes suck rear end.

If they're modifying the elements within the iframe, then it isn't cross domain, no?

# ? Dec 12, 2019 14:32

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.

HappyHippo posted:

If they're modifying the elements within the iframe, then it isn't cross domain, no?

Yeah.

# ? Dec 12, 2019 15:21

Polio Vax Scene: Apr 5, 2009

The Fool posted:

Have you done any custom development for Dynamics 365?

I have. We use postMessage() to communicate between the D365 window and the cross-domain frame inside of it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

HappyHippo posted:

If they're modifying the elements within the iframe, then it isn't cross domain, no?

In D365 you can configure iFrames on the page to have a src that is a different domain so it's possible it's cross-domain to start with.

# ? Dec 12, 2019 15:45

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

That all sounds terrible and I'm just going to stop thinking about it so I don't get sad.

God speed.

# ? Dec 13, 2019 11:24

Dominoes: Sep 20, 2007

Hey dudes. Not sure if this is the best place, but do Youtube, news sites etc employ anti-blocking scripts? I'm learning how to build browser extensions, and am trying to block comments sections by class name. Appears to work on initial load of the extension, then stops working. Works fully using the same logic, but different class names on diff sites. Could Youtube be employing a script that checks for changes, and undoes them?

# ? Jan 4, 2020 16:22

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!

Dominoes posted:

Hey dudes. Not sure if this is the best place, but do Youtube, news sites etc employ anti-blocking scripts? I'm learning how to build browser extensions, and am trying to block comments sections by class name. Appears to work on initial load of the extension, then stops working. Works fully using the same logic, but different class names on diff sites. Could Youtube be employing a script that checks for changes, and undoes them?

Youtube does a lot of dynamic things. If your extension just changes things on page-load then anything it updates after page-load will be missed. You'd have to use something like a MutationObserver and re-run your function to destroy the unwanted things that appear after page load.
(If a page itself also uses a MutationObserver to redeploy disappeared things then you could cause the page to crash.)

# ? Jan 4, 2020 18:20

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

This script works in Chrome, but not in Edge:

code:

const linkTo = document.querySelectorAll('.linkto');

[...linkTo].forEach(function(item) {
	var targetTop = document.getElementById(item.classList[1]).offsetTop;
	item.addEventListener('click', function(event) {
		event.preventDefault();
		window.scrollTo({ top: targetTop, behavior: 'smooth',});
		if (navToggle.classList.contains('mobilenavactive')) {
			mobileNavToggle();
		}
	});
});

It makes it so that if I have a menu like this:

code:


<ul>
<li><a href="/">Home</a></li>
<li class="linkto linkto-contact"><a href="#">This links the Contact area</a></li>
</ul>

And then have an anchor tag with the id #linkto-contact lower in the page, clicking it smoothly scrolls to the top of that anchor tag. It works in Chome, but I'd like it work everywhere.

Also, is there a better way of writing this so it doesn't rely on a bunch of if statements?

code:


document.addEventListener("DOMContentLoaded", function(event) { 
	observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (entry.target.classList.contains('anim-target-fadeIn')) {
					entry.target.classList.add('animated', 'fadeIn');
				}
				if (entry.target.classList.contains('anim-target-fadeInUp')) {
					entry.target.classList.add('animated', 'fadeInUp');
				}
				if (entry.target.classList.contains('anim-target-bounceIn')) {
					entry.target.classList.add('animated', 'bounceIn');
				}
				if (entry.target.classList.contains('anim-target-zoomIn')) {
					entry.target.classList.add('animated', 'zoomIn');
					entry.target.style.opacity = 1;
				}
			}
			else {
				entry.target.classList.remove('animated', 'fadeIn', 'fadeInUp', 'bounceIn', 'zoomIn');
				entry.target.style.opacity = 0;
			}
		});
	});

	document.querySelectorAll('.anim-target').forEach(image => {
		observer.observe(image);
	});
});

Thanks!

# ? Jan 4, 2020 18:57

Dominoes: Sep 20, 2007

roomforthetuna posted:

Youtube does a lot of dynamic things. If your extension just changes things on page-load then anything it updates after page-load will be missed. You'd have to use something like a MutationObserver and re-run your function to destroy the unwanted things that appear after page load.
(If a page itself also uses a MutationObserver to redeploy disappeared things then you could cause the page to crash.)

Thank you. Those docs are clear and concise. It looks like something's even stopping that code from running after the initial extension load as well. Your explanation makes sense, and I'm sure there's a way around this. Perhaps the best bet is to study existing extensions that do something similar. I notice the same problem with some news sites.

# ? Jan 5, 2020 04:25

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!

Dominoes posted:

Thank you. Those docs are clear and concise. It looks like something's even stopping that code from running after the initial extension load as well. Your explanation makes sense, and I'm sure there's a way around this. Perhaps the best bet is to study existing extensions that do something similar. I notice the same problem with some news sites.

You might want to look into "shadow DOM" as well, I don't know to what extent that would make it more difficult to interact with a page (or interfere with MutationObserver), but I remember something about Youtube using that kind of thing.

# ? Jan 5, 2020 07:00

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

Yeah, ShadowDOM doesn't appear in the root mutations. You basically have to wrap the attachShadow method on HTMLElement prototype to know when a new shadow root is created and observe that as well, the appearance of the new root doesn't trigger an attribute mutation.

edit: Looking at the YouTube DOM they do not appear to be using Shadow DOM at all, though.

necrotic fucked around with this message at 16:42 on Jan 5, 2020

# ? Jan 5, 2020 15:43

MrMoo: Sep 14, 2000

YouTube was rewritten for Polymer v1 a while ago, that includes shadow DOM. They should be moving onto LitHtml for webcomponents. It�s definitely not an extensive deployment of the tech though.

# ? Jan 5, 2020 17:07

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

Web components/polymer v1 don't necessarily use shadow DOM. Maybe they're not using the shadow in firefox, which is where I looked, but while they are using custom elements I didn't see any shadow usage.

edit: just checked chrome and its the same, custom elements but no shadow dom.

edit2: also possible they've fully switched to LitHTML already and I'm mistaken about polymer v1. either way, there's no shadow dom at play for YT.

necrotic fucked around with this message at 18:29 on Jan 5, 2020

# ? Jan 5, 2020 18:07

MrMoo: Sep 14, 2000

I think Polymer v1 uses Shady DOM to simulate a Shadow DOM, so basically expect things to get more inconvenient.

https://www.polymer-project.org/blog/shadydom

# ? Jan 5, 2020 19:24

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

Ah, I forgot about that "shim".

# ? Jan 5, 2020 19:46

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

LifeLynx posted:

This script works in Chrome, but not in Edge:

code:

const linkTo = document.querySelectorAll('.linkto');

[...linkTo].forEach(function(item) {
	var targetTop = document.getElementById(item.classList[1]).offsetTop;
	item.addEventListener('click', function(event) {
		event.preventDefault();
		window.scrollTo({ top: targetTop, behavior: 'smooth',});
		if (navToggle.classList.contains('mobilenavactive')) {
			mobileNavToggle();
		}
	});
});

Thanks!

Are you transpiling? If not, it could be that Edge doesn't support [..linkTo] yet? What does the console tell you?

# ? Jan 5, 2020 20:25

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

LifeLynx posted:

This script works in Chrome, but not in Edge:

code:

const linkTo = document.querySelectorAll('.linkto');

[...linkTo].forEach(function(item) {
	var targetTop = document.getElementById(item.classList[1]).offsetTop;
	item.addEventListener('click', function(event) {
		event.preventDefault();
		window.scrollTo({ top: targetTop, behavior: 'smooth',});
		if (navToggle.classList.contains('mobilenavactive')) {
			mobileNavToggle();
		}
	});
});

Maybe I'm misunderstanding something, but what are you using the spread syntax for here? linkTo is a NodeList and should contain the forEach method directly.

# ? Jan 6, 2020 02:13

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

a hot gujju bhabhi posted:

Maybe I'm misunderstanding something, but what are you using the spread syntax for here? linkTo is a NodeList and should contain the forEach method directly.

That's a good point I noticed earlier while rereading my post. I think it was a leftover from when I was trying to figure something else out.

# ? Jan 6, 2020 02:48

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

a hot gujju bhabhi posted:

Maybe I'm misunderstanding something, but what are you using the spread syntax for here? linkTo is a NodeList and should contain the forEach method directly.

If you modify a child of the list, it invalidates the list, IIRC.

# ? Jan 6, 2020 15:35

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

a hot gujju bhabhi posted:

Maybe I'm misunderstanding something, but what are you using the spread syntax for here? linkTo is a NodeList and should contain the forEach method directly.

old browser bug. NodeList didn't have forEach for a few years, it's pretty recent https://esdiscuss.org/topic/why-does-legacy-content-break-when-making-array-likes-real-arrays

# ? Jan 6, 2020 22:23

Boris Galerkin: Dec 17, 2011; I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

I have a REST API written in Python as AWS lambda functions and I'd like to convert this into JavaScript as a learning experience. I have a lot of questions.

With Python based projects the first thing they tell you to do is set up a virtual environment so that you are using only the packages you explicitly specify. What is the JavaScript (node.js? it's my understanding AWS uses this but I don't know how it fits in with JavaScript to be honest) equivalent of creating a new environment with conda/venv/poetry/whatever and then installing packages specified in a requirements.txt file?

There is a python package/cli tool called "black" that is an "uncompromising code formatter." It takes your code and spits out what it should look like including swapping single quotes for double quotes, putting trailing commas on multi line lists, and so on. There are basically no configuration options so all the code looks the same and I like that a lot. What is the JavaScript version of this?

What is the typical directory structure of a project? In python if your project was called myproject you'd typically have a project directory like

code:

myproject/  # top level project directly
    myproject/  # or src/, code goes here
    tests/ # tests etc
    docs/

What is the JavaScript equivalent?

I�d like to learn/do this the right way so thanks in advance.

# ? Jan 25, 2020 10:38

Strong Sauce: Jul 2, 2003; You know I am not really your father.

Boris Galerkin posted:

I have a REST API written in Python as AWS lambda functions and I'd like to convert this into JavaScript as a learning experience. I have a lot of questions.

With Python based projects the first thing they tell you to do is set up a virtual environment so that you are using only the packages you explicitly specify. What is the JavaScript (node.js? it's my understanding AWS uses this but I don't know how it fits in with JavaScript to be honest) equivalent of creating a new environment with conda/venv/poetry/whatever and then installing packages specified in a requirements.txt file?

There is a python package/cli tool called "black" that is an "uncompromising code formatter." It takes your code and spits out what it should look like including swapping single quotes for double quotes, putting trailing commas on multi line lists, and so on. There are basically no configuration options so all the code looks the same and I like that a lot. What is the JavaScript version of this?

What is the typical directory structure of a project? In python if your project was called myproject you'd typically have a project directory like
code:
myproject/  # top level project directly
    myproject/  # or src/, code goes here
    tests/ # tests etc
    docs/
What is the JavaScript equivalent?

I’d like to learn/do this the right way so thanks in advance.

so, yes. you want to use node. i don't want to get into the nitty gritty, basically javascript is the language, v8 is the javascript engine and node (which uses v8) is the environment that provides extra apis like networking, encryption, etc.

conda/venv/poetry equivalent is nvm,
package manager is npm which is in every node install.
running "npm init" in a folder will create a package.json that holds which libraries/packages to install. "npm -i <package>" to install

i don't know if there is a node/javascript equivalent of "black", i use prettier which is a formatter at the text editor level. the closest equivalent i can think of for black is "standardjs": 2 spaces, no semicolons, single quotes.

unfortunately because of where javascript is now you can go down a whole rabbithole of additional things. there is babel, there is typescript. those are not needed to deploy to lambda but just know that they exist. there is no defined structure for a project other that node_modules folder that is created by npm that stores packages.

i'm about to head off to bed so i'm sure other people can chime in further but one thing i will say is you will probably want something that combines your code into one file so you can just deploy that single file into lambda otherwise you will also have to upload an accompanying node_modules folder which can get large and bloated. what you'd want to use is something like rollup, webpack, or parcel. additionally you'll want to learn about how to include libraries/packages via "require('package name')" or using import via babel.

keep in mind i think almost everything is up to date except the last paragraph. unfortunately given the javascript scene there is a new "hotness" that comes out every so often. for example, the original tool people used to combine all files into one was browserify, which gave way to webpack, then rollup, then parcel (all the latter 3 are still popular). there is a lot of poo poo unfortunately which makes it hard for beginners (in the node/javascript space) to get a handle on all the stuff. hell even experienced people have a hard time so they just stay with what they know.

i think this is a basic outline and i think amazon has some sample lambda you can copy to test out stuff.

Strong Sauce fucked around with this message at 12:05 on Jan 25, 2020

# ? Jan 25, 2020 12:03

Dominoes: Sep 20, 2007

Pile-on to Strong Sauce's post:

- I agree on using Prettier as a Black equivalent.
- You can consider a project directory that has a node_modules directory (ie make `package.json` and run `npm install`) equivalent to a venv
- I highly recommend using Typescript; it combines modern JS, combined with a static type system.
- Use Webpack to allow use of Python-like import statements. It used to be a mess, but is now straightfwd to use.

Config can be a pain; let me know if you'd like starting config files.

# ? Jan 25, 2020 15:05

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

Dominoes posted:

- I highly recommend using Typescript; it combines modern JS, combined with a static type system.

Python typing developers often refer to Typescript for inspiration.

# ? Jan 25, 2020 17:34

Boris Galerkin: Dec 17, 2011; I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

Thanks for the advice.

I�m using yarn because it�s available in macports and npm isn�t. I don�t use homebrew. Is there a compelling enough reason for me to install homebrew just to install npm over just using yarn?

# ? Jan 26, 2020 09:44

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Boris Galerkin posted:

Thanks for the advice.

I’m using yarn because it’s available in macports and npm isn’t. I don’t use homebrew. Is there a compelling enough reason for me to install homebrew just to install npm over just using yarn?

No, yarn is superior last i checked.

Also I've never heard of a nodejs installation that doesn't come with npm, interesting.

# ? Jan 26, 2020 09:58

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

Osmosisch posted:

No, yarn is superior last i checked.

Also I've never heard of a nodejs installation that doesn't come with npm, interesting.

What are you using yarn for that npm doesn't do?

# ? Jan 26, 2020 10:13

Boris Galerkin: Dec 17, 2011; I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

Can yarn and npm coexist or is my computer going to meltdown if I install both?

# ? Jan 26, 2020 10:47

Strong Sauce: Jul 2, 2003; You know I am not really your father.

if you're not squeamish about curling and sh'ing a url then you can just grab nvm from their website. you can then install node, which will then also have npm. also my advice is to not use the macports/homebrew version of node/npm. i think i originally had it on homebrew and just ran into issues down the line. use nvm.

i don't know the latest diff between yarn/npm and if there is any it probably is irrelevant to what your needs are for deploying to lambda. npm has been significantly improved since yarn was released 3+ years to address facebook's issues with speed/security/consistency. yarn to me is another thing javascript beginners have to figure out and my advice would be to just skip it until you actually need it.

having yarn and npm to manage your node app is pointless and adds an extra yarn.lock file you don't need.

# ? Jan 26, 2020 11:30

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

There's no reason to not have both yarn and npm, just don't use both on the same project.

I don't think either is superior to the other nowadays.

# ? Jan 26, 2020 17:07

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

I haven't read this article yet, but just FYI yarn 2 is out and people are blowing up my Twitter timeline about it:

https://dev.to/arcanis/introducing-yarn-2-4eh1

So yarn might be superior again?

# ? Jan 26, 2020 17:20

Jazerus: May 24, 2011

yarn is generally better yes. it's pretty trivial to convert a project from npm to yarn or the other way, so just use the one that you feel has the better package management and CLI (which is basically always yarn, imo)

i'd also recommend typescript. even if you never manually annotate a type or engage with any of the other additional language features, having something to yell at you when you use the wrong types in standard and library functions is quite valuable.

Jazerus fucked around with this message at 18:24 on Jan 26, 2020

# ? Jan 26, 2020 17:45

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

Grump posted:

I haven't read this article yet, but just FYI yarn 2 is out and people are blowing up my Twitter timeline about it:

https://dev.to/arcanis/introducing-yarn-2-4eh1

So yarn might be superior again?

Yeah, looks like they fixed and added a lot of interesting stuff.

I'm particularly interested in trying out this normalized shell feature. Supporting multiple operating systems with package.json scripts is hell.

# ? Jan 26, 2020 18:22

smackfu: Jun 7, 2004

Osmosisch posted:

No, yarn is superior last i checked.

Also I've never heard of a nodejs installation that doesn't come with npm, interesting.

Yeah, I�m guessing it�s just only available bundled in node and not standalone.

I�m surprised yarn is available as a stand-alone download for that matter, isn�t it just another node package?

# ? Jan 26, 2020 19:27

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

Yarn still doesn't support npm audit fix, right?

# ? Jan 26, 2020 19:44

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 23:07

Boris Galerkin: Dec 17, 2011; I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

Turns out by the way that npm is available in macports after all, as �npm6�.

# ? Jan 27, 2020 08:35

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

«‹›277 »