Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
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.

Adbot
ADBOT LOVES YOU

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.

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?

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

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?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Safe and Secure! posted:

So I've been using require.js for one small project of mine, and it has been helpful. But now I'm looking at starting a new project where I'll be using node.js and multiple Javascript libraries instead of writing everything I use myself, and I'm wondering if using require.js is going to be more trouble than it's worth from here on out.

I imagine most people aren't using require.js. How are they managing dependencies?

I'm personally using head.js with the project I'm currently working on. Once I got the kinks out it worked well with the AngularJS app I'm making, delaying the services until the local database object is good to go. This is a client side project only.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Jabor posted:

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.

I'm building an offline and sync web application so this sort of interests me, I've been thinking a bit about how security works what with alot of your code readily accessible. It's just an offline prototype at the moment, but I'm planning on syncing through JSON and a standard authenticated login session. Is there anything particularly naive about this? Are there any recommended resources available for security best practices in javascript applications?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Blinkz0rz posted:

Can you elaborate a little bit more on the web app you're working on? I've been thinking about developing a similar system and I'm curious if you could discuss issues you've run into with with offline data.

Sure, I'm building a GTD style task management + notetaking application, a lot of the application is built upon a text parser which means you can set your appointments, project, errands, as you think of them in your notes. The app does the organizing. My thinking is to build an offline prototype that shows off the ethos behind the interaction and the execution, and I'm planning on running a kickstarter to help fund the remainder of development, to see whether what I'm building is actually worth knuckling down and finish.

The storage layer is very much experimental, I wrote all the indexedDB by hand, from having never done any javascript storage work before. The biggest obstacle was getting past the asynchronous nature of indexedDB calls. I made a little library to handle that using callbacks, so I can do multiple queries in the one request and get it back only when all asynchronous calls were done.

It's in coffeescript, hacky as poo poo, but you should be able to get the picture.
https://gist.github.com/5d34635659a79014cec3

Realistically this problem will be solved much better by others so if I'm successful with the prototype I'd rip out the storage layer and look into library options. Maybe JayData. This is especially important for mobile support since most browsers have not yet adopted indexedDB.

IndexedDB can be slowww, but my queries could be made much more efficient so I could improve things there, there is a lot of talk about how it is much less efficient with large data stores though.

IndexedDB won't accept boolean values for indexed attributes (bahhh), so some of what would be booleans are unfortunately "true" or "false" strings at the moment. Which is annoying.

As I said, I would very likely move to a library that can do all the nitty gritty for me. I was learning javascript as I was making this, and the storage layer was made in an early part of the game so it's pretty poo poo. Gets the job done for the moment but getting slow with a large data store.

Dunno whether this helps any, as I said I'm pretty new to javascript applications where it is actually used extensively.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
The problem is that you're using a scope item in a callback. Because of that, the angular $scope is not actually watching for changes during that callback, so the scope is updating later than the end of the callback. Of course this type of code is common as hell so you just need to tell angular to apply the scope changes by using $scope.$apply()

code:
function MessageListCtrl($scope, $routeParams, $http) {
  $http.get('chat_messages' + '.json').success(function(data) {
    $scope.messages = data;
    $scope.$apply()
    $("#chat").scrollTop($("#chat")[0].scrollHeight);
  });
..
}

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Ah okay, admittedly I've mainly been working with offline storage so I didn't even twig that it was an angular service. Duh, still learning. That said though, the scope application wouldn't happen til after completion of the callback, or is that wrong?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
http://jsfiddle.net/F5NC3/9/

Try this, rather than using a while function you could recur the calls using setTimeout. That said, other people know much more than js than me so I may be misguided.

edit: I left delay in the jQuery call cause I'm slack, but it doesn't need to be there anymore.

Maluco Marinero fucked around with this message at 23:33 on Nov 30, 2012

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Yeah. I wasn't aware of setInterval, js noob here. I'd probably use that, I prefer to use guard conditionals when I'm using if else stuff so I'd prefer that.

edit: It also reminds me of troubles I had with recursion when I was getting started with javascript and asynchronous stuff. You can't use a while loop to wait for a result because while loops own the whole process until they finish. That means anything asynchronous (like a jquery delay call), won't run at all until the while loop is actually finished. I've got that right yeah?

