22 ms·

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

• tsak 7y ago
  Using Vis.js timeline for an artist collaboration website: http://sirius.modeselektor.com/ http://sirius.modeselektor.com/
• clemensnk 7y ago
  With Webstrates (https://webstrates.net https://webstrates.net) we experiment with building web UIs by persisting and synchronizing the DOM. I wrote a short blog post about it here: https://medium.com/@clemensnk/a-brief-overview-of-webstrates-7847333b39f7 https://medium.com/@clemensnk/a-brief-overview-of-webstrates...
• AkshatM 7y ago
  This is more of a joke answer, but r/ProgrammerHumour recently underwent a spate of submissions competing to come up with the wackiest and "wrong" ways to do common UI elements, such as the slider or phone number inputs. A small album of the best and worst of these submissions: https://www.reddit.com/r/ProgrammerHumor/comments/6fdl8h/an_album_of_volume_sliders/ https://www.reddit.com/r/ProgrammerHumor/comments/6fdl8h/an_...
  • itronitron 7y ago
    I'm surprised no one has created a VAAS Volume as a Service
    • mtrycz2 7y ago
      PulseAudio is network-enabled, so...
    • breakerbox 7y ago
      That's a great start up idea - Cloud based UI elements.
      • exikyut 7y ago
        With a feature where arbitrary aspects "update" from under you in ways you could never expect and ensure beforehand are locked down in your favor in the contract/agreement. For example, a widget might have a compile bug where the CSS rules to explicitly lay out component size only get included in media queries requested with devices using such low PPI that you never catch it in testing because your devices are not icky enough. This "bug" might then be "fixed" in an "improvement release" down the track that ships the explicit sizing to everybody... including your page layouts, which are now broken. Or maybe you could ship a calendar control that includes a fuzzy date parser, and then remove the date parser "because it was confusing too many users". All emails from power users pointing out lost productivity because of their inability to specify dates like "2 1/2 days ago" or "-2h", or having "2018" map to today's date last year and "yesterday" also include the current time, are quietly sent to /dev/null. The calendar control is updated to use Material Design, two days of which are spent building a test jig to autoreload on 18 devices at once using remote debugging, as part of a subfeature sprint to ensure a certain cubic-bezier transition animation (which 4 people have collectively watched 537 times) "flows" correctly with the right... twang. A further day is spent turning an Arduino into a virtual bluetooth keyboard to ping the 18th device in the aforementioned testing rig; it stubbornly refused to not go to sleep, even when plugged in. A decentralized bidding infrastructure could be implemented that uses Bitcoin to allow users to vote on which UI designs they like the most by sending money to different wallets. Much ado is had about how to rebuild a Merkle tree from first principles on top of the blockchain in order to implement the wallet tracking needed to power the aggregate collection needed to power the feature. After A/B testing (and some shady network sniffing) finds the UI library is only being used by people with 1Gbps (fiber/5G) Internet connections on devices with 8-core CPUs, it is decided to simply download the entire Bitcoin blockchain into the Web browser of every consumer of the UI toolkit to perform the analytics about which style to load on startup. No testing is performed on smartphones, and in the standup meeting for the sprint in question nobody remembers to point out that 8-core ARM CPUs are not the same as 8-core i9s. The stubborn team lead has sufficient karma to retain the feature even after the stunned bugreports flow in.
  • jedimastert 7y ago
    Absolutely glorious times
  • vollmond 7y ago
    See also: https://www.reddit.com/r/badUIbattles/ https://www.reddit.com/r/badUIbattles/
• thewway481 7y ago
  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 https://news.ycombinator.com/item?id=20929801 site: https://3dforreddit.com/r/pics 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.
  • michannne 7y ago
    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
    • bkanber 7y ago
      How do you fly?
  • hmhrex 7y ago
    This is amazing. Thank you for this.
  • yummypaint 7y ago
    This could actually be pretty intuitive in vr
• therealmarv 7y ago
  Google Maps has a ZUI in Chrome ;) more or less.
  • trantiendat 7y ago
    Hello, this is my first comment
• namrog84 7y ago
  Go spend 5 minutes here on pc desktop. http://cyberspaceandtime.com/Gaano9Y6KAU.video+related 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.
  • jacobush 7y ago
    What the hell is this?! TempleOS gone social network?!
    • Roritharr 7y ago
      Best description so far. My mind is melting.
  • kqr 7y ago
    This was hypnotic. I just keep discovering more.
  • sbayeta 7y ago
    WASM?
    • Namrog84 7y ago
      I think the site predates it? Apparently the websites been like this for many years.
  • jedimastert 7y ago
    What fresh hell is this?
  • cr0sh 7y ago
    Seems completely broken in Firefox and Safari, and mostly broken in Chrome/Chromium - just what browser does the site work with?
    • 7y ago
• tiborsaas 7y ago
  Check out http://hoverstat.es/ http://hoverstat.es/ It's full of examples with unconventional design.
