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 »

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

I need some optimization done to an application exclusively for the iPad 3rd gen which displays retina quality panoramas using javascript and html 5. It works smoothly up until I activate a popup that has a "swipe view" gallery of 5 images. After closing the window and moving the panorama around, I have some slowness for about 5 seconds. If there is only one image inside that popup and I close the window, it runs fine.

I'm thinking this may have to do with the way garbage collection works in javascript. I read up on delete since I want to get rid of the element that is created, but I learned this is just deletes the reference to the object:

http://stackoverflow.com/questions/742623/deleting-objects-in-javascript

Setting the inner html to nothing like el.innerHTML = "" also seems to have no effect. I made sure the variable el was defined outside the function that makes it into a span element.

My goal is to wipe these images from memory right away after the window is closed. Any insight?

# ? Aug 7, 2012 22:31

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 05:29

dizzywhip: Dec 23, 2005

You don't have any access to the garbage collector from JavaScript, and you can't manage memory manually. You just have to let it do its thing. If you have access to the underlying JavaScript engine (which you might if you're using a web view in a cocoa app, not sure though) you might be able to interact with the garbage collector.

The better solution would be to figure out how to write your JavaScript and HTML to be more efficient in the first place. It's hard to give specific advice without knowing more about the implementation, but you might try pre-loading the images in the popup and keeping them in the DOM but leaving them hidden until you need them.

# ? Aug 8, 2012 01:56

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

Gordon Cole posted:

..you might try pre-loading the images in the popup and keeping them in the DOM but leaving them hidden until you need them.

That's a great idea by itself. It's a good point that I have some extra memory to just always hold those. Although I don't know how this could work in the case where there are multiple buttons loading different images. Maybe I could preload all of them and keep selected ones visible, but I'm afraid that may slow down performance anyway or crash my app!

# ? Aug 8, 2012 17:42

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

LP0 ON FIRE posted:

That's a great idea by itself. It's a good point that I have some extra memory to just always hold those. Although I don't know how this could work in the case where there are multiple buttons loading different images. Maybe I could preload all of them and keep selected ones visible, but I'm afraid that may slow down performance anyway or crash my app!

You are checking all this out with this, right: https://developers.google.com/chrome-developer-tools/docs/heap-profiling ?

# ? Aug 8, 2012 21:15

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

I'm playing around with an application idea I have, and I was planning on making it an offline prototype, focus on the HTML5 side of it, and then work on making it sync with a server after I have this end working well.

I've been looking at Barebones + Underscore and it looks like a pretty decent toolkit for MVC, but there's also an awful lot of frameworks out there it seems. I haven't really had any experience with this aspect of javascript development so I was wondering what people thought of the frameworks available and if there are any standouts from personal experience. Figure I may as well ask the question before I get too deep into one framework.

# ? Sep 5, 2012 07:26

smug forum asshole: Jan 15, 2005

Backbone is, indeed, quite solid. We use it at work.

# ? Sep 5, 2012 11:43

dizzywhip: Dec 23, 2005

Maluco Marinero posted:

I haven't really had any experience with this aspect of javascript development so I was wondering what people thought of the frameworks available and if there are any standouts from personal experience. Figure I may as well ask the question before I get too deep into one framework.

I highly recommend AngularJS. We've been using it at work for a new web app and it's fantastic. It's just so easy and fun to use. Backbone is great too, but it doesn't give you as much as Angular does. You'll have more control with Backbone, but you'll need to implement more yourself.

# ? Sep 5, 2012 21:43

TildeATH: Oct 21, 2010; by Lowtax

Gordon Cole posted:

I highly recommend AngularJS. We've been using it at work for a new web app and it's fantastic. It's just so easy and fun to use. Backbone is great too, but it doesn't give you as much as Angular does. You'll have more control with Backbone, but you'll need to implement more yourself.

I've been looking at Angular, too, it sure seems like fun.

# ? Sep 5, 2012 22:16

prom candy: Dec 16, 2005; Only I may dance

I'm making a front-end only web app that's going to need to manage a lot of animations and interactions, are there any frameworks that are geared towards that sort of thing?

# ? Sep 6, 2012 00:52

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

prom candy posted:

I'm making a front-end only web app that's going to need to manage a lot of animations and interactions, are there any frameworks that are geared towards that sort of thing?

There's a lot of kinds of "animations" and "interactions". Is it something like you need a global clock to time against, to keep everything in sync and up to par? What kind of tradeoffs do you want to make? Optimize for lots of small, transient, one-off animations? Lots of permanent animations? Optimize for ease of use? Do you care about custom easing curves beyond Penner's standard ones?

Do you need to prioritize certain kinds of animations, like when you're tracking the user's cursor?

# ? Sep 6, 2012 01:24

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

AngularJS looks pretty sweet. As a side effect it looks like Angular's style with templating lines up well with hamlpy's output, so I can still use that for my HTML, which is nice.

# ? Sep 6, 2012 03:09

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

I'm getting a bit deeper into JavaScript and I was wondering if anyone had any suggestions for reading about anonymous functions, object literal usage, and general patterns for advanced programming?

# ? Sep 6, 2012 03:30

prom candy: Dec 16, 2005; Only I may dance

Suspicious Dish posted:

There's a lot of kinds of "animations" and "interactions". Is it something like you need a global clock to time against, to keep everything in sync and up to par? What kind of tradeoffs do you want to make? Optimize for lots of small, transient, one-off animations? Lots of permanent animations? Optimize for ease of use? Do you care about custom easing curves beyond Penner's standard ones?

Do you need to prioritize certain kinds of animations, like when you're tracking the user's cursor?

Nothing that complicated really. More like "User is on page. User clicks on menu item x. Menu fades out and submenu items of x fade in. Content slides out to left and then slides back in with content for menu item x." Given your followup questions I'm thinking I can probably handle the whole thing by just keeping things organized into object-literals or CoffeeScript classes.

# ? Sep 6, 2012 07:00

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

prom candy posted:

Nothing that complicated really. More like "User is on page. User clicks on menu item x. Menu fades out and submenu items of x fade in. Content slides out to left and then slides back in with content for menu item x." Given your followup questions I'm thinking I can probably handle the whole thing by just keeping things organized into object-literals or CoffeeScript classes.

CSS transitions?

Simple jQuery animations would work too.

# ? Sep 6, 2012 08:38

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

Blinkz0rz posted:

I'm getting a bit deeper into JavaScript and I was wondering if anyone had any suggestions for reading about anonymous functions, object literal usage, and general patterns for advanced programming?

Not sure what you want to know. Again, if you have specific questions, ask them, but "object literals" and "anonymous functions" aren't interesting things on their own.

# ? Sep 6, 2012 08:39

Gazpacho: Jun 18, 2004; by Fluffdaddy; Slippery Tilde

If someone waits for a specific question to learn about anonymous functions they'll never know what question they are waiting for and never learn. Unfortunately all the good explanations I've seen refer to Lisp or ML.

To answer in general terms, try them out with Array.map or Array.forEach and then build on that. For example, how would you use Array.map to convert an array of numbers to an array of running totals from that array?

Gazpacho fucked around with this message at 09:11 on Sep 6, 2012

# ? Sep 6, 2012 09:03

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

Gazpacho posted:

If someone waits for a specific question to learn about anonymous functions they'll never know what question they are waiting for and never learn. Unfortunately all the good explanations I've seen refer to Lisp or ML.

To answer in general terms, try them out with Array.map or Array.forEach and then build on that.

Anonymous functions are just functions without a name, though.

JavaScript code:

function mapOne() {
  function inner(elem) {
    return elem * 2;
  }
  return [1, 2, 3, 4, 5].map(inner);
}

function mapTwo() {
  return [1, 2, 3, 4, 5].map(function(elem) {
    return elem * 2;
  });
}

These two are equal in every respect. If you want to know about closures/callbacks as a functional design pattern (which is what I assume you meant), that's fine. Do you just want to know about the ideas behind this? Do you not understand it? Do you understand the implications, but don't understand the advantages that this strategy gives you?

# ? Sep 6, 2012 09:11

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

Suspicious Dish posted:

Anonymous functions are just functions without a name, though.
JavaScript code:
function mapOne() {
  function inner(elem) {
    return elem * 2;
  }
  return [1, 2, 3, 4, 5].map(inner);
}

function mapTwo() {
  return [1, 2, 3, 4, 5].map(function(elem) {
    return elem * 2;
  });
}
These two are equal in every respect. If you want to know about closures/callbacks as a functional design pattern (which is what I assume you meant), that's fine. Do you just want to know about the ideas behind this? Do you not understand it? Do you understand the implications, but don't understand the advantages that this strategy gives you?

Yeah, sorry, I understand what anonymous functions are. I guess what I'm trying to figure out is an entry point to understanding why you would use them and what advantages they afford. You mentioned the use of closures/callbacks as a design pattern. Do you have any suggested reading so I could learn more?

# ? Sep 6, 2012 12:12

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

There's always crockford's java script:the good parts and his website.

# ? Sep 6, 2012 14:38

geeves: Sep 16, 2004

Blinkz0rz posted:

I'm getting a bit deeper into JavaScript and I was wondering if anyone had any suggestions for reading about anonymous functions, object literal usage, and general patterns for advanced programming?

Here's an online book about Design Patters in JavaScript that I've used as reference

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

# ? Sep 6, 2012 15:08

angrytech: Jun 26, 2009

How can I use javascript to close the currently open window? Preferably with a button on the webpage.

# ? Sep 6, 2012 17:16

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

angrytech posted:

How can I use javascript to close the currently open window? Preferably with a button on the webpage.

code:

alert("Hey you, click your browser windows CLOSE button, thx.");

that or window.close()

# ? Sep 6, 2012 17:41

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

Blinkz0rz posted:

Yeah, sorry, I understand what anonymous functions are. I guess what I'm trying to figure out is an entry point to understanding why you would use them and what advantages they afford. You mentioned the use of closures/callbacks as a design pattern. Do you have any suggested reading so I could learn more?

It's a very common thing in Lisp or other types of function programming. SICP is the classic if you want to learn about Lisp.

# ? Sep 6, 2012 18:51

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

How do people handle primary keys in offline-online syncing scenarios. I figure the way that makes sense to me is to generate them client side and just verify validity when new objects get pushed to the server. Obviously incrementing keys are no good, is there a commonly accepted way to generate and use hashes as primary keys, salted by data that would be unique to the object such as make time plus username?

Or am I over thinking this?

# ? Sep 6, 2012 23:01

Bhaal: Jul 13, 2001; I ain't going down alone; Dr. Infant, MD

Before accepting it serverside you would still need to validate that the key from the client fits the constraints of userid/sessionid or whatever, on top of the normal sanitizing & escaping, otherwise it'll be a vector for shenanigans. But yes if you're going to have clients creating unique PKs then definitely come up with a seeding process for all ids that it's tied not only to the logged in user but the session/frontend instance that is running, and have some way to re-validate serverside.

# ? Sep 6, 2012 23:41

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

The client shouldn't be trusted to create legit keys, so why even try? Assume that anything the client creates, and maybe references to it, will have to change when you sync.

OK, so how do you handle the sync? Hell if I know. Depends on how much the user can do between syncs.

Maybe, every time something gets a reference to something with a local/provisional primary key, it subscribes to something in the sync mechanism that says "hey, if this provisional key gets persisted, let me know what its new, real key is, and I'll update myself." Maybe include some kind of callback function to help narrow down which fields need to be fixed up.

# ? Sep 7, 2012 00:42

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

Alright, yeah I know it's going to be an obvious attack point if I'm not validating, I guess I was wondering if there was a commonly accepted method so I can steal it rather than make it up. My thinking is:

Create object on client side. Store information that will be immutable:
Logged In User ID
Creation SessionID
Creation Timestamp

Create Primary Key from a hash of these immutables.

Only able to push if online and logged in obviously, send objects including immutables.
Ensure logged in user same as user id of object. -- reject if not
Sanitize object values, discard invalid keys.

Revalidate hash by using the same information that was used client side. -- reject if client hash does not line up

-----

I know an attacker can manually change the sessID and timestamp on an object, but as long as they are user validated and what comes in is correctly sanitized, am I right in believing the only thing they can corrupt is their own data, as long as I have protection from XSS and CSRF.

This is sort of why I'd love a proven method, but anyway, my prototype is offline only so I guess I can cross this bridge later.

edit: re Bartkusa

Yeah, you're probably right. More or less just spitballing to get people's ideas, keep it simple and just make a provisional ID sounds like what I should do and stop over engineering the problem. I'm gonna have to provide a sync solution anyway.

Maluco Marinero fucked around with this message at 01:07 on Sep 7, 2012

# ? Sep 7, 2012 00:58

HClChicken: Aug 15, 2005; Highly trained by the US military at expedient semen processing.

I want a timestamp to be printed when a pdf is printed. From searching I need to put some code in the documents javascript. The code I've found is:

code:

function timestamp()
{var f = this.getField("today") var sDate = util.printd('dd mmm yyyy HH:MM tt", new Date());
f.value='Print date:'+'sDate';
}

I know there are syntax errors there but I am unfamiliar with javascript. Could I get any help?

# ? Sep 7, 2012 20:15

Polio Vax Scene: Apr 5, 2009

Do you want help formatting the date or help writing the javascript?

http://msdn.microsoft.com/en-us/library/ff743760(v=vs.94).aspx

Basically each part of the string in printd's first argument is replaced based on what letter you use.

For your syntax remove the single quotes around sDate and you have a double quote in the first argument of printd().

# ? Sep 7, 2012 20:29

HClChicken: Aug 15, 2005; Highly trained by the US military at expedient semen processing.

Manslaughter posted:

Do you want help formatting the date or help writing the javascript?

http://msdn.microsoft.com/en-us/library/ff743760(v=vs.94).aspx

Basically each part of the string in printd's first argument is replaced based on what letter you use.

For your syntax remove the single quotes around sDate and you have a double quote in the first argument of printd().

code:

function timestamp()
{var f = this.getField("today") var sDate = util.printd('dd mmm yyyy HH:MM tt', new Date());
f.value='Print date:'+sDate;
}

This is what I changed. What do you mean "what letter you use."

# ? Sep 7, 2012 20:55

Optimus Prime Ribs: Jul 25, 2007

HClChicken posted:

This is what I changed. What do you mean "what letter you use."

He means in your 'dd mmm yyyy HH:MM tt' string each letter (or, more accurately, each set of letters) represents a certain part of a timestamp (such as the day in numerical format, the month in numerical format with prefixed zeroes, or the day of the week in textual format), and that each one, such as the dd or yyyy, get replaced with the appropriate value based on what new Date() gives you.

# ? Sep 7, 2012 21:21

TildeATH: Oct 21, 2010; by Lowtax

I need help creating permalinks. I've built a rather in-depth little data visualization workspace using D3.js and I want to give a user the capability to copy the link and share it with someone else, but that means storing a bool array, various filter ranges, some bounding box/zoom data for the maps, a query string or two, and so on.

Is there anything out there that makes this easy or is there a pointer to a good tutorial for getting started with permalinks?

# ? Sep 7, 2012 21:27

Polio Vax Scene: Apr 5, 2009

HClChicken posted:

code:
function timestamp()
{var f = this.getField("today") var sDate = util.printd('dd mmm yyyy HH:MM tt', new Date());
f.value='Print date:'+sDate;
}
This is what I changed. What do you mean "what letter you use."

Beaten to it already but you'll also want a semicolon after ("today").

# ? Sep 7, 2012 21:45

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

TildeATH posted:

I need help creating permalinks. I've built a rather in-depth little data visualization workspace using D3.js and I want to give a user the capability to copy the link and share it with someone else, but that means storing a bool array, various filter ranges, some bounding box/zoom data for the maps, a query string or two, and so on.

Is there anything out there that makes this easy or is there a pointer to a good tutorial for getting started with permalinks?

I don't actually know how to do that, but my jury-rigged solution would be to take all the data, convert it to JSON, and throw it at some JS string-compressing library I downloaded somewhere.

# ? Sep 7, 2012 23:22

thathonkey: Jul 17, 2012

TildeATH posted:

I need help creating permalinks. I've built a rather in-depth little data visualization workspace using D3.js and I want to give a user the capability to copy the link and share it with someone else, but that means storing a bool array, various filter ranges, some bounding box/zoom data for the maps, a query string or two, and so on.

Is there anything out there that makes this easy or is there a pointer to a good tutorial for getting started with permalinks?

You could serialize all the necessary data and pipe it through the hash or query string to JavaScript? Maybe there is too much... you might have to come up with some sort of encode/decode scheme to make it a more manageable permalink URL.

jQuery and many other libraries have functions for serializations JS objects and arrays though.

# ? Sep 8, 2012 03:42

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

What is the go with local database standards in HTML5? Seems to be stuck in a wierd limbo land at the moment, half way between WebSQL and IndexedDB. For my prototype I'm using IndexedDB which is working alright for now, at least with a little abstraction library I've written on top that handles the whole asynchronous nature of it cleanly.

That's fine for a prototype but when it comes to a finished product down the track, where should I be heading towards so I can work on both mobile and desktop reliably? Is there a library that is ideal for this problem of the shifting standard? I don't really want to rely on straight localStorage, because it'll hit points where what I'm doing is going to be clunky. Any thoughts?

# ? Sep 11, 2012 11:07

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

bartkusa posted:

I don't actually know how to do that, but my jury-rigged solution would be to take all the data, convert it to JSON, and throw it at some JS string-compressing library I downloaded somewhere.

Unless you need hierarchy in your keys it's probably better to use &key=value url syntax like thathonkey says. jQuery has a method for serializing structures into urls,

http://api.jquery.com/jQuery.param/

After that, if the url is getting too long though then it might be better to have a url shortener that just redirects to that long-form url.

# ? Sep 13, 2012 01:16

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

I'm using the krpano html5 panorama viewer, and I have hotspots on my tour link to jquery popups. A semi-transparent background and the popup completely covers the tour, but the map on the tour still accepts clicks even though the popup is covering it. This leads to the problem of the map bypassing the popups close button or possibly touching a map's hotspot. I've tried playing around with stopPropagation, though I'm not too familiar with it. Don't know if that is the definitive answer.

In my popup.js file, which is included throughout the tour, I have this code:

code:

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
				  
	$("#wrapper").click(function(){
		if(popupStatus==1){ //check if the jquery popup is loaded
			if ($("#panoDIV").stopPropagation){
				
				$("#panoDIV").stopPropagation();
			}
		}
	});
				  
	//CLOSING POPUP
	//Click the x "close button" event
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click the background to close event
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
				  

});