Maluco Marinero fucked around with this message at 23:51 on Nov 30, 2012

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Does Javascript allow you anyway to save a text file through a dialog, WITHOUT a server? Common sense says no as it'd be a security vulnerability, but I wanted to make sure.

Basically I have an offline application that I'd like to be able to Save and Load the data stores into and from a JSON text file. I can serialize and read no problems, but will I have to set up a server to bounce the string back as text file, or is that not necessary?

edit: On further investigation I doubt this would exist if it were the case, but it'll do.

Maluco Marinero fucked around with this message at 11:48 on Dec 5, 2012

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Movac posted:

Since this is your first login system and you mentioned MD5, I feel compelled to mention that MD5 is strongly discouraged for use as a password hash. It's quick to brute-force, so should your user database ever be exposed, the attacker will easily be able to obtain most of your users' plain-text passwords. Use bcrypt instead.

Also, USE A LIBRARY to handle as much of this password stuff as possible. Passwords are a common problem for which you should NOT reinvent the wheel unless you absolutely know what you're doing.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Gordon Cole posted:

The project you provided appears to use Flash, which allows you to save files. However, that sounds like overkill for what you're trying to do. Browsers don't give you direct access to the file system, but they do let you persist data in other ways. Try looking into HTML5 local storage.

I'm already persisting data using IndexedDB. I want to provide a way to export that data into a text file, which is why I had a look in at the Flash project. While the link that SD provides seems interesting I'd still have to have a server precompile the resource I'm after for it to come out right, yeah?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Gordon Cole posted:

Ah I see, I misinterpreted the question. I have less experience with what you're asking about, but Wheany's solution seems to work really well.

Yeah, Wheany's solution looks to be the most straightforward way to do what I want, gonna try it out later tonight. Cheers for the answers folks.

edit: Wicked, works a treat. Thanks a ton. It's cool having a completely offline web app that can now save and load like it was a Desktop App.

Maluco Marinero fucked around with this message at 13:30 on Dec 7, 2012

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
http://code.google.com/p/flot/

My last project I used Flot to make bullet graphs. If you spend a little time you can get the graphs to do almost anything you want, without reinventing the wheel.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

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?

Yeah, for a language that is very specifically white space dependant like Python it's entirely understandable. For a language like Javascript that's full of gotchas, why add one more for maintenance programmers to get tripped up by.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Yeah, just DON'T use alert. It is always a slower debug tool than the variety of modern options you now have. If you need to be able to stop and analyze you can use breakpoints in your browser or drop:

code:
debugger;
into your code.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
To add, that's meant to be a performance optimization as well. By giving something an ID, it means Javascript and (I think) CSS in general can just find the first instance of that ID and then stop looking immediately, unlike with classes where it must continue looking through the DOM for matches.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Borderview posted:

I'm designing a survey within Qualtrics and am wondering how to add grayed-out text to a text entry box so that it says "Click here to begin typing. . . " When the text box is clicked, I want the grayed-out text to disappear. So pretty much how Facebook has their comment text box that says "Write a comment. . . "

In Chrome, I tried to "Inspect Element" to snag Facebook's code, but that didn't work in Qualtrics (I'm pretty clueless about this stuff and just try to find script that works. . . sometimes I get lucky. Sometimes).

Thanks for the help!

Can you access the HTML for the survey? Using HTML5 attributes will cover most of the modern browsers. That I guess depends on what you expect your users' browsers to be. You have analytics on this from previous surveys?
code:
<input type="text" placeholder="Click here to begin typing...">
Otherwise you'll have to have a search around. There are libraries for it that work well cross browser, but you might not be able to use them yeah?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Condiment posted:

I've found that modularizing has diminishing returns as the size and complexity of the app grows. You reach a point where you have to split your code up into separate files and directories in order to separate concerns and keep things sane.

To avoid having 15 separate HTTP calls in your app, there are build tools like Require.js that can concatenate all the files across your entire project into a single, minified file for production.

Yeah, I use Coffeescript, but this is sort of what I do. Difference is I use head.js and a Cakefile to manage building. When running development all the files are loaded in their separate files. When I build a deployment it concatenates all the files into a single.

That way you split concerns enough to make it easier to debug in the console, whilst keeping the HTTP calls down once you deploy. There's tools for that like CoffeeToaster, but I wanted to keep my structure and was already well into the project, so I just rolled my own solution.

In the end of the day client side applications are getting to the point where they compare in complexity to server applications, so your strategy will have to follow in step. Definitely make sure you're layering your services, modules, whatever in a way that doesn't tightly couple the whole lot, and organise your code to suit.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Would it possibly be worth investigating a template engine like HandlebarsJS? I don't really have experience with it but I'm assuming there's a point where building things bit by bit in jQuery is bad form for maintainability at the very least.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I'd love to hear this too. I built this prototype but I have a few thoughts to how I can do things better next time around. In a complicated application you definitely need to make more use of custom directives to make things more performant, I think, as some of the built in ways to handle hiding and what not can be very slow indeed. Leave a lot of cruft in the DOM to slow things down.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I don't know much about Node, but you should look into Promises. https://github.com/kriszyp/node-promise They allow you to put together non blocking operations and then trigger actions with their result on completion. They're an alternative to using function callbacks everywhere, and are more flexible and easier to handle.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Knyteguy posted:

Hey that looks great, thanks for the link.

No probs, when I was learning my way around Javascript to build a client side app I never really knew about them so I just had layers of callbacks. Sort of regret that now, promises are a much better solution, good thing what I made was just a prototype. :)

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Stoph posted:

I find that static analysis, such as with JSHint, is a nice reason to prefer JavaScript over CoffeeScript. It's much easier for my editor to tell that I made a syntax error and flag it right when I hit enter to start a new line. That's also why I use semi-colons in JavaScript - if I forget to finish a line then my editor will flag the line immediately using JSHint integration.

That's just a case of the tools catching up though really. I use Coffeescript for my personal projects, and in my opinion it beats Javascript hands down for reading and writing. Javascript has a shed load of bracing and it turns into a soup at times, even when you manage it well, where as Coffeescript gives you the syntax in whitespace to make that structure easier to follow. Syntax checkers don't always catch dropped braces, which is very difficult to catch by eye as well; entirely white-space dependant structure is much easier to read and debug in my opinion.

With my setup (Vim using Syntastic) I get a syntax check every file save, which has been enough for me -- Coffeescript is simple enough that I don't tend to make many typos, and it simplifies all the verbose stuff in Javascript so you end up with very little to get wrong. For what it's worth I've never bothered with Source Maps either, the Javascript output is really not that much different from the Coffeescript, so I've never had problems following it and relating back to the source.

Jabor posted:

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.

Yeah, I can agree with this. It doesn't provide anything you need to make managing large Javascript projects necessarily easier, you still have to figure how you want to modularise your code and structure it at a high level perspective. That said though, readability is huge in large projects because you're much more likely to hit code that you don't remember and need to relearn, which is where easy to read structure comes in handy.

I don't think it's enough of a difference to be worth translating all your code in a large project, unless you have some really poorly styled Javascript on your hands, but in greenfields I reckon there's definitely benefits.

Maluco Marinero fucked around with this message at 14:12 on Apr 17, 2013

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Heyo, I'm writing a WebSQL / IndexedDB Abstraction and I've hit a little roadblock in understanding with WebSQL. The objects that come out of a query are read only so I can't do anything with them, what's the correct way to make them mutable? Or should I just read variables out to a copy?

edit: Well,I just did object copying cause it's easy (yet for some reason I didn't think fo that til I did this post). Still, can you remove readonly status from an object's properties?

Maluco Marinero fucked around with this message at 13:52 on May 5, 2013

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Wheany posted:

Congratulations, you just took your first step into Javascript. Callbacks as far as the eye can see.

and promises.. They're fun too.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Wheany posted:

And I just want to warn you that as a new convert I just might become insufferable.

Tell me about it. My first work where I dove into a 100% promise driven approach was this WebSQL/IndexedDB API I've just started on: http://malucomarinero.bitbucket.org/johodb/

It's blowing me away how powerful promises are, especially when you're processing a stack of asynchronous actions, and then Q will wait for them all to finish and then output an Array of the lot in sequence. It such a clean and logical way to deal with this stuff, and greatly simplified my life in writing an API for asynchronous storage.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
What's the 'correct' way to do a stepped jQuery animation when it's two separate element sets doing the animation? .animate() callbacks work but are called per element so it's pretty wasteful, I ended up settling on:

code:

$('.elements').stop(true).animate({
  opacity: 0
}).first().queue(nextStepFunction);

The stop is there so it can change direction (with an opposite anim) and do that instead. The case where I use this was a set of table rows that needed to accordion, the second step was a slide up although I had to some wrangling because animating table cells directly is pretty weird.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Can't see anything wrong with your call to $http. Have you had a look at Cross Origin Resource Sharing?

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Lack of setting it up might be preventing your Javascript from accessing a domain outside the webpage that called it. I know on my last 48hr hack project we ran into that problem with accessing a PHP backend from Angular. We got it working but I didn't end up being the one fixing it so I don't know the details. Probably a line of inquiry for you.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
You should be able to access the globals like jQuery just fine, it doesn't really go around clobbering everything because it makes use of dependency injection. Is everything loading properly in the first place? Any logs you can provide, how far is your angular apps execution going?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

ARACHNOTRON posted:

It loads up the page but breaks scope when I try to use geoip because it isn't loaded until after it's referenced, since I have to GET from maxmind. I just now figured that out and loaded it before angular but I'm getting an e401 for some reason. At least the rest of the page loads fine :shrug:

As far as JQuery goes I have no idea, I might not even be using it right now -- I'll have to check. I thought I was.
If you want you can link me the code, I'm used to running initialisation on it with asynchronous dependencies. That said, if you wanna investigate yourself look into loading up angular explicitly rather than letting it bootstrap itself. Look up angular.bootstrap in the API, that'll allow you to control the loading of angular in more detail.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Skiant posted:

Fair point.

I admit I'm a bit of an extremist when it comes to be super-organized from the ground up even for small projects, because in almost every job or side-project I had so far, there was always a moment where a small one-off became a huge, messy project full of spaghetti and no one wants/has the time to clean it up.

I'm contracting on one of these right now. No one wants to be the guy who says to the client, 'we need to stop adding/changing features because we need to pay back technical debt'.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Strong Sauce posted:

Javascript is asynchronous so you can't just return results so you have to use callbacks.

Except you can 'almost' get it like that if you use promise structures, like Angular's stripped down implementation of Q, which are incredibly powerful once you get your head around them.

After writing an indexedDB/websql library in them I just love them to bits. They'll make reasoning and passing around asynchronous operations/results so much more flexible and easy to manage without inadvertently creating race conditions

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Yeah, mapping directives to XML seems to me like you're begging for issues down the track. You'll be hard coupling the presentation with the data source, and leaving yourself no flexibility for moderate changes.

Directives are best used as reusable DOM chunks & logic, not a direct data to presentation mapping.

Edit: Also you'll be unable to make proper use of Angular's data model because of the compile->link setup of directives.

The whole point of supporting JSON is it directly maps to a JavaScript object so it can be bound to the Angular scope. Even if you parsed the XML to something that literally replicated the XML tree in a JavaScript object, you'd still be in a much better position to properly make use of Angular features.

Maluco Marinero fucked around with this message at 11:02 on Aug 20, 2013

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

abraham linksys posted:

:eng101: JQuery and Ember.js both use QUnit to great success! Though you can of course use QUnit with Chai+Sinon too.

I've also seen Jasmine used... somewhere? It's definitely used in places that I cannot remember at the moment.

I'm using Jasmine for my offline storage library. (http://malucomarinero.bitbucket.org/johodb)

They're more or less increments of eachother from what I've seen, although I haven't had a good look to see which the most advanced of them all.

Maluco Marinero fucked around with this message at 06:29 on Aug 25, 2013

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Tres Burritos posted:

:aaa: gently caress gently caress gently caress gently caress gently caress. I had firebug installed and everything, Jesus this makes everything so much less painful.

edit: specifically I had no idea that you could set javascript breakpoints.


:suicide: It pains me so much that you had to type that out.

Yeah. If anything has a metric poo poo ton of Google-able answers its JavaScript and jquery. The amount of scenarios where someone hasn't asked the question before you have is minimal, even in advanced cases.

Adbot
ADBOT LOVES YOU

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I like AngularJS and I'm currently using it for a number of projects, but Christ on a tricycle the documentation sucks. Beyond just content, the whole structure needs to change from a series of disjointed articles. Contemplating rewriting as a project to take up, it really can't get that much worse.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply