HN Explorer

Ask HN: Can you share websites that are pushing the utility of browsers forward?

188 points by brrrrrm ↗ HN
I'm aware of the relatively recent addition of things like WebXR, WebGL, WebAssembly, WebRTC, but I feel I am woefully out of touch with the most compelling and useful examples of these novel standards.

Do you have any eye-opening websites that really demonstrate some of the true power of the modern web?

134 comments

[ 2.9 ms ] story [ 131 ms ] thread
throwaway22717
https://utcc.utoronto.ca/~cks/space/blog/web/PlainHTMLAppeal
LeoPanthera
You are being downvoted but I think this a shame, because I think you are right. Change isn't always progressive, and I do believe, as a previous HN post discussed, in the utility of separate "document" webs (as our current web is designed) and "application" webs. (Which has been hacked on top of our current document model, and not without problems.)
cmeacham98
This post isn't for sharing opinions on new web technologies, it's for sharing examples of them.

They are being downvoted because their post is wildy off-topic.

balloob
ESP Web Tools uses WebSerial to allow users to install, update and manage firmware running on ESP microcontrollers: https://esphome.github.io/esp-web-tools/
brokenmachine
Something feels wrong to me that that only works in Chrome and Edge.
notsrg
Figma is written in C++ and compiled to web assembly. All the UX designers I know are using it because it's pretty powerful for a webapp.
[deleted]
(comment deleted)
mtoddsmith
Are you saying its an electron app running web assembly?
lewisjoe
Yes. I found it weird too. They put so much effort into making their app performant and then for the desktop app, wrapped it into an electron shell which is weird :)

I guess except the designing canvas, all the UI controls are built over DOM/Javascript and they needed a quick way to take them all into desktop. But I did expect more from Figma :)

lmiller1990
Having access to the chrome dev tools during designing is very useful!
dgb23
I think Figma being a browser web app is one of the core reasons why it’s outpacing alternatives both in terms of features and UX. It’s a remarkable feat.
oever
https://penpot.app/about.html is an open source competitor to figma. I'm not a designer so I cannot speak to how good it is.

It was built to scratch the itch of the company Kaleidos.

lordofgibbons
Figma is cool, but every time I open a Figma link, my beefy laptop turns into a jet engine on takoff thrust.
have_faith
I have figma open all day, never noticed it have any effect (M1 MBP)
jjice
Also M1 MBP, but I only use Figma when consulting a design, not creating one. It's definitely beefy (higher ram usage), but I assume it's electron based and has all of chromium running underneath it. I don't think that's a big deal for things like Figma that are usually someone's primary (or a close second) application. Hasn't been a serious issue for me, but I definitely close it when not in use instead of letting it hang around.
jzox
This is a nice example

https://www.3dorderbook.com/

is0tope
Thanks for sharing it! I made this a few weeks ago as part of a blog article and was really impressed how easy three.js was to use. Overall much easier to get into than using C++ and OpenGL where the window setup required several hours to set up back in the day.
FinalDestiny
The WebAudioModules (WAM) have some very cool demos if you're into music: https://www.webaudiomodules.org/wamsynths/

I've been learning tone.js as of late

carlbarrdahl
Do you know if there's similar to a VST standard for WAM?

Would be interested in the possibility of online DAWs that can import plugins and open up for marketplaces where developers can build and publish these.

bambax
I'm doing a ShowHN right now for a webapp to learn music sight reading: www.babeloop.com

It currently uses Tone.js for timing accuracy. Tone.js is pleasant to work with, but directly interacting with web audio context isn't too hard either, so IDK if the tradeoffs are really worth it.

mr_toad
Don’t most of the newer browser versions of video conferencing products (Zoom, Teams etc) use WebRTC?
kyriakos
Photopea.com a browser based photoshop "clone".
etaioinshrdlu
It's somehow more true to the older photoshop designs than photoshop itself. I love it.
SlackingOff123
This has to be my favorite webapp ever. I don't use it super often, but every time I do, I can't notice how amazing it is. I used Photoshop in the past so I'm familiar with the available tools and the menus and the hotkeys and this webapp emulates that so closely, it's astounding.
fulafel
Utility of browsers and the web is delivering good content, and ability to link between unrelated content on unrelated sites. I'll nominate Wikipedia.
greggman3
WebGL: Google Maps is arguably the #1 application. It's used to draw the line drawing based maps and to re-draw them with different things emphasized depending on your needs (as well as rotate, scale, zoom, smoothly)

But also, of course the fact that it goes 3D. It feels like they've de-emphasized this feature because I suspect few people use or or even know it exists but demo

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

You can also go to https://earth.google.com

AFAIK it's the same tech (not sure) but a UI for various kinds of exploration instead of directions

