Skip to main content
added 1 character in body
Source Link
balpha StaffMod
  • 50.9k
  • 3
  • 57
  • 57

Gather around kids; I'll tell you a story.

In early 2011, we decided that the JavaScript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was that the interaction (or lack thereof) of these two editor instances, leading lead to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Gather around kids; I'll tell you a story.

In early 2011, we decided that the JavaScript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was the interaction (or lack thereof) of these two editor instances, leading to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Gather around kids; I'll tell you a story.

In early 2011, we decided that the JavaScript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was that the interaction (or lack thereof) of these two editor instances lead to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Active reading [<https://en.wikipedia.org/wiki/JavaScript>].
Source Link
Peter Mortensen
  • 31.6k
  • 4
  • 22
  • 14

Gather around kids,kids; I'll tell you a story.

In early 2011, we decided that the JavascriptJavaScript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was the interaction (or lack thereof) of these two editor instances, leading to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Gather around kids, I'll tell you a story.

In early 2011, we decided that the Javascript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was the interaction (or lack thereof) of these two editor instances leading to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Gather around kids; I'll tell you a story.

In early 2011, we decided that the JavaScript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was the interaction (or lack thereof) of these two editor instances, leading to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).

Source Link
balpha StaffMod
  • 50.9k
  • 3
  • 57
  • 57

Gather around kids, I'll tell you a story.

In early 2011, we decided that the Javascript bundle that we shipped on every page load was getting too big. Especially because most people didn't need to use most of the functionality in it, and even if they did, they didn't need it within milliseconds of seeing the page, which means there was no point in blocking the page load with that download.

So I split our JS into a small part that needed to be loaded immediately, and the bigger part that could be deferred until a couple of seconds later.

The "small part" included a lazy-loading mechanism called StackExchange.using that made it easy to say "I need this dependency now, please load it if you haven't yet, and then run my code".

Fast forward to 2022.

The majority of our client code is written in TypeScript now. We have modules and imports instead of a giant global namespace. We have webpack instead of text file concatenation.

And it's great. Unfortunately StackExchange.using is also still around and still used fairly heavily. As proud as I am of that code which did great at the time, there are much more modern ways to do these things today. And the old and the new are not really compatible. It's very easy (and this is where this story becomes relevant) to accidentally load a piece of code twice -- once with the old method, once with the modern one.

And that's exactly what happened here. The editor was loaded with StackExchange.using as it's supposed to, but in some cases it was also loaded, a second time, as a TS module import.

The ultimate result of this was the interaction (or lack thereof) of these two editor instances leading to the answer-your-own-question editor not being initialized if that second file was included for you (which only happens if you have certain moderator-ish powers, so the majority of people weren't impacted by this).

Tyler fixed the immediate issue yesterday, and I'm going to try finding a way to have this kind of mistake be harder to make (at least until StackExchange.using is finally laid to rest after a long and productive life).