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 »

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

I don't really know anything about Require.js, why is it dog poo poo?

# ? Jun 21, 2012 22:12

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:27

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

I'm fairly happy with require.js, but I have a sort of edge case situation where I need to load different modules at runtime.

# ? Jun 21, 2012 23:53

Funking Giblet: Jun 28, 2004; Jiglightful!

How do you handle circular dependencies? Or are you doing it manually, and if you're doing it manually, why aren't you just importing using the script tags, or using a build tool for production releases and leaving the individual files loaded for development? It's a lot of overhead to solve something and it's very error prone. I wouldn't throw this stuff on a mobile phone either. Not to mention you could be really ramping up the amount of HTTP requests.

# ? Jun 22, 2012 08:42

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

How are you supposed to handle circular dependencies in the "just build on the server" case, or in the "just use a script tag" case?

# ? Jun 22, 2012 15:17

Hughlander: May 11, 2005

cross posting from general programming thread

What's the latest and greatest for Javascript IDEs? I don't do JavaScript often so I mostly just ssh to a toy VPS I own and use vi and hit a page with a browser. But now I got a project I'd like to work on that's full of javascript buzzwords, AJAX, Bookmarklet, page injection etc... and I'd probably kill myself if I had to continue to do vi.

# ? Jun 23, 2012 17:09

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

Hughlander posted:

cross posting from general programming thread

What's the latest and greatest for Javascript IDEs? I don't do JavaScript often so I mostly just ssh to a toy VPS I own and use vi and hit a page with a browser. But now I got a project I'd like to work on that's full of javascript buzzwords, AJAX, Bookmarklet, page injection etc... and I'd probably kill myself if I had to continue to do vi.

Strangely enough, MacVIM (or gVIM) is by far my favorite JavaScript editor / IDE. Snip mate, nerdTree, and a couple other plugins, and it is amazing. vi is not fun, vim is great, and the GUI versions are wondrous.

# ? Jun 23, 2012 18:26

dizzywhip: Dec 23, 2005

Hughlander posted:

cross posting from general programming thread

What's the latest and greatest for Javascript IDEs? I don't do JavaScript often so I mostly just ssh to a toy VPS I own and use vi and hit a page with a browser. But now I got a project I'd like to work on that's full of javascript buzzwords, AJAX, Bookmarklet, page injection etc... and I'd probably kill myself if I had to continue to do vi.

Sublime Text 2 is great. JavaScript really doesn't need an IDE.

# ? Jun 23, 2012 19:36

Funking Giblet: Jun 28, 2004; Jiglightful!

Suspicious Dish posted:

How are you supposed to handle circular dependencies in the "just build on the server" case, or in the "just use a script tag" case?

Everything is in one file, so if you don't call a function before it's defined, you are ok. You can't get into a situation where you a loading a file from another file, where that file loads the first one.

Funking Giblet fucked around with this message at 11:33 on Jun 24, 2012

# ? Jun 24, 2012 11:30

Claeaus: Mar 29, 2010

I'm creating a game in Javascript and also a level creator for it. At the moment I have the level saved on the server in a .txt-file and the content of the level(just enemies at the moment) saved in an .xml-file. I have managed to open both files using XMLHttpRequest and I can save the level by also using XMLHttpRequest and a simple

code:

var http = new XMLHttpRequest();
var params = "levelname="+levelname+"&level="+currentLevel;
http.send(params);

where currentLevel is a huge string where different characters represent different tiles.

But now I want to save the content of the level to the .xml-file and the enemies are stored as Objects in an array like so:

code:

var enemies = new Array();
enemies[0] = new Object();
enemies[0].x = 300;
enemies[0].y = 400;

enemies[1] = new Object();
enemies[1].x = 500;
enemies[1].y = 500;

etc..

What is the best way to save this to an .xml-file? Because creating a Javascript function that rearranges the whole array of Objects into a long string and adds tags where needed seems like a stupid idea.

# ? Jun 24, 2012 15:42

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

Is there any particular reason you're using XML?

I'd probably use JSON.

# ? Jun 24, 2012 16:29

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

Claeaus posted:

I'm creating a game in Javascript and also a level creator for it. At the moment I have the level saved on the server in a .txt-file and the content of the level(just enemies at the moment) saved in an .xml-file. I have managed to open both files using XMLHttpRequest and I can save the level by also using XMLHttpRequest and a simple
code:
var http = new XMLHttpRequest();
var params = "levelname="+levelname+"&level="+currentLevel;
http.send(params);
where currentLevel is a huge string where different characters represent different tiles.

