|
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 |
|
|
# ? Jun 5, 2024 09:24 |
|
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 |
|
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 |
|
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 |
|
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 |
|
Backbone is, indeed, quite solid. We use it at work.
|
# ? Sep 5, 2012 11:43 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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? 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 |
|
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 |
|
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 |
|
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 |
|
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. Anonymous functions are just functions without a name, though. JavaScript code:
|
# ? Sep 6, 2012 09:11 |
|
Suspicious Dish posted:Anonymous functions are just functions without a name, though. 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 |
|
There's always crockford's java script:the good parts and his website.
|
# ? Sep 6, 2012 14:38 |
|
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 |
|
How can I use javascript to close the currently open window? Preferably with a button on the webpage.
|
# ? Sep 6, 2012 17:16 |
|
angrytech posted:How can I use javascript to close the currently open window? Preferably with a button on the webpage. code:
that or window.close()
|
# ? Sep 6, 2012 17:41 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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:
|
# ? Sep 7, 2012 20:15 |
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 |
|
Manslaughter posted:Do you want help formatting the date or help writing the javascript? code:
|
# ? Sep 7, 2012 20:55 |
|
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 |
|
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 |
HClChicken posted:
Beaten to it already but you'll also want a semicolon after ("today").
|
|
# ? Sep 7, 2012 21:45 |
|
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. 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 |
|
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. 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 |
|
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 |
|
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 |
|
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:
LP0 ON FIRE fucked around with this message at 18:51 on Sep 20, 2012 |
# ? Sep 20, 2012 18:13 |
|
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. You need to stopPropagation on the event, not on the element. JavaScript code:
|
# ? Sep 20, 2012 20:14 |
|
|
# ? Jun 5, 2024 09:24 |
|
Lumpy posted:You need to stopPropagation on the event, not on the element. 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:
|
# ? Sep 20, 2012 22:48 |