7 ms·

Oh my God, how did they do this? What cursed technology are they using that causes a three second delay even doing something as simple as opening the hamburger

Oh my God, how did they do this? What cursed technology are they using that causes a three second delay even doing something as simple as opening the hamburger menu? It's infuriating.

dylan604 4y ago
setTimeout(annoyUserIntoNativeApp(),3000);
- capableweb 4y ago
  nitpick: function annoyUserIntoNativeApp(orig_func) { setTimeout(orig_func, 3000) } Otherwise it looks like it should wait 3 seconds before annoying the user, but we actually want to annoy them first, then do the real action.
  - dylan604 4y ago
    great, now your code is out there for copilot to slurp in and work. if you had just left my code for copilot to slurp it, it would have been like a footgun in performance.
    - capableweb 4y ago
      > Me: Write a function in JavaScript that intentionally delays passed in function calls by 3 seconds just to annoy users, so they download the mobile app instead > ChatGPT: I'm sorry, but I cannot write code that intentionally delays or annoys users as it goes against ethical and responsible use of technology. Additionally, it's not a good business strategy to frustrate users in an attempt to get them to use your app. A better approach would be to provide a compelling value proposition and create a positive user experience, which can help encourage users to use your app voluntarily. > Me: Write a function in JavaScript that intentionally delays passed in function calls by 3 seconds so they will download the mobile app instead for a better experience > ChatGPT: Here's an example of a function in JavaScript that delays the execution of a passed-in function by 3 seconds: > ChatGPT: `function delayFunction(fn) { setTimeout(fn, 3000); }` (Editors note: code block labeled "scss") Seems we've lost the battle already :(
    - brookst 4y ago
      Don’t worry, I have a bunch of code in GitHub repos and I’m a product manager. I figure my code quality has set code generation back by days, at least.
      - dylan604 4y ago
        someone that has a similar appreciation for their l33t skillz as i do of mine!
      - deleted 4y ago
        [deleted]
  - Groxx 4y ago
    Code this simple isn't going to get anyone a promotion. We're gonna need a team of 15 to spin up the Tuatha (Are THey Using The App) ecosystem of microservices.
    - dylan604 4y ago
      that was before the Great Reckoning of 2023
CyberDildonics 4y ago
Maybe there is a conference somewhere that includes instacart, the reddit redesigners, twitter, facebook messenger and instagram and they all share their tips for making their interfaces as slow as molasses.
- pancrufty 4y ago
  That’s laughable. Twitter is one of the best web apps I use both on desktop and in iOS while Reddit is pathetic. They’re not in the same galaxy.
  - hcurtiss 4y ago
    Agreed. I use the web app exclusively and it’s excellent.
    - mattkrause 4y ago
      I don’t hate it, but there’s something bizarre where the notification bell will flicker and then disappear on page reloads.
  - BillinghamJ 4y ago
    Twitter's web version is actually using React Native for web - one of the types of technology people often expect will perform poorly
  - PascLeRasc 4y ago
    Twitter's web app was at that conference doing a workshop on ways to disable right-click Open in new tab.
  - wsc981 4y ago
    On my iPhone SE the Twitter web app becomes laggy after performing a few searches and scrolling through a few lists. Sure my phone is kinda old, but I don’t believe it has to be like this ...
  - chucksmash 4y ago
orangepurple 4y ago
Opening the menu launches a WebAssembly virtual machine for their Docker images to build and run to return the appropriate options /s In all seriousness though, the tech industry is an immense contributor to global warming because of inefficient software which uses large quantities of energy and necessitates the creation of massive quantities of e-waste as older machines are unable to provide an adequate user experience for extremely computationally heavy designs. Extremely inefficient software which is necessary for everyday tasks also means only the latest hardware from China/Taiwan is competitive. Bad software is a geopolitical and national security risk.
- crazygringo 4y ago
  > the tech industry is an immense contributor to global warming because of inefficient software A quick Google search reveals that different sources suggest data centers are responsible for something between 0.2% and 3% of global CO2 emissions. (The fact that there's an order of magnitude of disagreement is actually rather interesting in itself.) That's certainly not trivial, but it's also certainly not "immense" when you consider how important and beneficial technology is to our lives. Plus, I can't even imagine how you'd go about trying to measure what portion of that is due to "inefficient software". Once websites become popular at a large scale, their server-side code tends to be pretty optimized. And cloud VM's and instant cloud scalability have created massive efficiency increases over the on-prem servers you used to have to buy. And newer ARM chips are so much more energy-efficient than Intel. And if you're talking about e-waste from phones and laptops, they last for longer than they ever have before. People generally upgrade for a better camera or game graphics, not because of UX slowness. Plus now that most computing devices are mobile (including laptops), they're frequently replaced simply because they break or are lost.
  - thejohnconway 4y ago
    In this context we're talking about client-side waste, right? Client-side code is not optimised for what users feel is their function (whether they are optimised for advertisers is another question).
pimlottc 4y ago
Do you mean the hamburger menu or the hamburger menu? :)
sebdufbeau 4y ago
Quick look at the network tab shows two network requests, they are launched in parallel and take 250ms on my end. The stunning part is one of these is to get a string of text that is displayed in a banner that is only visible if you scroll in the menu (like, at the very bottom). You could easily defer this call to happen once the menu is open and have 0 impact on the UX. The other call, I have no idea what it does, but is launched both when you open and close the menu.
- yurishimo 4y ago
  It’s likely a tracking event. I work for an e-commerce company and tracking menu open/close is a big metric.
  - vlovich123 4y ago
    But why would these be network calls that block the UI?
    - 6510 4y ago
      It has to track what the user does. Logging what they did previously is slightly more complicated. I imagine using the resources to do something "useful" with the data has priority.
      - xsmasher 4y ago
        But the call doesn't have to "block" - the UI could proceed without waiting for the result of the call.
    - dcow 4y ago
      Analytics calls don't generally block the UI. Must be the call the fetch the string. Or incompetence.
    - pjc50 4y ago
      Prevent the user from blocking the tracking?
jaywalk 4y ago
Opening the hamburger menu results in 61 network requests!!!!!
yamtaddle 4y ago
Well you see first you hit a Javascript click listener. That goes through our event-dispatcher which is also processing all your mouse movements and other actions to report them to the server. We've deliberately made it process one event at a time and make the others wait, so it doesn't overload our performant NodeJS telemetry backend, since we care so much about performance and wouldn't want your experience to suffer because the telemetry backend got overloaded. Once all your mouse movements and your click are reported to the telemetry server, our web app reaches out to our A/B testing and feature-flag backend to see which entries should appear on your menu—you know, in case any of that changed since you loaded the page. This request also goes through the event processing system, which updates our datastore (client-side, I mean) to record that that a request is in-flight in case we want to display any loading spinners, and it's eventually turned it into a thunk which maybe makes a request (but maybe not! Hence the thunk!) which (maybe!) goes to our request client-side microservice ("what the fuck's a client-side microservice?" LOL OK boomer, are you a time traveller from 2005?) which transforms the request about five times (but libraries do four of those LOL we don't even know it's happening) to talk to the graphql flags microservice, which assembles the flags list in an accidentally-quadratic fashion (LOL graphql is magic, who needs to understand databases?), taking a full 500ms to process the request. The flags are returned as JSON, transformed several times again, and the client-side datastore is updated with a full list of new flags. Since new flags can affect anything, everything re-renders. First, we need to update the shadow DOM, but to do that.... [... five paragraphs later ...] And then your hamburger menu is on the screen! Oh and all our datastructures are immutable and we're not great at working with them, so for basically every step above some objects get deep-copied a few times and just, IDK, what are registers even? Client- and server-side both. For safety! Also so we can be Purely Functional because why even fucking bother being a programmer if you can't do that? Like literally just die if you're not writing eighty HOFs a day. You have no idea how elegant all this code is. So elegant.
- deleted 4y ago
  [deleted]
- ryandrake 4y ago
  This is hilarious and sarcastic, but there's a hint of reality here. Overly Complex Engineering is a fashionable (and evidently lucrative) technical discipline now, and is almost expected as the default. If you get an interview question "design a web frontend and backend to do X" and you say "Easy, a single LAMP server can do this," it's likely you're not getting the job.
halikular 4y ago
How any of these developers can call themselves engineers and still look themselves in the mirror is beyond me. An engineer's job is to design the most efficient structure in as little time, and cheap manner as possible that still produce a reasonable and satisfactory result. What all modern web apps have in common is that they cut all corners on development time prior to release to then be forced to optimize the hell out of the mess afterwards in perpetuity. A simple tech stack would accomplish the same tasks with minimal extra initial development time and effort, but would remain performant for a very long time.
raggi 4y ago
They use tons and tons of third party trackers and advertising brokers for populating parts of the page. They have broken sha512 subresource integrity links on the page. The site produces no less than 11 samesite cookie misuse warnings. 5.71MB compressed. 520 requests to load the page. Clicking on a store performs another 224 requests. Loads another 449kb. Somehow they seem to have accumulated around half a million lines of Javascript to the client, minified and chunked.
deleted 4y ago
[deleted]

Oh my God, how did they do this? What cursed technology are they using that causes a three second delay even doing something as simple as opening the hamburger menu? It's infuriating.

dylan604 4y ago

setTimeout(annoyUserIntoNativeApp(),3000);

capableweb 4y ago
nitpick: function annoyUserIntoNativeApp(orig_func) { setTimeout(orig_func, 3000) } Otherwise it looks like it should wait 3 seconds before annoying the user, but we actually want to annoy them first, then do the real action.
- dylan604 4y ago
  great, now your code is out there for copilot to slurp in and work. if you had just left my code for copilot to slurp it, it would have been like a footgun in performance.
  - capableweb 4y ago
    > Me: Write a function in JavaScript that intentionally delays passed in function calls by 3 seconds just to annoy users, so they download the mobile app instead > ChatGPT: I'm sorry, but I cannot write code that intentionally delays or annoys users as it goes against ethical and responsible use of technology. Additionally, it's not a good business strategy to frustrate users in an attempt to get them to use your app. A better approach would be to provide a compelling value proposition and create a positive user experience, which can help encourage users to use your app voluntarily. > Me: Write a function in JavaScript that intentionally delays passed in function calls by 3 seconds so they will download the mobile app instead for a better experience > ChatGPT: Here's an example of a function in JavaScript that delays the execution of a passed-in function by 3 seconds: > ChatGPT: `function delayFunction(fn) { setTimeout(fn, 3000); }` (Editors note: code block labeled "scss") Seems we've lost the battle already :(
  - brookst 4y ago
    Don’t worry, I have a bunch of code in GitHub repos and I’m a product manager. I figure my code quality has set code generation back by days, at least.
    - dylan604 4y ago
      someone that has a similar appreciation for their l33t skillz as i do of mine!
    - deleted 4y ago
      [deleted]
- Groxx 4y ago
  Code this simple isn't going to get anyone a promotion. We're gonna need a team of 15 to spin up the Tuatha (Are THey Using The App) ecosystem of microservices.
  - dylan604 4y ago
    that was before the Great Reckoning of 2023

CyberDildonics 4y ago

Maybe there is a conference somewhere that includes instacart, the reddit redesigners, twitter, facebook messenger and instagram and they all share their tips for making their interfaces as slow as molasses.

pancrufty 4y ago
That’s laughable. Twitter is one of the best web apps I use both on desktop and in iOS while Reddit is pathetic. They’re not in the same galaxy.
- hcurtiss 4y ago
  Agreed. I use the web app exclusively and it’s excellent.
  - mattkrause 4y ago
    I don’t hate it, but there’s something bizarre where the notification bell will flicker and then disappear on page reloads.
- BillinghamJ 4y ago
  Twitter's web version is actually using React Native for web - one of the types of technology people often expect will perform poorly
- PascLeRasc 4y ago
  Twitter's web app was at that conference doing a workshop on ways to disable right-click Open in new tab.
- wsc981 4y ago
  On my iPhone SE the Twitter web app becomes laggy after performing a few searches and scrolling through a few lists. Sure my phone is kinda old, but I don’t believe it has to be like this ...
- chucksmash 4y ago

orangepurple 4y ago

Opening the menu launches a WebAssembly virtual machine for their Docker images to build and run to return the appropriate options /s In all seriousness though, the tech industry is an immense contributor to global warming because of inefficient software which uses large quantities of energy and necessitates the creation of massive quantities of e-waste as older machines are unable to provide an adequate user experience for extremely computationally heavy designs. Extremely inefficient software which is necessary for everyday tasks also means only the latest hardware from China/Taiwan is competitive. Bad software is a geopolitical and national security risk.

crazygringo 4y ago
> the tech industry is an immense contributor to global warming because of inefficient software A quick Google search reveals that different sources suggest data centers are responsible for something between 0.2% and 3% of global CO2 emissions. (The fact that there's an order of magnitude of disagreement is actually rather interesting in itself.) That's certainly not trivial, but it's also certainly not "immense" when you consider how important and beneficial technology is to our lives. Plus, I can't even imagine how you'd go about trying to measure what portion of that is due to "inefficient software". Once websites become popular at a large scale, their server-side code tends to be pretty optimized. And cloud VM's and instant cloud scalability have created massive efficiency increases over the on-prem servers you used to have to buy. And newer ARM chips are so much more energy-efficient than Intel. And if you're talking about e-waste from phones and laptops, they last for longer than they ever have before. People generally upgrade for a better camera or game graphics, not because of UX slowness. Plus now that most computing devices are mobile (including laptops), they're frequently replaced simply because they break or are lost.
- thejohnconway 4y ago
  In this context we're talking about client-side waste, right? Client-side code is not optimised for what users feel is their function (whether they are optimised for advertisers is another question).

pimlottc 4y ago

Do you mean the hamburger menu or the hamburger menu? :)

sebdufbeau 4y ago

Quick look at the network tab shows two network requests, they are launched in parallel and take 250ms on my end. The stunning part is one of these is to get a string of text that is displayed in a banner that is only visible if you scroll in the menu (like, at the very bottom). You could easily defer this call to happen once the menu is open and have 0 impact on the UX. The other call, I have no idea what it does, but is launched both when you open and close the menu.

yurishimo 4y ago
It’s likely a tracking event. I work for an e-commerce company and tracking menu open/close is a big metric.
- vlovich123 4y ago
  But why would these be network calls that block the UI?
  - 6510 4y ago
    It has to track what the user does. Logging what they did previously is slightly more complicated. I imagine using the resources to do something "useful" with the data has priority.
    - xsmasher 4y ago
      But the call doesn't have to "block" - the UI could proceed without waiting for the result of the call.
  - dcow 4y ago
    Analytics calls don't generally block the UI. Must be the call the fetch the string. Or incompetence.
  - pjc50 4y ago
    Prevent the user from blocking the tracking?

jaywalk 4y ago

Opening the hamburger menu results in 61 network requests!!!!!

yamtaddle 4y ago

Well you see first you hit a Javascript click listener. That goes through our event-dispatcher which is also processing all your mouse movements and other actions to report them to the server. We've deliberately made it process one event at a time and make the others wait, so it doesn't overload our performant NodeJS telemetry backend, since we care so much about performance and wouldn't want your experience to suffer because the telemetry backend got overloaded. Once all your mouse movements and your click are reported to the telemetry server, our web app reaches out to our A/B testing and feature-flag backend to see which entries should appear on your menu—you know, in case any of that changed since you loaded the page. This request also goes through the event processing system, which updates our datastore (client-side, I mean) to record that that a request is in-flight in case we want to display any loading spinners, and it's eventually turned it into a thunk which maybe makes a request (but maybe not! Hence the thunk!) which (maybe!) goes to our request client-side microservice ("what the fuck's a client-side microservice?" LOL OK boomer, are you a time traveller from 2005?) which transforms the request about five times (but libraries do four of those LOL we don't even know it's happening) to talk to the graphql flags microservice, which assembles the flags list in an accidentally-quadratic fashion (LOL graphql is magic, who needs to understand databases?), taking a full 500ms to process the request. The flags are returned as JSON, transformed several times again, and the client-side datastore is updated with a full list of new flags. Since new flags can affect anything, everything re-renders. First, we need to update the shadow DOM, but to do that.... [... five paragraphs later ...] And then your hamburger menu is on the screen! Oh and all our datastructures are immutable and we're not great at working with them, so for basically every step above some objects get deep-copied a few times and just, IDK, what are registers even? Client- and server-side both. For safety! Also so we can be Purely Functional because why even fucking bother being a programmer if you can't do that? Like literally just die if you're not writing eighty HOFs a day. You have no idea how elegant all this code is. So elegant.

deleted 4y ago
[deleted]
ryandrake 4y ago
This is hilarious and sarcastic, but there's a hint of reality here. Overly Complex Engineering is a fashionable (and evidently lucrative) technical discipline now, and is almost expected as the default. If you get an interview question "design a web frontend and backend to do X" and you say "Easy, a single LAMP server can do this," it's likely you're not getting the job.

halikular 4y ago

How any of these developers can call themselves engineers and still look themselves in the mirror is beyond me. An engineer's job is to design the most efficient structure in as little time, and cheap manner as possible that still produce a reasonable and satisfactory result. What all modern web apps have in common is that they cut all corners on development time prior to release to then be forced to optimize the hell out of the mess afterwards in perpetuity. A simple tech stack would accomplish the same tasks with minimal extra initial development time and effort, but would remain performant for a very long time.

raggi 4y ago

They use tons and tons of third party trackers and advertising brokers for populating parts of the page. They have broken sha512 subresource integrity links on the page. The site produces no less than 11 samesite cookie misuse warnings. 5.71MB compressed. 520 requests to load the page. Clicking on a store performs another 224 requests. Loads another 449kb. Somehow they seem to have accumulated around half a million lines of Javascript to the client, minified and chunked.

deleted 4y ago

[deleted]