• dandare 7y ago
  Inspired by zoomable interface https://uk.wikibudgets.org/w/united-kingdom-budget-2015 https://uk.wikibudgets.org/w/united-kingdom-budget-2015
  • porker 7y ago
    Very nice, thank you
  • htfu 7y ago
    Really impressive! Just so smooth and intuitive. Shame it broke down very quickly after zooming in and trying to go back out again.
• mosselman 7y ago
  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.
  • cuddlecake 7y ago
    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.
    • atoav 7y ago
      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.
      • harry-wood 7y ago
        > "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??
• macca321 7y ago
  https://theweekly.co.uk/ap2/index.html https://theweekly.co.uk/ap2/index.html
• dkraft 7y ago
  Ist this why the web died and went to facebook?
• TeMPOraL 7y ago
  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.
• melvinroest 7y ago
  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-1vRxqg4SNv1SlUZzPwu2ycjqMKPqk4fgtFDroq0nwbVp_m7hd8Zbui04g3ademPQP-efmdzi9PHW3Uoj/pub?start=false&loop=false&delayms=3000&slide=id.g61e126f25a_0_1 https://docs.google.com/presentation/d/e/2PACX-1vRxqg4SNv1Sl...
  • pjc50 7y ago
    Possibly the closest "mainstream" product to Hypercard-on-the-web? (Actual Hypercard is on the web now too: https://archive.org/details/hypercardstacks https://archive.org/details/hypercardstacks )
    • melvinroest 7y ago
      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.
• throwaway_bad 7y ago
  3d web comics? https://sketchfab.com/3d-models/headache-xkcd-880-5659b3b539e94dcca00a315ac6a48256 https://sketchfab.com/3d-models/headache-xkcd-880-5659b3b539... Also New York Times and other news site sometimes have really sophisticated interactive story telling or visualizations.
• TekMol 7y ago
  This website uses scatterplots instead of lists to display products: https://www.productchart.com 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.
  • mirimir 7y ago
    Wow, that is amazing !!! But then, I love scatterplots.
  • porker 7y ago
    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)
  • oftenwrong 7y ago
    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 https://news.ycombinator.com/item?id=7465980 Also similar, and by another HN user: https://diskprices.com/ https://diskprices.com/ https://battprices.com/ https://battprices.com/
    • Fnoord 7y ago
      > https://diskprices.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.
      • 7y ago
• sksksk 7y ago
  http://www.dontclick.it/ http://www.dontclick.it/ is a super old (Flash) demo of a UI that doesn't have any clicking
  • daliusd 7y ago
    It felt so awkward...
    • collyw 7y ago
      I quite like it. Its seems like an advanced version of where menus pop up on hover rather than having to actually click.
• yakshaving_jgt 7y ago
  I used to work at a company that behind the scenes had to use a web UI in a weird/novel way for their system to work. This company's web UI would allow its users to initiate bank transactions. Nothing weird from the user's end. However, the company had to "approve" the transactions in real time, synchronously. The company could do all sorts of programmatic verification on the user, recipient, transaction, etc, but we had to actually physically press a button on the screen of a smart telephone to approve the transaction. There was no programmatic way around this. Some programmers at the company came up with a robotic arm which could be controlled programmatically, which would do the telephone screen pressing for us. I always thought that was pretty clever.
  • el_dev_hell 7y ago
    Easily the most amusing thing I've read all day. Was this compliant?
    • yakshaving_jgt 7y ago
      Oh, I couldn't tell you. For the same reason that I couldn't reveal the name of the organisation; to protect the guilty :)
• tomglynch 7y ago
  You might find some interesting examples by going through the websites here: http://brutalistwebsites.com http://brutalistwebsites.com They definitely dont all have weird UI, but some do.
  • nothis 7y ago
    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.
• JDiculous 7y ago
  Any examples of websites with ZUIs? Looks interesting!
  • dkersten 7y ago
    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.
  • sowrabh 7y ago
    Prezi* presentations - Zoom reveal is the most interesting feature of Prezi [0]https://prezi.com/product/ https://prezi.com/product/
  • PavlovsCat 7y ago
    Not a website, but pretty wild: http://eaglemode.sourceforge.net/ http://eaglemode.sourceforge.net/
  • philtar 7y ago
    https://conceptboard.com/ https://conceptboard.com/ I use it almost every day.
  • neurostimulant 7y ago
    Impress.js has been going strong for years and let you create zooming presentation decks with html and css. https://impress.js.org/ https://impress.js.org/
• boldslogan 7y ago
  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.
• Bilters 7y ago
  I would say the website which shows you and tells you what you're doing in the browser; https://clickclickclick.click/ https://clickclickclick.click/
