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.

«‹›3 »

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

The Number type in Javascript is your standard IEEE 754 double. For CSS, I don't think there's a required precision (or even a minimum) specified anywhere.

As an aside, if you don't care about old versions of IE you can (and should!) use CSS transforms instead of doing it manually in javascript.

# ¿ Nov 18, 2012 04:41

Adbot: ADBOT LOVES YOU

# ¿ May 13, 2024 13:26

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

Gnack posted:

They do that to protect data, it's a cross-site scripting thing. Basically someone could override the results.push() method to their own nefarious ends, but you can't exploit results[results.length]

What attack are you actually protecting against here?

If an attacker is running javascript on your page, you've already lost the XSS game and not letting them override Array.push isn't going to save you. If you're embedding user data in your javascript and letting someone else execute it, you're also playing with fire and you're better off doing that in a more secure way instead of trying to protect yourself with some cute tricks.

And if neither of those are true, you shouldn't really care if someone messes with it because it doesn't expose any new security vulnerabilities.

# ¿ Nov 20, 2012 08:18

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

Boz0r posted:

In the w3school's examples they use "Text". I tried with "text/plain", though, and it still doesn't work
code:
function drag(event) {
 event.dataTransfer.setData("text/plain", event.target.id);
 alert(event.dataTransfer.getData("text/plain"));
}
still returns "";

Is event.target.id actually something (and not "")?

# ¿ Nov 21, 2012 00:47

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

Lumpy posted:

Putting semi-colons in yourself A) can help avoid bugs / issues (rare, and yes, easily avoided, but maybe the guy changing your code later isn't as smart as you!) B) makes explicit what could be vague to others reading your code C) has zero down side. (OMG THOSE EXTRA BYTES!!! notwithstanding)

So why on earth would not *not* put them in?

Because you're deliberately contrarian and care more about personally showing off than about building maintainable software.

# ¿ Dec 13, 2012 04:39

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

Is that seriously just the show-a-different-image-on-rollover scripts from Dreamweaver that have been copy-pasted?

# ¿ Jan 4, 2013 17:20

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

I'll just add that instead of using a capturing group (youtu\.be|v=) you can use a non-capturing group (?:youtu\.be|v=) (the ?: after the open-paren makes the group non-capturing). This helps to make your regex look a little bit more like meaningless line noise, but also to only capture the matches that you actually need, which can be helpful if you're wanting to pull out several bits of data with one regex.

# ¿ Jan 29, 2013 12:47

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

I have no idea why anyone would need sub-cent precision for a POS terminal. Does anyone actually care that they end up paying $15/item instead of $14.995 when they get nominally 50% off?

# ¿ Feb 10, 2013 01:41

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

Learn how to use the debugger. Open this up in the browser of your choice, open the console, and set a breakpoint on the start of your menu function. Then press buttons, and step through what's happening line-by-line. Especially the part that isn't working right.

I've spoilered the answer so you can investigate it yourself and then check your result:
Once you enter the first big if-block (i.e. when flag == 0), flag is ... 0! Which means that the following if-statements that check the value of flag are a little bit pointless. There are a few other issues in there too, but that's probably the first one you'll encounter.

I won't comment too much on the structure of the code, I'll just note that you should really work on decomposing your application into little independent, testable bits instead of putting them all together in one big function.

# ¿ Feb 13, 2013 02:14

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

Use a DocumentFragment. Create a fragment, append everything to it, append the fragment to the document. Not sure how JQuery exposes that functionality.

In terms of general performance stuff, it's faster to use dom-based APIs (like document.createElement and appending a text value to it) instead of something that needs to parse HTML out of a string.

# ¿ Feb 18, 2013 03:34

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

What happens if value.doMagic().toString() results in something that contains some HTML of its own?

This is another reason to prefer the DOM APIs - adding textual content is automatically safe, you don't need to escape things (and potentially forget about escaping it somewhere and introducing an XSS vulnerability).

# ¿ Feb 18, 2013 07:04

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

Does handlebars do contextual escaping? For example, if I do the following:

code:

<a href=/users/{{username}}>Visit {{username}} on Buttbook!</a>

Is that safe, or can I pwn everything by calling myself bob style=background-image:url(javascript:alert(1))?

# ¿ Feb 18, 2013 11:33

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

Elephantgun posted:

Was unsure what thread to put this in so I'll throw it in here:

I'm currently doing an interactive art piece using primarily CSS3/HTML. The link is http://dawnhosie.com/staircase.html and is obviously in heavy prototype.

My biggest issue is that this is constructed by using multiple gifs placed on top of a much larger gif. If you cursor over the top-left section of the gif it will change. Yay/cool/wow/woah, but unfortunately they're .gifs so they get out of synch on page load. For the sake of the school project I can not use JS as the main backbone to the piece so that's not an option - it has to be CSS3/HTML5. What I can use it for, is for coding details.[/url]

Why can't you use just one gif for each animation?

# ¿ Feb 18, 2013 11:38

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

Hey I have an idea guys, let's make our AJAX endpoint completely unusable by anything except the current iteration of our web application by having it return HTML designed to be stuffed straight into our web application instead of just sending back the data. There is no way this is a bad idea.

# ¿ Feb 19, 2013 17:45

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

The obvious solution is to use a template system that can be rendered on both the client and the server, instead of being arbitrarily limited to one or the other.

# ¿ Feb 19, 2013 21:24

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

americanzero4128 posted:

It's not super secure poo poo that will cause a black eye publicly, more stupid rear end policy and red tape; they want to implement a technical solution to a problem that stems from a lack of trust. It doesn't sound like the idea that I had is the way to go. Thank you everyone for your advice.

If they're using a service that wants them to pay per-user licensing, and they're trying to hack stuff up so everyone can use it while they only pay for one license, that could actually cause problems if it came out publicly. Just sayin'.

# ¿ Apr 4, 2013 02:07

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

Tres Burritos posted:

To make the cursor blink I used "setInterval" but I'm pretty sure that won't work for what I'm trying to do, will it?

Why wouldn't it work?

The easiest way to do this is to keep a copy of the string you want to display somewhere, and every 100ms or so append the next character in that string to wherever you're displaying it.

# ¿ Apr 5, 2013 04:48

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

I think the question really is "What advantages does using Coffeescript actually give you?". They're probably smaller than you think.

Just skimming the Coffeescript page, the big selling points it mentions are mainly various syntactic sugars, which are the sort of things that help make code in small projects a bit clearer, but don't really address the real problems you encounter when building large projects.

# ¿ Apr 17, 2013 14:04

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

The Insect Court posted:

Obviously, since Coffeescript is ultimately just Javascript, it can't really change the semantics. But given how much of a pain in the rear end a lot of Javascript syntax is to work with, syntactic sugar is a big positive. There are plenty of examples of Coffeescript one-liners involving syntactical sugar like list comprehensions that would require vastly more code in plain Javascript. The lack of a module system is a glaring oversight when it comes to programming with Javascript in the large, but that's not something Coffeescript can fix by itself, and the available solutions like requirejs are still compatible with Coffeescript.

I write JavaScript for a living and I don't think it's that much of a pain in the rear end. List comprehensions are nice and all, but I don't think I've ever encountered a situation in a real project (as opposed to a toy example) where just using various array utility functions isn't sufficiently clear.

# ¿ Apr 18, 2013 05:53

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

JQuery can't magically interrupt your javascript to wait for something to happen - it's not something that the language supports at all. You need to use a callback if you want part of your code to execute only after some asynchronous event has happened.

Promises are all about cleaning up callback soup and making them easier to manage, but it can't get rid of them entirely since the language doesn't support it.

# ¿ Apr 21, 2013 01:54

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

The usual way to do that is to have your init function set up its own callback on the promise that it gets back, and then just stop. So instead of looking like this:

JavaScript code:

function init() {
  doAsyncStuff();
  doMoreStuffAfterwards();
}

it looks like this:

JavaScript code:

function init() {
  doAsyncStuff().then(function() {
    doMoreStuffAfterwards();
  });
}

# ¿ Apr 21, 2013 05:39

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

I'm still not sure what's actually wrong with Javascript. There might be warty bits in the language, but no-one forces you to explore every nook and cranny when writing a program.

If you really want you could use something like Closure Compiler I guess.

# ¿ Apr 27, 2013 11:28

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

To be fair, the prototypal inheritance in JS is kind of wonkey - here's my favourite patch for it though:

JavaScript code:

function object(x) {
  var f = function(){};
  f.prototype = x;
  return new f();
}

And now you have actual prototypal inheritance instead of some weird compromise that kinda sorta looks like it could be either.

# ¿ Apr 28, 2013 03:45

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

Make your pop-up be an iframe, then you can write whatever you want into it and it won't be affected by styles on the containing page.

# ¿ Sep 18, 2013 06:50

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

code:

$.ajax(settings).done(function(result)

You're using an anonymous function as the callback for your AJAX request. That function will have its own value of this, determined when that function is actually called.

Assuming you only need to handle modern browsers, the best way to work around that is to use Function.bind:

code:

function (whatever) {
  // code...
}.bind(this)

Using bind "locks in" the value of this for that function, so that no matter where it's called, the value of this inside the function will be whatever was passed as the first parameter to bind.

# ¿ Sep 29, 2013 14:02

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

Mogomra posted:

Here's a stupid question that doesn't deserve its own thread. What's the deal with "new," or rather not using it? What's the logic behind defaulting "this" to the window, or whatever the global object is? Why not default to "this" from the scope that the function was called? It's stupid, and there's no reason not to use "new" when it's needed, I just don't get why JavaScript does what it does when you leave it out.

Constructors are just regular functions. Understanding that fact will answer all your questions.

# ¿ Oct 22, 2013 03:04

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

The big thing is that now each object has a pointer to every single method (instead of what is effectively a vtable pointer to the prototype), which is quite a lot of bloat for classes with a lot of methods and not many data fields.

# ¿ Oct 23, 2013 05:14

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

You don't need to save the page in order to look at the HTML as it's being rendered - just press F12 in any non-poo poo browser.

# ¿ Oct 26, 2013 00:27

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

DholmbladRU posted:

To make it quicker I decided to "prebuild" the google maps api syntax necessary to render each polygon, this would be stored in a database.

Why did you choose to do this? Did you benchmark and determine that reading in your JSON was the bottleneck in your code?

# ¿ Nov 1, 2013 03:17

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

Given that "constructors" in JavaScript are just regular functions, what were you expecting the value of this to be?

# ¿ Nov 5, 2013 04:40

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

pr0metheus posted:

a new instance of currently executing function?

You want this to happen on every single function call?

# ¿ Nov 5, 2013 07:40

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

pr0metheus posted:

Yea. Like a real constructor.

Constructors are just regular functions in JavaScript. Literally the only distinction is whether or not you use "new" when you call it.

Do you seriously want the runtime to try to guess whether you're loving up, and completely change the meaning of perfectly valid code when it thinks you are?

E: I mean, that "the user might be an incompetent buffoon so let's completely change what the code does if we think they made a mistake" idea is responsible for quite literally the worst anti-feature that JavaScript has.

Jabor fucked around with this message at 07:58 on Nov 5, 2013

# ¿ Nov 5, 2013 07:54

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

The "create a new object and use it as the value of this" is entirely a property of the new operator - new f() is fundamentally equivalent to

code:

var o = Object.create(f.prototype);
f.call(o)

I guess it is syntactic sugar of sorts. JavaScript is kind of weird in that it has prototypal inheritance, but then it made a bunch of compromises (such as the new operator) to make it more appealing to people who were used to class-based systems. It's only relatively recently that things like Object.create have been added to let you do prototypal stuff properly.

# ¿ Nov 5, 2013 09:08

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

Jam2 posted:

Has anyone here used...

It's probably best to just assume "yes" and if you have any questions, ask them.

# ¿ Nov 6, 2013 11:43

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

Munkeymon posted:

There's this thing https://developer.mozilla.org/en-US/docs/Web/CSS/element that FF supports that might let you do it on there and maybe everywhere else some time in the 2030s.

I'm going to assume this doesn't actually give you access to the pixels of the element, only allows you to use it in some other contexts that expect an image.

# ¿ Nov 7, 2013 00:39

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

Pollyanna posted:

Is there a simpler way to choose a random entry out of a list than going Math.floor(Math.random * len(list) ) or whatever?

Not be default, though many JS frameworks have a convenience function that gives you a random integer in a given range, just because it's so helpful.

If you're not using a framework, writing a small utility function so you can just write randomInt(len(list)) instead of writing the whole Math.floor(... thing every time is probably a good idea.

# ¿ Dec 7, 2013 23:46

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

Munkeymon posted:

If someOtherValue is undefined, it's an error and you get a big fat nothing. You could use window.someOtherValue to try to work around that, though.

Kind of. If the variable hasn't been defined, then yes it's an error - however, if the variable exists but has the value undefined, it works fine.

Notably, this works:

JavaScript code:

function foo(bar) {
  var actualBar = bar || "defaultBar";
  //...
}

foo() // Same as foo("defaultBar")

Since bar appears in the parameter list, the name exists, and the value will be undefined if it isn't specified when the function is called.

# ¿ Jan 1, 2014 00:33

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

The one thing to be wary of is documentation that may become inaccurate. Comments should generally be local in scope, otherwise you're likely to forget to update them when you change something elsewhere that happens to affect your comment. In general, wrong documentation is worse than not having documentation in the first place.

# ¿ Jan 22, 2014 00:39

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

You can use fs.stat() (and variants) to get information about a given file, including the size and whether it's a directory.

So you can check every file you come across, if it's a file just use the filename directly, if it's a directory get all the files in it and look at them all to pick out the largest one and use that.

# ¿ Feb 16, 2014 13:33

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

The HTML5 History APIs are widely-supported, just find a routing engine that knows how to use those instead of hacking it with hashes (or that only hacks it with hashes when the APIs are unsupported).

Or if your setup is literally just a bunch of pages and a fixed map of urls => pages, save yourself the bandwidth and write it yourself instead of pulling in a ~~glorified regex matcher~~ "routing library".

# ¿ Apr 24, 2014 14:49

Adbot: ADBOT LOVES YOU

# ¿ May 13, 2024 13:26

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

mmachine posted:

By widely supported, do you mean SEO-friendly and responds properly to a request by a crawler?

Well no, you've got to code that yourself. The History API basically lets you go from example.com/butts to example.com/fart without reloading the page, so you can have clean SEO-friendly URLs while still having slick animations and transitions between pages.

The important thing to remember for SEO is that crawlers don't run javascript on your pages, so you need to be able to render content on your server when asked (which shouldn't be a problem with a reasonable templating system). The best way of implementing what you want is probably to:

1. Use regular links to travel from one page to another. Crawlers know how to follow links.
2. When a browser requests a particular page directly, have the server render the content and serve that page. This is mainly for the benefit of crawlers, but it also means your regular users get faster load times since it's rendered immediately rather than in javascript once everything's been downloaded.
3. When the user clicks on a link on one of your pages, intercept that, cancel the default action, render the new page client-side and replace the URL.

quote:

I've thought about this too, though for this project doing it that way would probably make the final code super un-maintainable very quickly. This is a front-end heavy design, so from the client's perspective minute details are key, which means a lot of my workflow will encompass lots of minor tweaking and adjustments.

None of this seems related to the "mapping urls to pages" part though? I mean if the client wants you rename the "farts" page to "fartz" you're still going to have to tweak the route mapping whether you're using a library or not.

# ¿ Apr 24, 2014 15:42

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

«‹›3 »