#popupContactClose and #backgroundPopup is inside #wrapper. #panoDIV is a div where my krpano tour is. I guess I'm not doing this the right way or maybe there's a better approach?

LP0 ON FIRE fucked around with this message at 18:51 on Sep 20, 2012

# ? Sep 20, 2012 18:13

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

LP0 ON FIRE posted:

I'm using the krpano html5 panorama viewer, and I have hotspots on my tour link to jquery popups. A semi-transparent background and the popup completely covers the tour, but the map on the tour still accepts clicks even though the popup is covering it. This leads to the problem of the map bypassing the popups close button or possibly touching a map's hotspot. I've tried playing around with stopPropagation, though I'm not too familiar with it. Don't know if that is the definitive answer.

In my popup.js file, which is included throughout the tour, I have this code:

#popupContactClose and #backgroundPopup is inside #wrapper. #panoDIV is a div where my krpano tour is. I guess I'm not doing this the right way or maybe there's a better approach?

You need to stopPropagation on the event, not on the element.

JavaScript code:

jQuery('#blah').click( function(event) {
    event.stopPropagation();
    // hooray, your event isn't going anywhere!
});

http://api.jquery.com/event.stopPropagation/

# ? Sep 20, 2012 20:14

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 05:29

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

Lumpy posted:

You need to stopPropagation on the event, not on the element.
JavaScript code:
jQuery('#blah').click( function(event) {
    event.stopPropagation();
    // hooray, your event isn't going anywhere!
});
http://api.jquery.com/event.stopPropagation/

Thanks Lumpy. I trust that this would normally work, but I can't even get my element to alert back that it was clicked most of the time. In krpano, my map shrinks and grows when I click over it when my popup is over it, and nothing alerts back, but when I click the close button, it shows the alert. However, more confusing, clicking the transparent background, which has the same functionality as the close button, no alert pops up. So it's like my click function is only working after the popup is closing but my cursor is still over the map that was under it.

Alternatively, I'm not even checking if my popup is loaded, and since this popup file is included it should, by theory still pop up my alert box when I click within the krpano div, but it doesn't!

code:

$(document).ready(function(){

  $("#panoDIV").click( function(event) {
	alert("Yes"); 
	//alert not working when popup is not even open 
	//but does in very special circumstances described above
  });

});

# ? Sep 20, 2012 22:48

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

«‹›277 »