• 8jef 7y ago
  Weird? Maybe. Super simple single page responsive website, no JS, CSS + HTML only: https://isabellegrell.com/ https://isabellegrell.com/
  • ryanianian 7y ago
    Love "low-tech" solutions to UI experiences. But to be sure, toggling the individual sections does use javascript (view-source -> see 'toggle_visibility').
    • laszlokorte 7y ago
      using the :target selector or invisible radio buttons it would not even need to
• tontonius 7y ago
  I like http://zombo.com/ http://zombo.com/ You can do anything at zombocom
  • iLemming 7y ago
    Flash, really?
• ggerganov 7y ago
  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 https://github.com/ggerganov/imgui-ws
  • helltone 7y ago
    This is wicked cool, nice work!
  • sbayeta 7y ago
    Nice!
• harryf 7y ago
  http://www.coboloncogs.org/ http://www.coboloncogs.org/
• rwmj 7y ago
  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=monolith.git;a=summary http://git.annexia.org/?p=rws.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=pthrlib.git;a=summary http://git.annexia.org/?p=c2lib.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.
  • regularfry 7y ago
    Sounds a little bit like Seaside: https://github.com/SeasideSt/Seaside/blob/master/README.md https://github.com/SeasideSt/Seaside/blob/master/README.md
  • zxcmx 7y ago
    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.
• zxcvbn4038 7y ago
  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.
  • kirkil1 7y ago
    That's why everything should be left at "the customer is always right".
  • osullivj 7y ago
    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!
    • marapuru 7y ago
• throwaway_bad 7y ago
  Dribbble has a really nice collection: https://dribbble.com/shots/popular/animation?timeframe=ever https://dribbble.com/shots/popular/animation?timeframe=ever Codepen has stuff you can actually see source code of: https://codepen.io/popular/pens/ https://codepen.io/popular/pens/
• khuknows 7y ago
  Cool interface for user flow diagrams: https://overflow.io/s/9ST7SX/ https://overflow.io/s/9ST7SX/
  • tim1994 7y ago
    Perhaps. Unfortunately it only works with Chrome or Chromium based browsers, it is barely usable in Firefox.
  • Xelbair 7y ago
    It sounds cool, but it is nigh unusable for performance reasons on firefox.. and i used my beefy dev machine to check the site.
  • juancampa 7y ago
    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
• Mattasher 7y ago
  One of the first websites I built (and one of the few sites left untouched for 20yrs) was a design experiment: http://lyca.com/ http://lyca.com/
• laumars 7y ago
  Javascript-less seems weird these days yet you can build most sites without really needing Javascript.
• avaer 7y ago
  My metabrowser [1] transludes webgl volumes into 3d space, and is navigated with FPS controls or VR. It’s ultimately a web site, but I’ve had chromium developers argue with me it’s not really “web”. [1] https://github.com/exokitxr/exokit-browser https://github.com/exokitxr/exokit-browser
• deleted 7y ago
  [deleted]
• hemmert 7y ago
  https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/
  • fogetti 7y ago
    "Good design is as little design as possible." - some German motherfucker
  • nick_vdb31 7y ago
    https://www.bettermotherfuckingwebsite.com/ https://www.bettermotherfuckingwebsite.com/
• mister_hn 7y ago
  I think the weirdest way is using React. I mean, it feels so unnatural for me, compared to the jQuery way. You have to download thousands of packages, keep track of various dependencies and their security holes, adding an overhead for auditing them. HTML5 with jQuery IMHO still beats everything in simplicity and getting work done fastly
  • louismerlin 7y ago
    I've been using Preact and the Parcel Bundler for my small projects, I'm able to build awesome stuff like I would with React, but with a few kbs of dependencies and no configuration file !
    • FlorianRappl 7y ago
      This is the way. Unfortunately, many people don't know about Parcel and assume that adding 20 Webpack plugins (plus their configuration) is a proper way.
    • flanbiscuit 7y ago
      +1 for Preact! Shout out to Svelte as well. If you can, don't use it to render entire pages. Use it for only the dynamic parts.
  • chrisweekly 7y ago
    Maintaining state by writing directly to the DOM is pretty fundamentally "weird" too, if you think about it.
  • madprops 7y ago
    Having dependencies might not be a huge problem. But I've made some pretty complex interfaces using nothing but jquery, handlebars, and other util libraries. All patterns thought-out and written by myself. Not once did I feel I needed something more complex. I get the impression all the hype followers of front end frameworks might not have the best idea of what they're doing. Especially when you see people commenting about frameworks like angular/react/vue making jquery obsolete, because one is just a syntax enhancement library for dom manipulation, the others are predefined workflow patterns. I guess if you have to work on teams, or more corporate-y stuff, frameworks make sense, because programmers can be easily added or replaced. But luckily I've had the freedom to work on my own projects by myself, so I get the freedom to define whatever structure I see fit. Fun story: Somebody lectured me on how I should adapt my application to use one of those frameworks because it would reduce the code size according to him. Months later he complained about how he did just that with his application only to realize it made it more needlessly complicated and bloated.
• deleted 7y ago
  [deleted]
• WillPontificate 7y ago
  I favor brutalism. A 1998 style design completely contained in inline code in the header. Using base fonts and features that are supported by all browsers. It has a unique capability: it loads quickly.
  • Xelbair 7y ago
    https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/
    • WillPontificate 7y ago
      I love it. The simplicity of Bill Gate's resume. "I build the biggest software company of its time" <Drops the mike.> I mean seriously, what more do you need? A list of coding languages that includes both Java and Javascript?
    • onemoresoop 7y ago
      Haha, yes, but thats just a static page not a website.
      • ahartmetz 7y ago
        Everybody knows that real websites are generated in the browser using JavaScript, right? Right???
• sktrdie 7y ago
  Using Behavioral Programming you can write UIs mainly using event traces. The state of the app is not really contained and managed in the usual way: it's based off of the state of many concurrent threads running at the same time. Here's a TicTacToe example: https://lmatteis.github.io/react-behavioral/ https://lmatteis.github.io/react-behavioral/
• guhcampos 7y ago
  There's this thing called Macromedia Flash...
• christophilus 7y ago
  These days, it's pretty novel to just use HTML and very basic CSS with no JavaScript.
  • non-entity 7y ago
    I've wanted to build an application like this for a while. Obviously nothing that would be actually be used, but maybe a personal tool or something. For many simple (probably most CRUD apps tbh) this would seem to work very well
• jaimex2 7y ago
  Back in the days of Flash the web was full of interesting and weird UIs with tons of art and animation. ie - https://www.youtube.com/watch?v=N-2sKZjawq4 https://www.youtube.com/watch?v=N-2sKZjawq4 https://www.youtube.com/watch?v=UHbQmqmmIFk https://www.youtube.com/watch?v=UHbQmqmmIFk Now its just the same boring Bootstrap/Material design cookie cutter crap everywhere.
  • alluro2 7y ago
    Ooh, 2advanced - as a high-school kid, I must have starred at versions of their "website" for more than 15h in total, in awe, and trying to soak in the pure awesomeness, hoping that it would affect how good early versions of my site will turn out :) Where "my site" was approx 200h of work over something like 15 revisions and complete redo's for a "portfolio" site with 1 design in it :D Good times - I think my parents would have preferred if I just hang out outside and did drugs at that point :D
    • jaimex2 7y ago
      Same, it really set the bar on what I would try and create during that time. I really liked Flash and its creative tools - I was really hoping the web would continue to make awesome sites with even better tools based on pure HTML. Mobiles pretty much destroyed all of it as we focus on making sites that can render well on any screen size now.
• Ruphin 7y ago
  I worked on a project before that explores using non-traditional UI on the web: https://overwebs.ruph.in https://overwebs.ruph.in (warning - sound and high bandwidth) It emulates a game UI, and uses background video to simulate physical movement when navigating between pages. It also incorporates some controls that are unusual for normal web applications like keyboard controls (shortcuts like 'Esc' to go back, 'Enter' to open chat). It's a pretty old and very experimental project so some stuff is in a semi-broken state. I should revisit it sometime and clean up.
  • hazzamanic 7y ago
    I really enjoyed navigating around this, good job!
• Doxin 7y ago
  Last time I checked Gtk has a web backend, meaning you can run basically any gtk app with the right environment variables and it'll pop open a browser with the app rendered pixel perfect into it. I don't really think it's useful as an actual web technology since you'd need to spawn a process, reserve a port, and keep a connection open for each and every user which seems like it wouldn't be workable. It's a neat trick though.
  • severine 7y ago
    It's called Broadway, and still going on: https://blogs.gnome.org/alexl/2019/03/29/broadway-adventures-in-gtk4/ https://blogs.gnome.org/alexl/2019/03/29/broadway-adventures... https://people.gnome.org/~alexl/broadway-gtk4.html https://people.gnome.org/~alexl/broadway-gtk4.html
    • Doxin 7y ago
      Oh awesome, I actually messed with broadway some yesterday on Gtk3 and while it works incredibly well it has some drawbacks to the point where I don't really see a use case so maybe you can enlighten me somewhat. The main downside I see is that every single keystroke needs a roundtrip to the server. Given a ping time of ~200ms that already makes it nearly unusable. So that leaves running broadway on localhost but then why use broadway at all? You might as well run it normally. Anyways it's a really cool backend and I feel like with a small amount of work it could actually be used for web-apps, with the amazing advantage of basically eliminating front-end programming entirely.
• ransom1538 7y ago
  Craigslist. Here is something novel: let html and browsers do their job. Let your browser process simple html at light speed. Let GET be idempotent. Let users be anonymous while getting information.
  • nvarsj 7y ago
    But then what will your rockstar engineers do?
    • joshmn 7y ago
      And how do you attract VCs!?
    • cies 7y ago
      Didn't some of them work on Perl itself?
  • AnIdiotOnTheNet 7y ago
    That doesn't sound like it will let someone spend <2 years building their resume without regard to the consequences before moving on to repeat the process at a different SV company though.
  • cabernal 7y ago
    Just give me web access to your FTP server ffs.
  • collyw 7y ago
    Hacker News is pretty minimal in terms of UI. I like it for that.
    • grenoire 7y ago
      It is, but unfortunately the HTML structure is quite horrible. It is built less like a web page and more like an Excel spreadsheet. Makes it terribly hard to parse automatically.
• superkuh 7y ago
  For the comment system on my website I wrote a perl script that tails the nginx logs for all instances of /@say/ in the file path of requests. Anything after a /@say/ is considered comment. So the UI for commenting on my website is like, http://mywebsite.com/somepage.html/@say/Hey http://mywebsite.com/somepage.html/@say/Hey, neat somepage content, guy. Some nginx redirects also included to take users to the comments page after submitting.
• RocketSyntax 7y ago
  Python UI: tkinter. Very popular on stackoverflow.
• jho406 7y ago
  I wrote a library for React, Redux and Rails. Allowing you to build SPA without APIs. https://github.com/jho406/Breezy https://github.com/jho406/Breezy Breezy's insight is that frontends are wildly complex due to the industry vertical (say.. childwelfare), so instead of shaping your state for business, breezy shapes it for content. Content being a header, footer, body as opposed to a post model or user model. This means each page is represented as a node in the Breezy Redux tree with its own header body and footer. On one hand, it is annoying to traverse the pages to make updates, on the other, I can look at any running application and make close-to-correct assumptions on how to update the store. After all, most applications regardless of industry vertical has a header, body and footer somewhere.
  • deleted 7y ago
    [deleted]
  • faizshah 7y ago
    This is actually really cool! I am definitely gonna try this this weekend, awesome work :) How complicated would it be to do something like this for Ember, is it tightly coupled to react and redux? I might give a try at forking it.
    • jho406 7y ago
      Yes give it a go and ask me any questions :). I was hoping someone makes use of it. It's tightly coupled to Redux, but not React. I don't think it will work great with ember, and I say that because Breezy doesn't require any router or models (again Breezy is about the content state as opposed to business models). It reuses your Rails routes much like Turbolinks.
• gameswithgo 7y ago
  This one is pretty weird, F# front end and back: http://websharper.com/ http://websharper.com/
• xylophone 7y ago
  How about exe in the URL? I can only imagine whats going on behind the scenes. https://www.example.com/searchUtility.exe?a=1 https://www.example.com/searchUtility.exe?a=1
  • rescbr 7y ago
    Compiled language CGI running on IIS. Unusual, but not that weird. Probably an old setup, nowadays the .exe would be hidden with a rewrite rule and you would be none the wiser.
• jawns 7y ago
  A while back, just for kicks, I built a site whose UI is essentially a slideshow that takes the form of a draggable map. The content is sort of like a PowerPoint presentation, but user interaction is more like Google Maps. http://www.youmightbe.pressbin.com http://www.youmightbe.pressbin.com It's not a particularly efficient way for users to traverse the content, but I think it's fun. The site gives an intro to Distributism, a "third way" economic model that is neither Capitalism nor Socialism nor a mishmash of the two.
• nathell 7y ago
  I haven't seen this on a page, but David Gelernter wrote about Lifestreams[1] in "Mechanical Beauty," which is a good read. [1]: http://www.cs.yale.edu/homes/freeman/lifestreams.html http://www.cs.yale.edu/homes/freeman/lifestreams.html
  • specialist 7y ago
    I've always loved the lifestreams metaphor, mental model. I spoke to Gelernter at a conference, ages ago. His wares were being compared to JavaSpaces. IIRC, maybe because he had done some work on Linda, or his lifestreams was implemented using same, or something like that. No one really grokked what lifestreams was about or how you'd use it. (Jini and JXTA suffered similar befuddlement.) Any way, I over enthusiastically encouraged him to repurpose lifestreams into a PIM (personal information manager, shows how old I am) unifying all one's communication and activities. To Gelernter's credit, he listened seriously and pondered. I'm still waiting. :)
• bullen 7y ago
  I tried mixing SVG and pixel perfect elements: http://fuse.rupy.se http://fuse.rupy.se It's really hard because it behaves differently with different aspect ratios.
• toddmorey 7y ago
  An impressive implementation of a web UI is Figma: Figma is written in C++ code then run in the browser by cross-compiling it to a subset of JavaScript known as asm.js. The asm.js subset is basically JavaScript where you can only use numbers (no strings, objects, etc.). This is all you need to run C++ code since everything in C++ is either a number or a pointer to a number, and pointers are also numbers. The C++ address space is just a giant JavaScript array of numbers and pointers are just indices into that array. Of course wasm is more performant as it matures, but they’ve been at this since 2015 and I’m impressed by how responsive the app is. https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/ https://www.figma.com/blog/webassembly-cut-figmas-load-time-...
  • bonoetmalo 7y ago
    That's fantastic- have you used the Ligma fork?
    • Vosporos 7y ago
      nice try
• dec0dedab0de 7y ago
  Weird UIs were what I miss the most about the web in the late 90s. There were no rules, and people were just winging it. I remember my friends making websites for their bands and bragging about how they made it so hard to use, that it was like a secret club if you figured it out.
  • nothis 7y ago
    Kai‘s Power Goo!
• intrasight 7y ago
  When you say "do", do mean "implementation" or "design"?
• haolez 7y ago
  I’ve always liked the approach of http://intercoolerjs.org/ http://intercoolerjs.org/. But I’m not a web dev and I don’t know the real reasons why it didn’t get traction :)
  • grenoire 7y ago
    I think the main reason is because you have to build your entire back-end based on the assumption that you are using intercooler. It requires the responses to be formatted HTML for anything more complex than changing the content text. It ends up making the whole approach much more complex than it is advertised.
    • NoGravitas 7y ago
      No, you really don't. What you do, is you write your back end based on the assumption that you have no JS at all, using a server-side MVC framework like Rails or Django or ASP.NET MVC. Make sure that your controllers and views are well-factored and that you're using partial views where appropriate. It's then almost trivial to apply intercooler to the front-end. In a lot of cases, you don't have to change anything at all in your controllers: just tell intercooler to select out the element you care about from the response (this is most appropriate when a lot of stuff on a page is changing at once, e.g. when you are PJAXing-away a full page refresh). In most others, you usually only have to tell a controller to check whether the request is being made by intercooler, and return a partial view rather than the full view. The point is that you already have the infrastructure that is generating formatted HTML responses (partial views), and you are now re-using it. If you were trying to write a client-side application from scratch while avoiding the easy path of writing a server-side MVC app, then yeah, I can see how it would be more complex than advertised. Source: I've built a couple of web apps using intercooler.
      • haolez 7y ago
        Would you still use it today? Sometimes I would like to write simple web apps behind a login page, but the complexity of mainstream frameworks (and their build systems!) makes it not worth it to me.
• Zarel 7y ago
  Pokémon Showdown uses a two-column layout on desktop, where you can drag panels between the columns: https://play.pokemonshowdown.com/ https://play.pokemonshowdown.com/ I don't have a good sense of whether or not users actually like it, though.
• dynamite-ready 7y ago
  I'm a bit confused by the title. Does the OP mean, 'tools and techniques to create (do) UI'? Or is he or she referring to the look and feel of the final product itself?
• pssflops 7y ago
  I've always had an affinity for weird image hotmaps at SuperBad[0]. [0]http://www.superbad.com http://www.superbad.com
• zitterbewegung 7y ago
  Django and SQLite for the backend and jQuery for the front end. And a $5 a month server from pythonanywhere.com. Also using a splash page from glitch.com using static html.
  • collyw 7y ago
    Out of interest did you ever have any problems with multiple users using SQllite? Its the common advice that it doesn't work well for multiuser scenarios but I am curious if it is actually a problem for small scale sites.
    • neurostimulant 7y ago
      Even 1 million page views per day is only 12 page view per second on average. Unless your website traffic is really peaky, I don't think you would get too much trouble using sqlite over real db server. And if you do have a problem, swapping db in django is really easy anyway. Most sites I manage usually only got ~10x increased traffic during their peak hour compared to their least busy hour.
    • zitterbewegung 7y ago
      Nope. My site I was working on was a startup but we didn’t have much traffic.
• nick_vdb31 7y ago
  A novel way would be to create a UI using a UI that exports the UI code. Using one of these no code tools like Webflow or Handoff. (Disclaimer: I'm the founder of Handoff. Check: www.handoff.design)
• meremortals 7y ago
  https://brutalistwebsites.com/ https://brutalistwebsites.com/
• deleted 7y ago
  [deleted]
• neurostimulant 7y ago
  This library allows you to compile your winform C# gui app into a set of html, js, wasm and dll files and run them in the browser: https://github.com/roozbehid/WasmWinforms https://github.com/roozbehid/WasmWinforms Completely blew my mind! Probably not practical but really make me wonder if anything is possible with webassembly.
  • lykr0n 7y ago
    I think I've seen this in use for the Travis County Tax Office, or at least the vehicle licensing part. Looked exactly like a WASM app, but running in IE.
    • exikyut 7y ago
      That might've been an ActiveX control.
• sp332 7y ago
  A classic from 1996. Olia Lialina (@GIFmodel on twitter) wanted to make a website that had the feeling of a movie, far before movies were feasible online. So she made My Boyfriend Came Back From the War. Here's a mirror: http://www.teleportacia.org/war/ http://www.teleportacia.org/war/
• bradenb 7y ago
  ZUI huh? Thanks for introducing me to that term. I didn't know there was a name for a type of interface I've created in WPF a number of times. We've always called it a "semantic zooming" interface. WPF makes this super easy, but turns out it's a little harder in the web, but we've almost matched the UX!
• ag8 7y ago
  The rotating cube interface [1], where each of six parts of a form is on a different face of a cube. [1] https://ux.stackexchange.com/questions/11229/is-this-rotating-cube-interface-user-friendly https://ux.stackexchange.com/questions/11229/is-this-rotatin...
  • some1else 7y ago
    It's like you're the only person who read the question.
  • ssully 7y ago
    I am losing my mind at this. I thought it would kind of interesting if it let me move the block around, but it has it's own rotation that you cannot control.
• dugluak 7y ago
  back in 2007 I joined a company in a department where they wrote tailor made websites for clients. One of the sites was built to generate reports for ~50 customer's accounts. It was a single webpage with 50 buttons having the account name on each one of them. So you would see a bunch of different shape buttons on the page, you click a button and you would be redirected to another website. It was internally referred as Death By Buttons.
• ssijak 7y ago
  Well, not that novel tech wise, but design always cracks me up https://www.lingscars.com https://www.lingscars.com
  • ilovetux 7y ago
    Thanks, I found this site on HN a while back but have been unable to find it again when I wanted to show the ascii art in the source code to a friend. I've bookmarked it now so I won't lose it.
• ehnto 7y ago
  Vimium may not be a web UI itself but it layers on top of them, and I have found it to be a way more efficient and concise way to navigate the web.
  • htfu 7y ago
    The issue for me is, since it hooks into the current page, hence doesn't work if it's blank, slow loading etc, you end up reverting to basic shortcuts often enough, breaking flow. Still well worth it just for d u j k and f, though :)
    • p_l 7y ago
      Vimperator had no such limitation, but the APIs necessary for such functionality had been jettisoned by Firefox
• license2e 7y ago
  Zircle: A frontend library to develop zoomable user interfaces http://zircle.io http://zircle.io Smart home dashboard example: https://zircleui.github.io/docs/examples/home.html https://zircleui.github.io/docs/examples/home.html
• l00sed 7y ago
  I stumbled upon this guy's site recently: http://cyberspaceandtime.com/Gaano9Y6KAU.video+related http://cyberspaceandtime.com/Gaano9Y6KAU.video+related Think it's been around for a while, but pretty fun and weird. :)
• mzzter 7y ago
  Back in design school, web portfolios could get pretty interesting. One novel way was to put up a collaborative google doc with some initial info that visitors could edit. An example of this was http://carlyayres.com/ http://carlyayres.com/ though it has since been updated to a non-editable page.
• carapace 7y ago
  I once made a calendar UI that used D3 to animate little circles that represented days. Switching from e.g. week to month caused the circles to flow to new locations. It had a pastel color scheme and it was really beautiful. Everyone who came into the office and saw it said things like, "I've never seen anything like this on the web." It was just eye candy really. It never saw the light of day. I begged them to put it in front of users or investors but no dice. BTW, if you like ZUIs read up on Jef Raskin's "Humane Interface" https://en.wikipedia.org/wiki/The_Humane_Interface https://en.wikipedia.org/wiki/The_Humane_Interface
  • fragmede 7y ago
    What were the investors' objections, if you don't mind me asking?
    • carapace 7y ago
      The founders wouldn't show it to potential investors because IIRC they wanted to have some users first. I don't remember why they wouldn't go live with a beta and try to get users. It was a weird little "vanity project" startup and they made a lot of weird decisions (from my POV.)
• atrilumen 7y ago
  I'm not ready to show it yet (#FML), but my interface renders everything in threads, including graphical controls, which yield messages. Nothing happens outside the context of a thread. So it leaves a log of everything that happened in that context. Graphical elements can go full-screen... but you don't lose connection to the thread that they appear in. It will tile these threads across all your (funky, heterogeneous) screens. I think this will help you to organize things, and homogenize and simplify your experience with those things across devices. Imagine actually knowing where everything is, and being able to see who, when, and why anybody touched it.
• brianpgordon 7y ago
  I think briefly it was considered cutting edge to have your page content be delivered as an XML document, with an accompanying XSL or XSLT file to mechanically translate the XML into a full-fledged XHTML page suitable for rendering in a browser. I even saw it once on some public website, I think maybe for a Blizzard game? The content XML looked great; very intuitive. The XSLT stuff for translating into XHTML, well, not so much.
  • amoerie 7y ago
    I helped maintain (and later started rewriting) a medical web platform that used XSLT for it's HTML exactly like you described. It was powerful for sure, but a nightmare to maintain, extend or add to. This in house framework was written before the advent of major web frameworks (at least in C# at the time) so I can understand where it came from. In fact, I still consider it an impressive feat of engineering. But XSLT to this day makes me shudder..
  • sesutton 7y ago
    I'm fairly certain it was World of Warcraft. Also my AT&T router's UI does this, which probably explains why it's so slow.
  • jacobush 7y ago
    I did it just on my own accord back in 2009 or so.
  • yesbabyyes 7y ago
    The Swedish election authority builds its website like this: https://val.se/ https://val.se/ XSLT is quite different and really powerful. I helped a friend once, he wanted to import his iTunes Db to Qlik for analysis. iTunes keeps its data, with number of plays and all statistics, in an XML file. Qlik has XSLT support. So it was just a matter of a couple of lines of XSLT to get all the data into Qlik. It literally went from a complete headscratcher to done with half an hour of studying MDN's XSLT documentation and some experimentation.
• mo1ok 7y ago
  I'd a big fan of some of the webGL experiments hanging around the internet. i.e. http://taotajima.jp/ http://taotajima.jp/
• justusthane 7y ago
  https://www.kickscondor.com https://www.kickscondor.com is really bizarre. Animated backgrounds, infinite scrolling, elements that are only partially visible until you mouseover them, and uses zooming interface for opening individual posts. Feels like a bastard child of GeoCities and modern web.
  • orthecreedence 7y ago
    Oh man, kind of reminds me of an animated version of Yvette's Bridal: https://yvettesbridalformal.p1r8.net/ https://yvettesbridalformal.p1r8.net/ Careful: the further you dig, the weirder that site gets. Made by some guy (a "world famous artist") who uses the site as some weird recruitment tool for his cult. You could spend an entire day on that site and not see all of it.
• miki123211 7y ago
  repl.it's jobs page[1] is basically a bash terminal running on the web. You navigate it by using standard commands like cd and ls, and read files with cat, more or similar. This is NOT a bash emulator, this is an actual bash, running in a Docker container somewhere. repl.it lets you build an app, in almost any language, on the web, and run it. If it's a console app using stdin/stdout, they even provide you with a terminal emulator. Well, that's some pretty impressive instance of dogfooding. [1] https://repl.it/jobs https://repl.it/jobs
  • mwcampbell 7y ago
    Have you found any practical way to use this web-based terminal with a screen reader? I haven't.
    • miki123211 7y ago
      OCR works, kinda sorta. The NVDA's plugin does its job pretty well.
• subpixel 7y ago
  I still love this chestnut from years and years past: http://noonebelongsheremorethanyou.com/00025 http://noonebelongsheremorethanyou.com/00025
• daosyn 7y ago
  Bong International [1] has done interesting and weird stuff. One of my personal favorites of theirs is bo en's website [2]. They have also done stuff for Bloomberg. [1] http://bong.international/ http://bong.international/ [2] http://bo-en.info/ http://bo-en.info/
• teknopaul 7y ago
  Apache/Nginx SSI + fcgiwrap + bash scripts. For little admin/monitoring ui for Linux servers this is crazy quick to build. Probably would not want such sites on the Internet. Pwnd instantly if you have shell shock If you have a good set of cli admin tools #youmightnotneedphp :)
• atannen 7y ago
  https://www.yhchang.com/ https://www.yhchang.com/
• pjungwir 7y ago
  Isotope is a pretty fun jQuery plugin: https://isotope.metafizzy.co/ https://isotope.metafizzy.co/ An idea I read about long ago is ring-based context menus. So instead of getting a square list of choices, one per line, you get each choice arranged in a ring around your cursor. So maybe Copy is at 1 o'clock, Cut 2 o'clock, etc. It would be easier to "target" your choice, and even easier once you learned the position of things. I don't know if this has ever been tried. Maybe in a game? EDIT: apparently this is called a pie menu or radial menu: https://en.wikipedia.org/wiki/Pie_menu https://en.wikipedia.org/wiki/Pie_menu
  • zimpenfish 7y ago
    Been around since about 1969 and been pushed many times - https://medium.com/@donhopkins/pie-menus-936fed383ff1 https://medium.com/@donhopkins/pie-menus-936fed383ff1 I seem to remember trying at least one X11 window manager that used pie menus back in the early 90s - but unless the apps have small menus with small labels, you just get chaos.
• spiralganglion 7y ago
  I created this SVG-based graph layout GUI [1] for our learning media website LunchBox Sessions [2]. The graph lets us visually express the prerequisites of each session. Using SVG meant I could do some fun animations to hide the load time when opening a session. [1] https://lunchboxsessions.com/explore/hydraulics https://lunchboxsessions.com/explore/hydraulics [2] https://lunchboxsessions.com https://lunchboxsessions.com
  • theossuary 7y ago
    That's pretty spiffy! How'd you do the layout? I was looking at elkjs [1] and the Klay layout algorithm to do something similar. [1]: https://github.com/OpenKieler/elkjs https://github.com/OpenKieler/elkjs
    • spiralganglion 7y ago
      Thanks! It's manually laid out using a drag-and-drop editor. I've never met an automatic graph layout algorithm I liked the aesthetic of.