Ask HN: What are weird and/or novel ways to do web UIs?

434 points by louismerlin ↗ HN
Do you know any websites that have weird UIs ? Something like a ZUI [1] for example.

[1] https://en.wikipedia.org/wiki/Zooming_user_interface

363 comments

[ 2.2 ms ] story [ 331 ms ] thread
You might find some interesting examples by going through the websites here: http://brutalistwebsites.com

They definitely dont all have weird UI, but some do.

I’m already seeing this in the wild, at least for more artsy clients, museums, that sort of thing! I kinda like it. Some of their examples are over the top, of course, but think of it as the fashion show pieces that retail chains will digest into more realistic designs over the coming years. I think we kinda need this to escape the tacky, bloated default look that 99% of websites do, nowadays.
Any examples of websites with ZUIs? Looks interesting!
The only example I can think of is Miro (formerly realtimeboard), but it doesn’t feel like such a stretch there, since it makes sense for their product.
it's just a proof of concept, but this web site discussed a few weeks ago absolutely blew my socks off:

discussion:

https://news.ycombinator.com/item?id=20929801

site:

https://3dforreddit.com/r/pics

From a comment:

"

How to use it Desktop: Click to start, WASD and mouse to move

Mobile: Dragging on left half of screen is move, right have is look

Append any subreddit to the url to switch subreddits

"

It should work in any browser but if you have a good GPU it will help a ton.

Crazy. I thought it was just 1 photo, then it turned into a gallery, then blew my mind when I saw I could see other viewers, then blew it again when I realized I could fly
This is amazing. Thank you for this.
This could actually be pretty intuitive in vr
Google Maps has a ZUI in Chrome ;) more or less.
Go spend 5 minutes here on pc desktop. http://cyberspaceandtime.com/Gaano9Y6KAU.video+related

I came across this site a few weeks ago. And it's quite unlike anything I've seen. And try to inspect the site using browser inspector. It's a very different ui than I've ever seen before.

What the hell is this?! TempleOS gone social network?!
Best description so far. My mind is melting.
This was hypnotic. I just keep discovering more.
WASM?
I think the site predates it? Apparently the websites been like this for many years.
Seems completely broken in Firefox and Safari, and mostly broken in Chrome/Chromium - just what browser does the site work with?
You mention safari. Are you on a mac?

So it works in firefox and chrome for me on windows. Not sure, I have pretty vanilla setup.

I browsed it using Firefox on Linux, and while rendering wasn't always perfect, it was a far cry from "completely broken".
It works for me in Firefox on Ubuntu without javascript
I don't know what's more amazing, that I can't figure out what I'm looking at, or that somebody worked on this extensively, and probably continues working on this. I have no idea what this is though.
I've heard that some people build UIs with thousands of dependencies, in JavaScript that hits the server for text that is then parsed to object that are then passed through all sorts of classes that each spit out HTML. They also do some weird stuff with events like key-ups in order to re-render input fields based on objects rather than letting the browser manage those kinds of things.

Sounds pretty weird to me.

Sounds weird if you phrase it in a weird way, yes.

Just like communicating with strangers via on-demand electric currents is weird as well, if you phrase it like that.

I have been thinking about this weirdness a lot. In my book communicating via electric currents while seeming weird, isn't because of it's pure practicality. Digitizing these currents instead of transmiting an analog signal seems weird, but isn't because it allows faster, errorfree and more diverse communications etc.

You can go on and follow the technical developement, but you will inevitably reach a point where people stopped understanding the whole stack below them and instead started to cobble together new abstractions from the things they did – until the next generation came and abstracted that. We all know this – it is far easier to add onto something existing, than removing or changing existing things that are just not good enough for the things we want.

So at a certain point you stop doing the rational and efficient thing to solve a problem, but react to more or less organically grown structures and go a extra mile to solve problems you might have never had if you included these capabilities in the existing layers below. But the existing layers below were written ages ago in languages you hate by obscure circles talking on mailing lists, so we don't even bother. The resulting Rube-Goldberg-Machine is weird in that sense: nobody rational who understands all the layers would plan it like it is from the ground up if they had the choice.

> "In my book..."

As I was reading, for a second there I thought you'd actually written a book called "Communicating via electric currents seems weird". Sounds amazing! Where can I buy this book??

Haha sounds amazing indeed, I'll put it on my list : )
I parsed the book name as 'Communicating via electric currents' then my brain threw an exception.
A 10X programmer or 100X programmer finds a way to remove layers of abstractions.
Just hide the nasty layers behind more facades or layers of abstraction. Please never reinvent the wheel, we need more layers, its better software design to reuse the old stuff.

/s

yep, I mean technically you could directly write the UI directly to IP packets and cut out the whole stack, but it's a step in the wrong direction, abstraction allows people to specialize and focus on their domain.

For a non technical example we could communicate via math for all human interaction, it would be more efficient, and truthful, it would also limit though and transfer of knowledge as it puts difficult constraints on expression.

Stacks are good, the web got screwed up by SUN, IBM, and Oracle's insistent vision of a thin client world, that needed lots of servers.

I'm actually shocked at the downvotes. The previous post was discussing the problem of all the layers of abstractions, and I was pointing out that a "10x programmer" could be getting 10x results by finding ways around those abstractions.
Probably because HN is mostly frequented by programmers, and not managers or "startup entrepreneurs" who throw around terms like "10x programmer" as if it's a thing that actually exists, and not a harmful concept that at best promotes gatekeeping and at worst promotes egotists who believe that their sloppy shortcuts won't have to be cleaned up by everyone else when they inevitably fail.
I thought I originally heard about the 10x programmer thing from some of Chuck Moore's talks on Forth. So I went to re-find this article.

But as it turns out he was arguing against 10x complexity and advocating avoiding abstractions with "1x" coding.

http://www.ultratechnology.com/1xforth.htm

I'd argue, one is simply weird because you're (or your hypothetical audience) is not used to it. The other is weird because it's mainly that way due to path dependency.
I can push ideas into other people mind by sending carefully created pressure waves at them
(comment deleted)
Yep even explaining what happens to give you a dial tone on a landline is pretty crazy when you first look into it.

It surprises many people to learn that the tone isn’t “always there” and that signalling happens with the exchange to create it. This includes checking billing status and other things.

These systems are so robust we mostly take them for granted.

All the critical comments on this. Why are all these critics so scared that there might be an easier way to do web dev?

Are they really just protecting their archane methods because they see that as protecting their income and any simplification a threat to that?

Or is it more tribal, cult like adherence to an overbloated way of creating web UIs?

Or is it people don't want to learn yet another tool and they're just resigned to the fact the these are the tools they have because really, they don't get to decide that anyway, their employer does?

Or is it people don't like being reminded that actually, they're "forced" to use these tools (which they perhaps wouldn't if it wasn't mandated), but because the workplace uses them, they use them, so the existence of other options while accurate is a painful reminder of their own limited autonomy to individually decide the tools they use for their work?

Is the same cultish zealotry seen in other languages and frameworks or is it just (what compiles to) ECMAscript and Web UI/state frameworks?

Not to mention how weird speech is if you try to explain it to in a similar manner.
Well, I can think of good reasons for communicating using electricity. It's fast. The infrastructure is available. I can think of good reasons to communicate with strangers. It's interesting, strangers are interesting.

I can't think of a good reason for depending on thousands of libraries to aid you in laying out and presenting a document, if you are using a language and a platform specifically designed for that purpose.

That's indeed weird. How would they not lose track of their dependencies? How do they keep their code lean and load times fast?
They just hope that Google will keep pouring infinite money into making their JavaScript engine faster.

And they never kept track of their dependencies in the first place. That's the job of some build tool. Whatever it pulls in is fine.

What Google giveth, NPM taketh away.
We target IE11 with angular1.6, React and Vue and it all runs very fast. The only time we ever had trouble were lists over a few hundred items long that our internal customers didn’t want paginated. But delivering those more demanding apps in react and vue solves all our IE11 is slow problems. On any other brothers the code might as well be native.
Wait why are you using all three of AngularJS, React, and Vue?
They probably have a giant AngularJS stack and wanted to slowly migrate to a new framework and they couldn't reach consensus on either React or Vue :D
We have one small piece written in React. It will be replaced when the Angular is finished being moved to Vue, and all new dev is in Vue. It’s a nearly 8 year old bundle of over 56 and counting HR apps and is a feather in our department’s cap for how much money it has saved.

I wanted to move to React initially but after adding a single new app my boss hated the syntax and we switched to Vue. Vue is good too.

That would indeed be impressive, IE surely needs a ton of polyfills?
Lol yes it definitely does. But we still get to use all the syntactic sugar of es latest and IE11 stays very fast. We’re happy and so are our customers.
> lists over a few hundred items long that our internal customers didn’t want paginated.

Does it not bother you that a machine that can do at least a billion computations in a second struggles with a list that short?

Only on IE11 and only in angular1.6. Vue and React it is lightning fast.
Please view the source of this HN page. It has hundreds of elements and images, and renders instantly.
Relatedly, how do they track security issues in their dependencies?
They don't need to keep their code lean and load times fast because the speed of their average target CPU doubles every two years anyway... oh wait!!
If you think that's bad you do not want to know what's happening in the code for a desktop or a native app.
Given that the last job I had was maintaining ancient MFC-era C++, the nativest of native apps .. actually, it's pretty straightforward, because so much of it dates from the era when there weren't cycles to waste, but as soon as you touch COM the insanity creeps back in.
Uhm, I do know what happens and it's fine? I mean yeah, today we're using X11 to push application-created images even though the protocol encourages you to render applications from lines, horribly rendered text, and ellipses or something... Btw lines can be stippled, wow!
Says everyone on HN while relying on these weird UIs to do their job daily.
Not only that, - I sometimes create them as well. At least I try to avoid it where possible.
Yeah and I hate that I have to rely on them. They are usually terrible.
They're terrible because Google and Facebook keep swinging their weight around and everyone is following in suit. The actual web specs are actually pretty awesome and can do amazing things with reasonable efficiency.
Yes! Web development is "weird" because we (developers) are basically constantly trying to put square pegs into round holes. Over the past ~25 years, a document delivery system has been perverted into a application delivery system. The underlying, fundamental technologies were not intended for "UI" app development.
99% of those "apps" are still just documents with client-side rendering, though. And the web was designed with the intent of running code practically from the beginning, albeit with support envisioned for multiple languages, so programmatic elements in a website aren't really a perversion of the original intent.
I didn't know that. Is there anywhere I can read about it?
https://eager.io/blog/a-brief-history-of-weird-scripting-lan... mentions support for multiple languages, including TCL.

And the possibility of scripts is mentioned at least as far back as HTML3[0] in 1996, with the script tag being added as a placeholder element in HTML 3.2[1], and Java applets were already supported.

So while it wasn't there at the very beginning, it's clear the architects of the web didn't consider running code in the browser to be antithetical to its purpose.

[0]https://www.w3.org/TR/WD-script-960131.html

[1]https://www.loc.gov/preservation/digital/formats/fdd/fdd0004...

>And the web was designed with the intent of running code practically from the beginning

This is absolute nonsense. In the beginning the web didn't even have inline images. It was a text-only protocol.

https://www.wired.com/2008/09/history-of-img-and-embed-tags/

Cookies and script tags were hacks added by Netscape, IIRC.

>This is absolute nonsense. In the beginning the web didn't even have inline images. It was a text-only protocol.

Maybe you misinterpreted my comment. "practically from the beginning" does not mean the same thing as "from the beginning." I think something that was considered to be a part of the HTML spec, regardless of how it came about, since the 1990s counts as "practically from the beginning."

>Cookies and script tags were hacks added by Netscape, IIRC.

Tim Berners-Lee didn't seem to have a problem with the premise of embedded scripting in HTML in 1992[0], albeit not with the script tag and JS per se. And my comment was more referring to whether or not executing code in a browser was considered a legitimate use of HTML and the web at the time - and clearly it was, albeit not universally. That paradigm wasn't something Netscape just "hacked" in and entirely forced upon an unwitting web.

[0]http://1997.webhistory.org/www.lists/www-talk.1992/0064.html

The web is "weird" because it's not a platform with a monopoly owner, but the place where platform would-be monopolists fight. Microsoft had a go with ActiveX and lost. Then came back with IE6's incompatibilities and lost again. Adobe had a longer go with Flash and lost. Sun kind of tried with Java applets.

Now we can see the two big vendors Google and Apple trying to slip in features that help their apps or platforms. This is partly why some people worry about the dominance of Chrome; once it's totally dominant, Google can e.g. interfere with adblockers without worrying about losing users to the competition.

> ...a document delivery system has been perverted into a application delivery system...

I love it; this is great! I imagine somewhere in the world today, a witty instructor is teaching a computer basics or CIS 101 course and using something like your phrase above as the definition for the term "world wide web". lol :-)

Yeah, the main problem web apps were meant to solve was the delivering of a client and keeping that client up to date on the desktop. This was during the era where most client software was delivered on disk in a shrink wrapped box. But shortly after that software like iTunes essentially solved the problem. This is borne out by the fact that most users don't have a problem installing or keeping up to date the browser which is required for all these web apps. And of course there's phones, phablets, tablets, chromebooks and the like where it's essentially all client apps.
>Over the past ~25 years, a document delivery system has been perverted into a application delivery system.

...and a protocol for inter-object communication. That's probably the most important part, because that's what creates most of the complexity and security holes today. There is no end to this in sight.

Alan Kay warned web developers about this in 1997:

https://www.youtube.com/watch?v=oKg1hTOQXoY

Nobody listened. The majority of web devs still don't get it. (Can't wait for the arrogant replies here.) We ended up reinventing and re-implementing "internet objects" in the shittiest way possible.

(comment deleted)
I wonder, why you folks do not

  * build your own runtime
  * running in your own window
  * using your new protocol
  * using a sane UI language
Because the way it is now, the document centric web well may be destroyed, sooner or later by trying to fulfill more and more non-document needs. And we know, how that goes: where the money is...
I think the document centric ship sailed around 1993 when HTML forms became a standard.
I think it was somewhere between the introduction of Javascript, browser plugins, and/or XMLHttpRequest.
I disagree. Nobody said, a document can not be "interactive". With new technologies, old terms expand.

What I am talking about is the total applification of the web, as it happened in the last decade.

> document delivery system has been perverted into a application delivery system

The Web is much more than a document delivery or archiving system, it is hypertext and the boundary between hypertext and apps is fluid. Is Wikipedia an app or a collection of articles? Is HN an app or a collection of comments and links? There is no precise boundary.

When Berners-Lee invented the Web he was heavily inspired by Hypercard [1], an app development kit based on linking cards together.

Web development is "weird" because the web tries to be device- and platform-agnostic. The web works on large widescreens, laptops, smartphones, in text mode or on a Braille display.

Other technologies that have been used to develop UI apps from the beginning, such as Adobe Flash, assume that the display is a kind of fixed screen on which you can draw, with little or no accessibility and linking in mind.

[1] https://en.wikipedia.org/wiki/HyperCard

There is no precise boundary, you are correct. However delivering a blob of minified, obfuscated Javascript code that renders the entire UI is obviously an "app", not a document. Web stuff that does entirely client side rendering is an abomination, IMO.
Server side rendering is very underrated.
It's true! For details, just ask anyone you know who was evangelizing client-side rendering three years ago, they'll tell you all about it.
Not really, PHP is used on 80% of the web. I know, some of it are API-s, but it's still huge. PHP is SSR by design.
Because it works. Things that just work and aren't new are underrated. Like HTML tables.
> ...passed through all sorts of classes that each spit out HTML.

They generally don't spit out HTML, that's how you get XSS. Rather, they turn the data into DOM nodes, dynamically. In theory, that's more efficient, because the data should be smaller than the marked-up data. That's also how you get a UI to sort of rival a Desktop application, you cannot do this all server-side.

Also, all your server-side code that renders HTML is usually more privileged than your client code, unless you did your job very well, which I know you didn't, because you don't have the time and/or money. That's a huge risk surface area. There's a reason why Wordpress instances (which also have "thousands" of components) get hacked all the time, while static-site-generator sites don't.

> They also do some weird stuff with events like key-ups in order to re-render input fields based on objects rather than letting the browser manage those kinds of things.

The browser doesn't manage those things, or if it does, it's very limited and likely different for each browser. You need some amount of Javascript for all but the most trivial forms.

Ist this why the web died and went to facebook?
Well, HN is pretty weird for the web of today. That's also why it's so nice to use it. I wish more sites had simple, lean UI that let the text communicate its message, instead of being interactive marketing brochures.
This is a bit of an odd answer, even in a question that expects odd answers. That is because it sounds so normal, yet I have Googled for it and almost no one advocates for it. They do maybe advocate for it in terms of design, but I mean in making actual static websites.

Enter Google Slides: the product for your uncle Joe and aunt Lysa to create their own websites without knowing how to code!

I even have an example website for you that I made as it is a project that I'm working on in my free time. I already remade the website in actual HTML/CSS/JS but I was simply curious how well Google Slides would work. IMO, it has a thing or two over Sketch (such as displaying GIFs, having links) since I made the actual layout with Sketch, and then redid everything with Google Slides to do a side by side comparison (I went too far with this :P).

There are a few things to consider:

1. Every page needs to be made in its own slide show as you cannot have different document sizes.

2. You will be stuck with a slide viewer, but I figured for the industrious fellow, you could simply inject some JavaScript that disables that whole viewer when you iframe your Google Slides website.

3. There are zooming issues because the pages are of different document sizes.

4. The fact that you need to define document sizes is noteworthy in itself.

So yea, not super duper practical, unless you aren't a web designer and simply want a simple profile page online, but definitely weird :D

Example website / project that I'm working on (and recreated to the best of my abilities in Google Slides for fun): https://docs.google.com/presentation/d/e/2PACX-1vRxqg4SNv1Sl...

Possibly the closest "mainstream" product to Hypercard-on-the-web?

(Actual Hypercard is on the web now too: https://archive.org/details/hypercardstacks )

I'm not old enough to have known Hypercard, though my thesis very adjacently touches on it (kind of, not really, but it talks about Douglas Engelbart and Ted Nelson and hyperlinked text and how it devolved -- according to Nelson -- to the www).

So it's really cool to see hyper card for real this time!

Oh! Of course! I presume you can also inject JS into Google Slides itself. Hmm... I'll see if I can make a simple game then, when I'm bored again.

Wow, this idea brings me back to one of the moments that first inspired me to start down the path of web development. In 2007 I took a semester off and got a job as a teaching assistant for a special education classroom and was 1:1 with a child that LOVED computers but would get overwhelmed by the information density of your typical website - too many decisions would frustrate him.

One week, we were learning about farms which I was really excited for because his love for the computer was matched only by his obsession with animals. Sadly, his outbursts would require me to separate him from the group time where we would show them pictures of animals and learn about their sounds, functions, etc. This made me think of creating and interactive PowerPoint where I made a slide with options for “petting zoo”, “animals with jobs”, “wild cats”, etc. each choice would lead to a new slide with a set of photos, icons that played their sounds, and even tried creating a set of quizzes where I recorded an animal sound and he had to select a photo that matched.

I worked until 3 AM making this PowerPoint and was deliriously tired the next day, but man the joy this kid experienced while he got to play on the computer AND learn about animals without getting worked up over a multitude of decisions sparked something in me that made me decide I wanted to do something with IT.

Your idea really hit home for me and helped me remember one of the reasons I do what I do today - frontend and app development. Lowering boundaries and making technological concepts more accessible can inspire unexpected interest and adoption.

That's a truly heart warming story to hear!

I think you just upped my motivation even higher to be in IT.

Hey, I had the same idea long ago: creating a website-like functioning slide show. There was no Google Slides back then so I used Powerpoint and I had no way of putting the "website" on internet.
My wife was actually going to do this for a website. She is a teacher and wanted a small site for her classroom so that the kids and parents could keep up to date with the goings on in the classroom and she wanted to use Google Slides for this since she has used it for work before. I was shocked and was trying to talk her out of it. At the end of the day, she decided the site wasn't necessary or worth the effort so nothing came of it but I couldn't believe she thought to use Google Slides for that.
I bet if you wouldn’t have crushed her creative spirit, this side would exist now. Made with google slides.

Why did you try to talk her out of it? What was the gain? Feeling superior?

She wanted to create the site the day before parent orientation. She ended up not doing the site because she figured it wasn't worth the time to make something that the parents wouldn't even visit as the parents of her students are mostly not involved in their children's education.

My main argument against using Google Slides is the URL was not going to be easy to remember when telling parents. I pointed her to things like wordpress or wix that would allow her to have a free account but also would allow her to have a URL that would be easy to communicate. She didn't want to spend any money on a domain name either.

That reminds me about one other use for the slides editor like power points and google slides: creating posters. It's much easier and faster for an inexperienced person to create a poster from scratch (for your paper, conference talks, etc) with those slides editor than using vector graphic editor like inkscape or coreldraw.

It's probably already obvious for people who regularly uses google slides / keynote / powerpoint, but for me who very rarely use them (but often use various graphic editors) it's quite a revelation.

Similar idea: I‘ve heard that Keynote is (was) popular as a protyping tool inside apple.

I think It‘s actually the best tool do this on the iPad right now. At first the links seem limited because you link to slide numbers, but they actually update when you move things around. Magic Move is beyond what any design/prototyping tool can do in terms of zero effort animation (though figma launched somehtng like this yesterday?).

This website uses scatterplots instead of lists to display products:

https://www.productchart.com

So on Product Chart, you can for example say "Show me 300 smartphones and put the price on the x-axis and the size on the y-axis".

It's a bit like you would lay out things on a table and then organize them by some criteria.

Wow, that is amazing !!!

But then, I love scatterplots.

OK this is awesome! Thanks for sharing, it fits my nerd-brain like a glove. Wish it would generalise to everything in life like my own spreadsheets (I say that as a compulsive data-collector)
I'm glad to see this site making progress and gaining attention. I remember it used to be "GNOD":

https://news.ycombinator.com/item?id=7465980

Also similar, and by another HN user:

https://diskprices.com/

https://battprices.com/

> https://diskprices.com/

These do not compare things such as sequential read, sequential write, random read, random write, temperature, MTBF, Backblaze outage percentages (statistical relevant), type of storage (SLC, MLC, AMLC, QLC, TLC, etc), chipset used, and so on, and so forth.

I'm scared shitless to check or use the battprices.com as it probably does not do anything like the above either. Which, in case of batteries, can cause something arguably more severe than bad performance or data loss: fire.

Don't use websites like these. Instead, read reviews and support websites which release quality reviews.

Dude, they’re just simple lists of products by their base metric, in both cases limited to reputable brands.

No fires will ensue just because you now know Duracell offering X is slightly cheaper than Energizer type Y per kWh even though the pack costs more.

Breathe!

Didn't know, the website name suggested otherwise. Rest of the points still stand.
These are great.

I miss a page like this for Canada.

In Germany, where I'm originally from, we have geizhals.de for product and price comparison that works a lot like these pages you linked and has been around for ages.

They have an English version you can check out here: https://skinflint.co.uk/?cat=nb (this links directly to the Laptop section so you can check out their filtering capabilities).

Here's their listing of price per TB for SSDs which is very much alike the diskprices.com page you linked: https://skinflint.co.uk/?cat=hdssd&sort=r#productlist

> In Germany, where I'm originally from, we have geizhals.de for product and price comparison that works a lot like these pages you linked and has been around for ages.

Geizhals is not only useful as a price aggregator, but also when it comes to product discovery itself - often I look for products with very specific attributes, which may be represented by different names and keys between sellers and manufacturers. Geizhals' ability to collect and aggregate them in such detail is second to none. At that point pricing information is just an extra.

Looks really nice! Wouldn't a simple table be a better option in this case though? I quickly got tired hovering over each icon (very small icons too) to look at the specs.

Looks very nice though.

Yep. I love design and creative ideas, but they still have to be efficient.

This just makes me waste my time compared to a table where I can sort/filter by different criteria.

Most of the time, "creative" visualizations tend to actually obscure meaning, or worse, mislead viewers.

Recommended reading: Show me the numbers by Stephen Few (his blog is also great: http://www.perceptualedge.com/blog/)

So I checked the Smartphone section. Very limited amount of arguments. The visual representation is nice, but the Tweakers Pricewatch website [1] has a better search because it has better (more) arguments (they could however benefit from the scatterplot system).

[1] https://tweakers.net/pricewatch/

Is there a name for this kind of chart? It doesn't seem to be a scatterplot in the traditional sense because the axes aren't on a regular interval (If you look at adjacent phones the difference in prices aren't even).

Its more like a scatterplot with a grid overlay?

http://www.dontclick.it/ is a super old (Flash) demo of a UI that doesn't have any clicking
It felt so awkward...
I quite like it. Its seems like an advanced version of where menus pop up on hover rather than having to actually click.
I've seen a website favicon be used to show loading and other information at the top of the browser inside the tab. that was really cool. They made the emoji cycle through multiple so that the favicon was animated.
Weird? Maybe. Super simple single page responsive website, no JS, CSS + HTML only: https://isabellegrell.com/
Love "low-tech" solutions to UI experiences. But to be sure, toggling the individual sections does use javascript (view-source -> see 'toggle_visibility').
using the :target selector or invisible radio buttons it would not even need to
Not sure if this counts as weird or novel web UI, but I wrote a small library to stream Dear ImGui's vertex and index buffers to browsers via websockets, and just render them using WebGL's drawElements [0]. There a couple of examples linked in the README for anyone interested.

[0] https://github.com/ggerganov/imgui-ws

This is wicked cool, nice work!
This isn't a weird UI as such, but it's probably a technology that isn't explored enough. Back in the very early 2000s before Javascript was universally available, we wrote a CGI-based technology that worked by persisting the entire state of the page between clicks. It was a true widget-based server-side GUI, so you could build single page UIs by composing widgets such as buttons, labels, and more complex things, hierarchically (like native GUIs). The whole page would reload between clicks but everything was so lightweight and tiny that wasn't actually much of a problem, at least by the standards of the day.

It's all open source but probably doesn't compile on modern machines, and of course for extra fun we wrote the entire stack including the webserver, CGIs, cooperative threading, database layer and C libraries from scratch. From top to bottom this is the entire stack:

http://git.annexia.org/?p=monolith.git;a=summary

http://git.annexia.org/?p=rws.git;a=summary

http://git.annexia.org/?p=pthrlib.git;a=summary

http://git.annexia.org/?p=c2lib.git;a=summary

Edit: I should say that it's obsolete if you can make the nowadays reasonable assumption that Javascript can be used on the client side. It's more like "this is the crazy shit that a team of developers in their 20s with VC funding, disfunctional management and time on their hands get up to".

Edit 2: It was used in production for quite a long time, certainly until the 2010s. If you were in a UK school in the mid 2000s there's a chance you might have used this.

If I'm not mistaken this is pretty much how ASP.NET Web Forms work(ed). I think Java Server Faces (JSF) uses a server rendered component approach also. The giveaway being the need for a ViewState.

So for a long time this has been a widely used pattern! With today's dominance of (MVC || SPA) architectures I agree it's not as widely known as perhaps it should be.

You could do some heinous, heinous stuff the Web Forms and UpdatePanels.

Interestingly, Blazor seems to be reviving the whole idea. With SignalR, it is actually not completely insane to handle events with the equivalent of code-behind.

I once worked at Chase Manhattan Bank and one of their internal networking teams had a web site for wiring requests. They didn’t want to work too hard so their UI was designed to make data entry as slow as possible, mostly by using huge multi-level drop down lists where the slightest twitch would make them collapse and you would have to start over navigating through them, repeat a dozen times for every run of cable, several runs required to make an end to end connection. It wasn’t custom programming, just taking full advantage of the browsers of the era’s inability to render the UI component for that. So I was building out a data center and needed Something like forty thousand cables run which translated into around one hundred and fifty thousand segments. I tried to give this info via a spreadsheet but they were steadfast that the web interface was the only way they could receive it. So I wrote a script to just post the data directly without going through the UI, ran it, and went home. Turns out all their web form did was e-mail the values to a half dozen people. The e-mail system was Lotus Notes (dates this) so each person got their own copy and there was a lot of overhead. The sudden influx of a million e-mail messages brought down Chase’s email system for two thirds of the country. They spent days clearing the mail queue and recovering - they had to fly in IBM techs with suitcases full of disk drives to add the storage needed. Everyone who received the wiring requests spent days deleting them with new ones arriving as quickly as they deleted the old ones. Then when things were finally normal again they asked me to resend them my spreadsheet.
That's why everything should be left at "the customer is always right".
Wonderful story - thanks! I was at Chase Manhattan in London from 1997-2000, and remember the Lotus Notes system well. I had Win NT and Solaris desktop systems. There was an appalling timesheet system called Agresso, the most counterintuitive Windows GUI I ever encountered. I guess the lesson is that mgmt diktat in corp envs repeatedly inflicts crappy solutions on captive users. Plus ca change!
No! It cannot be that Agresso was already around at that time. I still have to work with that horrific system, even though it is webbased now. It's still a horrible experience.
> There was an appalling timesheet system called Agresso, the most counterintuitive Windows GUI I ever encountered.

I love the idea that there was a terrible timesheet system called Agresso. And that it's still around today!

Some things do change with time. If this system was created today, I imagine it would be named something like quiesso or daisy.

Actually I used to work for the company that makes it. It changed names some years ago and is now called "Unit4 Business World"

Small world

Agresso was my first job. I got to migrate customers off of Ingres, Sybase, Informix to either Oracle or SQL Server 6.5. After some time, I got the opportunity to build their Crystal Reports integration. This was 1997-1998.
Do you happen to know whether the back-end systems would still be the systems that you used to work on? I have a feeling it never really changed...
Sorry, I have no insight in that. When I was there we were just upgrading to Agresso 5, and as I remember it, it was pretty much a win32 app talking directly to the database. Not sure how much, if any, server part was there in between. So it has probably changed when they switched to web.
That has got to be the worst system to not have any type of stop gate in the API.
I mean yes... but recall that the entire point of the system was that it would make data entry slow. I think that whoever set it up probably felt that the clunky form was enough of a rate limiter and nothing further was needed on the back end.
Just to make sure I get this right - to make sure their team wouldn't get overwhelmed with work (how exactly? It's not like the demand for cable wiring would be too different at the end of a year in a frictionless system) they not only decided to create busywork for other departments, but this design also blew up impacting the entire company? Do you know if there were any consequences for whoever created this monstrosity?
No, this is every day in Chase. They are basically the McDonalds of the financial services industry - everybody works there at least once, most people move on to better things, what you have left are the ones who know they will never succeed anywhere else. We convinced one manager at Chase that the reason her application crashed so much was because there wasn't enough gigawatts to power the flex capacitors. The guy who they hired for IT security in my department was a bricklayer who ran around with a dog-eared copy of Computer Security For Dummies trying to find out where we were hiding the NFS so he could turn it off (we kept telling him we didn't use NFS and he didn't believe us, so the hunt continued). Probably the worst story was this really portly fellow who couldn't fit into the bathroom stalls, and was too lazy to walk across the floor to the bathroom that had a handicap stall he could fit in, so he would just sort of stand in front of the stall door and cut loose, and every night some poor cleaning lady had to deal with that and it didn't raise any eyebrows at all. Sounds like an NBC sitcom, but it was real, places like this really do exist, stuff like this really does happen.
Sounds less NBC and more (in fact exactly) like It’s Always Sunny. Specifically Charlie in the mailroom with Pepe Sylvia, and the pissing thing is just classic Frank.
Sounds like there was no API. OP was just making POST requests directly to the server.
This would be a good story for r/MaliciousCompliance!
Heroic! Lotus Notes was such a pile of junk. Every time I used it for the simplest task, the combative UI would cause my blood pressure to spike up. I would calm myself down by imagining the blissful life of the ex JPMorganChase IT boss who greenlighted the purchase, living off his giant kickback on some Caribbean island.
Press F5 to refresh, like in every software. Except it closes Lotus Notes.
My favourite Lotus Notes fail was circa 2008, when the menu item for "Mark message as read" was next to "Mark all as read", which from memory was not undo-able.

It took just one slip of the finger to...

Great story...thanks for sharing!
Whole books could be written on the terribleness of Lotus Notes. For those too young to remember the 90s, LN really was as bad as everyone says, turning what should be simple (email, maybe a few custom forms) into swampy morasses of pain.

When intranet webapps came along everyone breathed a huge sigh of relief.

Notes was a double-edged sword. It could be as terrible as you've heard, but on the other had it also let non-programmers build surprisingly useful applications all by themselves. (Which is part of why it stuck around for so long -- being useful, those apps tended to get wedged into critical parts of the business process, which meant you couldn't just pull them out and throw them away.)
Notes was conceived in 1984 and at the time was an amazing platform which featured a secure client/server architecture, RSA encryption, data replication and offline support. Both the Notes client and the server (later renamed to Domino) needed to run on multiple platforms (Win 3.x, OS/2, Netware, NT, Alpha, RISC systems etc), and while the code was native C code on each platform, all UI of the client was implemented using an abstraction layer called NEM ("Notes Environment Manager"). Likewise, all database storage was abstracted in NSF ("Note Storage Facility"; and Notes databases to this day still have the .nsf extension). Long story short, the NEM layer was a trade-off between portability and consistency across platforms. And, Notes used F9 to refresh data, way before the Windows standard of F5 was a standard...

https://www.ibm.com/developerworks/lotus/library/ls-NDHistor...

> When intranet webapps came along everyone breathed a huge sigh of relief

Not so fast. As a web developer we still had to contend with the horror of IE5/6/7 for a few more years, and initially WITHOUT anything resembling the utility of something like JQuery!

I remember being happy when IE7 came out, because it fixed a bunch of CSS bugs in IE6, and also finally supporting PNG transparency meant that whole new kinds of design were actually possible ... feels so weird knowing what we can do today with CSS and be reasonably sure it works in three major browsers.
I was building "IE-only" internal web apps at the time (with increasing disgust) and having to support legacy browsers even if you knew they were just IE was hell. When I finally broke out into open-source and STILL had to support IE BUT ALSO firefox, safari and chrome (did chrome even exist yet? Mozilla maybe?)... it was not a happy time
> When intranet webapps came along everyone breathed a huge sigh of relief.

Not entirely. Sometimes they were replaced by applets, which are just native application wrapped in a thin layer of html. This causes its own set of problems. At one place I worked (a large government agency), a critical spreadsheet ran as an applet which was only compatible with IE9. They couldn't upgrade anyone's PC's because they risked an auto-update of IE, which would break the ability to run that app.

At another job, a certain time tracking application ran as an applet, requiring a specific version of the jvm to be installed.

Deploying an application that runs in the browser using the browser's native capabilties - js, html, css works great. Using it to embed an applet doubles the misery, as in the short term management thinks they've purchased a portable, always-compatible "web-app", while what they've done is bought a native binary they can no longer properly provision their workstations to run.

I had to do something similar once with FRRs (firewall rule requests) as a F50. There is one official way of requesting a FRR. What that way is a matter of some debate. Theoretically you file a JIRA ticket with fqdn, ip/mask, port, protocol info. Anyways cutting a long rant short I eventually had to write a script to generate 100 SRC X 10 DST X 2 ports rules as csv pulled into a spreadsheet.

After a couple days it was assigned to an engineer for implementation and of course the first thing he did was unflatten it.

> Then when things were finally normal again they asked me to resend them my spreadsheet.

Amazing story, and I'm sure they've learned their lesson :)

Cool interface for user flow diagrams: https://overflow.io/s/9ST7SX/
Perhaps. Unfortunately it only works with Chrome or Chromium based browsers, it is barely usable in Firefox.
It sounds cool, but it is nigh unusable for performance reasons on firefox.. and i used my beefy dev machine to check the site.
One of my pet peeves are websites that use "ease-in" or "ease" transitions. IMO "ease-out" is always the way to go. I hate waiting for things to go full speed