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 »

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

mmachine posted:

What I need to do is insert some content dynamically somewhere within the .wrapper content that would bust outside that wrapper.

I'm not sure I fully understand what you're trying to do, but have you tried using absolute positioning?

code:

.wrapper {
	position: relative;
}

.my-wrapper-breaking-thing {
	position: absolute;
	top: 100%;
}

Could you clarify what you mean by "bust outside that wrapper"?

# ? Nov 8, 2013 04:43

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 13:51

Jam2: Jan 15, 2008; With Energy For Mayhem

Is it possible to create javascript animations with pure JS and CSS, without the aid of a library?

# ? Nov 8, 2013 05:31

rotor: Jun 11, 2001; classic case of pineapple derangement syndrome

Jam2 posted:

Is it possible to create javascript animations with pure JS and CSS, without the aid of a library?

yeah. there's CSS transitions & transforms

but there's also window.requestAnimationFrame

dear web people: you don't always need to use libraries for small things.

sincerely,

rotor

# ? Nov 8, 2013 05:43

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

No, it is impossible. That is why none of the libraries written in JS actually work.

# ? Nov 8, 2013 06:11

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

rotor posted:

yeah. there's CSS transitions & transforms

but there's also window.requestAnimationFrame

dear web people: you don't always need to use libraries for small things.

sincerely,

rotor

However, keep this in mind:

http://caniuse.com/#feat=css-transitions
http://caniuse.com/#feat=requestanimationframe
http://caniuse.com/#feat=transforms2d

# ? Nov 8, 2013 15:21

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

rotor posted:

Google does it for their feedback tool.

http://www.elliottsprehn.com/preso/fluentconf/#/

also this: http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6678156#6678156

Whoa.

# ? Nov 10, 2013 17:55

Mr.48: May 1, 2007

I have javascript code that procedurally creates equations and stores them as strings. I want to use Mathjax to display these equations nicely, preferably using ASCIImath format. How can I pass these strings to Mathjax?

The reason I store the equations as strings is that otherwise javascript tries to evaluate them, which is something I dont want.

Alternatively, how else can I accomplish the same goals? (ie using a different language)

# ? Nov 11, 2013 01:54

excidium: Oct 24, 2004; Tambahawk Soars

Another Angular question that is probably going to be really basic and dumb, but I'm stuck for some reason. Using an http.get call I'm returning JSON data and setting it to a $scope variable to use in my view. This works fine with my complex JSON as I am able to path down the JSON structure in my data bindings. But, I'm stuck with how to create a new variable containing a sub-set of that data in my controller.

code:

