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 »

Kekekela: Oct 28, 2004

v1nce posted:

regex101 is a great tool for explaining what's going on. I suggest you combine it with the above tutorials:
https://regex101.com/

I know I've already thanked you once, but after having spent the last 12 years buying into the "you've got a problem, you use regex, now you've got 2 problems" mantra, this has actually turned regexes into an amazing productivity booster for me. I'm pretty much using the site daily.

# ? Jun 5, 2015 11:19

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 09:02

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

Can you get the http status code in img tag load event listener?

You can use img.addEventListener('error', if the server's error response contains non-image data. But img.youtube.com returns an image in any case. The HTTP response is "404 OK" and the body of the response is this image:

So using this code:

JavaScript code:

var imgerror = function () {console.error(arguments)};

var imgok = function () {console.info(arguments)};

var img = document.createElement('img');

img.addEventListener('load', imgok, false);

img.addEventListener('error', imgerror, false);

document.body.appendChild(img);

img.src="https://img.youtube.com/vi/dQw4w9WgXcQ/4.jpg";

Only "imgok" is called, because the response, despite being 404, is a valid image.

If I change the img.src to "https://clowpenis.fart", imgerror is called.

# ? Jun 6, 2015 11:45

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

Is there a particular reason to avoid doing an XHR request on the image instead?

# ? Jun 6, 2015 12:41

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

Maluco Marinero posted:

Is there a particular reason to avoid doing an XHR request on the image instead?

It's a cross-origin request.

Edit: but now that you mention it, it is a greasemonkey script and that can use GM_xmlhttpRequest, which apparently allows for it.

Wheany fucked around with this message at 13:28 on Jun 6, 2015

# ? Jun 6, 2015 13:26

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

Might be a hacky overengineered fix, but you could compare a known 404 path image with the resulting img, but that'd be a pain in the rear end.

# ? Jun 6, 2015 23:02

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Maluco Marinero posted:

Might be a hacky overengineered fix, but you could compare a known 404 path image with the resulting img, but that'd be a pain in the rear end.

This doesn't do anything to solve the cross-origin issues. If you can't make an XHR request to the image url, you can't get the image bytes from that url to compare them to anything else.

# ? Jun 7, 2015 05:01

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

I'm not able to test this right now (mobile), but images can be embedded freely, there's no preflight CORS involved in image embedding so surely...

code:


img.src = knownFailPath;
img2.src = suspectPath;

...will give you access to the image file once it's loaded.

# ? Jun 7, 2015 05:31

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Maluco Marinero posted:

I'm not able to test this right now (mobile), but images can be embedded freely, there's no preflight CORS involved in image embedding so surely...
code:
img.src = knownFailPath;
img2.src = suspectPath;
...will give you access to the image file once it's loaded.

You can embed them in the page, but you're not allowed to read back the actual image contents unless it's CORS-allowed (at which point you could just do an XHR).

# ? Jun 7, 2015 06:10

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

Besides, there is no redirect to compare to.

The HTTP response is "404 OK" and the body is a valid image.

Not that it matters anymore, since I just used a GM_xmlhttpRequest HEAD request to get the status code.

# ? Jun 7, 2015 07:03

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

Is there no way of knowing if the location has changed except for polling it?

AFAIK, there are the events hashchanged that fires when the part after the # changes and popstate that fires when the user clicks the back button.

But if a script modifies the location by using pushState or replaceState, no event is generated(?)

Again, this is a Greasemonkey script, so if you're aware of anything there that accomplishes it, that would also help.

# ? Jun 7, 2015 07:15

Hughmoris: Apr 21, 2007; Let's go to the abyss!

I've been tasked with a project at work that is a bit outside of my skillset. I have most of it taken care of but I'm a bit stumped on one part. I have a webpage containing two strings that represent dates in the format of "MM/DD/YYYY HH:MM AM/PM". So I'll have:

code:

date1 = 06/18/2015 07:50 PM
date2 = 06/17/2015 09:00 AM

I need to know which of the variables contain the newest/latest date. Since my javascript skills are non-existent, I turned to google but I'm not turning up something I can follow and I don't have access to jQuery.

Any ideas how I can easily compare those dates?

# ? Jun 19, 2015 02:10

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

Hughmoris posted:

I've been tasked with a project at work that is a bit outside of my skillset. I have most of it taken care of but I'm a bit stumped on one part. I have a webpage containing two strings that represent dates in the format of "MM/DD/YYYY HH:MM AM/PM". So I'll have:
code:
date1 = 06/18/2015 07:50 PM
date2 = 06/17/2015 09:00 AM
I need to know which of the variables contain the newest/latest date. Since my javascript skills are non-existent, I turned to google but I'm not turning up something I can follow and I don't have access to jQuery.

Any ideas how I can easily compare those dates?

code:

new Date("06/18/2015 07:50 PM") > new Date("06/17/2015 09:00 AM")
> true
new Date("06/18/2015 07:50 PM") < new Date("06/17/2015 09:00 AM")
> false
new Date("06/18/2015 07:50 PM") == new Date("06/17/2015 09:00 AM")
> false

# ? Jun 19, 2015 02:30

obstipator: Nov 8, 2009; by FactsAreUseless

^^^that

Also for more advanced date parsing and comparisons, momentjs is a pretty good library.

# ? Jun 19, 2015 03:02

Hughmoris: Apr 21, 2007; Let's go to the abyss!

piratepilates posted:

code:

new Date("06/18/2015 07:50 PM") > new Date("06/17/2015 09:00 AM")
> true
new Date("06/18/2015 07:50 PM") < new Date("06/17/2015 09:00 AM")
> false
new Date("06/18/2015 07:50 PM") == new Date("06/17/2015 09:00 AM")
> false

Well, poo poo. My google skills are weak. Thank you.

# ? Jun 19, 2015 04:01

Sedro: Dec 31, 2008

Parsing that particular date format is implementation-defined, I believe, so make sure that works on all your target runtimes

# ? Jun 19, 2015 06:02

Hughmoris: Apr 21, 2007; Let's go to the abyss!

Sedro posted:

Parsing that particular date format is implementation-defined, I believe, so make sure that works on all your target runtimes

I was a little worried since the application uses IE8 but it ended up working like a champ.

I'm going to press my luck and ask a follow up question: How difficult is it to dynamically create checkboxes? When the webpage opens, I'll have a variable representing the amount of checkboxes needed. Currently I am just hardcoding the checkboxes, so sometimes I'll have an extra three or four that are taking up space and not needed.

# ? Jun 20, 2015 02:52

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

Hughmoris posted:

I was a little worried since the application uses IE8 but it ended up working like a champ.

I'm going to press my luck and ask a follow up question: How difficult is it to dynamically create checkboxes? When the webpage opens, I'll have a variable representing the amount of checkboxes needed. Currently I am just hardcoding the checkboxes, so sometimes I'll have an extra three or four that are taking up space and not needed.

JavaScript code:

var cb = document.createElement('input');
cb.type = 'checkbox';

document.getElementById('your-parent-element').appendChild(cb);

# ? Jun 20, 2015 08:17

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

What's going on in variable declarations like this? (From a Firefox addon.)

code:

 var { ActionButton } = require('sdk/ui/button/action');

When I try running a similar declaration in node I get Unexpected token {.

# ? Jul 2, 2015 21:32

Sedro: Dec 31, 2008

It's ES6 destructuring assignment equivalent to

code:

var ActionButton = require('sdk/ui/button/action').ActionButton;

# ? Jul 2, 2015 21:43

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

Newf posted:

What's going on in variable declarations like this? (From a Firefox addon.)
code:
 var { ActionButton } = require('sdk/ui/button/action');
When I try running a similar declaration in node I get Unexpected token {.

It's object destructuring, new in ES6, combined with module import through the require function. The require function is returning an object (since the file it's referring to is exporting an object), and this code is using object destructuring to only bind one variable from it.

# ? Jul 2, 2015 21:46

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

Great, thanks. It declares a var whose value is the property on the right hand side with the same name. Doesn't exactly seem to be worth the mental energy of the switch, but I guess it's a harmless enough piece that forces luddites like me to read the new documentation.

I decided to make a tiny firefox addon and it looks like I'm in for a bit of hurt.

The 'require' here is the same as that at requirejs.org, yeah? For clarification, when something like require('jquery') is called, that doesn't find/load jquery proper, but rather an altered version which 'exports' jquery's '$', yeah? So calling something like

code:

var { $ } = require('jquery');

might work similarly?

How can I get some tooling to parse / provide intellisense on these require-generated objects? Specifically, those belonging to the Firefox api? I've been poking around the FF add-on documentation but haven't seen a place to actually pull down the source for all of this stuff.

# ? Jul 3, 2015 00:02

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

Newf posted:

Great, thanks. It declares a var whose value is the property on the right hand side with the same name. Doesn't exactly seem to be worth the mental energy of the switch, but I guess it's a harmless enough piece that forces luddites like me to read the new documentation.

I decided to make a tiny firefox addon and it looks like I'm in for a bit of hurt.

The 'require' here is the same as that at requirejs.org, yeah? For clarification, when something like require('jquery') is called, that doesn't find/load jquery proper, but rather an altered version which 'exports' jquery's '$', yeah? So calling something like
code:
var { $ } = require('jquery');
might work similarly?

How can I get some tooling to parse / provide intellisense on these require-generated objects? Specifically, those belonging to the Firefox api? I've been poking around the FF add-on documentation but haven't seen a place to actually pull down the source for all of this stuff.

It's likely a CommonJS module rather than a requirejs type.

More here: http://addyosmani.com/writing-modular-js/

# ? Jul 3, 2015 00:35

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

Newf posted:

Great, thanks. It declares a var whose value is the property on the right hand side with the same name. Doesn't exactly seem to be worth the mental energy of the switch, but I guess it's a harmless enough piece that forces luddites like me to read the new documentation.

I decided to make a tiny firefox addon and it looks like I'm in for a bit of hurt.

quote:

The 'require' here is the same as that at requirejs.org, yeah?

Nope! RequireJS the package (RequireJS.org) is trying to accomplish the same goals but is a much more complicated way of doing it.

The require() function is actually CommonJS, which isn't a package or runtime but a standard way of doing things. There's also no runtime for it directly, but you write it in the same style and different runtimes or packages will handle it the way you're expecting it to be handled. Node.js has an internal implementation of CommonJS whenever you run node on a javascript file, Browserify is a program that will interpret CommonJS imports and concatenate them in to one package, and there are a few others along the same lines.

quote:

For clarification, when something like require('jquery') is called, that doesn't find/load jquery proper, but rather an altered version which 'exports' jquery's '$', yeah? So calling something like
code:
var { $ } = require('jquery');
might work similarly?

How can I get some tooling to parse / provide intellisense on these require-generated objects? Specifically, those belonging to the Firefox api? I've been poking around the FF add-on documentation but haven't seen a place to actually pull down the source for all of this stuff.

Yes and no. jQuery by default when linked attaches $ to the global scope. Putting jQuery in to a form where it can be retrieved through require() lets you bind it to a variable anywhere you want without having it bound on the global scope.

The destructuring there also isn't necessary and won't work, since jQuery's export will just be the $ object you do:

code:

var $ = require('jquery');

If jQuery's export was something like this:

code:

//jQuery.js

module.exports = {
    $: function(){},
    poopfart: 'balls'
}

Then you would be able to do the following:

code:

//myawesomeprogram.js

var {poopfart} = require('jquery');

Which will destructure the object returned by importing jquery (which has properties '$' and 'poopfart') and only bind the one that you have named (poopfart).

Doing var {$} = ... is trying to take the object returned by require('jquery') and binding the property named '$' (which doesn't exist I'm guessing) in that object to the local scope.

Of course I'm just assuming that's how jquery's module is exporting, and for all I know you might be right.

# ? Jul 3, 2015 00:40

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

piratepilates posted:

Of course I'm just assuming that's how jquery's module is exporting, and for all I know you might be right.

I was just making assumptions as well, but yours are obviously better informed and more likely correct. It remains though: jquery itself doesn't export a module, but instead makes $ globally available. So when talking about the jquery require module, we're actually referring to someone's repackaging of jquery, right?

Thanks again, both. I've made decent strides with js lately, but there always seems to be something totally foreign each new place that I look.

e: I guess not? From jquery,

JavaScript code:

if ( typeof module === "object" && typeof module.exports === "object" ) {
		// For CommonJS and CommonJS-like environments where a proper window is present,
		// execute the factory and get jQuery
		// For environments that do not inherently posses a window with a document
		// (such as Node.js), expose a jQuery-making factory as module.exports
		// This accentuates the need for the creation of a real window
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

Newf fucked around with this message at 02:13 on Jul 3, 2015

# ? Jul 3, 2015 02:07

excidium: Oct 24, 2004; Tambahawk Soars

I'm needing some help conceptualizing how I am going to layout my application. What I have is a screen mockup tool to drag/drop page layout and input elements. What I want to be able to do is preserve and save the design the user makes in a JSON file. This seems like it will be the easiest to accurately preserve a tree structure and read it back to re-render a previously saved state. I feel somewhat comfortable doing this in Angular if that helps at all.

I basically made this whole thing a few years back using a lot of jQuery/jQueryUI spaghetti code of functions but I am trying to resurrect it into a better structured app. Any conceptual ideas/suggestions for structure would be much appreciated.

# ? Jul 3, 2015 16:19

Mellow_: Sep 13, 2010

excidium posted:

I'm needing some help conceptualizing how I am going to layout my application. What I have is a screen mockup tool to drag/drop page layout and input elements. What I want to be able to do is preserve and save the design the user makes in a JSON file. This seems like it will be the easiest to accurately preserve a tree structure and read it back to re-render a previously saved state. I feel somewhat comfortable doing this in Angular if that helps at all.

I basically made this whole thing a few years back using a lot of jQuery/jQueryUI spaghetti code of functions but I am trying to resurrect it into a better structured app. Any conceptual ideas/suggestions for structure would be much appreciated.

I've never done such a thing, but I would try anchoring each piece to its top left bounds, and then when redrawing use those as your points to stick the relevant piece into place.

Someone with more knowledge than I should be able to answer you better, but that's what I would do in my limited experience.

Perhaps one could make it more accurate by storing all four bounds.

# ? Jul 4, 2015 01:35

excidium: Oct 24, 2004; Tambahawk Soars

AuxPriest posted:

I've never done such a thing, but I would try anchoring each piece to its top left bounds, and then when redrawing use those as your points to stick the relevant piece into place.

Someone with more knowledge than I should be able to answer you better, but that's what I would do in my limited experience.

Perhaps one could make it more accurate by storing all four bounds.

The layout is pretty easy actually - everything is just HTML in a Bootstrap grid so everything is controlled by adding sections/rows. Adding a new element is as easy as appending it to its target.

# ? Jul 4, 2015 03:47

RICHUNCLEPENNYBAGS: Dec 21, 2010

Is there some tool I can use to enforce a consistent house style? Having commits filled with switching back and forth between K&R and GNU indentation or whatever is driving me nuts (yes there are other workflow issues with people being able to just commit these to master without some sort of review but that's a different problem).

# ? Jul 5, 2015 21:11

sailormoon: Jun 28, 2014; fighting evil by moonlight
winning love by daylight

RICHUNCLEPENNYBAGS posted:

Is there some tool I can use to enforce a consistent house style? Having commits filled with switching back and forth between K&R and GNU indentation or whatever is driving me nuts (yes there are other workflow issues with people being able to just commit these to master without some sort of review but that's a different problem).

You can use JS Beautifier which has plugins for all the major text editors/IDEs. Just setup a configuration in a .jsbeautifyrc file that follows the team's standards and have everyone use it!

# ? Jul 5, 2015 21:25

Fish Ladder Theory: Jun 7, 2005

RICHUNCLEPENNYBAGS posted:

Is there some tool I can use to enforce a consistent house style? Having commits filled with switching back and forth between K&R and GNU indentation or whatever is driving me nuts (yes there are other workflow issues with people being able to just commit these to master without some sort of review but that's a different problem).

We use eslint-- it has a crazy array of rules you can use to define exactly how your code should be styled (along with the other things you'd expect from a linter)

http://eslint.org/docs/rules/

# ? Jul 5, 2015 21:47

RICHUNCLEPENNYBAGS: Dec 21, 2010

Wow, two good suggestions, thanks.

# ? Jul 6, 2015 01:29

Mellow_: Sep 13, 2010

Fish Ladder Theory posted:

We use eslint-- it has a crazy array of rules you can use to define exactly how your code should be styled (along with the other things you'd expect from a linter)

http://eslint.org/docs/rules/

Holy this has come a long way.

# ? Jul 6, 2015 22:31

geeves: Sep 16, 2004

I have a stupid angular question. I'm trying to get program ID from ng-init, but it's undefined because reasons. I can dump the scope object and the value is defined in the object, with the correct value, however trying to access it doesn't work.

code:

<ng-include src="'/partials/admin/admin-customize-states.html'" ng-init="editable=false;programId=${programId};" ></ng-include>

My controller:

code:

.controller('adminCustomizeStates', ['$scope', 'main', 'admin', function ($scope, main, admin) {
    console.log($scope); // programId exists and the value is what I expect it to be!
    console.log("program 1: " + $scope.programId); // but I'm undefined here because gently caress you.
    admin.getCustomStates($scope.programId, function (data) {

Now, I can get around this by wrapping everything in $scope.$watch("programId", function(){....} but I wonder why I should have to use this work around. For another module I have identical code for the first several lines as above that doesn't give me undefined params.

# ? Jul 17, 2015 13:11

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Be careful with logging $scope and interpreting the result - the behaviour of the debugger can be more confusing than enlightening. Specifically, the log will show you the value of the $scope object when you clicked the arrow to expand it, not what the value was when the log statement ran.

Chances are the id is being set sometime after this code runs.

# ? Jul 19, 2015 04:17

geeves: Sep 16, 2004

Jabor posted:

Be careful with logging $scope and interpreting the result - the behaviour of the debugger can be more confusing than enlightening. Specifically, the log will show you the value of the $scope object when you clicked the arrow to expand it, not what the value was when the log statement ran.

Chances are the id is being set sometime after this code runs.

I'm just irked with the inconsistency more. I've run into things like this with JS many times in the past. I just went through everything and changed methods to make sure everything runs after the page loads. Everything is fine and back to normal.

# ? Jul 19, 2015 17:20

mrbotus: Apr 7, 2009; Patron of the Pants

Long story short, I downloaded some Chinese bloatware. I couldn't figure out how to uninstall because the characters wouldn't load properly on my capitalist dog windows 7, so I ended up just deleting the whole thing. Now instead of a javascript iframe with advertisements for handbags and iphones, it's just an empty box. Does anyone know where the root of this would be? I can see the javascript when I open up firebug, but I don't know how to make it stop.

# ? Jul 20, 2015 05:56

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

"Flatten and reinstall" is usually the best course of action when cleaning up malware. Back up anything you want to keep first, of course.

# ? Jul 20, 2015 10:09

RICHUNCLEPENNYBAGS: Dec 21, 2010

nickmeister posted:

Long story short, I downloaded some Chinese bloatware. I couldn't figure out how to uninstall because the characters wouldn't load properly on my capitalist dog windows 7, so I ended up just deleting the whole thing. Now instead of a javascript iframe with advertisements for handbags and iphones, it's just an empty box. Does anyone know where the root of this would be? I can see the javascript when I open up firebug, but I don't know how to make it stop.

Write an extension that overwrites the functions of their JS.

OK, not really. But I don't think your uninstall worked. Why not try malware removal tools?

# ? Jul 23, 2015 03:44

Impotence: Nov 8, 2010; Lipstick Apathy

nickmeister posted:

Long story short, I downloaded some Chinese bloatware. I couldn't figure out how to uninstall because the characters wouldn't load properly on my capitalist dog windows 7, so I ended up just deleting the whole thing. Now instead of a javascript iframe with advertisements for handbags and iphones, it's just an empty box. Does anyone know where the root of this would be? I can see the javascript when I open up firebug, but I don't know how to make it stop.

Before you flatten and reinstall, I'm actually curious: ctrl shift a -> plugins, anything?

# ? Jul 23, 2015 04:09

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 09:02

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

What's the plan on module support in the browser? How's that going to work?

I mean, I know how to do it right now with something like webpack or browserify, but I assume eventually browsers will support doing something with the import keyword.

# ? Jul 23, 2015 19:03

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

«‹›277 »