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 »

Malfeasible: Sep 10, 2005; The sworn enemy of Florin

peepsalot posted:

Chrome dev tools lets you edit js source of a remote website from within the browser, is there any way to just reload the page with those local modifications applied? Otherwise what is the loving point of letting you edit any of this in browser.

I use this sort of functionality to rapidly develop a fix for UI issues and test for cross browser compatibility. By developing in the browser first, when I actually do modify code and republish, I already know it works.

I don't know what you are trying to do, but if you are trying to customize your experience while accessing resources from a sever you don't contorl you might want to look into plugins like "Greasemonkey" for Firefox or "Tampermonkey" for Chrome. You can write custom scripts that run when the URL meets certain criteria, like a specific domain, page, or query string.

I am currently using Greasemonkey to periodically ping the server on a website I have to login to by reloading an image that is always in the header. This keeps my session from timing out. You can do lots of things and there are community scripts available that you might find useful.

# ? Aug 25, 2014 18:39

Adbot: ADBOT LOVES YOU

# ? Apr 26, 2024 10:08

Malfeasible: Sep 10, 2005; The sworn enemy of Florin

nexus6 posted:

I'm having an issue in Drupal which I'm pretty sure is JS related but I'm getting no errors or warning in the console at all so I have no idea where to look for a solution.

I have created a content type with a file field that allows unlimited values. When I upload a file I am expecting to be able to immediately upload another file.

but what actually happens is the upload box disappears, meaning I have to save the node and re-edit it in order to upload another file

both these examples have exactly the same content type settings, both running the same version of Drupal. I'm not getting any JS errors or anything. Any ideas on why this is happening?

JavaScript having access to the local file system is a scary thing, and there are security concerns that might complicate what you are doing. If you try to get too fancy you might trigger security mechanisms preventing your code from functioning as expected.

I ran into a problem trying to customize a file upload button. You can't use CSS to style it, but if you try to hide the native browser file upload button and use JavaScript to programatically trigger it, most browsers will freak out. The fix in my case was to create an HTML label and style it as a custom upload button, and link the label to the native browser button. If you click a label its associated input will also be clicked. That is how you can click on the text of a radio button to select it, instead of having to click on the actual radio button.

This might have nothing to do with your situation, but I just wanted to point out that this sort of thing can trigger security issues.

# ? Aug 25, 2014 19:01

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

I'm not trying to be fancy, I'm trying to get it to do its default functionality. Something appears to be blocking it, I can see that there should be a JS file being run that, for some reason, isn't. Since I'm not getting any console errors I'm at a loss to find out what is (or isn't) happening.

# ? Aug 26, 2014 17:26

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

nexus6 posted:

I'm not trying to be fancy, I'm trying to get it to do its default functionality. Something appears to be blocking it, I can see that there should be a JS file being run that, for some reason, isn't. Since I'm not getting any console errors I'm at a loss to find out what is (or isn't) happening.

That seems like an issue with Drupal that should be taken up in a related thread? Or maybe their support site.

# ? Aug 26, 2014 22:43

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Sounds pretty impossible to even start helping out without a test case or example to look at.

# ? Aug 27, 2014 01:58

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Malfeasible posted:

You can't use CSS to style it, but if you try to hide the native browser file upload button and use JavaScript to programatically trigger it, most browsers will freak out.

You can at least make it bigger and transparent (opacity: 0) and have it over another element that acts as a placeholder. Then when the user goes to click the placeholder, they will click on the transparent file select button instead.

# ? Aug 27, 2014 06:00

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Chenghiz posted:

Sounds pretty impossible to even start helping out without a test case or example to look at.

Tell me about it. It's a currently live client site so I can't just hand out admin access and since the problem is it's not doing what should be default functionality I can't really set up an example with recreating the site entirely.

# ? Aug 27, 2014 13:56

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

nexus6 posted:

Tell me about it. It's a currently live client site so I can't just hand out admin access and since the problem is it's not doing what should be default functionality I can't really set up an example with recreating the site entirely.

My guess is that a security exception is thrown and some piece of code is catching and discarding them. Try activating "Pause On Caught Exceptions" in Chrome and see what happens.

edit: this thing

Wheany fucked around with this message at 14:47 on Aug 27, 2014

# ? Aug 27, 2014 14:43

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Hmm, not getting anything illuminating. Getting a few 'Failed to execute 'webkitMatchesSelector'' errors but they don't seem to be unique to uploading files.

# ? Aug 27, 2014 17:27

0zzyRocks: Jul 10, 2001; Lord of the broken bong

I wrote a jQuery plugin to handle styling of a file input. Check it out, it hasn't been updated in a while but it may be of some use to you. https://github.com/ozzyogkush/jquery.styledFileInput

# ? Aug 29, 2014 00:08

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

0zzyRocks posted:

I wrote a jQuery plugin to handle styling of a file input. Check it out, it hasn't been updated in a while but it may be of some use to you. https://github.com/ozzyogkush/jquery.styledFileInput

I appreciate the thought, but...it hasn't been updated in over 2 years and there's still no documentation or even an example of what it does? :effort:

edit: oh there is an example.html, make it a live demo!

# ? Aug 29, 2014 00:11

pangstrom: Jan 25, 2003; Wedge Regret

Apologies, I am "learning javascript" by tweaking D3 examples and I'm trying my third, so basically I only barely understand javascript.

My second effort was:
http://bradybutterfield.com/musicGenreFDG/

My question is: if I had snapshots of the music genre map at 1980, 1981, 1982, etc. and wanted nodes and links to grow, shrink, appear and disappear, etc., how would I accomplish that?

(This is the closest example I could find but if it's going to lead me astray I'm not going to figure that out myself)
http://bost.ocks.org/mike/nations/

# ? Aug 29, 2014 16:35

Chilled Milk: Jun 22, 2003; No one here is alone,
satellites in every home

If anyone uses SublimeLinter with jQuery code could you post your SublimeLinter settings? Nothing I've tried seems to work.

# ? Aug 31, 2014 19:11

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

The Milkman posted:

If anyone uses SublimeLinter with jQuery code could you post your SublimeLinter settings? Nothing I've tried seems to work.

Is it not working at all, or just not doing something you expect? I use jquery and sublime linter with default settings and it works fine for me.

# ? Aug 31, 2014 21:27

Chilled Milk: Jun 22, 2003; No one here is alone,
satellites in every home

Chenghiz posted:

Is it not working at all, or just not doing something you expect? I use jquery and sublime linter with default settings and it works fine for me.

Yeah it's running but it's marking things like $ and document as not defined. So basically everything is red.

I'm using ST3 beta with the corresponding SublimeLinter if that makes a difference

# ? Sep 1, 2014 02:50

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

The Milkman posted:

Yeah it's running but it's marking things like $ and document as not defined. So basically everything is red.

I'm using ST3 beta with the corresponding SublimeLinter if that makes a difference

oh, yeah that's a thing. it doesn't like global variables. put this at the top of your file:

code:

/*global document: false, $: false */

and add in any other globals you want to not be flagged.

It assumes some by default but you have to add others. There might be a way to set these in setting but I'm not currently aware of it.

# ? Sep 1, 2014 03:35

Skiant: Mar 10, 2013

Chenghiz posted:

oh, yeah that's a thing. it doesn't like global variables. put this at the top of your file:
code:
/*global document: false, $: false */
and add in any other globals you want to not be flagged.

It assumes some by default but you have to add others. There might be a way to set these in setting but I'm not currently aware of it.

You can also configure this project wide by adding a .jshintrc file in the root of the said project.

# ? Sep 1, 2014 06:55

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I've got a ui that wants to be a bit pushy about encouraging users to use the numpad, but that would be super annoying (not to mention useless) for any users at a numpad-deficient laptop. Is there any way to determine whether a user's keyboard has a numpad?

