I would like to second part of this more concisely for emphasis because I think designers too often get caught up and let usability suffer for the sake of "usability".

Please, for the love of god, let open up anything on your site in a new tab.

It's not really just about (UI/UX) design, to be fair, being able to open in a new tab requires that it's a directly navigable 'page' by URL to begin with. With SPAs, that's often not true for entire 'pages', never mind modals and views you might not be expected to want in a new tab but do.

That's a quite fair point, but as a counter point in most business cases you do want specific views (even specific searches and user applied filters) to be addressable - it's one reason why I think the history/location API is such a necessity for SPAs. And if you do have an address like example.com/#widget/view?hideWhitespace=false then you can bind your link href to that address and then, if the link is engaged without modification, do your fancy SPA stuff.

I also think in the modern world that as long as your assets are all properly versioned with good cache control headers using actually web requests for navigation instead of a self-contained SPA makes a lot less sense. Once upon a time an SPA was a solution to shifty internet, limited bandwidth and rich web experiences - those arguments have become a lot less valid in the modern world.

(this is a topic extremely near and dear to my heart as a (eh-sorta) full stack developer that needs to suffer through many poorly built applications as a user)

couterpoint: users don't care if your page is SPA. They care about opening new tabs.

Exactly. It don’t care if it takes more work for you as a developer to make everything a pageable URL. Just make it work the way I expect it to work.

... and developers don't care if users like new tabs, they write SPAs.

After spending a day trying out a new framework my junior dev asked me: "why don't we do it the old way? We would have finished the first feature already. We can do everything the framework does already with our old tools"

So I reverted my changes and worked on features instead of stack

Quite a good thing for a junior dev. Not being swept away by hype and being focussed on the thing one actually should accomplish. I don't know that person, but this smells like there is potential.

That junior developer’s name? Albert Einstein.

Give that junior a promotion.

I'm not defending it! I hate it too!

I was just responding to it being a criticism of 'designers', maybe I misread that, but my initial reaction was as above, that it's not completely trivial to allow, or like it necessarily comes for free and has been 'turned off' by design.

When users want to open things in new tabs (hopefully having a state representing URL), then there might be something about the website, that does not actually want to be a single page web application. Sometimes users simply want to "open things for later viewing" or bookmark things. Basic functionality of any modern web browser.

There are plenty of SPAs that can open things in new tabs just fine and there are plenty of MPAs that can't.

I made almost the exact same comment as GP elsewhere.

One thing that I noticed is that more than half the time "open in new tab" is broken, I can click the link, copy the URL, open a new tab, paste the url and get what I wanted. It's so maddening.

Often the problem if you develop something as a SPA then your framework probably has different state management solutions built in that you will develop with, without any way to easily tie that state to a particular url or to pass a bunch of state to a new window. Thus opening new window puts you in default state of the SPA.

This is of course maddening if the site should not be a SPA but was developed that way because when you are running a company and need to build things quickly it is easier if you just have one toolbox labelled SPA-building tools and pull that out and get going.

> It's not really just about (UI/UX) design, to be fair, being able to open in a new tab requires that it's a directly navigable 'page' by URL to begin with.

I'd argue that each individual view in your app should have a routable URL, otherwise sharing links to anything is basically impossible, as is bookmarking certain pages, or even reloading them.

> With SPAs, that's often not true for entire 'pages', never mind modals and views you might not be expected to want in a new tab but do.

Some claim that modals are bad design and I wholeheartedly agree, though for a variety of reasons they still keep showing up across numerous systems. I guess a compromise could be giving the modal open state its own URL so the app would know what to do if the page is refreshed (the modal would still be open), but somehow that doesn't get much attention either.

An especially clever option (for niche cases) would be being able to open a modal in a tab/window of its own, without the surrounding UI, when opened directly through the URL/new tab/new window, but show it inline in the app during normal navigation. Then again, many dislike pop-ups either because that's not really the direction in which web development went, though I can see why in certain sites they could be useful (e.g. CRUD apps with lots of boring tables and element selection). Oh well.

I think the worst design is when it's a control-click that will open a new tab, but the SPA trips itself up and goes back to the homepage/index

nothing is more painful when, after scrolling through an control-clicking some things that might be what you're looking for, seeing 5 or more tabs open, and then realising that they're all just the default homepage.

Im a new react developer and it's extra work figuring out how I'd update the page from which you created the new tab without replacing it to trigger a state change. In the case of sites that render data synced to a datastore. Using a timer, sure, but thats not wildly efficient. There must be ways, they're just an extra consideration.

Note: Coming from someone who hates when middle click doesn't open a new tab... so I get why you care.

links that go to other "pages" (even just conceptually) should get their own route so you can link to them directly. you can use something like react-router to do this, and it's very easy to extract the active route and know what view to render. or if I'm totally off the mark, maybe I misunderstood what you mean :)

You can sync localstorage and sessionstorage between tabs, you only have to listen to the right events. I haven’t used indexeddb much, but I’d be surprised if that doesn’t sync between tabs as well. If you are saving all the state in memory—which I think is the default for most popular frameworks—then you’ll have to do something more clever. If you have a backend server as a single source of truth, then you should probably be using websockets if it is vitally important that your users get real updates of new data. I’m sure there are popular react libraries that will handle each of these cases.

It is extra work for sure, but usability improvements usually are, and if you know what you are doing, this will not cost that much extra in maintenance.

I don't understand.. opening on a new tab should do exactly the same as opening a blank tab, typing the address and pressing enter

In particular it shouldn't change the original page at all, that's the whole point!

Now, if the original page is the kind that updates in real time (due to accesses from other tabs or even from other machines), just use a web socket!

This is mostly a developer mistake, not that of a designer. You can easily make buttons appear as links, so there's no excuse not to handle this the correct way.

You also have to disconnect styling from HTML tags for your headings to get the h1>h2>h3 order semantically correct for accessibility and SEO.

Regardless, I think designers making links appear as buttons is bad practice, but you usually don't have much influence over design as a developer.

Why would the visual hierarchy of your headings not also reflect the semantic hierarchy you implement for accessibility and SEO?

> Please, for the love of god, let open up anything on your site in a new tab.

Meanwhile, I've seen plenty of enterprise software and even banking sites, that:

  * try to prevent you from having more than one tab open
  * try to prevent you from having more than one session open

I get that sometimes server side state can throw a spanner into the works otherwise, when you can't write a proper stateless app/API, or write any kind of an app well enough either, but it's very annoying when you run into one of those systems.

More so, sometimes the explanation for this is "security", which just feels like the people behind the system design wanted to be lazy in regards to various lifecycles in the application. If I have my internet banking site open, pay for some goods in an e-commerce store in another tab through the banking integration and then refresh the banking site, me being signed out of it feels like a design flaw, not a "security" feature.

But oh well, you don't really get a say in these things, your bank is going to do whatever they feel like in regards to their UI/UX, as will those behind whatever piece of enterprise software that you have to use, or that you'll have to write in accordance with the requirements.

It's up there in regards to annoyance, much like ctrl clicking some element, just to discover that it doesn't let you open up new tabs, or maybe even right clicking something or trying to select text, just to realize that neither works and you have to copy whatever you need out of the source of the page.

Can't browsers automate this by duplicating the current tab and then clicking the link?

Another annoying pattern I've encountered in some online shops: The product list technically uses proper links that you can left/right/middle-click to your heart's content, except they've also attached an "onclick" listener to the link, so even if you've right/middle-clicked because you actually wanted to open a new tab, the current page still starts navigating to the link target, too.

Even more infuriating when you attempt to implement correct usage of links/buttons & get pushback such as "what's control-click? no one does that. non-issue."

It's a hard fight to fight, certainly, but a common tactic I've employed to counter this is "Web standards exist for a reason and we don't want our website called out for being inaccessible to the blind community. Additionally - these standards have been revised and refined over decades and I don't feel comfortable subverting some of these rules without considering them all - it may break our compatibility with some browsers."

I can tell you from firsthand experience that the people demanding the wrong implementation do not understand the purpose of web standards, much less care about the rationale for following them. On the front end I have seen unimaginably poor designs be implemented with as little justification as "Our pilot users said the UI 'looks cleaner' to do it this way [the wrong way]" and the management is satisfied with that.

Hence why I harp in on two specific points "You don't want to piss off blind people" and "You don't want cross browser compatibility to suffer" - most technical background managers will hear the second point and have a flashback to IE6 or IE4 and immediately start backpedaling, while non-technical background managers will hear the first point and wonder if AADP will end up suing them.

The statement I made is not a genuine expression of the most important reasons - it is a tool to persuade management using cherry picked boogiemen to scare foklks into the right decision... aka a bad faith argument made for the best of reasons.

Sometimes command+click will still work to open into a new tab when a right-click does not.

And some of those times, the parent still navigates so you get duplicate tabs. Ugh!

Sometimes Command+Click will open in a new tab when Middle Click doesn't work, and sometimes Middle Click will open in a new tab when Command+Click won't work.

If you're using Gmail, you get both types of behavior on the same page!

Isn’t middle click a user defined function? Is it system defined? I’ve not worked on a system with a middle mouse button in many years.

I haven't owned a mouse without the ability to middle click ever (my first mouse had a ball and 3 buttons; I think a Logitech c7?).

If your mouse has a scroll-wheel, then it's probably clickable as a middle-click. If you have a trackpad without a 3rd button then there is usually a gesture that will send a middle click.

yes! Far too many sites have terrible experiences when you 'try to got back to something'. back button shenanigans, full page reloads, unable to retrieve data, and worst: losing something that you were half way through writing or doing.

I just want everything to always open in a new tab (or sometimes a new window). gmail yep, music sites yep, youtube yep.

I know it's not what you want necessarily but if you didn't know right clicking on the back button will give you a lot more options and let you go back to various points in history. I find it necessary quite often because I believe that ublock fucks with javascript and breaks a lot of "back button" stuff. I still am never gonna give it up though.

Grubhub is one such site when trying to cmd+click on a restaurant.

It's absurd their engineers haven't fixed something so simple.

Perhaps they don't want you to be able to do that?

Single page apps have bastardized the web and reduced consistent usability in so many ways such as your example.

Prior to SPAs we had multi-page applications telling the user "don't use the back button or tabs, they break the website". Was that really better?

False dichotomy.

A poor implementation of a generally sensible approach is not justification to embrace a more complex and error-prone approach.

This argument can be used word-by-word in favor of SPAs and against earlier web applications, but it's a No True Scotsman either way.

But then you’re making the argument that a SPA is less complex than a more orthodox equivalent, and I don’t think that’s the case.

It was definitely the case for most applications I have worked with because they had to perform client-side logic on the server side. Most SPAs I've seen at least have clearly separated responsibilities between the two, AND they don't act as if there wasn't a network in between.

> AND they don't act as if there wasn't a network in between

…But there is a network in between. I'm not sure why pretending there isn't can somehow make a system less complex.

Furthermore, how do you write automated tests for your modals and slide-out panels? Your test suite needs to essentially run a browser. This is absolutely more complex than having an application on the server compute the document that the client expects.

> But there is a network in between

That's exactly my argument...? Seems to be a misunderstanding.

> I'm not sure why pretending there isn't can somehow make a system less complex.

Yes, that is exactly why pre-SPA web programming was more complex.

> Furthermore, how do you write automated tests for your modals and slide-out panels? Your test suite needs to essentially run a browser. This is absolutely more complex than having an application on the server compute the document that the client expects.

How do you test that the HTML/JS generated by the server actually show a modal? At least with libraries like React you can test everything up to the actual CSS engine. And no, you don't need a browser for that.

I don't think either of us are going to convince the other. I've built large, complex systems with both approaches, and I'm assuming you have too.

> How do you test that the HTML/JS generated by the server actually show a modal?

You can test for the existence of markup on page load. You can't test that some JavaScript for displaying a modal has run without running a JavaScript runtime, i.e., a [headless] browser.

In most cases, just loading a page which displays the appropriate information for the user is cheaper to test and implement, and usually is a better experience for the user also. It depends of course — this would not be true of an application like Google Maps. Most web applications aren't Google Maps though.

Not all websites got it wrong. They are both a problem but one does not excuse the other in regards to ignoring the way the web spec works.

Not all SPAs do it wrong either, that's my point. Caring about the user is orthogonal to the technology used.

Most SPAs get it wrong because it’s complex to make work well in a single page framework. It’s nearly impossible to get wrong with a traditional webpage.

It gets even worse with azure devops. It tracks which repository/branch/feed/board you looked at last and then shows that one when you go the respective features. Which means that when you copy the url it does not always include your exact location and you need to do dance to switch the repository or branch to another and back in order to get it in the url.

To make it worse ctrl/cmd click for opening it in a new tab doesn’t always work. Sometimes it open the repo you clicked on in a new tab, sometimes it opens a new tab but with your most recent repo, and sometimes it just opens the repo in the current tab. It is infuriating…

The modern web us utterly broken in this sense and the culprit is SPAs. At this point it seems like the road has no return as the new generations of devs will have no idea how the web of even 10 years ago was behaving. Maybe it’ll all come down under it’s own weight one day.

The culprit is bad frontend developers and sometimes design. Nothing wrong with SPAs, and it's not that hard to make them usable.

Azure DevOps is still utterly shit though.

Are there actual use cases where Azure cloud is the right choice?

Azure the cloud and azure dev ops are two separate but integrated things from the same company. DevOps itself runs in azure.

I think there are plenty of reasons to choose Azure Cloud. Maybe Azure Devops flows from that. But it is far from my favourite tool.

I usually click mousewheel to open new tab

I have a thread on Twitter where I've been keeping track of times that I've run into this.

https://twitter.com/gramofdata/status/1268661032890896387

One of the most annoying examples I encounter on a regular basis is in Twitter's trends sidebar, where they don't use links, but instead have manually added event listeners for ctrl-click and middle-click.