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 »

huhu: Feb 24, 2006

What am I missing here? In react I have an image with two events...

code:

onMouseEnter={() => this.onHover(true)}
onMouseLeave={() => this.onHover(false)}

and onHover is...

code:

  onHover = (isHovered) => {
    console.log('setting state', isHovered)
    this.setState({ isTileHovered: isHovered });
  }

When I enter the image I get "setting state true", "setting state false" then when I mouse out, I get "setting state false" again.

# ? Dec 22, 2017 04:45

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 08:56

Dogcow: Jun 21, 2005

huhu posted:

What am I missing here? In react I have an image with two events...
code:
onMouseEnter={() => this.onHover(true)}
onMouseLeave={() => this.onHover(false)}
and onHover is...
code:
  onHover = (isHovered) => {
    console.log('setting state', isHovered)
    this.setState({ isTileHovered: isHovered });
  }
When I enter the image I get "setting state true", "setting state false" then when I mouse out, I get "setting state false" again.

Does the hover cause any new element to be displayed? Sounds like maybe something is appearing on top of the element with the handlers attached so that mouse leave is immediately triggered.

# ? Dec 22, 2017 05:05

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

huhu posted:

What am I missing here? In react I have an image with two events...
code:
onMouseEnter={() => this.onHover(true)}
onMouseLeave={() => this.onHover(false)}
and onHover is...
code:
  onHover = (isHovered) => {
    console.log('setting state', isHovered)
    this.setState({ isTileHovered: isHovered });
  }
When I enter the image I get "setting state true", "setting state false" then when I mouse out, I get "setting state false" again.

I remember solving a similar problem by instantiating the events.

code:

onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}

That way react knows that the attribute didn't change, otherwise it has to de-instantiate and re-instantiate the event on every update which causes weird behaviour.

e- something like...

code:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { isTileHovered: false };
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
  }

  onMouseEnter() {
    this.setState({ isTileHovered: true });
  }

  onMouseLeave() {
    this.setState({ isTileHovered: false });
  }
}

Nolgthorn fucked around with this message at 20:34 on Dec 22, 2017

# ? Dec 22, 2017 20:24

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

You will also have an issue using the second before it is declared. Functions are basically magically declared first, where if you are assigning things it does happen in order.

code:

class blah {
	public stuff1 = this.doStuff(); // this will work
	public stuff2 = this.doStuff2(); // this will throw errors

	public function doStuff() {
		return 1;
	}

	public doStuff2 = () => {
		return 2;
	}
}

# ? Dec 22, 2017 21:16

Shrimpy: May 18, 2004; Sir, I'm going to need to see your ticket.

I'm about to inherit a project that currently has little-to-no testing and as I'd like to fix that as I continue development. I'll likely be able to cover a lot of the cases with simple unit tests, but the project does have a lot of browser-based dependencies that I'd prefer to write additional functional tests for rather than constantly stubbing out the window.

The current tests are a combination of tape and testling, but considering that the testling website has a big banner that says "Testling is currently not working. We're working to fix it!" it doesn't seem like this is the best path to continue down. Some reading has pointed me in the direction of Mocha/Webdriver.io (since the Selenium interface is attractive), but I don't know if I'm just setting myself up with subpar tools or not. The code itself will be extremely primitive JavaScript (no Promises, async, etc.)

Any advice or guidance would be appreciated.

# ? Dec 23, 2017 01:39

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Shrimpy posted:

I'm about to inherit a project that currently has little-to-no testing and as I'd like to fix that as I continue development. I'll likely be able to cover a lot of the cases with simple unit tests, but the project does have a lot of browser-based dependencies that I'd prefer to write additional functional tests for rather than constantly stubbing out the window.

The current tests are a combination of tape and testling, but considering that the testling website has a big banner that says "Testling is currently not working. We're working to fix it!" it doesn't seem like this is the best path to continue down. Some reading has pointed me in the direction of Mocha/Webdriver.io (since the Selenium interface is attractive), but I don't know if I'm just setting myself up with subpar tools or not. The code itself will be extremely primitive JavaScript (no Promises, async, etc.)

Any advice or guidance would be appreciated.

Ideally, you would decouple as much logic as possible from the actual DOM, so you can test all of that without any idea it's a web page.

# ? Dec 23, 2017 02:11

Shrimpy: May 18, 2004; Sir, I'm going to need to see your ticket.

Skandranon posted:

Ideally, you would decouple as much logic as possible from the actual DOM, so you can test all of that without any idea it's a web page.

That's my intention, though part of this will require DOM manipulation and checking browser compatibility, so I'm kind of stuck using a browser or something browser-like at some point in the process.

# ? Dec 23, 2017 02:22

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

Shrimpy posted:

That's my intention, though part of this will require DOM manipulation and checking browser compatibility, so I'm kind of stuck using a browser or something browser-like at some point in the process.

Testing in multiple browsers is typically slow and also difficult. How many legacy browsers are you supporting? I'd suggest having them run on Jenkins. But, blah. Really I'd rather figure out what parts of the code are browser-sensitive and fix them.

# ? Dec 23, 2017 05:30

huhu: Feb 24, 2006

Dogcow posted:

Does the hover cause any new element to be displayed? Sounds like maybe something is appearing on top of the element with the handlers attached so that mouse leave is immediately triggered.

This was it, thanks!

Another question, any best practice tips for dealing with Adjacent JSX elements returning from a function? Wrapping it in a div tag feels a little smelly. Or, for example for a ternary operator, wrapping both returns in the parent tag feels a bit the opposite of DRY.

# ? Dec 23, 2017 22:18

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

huhu posted:

This was it, thanks!

Another question, any best practice tips for dealing with Adjacent JSX elements returning from a function? Wrapping it in a div tag feels a little smelly. Or, for example for a ternary operator, wrapping both returns in the parent tag feels a bit the opposite of DRY.

If you are using 16+ you can render/ return arrays:

code:

const blah = () => {[
 <h1>wow</h1>,
 <p>no wrapper</p>
]}

# ? Dec 23, 2017 23:58

Roadie: Jun 30, 2013

Lumpy posted:

If you are using 16+ you can render/ return arrays:
code:
const blah = () => {[
 <h1>wow</h1>,
 <p>no wrapper</p>
]}

Using React.Fragment with 16.2.x is much simpler for most cases.

code:

const blah = () => (
  <React.Fragment>
   <h1>there's a wrapper?</h1>
   <p>no there isn't, it's not a DOM element</p>
  </React.Fragment>
)

# ? Dec 24, 2017 09:33

PaganGoatPants: Jan 18, 2012; TODAY WAS THE SPECIAL SALE DAY!; Grimey Drawer

Shrimpy posted:

That's my intention, though part of this will require DOM manipulation and checking browser compatibility, so I'm kind of stuck using a browser or something browser-like at some point in the process.

Perhaps Selenium/Nightwatch for the DOM stuff?

# ? Dec 24, 2017 12:47

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

Roadie posted:

Using React.Fragment with 16.2.x is much simpler for most cases.
code:
const blah = () => (
  <React.Fragment>
   <h1>there's a wrapper?</h1>
   <p>no there isn't, it's not a DOM element</p>
  </React.Fragment>
)

How is that simpler than the Array?

# ? Dec 24, 2017 18:23

wide stance: Jan 28, 2011; If there's more than one way to do a job, and one of those ways will result in disaster, then he will do it that way.

necrotic posted:

How is that simpler than the Array?

No comma separator between each element, declarative, easier to copy and paste elsewhere.

# ? Dec 24, 2017 19:24

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

Can you push to a frament variable and return that later? I'd prefer the consistency of array usage if not.

# ? Dec 24, 2017 19:37

theLamer: Dec 2, 2005; I put the lame in blame

code:

this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);

Am I the only one who thinks this kind of paradigm is bad?

EDIT: As in, either use bind everywhere or don't use 'this.method'.

# ? Dec 24, 2017 19:55

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.

theLamer posted:

code:
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
Am I the only one who thinks this kind of paradigm is bad?

EDIT: As in, either use bind everywhere or don't use 'this.method'.

The purpose of bind is to keep current scope when function fires. If a mouse event handler fires, the scope will ordinarily be the document unless you bind it - so this seems to be the classical use of ".bind(this)".

# ? Dec 24, 2017 21:20

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

And assigning it like that before use is better for React. Binding in render would look like a new function to the virtual DOM.

# ? Dec 24, 2017 22:01

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

It's better to bind a function than it is to create a new function on every execution. Especially in React especially on event declarations. React has a couple of failings in this way, Vue you don't have to do bindings like that.

# ? Dec 25, 2017 21:16

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

I prefer that React requires you do be explicit on your function bindings.

# ? Dec 25, 2017 21:47

Maldoror: Oct 5, 2003; by R. Guyovich; Nap Ghost

This is a completely stupid little thing that isn't really even an issue (no one has ever fixed it in over a decade) but it's bugging the absolute poo poo out of me, and I can't code.

I ran Microsoft's tracelog.exe for the Win7 WDK. Then I created a html report with the tracerpt.exe utility.

The HTML that this creates uses old lovely 10 year old Microsoft Javascript that was designed for IE8/9. It still displays on modern browsers, but the STUPID LITTLE THING that is bugging me is the image icon toggles don't work.

In other words, when you click the "+" node (which is actually open.gif):

...it's supposed to use close.gif to change it to "-" when opened. But it doesn't work (even on IE8/9). It does open, but still displays open.gif:

The Javascript that should handle this looks like this:

code:

function folder(d)
{
  try{
    var temp;
    var i = document.all("e_" + d.id);

    if (d.style.display == 'none') {
      d.style.display = '';
    }else{
      d.style.display = 'none';
    }
    if (i.nodeName == "img") {
      temp = i.src;
      i.src = i.altImage;
      i.altImage = temp;
    }else{
      var s = document.all("alt_" + i.id);
      temp = i.innerHTML;
      i.innerHTML = s.innerHTML;
      s.innerHTML = temp;
    }
  } catch(e) {
  }
}

This actually originally had if (i.nodeName == "IMG") instead of if (i.nodeName == "img"), which made it so either no images loaded at all, or the entire page wouldn't load (even in IE8/9).

The <img> tags look like this:

code:

<img border="0" style="margin-right: 5px" altImage="close.gif" id="e_c_17" src="open.gif">

So close.gif is supposed to be loading from the folder(d) function, using altImage. But the code is broken and it doesn't work.

Does anyone know how to fix it?

Here's the whole HTML in context:

https://tommycatkins.com/2017/tracelogs/tracelog_shape_host.html
https://tommycatkins.com/2017/tracelogs/

# ? Dec 26, 2017 05:32

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Maldoror posted:

ARGH I HATE JAVASCRIPT!