But now I want to save the content of the level to the .xml-file and the enemies are stored as Objects in an array like so:
code:
var enemies = new Array();
enemies[0] = new Object();
enemies[0].x = 300;
enemies[0].y = 400;

enemies[1] = new Object();
enemies[1].x = 500;
enemies[1].y = 500;

etc..
What is the best way to save this to an .xml-file? Because creating a Javascript function that rearranges the whole array of Objects into a long string and adds tags where needed seems like a stupid idea.

What Wheany said. Use JSON and keep all the things that get saved in the file in a property on the object in question. Then you just use JSON.stringify(enemyInstance.props) and enemyInstance.props = JSON.parse(someJSON) for your serialization. XML is awful, and it's doubly awful when JSON is literally part of the language you are writing in.

# ? Jun 24, 2012 18:27

akadajet: Sep 14, 2003

Hughlander posted:

cross posting from general programming thread

What's the latest and greatest for Javascript IDEs? I don't do JavaScript often so I mostly just ssh to a toy VPS I own and use vi and hit a page with a browser. But now I got a project I'd like to work on that's full of javascript buzzwords, AJAX, Bookmarklet, page injection etc... and I'd probably kill myself if I had to continue to do vi.

If you like IntelliJ you can try out WebStorm.

# ? Jun 24, 2012 19:43

Claeaus: Mar 29, 2010

I'm using XML because it seemed like a nice way to save objects, but if you have a better idea I'm all for it!

# ? Jun 24, 2012 21:08

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

Well good news, it sounds like JSON (JavaScript Object Notation) is exactly what you want!

# ? Jun 24, 2012 22:02

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

I'm also going to go out and say not to use the explicit new Array(); and new Object(); constructors, and instead use the literal syntax, {} and []. You can write your example in literal syntax with:

code:

var enemies = [{ x: 300, y: 400 },
               { x: 500, y: 500 }];

Converting to JSON is just a quick step away:

code:

JSON.stringify(enemies);

And if you're using new String(); or new Number();, stop. They do not do what you want them to.

# ? Jun 24, 2012 22:10

smug forum asshole: Jan 15, 2005

Anyone care to elaborate on why require.js sucks? I like it just fine...

# ? Jun 24, 2012 22:25

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

Funking Giblet posted:

Everything is in one file, so if you don't call a function before it's defined, you are ok. You can't get into a situation where you a loading a file from another file, where that file loads the first one.

Only if you have function declarations to be hoisted. Most everything looks like this:

code:

(function(exports) {
    exports.moduleA = function(n) {
        return exports.moduleB(n / 2);
    };
})(typedef exports === "undefined" ? exports : window);

(function(exports) {
    exports.moduleB = function(n) {
        return exports.moduleA(3*n + 1);
    };
})(typedef exports === "undefined" ? exports : window);

# ? Jun 24, 2012 22:36

Claeaus: Mar 29, 2010

Suspicious Dish posted:

I'm also going to go out and say not to use the explicit new Array(); and new Object(); constructors, and instead use the literal syntax, {} and []. You can write your example in literal syntax with:
code:
var enemies = [{ x: 300, y: 400 },
               { x: 500, y: 500 }];

But the enemies will be added by the user in the level creator so I have to be able to add new objects to the array at runtime.

I just thought that I could use Javascript's Array kind of as a vector in C++ and fill it with objects.

But I will check out JSON, thanks!

# ? Jun 24, 2012 22:41

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

You can add new items to an array using arr.push:

code:

var enemies = [{ x: 300, y: 400 },
               { x: 500, y: 500 }];
enemies.push({ x: 640, y: 480 });

# ? Jun 24, 2012 23:03

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Claeaus posted:

But I will check out JSON, thanks!

Just a heads up, JSON is going to blow your mind and you'll be wondering how you got by without it for so long. It's so insanely simple and yet incredibly useful.

# ? Jun 25, 2012 07:29

Funking Giblet: Jun 28, 2004; Jiglightful!

Suspicious Dish posted:

Only if you have function declarations to be hoisted. Most everything looks like this:

code:

(function(exports) {
    exports.moduleA = function(n) {
        return exports.moduleB(n / 2);
    };
})(typedef exports === "undefined" ? exports : window);

(function(exports) {
    exports.moduleB = function(n) {
        return exports.moduleA(3*n + 1);
    };
})(typedef exports === "undefined" ? exports : window);

That's a recursive function that cycles forever (once I fixed the syntax errors)

# ? Jun 25, 2012 08:57

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