WebRTC, Google Meet uses WebGL/WebAssembly to provide the filter effects where your background is blurred out or replaced. AFAIK that doesn't happen on the server. It happens locally and then the video with the effects applied are sent over the net via WebRTC.

SpaghettiX
3D Buildings in Google Map like that was announced a few days ago at Google IO, it's called immersive view. https://blog.google/products/maps/three-maps-updates-io-2022...

I don't think we can actually use it yet though.

Edit: that video might be of a different 3D feature I have no idea of

amacneil
We are building https://studio.foxglove.dev/ which is a visualization tool for robotics. Click “Explore sample data” to see a demo.

Uses WebGL and some WebAssembly.

alephnan
The left nav and menu is reminiscent of VSCode. I'm not accusing the project of plagiarism. I think more standardization, especially with menus, instead of reinventing the UX wheel for every project is a good thing. Is the code for the left nav widget open source? I want to use it, too.
Macha
VS Code is derived from the open source codebase (but note the official binaries and some other extensions are closed! Notably the remote extensions and some of the debugger stuff needed for the C# and python extensions), but I don't believe individual components of it are published in a consumable format anywhere
brrrrrm
It’s particularly cool that this works on mobile
akamoonknight
I feel like this isn't exactly what you're asking for, but the storytelling in: https://www.sbnation.com/a/17776-football feels like it opened up new my thoughts on how something could be communicated via the medium of the Internet and just made me think to some extent how woefully underutilized the browser/internet has been used as a story telling medium (at least to my limited experiences of these things)
nvegater
That was fun :) thanks for sharing!
what_is_orcas
Holy cow. That was awesome. Thank you for sharing.

Makes one think what the internet could be like in an alternate reality or something.

[deleted]
(comment deleted)
bondant
Many thanks for the link, I think that's the most interesting and original thing I've read (or experienced?) this year ! :D
whatatita
https://webwormhole.io and https://file.pizza both use WebRTC for p2p file transfer. They differ quite a lot in UX but both are really useful: it's 2022 and sending files to one another still seems to be a pain without tools like these.
[deleted]
(comment deleted)
Gigachad
For the average user, file sharing is already solved. If it’s a small file, you just send it via an IM app. If it’s a large file, you upload it to cloud storage and share a link
mguerville
When the file is very large and time if of the essence there’s value in the p2p share as I imagine the combined time of sender and recipient is less than the purely sequential steps of party A uploads THEN party B downloads. But for most use case I agree it’s a solved problem
5560675260
These common ways could see a lot of improvement. Everything but tiniest files would require a paid subscription from IM app provider. And sharing via cloud is awkward and slow.
have_faith
> average user > you upload it to cloud storage and share a link

I'd wager a miniscule amount of people know how to do this.

brokenmachine
What does the average user do to share a video?
hjkl0
They took the video on their phone, so they share it on WhatsApp.

But if they don’t have the video on their phone, they film it with their phone and then share it on WhatsApp.

That’s what the average user does.

ZoomZoomZoom
Solved problem? Most free-tier cloud storages won't even hold a half-hour long 4k video.

Uploading Gigabytes of media via p2p takes minutes nowadays, but you have to either pay or use p2p software to actually send it to another person.

Gigachad
If you are sharing a long video file you likely either work with video or are sharing pirated media. If you work with video then the cost of cloud storage is nothing. It’s like $2/month for hundreds of gb storage which is more than worth the price. P2P is unworkable, you have to coordinate with the receiver to send the file while cloud storage is async. You upload it and email the link and your done.

Skype file transfer used to be p2p and it was a huge pain. If one side closed their laptop or something it would just kill the transfer.

ZoomZoomZoom
1. Your assumption is wrong. I use my Q2n-4k, my friend uses his GoPro, we want to share our recordings once in a while.

2. Your assessment of P2P being "unworkable" is just mistaken (besides the obvious fact that two machines have to be online at the same time). Syncthing works great, wormhole worked fine, filepizza worked fine. I remember long time ago I simply used a magnet with a bunch of open trackers attached and it worked wonderful.

modeless
My site https://james.darpinian.com/satellites/ uses WebGL, Web Workers, WASM, Service Workers, Notifications API, Geolocation API, probably some other web platform features I'm forgetting.

The use of workers and WASM is not obvious, but on page load it takes the current orbit parameters for every orbiting satellite that is potentially visible anywhere on Earth and calculates the future position of each satellite every few minutes for the next 5 days, and then checks each future position for visibility from your location (accounting for sun angle, earth occlusion, sky brightness etc), all client side before page load finishes. WASM allows me to use the canonical satellite propagation tools (SGP4, written in ancient C translated from Fortran) and workers let me use multiple cores and not block the UI too much.

