What should have been an IMG element became this
twitter.com
twitter.com
The comparison here is, "serving your content, and then doing whatever the heck you want", and "dynamically fetching all of your core content on the fly after synchronously downloading and executing all of the auxiliary content that >85% of your users do not care about."
I think Youtube is overengineered as well, but at least Youtube has the good sense to prioritize loading the video first, and the recommendations/comments second.
It is surreal to jump from a thread with a Google dev telling me that user-agent scraping is necessary because progressive feature detection would require shipping unnecessary polyfills to modern browsers, to a conversation with an Imgur dev telling me that because 5% of their users need a special feature, everyone should wait twice as long to get core content served to them.
I realize these aren't the same people, and the web development community is diverse, but... I don't know how to reconcile those perspectives. We will jump through so many crazy, horrifying engineering hoops to get bundle sizes down: using statistics/user-behavior to calculate dynamic bundles on the fly, user-agent sniffing, compiling Javascript frameworks, prefetching URLs, HTTP2. But serving an img tag with our core HTML is a bridge too far?
As a webdev I actually target older methods in order to get my work done. Is it as "sexy" as a ton of stuff you mentioned? Nope. But I can get a lot done with 20-50 lines of jQuery (or maybe a bit more verbose w/vanilla JS) by directly working with the DOM vs. roping in frameworks in every situation I find myself in. I try to build those "business capable" websites you're mentioning in the first paragraph.
The biggest thing that bothers me is most of us in the industry are "abstraction obsessed" where we would rather have discussions on the complex tools we use vs. how we solve the problem at hand. God help you if you're that one older dev in the back of the room going, "yeah but can't we just throw some vanilla JS/basic jQuery/simple DOM manipulation at that and be done with this?"
Something tells me that you could probably serve a page with almost no JS on it and accomplish the same thing Imgur does, including the comments and monetization stuff, with "server side rendering", which is what we used to just call "CGI serving HTML" until that wasn't trendy enough.
I'll go out on a limb and say that most webdevs (regardless of schooling) can't handle basic "from-scratch" work using a language without a framework... it's terrifying. It's a lot of trend-followers who often can't verbally dictate their decision to use one tool over another (framework, lib, or otherwise).
I have a JS interview question which is, "describe to me the the common nodes one would often leverage in a DOM?" Really all I'm looking for is a basic understanding of the document, element, attribute, and text nodes as those are the ones often interacted with. I'd say about 80% don't have an answer/totally BS one. They still totally get hired though (and I'm seen as the big bad wolf who "thumbs-downs" everyone). This is in Southern California in a major city where there are multiple FAANG offices =|
Webdev has always been a huge variability of skill. You have WordPress "install 50 plugins" "developers" all the way up to top-level programming talent who are just as technically talented as top C/C++ folks (they just target a browser/web server)... and it's incredibly difficult to weed the engineers out from the "devs" in my experience.
> Something tells me that you could probably serve a page with almost no JS on it and accomplish the same thing Imgur does
Yep - and I'll even argue it'd work better (more performant), and be a much more predictable product to develop on and ship!
> which is what we used to just call "CGI serving HTML" until that wasn't trendy enough.
100% agree and actually had a good chuckle at this =)
It moved a lot of complexities from the server side to the client side-- management of state and orchestration of data, turning a single request for a finished page into a whole streak of API hits to populate out a template.
They went for an API-based approach with the thought they could expose it directly for external power users, but the API ends up not even serving their INTERNAL needs well (the information you want for this report is scattered across 12 different tables, but combining them together violates the REST spirit)
I'm not sure it will be faster or more stable than the old code even once they finish optimization. The only user-facing benefit appears to be that they replaced the 200-millisecond flash of white as it loads each page with a 5-second spinning beachball in the template as it collects the data a piece at a time.
I strongly suspect a lot of the motivation was the devs wanting to put some trendier technologies on their resumes.
Otherwise, like you said, it's just rebuilding everything that a capable server-side framework gives you to then run it in the browser with worse UX. I've consistently proven to my team that a server-rendered page with some optional JS on top (Vue is great for this) is 1000x better for users than a giant JS payload just to make API calls and render some HTML.
We run a React SPA, and our backend for initial page load & API is in PHP.
Frontend devs work with backend devs to ensure the critical path of the page can we gathered in 1 request. This usually means having some expand query params on the get request.
We also preload critical API responses in the initial page load to prevent this initial loading indicator.
> I'm not sure it will be faster or more stable than the old code even once they finish optimization. The only user-facing benefit appears to be that they replaced the 200-millisecond flash of white as it loads each page with a 5-second spinning beachball in the template as it collects the data a piece at a time.
If it's a ton of individual web requests there's very little chance that it will optimize anything because it sounds like a lot of HTTP overhead. I've seen this same anti-pattern 1000 times in my career and frankly would rather take the processing onto a very fast webserver that's optimized to crank through stuff like that with some SQL/joins/etc. (ie: doing a few joins on the server side vs. and sending a "view" of the data is WAY more appropriate than putting the responsibility of lots of web requests on your client and increasing your HTTP overhead)...
> I strongly suspect a lot of the motivation was the devs wanting to put some trendier technologies on their resumes.
Yep - and often if that's the case they end up creating a mess of an application that has all sorts of crazy constraints that never needed to be introduced.
---
That being said, new-era anything can be good. Heck - I needed to do the "shotgun a whole bunch of HTTP requests" approach for a GIS mapping solution that would load chunks of data in at a time based on the map's viewport. It just needs to be justified, and most of the time I feel like people just wanna do what they're comfortable with vs. what's a best-fit for the problem.
I personally have no idea why they did this, but I don't presume to know either. However I can add my two cents from the peanut gallery. When it comes to doing something right or wrong, or complex or simple. The bottom line is what does it cost? If you can't finish it in a reasonable amount of time with a reasonable to little or no tech debt, then it's not sustainable for a business. That's the part that literally every level of the peanut gallery ignores when looking at issues like this. And having said all that I still can't seem to imagine why they would want to put that much unnecessary load on their servers, perhaps they get something out of it in return? Perhaps they wanted more control over access to their content, and that required this waterfall loading?
One extremely annoying thing about this is that if your internet is slow, it can take a minute to load the title of the video you're watching. So if e.g. you get linked something without context and you may not actually want to watch it but do want to know what it is, too bad.
Keep in mind Imgur is not a large company despite their high traffic, even at their peak of employees the engineering team was pretty small (probably about 12-15 people after series A), and the mobile web team in particular was a handful of people, with a handful of people on iOS and Android, and a handful of people on desktop/backend/API (where I worked).
That said, I think Alan does care about these things. I know at some point they did support NoScript and did care about the experience with JavaScript off (and had code to support uploading images and viewing images with no JavaScript at all). But it's hard to have it as your top priority when Reddit and Instagram are trying to eat your lunch.
I'm sympathetic with the page bloat problem and noscript and I do think more effort should be spent on optimizing this stuff, especially because bandwidth is much of their opex.
[1] Posting, voting, commenting, uploading, accounts, tagging, albums, search. There is even a hidden-ish feature to "auto-browse" in a slideshow-like manner which you can find if you crawl around the source code.
Bounce rate 53% according to alexa. So, majority of imgur users don't appreciate it, do hit cold load, etc. A user probably has to be dozens of interactions deep for initial loading cost to not be so high, but more likely there is no way to ever offset overhead of all that bloat for any user.
Personally, I use an extension to fix imgur brokenness and extract images from imgur pages without loading anything else.
12-15 engineers is small? I'd call that a full-size team, for any single project.
"Officially" Google makes an entire web browser with less than double that: https://www.quora.com/How-large-is-the-Google-Chrome-team/an...
Conway's Law in action here. If it were one person, it'd be one IMG tag. When you put 12-15 engineers to work making a social website for serving one IMG, you get this.
Regardless, 15 engineers to make a webapp and mobile apps with all of the features mentioned for a site that gets "lots" of views (not sure how many but I'd guess we are counting in hundreds of millions of clicks a day at this point) seems pretty efficient to me?
15 engineers doesn't seem especially efficient to me for what it does (or ought to). Just because you get a lot of views doesn't mean the software itself has to be terribly sophisticated. It usually means you host a ton of user-generated content. Websites which are relatively straightforward hosting of user content, like Wikipedia [1] and Reddit, tend to have orders-of-magnitude fewer employees than other types of equally popular websites.
[1]: https://meta.wikimedia.org/wiki/Wikimedia_Foundation/Annual_...
If you assume WMF were about 20% engineers back in 2010-2011, as they are today according to their Staff page, that would mean they had about 16 engineers. Is Imgur today as complex as all Wikipedia properties in 2011? That seems rather inefficient to me.
I've been opening imgur links on my phone and watched it do nothing for like ten seconds, and I just assumed it was intentionally slow/broken so I'd install the app or something. I'm flabbergasted that it's actually the outcome of a deliberate optimization.
[1] https://twitter.com/martinbean/status/1185605846933352450
Imgur sprung up as a fast image host for Reddit, then Imgur turned into a social media site - a competitor for Reddit.
In that process Imgur became shitty at their core function... hosting images!
How to reconcile this and attempt to make up the shortfall? You're looking at it.
Imgur started as hardly more than an IMG element. It burned and burned and burned money, and their users were happy.
Then it added ads, but it didn't matter because people direct linked from reddit anyway, which was the vast majority of the traffic.
Then imgur realized they need to break their dependency on the reddit social mass, and built their own to apparently great success.
Now people go to imgur for images directly, and stay.
So. All that "bloat" came around for a reason and it was to try to make the company sustainable as a business.
Dammed if you do, and if you don't.
For example, they could have, but didn't, make it a page with adverts and social features that loads in a second or so.
1) They needed a solution that would still be somewhat meaningful with adblock. That means maintaining user engagement to stay with the site and eventually encounter branded content that is not officially an ad but is still a revenue stream
2) Whatever sequence they chose for how they load the page, it is certain that they considered alternatives and a/b tested them, and what they chose was the best balance of user bounce rates and revenue.
It's not the most user-friendly version, but that can't be the only metric for a free site.
80% of the time, it loads your image, 20% you get an ad for Pepsi (or an ad overlaid over the bottom third of the image)
You're offering only cheap 'branding' CPM advertising, because you can't control how the image will be presented to provide any interactivity or clickability. Technologically, it requires no changes for the embed code, and could work with a "just load the image" view-- it's all server side magic. But at imgur's scale, that's not smll potatoes money.
Importantly, the inconvenience that sort of ad presents to users is modest and manageable. If you can't see the photo, reload it once. It's not going to be 30 seconds of loading dependencies and non-content until you give up BEFORE seeing the photo, and it won't be the photobucket-style "let's just disable hundreds of millions of external embeds AFTER 10 years of people building valuable resources around them.
Who would host a system that loses money? Similarly, I could have a website called yougetadollar.com where people put in their address and I mailed them a dollar. It might be a really simple site that fulfills it's core purpose efficiently - but if I don't figure out a way to make money of it, I'm going to have to stop hosting it sometime.
If someone came along with a way to make money off yougetadollar.com and that method involved adding a lot of JavaScript, and registrations, and upvotes, and advertising - you'd be correct that it makes the website worse for what people want to use it for, but if the alternative is losing money and shutting down - I don't see the point of the observation.
Until someone comes along with a simple basic service that just works, exactly like how imgur replaced imageshack.
There's a happy medium between serving a single <img> tag and this monstrosity. It would be totally feasible to use PWA techniques and a lightweight JS framework to build an image host that was performant and still provided all the other features Imgur does.
But let's face facts: It's not going to happen, no matter how many angry Twitter threads get posted to Hacker News. The web platform is completely unsuited to mobile, and there are simply too many perverse incentives in commercial web development to expect that most developers will expend the effort to build an optimised PWA when they can slap something together with React, knowing it'll work fine on the CEO's iPhone on office wifi.
The only real fix would be a complete reinvention of the web to fix the myriad design flaws. That is what Google's AMP was supposed to be, but people seem to hate it and see it is proprietary and evil. Maybe it is, but from a technical perspective, it's likely the only kind of solution that has a chance of working.
Try to do the same feature set without a Javascript framework and using only plain Javascript or even plain HTML and CSS, and then come and tell us about the results.
Also, a lot of the bloat is probably not under the developers control and is added by non technical marketing departments, which want a tracking pixel for this, a tracking pixel for that etc.
But yes its true its insane and its getting worse, and 4G and HTTP2 will not be a solution for most of us anytime soon.
*There is set of users who browse imgur or otherwise use imgur as a kind of "web application", I'm disregarding that part of their userbase for the sake of this discussion. It would surprise me a lot to learn they are more than 1% of users .
OK, fair enough but then it's a different discussion and a different conclusion.
We can't really blame Javascript frameworks for a particular business that has decided to monetize its user base in a different way, by adding more features that are not widely used by their userbase.
Imgur can't exist in a vacuum, it's a business there is a whole team behind it.
Now we might question that whole business model as well and the whole internet supported by ads thing, but that is a whole different barrel of fish that is in my view not attributable to Javascript frameworks.
This is precisely the reason it's a good comparison...
The nature of the language is that without iron code discipline Javascript code inevitably turns into a mud-ball.
Apart from the obvious “many-eyes” benefits, frameworks also provide structure that buys extra time before this happens.
Could you outline what you think makes JS more likely to turn into mud-balls compared to other languages?
In my experience, no matter what language you use, or with what pardigm, unless you model and design your software architecture with discipline, you gonna end up with a mud-ball.
Has less to do with the language and more about the process you use to model your domain.
Loose types, pass by reference, near-limitless mutability, scoping rules (without “use strict” to save the day) and asynchronous nature of the things it is used for are some of the things that come to mind with JS.
All of these are actually very powerful features that make it into the language I love, but care is definitely needed. ;)
It’s more about architecture and discipline, and far, far more about simply caring about performance. (And larger teams make it much harder to care about performance.)
For personal background in my firm agreement with capableweb, I work primarily in JavaScript professionally, tend to use Rust privately, and have used a variety of other languages and worked with both good and bad code bases (mostly good); and I care very much about performance.
But the language has such a low threshold that it allows for incredible productivity while writing shitty code. But by the time you realise just what you have done (or someone else realised when they have to work on your codebase) its too late and it’s time for a rewrite.
What makes JS special is how accessible it is and just how much mess you can make before reality bites. That said, I will take a Javascript mud-ball over an enterprise Java one any time! ;)
I'm not quite sure why so many people think JS is pass by reference.
Everything in JS is passed by value. In fact, unlike some other languages (Swift, C++, etc), the only thing you _can_ do is pass by value. That some of those values are actually references doesn't really have anything to do with evaluation strategy.
More than that, assignment of an object is also only by reference which is super useful and great potential for spaghetti code at the same time.
How it is implemented under the hood I could not care less because it is not exposed to me as a programmer (unlike in C).
I can't really relate, but I do understand that the distinction between evaluation strategy and reference/value types might be a bit difficult for programmers who've never actually had to deal with either concept to grasp, though.
var changeref = function(ref) { ref = {}}
var changeable = {prop: "something"}
changeref(changeable);
changeable; Object { prop: "something" }
var changeprop = function(ref) {ref.prop = "anything"}
changeprop(changeable);
changeable; Object { prop: "anything" }
the use of changeref does not turn ref into an empty object, because you passed the value of the reference, but the use of changeprop did change the property of the object because you are changing the prop on the reference.
at least this is my understanding of how it works. Interestingly enough I totally blew a simple programming test on the phone recently because I forgot about this (well my whole mind went blank and I couldn't do anything so even if I had remembered this it wouldn't have been enough - it was lucky I remembered my name)
on edit: console used, Firefox developer.
> function mutate (o) { o.foo = 'bar'; }
> const o = { foo: 'foo' };
> o
{ foo: 'foo' }
> mutate(o);
> o
{ foo: 'bar' }
As I noted in another comment I don't think people use the terminology correctly because explaining to people the difference makes explaining an already complicated thing more complicated, and also it makes communication less elegant if more precise. I certainly never say Objects are passed by value of a reference, I just say they are passed by reference and if someone wants to take the time to correct me I would probably say "yes, sorry I was imprecise"
But it remains true that in Javascript you can not pass an object by value, because the language does not permit creating copies of objects. You can only ever pass a reference to an object (which is indeed only ever done by value) so the usefulness of arguing about the distinction is questionable at best.
This sounds like almost every programming language which is not a functional one actually (it even fits C!).
With Javascript you cannot have strict types and you cannot pass objects by value and asynchronous programming is the norm.
C is also a lot less forgiving so it takes more skill to even be able to create a mud-ball of a reasonable size. ;)
In my limited experience, functional programming languages just move a significant amount of difficulty up-front to the code. Perhaps it makes for less difficulty in architecture - I never suck around for long enough to find out. The difficulty threshold is enough to keep out lesser programmers, which certainly helps code quality. The price is that far fewer people use the language.
Plain JS is hell to refactor. Between arbitrary autocasting, little tooling and no useful type system, if you don't have a very detailed test suite, you won't find the parts of your code that are broken now. Also, if you do, you now have to reimplement all those tests that did nothing else than to check your call signatures.
Ease of refactoring is a major indicator for a good enterprise language, as constant refactoring is basically the main development process. If your devs are afraid to touch certain pieces of code because nobody knows what the ramifications are, your software is already dying.
That's why TypeScript is taking off so nicely. People crave those static guarantees that JS doesn't have.
Having good and smarter tests helps more for ease of refactoring than having everything mapped to types. But I might just have seen bad examples of TypeScript codebases.
With the appropriate amount of skill and discipline, however, this stage can be postponed for longer than the life of the application. Typescript is absolutely not required.
The real gain is to be had in pushing the mudball stage as far into the product's life cycle in absolute terms as possible.
In that sense, nothing is required, but some things help. I argue that TypeScript helps.
Anyone can easily build an image-serving website. What's hard is to build an image-serving website that pays for itself. I wouldn't be so quick to judge.
> Anyone can easily build an image-serving website. What's hard is to build an image-serving website that pays for itself. I wouldn't be so quick to judge.
That’s very true, but again, you don’t need a bloated slow (comparatively speaking) app to serve advertisement. If the total time had been 10s (ie 7.5 for adverts etc, 2.5 for content), he probably would have thought eh slow but whatever
I hope the people who still stick around on imgur for the community are enjoying the web application because it's clear people who just want to see an image after following a link aren't considered as their audience anymore.
- The network is reliable
- The bandwidth is cheap
- The hardware is also cheap
All three statements are wrong, because everything is fast when the n is small. We're past that point. Network is not reliable, bandwidth and hardware are not cheap. At least in terms of time, and my time is neither cheap nor free.
Developers don't or can't optimize because it's either too much work, or it's working reasonably fast. Reasonably fast is not fast enough. We're wasting too much resources in cases like this.
<img> old man yells at cloud </img>
</rant>.
They want you to use the app!
The button to open/install the app is clearly visible at an early stage. And since imgur users are the product, and not the customer, you want them in the app where you can retain them more easily (think notifications) and ad-target them more precisely based on all the data you can collect directly on the devices.
Hasn't worked with a single person I know.
I tend to correlate bad website with possibly bad app and I suspect others do too.
Compare that to Stackoverflow which generates completely dynamic pages with more interactivity in 50 ms. Also making the site faster would generate more revenue as more users would actually finish loading page.
And most important than all that: All the assets are properly cached, so despite bothering thousands of engineers for most people the load nuisances only happen once or at most a few times.
Ads are different but I work in adtech and site speed matters. Faster sites make more money. Remember this is on a mobile page. People don't wait more than 3 seconds for a site to load. You're not getting any ad impressions from visitors who never show up or leave.
One of the "good engineering practices" is to use a baseline code widely know and that's what full frameworks like React and Angular buys you, of course you still can create a mess with any of those 2 but is way harder to do that than to do it with in-house custom framework, nothing makes an JS developer run faster from a job position than being told they are using some custom framework that has been growing organically for years, regardless of how good your documentation is.
That's exactly what happened here, and what this entire post is discussing. The frameworks aren't the problem, aren't really necessary, and there are faster alternatives if they must be used (like Preact and Svelte).
Site popularity has nothing to do with UX. Imgur is popular because of reddit, and there's plenty of users who dislike Reddit's slow and heavy redesign too.
> and make sure that if you do click a thumbnail the next
> image and its comments do load really fast to get you
> hooked to those dopamine shots
More likely incompetence than malice, designing for mobile in terms of screensize and UI but neglecting to consider network bandwidth and memory+CPU resource. That and no doubt a fair chunk of that payload relates to advertising in some way.
If it _is_ by design then I suspect it is intended as a way to funnel people into installing their app, much like reddit's user-hostile mobile design (I should thank them, they've saved some time in my day by song me bothering with that site on mobile).
If Twitter's dark pattern to force login/app usage were just a little closer to the headline, I would have thought the failure was the punchline of this posting.
Presumably logging in or using their app would fix it, but I've got far too much spite for that. Instead I just avoid the site where possible.
I have to do this mental dance: * are these ad links? * are these knowledge graph links? * how many results did I get?
It is a bit tiring.
Yikes.
If you can do it better and make money, then build it and compete with them. What kind of bureaucratic dystopia would even "fix" this?
However, when websites decide to instead track the everliving hell out of their users, this is what happens. Absolutely pathetic. Another similar experience I have with mobile sites is Reddit, its intentionally throttling the site and tries to turn you towards their app.
That's why I use the .compact version of reddit on mobile. It's as ugly and clunky as it's snappy.
My beef is with a ‘mobile-optimised’ image hosting platform taking over 40s to display an image on mobile.
That wasn't an engineering decision - it was a business decision made to force people to switch to the app. Ever try browsing imgur on mobile web? You can't - it keeps popping up the 'download the app' button. Infinite scrolling breaks because of that popup (by design). If you don't want to support a business that tries to force people to use their app by making the mobile web version horrible you don't have to.
There's no hypocrisy in using something while complaining that it's absolutely terrible. (Particularly if there isn't a real alternative; "don't ever open any link to any image hosted on imgur even though you'd prefer the person had hosted it somewhere else" is not reasonable.)
There are a lot of amazing tools which are not popular because they are not connected to capital. But those tools are great precisely because they are not connected to capital.
Too much capital invariably leads to overengineering.
For example, if you consider the PHP Hiphop compiler by Facebook. It tooks years to create it. It's an over engineered solution that did not need to exist. They could easily have rewritten their software in a different language instead if they really cared about saving a bit of CPU. The speedup which HipHop provided was a constant factor. In fact, they could probably have achieved a higher speedup with a simple rewrite even in PHP without HipHop (with just simple algorithm optimizations).
Corporations are extremely innefficient. Their main purpose is to create useless jobs.
If it's non-zero then you must compare to an IMG element design that can also efficiently exfiltrate the same amount of user data. Otherwise you're comparing apples to oranges.
what I meant was when you click on the last link, sometimes it redirects to https://imgur.com/vjdfNOe making the direct link pointless.
I could see two different models solving the problem. One is a donation model where the image host is collectively paid for by contributors who'd like the host to remain free and independent.
The second model is to have funding per image. When a image is first uploaded, it gets 1 week of free hosting, and if people want the image to be available for longer, people can donate for that specific image to stay online for X days, depending on funds donated.
Basically crowdfunded media hosting.
what better alternatives are out there?
Usually, the image hosts starts being like ^ while then slowly transitioning to more and more user-hostile patterns.
Only way I found to avoid this is to setup my own Hetzner box (unlimited traffic) running nginx to serve images. Use `scp` to upload them.
Hilariously, Imgur itself followed this trajectory: it started out as a super-simple image hosting site whose creator was fed up with all the nonsense that other image-hosting sites did[1]. Now, though, Imgur has become the website everyone complains about!
[1]: https://web.archive.org/web/20090227183112/http://www.reddit...
Nowadays, using Keybases cloud might work, as it lets you set up direct links with no intervening pages.
Tangential, do you not usually do that? why?