Ask HN: What are weird and/or novel ways to do web UIs?
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
[1] https://en.wikipedia.org/wiki/Zooming_user_interface
363 comments
[ 2.2 ms ] story [ 331 ms ] threadThey definitely dont all have weird UI, but some do.
[0]https://prezi.com/product/
I use it almost every day.
https://impress.js.org/
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.
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.
So it works in firefox and chrome for me on windows. Not sure, I have pretty vanilla setup.
It's full of examples with unconventional design.
Sounds pretty weird to me.
Just like communicating with strangers via on-demand electric currents is weird as well, if you phrase it like that.
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.
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??
/s
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.
But as it turns out he was arguing against 10x complexity and advocating avoiding abstractions with "1x" coding.
http://www.ultratechnology.com/1xforth.htm
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.
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?
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.
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.
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.
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?
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...
Section 5.1.7 Code On Demand
[1] https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding...
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.
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
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.
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 :-)
...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.
What I am talking about is the total applification of the web, as it happened in the last decade.
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
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.
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...
(Actual Hypercard is on the web now too: https://archive.org/details/hypercardstacks )
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.
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.
I think you just upped my motivation even higher to be in IT.
[0] https://smallbusiness.chron.com/convert-powerpoint-presentat...
Why did you try to talk her out of it? What was the gain? Feeling superior?
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.
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.
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?).
Also New York Times and other news site sometimes have really sophisticated interactive story telling or visualizations.
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.
But then, I love scatterplots.
https://news.ycombinator.com/item?id=7465980
Also similar, and by another HN user:
https://diskprices.com/
https://battprices.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.
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!
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
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 very nice though.
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/)
[1] https://tweakers.net/pricewatch/
Its more like a scatterplot with a grid overlay?
You can do anything at zombocom
[0] https://github.com/ggerganov/imgui-ws
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.
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.
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 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.
Small world
Unfortunately, it doesn't.
https://www.hcltechsw.com/wps/portal/products/products-home/...
It took just one slip of the finger to...
When intranet webapps came along everyone breathed a huge sigh of relief.
https://www.ibm.com/developerworks/lotus/library/ls-NDHistor...
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!
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.
After a couple days it was assigned to an engineer for implementation and of course the first thing he did was unflatten it.
Amazing story, and I'm sure they've learned their lesson :)
https://dribbble.com/shots/popular/animation?timeframe=ever
Codepen has stuff you can actually see source code of:
https://codepen.io/popular/pens/