parabyl
I had a mild jaw-drop moment when it showed my house on a starry night with the satellite passing overhead! Very cool website
mywacaday
Amazing, minor nitpick it shows the ISS as visible over Ireland at approx 9pm tonight, pretty bright in Ireland at that time at this time of year, will check and report back if it was visible. Great work, you have amazing talent!
modeless
Thanks! ISS is very bright; bright enough that it is sometimes even visible before sunset if you know exactly where to look! It's fun to try to spot it in a bright sky although it can be difficult. Let me know if you find it!
mywacaday
Cloudy night, will try again soon.
mywacaday
Got a great view of the ISS last night just after sunset, thanks!
modeless
Cool! Glad it worked for you!
frading
This is spendid. I've used other tools to spot the ISS previously, but this one makes it so intuitive. Great job.
Terry_Roll
Sorry Your browser does not support Web Assembly. Please upgrade your web browser. I recommend downloading Chrome.

Its the latest MS Edge, but a handy trick you might be interested in is to use detectable bugs to fingerprint a webbrowser. So Internet Explorer 6 might have a browser detectable javascript bug that 8 didnt have, or a bug might exist in IE but not firefox and if someone changed their browser agent ie firefox pretending to be IE, it was still possible to workout what the browser was and deliver code accordingly. :)

Of course some web browsers could be like looking at A Scanner Darkly character!

brailsafe
Do you have WASM enabled? A cursory search indicates it's not on by default
Terry_Roll
I know its off, I have lots of things switched off, my point was the message wasnt that useful and one way you could improve the message to guide potential visitors to help them switch it on, if they wanted to, was to use the bug detection to really test if the browser is what it say is before giving the guidance to switch on stuff in a browser. Over engineered perhaps, but still valid.
brailsafe
I suppose technically it's imprecise, but erring towards cautionary rather than suggesting they switch stuff on. Someone comfortable with switching stuff on might go looking for it if they know what's up.

I used to do more precise messages like you're suggesting, but such a make or break feature I'd probably just be vague about it. MS edge incidentally is fine. It does what it does.

anyfactor
Wow this is incredible. Can you add geostationary satellites too?
JshWright
That seems out of scope for a site dedicated to visible satellite passes. Geostationary satellites are way too far away to be visible, and don't move relative to the observer.
djlewald
when I grow up, I want to be a dev like you lol
a_square_peg
Holy cow, this is amazing. Absolutely fantastic!
amelius
It seems there is a bug. I see ISS passing by, then I rotate the view a bit, and suddenly ISS passes again, all within a few seconds.
MisterSandman
That isn't a bug, the ISS isn't passing by at that moment, the time it will pass over you is at the top. The looped video is showing you how the ISS will pass over you. It isn't a live feed.
sanketpatrikar
Not sure why it's happening, but ISS passes overhead for me multiple times every few seconds. I'm in India. Firefox 100.
modeless
I'm not quite clear on what the issue is. By design the site shows the next satellite to pass over, and it loops every 20 seconds like a looping video as suggested by the seek bar and play/pause button at the bottom. Are you saying that it is looping faster than once every 20 seconds?
alucardo
Fantastic, 3 minutes after clicking on your website, i was watching the ISS passing by at my window.
AndyJado
how about google earth
[deleted]
(comment deleted)
[deleted]
(comment deleted)
zbuf
We built https://cleanfeed.net/ which is an online studio for pro audio.

Chances are if you enjoy radio, podcasts or movies, especially during the pandemic, that you've listened to something produced using Cleanfeed. In many cases you wouldn't even realise that co-host or guest is remote.

bozhark
Just dropped zencastr, looks like you’re comparable.

Kind of

skoocda
What made you drop zencastr?
apignotti
https://webvm.io is our public demo of CheerpX, an x86 virtualization technology made with WebAssembly.

At Leaning Technologies we have been using WebAssembly pretty much from day 1 as part of our C++ and Java compilers. CheerpX is our latest product, and we think it really pushes the boundaries of what is possible in the modern browser.

easrng
Will there ever be a public demo of CheerpX Flash?
rikroots
Thank you for giving me the opportunity to showcase my JS canvas library, Scrawl-canvas[0], the aim of which is to help developers build responsive, interactive and more accessible canvas-based demos, infographics, art etc for their websites.

While the library is entirely 2D-canvas oriented and doesn't use any ultra-new tech like WebGL (or even less-new tech like web workers), it does play nicely with WebAssembly-ported tech such as ML models from MediaPipe[1] and TensorFlow...

[0] - https://scrawl-v8.rikweb.org.uk/

[1] - https://codepen.io/kaliedarik/pen/PopBxBM (Warning: demo will request to use your device's camera)

frading
Polygonjs [1] uses WebGL (via threejs [2]) pretty heavily. It allows you to create interactive WebGL experiences, without coding, only by connecting nodes. So you can set up geometry processing, particle systems, custom shaders or object behaviors.

[1] https://polygonjs.com

[2] https://threejs.org/