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 »

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

Maluco Marinero posted:

This is borne out in the experience of getting this thing performant: https://listium.com/@thomasdavis/3069/netflix-top-100-romance-movies ] - you better

That reminds me of this react excel-like data grid component I just saw this morning.

I haven't looked at anything other than the examples, so I don't know how it performs, but it looks like it has a ton of features.

# ? Nov 29, 2017 21:43

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 06:05

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

Giga Gaia posted:

I've had to do more JS recently and I'm realizing I've sort of fallen out of the loop on some things. I like physical textbooks now and then, so is 'java script:' The Definitive Guide still the de facto book on Javascript? Any others I should consider?

e: 'java script:' has a word filter. Weird.

Since I'm posting things I just saw, I'll point out https://javascript.info/

Yes, I'm ignoring your "physical textbooks" requirement, but it does look like you can get it as a PDF. I haven't done anything but click through to skim a couple of pages, but it looks like an alright book.

# ? Nov 29, 2017 21:46

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Thermopyle posted:

That reminds me of this react excel-like data grid component I just saw this morning.

I haven't looked at anything other than the examples, so I don't know how it performs, but it looks like it has a ton of features.

Yeah, we used react-virtualized, but we've been on React since it came out (from Angular previously), so we've drifted between home grown & optimised, then fixed-data-table, then react-virtualized. I don't do work on it anymore but I learned a poo poo ton about React through it.

# ? Nov 29, 2017 21:49

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Giga Gaia posted:

I've had to do more JS recently and I'm realizing I've sort of fallen out of the loop on some things. I like physical textbooks now and then, so is 'java script:' The Definitive Guide still the de facto book on Javascript? Any others I should consider?

e: 'java script:' has a word filter. Weird.

I'm a big fan of http://eloquentjavascript.net/
online and paperback version available

# ? Nov 29, 2017 22:59

Giga Gaia: May 2, 2006; 360 kickflip to... Meteo?!

Thermopyle posted:

Since I'm posting things I just saw, I'll point out https://javascript.info/

Yes, I'm ignoring your "physical textbooks" requirement, but it does look like you can get it as a PDF. I haven't done anything but click through to skim a couple of pages, but it looks like an alright book.

Hey I'll take whatever looks good and is up to date.

streetlamp posted:

I'm a big fan of http://eloquentjavascript.net/
online and paperback version available

Also added to my bookmarks. Cheers.

# ? Nov 29, 2017 23:36

smackfu: Jun 7, 2004

Does anyone have a good training video or such on RxJS and observables etc? Because they make me feel dumb and I am just copying and pasting code from the web to get stuff done. I just wrapped my head around promises and now they are old news.

# ? Nov 30, 2017 00:34

reversefungi: Nov 27, 2003; Master of the high hat!

Giga Gaia posted:

I've had to do more JS recently and I'm realizing I've sort of fallen out of the loop on some things. I like physical textbooks now and then, so is 'java script:' The Definitive Guide still the de facto book on Javascript? Any others I should consider?

e: 'java script:' has a word filter. Weird.

If you want to know JavaScript like the back of your hand, I highly recommend You Don't Know JavaScript by Kyle Simpson. I'm not aware of any other book that goes into as much depth and detail, and there seems to be print versions available on Amazon. It's also available for free online, and really goes into some nuts and bolts of the language that are pretty interesting.

# ? Nov 30, 2017 01:31

lunar detritus: May 6, 2009

smackfu posted:

Does anyone have a good training video or such on RxJS and observables etc? Because they make me feel dumb and I am just copying and pasting code from the web to get stuff done. I just wrapped my head around promises and now they are old news.

egghead has a couple of pretty good courses about RxJS that really helped me understand better how it all works.

# ? Nov 30, 2017 01:50

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

Big fan of You Don't Know JS: https://github.com/getify/You-Dont-Know-JS

It's open source and well maintained so you won't end up with a print copy of a book that will be horribly outdated at some point.

# ? Dec 1, 2017 00:40

Ocean Book: Sep 27, 2010; - hi

Is this the place for jquery questions too? I see there's a jquery thread but it's almost exactly a year dead.

I'm trying to make it so by div-buttons in a super-div are active after I've replaced the super-div to something else and then back again. It seems like I'm supposed to use some variant of on("click",~something~, function(){...} to make it so my events remain active after doing this, but I'm confused on how to make it work. Particularly confusing because I want to have several div-buttons with different IDs remain active after doing this back and forth swap. They need to have different IDs because they do different things when clicked.

Here's the relevant part of the code -

quote:

$("#map").on("click",function(){
$("#large").replaceWith('<div id="large"> <div class="circle" id="town1">Town 1</div> <div class="circle" id="town2">Town 2</div> <div class="circle" id="town3">Town 3</div> </div>');
});

the town1, town2, town3 divs are all active as buttons when you first load the thing, but when you switch the thing back and forth they don't respond.

Here's the whole thing on codepen if that helps

https://codepen.io/pond3/pen/JOxdKb

Thanks if anyone knows how this is accomplished.

# ? Dec 3, 2017 01:18

duz: Jul 11, 2005; Come on Ilhan, lets go bag us a shitpost

Event delegation is what it's called. Since events bubble up, you put them on the body and then look at what was the source. That way the watcher is on the body and doesn't go away when the dom changes. In jQuery, that's done as

JavaScript code:

$("body").on("click", "#map", mapHandler);

# ? Dec 3, 2017 02:09

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

duz posted:

Event delegation is what it's called. Since events bubble up, you put them on the body and then look at what was the source. That way the watcher is on the body and doesn't go away when the dom changes. In jQuery, that's done as
JavaScript code:
$("body").on("click", "#map", mapHandler);

You can get more specific than that as well if it makes life easier:

code:

$('body').on('click', 'div.circle', someFunc)

Bonus points for putting data attributes on your elements so you don't have to figure out which element it is.

# ? Dec 3, 2017 06:54

mystes: May 31, 2006

I'm drawing to draw crosshairs on a canvas that are centered around the cursor by using the "difference" composite operation and drawing a horizontal and vertical rectangle. I thought that doing this twice would result in the original image, but for some reason this only seems to work for the vertical rectangle; the horizontal rectangles end up being gray after they are drawn the second time. Am I misunderstanding how this works? Or is there just a bug in my code?

https://jsfiddle.net/d3ao82v6/

Edit: This seems to work on firefox, but not in chrome?

mystes fucked around with this message at 14:10 on Dec 3, 2017

# ? Dec 3, 2017 14:05

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.

mystes posted:

I'm drawing to draw crosshairs on a canvas that are centered around the cursor by using the "difference" composite operation and drawing a horizontal and vertical rectangle. I thought that doing this twice would result in the original image, but for some reason this only seems to work for the vertical rectangle; the horizontal rectangles end up being gray after they are drawn the second time. Am I misunderstanding how this works? Or is there just a bug in my code?

https://jsfiddle.net/d3ao82v6/

Edit: This seems to work on firefox, but not in chrome?

getBoundingClientRect may return subpixel coordinates. The "top" part of the bounding rect isn't returning an integer (e.g. on my machine it's returning 21.2)

If you round the results in the getMousePos method, your example works fine:

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX-rect.left),
y: Math.round(evt.clientY-rect.top)
}
}

However, I would think that if you perform the draw operation twice with the difference operation, you should get the same image back. I don't know why the subpixel coordinate is making it so if you apply the same draw with difference twice, you get a different result.

In general you're better off rounding all coordinates you give to canvas drawing - drawing using subpixel precision on canvas generally just looks bad even if it works.

# ? Dec 3, 2017 15:31

mystes: May 31, 2006

That fixed it, thanks!

# ? Dec 3, 2017 15:37

Ocean Book: Sep 27, 2010; - hi

Thanks lumpy and duz. That makes sense to use the class instead of the ID to reference multiple things (doh). So, the 2nd thing I'm putting in the on function is what I want to become active again after the replaceWith? If I reference an element that contains elements, will they all become active again or just the parent?

For some reason when I put it in as suggested (I think), my button no longer functions. I have this

quote:

$("#map").on("click", "div.circle",function(){
$("#large").replaceWith('<div id="large"> <div class="circle" id="town1">Town 1</div> <div class="circle" id="town2">Town 2</div> <div class="circle" id="town3">Town 3</div> </div>');
});

and when I click on the #map div, nothing happens.

Edit - I was looking at the API and it make more sense than it did before. But looks like I could have 4 things in the on function - event, selector, data, and handler. It looks like right now I just have event, data, and handler. I see a lot of example on functions with just 3 things like I have, and it says that the selector is assumed to be null if there's only 3. Is it possible that I need to have a non-null selector for this to work?

ee - While making this edit I found this, I'm really working myself in circles. I found this example code

code:

$( '#my-unordered-list' ).on( 'click', 'li', function( event ) {
  console.log( this ); // logs the list item that was clicked
});

$( '<li>a new list item!</li>' ).appendTo( '#my-unordered-list' );

I don't get how this one would work though. It looks like the appendTo isn't even connected to the on function or the handler.

Ocean Book fucked around with this message at 01:30 on Dec 6, 2017

# ? Dec 5, 2017 01:27

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Hey everybody, does anyone have any recommendations for their favorite service that adds a comment section to your page? I have a set of WebGL tutorials that's turning into something like Wikipedia and I want the articles to have at least rudimentary comment sections like those do, for planning edits. Something that would generate notifications so you know right away on your phone if someone quotes you without having to return to the website would be nice.