# ? Sep 1, 2014 20:08

Alligator: Jun 10, 2009; LOCK AND LOAF

pangstrom posted:

Apologies, I am "learning javascript" by tweaking D3 examples and I'm trying my third, so basically I only barely understand javascript.

My second effort was:
http://bradybutterfield.com/musicGenreFDG/

My question is: if I had snapshots of the music genre map at 1980, 1981, 1982, etc. and wanted nodes and links to grow, shrink, appear and disappear, etc., how would I accomplish that?

(This is the closest example I could find but if it's going to lead me astray I'm not going to figure that out myself)
http://bost.ocks.org/mike/nations/

You should take a look at the three update examples, here http://bl.ocks.org/mbostock/3808218 here http://bl.ocks.org/mbostock/3808221 and here http://bl.ocks.org/mbostock/3808234. Here's a simple example using a force layout http://bl.ocks.org/mbostock/1095795.

Really the main thing is to refactor your code so you have an update function that takes in the data, d3 selections will do most of the heavy lifting for you.

# ? Sep 1, 2014 20:18

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

Newf posted:

I've got a ui that wants to be a bit pushy about encouraging users to use the numpad, but that would be super annoying (not to mention useless) for any users at a numpad-deficient laptop. Is there any way to determine whether a user's keyboard has a numpad?

code:

var hasNumpad = window.confirm("Click OK if you have a numpad. Otherwise, click cancel.");
// YOUR CODE HERE!!

Where should I send the invoice?

# ? Sep 1, 2014 20:18

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Lumpy posted:

code:

var hasNumpad = window.confirm("Click OK if you have a numpad. Otherwise, click cancel.");
// YOUR CODE HERE!!

Where should I send the invoice?

# ? Sep 3, 2014 12:12

pangstrom: Jan 25, 2003; Wedge Regret

Alligator posted:

You should take a look at the three update examples, here http://bl.ocks.org/mbostock/3808218 here http://bl.ocks.org/mbostock/3808221 and here http://bl.ocks.org/mbostock/3808234. Here's a simple example using a force layout http://bl.ocks.org/mbostock/1095795.

Really the main thing is to refactor your code so you have an update function that takes in the data, d3 selections will do most of the heavy lifting for you.

Thank you!

# ? Sep 3, 2014 14:03

Squack McQuack: Nov 20, 2013; by Modern Video Games

I'm new to Javascript and programming in general. I'm working on a space-themed tabletop game and I'm wondering about the proper way to set up constructors. First off, I have a Weapon constructor:

code:

function Weapon(label, cost, damage) {
	this.label = label;
	this.cost = cost;
	this.damage = damage;
}

Then, I have multiple types of weapons such as Gun, Laser, Missile, etc. All of these have different values for label, cost, and damage. I want to be able to create a "sub-constructor" (for lack of a better term) for each type of weapon. This way, I can establish that all Lasers have a cost of 1 and a damage of 5. Then I can create new instances of lasers and give them each unique labels:

code:

var laser1 = new Laser(somestuff);
// cost and damage values have already been set in Laser "sub-constructor"
// somehow give laser1 a unique label

I could probably just ditch the Weapon constructor and instead create separate constructors for Gun, Laser, etc, but I think it would be better to unify them all under Weapon just in case that helps me in the future.

# ? Sep 4, 2014 13:36

Skiant: Mar 10, 2013

Squack McQuack posted:

I'm new to Javascript and programming in general. I'm working on a space-themed tabletop game and I'm wondering about the proper way to set up constructors. First off, I have a Weapon constructor:
code:
function Weapon(label, cost, damage) {
	this.label = label;
	this.cost = cost;
	this.damage = damage;
}
Then, I have multiple types of weapons such as Gun, Laser, Missile, etc. All of these have different values for label, cost, and damage. I want to be able to create a "sub-constructor" (for lack of a better term) for each type of weapon. This way, I can establish that all Lasers have a cost of 1 and a damage of 5. Then I can create new instances of lasers and give them each unique labels:
code:
var laser1 = new Laser(somestuff);
// cost and damage values have already been set in Laser "sub-constructor"
// somehow give laser1 a unique label
I could probably just ditch the Weapon constructor and instead create separate constructors for Gun, Laser, etc, but I think it would be better to unify them all under Weapon just in case that helps me in the future.

All your questions about inheritance in Javascript are answered there: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

# ? Sep 4, 2014 15:26

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

Squack McQuack posted:

I'm new to Javascript and programming in general. I'm working on a space-themed tabletop game and I'm wondering about the proper way to set up constructors. First off, I have a Weapon constructor:
code:
function Weapon(label, cost, damage) {
	this.label = label;
	this.cost = cost;
	this.damage = damage;
}
Then, I have multiple types of weapons such as Gun, Laser, Missile, etc. All of these have different values for label, cost, and damage. I want to be able to create a "sub-constructor" (for lack of a better term) for each type of weapon. This way, I can establish that all Lasers have a cost of 1 and a damage of 5. Then I can create new instances of lasers and give them each unique labels:
code:
var laser1 = new Laser(somestuff);
// cost and damage values have already been set in Laser "sub-constructor"
// somehow give laser1 a unique label
I could probably just ditch the Weapon constructor and instead create separate constructors for Gun, Laser, etc, but I think it would be better to unify them all under Weapon just in case that helps me in the future.

Generally with games it's best to go with the simplest thing that works. Right now I'd say that would be:

code:

function makeLaser(label) {
	return new Weapon(label, 1, 5);
}

var laser1 = makeLaser("blaster");

Of course if at any point you find that approach lacking then refactor away. But try to avoid tumbling down the rabbit hole of building your own component system from scratch just to make a simple game.

# ? Sep 4, 2014 15:56

Squack McQuack: Nov 20, 2013; by Modern Video Games

Skiant posted:

All your questions about inheritance in Javascript are answered there: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

HappyHippo posted:

Generally with games it's best to go with the simplest thing that works. Right now I'd say that would be:
code:
function makeLaser(label) {
	return new Weapon(label, 1, 5);
}

var laser1 = makeLaser("blaster");
Of course if at any point you find that approach lacking then refactor away. But try to avoid tumbling down the rabbit hole of building your own component system from scratch just to make a simple game.

Perfect, thank you! I'll read over Skiant's link but I think HappyHippo's solution will do what I need it to.

# ? Sep 4, 2014 16:17

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

Any tips, recommended reading, suggested tools to step up my profiling/optimization game?

I have some particularly computationally expensive code that I am trying to optimize for speed. I've been using the built in dev tools in chrome browser to do CPU profiling, looking at which functions are taking up the most time and seeing if/how I can make them more efficient. The profile data representations given by chrome seem kinda clunky to me though, like I'm not seeing any info on a call count for functions, and the overall nested interface feels a bit tedious to navigate for complex code, etc.

I just feel like 'There's Got To Be A Better Way!'

# ? Sep 8, 2014 21:03

spiritual bypass: Feb 19, 2008; Grimey Drawer

This thing looks promising: http://spy-js.com/

Does your code do lots of scope traversal? Getting variables from above the current scope is a common source of JS performance problems. You could try making local copies if that's what's happening.

Does any of your program iterate over large sets of data that don't need to be processed in any particular order? Running the computations in parallel may help as well: http://adambom.github.io/parallel.js/

# ? Sep 9, 2014 15:10

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

rt4 posted:

This thing looks promising: http://spy-js.com/

Does your code do lots of scope traversal? Getting variables from above the current scope is a common source of JS performance problems. You could try making local copies if that's what's happening.

Does any of your program iterate over large sets of data that don't need to be processed in any particular order? Running the computations in parallel may help as well: http://adambom.github.io/parallel.js/

