Javascript questions which don't deserve their own thread.

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

«‹›277 »

huhu: Feb 24, 2006

Polio Vax Scene posted:

I want to use Notifications in my site, but some dumb script is overwriting the Notification object as defined by the browser. What can I do about this if I can't remove the script?

I could be wrong but I don't imagine there's a non hacky way to do this. I'd figure out what's doing that and remove it. Or use a different variable for notifications.

# ? Feb 18, 2019 22:14

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 23:47

Roadie: Jun 30, 2013

That's almost certainly happening because some terrible script you're using is doing Notification = whatever without a proper var declaration, which of course means it's replacing the one on window.

# ? Feb 18, 2019 22:22

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

If you can run your code first, you can keep a reference to the original Notification function around even if the one on window gets overwritten later.

Or, the hacky solution: create an iframe element, append it to your page, and access

code:

myiframe.contentWindow.Notification

or yeah just get rid of the garbage script that's overwriting globals

# ? Feb 19, 2019 00:20

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Hi, is there any flag hidden in Chrome that I could flip to make it STOP re-loading and re-running websites every time I save a source code file that's open in DevTools?

This "feature" has never been useful once to me, of making a bunch of poo poo happen just because I decided to back up my work and pressed Ctrl+S.

Instead, what I get is an error (because I'm not done typing yet, just saving my typing so far), which crashes the script and sends me to a breakpoint in a completely unpredictable location in my source code, meaning I have to scroll back to where I was all over again. That should not be the penalty just for saving my code.

Solutions I have tried that have NOT worked are:

1. Disabling JavaScript.

I'm getting pretty quick at pressing F1, finding the teeny tiny checkbox in the sea of options for disabling JavaScript, and then hitting ESC to close out of settings. But if I do this right before hitting Ctrl+S, the page STILL finishes out the current script at that moment, crashing and scrolling me off to the middle of nowhere.

2. Finding the secret "Stop" button in the Chrome debugger, hidden behind the play/pause button.

You can stop the current script before hitting save, but guess what, my HTML document has multiple script tags and the next one will crash because of the same errors in my half-typed code too, scrolling me to completely unrelated code in that script.

Conclusion: The only thing I've found that seems to work for now is doing BOTH #1 and #2 in a row, each time I want to hit Ctrl+S and save.... but Jesus Christ isn't there a better way?

There's got to be some flag in Chrome for turning the stupid re-run-upon-save feature off, right?

.

Happy Thread fucked around with this message at 09:28 on Feb 19, 2019

# ? Feb 19, 2019 09:18

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Like, neither of those steps in Chrome are anywhere near something you could do with your eyes closed. And forget explaining all this to my hundred or so students at a time who I train on the Chrome debugger for class projects. They don't all have the patience for me explaining endless workarounds, or else deal with an unusable editor.

# ? Feb 19, 2019 09:28

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Wait, you're editing your js in Chrome? Why would one do that?

# ? Feb 19, 2019 09:57

Roadie: Jun 30, 2013

Osmosisch posted:

Wait, you're editing your js in Chrome? Why would one do that?

Yes, this.

The answer to Dumb Lowtax's question is more like "the question is wrong" than anything.

# ? Feb 19, 2019 10:03

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Why wouldn't I?

e: Is this like you telling me to just use Babel instead of es6 again? I have several good reasons for using Chrome's editing features, none of which are relevant to the question asked.

Happy Thread fucked around with this message at 10:09 on Feb 19, 2019

# ? Feb 19, 2019 10:04

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Dumb Lowtax posted:

Why wouldn't I?

Well, you've demonstrated at least one reason so far in this very thread.

I don't recall recommending Babel generally over ES6. I'd be inclined to do the opposite unless you have to serve a wide array of browsers.

# ? Feb 19, 2019 13:41

Captain Foo: May 11, 2004; we vibin'
we slidin'
we breathin'
we dyin'

have you tried making sure fid 6 is declunked?

# ? Feb 19, 2019 14:28

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

Osmosisch posted:

Wait, you're editing your js in Chrome? Why would one do that?

Roadie posted:

Yes, this.

The answer to Dumb Lowtax's question is more like "the question is wrong" than anything.

To be fair, they do (did?) keep bolting dev tools into it, so someone's going to use them. Hell, it could even be a good idea if they followed through and made the editor good. Problem is that the editor isn't very good or configurable so it ends up being kind of a gimmick.

Also, hot reloading is a cancer and everyone who likes it or even thinks it's merely not bad is Wrong.

# ? Feb 19, 2019 18:17

The Fool: Oct 16, 2003

Munkeymon posted:

To be fair, they do (did?) keep bolting dev tools into it, so someone's going to use them. Hell, it could even be a good idea if they followed through and made the editor good. Problem is that the editor isn't very good or configurable so it ends up being kind of a gimmick.

Also, hot reloading is a cancer and everyone who likes it or even thinks it's merely not bad is Wrong.

Hot reloading is fine if you're compiling with webpack or whatever, that way it is at least only loading when you build a new package, not every time you hit save in your editor.

# ? Feb 19, 2019 18:23

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

The Fool posted:

Hot reloading is fine if you're compiling with webpack or whatever, that way it is at least only loading when you build a new package, not every time you hit save in your editor.

I don't think I've encountered a hot reload script that doesn't just watch for saves

# ? Feb 19, 2019 18:55

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

I teach students who have never used an IDE before, much less a debugger to single step lines of code and see what's wrong. They come in completely lacking the skill of error diagnosis and unless I teach them that it's a worthwhile skill, absolutely no other instructor at my university will care enough to. They'll graduate from a top CS university still using console.logs (or equivalent in any language) and trial and error and mass block comments. They'll go to their first job that way. One of our classes used to make them use GDB in unix but that's it.

Meanwhile we kind of need them all to stick very close to their JavaScript debugger. We're making WebGL programs (3D graphics), which have a ton of moving parts for GPU communication. The default failure state is the dreaded blank screen, which is frustrating as hell to diagnose. If students don't know how to even use a breakpoint then I'm going to be there all day after every lecture individually showing them how I would debug their code for every single flaw they introduce because they're not all finding and learning DevTools. That is not sustainable.

Because it's JavaScript, there's already one program required in the workflow (a web browser) and as casual users my students don't have the patience for too many more. Which is why it's nice that the web browser tries to be a decent IDE too.

Having actually used it as such for a long time, which I don't think any of you have given an honest to god shot, I can say that Chrome has surprisingly covered a lot of what an IDE is supposed to do! The editor can do file management, find and replace with regex's, block indentation, autocomplete, zoom, basically what you'd expect. It's integrated seamlessly with the performance tab for finding expensive lines and calls, the console tab for checking on an expression, the elements tab for identifying actual HTML elements on your page tied to your code, and most importantly to my students, the debugger, including single-stepping and live expression monitoring just by highlighting the thing.

The call stack is *right next* to where you're typing; you can't miss it. There's no way my students would otherwise ever go deep enough into DevTools to find out about the call stack panel, much less learn what it's used for, unless that is the case.

In summary, these kids would never bother to open DevTools and get in the habit of using single stepping to solve every mystery if it is done in a separate program from the one they type into. Sorry. And I need them to, or else the class degenerates into individually helping hundreds of them diagnose errors more slowly than they can produce new ones. It's much better if they can help themselves.

Their runtime environment needs to behave like an IDE or else we're all hosed. And it mostly does! The few annoyances about Chrome haven't been dealbreakers for the entire year I've used it full time, and guess what, there might even be workarounds for them which is why I am asking the thread if they know any!

Before using Chrome to edit, I used Notepad++, which:

1. Had no idea which local JavaScript files I was working with (or how to reliably avoid mixing them with sessions of non-programming files like my shopping list), and couldn't automatically refresh that list as soon as my imports changed.

(Note: Chrome's editor automatically keeps it current! Even if I switch to a different branch with git and literally replace all the files, Chrome's editor doesn't miss a beat and shows me all the new ones in play immediately!)

2. Was completely unaware of the debugger, so I couldn't seamlessly edit while I was paused at a breakpoint while inspecting all of my variables' values.

3. Did not force me to constantly look at the call stack panel, the single-stepping buttons panel, the local scope panel, and the spots next to each line you can click for an easy breakpoint. Which is a dealbreaker because that's the only way my students will dig deep enough to find and use them.

4. Had none of the other seamless integration with DevTools like right-clicking a line of code you just typed and going "Evaluate in Console".

TL;DR For however much you don't feel like reading all of the above, I didn't feel like typing it all that much more, and I had been trying to avoid doing so because it's not even what the question was. I was just asking about the existence or non existence of a flag in Chrome settings. At least now I know that it's called "hot reloading", so thanks for the lead.

Happy Thread fucked around with this message at 19:47 on Feb 19, 2019

# ? Feb 19, 2019 19:29

The Fool: Oct 16, 2003

Dumb Lowtax posted:

<snip stuff about teaching>

I know this isn't what you're asking for, and I don't want to come off all :goonsay:

"You're doing it wrong and my way is better"

But have you considered VS Code?

It's not a full IDE, but has a number of critical features, not the least of which is integration with the chrome debugger.

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

# ? Feb 19, 2019 19:41

Sab669: Sep 24, 2009

Today I learned that Internet Explorer doesn't support arrow functions :argh:

Is there a simple, clean way to do this that works in all browsers:

JavaScript code:

if (controlArray.every((val, i, controlArray) => val === "" ))
    return controlArray;

Or do I need to just break it out like a CS101 student?

# ? Feb 19, 2019 19:45

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

The Fool posted:

I know this isn't what you're asking for, and I don't want to come off all "You're doing it wrong and my way is better"

But have you considered VS Code?

It's not a full IDE, but has a number of critical features, not the least of which is integration with the chrome debugger.

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Yeah VSCode has sounded really promising to me for a while, I'm just not quite there yet and a bit scared of throwing two big programs at my students instead of one, although the integration could make up for that. I need to try it. In the meantime, if there's a way to work around Chrome's handful of drawbacks why shouldn't I learn them too?

# ? Feb 19, 2019 19:45

Joda: Apr 24, 2010; When I'm off, I just like to really let go and have fun, y'know?; Fun Shoe

Sab669 posted:

Today I learned that Internet Explorer doesn't support arrow functions

Is there a simple, clean way to do this that works in all browsers:
JavaScript code:
if (controlArray.every((val, i, controlArray) => val === "" ))
    return controlArray;
Or do I need to just break it out like a CS101 student?

Give it a normal function in stead? There's no such thing as clean pure ES5

# ? Feb 19, 2019 19:57

Doom Mathematic: Sep 2, 2008

JavaScript code:

if (controlArray.every(function (val, i, controlArray) {
    return val === ""
}))
    return controlArray;

# ? Feb 19, 2019 20:59

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

Dumb Lowtax posted:

I teach students who have never used an IDE before, much less a debugger to single step lines of code and see what's wrong. They come in completely lacking the skill of error diagnosis and unless I teach them that it's a worthwhile skill, absolutely no other instructor at my university will care enough to. They'll graduate from a top CS university still using console.logs (or equivalent in any language) and trial and error and mass block comments. They'll go to their first job that way. One of our classes used to make them use GDB in unix but that's it.

Meanwhile we kind of need them all to stick very close to their JavaScript debugger. We're making WebGL programs (3D graphics), which have a ton of moving parts for GPU communication. The default failure state is the dreaded blank screen, which is frustrating as hell to diagnose. If students don't know how to even use a breakpoint then I'm going to be there all day after every lecture individually showing them how I would debug their code for every single flaw they introduce because they're not all finding and learning DevTools. That is not sustainable.

Because it's JavaScript, there's already one program required in the workflow (a web browser) and as casual users my students don't have the patience for too many more. Which is why it's nice that the web browser tries to be a decent IDE too.

Having actually used it as such for a long time, which I don't think any of you have given an honest to god shot, I can say that Chrome has surprisingly covered a lot of what an IDE is supposed to do! The editor can do file management, find and replace with regex's, block indentation, autocomplete, zoom, basically what you'd expect. It's integrated seamlessly with the performance tab for finding expensive lines and calls, the console tab for checking on an expression, the elements tab for identifying actual HTML elements on your page tied to your code, and most importantly to my students, the debugger, including single-stepping and live expression monitoring just by highlighting the thing.

The call stack is *right next* to where you're typing; you can't miss it. There's no way my students would otherwise ever go deep enough into DevTools to find out about the call stack panel, much less learn what it's used for, unless that is the case.

In summary, these kids would never bother to open DevTools and get in the habit of using single stepping to solve every mystery if it is done in a separate program from the one they type into. Sorry. And I need them to, or else the class degenerates into individually helping hundreds of them diagnose errors more slowly than they can produce new ones. It's much better if they can help themselves.

Their runtime environment needs to behave like an IDE or else we're all hosed. And it mostly does! The few annoyances about Chrome haven't been dealbreakers for the entire year I've used it full time, and guess what, there might even be workarounds for them which is why I am asking the thread if they know any!

Before using Chrome to edit, I used Notepad++, which:

1. Had no idea which local JavaScript files I was working with (or how to reliably avoid mixing them with sessions of non-programming files like my shopping list), and couldn't automatically refresh that list as soon as my imports changed.

(Note: Chrome's editor automatically keeps it current! Even if I switch to a different branch with git and literally replace all the files, Chrome's editor doesn't miss a beat and shows me all the new ones in play immediately!)

2. Was completely unaware of the debugger, so I couldn't seamlessly edit while I was paused at a breakpoint while inspecting all of my variables' values.

3. Did not force me to constantly look at the call stack panel, the single-stepping buttons panel, the local scope panel, and the spots next to each line you can click for an easy breakpoint. Which is a dealbreaker because that's the only way my students will dig deep enough to find and use them.

4. Had none of the other seamless integration with DevTools like right-clicking a line of code you just typed and going "Evaluate in Console".

TL;DR For however much you don't feel like reading all of the above, I didn't feel like typing it all that much more, and I had been trying to avoid doing so because it's not even what the question was. I was just asking about the existence or non existence of a flag in Chrome settings. At least now I know that it's called "hot reloading", so thanks for the lead.

I do sympathize because my CS education was almost entirely bereft of tooling requirements and that's a bit of a sore spot for me. However, I'm getting mixed signals from what you're writing. First, I can't decide whether you're teaching CS students or students taking a CS class as an elective. If they're in CS core and not the least bit curious about or receptive to advice on how to make their work easier, that's... a bad sign! Sorry if you have to deal with people like that - I sure hope I never have to work with them. Second, you're afraid they'll debug with console logging, which implies they're using the dev tools, but just in too limited a way. Again, it's understandable: they're wasting your time and theirs by not using the tool's full functionality.

Thing is, while Chrome's Workspaces may be a pretty good approximation of an IDE in terms of debugger integration, it's not as powerful as modern editor for, well, editing, and doesn't, to my knowledge, have the plugin ecosystem that Sublime and VSCode have and derive most of their power from. For example, https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome gives you in-editor debugging in a modern editor that has other plugins that'll auto-run compilation steps or lint your code as you work. Sure, it's a (very) little more more work to get it set up in that you have to click some stuff and wait a bit, but please also consider that at least some of your students are probably also really annoyed that they can't compulsively mash Ctrl+S as they, like you, are wont to do and not have the runtime freak out over their half-finished code.

Please also consider that when you design your syllabus for next year. Maybe start off in Workspaces and then set up a similar-but-better environment in VSCode weeks in after they've had their faces mashed into the debugger. Not sure if that'll work with your course material, but I'd personally loving hate to be forced to use an editor that always did hot reloading without being able to turn it off.

Anyway, all I can think of is to change your coding practice to always set up the function you're working in to make the code you're changing unreachable by returning some safe defaults from the top since the documentation says it'll only reload that function. Of course, that'll probably kneecap some other live evaluation features you like, but, well :shrug:

it's all I can think of.

Sab669 posted:

Today I learned that Internet Explorer doesn't support arrow functions

Is there a simple, clean way to do this that works in all browsers:
JavaScript code:
if (controlArray.every((val, i, controlArray) => val === "" ))
    return controlArray;
Or do I need to just break it out like a CS101 student?

JavaScript code:

if (controlArray.every(function(val){return val === "";}))
    return controlArray;

really so much worse?

# ? Feb 19, 2019 21:29

Sab669: Sep 24, 2009

Munkeymon posted:

Is

...

really so much worse?

No, not at all; I was dumb and thinking I needed to do it completely differently :downs:

That'll teach me for copy-pasting StackOverflow answers

# ? Feb 19, 2019 21:36

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

Dumb Lowtax posted:

teaching stuff

FWIW, the stuff you mention is (I think) mostly all available in webstorm. It integrates directly with Chrome through the devtools API, and shows stack traces, the network panel, dom elements, and a better debugger all right in the IDE.

(Or at least, I assume it does. I use PyCharm which is supposed to be a superset of webstorm, but sometimes there's weird differences between the two)

# ? Feb 20, 2019 21:18

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Chrome's IDE has been growing super fast lately so another worry I have is picking up some secondary add-on that exists to make up for Chrome's deficiencies, which themselves are rapidly shrinking.

Depending on how old the secondary tool is, could the reputation it has for being a fully featured whatever already be out of date and misplaced, since people are slow to realize what's built in to the base engine? Lord knows adoption of Chrome as an IDE is still low, hence missing quality of life things like a key shortcut to switch between source file tabs, and the mandatory hot-reload on every Ctrl+S press.

Isn't something that's a secondary helper tool to the main engine like that eventually bound to go the way of JQuery?

I really hope developers have learned some lesson since JQuery in particular, which has now been totally displaced by the powerful es6 syntax, yet retains a loyal online fanbase that continues to insist everyone else use it, shoehorning it into stackoverflow answers asking about plain JavaScript.... and to this day avoiding the knowledge of useful es6 patterns and staying unaware that it can do all the same things.

# ? Feb 20, 2019 21:38

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

Dumb Lowtax posted:

Chrome's IDE has been growing super fast lately so another worry I have is picking up some secondary add-on that exists to make up for Chrome's deficiencies,

That is not why webstorm and other IDEs exist.

# ? Feb 20, 2019 21:43

The Fool: Oct 16, 2003

IDE's and advanced text editors are not "secondary tools" and no-one else on this planet will ever use Chrome's IDE as their primary developer tool.

If anything is a "secondary tool" it's Chrome, since you can run your javascript in a half-dozen other environments.

# ? Feb 20, 2019 21:45

Eikre: May 2, 2009

Okay, so I'm interested in making a modification to a Thunderbird extension called Quicktext.

Let me give you a little background: Quicktext is a utility written mostly in Javascript that puts buttons on your Thunderbird toolbar to execute user-defined macros. The macros themselves can also be written in Javascript, and the extension helpfully skims some data elements from the email you're writing and offers them as preset variables. So, for example, you can unleash RegEx on "this.mQuicktext.get_subject()" to isolate certain terms from the Subject line of the email and then have those terms populate fields in your template. Very useful if, for example, you're frequently following up with people on messages from an automated service.

All that said, the utility seems constrained by design to only insert text into the body of the email. If you go manipulate the XML document where your templates are stored, you can also coax it to append (but not change) information written between the <Head> tags, like To: and CC: entries. But it cannot (in any way that I've figured out, anyway) use one of your macros to manipulate any of the information that's already in the document you're writing, and it cannot consult the body of the email even as a static variable. So, in that example of getting an automated email and using it as the basis for your follow-up with someone else? If their email address happens to be included in the body of the message from the automatic service, you have no way of RegEx'ing it out, and even if you did, you would have no way of replacing whatever is currently in your To: field with that addressed you skimmed. You can't do any kind of find-and-replace. And that's some of the kind of poo poo I really wanna do.

Now. I'm looking at the source files on the Github and I can see some of how the logic works but I am not a seasoned code monkey and can't chase it down very quickly. If you look in \components\wzQuicktextVar.js you will find:

code:

function streamListener(aInspector)
{
  var newStreamListener = {
    mAttachments: [],
    mHeaders: [],

    onStartRequest : function (aRequest, aContext)
    {
      this.mAttachments = [];
      this.mHeaders = [];

Further on, you can see that mAttachments and mHeaders end up being the strings that get further split apart and sanitized to become the set of variables that you can invoke in your macros. I don't yet grasp how the program is grabbing that information in the first place, but I have confirmed from using it that the proess continues to listen for updates to these fields; thus, if I'm composing an email and change the subject line, then I can return this.mQuicktext.get_subject() and print the modified subject to the email body. Another thing I don't fully understand is why I can't invoke functions or variables from the Quicktext js files, other than those that are specifically isolated for the user to play with.

I feel, though, that it shouldn't be difficult to kludge or break the right process to make the whole email document available to manipulation. If I could just get the entire document as a string, and also feed a string to a process that would replace the entire email, then I'd be able to automate pretty much anything worth doing, though perhaps at the highly manageable expense of being able to write a macro that crashes Thunderbird outright.

Thoughts? Ideas? Solutions? I would welcome a better off-the-shelf program for doing this kind of thing than the one I'm using, but I'm interested in this project as much as an educational exercise as a practical one. I even invite pedantic corrections, if I've just called something by the wrong term.

# ? Feb 22, 2019 03:15

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

I had a pretty annoying bug today. Turns out that neither tslint or typescript compiler will warn you about referencing an undeclared variable called "name"... because (obviously?) it shadows window.name. I even had a test that covered the bugged code but since jest environment has a default value for window.name while Chrome doesn't, the code worked in tests and broke in production.

# ? Feb 28, 2019 20:08

TheFluff: Dec 13, 2006; FRIENDS, LISTEN TO ME
I AM A SEAGULL
OF WEALTH AND TASTE

Obfuscation posted:

I had a pretty annoying bug today. Turns out that neither tslint or typescript compiler will warn you about referencing an undeclared variable called "name"... because (obviously?) it shadows window.name. I even had a test that covered the bugged code but since jest environment has a default value for window.name while Chrome doesn't, the code worked in tests and broke in production.

I would have expected no-restricted-globals to complain about that. Do you have that enabled?

# ? Mar 1, 2019 14:43

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

TheFluff posted:

I would have expected no-restricted-globals to complain about that. Do you have that enabled?

Looks like it was only implemented last week, I guess it's time to update tslint.

# ? Mar 1, 2019 14:55

TheFluff: Dec 13, 2006; FRIENDS, LISTEN TO ME
I AM A SEAGULL
OF WEALTH AND TASTE

Obfuscation posted:

Looks like it was only implemented last week, I guess it's time to update tslint.

Haha, wow, that's weird. I was absolutely sure I had seen and used a linting rule like that before, but I must've been confusing it with something else.

e: oh yeah, eslint is where I've seen and used it before.

TheFluff fucked around with this message at 18:31 on Mar 1, 2019

# ? Mar 1, 2019 18:25

Master_Odin: Apr 15, 2010; My spear never misses its mark...

ladies

Is there a reason why Firefox and Chrome report different values for getBoundingClientBox for the following snippet?

code:

<html>
    <head>
            <meta charset="utf-8"/>
    </head>
<body>
<svg>
    <path d="M33 40 L35 40 L36 39 L37 39 L38 38 L39 37 L41 36 L42 36 L43 36" stroke="#000" stroke-width="1" fill="none"></path>
</svg>
</body>
</html>

Firefox:

code:

{
  "x": 39,
  "y": 42,
  "width": 14,
  "height": 8,
  "top": 42,
  "right": 53,
  "bottom": 50,
  "left": 39
}

Chrome:

code:

{
  "x": 41,
  "y": 44,
  "width": 10,
  "height": 4,
  "top": 44,
  "right": 51,
  "bottom": 48,
  "left": 41
}

Ideally I'd like them to match so I can automate test things without having to make two different sets of asserts in my test suite. It also doesn't seem to be clear which elements will have this difference (text does not for example).

Master_Odin fucked around with this message at 18:41 on Mar 1, 2019

# ? Mar 1, 2019 18:29

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

Master_Odin posted:

Is there a reason why Firefox and Chrome report different values for getBoundingClientBox for the following snippet?
code:
<html>
    <head>
            <meta charset="utf-8"/>
    </head>
<body>
<svg>
    <path d="M33 40 L35 40 L36 39 L37 39 L38 38 L39 37 L41 36 L42 36 L43 36" stroke="#000" stroke-width="1" fill="none"></path>
</svg>
</body>
</html>
Firefox:
code:
{
  "x": 39,
  "y": 42,
  "width": 14,
  "height": 8,
  "top": 42,
  "right": 53,
  "bottom": 50,
  "left": 39
}
Chrome:
code:
{
  "x": 41,
  "y": 44,
  "width": 10,
  "height": 4,
  "top": 44,
  "right": 51,
  "bottom": 48,
  "left": 41
}
Ideally I'd like them to match so I can automate test things without having to make two different sets of asserts in my test suite. It also doesn't seem to be clear which elements will have this difference (text does not for example).

Are you using a CSS reset? It could be default margins / paddings being applied that are different for that element(s). Or not. I just don't know any more.

# ? Mar 2, 2019 00:14

Master_Odin: Apr 15, 2010; My spear never misses its mark...

ladies

Lumpy posted:

Are you using a CSS reset? It could be default margins / paddings being applied that are different for that element(s). Or not. I just don't know any more.

No, just default styling. The best I can find is that Firefox is doing something with the stroke affecting how it generates the bounding box. Lines have the same problem as path. My current solution was to use getBBox() and then use the returned width/height to adjust the client bounding box.

# ? Mar 2, 2019 00:21

reversefungi: Nov 27, 2003; Master of the high hat!

Curious to see what happens if you use a css normalize and if values still differ afterward.

# ? Mar 3, 2019 02:23

Master_Odin: Apr 15, 2010; My spear never misses its mark...

ladies

The Dark Wind posted:

Curious to see what happens if you use a css normalize and if values still differ afterward.

I used https://github.com/necolas/normalize.css and it moved everything to the left/up by 8px, but FF and Chrome still have the same differences in height (8 vs 4) and width (14 vs 10).

# ? Mar 5, 2019 04:31

The Fool: Oct 16, 2003

I originally posted in the CI/CD thread, but crossposting here for a wider audience.

I'm messing around in my lab and trying to figure out a reliable way to deploy a node app to Windows.

No containers, just a Window Server VM with nothing installed.

I'm using Azure Devops Pipelines, and deploying the code from repo isn't a problem, I'm just not sure how to reliably ensure Node is present and if it is already running, how to reload the app.

# ? Mar 8, 2019 23:11

unpacked robinhood: Feb 18, 2013; by Fluffdaddy

How do I bind the data in a Vue app to the result of an XHR call ? Knowing precisely zip about javascript I'm having a bad time (I'm more familiar with languages like Python and java).

I'd like each item in the 'quotes' array I receive as a json to be displayed as individual list elements.

This is my code:

JavaScript code:

//the quotes correcly appear in the page as list elements
var app4 = new Vue({
  el: '#quote_list',
  data: {
    quotes: [
      { text: 'buy rice' },
      { text: 'get angry' },
      { text: 'goto town' }
    ]
  },
  methods:{
    uselessMethod: function(){
        console.log("vuethings.js: uselessMethod");
    }
  }
})

//this function is called from an html form
function add_source(){
    url = search_field.get('value');
    get_content_from_url(url);
}

function get_content_from_url(url) {
    //display spinner
    $( "table #spinner" ).show( "hide", function() {});
    $("#table").hide();

    search_field.value = url;
    var search_text = url;
    var myRequest = new Request({
        url: '/get_content_from_url/',
        method: 'get',
        data: {
            'source_url': search_text
        },
        onProgress: function(event, xhr) {
               //this is a mootools call
               jrows = JSON.parse(xhr.responseText);
               //correctly dumps the quotes to the console
               console.log(jrows['quotes']);
        },

        // hide the spinner gif
        onComplete: function(){
                $( "table #spinner" ).hide();
        }

    });
    myRequest.send();
}

I found that link but it looks way overcomplicated for something this basic, I think ?

unpacked robinhood fucked around with this message at 10:50 on Mar 9, 2019

# ? Mar 9, 2019 10:44

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

The Fool posted:

I originally posted in the CI/CD thread, but crossposting here for a wider audience.

I'm messing around in my lab and trying to figure out a reliable way to deploy a node app to Windows.

No containers, just a Window Server VM with nothing installed.

I'm using Azure Devops Pipelines, and deploying the code from repo isn't a problem, I'm just not sure how to reliably ensure Node is present and if it is already running, how to reload the app.

At work we use iisnode, which enables iis to manage the nodejs process or something. All I know is once the web.config is correctly set up i don�t ever have to worry about it again, and deploying is just running robocopy or unzipping.

# ? Mar 9, 2019 14:49

Emmideer: Oct 20, 2011; Lovely night, no?; Grimey Drawer

Crossposting here:

Jon Joe posted:

Complete novice here, started playing around with html+css+javascript a week ago to prototype some ideas I had. Right now I'm trying to figure out what I should use to do database-like stuff. Nothing fancy, I just want to create a bunch of objects with the same keys but different values and then get all objects that match a certain key value, so I can display them.

Whatever I use it want it to be a hosted library since like I said I'm just doing prototyping so I don't care about security and I want to be as lazy as possible in setting things up. I searched cdnjs for 'database', looked at every option, and feel a little overwhelmed, so I just want to know whatever it is you might recommend.

# ? Mar 14, 2019 21:33

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 23:47

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Firebase.

They have a real-time database called Firestore that is basically a cloud-based JSON file.

# ? Mar 14, 2019 21:47

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

«‹›277 »