When you webpack so badly you broke every other script (and most of the web page)
-
People: webpack allows you to bundle your JS files effortlessly for browser use!
Background: I was checking this JS library because for some reasons users demand generating .docx files instead of .pdf files because they want to edit the document afterwards for some reasons:
GitHub - dolanmiu/docx: Easily generate and modify .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.
Easily generate and modify .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser. - dolanmiu/docx
Part of its appeal is that it's supposed to work on browser too! Provided you script tagged the
index.jsbuild directly from unpkg. What? Is unpkg even a CDN in the first place? Apparently this is the standard nowadays because I've seen leaflet plugins doing the same too.Okay, let's script tag it and try it out. Using it alone in their demo page is fine, but when added to the actual page with other functionality already existing, it's breaking a lot of stuff very badly. Like, image elements that are supposed to be spawned from other scripts are not working anymore.
"
? How can a script broke a web page so badly" I thought.It took me a day to realize why it's fucking up the entire page: unlike sensible libraries like pdf.js which dumps all its exports inside
pdfJsLibnamespace, this library... dumps everything inwindow, aka global space
.Normally by that alone it wouldn't fuck up pages like that, but because it's a docx generation library, it has various classes with names like...
Document.File.Image.Media. Oops. Do you see the problem now?Spoiler
Every DOM object has its own constructors in JS. Most
newer objects have a more sensible naming scheme likeHTMLDetailsElementorHTMLCanvasElementfor<details>and<canvas>, but things like<image>is very old so it uses the old naming scheme, which means its constructor isImage. So this library just straight out overwrote the constructor for<image>!Yeah someone could so something really nasty with this. Maybe a new version of evil.js?
And of course, that's not the only WTF with this library: the API keeps changing in radical, chaotic ways; documentations are usually incorrect to the version you're using; there are 3 different ways to insert an image inside a table depending on you're using
4.0.0,4.7.1or5.0.0rcbut none of them work; inserting custom font css style doesn't really work at all; among other things.But at least they don't fuck your precious web page facing up along with every other script you already have. That's really a new to me.
-
@levicki said in When you webpack so badly you broke every other script (and most of the web page):
But hey, Javascript is cool, every kid can write code in it... oh wait...
Last time I checked kids can't read openXML specs, or write a library that implements the spec.
In any case, the Scratch thread is
-
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
documentations are usually incorrect to the version you're using
If I had a dime for every time I've seen a thing with overt documentation, a help file, and the thing itself, and the help disagrees with the documentation and neither of them accurately describes the thing, well, ...
... I'd have so much small change that there would be no room in my pocket for my GAU-8.
-
I've spent probably 20 hours getting a good webpack config boilerplate I can copypasta across my projects (and generally it takes an hour or two of tweaking to adapt to the specific needs of a project).
"Effortlessly."
But, if you configure it correctly, you can indeed port almost any NodeJS code to the browser with Webpack.
-
I would generally recommend that you don't grab browserified libraries, but write your code against the npm version of the library, and then webpack your code (it will include the dependencies automatically). Then you never need to touch the global scope.
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
But, if you configure it correctly, you can indeed port almost any NodeJS code to the browser with Webpack.
"You can program the back end in the same language as the front end!"
So..... just like the days of fat client applications written in C++ (if you were lucky, C# if not, and C if you were really naughty) that communicates to a back end written in C++?
Except now this is in a single threaded language, that is inconsistently implemented across browsers so you have to learn the oddites of each implementation. There's libraries that hide a lot of the oddities, but you can't rely on them because they do an imperfect job of it. and the language is designed to "just muddle on as best you can" so things that should be errors, caught at compile time, are acceptable and the code runs, except it doesn't do so correctly.
Except that the average C++ coder is fairly decent, with a healthy understanding, and perhaps a touch of fear, of their chosen language. Contrary-wise the average web programmer appears to operate on a "copy code from stack overflow. twiddle knobs until it works. if it doesn't work copy more code from stack overflow and repeat." Do you really want to let that sort of developer onto your servers? Do you really want that sort of developer dictating your hardware needs while you watch your budget disappear into the black hole of "throw more hardware at the problem. we're bound to get acceptable performance soon!"?
Really?! You do!?!?!
Well.... I know one thing.... I ain't trusting you in my server room. Supervised or not. Come on, the exit is this way. I'm sure we don't want to have to call security and make a scene.
-
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen IIRC you use JS quite a lot.
For fun, yes!
For profit?
BWA HA HA HA HA HA HA HA HA HA HA HA!
No.
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
So..... just like the days of fat client applications written in C++ (if you were lucky, C# if not, and C if you were really naughty)
...wow. When was the last time you were tested for dyslexia? Of the three mentioned, C++ is easily the most terrible.
Except that the average C++ coder is fairly decent
C++ may not be the worst language ever developed, but it is without a doubt the worst ever to be taken seriously.
-
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
C++ may not be the worst language ever developed,
The two things I read that made me never want to touch C++ ever again were:
- The Design and Evolution of C++ by Bjarne Stroustrup (where the answer to "WhyTF does this work this way" and "WhyTF is the syntax this way" was invariably "it was the only compromise we could get the committee to agree on")
- A long series of blog posts about Undefined Behavior
-
Also, C++ code is considered portable, but only if you do unspeakable things with preprocessor directives.
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
Here there be dragons
You know how to frighten the dragons away? Write PHP to generate Perl to generate C++.
-
@dkf said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
Here there be dragons
You know how to frighten the dragons away? Write PHP to generate Perl to generate C++.
GitHub - mame/quine-relay: An uroboros program with 100+ programming languages
An uroboros program with 100+ programming languages - mame/quine-relay
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
C++ (if you were lucky, C# if not
Nah, Unity3D + WebGL front ends would be the new meta. If only you monkeys would stop lazing around and start learning game dev...
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
(where the answer to "WhyTF does this work this way" and "WhyTF is the syntax this way" was invariably "it was the only compromise we could get the committee to agree on")
But hey, if it's Java you have instead "it was the only compromise we could get Oracle to agree on".
And in JS, "it was the hip concept at the moment proposal is made"
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
-
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
I'm going to have to make a print of that and post it in my classroom.
-
@Benjamin-Hall said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
I'm going to have to make a print of that and post it in my classroom.
My Latin's pretty rusty, but I THINK that would be......
Ingressus Desperantibus UniversisYes?
or did i get my word order wrong again? I always got marks of for mis conjugating verbs and putting words in the wrong order.....
LATIN IS HARD! OKAY?!
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Benjamin-Hall said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
I'm going to have to make a print of that and post it in my classroom.
My Latin's pretty rusty, but I THINK that would be......
Ingressus Desperantibus UniversisYes?
or did i get my word order wrong again? I always got marks of for mis conjugating verbs and putting words in the wrong order.....
LATIN IS HARD! OKAY?!
The original's in archaic italian, not latin anyway. Google says "Lasciate ogne speranza, voi ch'intrate"
-
@Steve_The_Cynic said in When you webpack so badly you broke every other script (and most of the web page):
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
documentations are usually incorrect to the version you're using
If I had a dime for every time I've seen a thing with overt documentation, a help file, and the thing itself, and the help disagrees with the documentation and neither of them accurately describes the thing, well, ...
... I'd have so much small change that there would be no room in my pocket for my GAU-8.
People: Github issues is our documentation, when in doubt, consult it for the current canon status
-
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
current canon status
"I hate printers" thread is
-
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
C++ may not be the worst language ever developed, but it is without a doubt the worst ever to be taken seriously.
Except JS.
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
Also, C++ code is considered portable, but only if you do unspeakable things with preprocessor directives.
It's portable because it allows those directives. Unlike almost every other tech stack in existence, which are perfectly fine with x86 alone, sometimes maybe ARM but that's a really big maybe.
-
@Benjamin-Hall said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
I'm going to have to make a print of that and post it in my classroom.
My high school history teacher DID have this written over the door to her classroom (just the top part, of course).
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen IIRC you use JS quite a lot.
For fun, yes!
-
@_P_ Java has been mostly run by the JCP since Java was still owned by Sun.
Oh yeah, that's the other thing, Oracle hasn't always owned Java.
Filed under: Did you really just state that "Designed by committee" is somehow better than "designed by an evil corporation"?
-
@loopback0 said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen IIRC you use JS quite a lot.
For fun, yes!
https://avatars.elementia.me/avatars/static/size-300/memes/Confused (1).png
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@Mason_Wheeler said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
Undefined Behavior
Here there be dragons
I've always wondered: in a fantasy world where dragons are real and civilization has a friendly relationship with them, would their maps mark "here there be no dragons" in unknown areas?
“Most people think the words on these gates were written by demons to sound foreboding, but that’s not quite right. This is the outside of the gates, where the demons’ sway is lesser. This warning was written as helpful advice by some friendly power.”
The gates of Hell opened, and Santoni and his crew stepped inside. The camera view wheeled around. The inside of the gates said “KEEP HOPING, SUCKERS”.
-
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
So..... just like the days of fat client applications written in C++ (if you were lucky, C# if not, and C if you were really naughty) that communicates to a back end written in C++?
Wat? How is C# worse than C++? How can C# be considered bad at all?
-
@pie_flavor It depends on what you're doing. For the application I work on, C# is a total non-starter as its basic runtime simply isn't going to fit onto the hardware concerned, let alone any actual application written in it. (The application doesn't need managed memory.) There's literally nothing worse than code that won't run at all because it won't load in the first place.
Except JS, of course.
The related host controller code could be in C# but isn't because nobody on the team knows it. It also has a hard requirement on Python because that's what our users are used to, but that in itself isn't a barrier; that we also use numpy and scipy (the application is numerically heavy) is a barrier and actually a PITA…
-
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
Provided you script tagged the index.js build directly from unpkg.
This sentence is pure gibberish to me. Does it actually have a meaning or was it generated by a neural network that's trying to sound tech-y?
-
@dkf the post explicitly mentions "fat client", though.
-
@dfdub said in When you webpack so badly you broke every other script (and most of the web page):
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
Provided you script tagged the index.js build directly from unpkg.
This sentence is pure gibberish to me. Does it actually have a meaning or was it generated by a neural network that's trying to sound tech-y?
No, that's just my neural network like writing style. It means you do this:
<script src="https://unpkg.com/docx@4.0.0/build/index.js"></script>
-
@pie_flavor said in When you webpack so badly you broke every other script (and most of the web page):
the post explicitly mentions
reading
posting
-
No, that's just my neural network like writing style. It means you do this:
<script src="https://unpkg.com/docx@4.0.0/build/index.js"></script>You'll have to teach me so I can confuse my colleagues more efficiently. I never would have guessed you meant that.
-
@dfdub said in When you webpack so badly you broke every other script (and most of the web page):
No, that's just my neural network like writing style. It means you do this:
<script src="https://unpkg.com/docx@4.0.0/build/index.js"></script>You'll have to teach me so I can confuse my colleagues more efficiently. I never would have guessed you meant that.
It's a trade secret
-
@pie_flavor said in When you webpack so badly you broke every other script (and most of the web page):
@dkf the post explicitly mentions "fat client", though.
So, he could still be working on an embedded system
-
@pie_flavor said in When you webpack so badly you broke every other script (and most of the web page):
Unsong
So, Apollo crashes into the celestial sphere that holds heavenly bodies, causing the machinery that kept the universe running on mathematics to break... also, Bible singularity, whale puns and Eric S. Raymond references? I'm sold. This might be better than Rapture of the Nerds!
-
@dkf said in When you webpack so badly you broke every other script (and most of the web page):
@Vixen said in When you webpack so badly you broke every other script (and most of the web page):
Here there be dragons
You know how to frighten the dragons away? Write PHP to generate Perl to generate C++.
Doesn't that summon Cthulhu?
-
@levicki said in When you webpack so badly you broke every other script (and most of the web page):
driver installers) in Node.js
As someone who occasionally writes kernel-mode drivers, I just about vomited at this statement.
-
If you think that's bad, consider that thanks to Google's WebUSB, you can write actual drivers in NodeJS.
-
The best IDE runs on Electron.
-
@Zerosquare said in When you webpack so badly you broke every other script (and most of the web page):
WebUSB
It's debatable whether you'd call USB drivers "actual drivers." USB is pretty limited. No interrupts, no access to address space, no memory-mapped IO, no DMA...you can safely do everything from user-mode with little risk.
I definitely agree that writing USB drivers in NodeJS is a bad idea, but not nearly as bad an idea as writing PCI drivers (a.k.a. "actual drivers," which have complete freedom to obliterate your PC in a thousand different ways) in NodeJS.
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
The best IDE runs on Electron.
They'll just redefine IDE as "IDEs that don't run on electron".
And then claim that Eclipse is the best IDE. Or emacs/vim/atom even thought they aren't even close to real IDEs. Something like that
-
@mott555 said in When you webpack so badly you broke every other script (and most of the web page):
@Zerosquare said in When you webpack so badly you broke every other script (and most of the web page):
WebUSB
It's debatable whether you'd call USB drivers "actual drivers." USB is pretty limited. No interrupts, no access to address space, no memory-mapped IO, no DMA...you can safely do everything from user-mode with little risk.
-
@mott555 said in When you webpack so badly you broke every other script (and most of the web page):
No interrupts, no access to address space, no memory-mapped IO, no DMA...
That's true, but it's already bad and dangerous enough. And I'm sure some people are crazy enough to think that the next step should be NodeJS code running in kernel space.
-
@error said in When you webpack so badly you broke every other script (and most of the web page):
The best IDE runs on Electron.
-
@_P_ said in When you webpack so badly you broke every other script (and most of the web page):
@error said in When you webpack so badly you broke every other script (and most of the web page):
The best IDE runs on Electron.
They'll just redefine IDE as "IDEs that don't run on electron".
And then claim that Eclipse is the best IDE. Or emacs/vim/atom even thought they aren't even close to real IDEs. Something like that
vi! root's own notebook.
.png){kind=link}