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
Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

revmoo posted:

AJAX is a QA nightmare and makes debugging things a lot harder.

Could you expand on these two things?

Adbot
ADBOT LOVES YOU

kloa
Feb 14, 2007


Data Graham posted:

I tend to avoid full-page POSTs like the plague, and instead do everything with AJAX. I don't even use <form> tags anymore; I just serialize everything manually in JS.

The Ajax/Form helpers are pretty nice in ASP.NET :thumbsup:

Data Graham
Dec 28, 2009

📈📊🍪😋



I'd guess it's because debugging a form post in a traditional page is like

"View source, find the form action and/or submit button"
"See what the form posts to, dig into server side code"

Whereas for Ajax it's

"Dig through DOM for button or element that triggers the post"
"Rummage through opaque JavaScript (which may be inline or may be in any of several external files) to find the event handler attached to the element, because it's probably not just stuck on with an onclick()"
"Find what the Ajax call is posting to, and figure out whether what you're debugging is server-side or client-side behavior"
"Debug accordingly"

Plus for frameworks like Django that double down on the "form" semantics, Ajax means you're tossing all that potential pre-built functionality aside.



...All that said, I still prefer Ajax conceptually because it seems better suited to MVC. I can do all my Ajax interactions and CRUD operations via JSON and have the page react smoothly, instead of having server-side logic embedded in a page or set up to spit out HTML pages or redirects. I know it's of course possible to do fully MVC-style ops with full-page POSTs, but it's technically possible to do anything; it just seems backward to me.

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.
Chrome debugging tips!
Each XHR request has an "Initiator", which is the stack trace of the dispatch (just hover over it). This usually gives you somewhere to start - hopefully you'll recognise a file or class name as you click through the stack.

Obviously you can't debug badly written JavaScript any more than you can debug badly written PHP. Code quality is paramount.

Also if you have minified code, you can prittify it - and add breakpoints that do work, but clicking the "{}" icon:


For me, AJAX forms are more effort than just plain Symfony forms, and this is why a lot of our forms don't use AJAX. Why? Because any submit (AJAX or otherwise) needs to use Symfony's Form system, which provides structure, validation, constraints and usually entity creation on the server-side. When we build all that, we basically get the HTML form for free, whereas adding AJAX to that requires extra work (events, what to do on validation errors, what to do on network errors, what to do on logout, etc).

I'm trying to rectify this by allowing us to use jQuery.Validation in conjunction with a form error serializer on the server-side. This means besides actually dispatching the AJAX, there's a grand total of two extra method executions required (one on PHP, one on JavaScript) to get full form validation pumped back to the user, mapped to the appropriate fields.

Where AJAX really becomes useful is where we have more than one form that needs to be submitted.
Pretend for a moment I have a Document which needs to be filled out (form 1), but when I publish that document I need to provide a comment to go with it (form2). I could arse about with optional form fields and constraints so symfony handles all this as a one form, or I could just compile them both into a single request using JavaScript and submit both. Symfony can then read and handle both sets of data in the single request. If I'm just saving the document (not published), I only submit the document form.

Yes, if you're not using symfony you could just hand-craft a single form, do empty checks on fields etc, but this approach actually helps to separate concerns (save & publish vs. just saving) and segregates chunks of crap from other crap.

Personally, I prefer well implemented AJAX because it gives a much better user experience.. though a poorly implemented ajax submit is a nightmare.

v1nce fucked around with this message at 00:58 on Jun 2, 2015

Sauer
Sep 13, 2005

Socialize Everything!
Assuming the data you want to store between pages isn't sensitive information wouldn't it be easier to just use localstorage? It seems to be supported on everything these days.

I am not a web developer.

Sedro
Dec 31, 2008

Sauer posted:

Assuming the data you want to store between pages isn't sensitive information wouldn't it be easier to just use localstorage? It seems to be supported on everything these days.

I am not a web developer.
Until you want to use more than a few MB. Then you run into browser specific size limits, inconsistent UIs nagging the user to increase the limit, no clear way to change those per-site limits...

Data Graham
Dec 28, 2009

📈📊🍪😋



And a surprising lack of clear documentation about how localStorage objects from different sites are kept secure from one another.

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India

Sedro posted:

Until you want to use more than a few MB. Then you run into browser specific size limits, inconsistent UIs nagging the user to increase the limit, no clear way to change those per-site limits...

What is the use case where you would ever want to use a few MB locally?