When I stepped through in Chrome, i.nodeName displayed as "IMG", so maybe you need to allow for both? IE: if (i.nodeName === "img" || i.nodeName === "IMG") {

# ? Dec 26, 2017 06:00

mystes: May 31, 2006

Maldoror posted:

This is a completely stupid little thing that isn't really even an issue (no one has ever fixed it in over a decade) but it's bugging the absolute poo poo out of me, and I can't code.

I ran Microsoft's tracelog.exe for the Win7 WDK. Then I created a html report with the tracerpt.exe utility.

The HTML that this creates uses old lovely 10 year old Microsoft Javascript that was designed for IE8/9. It still displays on modern browsers, but the STUPID LITTLE THING that is bugging me is the image icon toggles don't work.

In other words, when you click the "+" node (which is actually open.gif):

...it's supposed to use close.gif to change it to "-" when opened. But it doesn't work (even on IE8/9). It does open, but still displays open.gif:

The Javascript that should handle this looks like this:
code:
function folder(d)
{
  try{
    var temp;
    var i = document.all("e_" + d.id);

    if (d.style.display == 'none') {
      d.style.display = '';
    }else{
      d.style.display = 'none';
    }
    if (i.nodeName == "img") {
      temp = i.src;
      i.src = i.altImage;
      i.altImage = temp;
    }else{
      var s = document.all("alt_" + i.id);
      temp = i.innerHTML;
      i.innerHTML = s.innerHTML;
      s.innerHTML = temp;
    }
  } catch(e) {
  }
}
This actually originally had if (i.nodeName == "IMG") instead of if (i.nodeName == "img"), which made it so either no images loaded at all, or the entire page wouldn't load (even in IE8/9).

The <img> tags look like this:
code:
<img border="0" style="margin-right: 5px" altImage="close.gif" id="e_c_17" src="open.gif">
So close.gif is supposed to be loading from the folder(d) function, using altImage. But the code is broken and it doesn't work.

Does anyone know how to fix it?

Here's the whole HTML in context:

https://tommycatkins.com/2017/tracelogs/tracelog_shape_host.html
https://tommycatkins.com/2017/tracelogs/

I don't think you can access custom attributes using object property syntax, so you probably need to change i.altImage to use getattribute and setattribute.

# ? Dec 26, 2017 06:05

Maldoror: Oct 5, 2003; by R. Guyovich; Nap Ghost

Skandranon posted:

When I stepped through in Chrome, i.nodeName displayed as "IMG", so maybe you need to allow for both? IE: if (i.nodeName === "img" || i.nodeName === "IMG") {

That makes it so that it displays a broken image for "altImage", and the broken image has properties as "undefined":

The same effect is achieved with only if (i.nodeName == "IMG") and doing a search and replace on the entire html of "<img" to "<IMG"

# ? Dec 26, 2017 07:08

Maldoror: Oct 5, 2003; by R. Guyovich; Nap Ghost

mystes posted:

I don't think you can access custom attributes using object property syntax, so you probably need to change i.altImage to use getattribute and setattribute.

I repeat, I can't code. So I'm afraid I have to be a fool and ask, "How do I do that?" :baby:

# ? Dec 26, 2017 07:11

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Maldoror posted:

That makes it so that it displays a broken image for "altImage", and the broken image has properties as "undefined":

The same effect is achieved with only if (i.nodeName == "IMG") and doing a search and replace on the entire html of "<img" to "<IMG"

Well, part of your problem is the code that is supposed to do the swap isn't being run when you click the icon. So you probably want it to do SOMETHING, the problem is now the code inside that IF block. I would suspect how it is supposed to swap out the src is no longer valid. mystes is probably right, you can't grab altImage like it is doing, so when that section DOES run, it's getting undefined. Since you know for that section it should always be close.gif and open.gif, maybe you can just hardcode those for now?

Skandranon fucked around with this message at 08:19 on Dec 26, 2017

# ? Dec 26, 2017 08:14

Maldoror: Oct 5, 2003; by R. Guyovich; Nap Ghost

Part of the problem may be that the original gifs were linked as "res://wdc.dll/contents.gif". This only works in IE. And, it seems to behave the same whether the images are linked as actual images, or as that wdc.dll bullshit. In other words, changing if (i.nodeName == "IMG") to if (i.nodeName == "img") has the exact same problem behavior with the gifs linked as "res://wdc.dll/blah.gif".

I can see on this technet blog that this dude ran this back in January 2012 (in Win7/IE9 I'm guessing) and seems to have correctly working output.

It could be that this Microsoft Shitcode only works properly on IE9.

# ? Dec 26, 2017 08:33

mystes: May 31, 2006

Maldoror posted:

I repeat, I can't code. So I'm afraid I have to be a fool and ask, "How do I do that?"

Ah, I missed that part.
Change:

code:

    if (i.nodeName == "img") {
      temp = i.src;
      i.src = i.altImage;
      i.altImage = temp;

code:

    if (i.nodeName.toLowerCase() == "img") {
      temp = i.src;
      i.src = i.getAttribute("altImage");
      i.setAttribute("altImage",temp);

and it should work (at least it works for me on the desktop version of chrome).

# ? Dec 26, 2017 13:16

Maldoror: Oct 5, 2003; by R. Guyovich; Nap Ghost

It works!

Thank you so much dude.

# ? Dec 26, 2017 15:36

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

I'm interested in capturing and parsing incoming email. For the time being I'm using a 3rd party service but it would be really nice if I could just very simply receive and parse email myself. With a DNS MX record set up, how difficult is it in a node app to capture an email?

Once I have captured the email, is it difficult to take it apart? I found this module, which may do what I want however it doesn't talk about how to get the email to begin with.

https://github.com/nodemailer/mailparser

# ? Jan 2, 2018 14:26

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

The same authors offer a SMTP server implementation. oops

https://nodemailer.com/extras/smtp-server/

# ? Jan 2, 2018 14:47

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

I have a 2D array of objects that I'm trying to compress as much as possible into a URI component string that I can use as a query string on a URL. Given the height and width, it has a lot of elements, and I don't know how much further I can go realistically.

My 2D array setup:

code:

var width = 33; //33 
var height = 18; //33
// make 2d array

var tree = new Array(height);

for(i=0; i<height; ++i){

    tree[i] = new Array(width);

}

// fill array with defaults

for(i=0; i<tree.length; ++i){

    for(j=0; j<tree[i].length; ++j){

        tree[i][j] = {
            s:0, // string char code
            c:[0], // color indices
            i:0, // current color index
            r:[0,0], // rate of animation
            b:2 // bgColor color index
        }

    }

}

I stringify the object array with json then I use the lz-string js library to compress it further into a URI component string. Just populating the array with "empty" default values ends up being 2071 characters. Not really good for a URL query string!

code:

var treeStringified = JSON.stringify(tree);

var compressed = LZString.compressToEncodedURIComponent(treeStringified);
console.log(compressed);
console.log(compressed.length); 
string = LZString.decompressFromEncodedURIComponent(compressed);
console.log(string);
console.log(string.length);

Any ideas on how to compress it even more?

# ? Jan 9, 2018 04:58

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

Don't use JSON, you'll probably want a custom format you encode/decode to. If speed isn't a concern you could go two step: transform the hashes to arrays with keys mapping to fixed indexes. JSON + LZMA might work for you then.

# ? Jan 9, 2018 05:31

lunar detritus: May 6, 2009

LP0 ON FIRE posted:

Any ideas on how to compress it even more?

zlib seems to compress it to ~200-300 characters (after encoding it to Base64)

https://jsfiddle.net/tpkn3fsg/

lunar detritus fucked around with this message at 05:50 on Jan 9, 2018

# ? Jan 9, 2018 05:45

Lemon King: Oct 4, 2009; im nt posting wif a mark on my head

LP0 ON FIRE posted:

I have a 2D array of objects that I'm trying to compress as much as possible into a URI component string that I can use as a query string on a URL. Given the height and width, it has a lot of elements, and I don't know how much further I can go realistically.

My 2D array setup:

Might be the long way around but use an array buffer (tree.buffer) and convert that into a string, then you may get better compression from your lz library.
https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
https://developers.google.com/web/updates/2014/08/Easier-ArrayBuffer-String-conversion-with-the-Encoding-API

Lemon King fucked around with this message at 07:19 on Jan 9, 2018

# ? Jan 9, 2018 07:13

Roadie: Jun 30, 2013

LP0 ON FIRE posted:

Any ideas on how to compress it even more?

Use buffer, set up each field as an unsigned int of appropriate length, get a string from the buffer, and compress that.

JavaScript code:

const Buffer = require('buffer/').Buffer

const WIDTH = 33
const HEIGHT = 18
const ENTRY_BYTES = 9

let storage = Buffer.alloc(WIDTH * HEIGHT * ENTRY_BYTES)

// fill array with defaults

for (let i = 0; i < HEIGHT; ++i) {
  for (let j = 0; j < WIDTH; ++j) {
    // string char code
    storage.writeUInt8(0, i * j * ENTRY_BYTES + 0)

    // color indices
    storage.writeUInt32(0 /* convert from an array here */, i * j * ENTRY_BYTES + 1)

    // current color index
    storage.writeUInt8(0, i * j * ENTRY_BYTES + 5)

    // rate of animation
    storage.writeUInt8(0, i * j * ENTRY_BYTES + 6)
    storage.writeUInt8(0, i * j * ENTRY_BYTES + 7)

    // bgColor color index
    storage.writeUInt8(2, i * j * ENTRY_BYTES + 8)
  }
}

console.log(storage.toString('hex'))

Note that I probably got the offsets wrong.

# ? Jan 9, 2018 09:26

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Wow thank you for the responses. I'm sure all of these would be helpful. And here I was thinking I was maybe hopeless. Even that 200-300 characters is impressive.

# ? Jan 9, 2018 14:43

Murrah: Mar 22, 2015

Has anyone done Wes Bos's Node course by chance? Any thoughts?

# ? Jan 12, 2018 22:17

Thom ZombieForm: Oct 29, 2010; I will eat you alive
I will eat you alive
I will eat you alive

Murrah posted:

Has anyone done Wes Bos's Node course by chance? Any thoughts?

No, but there is a sale on udemy right now and they have node courses

# ? Jan 13, 2018 00:22

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 08:56

-Anders: Feb 1, 2007; Denmark. Wait, what?

It seems like Udemy always has a sale on.

I'm currently going through this course on Node.js.

I'm about halfway through, and so far it's been a bit of ES6, and a lot of npm packages that does different kinds of stuff. I'm not entirely sure it's any good, so maybe shop around for some other stuff? I don't feel like I've gotten a lot out of it, but it was like USD 12 so I don't think I've been robbed. It's like 25 hours worth of stuff.

What I would have probably tried to get, had I known a little more than I did when I purchased it, I would have looked for something that went a bit deeper in less different stuff. Right now it feels like I've just been shown a lot of tools, and how they apply in one specific instance.f

# ? Jan 13, 2018 00:41

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

«‹›277 »