# ? Dec 5, 2017 07:36

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

Ocean Book posted:

Thanks lumpy and duz. That makes sense to use the class instead of the ID to reference multiple things (doh). So, the 2nd thing I'm putting in the on function is what I want to become active again after the replaceWith? If I reference an element that contains elements, will they all become active again or just the parent?

For some reason when I put it in as suggested (I think), my button no longer functions. I have this

and when I click on the #map div, nothing happens.

That code is saying "respond to clicks events on DIV elements with the class 'circle' that are inside the element with the ID 'map' by executing this function" but there are no DIVs with the class circle in the one that toggles to the town map. If you remove that filter it seem to work fine.

quote:

Edit - I was looking at the API and it make more sense than it did before. But looks like I could have 4 things in the on function - event, selector, data, and handler. It looks like right now I just have event, data, and handler. I see a lot of example on functions with just 3 things like I have, and it says that the selector is assumed to be null if there's only 3. Is it possible that I need to have a non-null selector for this to work?

ee - While making this edit I found this, I'm really working myself in circles. I found this example code

I don't get how this one would work though. It looks like the appendTo isn't even connected to the on function or the handler.

https://jsfiddle.net/crzkhwf8/ you're right, it's not. All that does is listen for clicks on child LI elements of the list and, separately, append a child element to the list. It's demonstrating that you can effectively add parent-element-scoped (instead of document-scoped) event listeners for elements that don't exist yet using .on and a filtering selector.

Also, use code tags, please.

# ? Dec 5, 2017 15:54

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

Dumb Lowtax posted:

Hey everybody, does anyone have any recommendations for their favorite service that adds a comment section to your page? I have a set of WebGL tutorials that's turning into something like Wikipedia and I want the articles to have at least rudimentary comment sections like those do, for planning edits. Something that would generate notifications so you know right away on your phone if someone quotes you without having to return to the website would be nice.

Disqus is what I have heard recomended all over the place.

# ? Dec 5, 2017 17:27

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

It used to be the standard but I've seen a number of sites move away from it as it starting injecting interstitial ads at a ridiculous rate into the comment feed. Not even good or relevant ads, just the incredibly obnoxious clickbait/image ads.

# ? Dec 5, 2017 21:30

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

It's a real bitch when a company has to start making money from places other than investors.

# ? Dec 5, 2017 22:19

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Thermopyle posted:

It's a real bitch when a company has to start making money from places other than investors.

Of course. I don't think the way they did it endeared people much though. It essentially flipped from a real good and free comment system to obnoxious ad vector in a very short amount of time, attempting to strong arm site owners into upgrading to paid immediately. I don't think it left a good taste in people's mouths, even if the price isn't particularly exorbitant for a comment system in low traffic sites.

All the 'free' web services are starting to realize they need their cut I guess.

# ? Dec 5, 2017 22:32

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

Maluco Marinero posted:

Of course. I don't think the way they did it endeared people much though. It essentially flipped from a real good and free comment system to obnoxious ad vector in a very short amount of time, attempting to strong arm site owners into upgrading to paid immediately. I don't think it left a good taste in people's mouths, even if the price isn't particularly exorbitant for a comment system in low traffic sites.

All the 'free' web services are starting to realize they need their cut I guess.

Yeah, I wasn't defending them, just saying that it's often not done well.

# ? Dec 5, 2017 23:43

Sedro: Dec 31, 2008

Thermopyle posted:

It's a real bitch when a company has to start making money from places other than investors.

Do you sell to your users, or do you sell your users?

http://donw.io/post/github-comments/

# ? Dec 6, 2017 01:17

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

I wish more places would take my money for their services.

When the internet (and I) was young, the idea of paying for a website (or service) was sacrilege, but nowadays I just want to give someone money to give me good services.

# ? Dec 6, 2017 01:40

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

Sedro posted:

Do you sell to your users, or do you sell your users?

http://donw.io/post/github-comments/

That has downsides I don't like, like the email subscription issues.

However, it would probably not be too terribly difficult to whip up a generic comment system that offered the same features.

# ? Dec 6, 2017 01:46

Ocean Book: Sep 27, 2010; - hi

Thanks Monkeymon. I tried replacing my quotes with code tags, but on one there is a line that's (sloppily, I imagine) very long and it goes off the edge of my screen, and presumably others. I remember there is a way to have multiple lines function as a single line which I likely should start using for things like that.

I see now I totally misread the original posts responding to me, and I didn't make the first $( ) into $("body") and use the selector to specify what was being clicked, which was the whole message of what I was being told. I think I had a backwards idea of what I was supposed to do with that.

Now I have it properly as

code:

$("body").on("click" ,"#map" , function(){....});

which initially didn't work. But! I realized I should probably set up all of my other replaceWith on.click functions to be formatted the same way, because maybe it was navigating away from the map which was screwing up the events before my properly formatted navigating to the map.

And it worked! Horray! Thanks all

# ? Dec 6, 2017 01:54

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

So I've got an array of JSX elements. Now this array was not created via mapping a data array, it was sort of hand crafted from lots of conditionals.

Once the array has been fully constructed I want to add a line to give each element a key, because React likes keys.

I have tried doing:

code:

columns.map((col, i) => Object.assign(col, {key: `fm-col-${i}`}));

But unfortunately it throws a fit and says: "Cannot assign to read only property 'key' of object"

So how do I post-construction, perform a mapping update on my array to add a key to jsx element?

# ? Dec 8, 2017 19:39

porksmash: Sep 30, 2008

Does this work?

code:

columns.map((Col, i) => <Col key={`fm-col-${i}`} />)

# ? Dec 8, 2017 19:56

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

There's also React.cloneElement if you need to preserve refs or anything weird.

# ? Dec 8, 2017 20:08

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

porksmash posted:

Does this work?

code:

columns.map((Col, i) => <Col key={`fm-col-${i}`} />)

Seems to get real mad at this.

code:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

necrotic posted:

There's also React.cloneElement if you need to preserve refs or anything weird.

Thank you for this, it led me on the right path and this works:

code:

columns = columns.map((Col, i) => React.cloneElement(Col, {key: `fm-col-${i}`}));

Knifegrab fucked around with this message at 22:47 on Dec 8, 2017

# ? Dec 8, 2017 22:43

'ST: Jul 24, 2003; "The world has nothing to fear from military ambition in our Government."

Be careful with using indexes as keys. It can lead to bad performance or incorrect rendering if you make frequent changes to your columns. https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

I imagine that your columns are more stable than your rows, but if you have a unique logical value to use (like the column name) that would be preferable as a key.

# ? Dec 10, 2017 17:27

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

'ST posted:

Be careful with using indexes as keys. It can lead to bad performance or incorrect rendering if you make frequent changes to your columns. https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

I imagine that your columns are more stable than your rows, but if you have a unique logical value to use (like the column name) that would be preferable as a key.

Good things keys are going away!

(thanks for the link tho)

Though I don't understand how you could possibly use a key on data that is database driven (a dynamic list of rows for example). You cannot give a "unique" name to each row, you have to use some sort of index or something.

# ? Dec 10, 2017 18:03

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

Knifegrab posted:

Good things keys are going away!

(thanks for the link tho)

Though I don't understand how you could possibly use a key on data that is database driven (a dynamic list of rows for example). You cannot give a "unique" name to each row, you have to use some sort of index or something.

Use the primary key of the DB row as your key? Seems to work pretty good for the database....

# ? Dec 10, 2017 18:40

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Lumpy posted:

Use the primary key of the DB row as your key? Seems to work pretty good for the database....

I could expect data from the server that has no unique key, especially if the data isn't actually database backed... (This happens a lot in my current product).

# ? Dec 10, 2017 22:27

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

Knifegrab posted:

I could expect data from the server that has no unique key, especially if the data isn't actually database backed... (This happens a lot in my current product).

Oh, I assumed your data was DB backed when you said:

Knifegrab posted:

Though I don't understand how you could possibly use a key on data that is database driven...

My bad.

# ? Dec 11, 2017 15:19

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Lumpy posted:

Oh, I assumed your data was DB backed when you said:

My bad.

Yeah poor wording on my choice, but my question is still, in the case of non-database driven data, without an inherit unique key/col, is index keying still a bad thing?

# ? Dec 12, 2017 18:21

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

Knifegrab posted:

Yeah poor wording on my choice, but my question is still, in the case of non-database driven data, without an inherit unique key/col, is index keying still a bad thing?

It's still bad as the key is meant to establish an identity between the object and the DOM. The index position in an array is not an identity, it's a position. If you re-arrange the objects, it's not obvious to the framework the object has changed, as there is still something in array[x]. It will often work out, but sometimes will lead to strange bugs.

# ? Dec 12, 2017 18:24

Dogcow: Jun 21, 2005

At worst if there really is no data or combination of data you can guarantee is unique you can just use a GUID library to generate unique IDs as necessary. It�s unlikely to cause performance issues unless you have like 50,000+ rows and are not virtualizing them.

# ? Dec 12, 2017 18:41

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 06:05

Pollyanna: Mar 5, 2005; Milk's on them.

Is defining functions in a function expensive in any way? I had the idea to compartmentalize the logic of a complicated function by breaking its logic into functions defined within its scope, I.e. nested constantly and poo poo, so that those functions don�t clutter up wherever the parent function is used. Is there a reason not to define a function inside another function, even if it�s only used in that parent function?

# ? Dec 13, 2017 18:22

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

«‹›277 »