1. 93
  1.  

  2. 38

    It boggles the mind to see how many browser features web developers re-create poorly within the browser. Why do they fight the platform so much?

    1. 18

      Why do they fight the platform so much?

      Probably a lot of bad reasons, judging by some of the sites I’ve been forced to use. However, in some cases there are good reasons.

      For example, my employer makes a document editing app specialized for certain types of accounting workflows. We can’t use the browser scroll because the browsers cap the number of pixels “tall” that a page can be, and some of the documents our customers create would blow past the cap and break scrolling. Hence, we have our own “viewport” implementation that doesn’t work quite as well as native scrolling, but also doesn’t have that limitation.

      Ultimately, I blame the fact that we’re creating “apps” on a platform that was designed for mostly-static documents. We can hate it all we want, but it’s not going away because the benefits are enormous (cross-architecture, cross-OS, cross-device, no “updates”, and so on). So until the browsers provide a platform that is actually designed for building “apps” rather than having those features awkwardly bolted on, things are going to continue to kind of suck.

      1. 3

        We can’t use the browser scroll because the browsers cap the number of pixels “tall” that a page can be

        Wait, what? I’ve never seen browsers cap page length. Are you experiencing a hard cap, or a soft cap where perf gets bad when there’s too much to render?

        1. 8

          It’s effectively a hard cap. The cap is very, very large, but we have customers that use our software to produce 30,000 page documents, so we would hit it. Based on a very quick search, this seems to be a reasonable place to start if you’re looking for more information: https://stackoverflow.com/questions/34931732/height-limitations-for-browser-vertical-scroll-bar

          1. 4

            Just curious, what sector does produce a 30k page document? I hope they don’t print it at least!

            1. 5

              I don’t know much about this sort of thing (I don’t work directly with our customers) but from what I understand it’s mostly large financial institutions (banks, insurance companies) that build these huge documents that basically spell out their exposure to risk. I assume they’re never printed, my employer’s original product was for filing SEC reports without printing anything, so… hopefully? :-)

              1. 1

                I wonder if they’re even read! Maybe just queried for individual pieces of information.

            2. 1

              Wow, super interesting. Thanks for the link!

        2. 2

          Full ACK. There are some edge cases where you can’t really do much else. One of these I’ve encountered while building https://xkcd.wtf (yeah, that’s a domain): I don’t want to proxy all those API calls for you.

          In the end, I learned a lot about Javascript (and it did change my mind a little bit in the positive direction (keyword: promises)), but never got it even close to the speed my Perl/CGI prototype (that just used qx{curl -s ...}).

          1. 1

            Out of interest, what was the assignment? was it necessary to build a frontend in javascript or perform client side rendering?

            Visiting the site gives me the message that you don’t like it either. Is that just appealing to your audience, or is there a reason you didn’t stick wit Perl/CGI?

            1. 2

              what was the assignment?

              None—the course was dropped from the curriculum just before the start of the semester. (original ass.: build anything that uses any webdev-platform (spring, django, whatever) and calls 3 different apis). I had the domain purchased in anticipation of the course.

              is there a reason you didn’t stick wit Perl/CGI?

              Perl/CGI is my go-to for everything (like my teletext-server). But for hosting it elsewhere, I didn’t want to proxy all the API calls (don’t ask me exactly why, though, it’s been a while since I thought about it).

              Visiting the site gives me the message that you don’t like it either.

              The <noscript> message? I’m one of those people™ who browses without javascript or cookies (few sites whitelisted).

              your audience

              The audience of this site is probably just me and a few friends; I haven’t really publicised its existence.

              1. 2

                I had the domain purchased in anticipation of the course.

                Good catch, it’s a cool domain.

                I’m one of those people™ who browses without javascript or cookies

                I get you, I’m the same.

                probably just me and a few friends

                You can add me to the list now, it’s a pretty nice site :)

                Out of interest, how many of your friends using it are the kind of people who browse without javascript?

                1. 2

                  Thanks! In my circle of friends, I’m the only one browsing without Javascript.

        3. 22

          This article is such truth, it’s ridiculous.

          Another recent “improvement” is creating actual tables through div/span elements; visible in the new AmEx MR Points Summary Page, for example:

          • In 2009, we used the table element to format the non-table elements on a page for visual effect.

          • In 2019, we use the non-table elements to format actual tables (completely breaks the presentation of the table without CSS, as you may guess — and no idea whether screen readers are compatible with such “great” engineering, either).

          1. 3

            Not that long ago – the most out-of-date customers were on IE8 – a project I was on ran into horrendous issues on “big” tables, a few dozen cells wide by up to a few thousand tall. Any content change in a cell made the browser recalculate the entire thing, completely tanking performance. I think it had trouble rendering it in the first place, too. We switched to a grid of divs because, luckily, each cell was the same size. No concern for a11y but at least it ran more smoothly on low-end machines.

            1. 2

              First of all, AmEx only supports 15 rows per table, so, the performance issues would hardly be of concern (their site itself is so slow it’s beyond ridiculous, it often takes minutes to accomplish a simple task that should have taken a few seconds had they not used JavaScript so extensively).

              Second, if you think that the table implementation is slow in the browser, and going with a fixed-width CSS is faster, why not simply redefine the type of the table and td/tr elements to fix your grid-of-divs needs, instead of using actual divs when a table was supposed to have been used instead?

              This is a textbook example of confusing presentation and structure of the webpage; you should never let anyone changes a logical table into a div, never. How exactly do you know that it wasn’t a concern for a11y? I mean, if I put lynx on these sorts of pages, it’s complete gibberish. Copy-paste doesn’t work properly. Cannot export it into Excel or Numbers, either. I don’t buy it for one second that it’s not a concern for a11y.

              1. 2

                This is a textbook example of confusing presentation and structure of the webpage

                Ah, yeah, it wasn’t exactly logically tabular data; it just looked like a table which was why a table was the first port of call. I should’ve been more clear. It ended up as more like a sea of divs, lazy-loaded and sparsely populated. I don’t remember if those CSS changes wouldn’t have worked in that situation for whatever reason, or they just didn’t think of it.

                There was also an “export to excel” button that customers were used to from being on other (actual) tables.

                How exactly do you know that it wasn’t a concern for a11y?

                The business wasn’t concerned about a11y. ¯\_(ツ)_/¯

                I guess my point was just that there’s usually a reason – not just laziness or wanton disregard for sanity – for doing daft things with HTML, even if it’s not necessarily the right reason.

            2. 1

              The problem with tables in HTML is that they lack of a lot of flexibility. Essentially, as soon as you want to display data in any way other than a simple table you’re going to have a hard time.

              There are many valid use cases for this. One I ran in to a number of times is wanting something like this:

              +---------+-------+
              | col 1   | col2  |
              | col3            +
              +---------+-------+
              | col 1   | col2  |
              | col3            +
              +---------+-------+
              

              Which is a rather useful way to display some data, especially on smaller screens. But with HTML tables? Yeh nah, forget about it. There are other use cases as well.

              I’m not familiar with the specific case of AmEx MR Points Summary Page, but it’s at least possible there are good reasons for doing what they’re doing.

              1. 1

                Why doesn’t [EDIT: fixed <td colspan=2>] suffice?

                1. 1

                  I’ll assume a <table> got lost there (use backticks, otherwise the Markdown parser eats it). Have you tried making a layout like the above with a table? It’s not easy, In fact, it’s imposable AFAIK. Sure, I can use two table rows, but then it’s not longer a table (semantically speaking) and might as well just use divs.

                  1. 1

                    You’re right that something got lost above (now fixed, thanks). A minimal complete example would be

                    <html>
                     <head>
                      <title>colspan test</title>
                      <style>
                       table, th, td {
                        border: 1px solid black
                       }
                      </style>
                     </head>
                     <body>
                     <table>
                      <tr>
                       <td>foo</td>
                       <td>bar</td>
                      </tr>
                      <tr>
                       <td colspan=2>baz</td>
                      </tr>
                     </table>
                    </body>
                    
                    1. 2

                      Yeah, but baz is a second row. Let’s say I want to make a table like this with three columns:

                      | Website     | Domain               | Description                                                                                                            |
                      | Hacker News | news.ycombinator.com | Hacker News is a popular news aggregation site, chiefly aimed at technical people, computer programmers in particular. |
                      | Lobsers     | lobste.rs            | Lobsters is an invite-only news aggregation site, narrowly focused on software development.                            |
                      

                      The description is rather long, so I want to visually put that below the other two. But if I create a new row – like you did – then it’s visually below like expected, but from a semantic viewpoint there is no connection beween “website” and “domain” and “description”.

                      I mean, you can do pretty much anything with tables, but it quite quickly stops being semantically a table and just turns in to a “bunch of <tr> and <td>s”.

                      I hope this clarifies what I meant.

                      Contrary to what some people think, web devs are not complete blubbering idiots who are too stupid to take a shit. Sometimes they “reinvent the wheel” because the wheel doesn’t fit, is square, has leaky tires, or is just outright broken. I’m not hugely impressed by “modern web dev” either (understatement), but “zomg stupid web devs” knee jerking (as some do, not necessarily you since you just asked a question) is getting a bit tiresome, too.

                      1. 1

                        This is kinda insane, but you could write a HTML table, then CSS grid its elements. Consider the following:

                        <!DOCTYPE html>
                        <html>
                        <head>
                        	<style>
                        		th { text-align: left; }
                        		table {
                        			display: grid;
                        			width: 70ch;
                        			grid-template-columns: auto auto;
                        		}
                        		tbody, thead, tr {
                        			display: contents;
                        		}
                        		th:nth-child(3) {
                        			display: none;
                        		}
                        		td:nth-child(3) {
                        			grid-column: 1 / span 2;
                        		}
                        	</style>
                        </head>
                        <body>
                        	<table>
                        	<thead>
                        		<tr><th>Website</th><th>Domain</th><th>Description</th></tr>
                        	</thead>
                        	<tbody>
                        		<tr><td>Hacker News</td><td>news.ycombinator.com</td><td>Hacker News is a popular news aggregation site, chiefly aimed at technical people, computer programmers in particular.</td></tr>
                        		<tr><td>Lobsers</td><td>lobste.rs</td><td>Lobsters is an invite-only news aggregation site, narrowly focused on software development. </tr>
                        	</tbody>
                        	</table>
                        </body>
                        </html>
                        

                        That’s basically the visual appearance you were looking for with the same semantic markup. If grid is unsupported, of course, you can easily fallback to displaying as a traditional table.

                        idk if I’d do that in real life though.

                2. 1

                  If I saw a table like that I think it would be confusing. If I were on mobile I’d rather just have them keep the table wide and let me scroll or zoom out.

              2. 7

                The main argument for SPAs when they first came up was that they allow the client to do the template rendering and thus freeing scarce server resources, as well as saving bandwidth since only the content that changed was transmitted.

                At least this was hope, in the end there were no real bandwidth savings since browsers know how to cache assets cleverly and everyone was annoyed to use webpages were history navigation didn’t work since it was implemented half-baked in Javascript or they don’t allow deep linking because the content was not addressable by URL. Also, times have changed and servers are now often I/O limited, if at all, and there’s enough CPU time for template rendering (which can also be cached quite easily).

                I personally don’t see any value for SPAs except for interactive web applications, but everything that shows some kind of a document (something mainly consisting of text, e.g. blogs, government sites, documentation etc.) should be plain HTML with Javascript as a progressive enhancement. Maybe I’m wrong here but simple HTML documents should be also way more accessible by default, since their elements have at least a bit of predefined semantics.

                Edit: typos.

                1. 3

                  I don’t think that’s correct. The main argument for SPAs was (and is) that you can have sane, testable client-side logic (and therefore build higher quality apps more quickly). You also (can) end up with a clean, reusable web API, which has the SPA as one of potentially many clients.

                  I wonder if the people bemoaning SPAs have ever built (or worse, tried to maintain) a server-side-generated site with any level of “richness”. Even with a decent amount of care, the javascript degenerates into soup very quickly. It is far, far slower to create and maintain something with any level of client-side complexity using plain JS or jquery, and all-but impossible to apply reasonable programming practices to it.

                  Richness isn’t always required, at least not in the volume that we see it. But when it is, SPAs are almost always the right choice.

                2. 5

                  As someone who works on an internal SPA at my job, they can have their upsides and downsides.

                  The downsides are when you find yourself writing an entire lowercasing function when in eg; jinja, it’s as simple as {{ variable | lower }} for example

                  The upsides are that, assuming you also provide one (or multiple) APIs, it forces you to act as a consumer of your own services. There’s plenty of endpoints we wouldn’t have, or that wouldn’t have ever been improved, were we not forced to consume them externally.

                  In line with that dog fooding, it may be possible that your templates render and serve very quickly but your API responses do not (extra or custom processing perhaps, it’s a made up scenario). By forcing yourself to be a customer, you’ll want to tune your endpoint response times, set SLOs on them and so on which your customers also get benefit out of.

                  Obviously you can care about your external API and your server side stuff at the same time. I quite liked this article and it reignited that part of me that just wants to throw it all away and go back to Flask or something haha

                  1. 3

                    I’m interpreting the comment about Canada being a “Socialist” country to be satire.

                    I hope I’m right.

                    1. 6

                      I don’t see the value of complaints against SPAs anymore. That ship has sailed about a decade ago! The reasons are about as complex as the reasons for the popularity of the web platform itself. It’s not the best solution, but nothing on the web ever is. Instead, it’s providing a particular set of tradeoffs such that many developers prefer it – even while taking user experience into consideration. For example, can anyone suggest how to make an old school web application that works offline?..

                      (Although I’ll admit, I’m prone to criticising the web platform myself on occasion. The whole thing, including SPAs, is really a terrible kludge. Nonetheless, I only make SPAs and not old school web applications.)

                      (Oh, and it’s also very useful to distinguish between web sites and web applications, but for some reasons these complaints rarely do.)

                      1. 21

                        I don’t see the value of complaints against SPAs anymore.

                        I don’t see the value of this statement specifically. Even though SPAs are a step backward in a multitude of ways, it’s just how the world works now and we should all just accept that the ship has sailed?

                        can anyone suggest how to make an old school web application that works offline?

                        Look, I’m just trying to be able to still use the web on mobile when my connection is spotty. I think it’s a cool party trick that webapps can be cached entirely in service workers (or whatever) in order to make them work offline, but I’m just trying to read one article and then go about my day. But now, I’m sitting here on the metro waiting 20 seconds for a newspaper site to load.

                        Does a content site (like a newspaper or blog) need to work offline? If not, why do people build them with stacks that cause drawbacks in other areas (such as, from TFA, being slower overall).

                        (Oh, and it’s also very useful to distinguish between web sites and web applications, but for some reasons these complaints rarely do.)

                        It’s because everything is an SPA now. Newspapers, shopping sites, blogs. I think it’s great that rich applications can be built now – I use a fair share of web applications day to day! Mail client, Trello, couple of others. I’ve been in the “SPA haters’ club” for a few years now, consuming plenty of content to confirm my bias, and I’ve never heard anybody say “I sure wish Trello worked with JS turned off.” I’ve experienced a lot of “why do I have a running service worker for this shopping site?” or “why does this page show up blank with JS disabled and then it turns out to just be a blog post with no images once I turn JS on and reload?”

                        1. 4

                          Well, so you see the value of SPAs, right? Your issue is that content sites use this architecture when they don’t need to, and do it at the expense of UX in some cases. OK, fine, but that’s not the same as saying “SPAs are useless, and we could do anything and everything by loading individual pages from the server”. Well, no, we can’t.

                          So my problem is that the complaints like the OP are usually a vague handwavy appeal to how wonderfully simple and fast it is to load pages from the server, usually combined with pointing fingers at a content site like MDN, and without taking the trouble to address any of the use cases for which that approach doesn’t work.

                          We shouldn’t just accept things as they are, but I think the specific ship that sailed is for complaints about SPAs vs plain old web pages in the context of web applications. There was a point when things could have gone a different way, but that was in 2004-2008, if memory serves. Now it would be far more productive to frame complaints in the modern context, where we have complex applications all over the web, which can’t be turned into simple web pages.

                          I hope this clarifies things.

                          1. 16

                            Your comment appears to be replying to a point I didn’t make, and I’m frustrated by it, so I will reiterate.

                            We’re not talking about Trello and Google Docs. We’re talking about Medium, or any Squarespace or Wix site (which don’t work without JS).

                            There’s somebody like you in the comments of every article like this. “Don’t forget about web applications! You know, the ones that absolutely require client-side dynamism!”

                            Nobody’s forgotten about them. It’s impossible to. They’re everywhere. Your use-case is handled already. But now, everybody wants to build SPAs by default, even when doing so doesn’t provide any benefit. That’s the problem.

                            1. 2

                              You’ve conveyed your frustration perfectly. I understand your point, I agree to a degree, and I think it’s fine to criticise this application of SPAs.

                              I could still suggest some benefits of SPAs even for content sites on the development side, but I don’t want to exasperate you any further. Thanks for the discussion.

                              1. 7

                                For many many years I’ve blocked cookies by default, and only opened exceptions for sites I wanted to use in ways that required a cookie.

                                In more recent years I’ve also been blocking local storage by default and opening the occasional exception for a site I want to use that has a justifiable reason for needing it. But a staggering percentage of content-oriented things just flat-out break if you deny local storage, because A) they’re actually massive JS applications and B) nobody involved in their development ever considered this case (while people do seem to at least recognize when you disallow cookies).

                                For example, the browser I’m in right now does not have an exception for GitLab, so even trying to view a README of a repository in GitLab’s UI will fail with an eternally-spinning “loading” indicator and shows TypeError: localStorage is null in the browser console.

                                1. 1

                                  I guess you’ve considered it, but for this reason self-destructing cookies (aka Cookie AutoDelete for Firefox) is much better at preventing breakage with most of the benefits of compete blocking

                                  Rather than broken sites, as a European I only have to contend with endlessly confirming GDPR notices for sites I’ve already visited (although thankfully there is also a plugin for that!)

                          2. 2

                            Does a content site (like a newspaper or blog) need to work offline?

                            Would e-readers be better if they required an always-on internet connection? I think there’s a lot of value in not needing an internet connection just to read… (Although many offline SPAs are poorly-written, or loaded with slow trackers, ads, fullscreen modals asking for your email address, etc.)

                            1. 3

                              It’d be nice if I got to make the decision myself as to whether I want to read an article from the same source again before they cache their entire backlog for me. (slight hyperbole)

                              Personally I believe that ATOM is still the best designed way of accessing articles offline, and advancements in that system would be much more beneficial than pushing SPAs. Things like encouraging sites to actually put the full article in, rather than just a link to the website I’m trying to avoid.

                          3. 7

                            Every old-school website I’ve ever used works just fine offline. “File” -> “Save As”.

                            1. 2

                              Web application, not site.

                              1. 2

                                See my sentence above about the distinction between websites and web applications.

                                1. 5

                                  For example, can anyone suggest how to make an old school web application that works offline

                                  Maybe I’m showing my age here, but an ‘old school web application’ means flash, to me - and those overwhelmingly worked perfectly when you saved the page.

                                  1. 2

                                    So do you think we should go back to the good old days of Flash and Java applets? You’ll probably recall that Flash had a bad track record for security and energy efficiency. This critique by Steve Jobs is still pretty good (even if hypocritical).

                                    I don’t recall that saved .swf files were able to maintain any state either. Were they?

                                    1. 2

                                      So do you think we should go back to the good old days of Flash and Java applets?

                                      I know as well as you do how much of a dumpster fire flash security was. Java applets were… less disastrous, but I never saw one that wasn’t deeply unpleasant to use.

                                      I don’t recall that saved .swf files were able to maintain any state either. Were they?

                                      Very few applications maintain state after you close & reopen them. You could, though - flash applets could work with files on your computer (they had to use the flash builtin filepicker and only got access to files chosen through it).

                                      1. 1

                                        So in comparison to how things were with Flash and Java applets back then, don’t you think SPAs are an improvement? Sure, they might be overused from the user’s point of view, but that’s not the same as saying they can easily be dispensed with by reimplementing with server-side page rendering.

                                        Re state: that also doesn’t seem like a great user experience in comparison to SPAs.

                                        1. 2

                                          You’ve put words in my mouth two comments in a row.

                                          The way you have chosen to communicate does not reflect well upon you, and I’m not interested in engaging further.

                                          1. 1

                                            I’m sorry if it came across that way, that’s not how I meant it. I was just asking questions to understand what you think. The comment re “they can easily be dispensed with” was more an interpretation of the OP, which is what I thought we were talking about.

                                    2. -1

                                      It’s kinda sad that you read “old-school website” and your brain instantly auto-corrects it to “old-school web application”.

                                      EDIT: I missed a message from the thread there.

                                      1. 2

                                        Did… did you read the thread, or just reply to one comment in isolation?

                                        1. 0

                                          Yep, I missed a message in the middle there. Sorry!

                                          1. 1

                                            No worries than :)

                              2. 3

                                I think the main benefit is that it feels faster if you have a fast device. Maybe it’s something to do with removing the flicker on page load? I had a plain HTML website and got a ton of complaints that it was “too slow.” After dropping turbolinks onto it, the same people were impressed at how “fast” it was.

                                Of course, that’s not an absolute metric, but it really does feel faster.

                                1. 3

                                  It shouldn’t have been slow unless there was some serious latency hitting your server.

                                  1. 3

                                    Sure, a white flash could make your site feel slower. But commonly overlooked is that it’s also an important accessibility feature: it signals to the user that the content on the page has changed and needs re-reading, and this is especially important for less tech-savvy users.

                                    I’ve even seen very tech-savvy users go “oh, huh, I didn’t realize that it had loaded already” while waiting for an already-completed content load. The lack of signalling here in SPAs is really a problem.

                                2. 1

                                  At my last job, a lot of MySQL columns were like this:

                                  state   enum("active", "deleted", "_futureval1", "_futureval2", "_futureval3", ...)
                                  

                                  What’s up with all those _futureval1? Turns out someone in some distant past had the bright idea that “it would be faster to add new columns”, since “those values are already reserved”. Intuitively I think that kind of makes sense, except for one small problem: that’s not really how it works and renaming those enum values is far harder than appending a new one.

                                  The whole “it’s faster because it has to load less data” is kind of similar: it intuitively makes sense, except that’s not how it works.


                                  That being said, “always use regular <a> tags” is clearly wrong, too. For example I recently built a webthing which shows some statistics, and there are buttons to load some more details. Generating the page with all the statistics is comparatively expensive, and loading the details is really fast, so I load the details with an AJAX request, set the query parameters with history.pushState, and presto. It’s much faster than loading the page all over again and saves a lot of CPU cycles too.