Funking Giblet
Jun 28, 2004

Jiglightful!

Data Graham posted:

I tend to avoid full-page POSTs like the plague, and instead do everything with AJAX. I don't even use <form> tags anymore; I just serialize everything manually in JS.

My feeling is that if you've navigated to a given page, that page is itself an "application", and all your interactions with the data in it should take place within that app's "runtime", i.e. without requiring the page to be reloaded for any reason. The browser should not be required to navigate from a page to itself, or put spurious entries into its history. You should be able to go back to a page at any time and get a fresh complete session without having to worry about state or which entry in the history is the "right" one.

I've actually been asking myself whether this is because I just have such a deep-seated aversion to the classic browser behavior with POSTed data—"You hit Back, are you sure you want to submit the data again? How about now? Shall I send your credit card information too, along with this Delete command?" —or if it's actually got some merit to it.

Can someone comment on this practice? Is it becoming "standard" nowadays to do all form interactions via JS/AJAX, and never subject the user to a history-breaking workflow interruption or confirmation prompt? Are there hidden dangers? I know there's the "accessibility" argument, i.e. text-mode browsers and screenreaders for the blind and so on, but isn't even that becoming less of a consideration as accessibility tools themselves get better?

You should still use forms, even if you are serializing them.

edit: what the hell, where did all these posts come from!

Data Graham
Dec 28, 2009

📈📊🍪😋



Funking Giblet posted:

You should still use forms, even if you are serializing them.

Why is that?



I ask because a lot of times I find myself creating tiny little fragments of interactivity on the fly, like maybe with one input field, that get fed into an AJAX endpoint and then the form gets destroyed or rebuilt, and there may be a dozen more on the page. It seems like the form semantics are just superfluous if I'm not going to be taking advantage of a traditional Submit button or an action attribute.


E: Plus if I'm actively not going to be using a traditional submit, I then have to jump through hoops to prevent any buttons that ARE in the form from doing the default submit behavior, with "return false"s and preventDefaults and so on.

Data Graham fucked around with this message at 11:55 on Jun 2, 2015

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Data Graham posted:

Why is that?



I ask because a lot of times I find myself creating tiny little fragments of interactivity on the fly, like maybe with one input field, that get fed into an AJAX endpoint and then the form gets destroyed or rebuilt, and there may be a dozen more on the page. It seems like the form semantics are just superfluous if I'm not going to be taking advantage of a traditional Submit button or an action attribute.


E: Plus if I'm actively not going to be using a traditional submit, I then have to jump through hoops to prevent any buttons that ARE in the form from doing the default submit behavior, with "return false"s and preventDefaults and so on.

Screen readers and other accessibility aids might not handle it right.

Blinkz0rz
May 27, 2001

MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

Munkeymon posted:

Screen readers and other accessibility aids might not handle it right.

Yup, AJAX is miserable for accessibility unless you're very careful about how you make your forms and whatever feedback that you provide.

If there's ever a question about whether you have to make your site accessible or, God forbid, 508 compliant it's better to use forms and regular HTTP requests.

Sedro
Dec 31, 2008

Gmaz posted:

What is the use case where you would ever want to use a few MB locally?
I can't recall off hand which sites hit that limit, but they do.

Sites use localstorage to cache dynamic content, either to make the site more responsive or to make it available offline.

Data Graham
Dec 28, 2009

📈📊🍪😋



I ran into it building a mobile app that had to store its entire state (including all content, which the user had to work through in a long list) locally in case the tablet crashed and had to come back up in the middle of a processing job. Sometimes that JSON object was 1mb+.

kloa
Feb 14, 2007


Is there a limit on Ajax form inputs, say a text box?

I, uh, set the "comments" section to varchar(max), but now I'm wondering if I should be a reasonable limit, like 4000-10000.

The existing app we use is 2000 limit, but it's not enough, so the new app I'm building needs a bigger area - hence the MAX setting.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Most web frameworks will have a configurable size limit for incoming requests. Any API should have it already appropriately set for expected payloads, but for your own form usage check what the default limits are. Nginx / Apache may also have a setting for it but have never had to configure there so unsure.

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.

Blinkz0rz posted:

Yup, AJAX is miserable for accessibility unless you're very careful about how you make your forms and whatever feedback that you provide.
If there's ever a question about whether you have to make your site accessible or, God forbid, 508 compliant it's better to use forms and regular HTTP requests.
508 is analogous to WCAG 2.0 AAA, from what I can tell. WCAG doesn't have provisions specifically against JavaScript and AJAX, but you're right that you do have to be careful how you implement your validation responses. For instance, just jamming the validation errors into a container and not then changing the users focal point means there's no way in hell someone on a screen reader will ever find the errors.

As I said in my last post, badly implemented AJAX forms are a nightmare. Good ones are seamless. The problems usually come from everyone learning to use AJAX in a step-by-step manner; first they learn to submit, then they learn to get errors, and then they crowbar those errors into their forms in any way they'll fit. It's not until you have the entire cycle that things start to get implemented correctly. In our system that meant stopping everyone from reinventing the wheel, then having one approach which generates errors, and one approach which merges them back with the form they came from.

WCAG, especially for screen readers, needs syntactically correct HTML and structure. Putting the inputs inside a single <form> element is definitely a thing, if you're targeting accessibility.

kloa posted:

Is there a limit on Ajax form inputs, say a text box?
In Apache this is LimitRequestBody, which is usually off. I think the max is 2GB.
In PHP this is post_max_size, which defaults to 8Mb. That's quite the comment. You probably want to limit it to something more sensible before it ever reaches the DB. If it's then stored as a VarChar or Text, that's up to you. The difference is only a byte or so per field, iirc.

There's also a field limit in PHP, which is max_input_vars. The default is usually 1000 fields. This is the stuff that will show up in _POST.
If your form gets that retarded huge you can always push your data down one var as a JSON string, which isn't great, but should work.

But if you're generating a form which is that huge you probably have other issues you need to look at, like usability.

Chris!
Dec 2, 2004

E
I wonder if anyone here can help: I saw a website a little while ago, I think it was linked from this thread but might be wrong, with an interesting hero section on their homepage.

