I not too long ago rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little issues on my native laptop computer, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work in any respect…
The browser parses and runs JavaScript, proper? Perhaps Chrome will deal with one thing a bit of totally different from Firefox, but when the identical code is on two totally different servers it ought to work the identical in Chrome (or Firefox) regardless of which server you take a look at, proper? Proper?
First, the dynamically generated stars wouldn’t seem and once you tried to play the sport mode, it was simply clean. No actually horrible web site enemies appeared, nor may they shoot any dangerous expertise missiles at you, at the least, not within the sport mode, however I assume my buggy web site actually despatched a foul expertise missile at you. Over on the web page displaying my work, little automobiles have been alleged to zoom down the road, however they didn’t present up, both.
Let me inform you, there was no crying or tears of any variety. I used to be very sturdy and thrilled, simply thrilled, to simply accept the problem of determining what was happening. I frantically googled issues like “What may trigger JavaScript to behave in another way on two servers?”, “Why would a server change how JavaScript works?”, and “Why does everybody assume I’m crying after I’m clearly not?” However to no avail.
There have been some errors within the console, however not ones that made sense. I had an SVG aspect that we’ll name automobile (as a result of that’s what I named it). I created it in vanilla JavaScript, added it to the web page, and zoomed it down the grey strip approximating a avenue. (It’s an area theme the place you may discover planets. It’s actually cool. I swear.) I used to be setting transforms on automobile utilizing automobile.type.remodel and it was erroring out. automobile.type was undefined.
I went again to my code on my laptop computer. Executes flawlessly. No errors.
To get previous the preliminary error, I switched it from automobile.type to utilizing setAttribute e.g. automobile.setAttribute('type', 'remodel: translate(100px, 200px)');. This simply acquired me to the subsequent error. automobile was erroring out on some data-* attributes I used to be utilizing to carry details about the automobile, e.g. automobile.dataset.xspeed would additionally come again undefined after I tried to entry them. This latter know-how has been supported in SVG parts since 2015, but it was not engaged on the server, and labored advantageous regionally. What the Hoobastank could possibly be occurring? (Sure, I’m referencing the Nineteen Nineties band and, no, they don’t have anything to do with the problem. I identical to saying… errr… writing… their title.)
With search engines like google and yahoo not being a lot assist (principally as a result of the issue isn’t alleged to exist), I contacted my host considering perhaps some sort of server configuration was the problem. The very well mannered tech tried to assist, checking for server errors and different easy misconfigurations, however there have been no points he may discover. After reluctantly serving as my coding therapist and listening to my (tearless) bemoaning of ever beginning a profession in internet improvement, he mainly mentioned they help JavaScript, however can’t actually go into customized code, so better of luck. Nicely, thanks for nothing, individual whom I’ll name Truckson! (That’s not his actual title, however I assumed “Carson” was too on the nostril.)
Subsequent, and nonetheless with out tears, I attempted to clarify my troubles to ChatGPT with the preliminary immediate: “Why would JavaScript on two totally different internet servers act in another way?” It was truly sort of useful with a bunch of solutions that turned out to be very fallacious.
- Perhaps there was an inline SVG vs SVG in an
imgconcern? That wasn’t it. - May the browser be deciphering the web page as plain textual content as an alternative of HTML by way of some misconfiguration? Nope, it was flattening HTML, and the headers have been appropriate.
- Perhaps the browser is in quirks mode? It wasn’t.
- May the SVG aspect be created incorrectly? You may’t create an SVG aspect in HTML utilizing
doc.createElement('svg')as a result of SVG truly has a unique namespace. As an alternative, it’s important to usedoc.createElementNS("http://www.w3.org/2000/svg", 'svg');as a result of SVG and HTML use comparable, however very totally different, requirements. Nope, I’d used thecreateElementNSoperate and the proper namespace.
Sidenote: At a number of factors in the course of the chat session, ChatGPT began replies with, “Ah, now we’re getting spicy 🔥” in addition to, “Ah, this can be a juicy one. 🍇” (emojis included). It additionally used the phrase “bulletproof” a number of occasions in what felt like a tech-bro sort of approach. Plus there was a “BOOM. 💥 That’s the smoking gun proper there”, in addition to an “Ahhh okay, appears like there’s nonetheless a small gremlin within the works.” I can’t resolve whether or not I discover this superior, annoying, horrible, or scary. Perhaps all 4?
Subsequent, determined, I gave our present/future robotic overlord a few of my code to offer it context and present it that none of those have been the problem. It nonetheless harped on the misconfiguration and saved having me output issues to test if the automobile aspect was an SVG aspect. Once more, regionally it was an SVG aspect, however on the server it got here again that it wasn’t.
- Perhaps utilizing
innerHTMLso as to add some SVG parts to the automobile aspect garbled theautomobileaspect into not being an SVG aspect? ChatGPT volunteered to rewrite a portion of code to repair this. I put the brand new code into my system. It labored regionally! Then I uploaded it to the server and… no cube. Identical error was nonetheless occurring.
I wept overtly. I imply… I swallowed my feelings in a completely wholesome and really manly approach. And that’s the top of the article, no redemption, no answer, no reply. Only a damaged web site and the loud sobs of a person who doesn’t cry… ever…
…You continue to right here?
Okay, you’re proper. You recognize I wouldn’t go away you hanging like that. After the non-existent sob session, I complained to ChatGPT, it once more gave me some console logs together with having the automobile aspect print out its namespace and that’s when the reply got here to me. You see the namespace for an SVG is that this:
http://www.w3.org/2000/svgWhat it truly printed was this:
https://www.w3.org/2000/svgOne letter. That’s the distinction.
Usually you need all the things to be safe, however that’s probably not how namespaces work. And whereas the variations between these two strings is minimal, I would as properly have written doc.createElementNS("Gimme-them-SVGzers", "svg");. Hey, W3C, can I be on the namespace committee?
However why was it totally different? You’d be actually mad when you learn this far and it was only a typo in my code. Proper?
You’ve invested a while into this text, and I already did the fake-out of getting no reply. So, having a code typo would in all probability result in riots within the streets and hoards of dangerous evaluations.
Don’t fear. The namespace was appropriate in my code, so the place was that errant “s” coming from?
I remembered turning on a characteristic in my host’s optimization plugin: robotically repair insecure pages. It goes by way of and modifications insecure hyperlinks to safe ones. In 99% of circumstances, it’s the proper selection. However apparently it additionally modifications namespace URLs in JavaScript code.
I turned that characteristic off and all of the sudden I used to be traversing the galaxy, exploring planets with automobiles zooming down grey pseudo-elements, and firing lasers at actually horrible web sites as an alternative of getting a extremely horrible web site. There have been no tears (joyful or in any other case) nor have been there celebratory and wildly embarrassing dance strikes that adopted.
Have an identical loopy troubleshooting concern? Have you ever solved an inconceivable drawback? Let me know within the feedback.
