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 »

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

MrMoo posted:

<head> doesn't execute scripts until fully loaded, hence the inlining of scripts for faster execution. The use of RAF is for at least one render, i.e. a pseudo-DOMReady() event handler.

setTimeout(0) is always useful as a yield function as Javascript is a co-operative environment in a single thread.

I only have my "critical" CSS inlined in head and a google maps script tag. There isn't much to execute there.
The body has a div with "loading..." and my spinner img in it. The last things in the body are that script and two external deferred scripts.

Even in the example they're not rendering anything, they're just adding a link tag into the head. Maybe requestAnimationFrame triggers some esoteric html5 rendering spec special case that makes it worth using?

They only reason I even started looking at that script was because it took Chrome 15 seconds to show the spinner when using requestAnimationFrame on a very slow connection while the other browsers showed it immediately.

# ? Mar 2, 2015 20:13

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 04:30

Space Whale: Nov 6, 2014

Just heard an odd idea for some one-off artsy webpage:

A single page of $size. Users can click at any point and start writing, and it will proceed to the left (maybe linebreak and then go down one line from below the point of the click when they hit the right edge of the screen) until they hit enter. It will be saved to the server so other users can see this and write their own notes. Read and write only, no delete; I assume the text would 'time out' and change color and eventually be removed over time.

Is there already some sort of API I can call to do this or is this going to be a case of roll-your-own with storing (x,y), drawing to the page, calculating distance to the right side of the page, etc?

# ? Mar 5, 2015 00:11

MrMoo: Sep 14, 2000

Space Whale posted:

Is there already some sort of API I can call to do this or is this going to be a case of roll-your-own with storing (x,y), drawing to the page, calculating distance to the right side of the page, etc?

For a start you need to work with a resolution independent co-ordinate system and test out what is going to be legible on all target devices.

A popular project has been implemented fridge magnets for letters and letting everyone play with them. I think I even posted one here like ten years ago.

MrMoo fucked around with this message at 00:49 on Mar 5, 2015

# ? Mar 5, 2015 00:45

Space Whale: Nov 6, 2014

Thanks! Now I'm on the right track at least.

# ? Mar 5, 2015 01:39

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

Wheany posted:

Even in the example they're not rendering anything, they're just adding a link tag into the head. Maybe requestAnimationFrame triggers some esoteric html5 rendering spec special case that makes it worth using?

One thing I learned recently: The minimum timeout for background tabs is 1 second in Chrome and Firefox, and the minimum timeout in general is 4ms.

4ms is fine, I don't care, but 1 second is too long if the user has a fast connection. Granted, if they open the tab in the background, they don't intend to look at it right away anyway, so they might not notice.

I also read this: http://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-dom-rescue

quote:

Scripts that are dynamically created and added to the document are async by default, they don�t block rendering and execute as soon as they download, meaning they could come out in the wrong order. However, we can explicitly mark them as not async
[...]
This gives our scripts a mix of behaviour that can�t be achieved with plain HTML. By being explicitly not async, scripts are added to an execution queue, the same queue they�re added to in our first plain-HTML example. However, by being dynamically created, they�re executed outside of
document parsing, so rendering isn�t blocked while they�re downloaded

Which sounds like it's exactly what I want, because I suspect part of the rendering delay is due to DOMContentReady firing very late. I haven't tested this yet, though.

e: Aww yiss, DOMContentLoaded 2.22s, load 48.74s (On Chrome, using GPRS network simulation), and the loading spinner starts quickly and not after 15 seconds.

Wheany fucked around with this message at 16:22 on Mar 9, 2015

# ? Mar 9, 2015 15:58

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

Wheany posted:

One thing I learned recently: The minimum timeout for background tabs is 1 second in Chrome and Firefox, and the minimum timeout in general is 4ms.

Except now I just learned that requestAnimationFrame is completely paused in background tabs, so it's even worse. And the example code just throws a ReferenceError: Undefined variable: requestAnimationFrame when run in Opera 12.

So I guess I'm using setTimeout even after all this.

And after testing for a bit it looks like in Chrome the a 0-timeout in a background tab is run after 200-500ms. Firefox runs it only after 2-3ms, Opera 12 and IE run after 16ms. I'm drawing my statistically significant conclusions with a sample size of about 3.

# ? Mar 9, 2015 17:10

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

rAF is for animations, which don't matter on non-visible documents. Using it for non-visual (or audio I guess) things is Not Recommended.

If you want a faster zero timeout, you can postMessage to yourself. That shouldn't have any delay imposed, it queues the event immediately.

# ? Mar 9, 2015 17:28

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

setTimeout(1); runs faster than setTimeout(0); in Chrome, IIRC.

# ? Mar 9, 2015 17:31

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

Subjunctive posted:

rAF is for animations, which don't matter on non-visible documents. Using it for non-visual (or audio I guess) things is Not Recommended.

And yet https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

# ? Mar 9, 2015 18:03

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

Wheany posted:

And yet https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

CSS is a visual thing.

# ? Mar 10, 2015 00:48

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

If the point is to start loading those files as quickly as possible without blocking the loading of the page, then having the callback never run until you switch to the tab doesn't help.

# ? Mar 10, 2015 09:49

Sepist: Dec 26, 2005; FUCK BITCHES, ROUTE PACKETS; Gravy Boat 2k

Edit: I'm dumb, div ==! img

Sepist fucked around with this message at 21:22 on Mar 12, 2015

# ? Mar 12, 2015 21:06

Diabolik900: Mar 28, 2007

Sepist posted:

Edit: I'm dumb, div ==! img

Please don't edit out your questions. Nobody else can learn from your mistakes that way.

And I'm pretty sure you also didn't have a period before a class name in your find().

# ? Mar 12, 2015 21:29

Sepist: Dec 26, 2005; FUCK BITCHES, ROUTE PACKETS; Gravy Boat 2k

Good point, here was my question:

Maybe I'm a little burned out at the moment, but I'm having trouble getting the desired results

code:


$(document).on('click', '.player-name-cell', function() {
 //get the player id
  var playerid = $(this).parent().find('player-add-cell').data('playerid');

<div class="ui-widget-content slick-row even active" style="top:0px">

<div class="slick-cell l0 r0 player-pos-cell">SG</div>
<div class="slick-cell l1 r1 player-name-cell active"> </div>
<div class="slick-cell l2 r2 player-game-cell"></div>
<div class="slick-cell l3 r3 player-salary-cell"></div>
<div class="slick-cell l4 r4 player-add-cell"><img class="add-button" id="a52b2c84-9c3d-4d6e-8a3b-10e75d11c2bc" data-playerid="a52b2c84-9c3d-4d6e-8a3b-10e75d11c2bc" src="../images/icon-add.png"></div>

</div>

When someone clicks on
<div class="slick-cell l1 r1 player-name-cell active"> </div> , I want var playerid to store a52b2c84-9c3d-4d6e-8a3b-10e75d11c2bc - what's the proper syntax I'm looking for here?

And this is what worked:

code:


		 $(document).on('click', '.player-name-cell', function() {
		 		
                //get the player id
                var playerid = $(this).parent().find("img").data("playerid");

Sepist fucked around with this message at 16:51 on Mar 13, 2015

# ? Mar 13, 2015 16:49

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

Sepist posted:

And this is what worked:

code:


		 $(document).on('click', '.player-name-cell', function() {
		 		
                //get the player id
                var playerid = $(this).parent().find("img").data("playerid");

You may also want to write the data into the thing you are clicking on as a data attribute so you don't have to do any traversal at all:

HTML code:

<div class="ui-widget-content slick-row even active" style="top:0px">

<div class="slick-cell l0 r0 player-pos-cell">SG</div>
<div class="slick-cell l1 r1 player-name-cell active" data-player-id="asdf..."> </div>
...

</div>

# ? Mar 14, 2015 02:04

cmykJester: Feb 16, 2011; by Nyc_Tattoo

I figured it out, thanks for the help

cmykJester fucked around with this message at 00:52 on Mar 17, 2015

# ? Mar 16, 2015 23:14

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

Try opening your code in a browser and stepping through it line-by-line in the developer tools. Pay close attention to the value of theArea.

# ? Mar 16, 2015 23:34

Dominoes: Sep 20, 2007

What's the purpose of declaring variables in Javascript? It isn't needed to specify a variable type and memory allocation, but is effectively required to keep variables in a local scope.

# ? Mar 17, 2015 00:05

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

Dominoes posted:

What's the purpose of declaring variables in Javascript? It isn't needed to specify a variable type and memory allocation, but is effectively required to keep variables in a local scope.

Yes, that is the point. You're specifying that you're talking about variable X in the local scope rather than the next variable X up the scope chain that shares that name.

# ? Mar 17, 2015 01:13

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

I don't have a good grasp on closures yet so someone please give me a hand with this.

I'm making AJAX calls to the Spotify API, and I want to put each response in its own DIV which is appended on the fly. So basically like this:

1. Append new DIV
2. AJAX request
3. As responses come in, put the results into the DIV from 1.

My code right now looks something like this (simplified) and it's not working for obvious reasons:

code:

var newDiv = $("#container").append("<div class='row'></div>"); // make a shiny new DIV
for(var i = 0; i < list.length; i++){ // iterate through a list
	jQuery.ajax({url: "https://api.spotify.com/v1/albums/" + list[i], complete: function(e, newDiv){ // for each item in list, AJAX request
		newDiv.append(e.responseJSON.data); // append response in DIV from earlier
	}});
}

Anony Mouse fucked around with this message at 00:50 on Mar 18, 2015

# ? Mar 18, 2015 00:48

Sedro: Dec 31, 2008

Take the second parameter newDiv out of your complete callback.

The official docs describe the complete function as:

pre:

complete
Type: Function( jqXHR jqXHR, String textStatus )

So you are trying to call textStatus.append but textStatus is just a string describing the HTTP response (e.g. "success" or "error").

Instead, by not re-defining newDiv, you will close over the newDiv in the outer scope and append all of your results to that one div.

The other javascript gotcha is when you close over the loop variable (in your case `i`) but your code does not have that issue.

# ? Mar 18, 2015 01:40

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

Anony Mouse posted:

I don't have a good grasp on closures yet so someone please give me a hand with this.

I'm making AJAX calls to the Spotify API, and I want to put each response in its own DIV which is appended on the fly. So basically like this:

1. Append new DIV
2. AJAX request
3. As responses come in, put the results into the DIV from 1.

My code right now looks something like this (simplified) and it's not working for obvious reasons:
code:
var newDiv = $("#container").append("<div class='row'></div>"); // make a shiny new DIV
for(var i = 0; i < list.length; i++){ // iterate through a list
	jQuery.ajax({url: "https://api.spotify.com/v1/albums/" + list[i], complete: function(e, newDiv){ // for each item in list, AJAX request
		newDiv.append(e.responseJSON.data); // append response in DIV from earlier
	}});
}

Do something like this:

JavaScript code:

function makeANewDivAndARequest() {
	var newDiv = $("#container").append("<div class='row'></div>"); // make a shiny new DIV
	for(var i = 0; i < list.length; i++){ // iterate through a list
		jQuery.ajax({url: "https://api.spotify.com/v1/albums/" + list[i], complete: function(e){ // for each item in list, AJAX request
			newDiv.append(e.responseJSON.data); // append response in DIV from earlier
		}});
	}
}

// from somewhere else
	
makeANewDivAndARequest();

Every time you call that function, it will make a new newDiv that will persist in the closure.

# ? Mar 18, 2015 08:08

Dominoes: Sep 20, 2007

Thermopyle posted:

Yes, that is the point. You're specifying that you're talking about variable X in the local scope rather than the next variable X up the scope chain that shares that name.

But why include it in the syntax at all? It feels like cruft.

# ? Mar 18, 2015 16:37

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

Dominoes posted:

But why include it in the syntax at all? It feels like cruft.

How else would you specify that a variable is shadowing one from an outer scope?

Edit: In a world where there's no var, what happens in the following program? Do you see how not having var could cause issues?

code:

for(i = 0; i < 10; i++)
	doThing(i);

function doThing(n) {
	for(i = 0; i < 20; i++)
		//do some stuff
}

HappyHippo fucked around with this message at 17:37 on Mar 18, 2015

# ? Mar 18, 2015 17:24

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Sedro posted:

Wheany posted:

Thanks guys, that was helpful. It also turns out I was completely misusing $.append(), which does NOT return the new appended element as I thought it did. Instead I have to create the element beforehand in order to keep a reference to it, and then append. Everything's working better now.

# ? Mar 19, 2015 08:48

Impotence: Nov 8, 2010; Lipstick Apathy

Can I ask some meteor.js questions here, or is it for client side JS?

# ? Mar 19, 2015 18:34

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

Go for it, Javascript is Javascript.

# ? Mar 19, 2015 19:20

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Anyone have any experience with HackReactor? I'm always suspicious of high job placement numbers, since I know all the ways schools can inflate those.

# ? Mar 19, 2015 20:16

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

Raskolnikov2089 posted:

Anyone have any experience with HackReactor? I'm always suspicious of high job placement numbers, since I know all the ways schools can inflate those.

Getting discussed right now: http://forums.somethingawful.com/showthread.php?threadid=3376083&pagenumber=361#lastpost

# ? Mar 19, 2015 21:05

qntm: Jun 17, 2009

I'm looking at a piece of code which says:

JavaScript code:

postCreate : function() {
    this.inherited(arguments);
    if (arguments._namesInUse) {
        this._namesInUse = arguments._namesInUse;
    }
    ...

Am I correct in thinking that it is impossible for the if statement to ever be executed?

# ? Mar 24, 2015 13:36

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

qntm posted:

I'm looking at a piece of code which says:
JavaScript code:
postCreate : function() {
    this.inherited(arguments);
    if (arguments._namesInUse) {
        this._namesInUse = arguments._namesInUse;
    }
    ...
Am I correct in thinking that it is impossible for the if statement to ever be executed?

No, this.inherited could add that property to the object it's passed.

# ? Mar 24, 2015 14:23

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

How can I defined prototype based classes nested inside of other classes? The following doesn't work:

JavaScript code:

function Outer(){
    
    this.i = 'outer instance value';
    
    alert(this.i);
    alert(this.p); // works
    
    new Inner();
    
    function Inner(){
        this.i = 'inner instance value';
        alert(this.i);
        alert(this.p); // undefined :(
    };
    Inner.prototype.p = 'inner protovalue';
};
Outer.prototype.p = 'outer protovalue';

new Outer();

(http://jsfiddle.net/euyd920x/)

The goal being to have a number of classes which all live inside the one function in order to prevent namespace pollution.

# ? Mar 24, 2015 23:31

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

If you move the new Inner() below Inner.prototype.p it works. I don't know why, exactly, but it's a fix!

# ? Mar 24, 2015 23:46

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

necrotic posted:

If you move the new Inner() below Inner.prototype.p it works. I don't know why, exactly, but it's a fix!

Ah... OK. The function definitions get 'hoisted' and are scoped throughout the block that they're declared in (so Inner() is available where new Inner() is called), but the property placed onto the prototype is only available below its definition. Thanks.

# ? Mar 24, 2015 23:50

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

Newf posted:

Ah... OK. The function definitions get 'hoisted' and are scoped throughout the block that they're declared in (so Inner() is available where new Inner() is called), but the property placed onto the prototype is only available below its definition. Thanks.

Oh wait, yeah. After looking at it again it make sense: the constructor is called before p is set on the prototype. Oops!

# ? Mar 24, 2015 23:52

kiwid: Sep 30, 2013

I'm looking for some type of JS library that will allow me to accomplish programmatically drawing lines between two side by side tables have have a one to many relationship (see image).

How do I achieve this? Is this even a JS thing or can it be accomplished with just CSS and HTML?

edit: Never mind. I found this: http://www.jsplumb.org/

Works exactly the way I want.

kiwid fucked around with this message at 16:56 on Mar 27, 2015

# ? Mar 27, 2015 15:33

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

So I'm trying to inculcate good habits by declaring variables in my for loops as so:

code:


 var finalArray = ["k", "j", "o", "p"];

  for(var y=0; y< finalArray.length; y++){
	  var Stuff = finalArray[y];
	  if(Stuff=="o"){
		  console.log(Stuff);
		  console.log("test is met");
		  Stuff = Stuff.toUpperCase();
	  }
  } //o

For some reason however, the above does not convert "o" toUpperCase when the test is met. The console.logs all happen, but Stuff.toUpperCase() seems to be a dead end.

Yet when I remove the var Stuff, everything is perfect

code:


 var finalArray = ["k", "j", "o", "p"];

  for(var y=0; y< finalArray.length; y++){
	  if(finalArray[y]=="o"){
		  console.log(Stuff);
		  console.log("test is met");
		  finalArray[y]= finalArray[y]toUpperCase();
	  }
  } //O

Any thoughts as to why? Typeof reveals both are strings.

# ? Mar 31, 2015 23:56

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

Raskolnikov2089 posted:

So I'm trying to inculcate good habits by declaring variables in my for loops as so:
code:
 var finalArray = ["k", "j", "o", "p"];

  for(var y=0; y< finalArray.length; y++){
	  var Stuff = finalArray[y];
	  if(Stuff=="o"){
		  console.log(Stuff);
		  console.log("test is met");
		  Stuff = Stuff.toUpperCase();
	  }
  } //o
For some reason however, the above does not convert "o" toUpperCase when the test is met. The console.logs all happen, but Stuff.toUpperCase() seems to be a dead end.

That code works for me in a fiddle: http://jsfiddle.net/r5pjby7s/

(At the end of the loop, Stuff will of course be "p", but "o" does get uppercased in the appropriate block.)

# ? Apr 1, 2015 00:17

DimpledChad: May 14, 2002; Rigging elections since '87.

The issue is that stuff is assigned to finalArray[y] by value, not by reference. So when you say Stuff = Stuff.toUppercase(), you are not mutating the original array. What you want is finalArray[y] = Stuff.toUpperCase();.

Also, small note of style: by convention, capital variable names in JavaScript are typically used only for constructor functions.

# ? Apr 1, 2015 00:20

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 04:30

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

DimpledChad posted:

The issue is that stuff is assigned to finalArray[y] by value, not by reference. So when you say Stuff = Stuff.toUppercase(), you are not mutating the original array. What you want is finalArray[y] = Stuff.toUpperCase();.

Also, small note of style: by convention, capital variable names in JavaScript are typically used only for constructor functions.

So I'm not changing the case of finalArray[y] in:

code:

Stuff = Stuff.toUpperCase();

I'm actually just reassigning what Stuff is pointing to, in this case a new string of letters?

# ? Apr 1, 2015 01:32

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

«‹›277 »