The background was a grid / collage of small images (I believe they were examples from the company's portfolio, but might be wrong), with individual images in the collage animating / changing to different images, seemingly at random. There was text or something in the foreground in front of the small animating images.

I didn't bookmark it at the time and would like to see it again. Anyone know what I'm talking about?

Kekekela
Oct 28, 2004
drat I've probably destroyed some screenreaders in the name of (what I thought was) slicker code. :smith:

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Kekekela posted:

drat I've probably destroyed some screenreaders in the name of (what I thought was) slicker code. :smith:

You and 99.9947% of web developers. Sadly, accessibility is not on most people's radars.

Funking Giblet
Jun 28, 2004

Jiglightful!

Data Graham posted:

Why is that?



I ask because a lot of times I find myself creating tiny little fragments of interactivity on the fly, like maybe with one input field, that get fed into an AJAX endpoint and then the form gets destroyed or rebuilt, and there may be a dozen more on the page. It seems like the form semantics are just superfluous if I'm not going to be taking advantage of a traditional Submit button or an action attribute.


E: Plus if I'm actively not going to be using a traditional submit, I then have to jump through hoops to prevent any buttons that ARE in the form from doing the default submit behavior, with "return false"s and preventDefaults and so on.

Why are you doing all that? You should use forms because the form should post to the end point no matter what. Scripts will break in production due to erroneous GTM usage, or bad CDNs or whatever. If you can live with your web app failing, that's fine, but the default behaviour should be baked into the website using as much of the traditional methods as possible. Use JavaScript to augment the experience. A lot of server side language support stuff like React rendering which means you should be able to accomplish complicated views with more traditional fallbacks.

reading
Jul 27, 2013
I need a way to show snippets of syntax-highlighted code in various languages in simple HTML if possible (or in javascript ). Anyone know what I can use for that? The goal is to have code snippets in a website which is otherwise just static HTML without having to manually format every dang example.

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.
java script: Prism or highlight.js
Or if you hate yourself and others, there's tohtml.com.

Prism looks the best, but kinda depends on which has the support for the languages you want to highlight.

huhu
Feb 24, 2006
Using JavaScript, jQuery, AJAX, and/or JSON, is there a way to turn all the files in a directory into an array? I'd like to be able to pull all the images from a folder and have them display on a page and have this update whenever I decide certain images shouldn't be there and I can just remove them from the folder.

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.
Well, you've got two options, as I see it:
1. You AJAX request to your server and have it respond with a JSON list of files.
2. The script that generates the page provides JavaScript variables at render time, so it's statically loaded with the page.

Option 1 can dynamically update at a given interval over AJAX, making repeat but small requests to your server. Your JavaScript can then update as appropriate.
Option 2 makes the content only update when you refresh the page. This might be fine, depending on how "up to the minute" your data needs to be, or if your UI is some kind of JavaScript webapp.

I'm a PHP man, so here's a dirty PHP solution (modified len from here):
php:
<?
// images/index.php

// Current directory
$dir = opendir(__DIR__);

// Get files
$files = [];
while ($file = readdir($dir)) {
    // Ignore parent directory references
    if (in_array($file, ['.', '..']) {
        continue;
    }
    // Ignore directory references
    if (is_dir($file)) {
        continue;
    }
    // Log all files
    $files[] = $file;
}

// Spit out JSON
header('Content-type: application/json');
echo json_encode($files);
?>
An exercise for the user is making that only fetch images. Look at SplFileInfo::getException for that.

And some lovely jQuery (modified from here):
code:
$.ajax({
  url: "http://example.com/images/index.php",
  success: function(data) {
     $(data).each(function(){
        console.log("File: " + this);
     });
  }
});
You can wrap the $.ajax call in a setInterval, and then the script will harass your server for a file list at a duration you specify:
code:
var refreshSeconds = 5;
var intervalHandle = setInterval(function() {
    // Put AJAX here
}, refreshSeconds*1000);

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Option 3 is long polling and option 4 is websockets.

neurotech
Apr 22, 2004

Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

Can anyone recommend some good reading about securing a REST API? I'd like to know what the modern thinking is around best practices, etc.

revmoo
May 25, 2006

#basta
Are domains from 1996 inherently valuable? I've got an unused domain I keep renewing just for the sake of 'real estate speculation' and I'm wondering if I should keep paying for it. It's not a common or short name or anything, but I could see it having some value in 5-10 years as .com domains continue to get bought up.

EDIT: It's a PR4 if that helps, and that's after sitting completely idle for the last several years.

revmoo fucked around with this message at 18:10 on Jun 8, 2015

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

revmoo posted:

Are domains from 1996 inherently valuable? I've got an unused domain I keep renewing just for the sake of 'real estate speculation' and I'm wondering if I should keep paying for it. It's not a common or short name or anything, but I could see it having some value in 5-10 years as .com domains continue to get bought up.

EDIT: It's a PR4 if that helps, and that's after sitting completely idle for the last several years.

My guess would be that no, there's nothing inherently valuable about an old domain. awesomechicagocarsforsale31.com is just as worthless now as it was in 1996.

kedo
Nov 27, 2007

Alright, sanity check. I'm dealing with a weird CMS that outputs class names in the <body> tag that look like this:

code:
<!-- For the main product page --!>
  <body class="productName">

<!-- For subpages --!>
  <body class="productName-subPageName">
There's not some way I can use magical pseudo selectors to target all pages with "productName" in their class, is there? There are a whole bunch of products I'm dealing with but one needs a lot of custom design, so I'm trying to figure out an intelligent way to target styles to all of its pages. I know how I could accomplish this with JS, but I don't want to have to worry about a flash of incorrect styles on page load.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

kedo posted:

Alright, sanity check. I'm dealing with a weird CMS that outputs class names in the <body> tag that look like this:

code:
<!-- For the main product page --!>
  <body class="productName">

<!-- For subpages --!>
  <body class="productName-subPageName">
There's not some way I can use magical pseudo selectors to target all pages with "productName" in their class, is there? There are a whole bunch of products I'm dealing with but one needs a lot of custom design, so I'm trying to figure out an intelligent way to target styles to all of its pages. I know how I could accomplish this with JS, but I don't want to have to worry about a flash of incorrect styles on page load.

Obviously only works with CSS3 but:

code:
body[class^="productName"] {
   color: red; 
}
should work.

Depressing Box
Jun 27, 2010

Half-price sideshow.

kedo posted:

Alright, sanity check. I'm dealing with a weird CMS that outputs class names in the <body> tag that look like this:

code:
<!-- For the main product page --!>
  <body class="productName">

<!-- For subpages --!>
  <body class="productName-subPageName">
There's not some way I can use magical pseudo selectors to target all pages with "productName" in their class, is there? There are a whole bunch of products I'm dealing with but one needs a lot of custom design, so I'm trying to figure out an intelligent way to target styles to all of its pages. I know how I could accomplish this with JS, but I don't want to have to worry about a flash of incorrect styles on page load.

You should be able to use attribute selectors, like so:

CSS code:
body[class^='productName-'] p,
body[class*=' productName-'] p {
	/* styling all <p> elements on that product's pages */
}
EDIT: Beaten, but note that just using ^= can break if it isn't the first class on the element.

kedo
Nov 27, 2007

Ah ha, that was what I was looking for. For some reason my brain couldn't compute attribute selectors being used with classes. Thanks!

e:

Depressing Box posted:

EDIT: Beaten, but note that just using ^= can break if it isn't the first class on the element.

The *= is actually exactly what I was looking for because there are an unsurprisingly massive number of classes in the body tag. The one I'm targeting is somewhere in the middle of a roughly 500 character string of nonsense. :thumbsup:

kedo fucked around with this message at 20:45 on Jun 8, 2015

Opulent Ceremony
Feb 22, 2012
I need to make a way to deliver a small but dynamic playlist of proprietary videos to a likely small set of clients. The intention is for these videos to replay over and over, and for us to have the ability to add and remove videos from the playlist. Because of the nature of the playback (a small set of videos that occasionally changes), I want the client to download them once and then replay them without requesting the videos again.

I suppose if I want to determine how these video files would get stored and replayed, a desktop app would offer me the most control. However, I'm trying to avoid that for a variety of reasons (worry about updating the desktop app for clients, we are currently a 100% web dev shop so we'd have to get up to speed on building desktop stuff, etc). Ideally, we would make a web app that does this, but I'm not entirely clear on how I can ensure that the videos will be cached and replayed.

If I just set the appropriate cache headers on the video files, I assume I can dig into the browser cache to play the videos once they've already been downloaded, but are there limitations I should be aware of? Like, just how many bytes of video files will a modern browser be ok with caching? Will the cache be cleared unexpectedly? Keep in mind I will have control over the client setup, and can dictate things like 'use this browser with these settings', etc.

IAmKale
Jun 7, 2007

やらないか

Fun Shoe
What are some good services for sending notifications to users via email or SMS? Everything seems to be focused on sending out mobile device notifications but I need something a bit more traditional for this web app I'm working on. Amazon has its "SNS" service but I've just started reading the API docs and so I'm not yet sure if it's a feasible solution.

Blinkz0rz
May 27, 2001

MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS
Amazon also has SES which is their Simple Email Service. It's specifically designed for bulk email sending.

Sab669
Sep 24, 2009

Anyone have any recommended reading materials for asp web dev? New job is entirely web based when all my experience is desktop applications :(

I understand the concepts of get/post but having some troubles implementing what I think should be simple things, like populating 2 grids based off a selection in one grid, while retaining its selection. But if you go to like any car selling website its basically the same thing; pick a Manufacturer, populate a Model drop down, populate a Trim drop down etc.

Drop downs and grids are obviously different, but the principle should be the same...

Sab669 fucked around with this message at 18:46 on Jun 12, 2015

Mellow_
Sep 13, 2010

:frog:

Sab669 posted:

Anyone have any recommended reading materials for asp web dev? New job is entirely web based when all my experience is desktop applications :(

I understand the concepts of get/post but having some troubles implementing what I think should be simple things, like populating 2 grids based off a selection in one grid, while retaining its selection. But if you go to like any car selling website its basically the same thing; pick a Manufacturer, populate a Model drop down, populate a Trim drop down etc.

Drop downs and grids are obviously different, but the principle should be the same...
By grid do you mean gridview?

I have basically forgone it's use and have janked together my own system using HTML tables or lists (depending) that are populated from the model which contains various necessary collections. This is all made easier as I'm using an orm to write and hydrate objects to/from the database.

Personally I've had nothing but problems with gridview.

fuf
Sep 12, 2004

haha
Any tips on Mandarin / Cantonese web development?

Anything different about registering a domain with Chinese characters? Should I pick a domain with just Chinese numbers? (apparently this is a thing)

Anything to watch out for with font rendering?

And of course the one I'm dreading the most: ensuring accessibility for users in mainland China...

Adbot
ADBOT LOVES YOU

Sab669
Sep 24, 2009

AuxPriest posted:

By grid do you mean gridview?

I have basically forgone it's use and have janked together my own system using HTML tables or lists (depending) that are populated from the model which contains various necessary collections. This is all made easier as I'm using an orm to write and hydrate objects to/from the database.

Personally I've had nothing but problems with gridview.

Using ASP DataGrids, not GridViews :(

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