If you use Jetbrains IDE's, they integrate spy.js.

https://www.youtube.com/watch?v=vPIbwxzC5cU

# ? Sep 9, 2014 19:09

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

rt4 posted:

Does your code do lots of scope traversal? Getting variables from above the current scope is a common source of JS performance problems.

Anything can be slow in the right (wrong) situation, but modern engines have optimized upvar access *heavily*, in part because the function-literal module pattern relies on them so heavily. It shouldn't be more than 100% slower than a local variable access, and those are *very* fast.

I wouldn't rush to distort your code to avoid upvars, unless you've ruled out everything else. (Accessing globals can have different effects, sort of a different story.)

# ? Sep 9, 2014 20:54

Peanut and the Gang: Aug 24, 2009; by exmarx

Thermopyle posted:

If you use Jetbrains IDE's, they integrate spy.js.

https://www.youtube.com/watch?v=vPIbwxzC5cU

Whoooaaa. The source code following part is pretty cool.

# ? Sep 9, 2014 20:54

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Thermopyle posted:

If you use Jetbrains IDE's, they integrate spy.js.

https://www.youtube.com/watch?v=vPIbwxzC5cU

What the gently caress. :eek:

# ? Sep 9, 2014 21:24

spiritual bypass: Feb 19, 2008; Grimey Drawer

You should all be using IntelliJ, seriously. Worth every penny. Hopefully they'll add the upcoming CLion as an extension and make it the most comprehensive IDE around.

# ? Sep 9, 2014 21:30

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

rt4 posted:

You should all be using IntelliJ

I am

# ? Sep 9, 2014 21:37

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

Unfortunately spy.js chokes on js with React JSX in it.

# ? Sep 9, 2014 22:50

El Marrow: Jan 21, 2009; Everybody here is just as dead as you.

rt4 posted:

You should all be using IntelliJ, seriously. Worth every penny. Hopefully they'll add the upcoming CLion as an extension and make it the most comprehensive IDE around.

I second this. I was absolutely in love with Atom and Brackets for working in Node all day at work in our obscure framework. Once I found WebStorm, my entire workflow changed. The community typescript stubs are amazing. poo poo, I can even tweet from inside the IDE.

# ? Sep 10, 2014 12:06

Skiant: Mar 10, 2013

I've been using Sublime Text with a shitload of packages (working with Node and Angular mostly) so far and I'm extremely happy with it, but maybe I'm missing out on a special feature that would totally win me over?

# ? Sep 10, 2014 12:51

Tres Burritos: Sep 3, 2009

Thermopyle posted:

Unfortunately spy.js chokes on js with React JSX in it.

Yeah, I'm using Kendo and when I get to the part of the page I actually want to profile spy.js chokes.

# ? Sep 10, 2014 13:30

EAT THE EGGS RICOLA: May 29, 2008

Skiant posted:

I've been using Sublime Text with a shitload of packages (working with Node and Angular mostly) so far and I'm extremely happy with it, but maybe I'm missing out on a special feature that would totally win me over?

Give the free trial a shot. I use Sublime Text for lots of little stuff but it barely compares with a full-fledged IDE.

# ? Sep 10, 2014 13:58

Adbot: ADBOT LOVES YOU

# ? Apr 26, 2024 10:08

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

peepsalot posted:

Any tips, recommended reading, suggested tools to step up my profiling/optimization game?

I have some particularly computationally expensive code that I am trying to optimize for speed. I've been using the built in dev tools in chrome browser to do CPU profiling, looking at which functions are taking up the most time and seeing if/how I can make them more efficient. The profile data representations given by chrome seem kinda clunky to me though, like I'm not seeing any info on a call count for functions, and the overall nested interface feels a bit tedious to navigate for complex code, etc.

If it's computationally expensive, shove it to a WebWorker?

# ? Sep 12, 2014 06:42

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

«‹›277 »