The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Use the disabled attribute - that's what it's for.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-disabled

# ? Aug 18, 2017 15:38

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 21:19

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Sorry should have been more clear.

It's for an <a></a>, not an input element

# ? Aug 18, 2017 15:45

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

Grump posted:

I have a <a></a> that by default is unclickable
code:
.element{
   pointer-events:none;
}
and then I want to later make it clickable
code:
  $('.element').css("pointer-events", "unset");
This doesn't work in IE. It stays unclickable. Is there a better way to do this?

have a class .no-pointer-events { pointer-events:none; } and remove the whole class.

# ? Aug 18, 2017 15:58

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Oh, I guess I'd just have a span with the same text and swap their visibility in that case.

# ? Aug 18, 2017 15:59

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

have a class .no-pointer-events { pointer-events:none; } and remove the whole class.

yeah I guess I'll just try this.

Man gently caress ie for real

# ? Aug 18, 2017 16:32

FateFree: Nov 14, 2003

So I'm trying to get an HTML 5 video player to work - it works everywhere except on Safari. I don't know if its because of some obscure setting in Nginx or my server response.. Can anyone with a Safari browser please try this fiddle and see if the video works for you? If not, does anyone have any ideas on why it might not work?

http://jsfiddle.net/NpgD5/1483/

# ? Aug 20, 2017 19:50

MrMoo: Sep 14, 2000

That gives an obtuse error,

# ? Aug 20, 2017 20:33

-JS-: Jun 1, 2004

FateFree posted:

So I'm trying to get an HTML 5 video player to work - it works everywhere except on Safari. I don't know if its because of some obscure setting in Nginx or my server response.. Can anyone with a Safari browser please try this fiddle and see if the video works for you? If not, does anyone have any ideas on why it might not work?

http://jsfiddle.net/NpgD5/1483/

Yeah, I get the same error message on Safari 10 (desktop). A quick Google suggests that this seems to be down to the delivery of the video... good luck!

# ? Aug 21, 2017 11:19

FateFree: Nov 14, 2003

Thanks guys, I just copied some horribly long servlet from somewhere that apparently did a better job than me of streaming the file. It seems to work now (although the fiddles broke for other reasons). Thanks for your help!

# ? Aug 21, 2017 15:34

darthbob88: Oct 13, 2011; YOSPOS

Is there a good way to make an element the next focus target? I have a menu which toggles visibility for a set of divs, like this Codepen. The accessibility auditors are complaining because a user can't just tab directly from selecting the Foo menu item to the Foo link, they have to tab through the other menu items first. At present I'm setting tabIndex on the div and adding $(target).focus() in the showDiv method, but that's neither elegant nor at all effective, and I'd really like something that actually works.

# ? Aug 23, 2017 01:08

lunar detritus: May 6, 2009

darthbob88 posted:

Is there a good way to make an element the next focus target? I have a menu which toggles visibility for a set of divs, like this Codepen. The accessibility auditors are complaining because a user can't just tab directly from selecting the Foo menu item to the Foo link, they have to tab through the other menu items first. At present I'm setting tabIndex on the div and adding $(target).focus() in the showDiv method, but that's neither elegant nor at all effective, and I'd really like something that actually works.

The easiest way to do it would be something like this but it has the problem that the first section is focusable due to already being visible. This pen tries to solve it by toggling the tabindex attribute as needed but I'm not sure if that's better or not than what you were already doing.

# ? Aug 23, 2017 01:34

darthbob88: Oct 13, 2011; YOSPOS

gmq posted:

The easiest way to do it would be something like this but it has the problem that the first section is focusable due to already being visible. This pen tries to solve it by toggling the tabindex attribute as needed but I'm not sure if that's better or not than what you were already doing.

Second option seems better, I'll see if I can get that to work for my situation. Current solution is just adding tabindex="0" to make the divs focusable and document.getElementById(target.replace(/^#/, "")).focus(); to set focus on them. Not the best, but fear it'll have to do if the second solution doesn't pan out.

E: Especially since the second solution lets you focus on the div immediately, but you still need to tab through the entire menu before reaching the link in that div. This problem is Goddamn horrifying.

darthbob88 fucked around with this message at 21:59 on Aug 23, 2017

# ? Aug 23, 2017 20:44

Dominoes: Sep 20, 2007

Hey dudes, question on accessing REST APIs in JS. My REST API server works. This is how I can pull data in Python to test:

Python code:

data = requests.get(url, auth=('admin', 'test')).json()

How can I do this in JS? tried this:

JavaScript code:

  fetch(url, {
            method: 'GET', 
            headers: {
                'Authorization': 'Basic '+btoa('admin:test'),
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(result => {
            data = result.json
        });

Which returns this line in the browser JS console:

quote:

Fetch API cannot load http://127.0.0.1:8000/items/ Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Dominoes fucked around with this message at 03:33 on Aug 24, 2017

# ? Aug 24, 2017 01:15

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Is the API host different to the host the JavaScript is executing from? (either different domain name or port)

If so you need to enable cors on the server: https://enable-cors.org

# ? Aug 24, 2017 01:19

Dominoes: Sep 20, 2007

I think so? I'm trying to make a project with Django Rest Framework tied to React. Why do I need CORS, when a request in Python not associated with the server doesn't?

# ? Aug 24, 2017 01:24

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Dominoes posted:

I think so? I'm trying to make a project with Django Rest Framework tied to React. Why do I need CORS, when a request in Python not associated with the server doesn't?

Because JavaScript specifically has security mechanisms in place that mean API calls remains sandboxed within its own domain if you don't enable CORS on the server. Raw HTTP requests (be it curl or Python or whatever) don't require the same song and dance in order to do cross origin sharing.

# ? Aug 24, 2017 01:27

Dominoes: Sep 20, 2007

Thanks.

# ? Aug 24, 2017 01:29

Dominoes: Sep 20, 2007

Any ideas for setting this up? I installed django-cors-headers, and configured it. I added ''Access-Control-Allow-Origin': '127.0.0.1'' to my headers under the fetch. Still same error.

# ? Aug 24, 2017 02:38

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

Dominoes posted:

Any ideas for setting this up? I installed django-cors-headers, and configured it. I added ''Access-Control-Allow-Origin': '127.0.0.1'' to my headers under the fetch. Still same error.

We will help you if you edit in line breaks to your error message so the tables aren't so horribly broken :colbert:

# ? Aug 24, 2017 03:10

Dominoes: Sep 20, 2007

Sorted out. Had to configure django-cors-headers to allow all hosts, and modify the JS request to use additional then statements; both fetch and .json are async, so you have to handle appropriately.

JavaScript code:

        fetch(url, {
            method: 'GET', 
            headers: {
                'Authorization': 'Basic '+btoa('admin:test'),
            }
        })
        // We deal with two promises: One to wait for the response from the server,
        // The other to wait for the JSON parsing. Then we unnest from results.
        .then(result => result.json())
        .then(data => this.setState({items: data.results}))

Dominoes fucked around with this message at 04:57 on Aug 24, 2017

# ? Aug 24, 2017 04:38

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

Question for y'all. I've got the ICD-10 (see the web version or giant xml file) and I need it to be searchable in an electron/pouchdb project. Initially I was thinking I'd need to have a script go through the xml file and convert the info I need to statements that will add entries to my database. However, I'm hoping there's an easier way to do this (maybe I can just search the xml file and pull snippets from it?). I would appreciate any ideas I'm a bit stuck.

awesomeolion fucked around with this message at 22:47 on Aug 29, 2017

# ? Aug 29, 2017 22:32

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

It should be super easy to parse the xml into a database. Just do that. It's the right thing to do.

# ? Aug 30, 2017 14:06

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

Thermopyle posted:

It should be super easy to parse the xml into a database. Just do that. It's the right thing to do.

Alright will give that a try. Thanks. I think I keep opening the XML file and it's such a long big mess that I get scared. I'll just give it a go. Cheers.

# ? Aug 30, 2017 16:52

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

awesomeolion posted:

Alright will give that a try. Thanks. I think I keep opening the XML file and it's such a long big mess that I get scared. I'll just give it a go. Cheers.

You should be able to use a library both for reading/parsing the XML and dumping it into your db, so the whole process should mostly be about deciding how to map the structure of the XML into a database.

# ? Aug 30, 2017 17:03

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Can't you just grep it?

Edit: Never mind I see it's an electron project.

# ? Aug 30, 2017 17:30

darthbob88: Oct 13, 2011; YOSPOS

darthbob88 posted:

Second option seems better, I'll see if I can get that to work for my situation. Current solution is just adding tabindex="0" to make the divs focusable and document.getElementById(target.replace(/^#/, "")).focus(); to set focus on them. Not the best, but fear it'll have to do if the second solution doesn't pan out.

E: Especially since the second solution lets you focus on the div immediately, but you still need to tab through the entire menu before reaching the link in that div. This problem is Goddamn horrifying.

GODDAMMIT. Discussed this with the accessibility people again, and they're mostly satisfied, except now they want to be able to tab through the writeup and then go back to the menu. Referring to this Codepen again, they want to be able to tab to menuitem Bar, hit enter to select it, tab to the link Bar, then tab to the menu and item Baz. As opposed to the current status, where you select item Bar, tab through the writeup, and then get dumped to the footer because that's how the tab order is currently set up.

What I'm trying right now is to use JS to set the links in the target div to tabindex 2, so they get priority, and the next menuitem to index 3, so it gets secondary priority. This is not working, I assume because tabindex doesn't work that way, and setting a positive index makes that element first in line, not necessarily next in line? If that can't be made to work, I'm considering using an onfocusout event tomorrow, to manually send focus back to where it needs to be.

Is there a more elegant/useful option, or should I tell the accessibility people to piss up a rope?

# ? Sep 1, 2017 00:43

McGlockenshire: Dec 16, 2005; GOLLOCKS!

darthbob88 posted:

Is there a more elegant/useful option, or should I tell the accessibility people to piss up a rope?

Your accessibility people are being silly. First things first, if you actually care about accessibility here instead of just emulating it, you also need to pay attention to ARIA attributes. Screenreaders and other accessibility tools are going to be able to do more with your page when you can give them hints about the intended uses of each interactive element. If your accessibility team is doing their jobs, they should have raised concerns about screenreaders and other assistive technologies directly. If you're doing actual bona fide accessibility here then you really, really need to get your hands on a screenreader in order to make sure things won't be a clusterfuck.

Next things next, your interactive elements should be hyperlinks. Real ones, not just JS driven. This will give them a natural tabindex in the document. You want a natural tabindex. loving around with the tabindex unnaturally is going to result in a bad user experience for both keyboarders and users with keyboard driven accessibility needs. If you still want to change the tabindex, you'll want to review this document on MDN. It looks like you could just focus on the desired element and reset the next tabbable element to tabindex=0 while setting things you don't want tabbable at the time to tabindex=-1.

You absolutely do not want to hijack reverse tabbing to get to somewhere that isn't unnatural in the document. If you want users to get quick access to a menu, have you considered accesskeys for complete context switching? They're kind of a mess because the keyboard combo changes on every platform and every browser, but they do guarantee you a keyboard-friendly way to navigate around a document. Alternatively, there are plenty of modern and not-so-modern libraries that you can tie into to do your own keyboard shortcuts based on simple keypresses instead of combos.

Accessibility - actual accessibility - is a nightmare because of all the little fiddly things that those of us without accessibility needs never even consider. It's made worse by the inconsistent lack of standards and platform specific behavior. If you're doing this because you are contractually or legally (Section 508) obligated, you're in for a world of pain and learning new, old things.

McGlockenshire fucked around with this message at 02:20 on Sep 1, 2017

# ? Sep 1, 2017 02:10

kedo: Nov 27, 2007

McGlockenshire posted:

You want a natural tabindex. loving around with the tabindex unnaturally is going to result in a bad user experience for both keyboarders and users with keyboard driven accessibility needs. If you still want to change the tabindex, you'll want to review this document on MDN.

...

Accessibility - actual accessibility - is a nightmare because of all the little fiddly things that those of us without accessibility needs never even consider. It's made worse by the inconsistent lack of standards and platform specific behavior. If you're doing this because you are contractually or legally (Section 508) obligated, you're in for a world of pain and learning new, old things.

I second both of these statements. I just wrapped up a project a couple months ago with some complex interactivity and an extremely strict accessibility director and it was ... a learning experience, to say the least.

# ? Sep 1, 2017 14:06

darthbob88: Oct 13, 2011; YOSPOS

McGlockenshire posted:

Your accessibility people are being silly. First things first, if you actually care about accessibility here instead of just emulating it, you also need to pay attention to ARIA attributes. Screenreaders and other accessibility tools are going to be able to do more with your page when you can give them hints about the intended uses of each interactive element. If your accessibility team is doing their jobs, they should have raised concerns about screenreaders and other assistive technologies directly. If you're doing actual bona fide accessibility here then you really, really need to get your hands on a screenreader in order to make sure things won't be a clusterfuck.

The ARIA stuff is already handled, AFAICT, apart from a couple bugs that just got reopened, and likewise screenreaders seem to be pretty good. This is just their Columboesque "just one more thing" that's going to give me another loving ulcer.

quote:

Next things next, your interactive elements should be hyperlinks. Real ones, not just JS driven. This will give them a natural tabindex in the document. You want a natural tabindex. loving around with the tabindex unnaturally is going to result in a bad user experience for both keyboarders and users with keyboard driven accessibility needs. If you still want to change the tabindex, you'll want to review this document on MDN. It looks like you could just focus on the desired element and reset the next tabbable element to tabindex=0 while setting things you don't want tabbable at the time to tabindex=-1.

Yeah, I am absolutely down with sticking to natural tabindices and would strongly prefer to stick with that, were it not for this complaint. I can dig why actual hyperlinks is the preferred option, but this is an SPA, and it's too late to add proper deep links to the design, so I need to find some other way to make that work. Or to just tell the accessibility people that this is a non-starter and I'm sticking to actual ARIA/screen reader problems.

quote:

You absolutely do not want to hijack reverse tabbing to get to somewhere that isn't unnatural in the document. If you want users to get quick access to a menu, have you considered accesskeys for complete context switching? They're kind of a mess because the keyboard combo changes on every platform and every browser, but they do guarantee you a keyboard-friendly way to navigate around a document. Alternatively, there are plenty of modern and not-so-modern libraries that you can tie into to do your own keyboard shortcuts based on simple keypresses instead of combos.

Had not considered access keys, will bring that up at the next meeting, but suspect this is just going to end with that request getting swept under the rug.

quote:

Accessibility - actual accessibility - is a nightmare because of all the little fiddly things that those of us without accessibility needs never even consider. It's made worse by the inconsistent lack of standards and platform specific behavior. If you're doing this because you are contractually or legally (Section 508) obligated, you're in for a world of pain and learning new, old things.

Contractually, and TBH this is the only real pain I've had to deal with. Most of the other bugs have been minor "Whoops, I need to add that ARIA attribute" things, easily fixed.

# ? Sep 1, 2017 17:29

Fluue: Jan 2, 2008

Got a form wizard "state" management question and googling only brings up very basic ideas:

I have a multi-step form where a user's last-completed step is saved in the DB so when they resume the form they are taken to the next step in their path. If a user has two tabs open for the form they could potentially submit Step 1 in Tab A, while having step 1 open in Tab B, then try to submit Step 1 in Tab B -- submitting a step twice.

Is there some best practice for handling these kind of user state issues when it comes to tabs? Should I be submitting the current step's ID with each POST and validating that first before any other submitted fields?

This is in Django, and I know that FormWizard is a thing but it doesn't seem to solve this kind of state management issue.

# ? Sep 1, 2017 22:54

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

There's better solutions but I'm pretty sure .NET handles this with session/application keys

# ? Sep 1, 2017 23:54

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

If you're concerned about them doing it in order, checking to see if they're submitting the right step should be part of your validation already

# ? Sep 2, 2017 01:51

Fluue: Jan 2, 2008

Munkeymon posted:

If you're concerned about them doing it in order, checking to see if they're submitting the right step should be part of your validation already

Right now the step is stored in session and checked for each step. Should I also have it included in the form?

This is through an API for a single page app, if that makes a difference.

# ? Sep 2, 2017 22:45

McGlockenshire: Dec 16, 2005; GOLLOCKS!

Fluue posted:

Right now the step is stored in session and checked for each step. Should I also have it included in the form?

Yes, absolutely and always. HTTP is stateless. You may get any request at any time and must be prepared to deal with it, session or not. For example, what happens if a user without a session submits the second part of the form?

Making sure that the submitted data matches the format and minimum integrity standards you expect is basic validation that you must do to all input on every single request. If you have a stateful form, you need to make sure that the state you get matches the state you expect and act accordingly.

# ? Sep 3, 2017 02:12

Fluue: Jan 2, 2008

McGlockenshire posted:

Yes, absolutely and always. HTTP is stateless. You may get any request at any time and must be prepared to deal with it, session or not. For example, what happens if a user without a session submits the second part of the form?

Making sure that the submitted data matches the format and minimum integrity standards you expect is basic validation that you must do to all input on every single request. If you have a stateful form, you need to make sure that the state you get matches the state you expect and act accordingly.

Yep already have the actual data validation in place, it's just the state management for the form that's been troublesome. I'll add in the step ID to the form/request submission so that extra validation can be run on that. Thanks!

# ? Sep 3, 2017 06:08

FateFree: Nov 14, 2003

I'm going to build a SPA with vue.js, and a separate java backend rest server. However this is my first foray into major front end application dev - I don't think Eclipse is going to be the best IDE to use. Does anyone have any recommendations for my front end IDE? Preferrably with Git built in and vue.js plugins and such..

# ? Sep 6, 2017 18:57

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

FateFree posted:

I'm going to build a SPA with vue.js, and a separate java backend rest server. However this is my first foray into major front end application dev - I don't think Eclipse is going to be the best IDE to use. Does anyone have any recommendations for my front end IDE? Preferrably with Git built in and vue.js plugins and such..

VSCode

# ? Sep 6, 2017 19:01

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Probably IntelliJ with the JS/webdev/whatever plugins on top, if you're willing to spend some money (or are a student or active Open Source developer).

# ? Sep 6, 2017 19:02

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

IntelliJ should be a superset of PyCharm, and I can vouch for PyCharm being a great frontend / backend IDE.

# ? Sep 6, 2017 19:26

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 21:19

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Thermopyle posted:

IntelliJ should be a superset of PyCharm, and I can vouch for PyCharm being a great frontend / backend IDE.

Think it's the other way 'round, technically. Actually, WebStorm might Just Work, but they've got to be having a hard time keeping up with flavors of the week.

# ? Sep 6, 2017 20:30

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »