12 ms·
Ask HN: Can you share websites that are pushing the utility of browsers forward?
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?
- throwaway22717 4y agohttps://utcc.utoronto.ca/~cks/space/blog/web/PlainHTMLAppeal https://utcc.utoronto.ca/~cks/space/blog/web/PlainHTMLAppeal
- LeoPanthera 4y agoYou 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 4y agoThis 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 4y agoESP Web Tools uses WebSerial to allow users to install, update and manage firmware running on ESP microcontrollers: https://esphome.github.io/esp-web-tools/ https://esphome.github.io/esp-web-tools/
- est31 4y agoOn a similar note, you can flash your pixel devices from the Google website: https://old.reddit.com/r/GooglePixel/comments/raxrjg/til_you_can_reflash_your_pixel_devices_entirely/ https://old.reddit.com/r/GooglePixel/comments/raxrjg/til_you... You connect your phone to the desktop via USB, then navigate to the specific website. Then it uses a Web API to talk to the phone. I'm not sure whether it uses privileged access though.
- brokenmachine 4y agoSomething feels wrong to me that that only works in Chrome and Edge.
- notsrg 4y agoFigma 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 4y ago[deleted]
- mtoddsmith 4y agoAre you saying its an electron app running web assembly?
- lewisjoe 4y agoYes. 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 4y agoHaving access to the chrome dev tools during designing is very useful!
- dgb23 4y agoI 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 4y agohttps://penpot.app/about.html 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 4y ago
- jzox 4y agoThis is a nice example https://www.3dorderbook.com/ https://www.3dorderbook.com/
- langfo 4y agoThat's awesome!
- knotofvipers 4y agoThat is an awesome visualization. Hats off.
- is0tope 4y agoThanks 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 4y agoThe WebAudioModules (WAM) have some very cool demos if you're into music: https://www.webaudiomodules.org/wamsynths/ https://www.webaudiomodules.org/wamsynths/ I've been learning tone.js as of late
- carlbarrdahl 4y agoDo 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 4y agoI've been thinking about this too, and it would be cool. I'm pretty sure no such standard exists though.
- carlbarrdahl 4y agoDo you have any ideas on what such an api could look like?
- lioeters 4y agoIf I understand correctly, WebAudioModules is itself such an API, a proposed standard. https://www.webaudiomodules.org/developers/ https://www.webaudiomodules.org/developers/
- bambax 4y agoI'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 4y agoDon’t most of the newer browser versions of video conferencing products (Zoom, Teams etc) use WebRTC?
- kyriakos 4y agoPhotopea.com a browser based photoshop "clone".
- etaioinshrdlu 4y agoIt's somehow more true to the older photoshop designs than photoshop itself. I love it.
- SlackingOff123 4y agoThis 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.
- ericmsimons 4y agoWebContainers: https://blog.stackblitz.com/posts/introducing-webcontainers/ https://blog.stackblitz.com/posts/introducing-webcontainers/
- FractalHQ 4y agoCheck out WebGPU https://web.dev/gpu/ https://web.dev/gpu/
- fulafel 4y agoUtility of browsers and the web is delivering good content, and ability to link between unrelated content on unrelated sites. I'll nominate Wikipedia.
- greggman3 4y agoWebGL: 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 https://www.youtube.com/watch?v=mbxYG5Sb5RQ You can also go to https://earth.google.com 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 4y ago3D 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/ 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
- greggman3 4y agoThe 3D view has been available since at least 2016 https://www.youtube.com/watch?v=YHe3ag3i8v8 https://www.youtube.com/watch?v=YHe3ag3i8v8 AFAICT the announcement is saying they made it even more detailed than it already was
- amacneil 4y agoWe are building https://studio.foxglove.dev/ 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 4y agoThe 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 4y agoVS 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
- uxcolumbo 4y agoWow - this looks great. What's the tech-stack for this? Other than WebGL - what do you use for the UI?
- amacneil 4y agoReact + Typescript. Forgot to mention it’s open source so you can see for yourself: https://github.com/foxglove/studio https://github.com/foxglove/studio
- brrrrrm 4y agoIt’s particularly cool that this works on mobile
- Abimelex 4y agotake a look at https://3dit.de/ https://3dit.de/
- akamoonknight 4y agoI feel like this isn't exactly what you're asking for, but the storytelling in: https://www.sbnation.com/a/17776-football 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 4y agoThat was fun :) thanks for sharing!
- what_is_orcas 4y agoHoly cow. That was awesome. Thank you for sharing. Makes one think what the internet could be like in an alternate reality or something.
- deleted 4y ago[deleted]
- bondant 4y agoMany thanks for the link, I think that's the most interesting and original thing I've read (or experienced?) this year ! :D
- mattnewport 4y agohttps://www.shadertoy.com/ https://www.shadertoy.com/ is a community / sharing model that couldn't really exist without WebGL.
- Kosirich 4y agoshadertoy is awesome
- Jasper_ 4y agohttps://noclip.website/ https://noclip.website/ (doesn't tend to work well on mobile)
- whatatita 4y agohttps://webwormhole.io https://webwormhole.io and https://file.pizza 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 4y ago[deleted]
- Gigachad 4y agoFor 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 4y agoWhen 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 4y agoThese 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 4y ago> 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 4y agoWhat does the average user do to share a video?
- modeless 4y agoMy site https://james.darpinian.com/satellites/ 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 4y agoI had a mild jaw-drop moment when it showed my house on a starry night with the satellite passing overhead! Very cool website
- mywacaday 4y agoAmazing, 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!
- deleted 4y ago[deleted]
- zbuf 4y agoWe built https://cleanfeed.net/ 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.
- chrisdew 4y agoBlind Upload uses crypto.subtle to encrypt files in the browser, before uploading them to the cloud and displaying the key only in the browser. https://www.blindupload.org https://www.blindupload.org https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subtle https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subt...
- apignotti 4y agohttps://webvm.io 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 4y agoWill there ever be a public demo of CheerpX Flash?
- rikroots 4y agoThank 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/ https://scrawl-v8.rikweb.org.uk/ [1] - https://codepen.io/kaliedarik/pen/PopBxBM https://codepen.io/kaliedarik/pen/PopBxBM (Warning: demo will request to use your device's camera)
- xyzsparetimexyz 4y agohttps://github.com/expenses/mateversum https://github.com/expenses/mateversum uses all 4 of WebXR, WebGL, WebAssembly and WebRTC.
- frading 4y agoPolygonjs [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 https://polygonjs.com [2] https://threejs.org/ https://threejs.org/
- AshleysBrain 4y agoWe are building Construct, an entire game development IDE in the browser: https://editor.construct.net https://editor.construct.net
- SUPERCILEX 4y agoWe're building a small game that runs on the web: https://supercilex.github.io/grocery_bagger_9000/ https://supercilex.github.io/grocery_bagger_9000/
- rpsw 4y agoIO game https://krunker.io https://krunker.io. Fun game that you can start playing immediately as a guest, but also has some depth to it.
- SlackingOff123 4y agoOh, wow, this is really cool. Looks like a blocky classic counter strike. I think I played de_aztec for a few rounds. I'm not sure what the technology behind this one[0] is, but it's basically counter strike 1.6 in a browser. [0] https://play-cs.com/ https://play-cs.com/
- lament76 4y agoThe Telegram web client uses all sorts of features and a reimplementation of React. > The project incorporates lots of technologically advanced features, modern Web APIs and techniques: WebSockets, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, complicated CSS/Canvas/SVG animations, reactive data streams, and so much more. https://github.com/Ajaxy/telegram-tt https://github.com/Ajaxy/telegram-tt The dev is pretty much a genius.
- chakhs 4y agoany idea why they reimplemented react? to reduce bundle size?
- progrus 4y agoI hate to even ask, but for a security-focused product, is that a good thing? I think there is a valid argument “there is no good video experience on web otherwise” but that’s still a long list of less-than-fully-mature dependencies.
- ungamedplayer 4y agoWhat makes telegram security focused?
- progrus 4y agoUh, I guess they claim this?
- amadeuspagel 4y agoCoffeehouse[1], one-on-one voicechat with random HN users, uses WebRTC. [1]: https://coffeehouse.chat/hn https://coffeehouse.chat/hn
- akelly 4y agoI've seen a trend in popular open source hobby electronics projects in the last year developing progressive web apps to replace their native apps, enabled by the addition of WebSerial in Chrome/Firefox. For example, ESC-Configurator in the drone world and ESPHome and Tasmota in the home automation world. Arduino even has a web IDE that you can program your Arduino from now. For some reason though, Google decided WebSerial was too insecure for Android and disabled it, and Apple never implemented it in Safari. WebBluetooth is a thing as well but I think Bluetooth is too much of a pain, I haven't seen anyone use it yet.
- shifto 4y agoShoutout to WLED[0]. When I was able to flash my ESP with the latest version just from the browser I was kind of blown away. I was blindsided by it even though I have a lot of ESP projects myself and consider myself 'into the space'. [0] https://kno.wled.ge/ https://kno.wled.ge/
- chris_nielsen 4y agoThis falling sand game runs a particle simulation in rust compiled to web assembly and WebGL for fluid simulation calculated on the GPU (hope I remembered those technical details right I read it ages ago) https://sandspiel.club/ https://sandspiel.club/ Plus it’s strangely addictive. The creator even wrote a blog post describing how he made it. Press info on the top right to get an awesome breakdown of his approach.
- MauranKilom 4y agoImmediately thought of Powder Game, and it turns out that it's one of the main inspirations indeed (according to the info box)! https://dan-ball.jp/en/javagame/dust/ https://dan-ball.jp/en/javagame/dust/ I spent so many hours in that game. It also had ways to publish your creations, and people created anything from multiplayer coop games to entire ALUs in it. Good times, and thanks for linking the remake!
- poniko 4y agoPixlr.com uses webgl, wasm, file API, workers etc to push most performance out of the browser. We just piggybacked the new video API to encode a steam that we then use rust/wasm to put in a MP4 container. With that we get client side super performant video encoding, never seen anyone else do something similar yet.
- mminer237 4y agoI made Packet Loss Test using WebRTC for a rather unconventional reason to do something previously impossible in the browser: https://packetlosstest.com/ https://packetlosstest.com/
- bemmu 4y agoThe first time I saw someone share a 3D game from this website, I was confused: https://now.gg/games.html https://now.gg/games.html The graphics were good, so I though what a nice use of WebGL. But then I noticed them being blocky,.. in a video compressiony way. Could it be? Yes, server-side rendered web games, streamed to you in real time without requiring account creation. (The game I originally saw was https://now.gg/apps/paradyme-games/4102/solar-smash.html https://now.gg/apps/paradyme-games/4102/solar-smash.html but seems to be down at the moment)
- uggahaggauh 4y agoOooops, OT (not what you thought (really) but once there were a time...) > https://freezine.xyz/0/frustration/index.html https://freezine.xyz/0/frustration/index.html (-;
- son_of_gloin 4y agoDamn you, I just wasted like 20 minutes on this! :)
- javierluraschi 4y agohttps://hal9.com https://hal9.com helps data scientists build faster web applications. It uses WebGL and WebAssembly to process larger datasets, perform inference in the browser with TensorFlow.js, and enables running Python code with Pyodide.
- todd3834 4y agohttps://www.figma.com/ https://www.figma.com/ Is becoming the dominant design tool in the last couple companies I’ve worked for. I heard it used web assembly and canvas for a large portion of its app.
- marapuru 4y agoIt's no longer becoming. It is the dominant design tool. https://uxtools.co/survey-2021/#toolkit https://uxtools.co/survey-2021/#toolkit
- deleted 4y ago[deleted]
- tylertyler 4y agoI work at https://PaperlessPost.com https://PaperlessPost.com which isn't trying to melt anyones face with bleeding edge tech, it is blending these new features into a product to provide utility for normal people. For us this advanced stuff comes in based on the design you choose. Most of the "Flyer" designs have layers of animation, some examples that would use custom encoders and decoders implemented with WebWorkers, WebGL, WebAssembly along with some use of WebCodecs which is only available in Chrome now. https://paperlesspost.com/flyer/grill-time https://paperlesspost.com/flyer/grill-time https://paperlesspost.com/flyer/roll-the-dice https://paperlesspost.com/flyer/roll-the-dice. But other designs without animation would use 2d canvas in the editor and static images when they are sent out. In my mind the most advances stuff you will find out there is really about the "engines" that have been made in JS that might use some of these new APIs but without a sizable abstraction layer on top of them are likely not much more than a tech demo. Something like Google Maps or any of the web audio or graphics editors usually has way more "engine" type code with very carefully thought out performance considerations within it and the code that actually calls these APIs is often wrapped up and abstracted away as much as possible so that these APIs are called as little as possible.
- leohart 4y ago8th Wall https://8w.8thwall.app/welcome https://8w.8thwall.app/welcome runs WASM on the web to perform SLAM (Simultaneous Localization and Mapping) and add Augmented Reality to your space without installing an app. Everything runs on your device. Works in phone's browser and VR headsets' browser. Even has extra Computer Vision features like Image Target and face tracking as well.
- brrrrrm 4y agoThis is really cool. Is the SLAM engine open source?
- mvolfik 4y agoFor me as a student tinkering with whatever comes to hands (employment wasn't one of such things yet haha), I was pleased that it was very simple to make a web app work fully offline after initial load (including images and everything). You just go to the URL in your browser, without internet connection, and it loads. Not sure if the users are ready for this though
- jay_dhulia 4y agoWe built a virtual escape room experience as part of our final year project: https://interactive.calgaryconnecteen.com/youth-in-crisis https://interactive.calgaryconnecteen.com/youth-in-crisis. It was a fun project, built using A-Frame on the frontend. Feel free to check it out :)
- _8j50 4y agoCan someone also share the opposite of this for those of us tired of this?
- kleer001 4y agoI don't understand. It's Turing complete. You can do whatever you want. A browser is an Os. Sandboxed, sure. Is this a fashion thing? Going past 5,000+ years of text? Lots of colors, making sounds, motion. What else do you want? We're not getting smell. Haptics are kinky and nobody cares.
- brrrrrm 4y ago> We're not getting smell. why not? https://www.sciencedaily.com/releases/2018/11/181127092549.htm https://www.sciencedaily.com/releases/2018/11/181127092549.h...
- kleer001 4y agohaha cool! but seriously, smell is too low of bandwidth, too easy to get wrong, too expensive, and the chemistry is too hard
- aaaaaaaaata 4y agoGrapheneOS.org WebUSB-based phone-flash OS installer!
- mancunia89 4y agoMy startup, Infurnia ( www.design.infurnia.com) is a web-based architecture design software written in C++ and compiled in WebAssembly. We are also using ThreeJS for rendering, but migrating to WebGL next month.
- danhau 4y agoI'm curious, why are you migrating from ThreeJS to WebGL?
- erika22 4y agoIf you're looking to build custom web apps, I highly suggest this Frontlyapp, a no-code front-end development software. I’ve been using it for a long while now and it helps me to be more efficient and save a lot of my time. Check the demo apps here: https://www.frontlyapp.com/?r=hn https://www.frontlyapp.com/?r=hn