I'm also sort of curious how you would run into a cyclic dependency problem, what behavior you would expect from it, or how you would fix it.

# ? Jun 25, 2012 09:04

Funking Giblet: Jun 28, 2004; Jiglightful!

The example on the site is as follows

code:

//Inside b.js:
define(["require", "a"],
    function(require, a) {
        //"a" in this case will be null if a also asked for b,
        //a circular dependency.
        return function(title) {
            return require("a").doSomething();
        }
    }
);

If you needed to have separate files for some reason, there are tons of build tools to do it for you. There are even libraries out there which can be built based on a list of dependencies passed in, and output a filestream. A flat file of functions would not have the problem above.

Now, knowing the plugin happy attitudes of modern jQuery users, I can imagine the storm of modules that have inter-dependencies.

Funking Giblet fucked around with this message at 09:40 on Jun 25, 2012

# ? Jun 25, 2012 09:10

Safe and Secure!: Jun 14, 2008; OFFICIAL SA THREAD RUINER
SPRING 2013

Funking Giblet posted:

If you needed to have separate files for some reason, there are tons of build tools to do it for you.

Do you have any favorites?

# ? Jun 26, 2012 04:40

Funking Giblet: Jun 28, 2004; Jiglightful!

MSBuild triggering YUI

# ? Jun 26, 2012 09:21

Claeaus: Mar 29, 2010

I'm starting to feel stupid, the following code gives an a[0] is undefined error but only outside the function, the first document.write works:

code:

  var a={};
  
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'levels/level1content.json', true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4) {
            var jsonTexto = xobj.responseText;
	    a = eval ("(" + jsonTexto + ")");
			
	    document.write(a[0].x); // <- This prints out the correct value
        }
    }
    xobj.send(null);
	document.write(a[0].x); // <-- This gives the error

The level1content.json file looks like this:

code:

[{ "x": 300, "y": 400 },{ "x": 500, "y": 500 }]

# ? Jun 26, 2012 13:00

Funking Giblet: Jun 28, 2004; Jiglightful!

That's because it's asynchronous.
The value has been read before the JSON was return / parsed.
Where as the onreadystatechange is a listener that gets called every time the connection returns something, so it's called after the JSON returns

Funking Giblet fucked around with this message at 13:08 on Jun 26, 2012

# ? Jun 26, 2012 13:05

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

Claeaus posted:

code:

	    a = eval ("(" + jsonTexto + ")");

Please use

code:

a = JSON.parse(jsonTexto);

# ? Jun 26, 2012 13:22

Claeaus: Mar 29, 2010

Changed to synchronous and JSON.parse, seems to work like I wanted it to now. Thanks!

# ? Jun 26, 2012 13:46

Funking Giblet: Jun 28, 2004; Jiglightful!

I wouldn't recommend that, just have your function called inside the onreadystatechange function. You might have problems if say, your JSON file was 200mb.

# ? Jun 26, 2012 14:10

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

Ah yes, blocking everything in the browser to parse some JSON. This will surely work out.

# ? Jun 26, 2012 18:25

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

Why are you using XHR by hand? Use jQuery or MooTools or Dojo or something.

# ? Jun 26, 2012 18:52

Funking Giblet: Jun 28, 2004; Jiglightful!

Suspicious Dish posted:

Why are you using XHR by hand? Use jQuery or MooTools or Dojo or something.

Nothing wrong with doing it "by hand", beats loading a few 100k of script.

# ? Jun 26, 2012 19:07

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Funking Giblet posted:

Nothing wrong with doing it "by hand", beats loading a few 100k of script.

Ehhh I would have to disagree with that. It's only 33KB minified, and you can load it from Google's CDN (meaning it is probably already in the users browser cache anyways). Then you can write his thing as:

code:

$.get("levels/level1content.json", function(data) {
    document.write(data[0].x);
}, "json");

Quite a bit easier to read/write/understand, and it also works in IE6, unlike his implementation.

fletcher fucked around with this message at 20:43 on Jun 26, 2012

# ? Jun 26, 2012 20:41

Funking Giblet: Jun 28, 2004; Jiglightful!

fletcher posted:

Ehhh I would have to disagree with that. It's only 33KB minified, and you can load it from Google's CDN (meaning it is probably already in the users browser cache anyways). Then you can write his thing as:
code:
$.get("levels/level1content.json", function(data) {
    document.write(data[0].x);
}, "json");
Quite a bit easier to read/write/understand, and it also works in IE6, unlike his implementation.

Then he can write the once off implementation that does support IE6 and forget about it forever, and still not be loading 100k+ (IPhone doesn't care for gzipped size only on disk size, it won't cache it efficiently if the uncompressed file is over 25k). Right tool for the right job, not the entire toolbox full of unnecessary tools, every time. jQuery is great and all, but some people can write this stuff themselves, once, and wire up what they need.

Funking Giblet fucked around with this message at 09:32 on Jun 27, 2012

# ? Jun 26, 2012 22:33

dizzywhip: Dec 23, 2005

Throwing away reliable, tested code for your own implementation that you'll then have to maintain just so the user doesn't have to download 33kb of script is stupid. It's a waste of time and more error prone for a miniscule performance gain.

# ? Jun 26, 2012 23:17

Kallikrates: Jul 7, 2002; Pro Lurker

Where is a good source for picking up best practices etc for writing javascript for websites?

Its not my first langauge, and so far I have solid grasp of the basics (async, callbacks etc).

From what I gather you just import the scripts you want in order (if dependance matter). But when I start writing my own 'site.js' I'm kinda making stuff up as I go, I understand you can't access DOM elements before they load, but when do you put the scripts in the <head> vs after <body> is it normal for your document ready function to be one big list of methods, and selectors, which document ready is the best, if using jquery should you tap into it's ready functions. When should you do stuff outside of or before document ready. etc..

I think I know the answers to these, but I would hate to be wrong and have to unlearn bad habits and rewrite code, and most of it I've gathered from reading other people's code, that might not be idiomatic.

# ? Jun 27, 2012 01:19

spammy davis jr: Mar 21, 2009

Kallikrates posted:

Where is a good source for picking up best practices etc for writing javascript for websites?

Its not my first langauge, and so far I have solid grasp of the basics (async, callbacks etc).

From what I gather you just import the scripts you want in order (if dependance matter). But when I start writing my own 'site.js' I'm kinda making stuff up as I go, I understand you can't access DOM elements before they load, but when do you put the scripts in the <head> vs after <body> is it normal for your document ready function to be one big list of methods, and selectors, which document ready is the best, if using jquery should you tap into it's ready functions. When should you do stuff outside of or before document ready. etc..

I think I know the answers to these, but I would hate to be wrong and have to unlearn bad habits and rewrite code, and most of it I've gathered from reading other people's code, that might not be idiomatic.

It really depends on who you ask and why they're doing it that way. Some debate that you put everything you can in <head> and write by using jquery's ready methods, or some other similar technique.

There's another camp that debates you should execute everything after the document's loaded. The easiest way to do this is to place your <script> tags right before the closing <body> (btw you can't put <script> tags after </body> when doing DOM manipulations without IE throwing fits and your poo poo won't validate that way either) - Yahoo's performance group (and Google's iirc) both suggest this.

The thing to remember is that as you load JS, the browser sometimes has to stop because, after it loads a script, it has to sit there and evaluate it and maybe even execute it. If you're not careful, you'll take up all the browser's pipelines doing this and the page can hang. Go read up on blocking vs. non-blocking javascript.

I'm personally of the opinion that you do whatever you feel most comfortable with - most sites aren't using enough JavaScript to need to worry about things like blocking calls. Then again, a lot of sites are loading all of JQuery so they can use like 2 plugins with it, so I wouldn't worry too much about the "right way" to do it.

Then again somebody else could come along in this thread and totally prove me wrong on everything above.

# ? Jun 27, 2012 04:02

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

Kallikrates posted:

Where is a good source for picking up best practices etc for writing javascript for websites?

Its not my first langauge, and so far I have solid grasp of the basics (async, callbacks etc).

Watch this video (java script: The Good Parts). It's a pesentation by Douglas Crockford at Google Tech Talks.

It's not about best practises for websites, but personally, it kinda blew my mind when I watched it:

https://www.youtube.com/watch?v=hQVTIJBZook

Also use JSlint/JShint with as few exceptions as possible. It will force you to write better Javascript.

# ? Jun 27, 2012 06:21

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:27

Funking Giblet: Jun 28, 2004; Jiglightful!

Gordon Cole posted:

Throwing away reliable, tested code for your own implementation that you'll then have to maintain just so the user doesn't have to download 33kb of script is stupid. It's a waste of time and more error prone for a miniscule performance gain.

It's been changed a few times in the last number of releases, and it's been broken a few times, so it's neither reliable nor tested. (Not to mention the confusion after they change how attr worked, how reliable was that either?)

# ? Jun 27, 2012 09:33

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

«‹›277 »