.controller('InterviewCtrl', ['$scope', '$http', function($scope, $http) {
	$http.get('stub/accountPage.json').success(function(data) {
		$scope.pageData = data;
	});
        $scope.riskData = $scope.pageData.Risk;

This doesn't work and blows up my page with an undefined Risk error. Risk is definitely an array of items in my returned data, so I'm not sure why it's not working. How can I get that array into a new variable in my controller?

PS: Does anyone have any experience with angular-table? https://github.com/ssmm/angular-table There is like no documentation.

# ? Nov 11, 2013 02:37

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

You need to put it in the callback because the HTTP request hasn't completed when you try to assign riskData.

# ? Nov 11, 2013 02:38

Pollyanna: Mar 5, 2005; Milk's on them.

I'm wondering if there's a way to load an HTML template from within JS. Like, say I have a layout.html:

HTML code:

<!DOCTYPE html>
<html>

<head>

    <title>Trial Page</title>

</head>

<body>

<header>

        <h1>Trial App</h1>

            <ul>
                <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
                <li><a href="{{ url_for('projects') }}">Projects</a></li>
            </ul>

</header>

<div>
    {% block content %}
    {% endblock %}
</div>

</body>

</html>

The content block would be replaced by various HTML files for different pages. What I'm wondering is if I can keep the layout.html page loaded, but change only the stuff in endblock. The h1 and ul elements would remain unchanged, but everything within div would load from a different .html. Does that make any sense?

If it helps, I'm using Flask / Jinja2.

# ? Nov 11, 2013 04:37

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

When I've done things like that, I would wrap the template in something like <div class="content"></div>. Then your JavaScript can just target that div and replace the inner HTML via an AJAX call.

# ? Nov 11, 2013 04:42

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

Pollyanna posted:

I'm wondering if there's a way to load an HTML template from within JS. Like, say I have a layout.html:

http://api.jquery.com/load/

That does exactly that. Obviously you can write your own that does not use jQuery, but it's such a common task that most libraries have something for it.

# ? Nov 11, 2013 15:49

excidium: Oct 24, 2004; Tambahawk Soars

Suspicious Dish posted:

You need to put it in the callback because the HTTP request hasn't completed when you try to assign riskData.

It's in the callback already I thought by being in the .success?

# ? Nov 11, 2013 16:07

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

The one that sets pageData is. The one that sets riskData isn't.

# ? Nov 11, 2013 16:12

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

excidium posted:

It's in the callback already I thought by being in the .success?

The problem here is with order of operations. Passing a callback to an AJAX request means that everything inside the callback will execute after the request completes. However, the rest of the code continues to run. Setting the riskData there doesn't work because the callback hasn't been executed yet. Here's how it would run in the browser:

$http.get('stub/accountPage.json')...
[browser begins AJAX call]
$scope.riskData = $scope.pageData.Risk;
[some time later... browser finishes AJAX call]
$scope.pageData = data;

# ? Nov 11, 2013 16:21

kedo: Nov 27, 2007

Can anyone point me in the direction of a good tutorial or walkthrough on server side caching of JSON delivered from a public API? I assume it's pretty easy but I haven't ever done something like that before and want to make sure I'm doing it the right way. I'll probably be using jQuery to make the request, but am open to other options if there's something better.

# ? Nov 11, 2013 17:46

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Server-side caching is going to depend on the server that you use. You could punt on that and instead rely on downstream caching by setting the Cache-Control header.

code:

Cache-Control: public, max-age: 86400

That header tells HTTP caching mechanisms to store your data for one day (86400 seconds). Your server won't necessarily cache the data, but the browser and servers in between you and the browser will cache it.

This is a decent link for HTTP caching in general: https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers

If you want to specifically do server-side caching, you should refer to the docs for your server.

# ? Nov 11, 2013 20:19

TURTLE SLUT: Dec 12, 2005

I'm trying to optimize some Canvas code by prerendering some shapes into a temporary canvas. I'm first creating a large number of custom Shapes and drawing them to the temporary canvas, then trying to delete all references to those Shapes and just redraw by using the temporary canvas.

The problem is that even if I create the Shape objects in a wrapping function and only return the temporary canvas, I can still see a large number of Shape object allocations in Chrome heap snapshot, even if I manually run garbage collection from the Timeline tab in Chrome Dev Tools. This is a large-ish app, so it's plausible there's still some references left somewhere in some obscure code branch, but I certainly can't find it. Only thing I can think of is that they're at some point being passed around inside an Event object. Would Chrome save Events somewhere in its depths therefore not garbage collecting the data embedded into it? Or is GC just unreliable and even if all references have been purged, objects can still show up in the heap?

# ? Nov 12, 2013 00:35

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

I don't know if it's possible to force a GC for content in Chrome. GCs tend to defer until later, so it's not going to clean things up immediately. The Chrome dev tools should give you ways to inspect the tree and see what's holding a reference, if it's still alive.

My best guess is that you're keeping them alive because of a closure.

# ? Nov 12, 2013 00:43

TURTLE SLUT: Dec 12, 2005

Siiggggh. It seems like the most likely explanation. Gonna dive into the retaining tree and kill myself

# ? Nov 12, 2013 03:38

Tres Burritos: Sep 3, 2009

Soooo I have this feeling that I'm reaching around blindly with JavaScript and making just the absolute shittiest code. Is it kosher to ask for critiques here? I've got like 600 lines give or take.

# ? Nov 12, 2013 07:46

Strong Sauce: Jul 2, 2003; You know I am not really your father.

Post it on gist or pastebin?

# ? Nov 12, 2013 08:38

Tres Burritos: Sep 3, 2009

Ok, you need one of those fancy non-IE browsers to make this actually display anything, but here it is. Honestly any feedback is appreciated, I mean the code does what it's supposed to do but I'm not even remotely sure if I'm following JavaScript "best practices" or whatever.

# ? Nov 12, 2013 18:55

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

Tres Burritos posted:

Ok, you need one of those fancy non-IE browsers to make this actually display anything, but here it is. Honestly any feedback is appreciated, I mean the code does what it's supposed to do but I'm not even remotely sure if I'm following JavaScript "best practices" or whatever.

FWIW, I just get a black screen in Chrome beta.

# ? Nov 12, 2013 19:12

Mogomra: Nov 5, 2005; simply having a wonderful time

Thermopyle posted:

FWIW, I just get a black screen in Chrome beta.

Are you on *nix? I have a lot of issues with Three.js unless I'm using Windows drivers, but that might just be me.

# ? Nov 12, 2013 19:20

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

Mogomra posted:

Are you on *nix? I have a lot of issues with Three.js unless I'm using Windows drivers, but that might just be me.

No. The few three.js examples I tried seem to work fine.

# ? Nov 12, 2013 20:29

Tres Burritos: Sep 3, 2009

Thermopyle posted:

No. The few three.js examples I tried seem to work fine.

What's your chrome version? Version 32.0.1700.6 beta-m Aura?

# ? Nov 12, 2013 20:46

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Apropos of nothing, but Smashing Magazine just posted an article on DOM events. It helped me get a better understanding of the event lifecycle, so I thought I would share.

# ? Nov 12, 2013 21:55

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

kedo posted:

Can anyone point me in the direction of a good tutorial or walkthrough on server side caching of JSON delivered from a public API? I assume it's pretty easy but I haven't ever done something like that before and want to make sure I'm doing it the right way. I'll probably be using jQuery to make the request, but am open to other options if there's something better.

I assume you mean caching so you don't have to re-compute some result for any number of clients (assuming it's the same)? For client-specific caching you can/should use both the client-side caching mentioned above and something that responds with 304 (If-None-Match/If-Modified-Since) to handle clients simply looking for updates to a resource.

Anyway, so for not-client-specific caching you will usually just cache by resource path and then you get to enter the wonderful world of cache invalidation. The easiest way by far is simply time based. All resources only get recomputed, say, every 10 minutes, most cache backends support this out of the box and it works very well and naturally with If-Modified-Since. If your clients don't mind having data that is potentially up to 10 minutes old, this is by far the easiest thing to do, and can make a single app server with a memcached (or similar) caching backend handle an ungodly amount of requests.

If your clients need real-time data, or demand luxuries like being able to see a change in the system they just made (e.g. POST /comments, actually see it in GET /comments after), then life is about to become much more interesting for you. There are many strategies you can use, none of them particularly simple - it really depends on your application.

# ? Nov 12, 2013 23:41

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

Tres Burritos posted:

What's your chrome version? Version 32.0.1700.6 beta-m Aura?

That made me check the about box and I saw I had an upgrade available. (been awhile since a restart)

After upgrade things work.

# ? Nov 13, 2013 01:00

kedo: Nov 27, 2007

Mr. Wynand posted:

I assume you mean caching so you don't have to re-compute some result for any number of clients (assuming it's the same)? For client-specific caching you can/should use both the client-side caching mentioned above and something that responds with 304 (If-None-Match/If-Modified-Since) to handle clients simply looking for updates to a resource.

Anyway, so for not-client-specific caching you will usually just cache by resource path and then you get to enter the wonderful world of cache invalidation. The easiest way by far is simply time based. All resources only get recomputed, say, every 10 minutes, most cache backends support this out of the box and it works very well and naturally with If-Modified-Since. If your clients don't mind having data that is potentially up to 10 minutes old, this is by far the easiest thing to do, and can make a single app server with a memcached (or similar) caching backend handle an ungodly amount of requests.

If your clients need real-time data, or demand luxuries like being able to see a change in the system they just made (e.g. POST /comments, actually see it in GET /comments after), then life is about to become much more interesting for you. There are many strategies you can use, none of them particularly simple - it really depends on your application.

My functional requirements are actually pretty simple... client is a restaurant that's going to be using Locu to house their menu data so it's synced across their website (which I'm dealing with), point of sale in multiple locations and various other applications. I'd like to cache the data because A) I need to limit the number of calls made to the API per day (1000 max and they have way more daily users than that), and I'd also like to have a backup on our server in case their API server is ever down. They have a little bit of info about it in their documentation, but this is all pretty new to me so I'm looking for sort of a "server side caching in JS for idiots" intro level tutorial.

Basically I just want to dump the JSON somewhere on the server and use it if it's age is less than X, or if the API server is unavailable. But again, this is all new to me, so I don't even know if that's the correct way to approach this.

# ? Nov 13, 2013 18:28

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

kedo posted:

My functional requirements are actually pretty simple... client is a restaurant that's going to be using Locu to house their menu data so it's synced across their website (which I'm dealing with), point of sale in multiple locations and various other applications. I'd like to cache the data because A) I need to limit the number of calls made to the API per day (1000 max and they have way more daily users than that), and I'd also like to have a backup on our server in case their API server is ever down. They have a little bit of info about it in their documentation, but this is all pretty new to me so I'm looking for sort of a "server side caching in JS for idiots" intro level tutorial.

Basically I just want to dump the JSON somewhere on the server and use it if it's age is less than X, or if the API server is unavailable. But again, this is all new to me, so I don't even know if that's the correct way to approach this.

I'd be surprised if this exists because...it's just a thing you do. Download the API data however many times a day, put it in a database or memcache or whatever, and only serve API data from your database or memcache or whatever, not from Locu.

In other words, the only thing hitting Locu is your server.

# ? Nov 13, 2013 18:50

JawnV6: Jul 4, 2004; So hot ...

I'm making a stupid web scraping tool. When I'm logged into the site, I can make a few clicks and bring up a big list of things. I started scraping the DOM, but quickly hit some difficulty and figured there had to be a better way.

I've identified the XHR endpoint that's spitting out the json I need. It's a post request with a bunch of headers, including a cookie with session ID.

I want some way to replay that XHR. Since it's available from clicks on the website, I should be able to create a javascript bookmarklet that replays those requests and will trick this endpoint into spitting data at me, right?

e: ugh, this environment is terrible and i dont know how humans can work like this. i've isolated the relevant functions, managed to set a breakpoint, and figured out how to spoof the same ajax request. now i've got a pile of json and just need to prettify it

JawnV6 fucked around with this message at 23:17 on Nov 13, 2013

# ? Nov 13, 2013 21:40

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

JawnV6 posted:

e: ugh, this environment is terrible and i dont know how humans can work like this.

Now imagine writing nodejs code. :q:

# ? Nov 14, 2013 12:59

Pollyanna: Mar 5, 2005; Milk's on them.

I want to provide a PDF version of my HTML resume that I've uploaded to a website. However, I don't want to have to make a new PDF each time I change the HTML. Is there a way to get Javascript to change an HTML document to PDF?

# ? Nov 15, 2013 02:55

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

Nope. Just make a separate PDF version.

# ? Nov 15, 2013 02:57

Pollyanna: Mar 5, 2005; Milk's on them.

Aw. Okay.

What should the margins be?

# ? Nov 15, 2013 03:03

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Normal enough to not make someone notice them? I think around 1" top/bottom and 1.25" left/right is typical.

# ? Nov 15, 2013 03:23

Pollyanna: Mar 5, 2005; Milk's on them.

Bognar posted:

Normal enough to not make someone notice them? I think around 1" top/bottom and 1.25" left/right is typical.

Yeah that was a bit of a dumb question. But hey, the site works great now :shobon:

# ? Nov 15, 2013 03:33

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 13:51

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Suspicious Dish posted:

Nope. Just make a separate PDF version.

Oh yeah? You better tell Firefox that.

e: i'm not sure you can actually save TO pdf... it might only go the other way around :/

# ? Nov 15, 2013 11:19

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

«‹›277 »