Many developers know that they should use it but don't really understand why.
Moreover many developers simply don't use it because they don't understand what it does for them and trying to adjust size/layout on the <Image /> component is kinda finicky compared to sizing a standard <img /> element with css.
Of course, this quirky layout api is to prevent layout shift but again, many developers don't know this.
Another thing i think many developers don't know is that every next app has a whole hidden image service spun up along side it at an endpoint "/_next/image" that takes the images passed to the <Image /> component and optimizes them by adjusting size, quality, and format.
The <Image /> component even tries to load different sized images based on the size of the device viewing the page and nextjs does this by filling in the srcset attribute for you on the underlying <img /> element.
But all of this is too magical imo. The developer experience when trying to use the <Image /> component is bizarre and the abstractions are leaky. To utilize it well you need to understand the underlying concepts/impl anyway.
<img /> concepts including srcset, sizes, and webp are important to understand as a web developer, especially if you find yourself outside of the context of nextjs.
Binsta does all this stuff for you but more transparently so that you're in control and get to learn about web fundamentals. Binsta also can handle videos which is cool and works outside of the context of nextjs.
Aesthetics aside, we're interweaving a wasm port of ngspice with a microcontroller simulator and running realtime simulations all in the browser which i would say is innovative in several ways
The simulator under the hood is cool - someone even got a component to smoke. But the post leads with a pretty condescending title that focuses on aesthetic motivations by dumping (superficially) on everything else. Naturally people are going to focus on the usability of the interface and unfortunately it is really hard to use. Gratuitous 3D is not a good design choice for a number of reasons that others have elaborated in great detail.
Hard to use? what do you mean, you drag parts around and then you click a simulate button, that's it. You think configuring a transient analysis with 8 parameters is easier? I'm sure it's easy for people who are already familiar with it. But face it, no high schooler is going to be itching to start an electrical engineering career because they got their hands on a spice simulator.
Yeah it’s hard to use. It’s hard to drag parts around in 3D space with a 2D mouse. There are tons of ambiguities about targeting/accordances. A 2d orthocam view looking down on the bread board would be much easier to see and manipulate. There are several posts outlining issues with usability on this thread already. I think that the product is compelling but the interface still needs some work if it is going to be an improvement over 2004.
Indeed it's hard to drag things around in 3d which is why we restrict movement of parts to the XZ plane effectively making it a 2d editor in a 3d viewer.
Yeah. 3D view navigation is generally tricky with mouse/keyboard. The way it is setup here is good. The problems come in when there are also interactive elements in the view and this leads to a lot of usability issues. The mouse click/drag operation is overloaded and no feedback is provided to disambiguate different modes.
A few quick issues that I encounter with this (in trying to build a basic waveform generator):
* At a slant angle view a lot of components are blocked and cannot be clicked, one must change the view in order to target them.
* There is no feedback provided to disambiguate between when the mouse will engage in camera/view navigation vs component translation.
* No feedback is given in the hover state to let the user know when component they are targeting. (I frequently moved the whole breadboard by mistake).
* Component placement is very hard. The holes are small and all look the same. Offering some feedback about which holes would be connected would be much easier to use.
* Connections are hard to ascertain. Sometimes this requires a change of views, but also the bread board get cluttered. Offering some visual affordance for the connections could help make this superior to a physical equivalent and also remove the requirement for tacit knowledge (most people don't know how the rows/columns of a breadboard are connected.
* Wires get tangled. They currently take a linear path (in XY) between the two connections. Some research has shown that using curved paths is easier for the eye to follow (so something like a smooth step). Alternative offering some ability for the user to push/pull them apart or edit a bezier path might help her).
* Components have no flexibility. One must use wires to get the correct circuit topology which complicates things visually/ interactively.
Again I want to be clear that I think that this technology is really interesting and it has a lot of promise - especially since it is a pure web stack. I also think that it is not yet at the stage where it can arrogantly mock its rivals for using 15 year old UI component libraries.
Indeed, mixed signal simulations would be very useful, I reckon, for people dealing with sensors and that kind of stuff. Might as well simulate it before building it. It's currently possible with falstad's open source code base as well, you just have to program inputs and outputs but it's not very ergonomical let's put it that way.
In any case, I always encourage trying to be as open as you can with the software, this encourages collaboration/cooperation (and of course is just better for everyone, in most cases!).
I think (like others here) any slightly more advanced user would be more comfortable/productive in a 2D interface most of the time. But the option of having 3D for blinkenlights is sure nice :)
(also a great accessibility for people who can't afford to buy hardware for learning and experimentation but have access to a computer)
Yeah, so we started diode 3 months ago and in the beginning here we're focused mostly on making electronics more accessible to youth/beginners.
One major advantage of web based tools is shareability and we hope to see content creators writing articles with embedded diode projects so that tutorials can include inline interactive examples.
This is already common in the software world with tools like codesandbox and stackblitz, but not so much in the hardware world. Hardware tutorials often include fritzing diagrams, but we think the next step is interactive simulations anywhere and everywhere.
I would just like to say that this work is amazing.
I get what people are saying, but for people trying to dip their toes into electronics (and who maybe can’t afford the equipment just yet), this might be just the thing! I don’t mean to restrict the use cases, I just think a both/and world is just fine. And this is some excellent hacking.
Just don't want you to be too discouraged by the HN pile on. A lot of this is stuff to think about (and I'm sure you're doing just that!). But really, creating a new system like this is a massive achievement, and you should be proud of what you've done.
I agree with the goal, and agree with web based tooling, but the design-centric approach feels like dangling keys to keep my attention. Anyone who's attention can be captured with dangling keys doesn't have the attention to do circuits.
3d opens up a few extra possibilities for us, but i think there's definitely advantages to 2d as well and seeing every solder joint on the arduino board is just a waste of cpu/memory at the moment. We have some camera presets that let you position the camera directly overhead for a top-down view which effectively is a 2d building experience. We might create a dedicated 2d view if there's enough demand for it!
The overhead view might not be enough. Performance issues aside, if I take your sample and rotate the camera to the overhead view, the wires that power the Arduino overlap in a kinda confusing way. It’s even worse if you swap them around, with the wire colors randomly mixing in the middle (but it is also broken when looking at it from the side). A 2D-first design wouldn’t need to worry about it, but it would instead route the wires in a way that avoids overlapping wherever possible (and two parallel wires would be quite trivial).
3d does present some additional challenges, but we decided to go this route to reduce friction for beginners who might not understand how schematics or other abstract representations map to the real world circuits they're playing with
I'm still not sure what the 3D aspect in particular adds, though. Tools which work with physical wiring diagrams, like Fritzing, have been available for ages, and I don't think the 2D nature of those tools has ever been a meaningful obstacle to understanding.
a) You want to check that your components won't physically bash into something else you care about
b) You are designing something that operates at RF to mm-wave frequencies and need to worry (a lot) about the spatial location of the high-frequency components and nearby conductors / ground planes
c) You want to get an idea about airflow and heat dissipation on power electronics and/or modules (such as power amplifiers) that come with their own heatsinks (some SIPs do!)
Kicad and other bits of more hobby-orientated software that do a 3D render (such as diptrace) tend to do it for reasons (a) and (c). Software that does (b) properly costs hundreds of thousands of €$£ per year to rent and tends to have a UI that makes you scream with frustration at every possible moment.
Those are all good reasons to use 3D capabilities in a more capable tool, but none of them apply here. "Diode" doesn't even check for collisions between parts -- it'll happily let you stick a DIP 555 "inside" another 555, for example -- and it certainly doesn't do any RF or thermal simulation.
maybe you should spend your time writing software that teaches the beginners how to read schematics, thus enabling them to make progress toward their presumed goal of understanding and designing circuits, instead of giving them additional handicaps to overcome, such as having to use a user interface that is as confusing as a breadboard (if not more so, if the comments indicating that the pin-1 indicators are missing from the simulated chips are correct; in my browser the app wouldn't even load)
or at least software that gives you an error message when it fails instead of a blank white page
So ya know the little cards that twitter generates for you when you paste in a link?
Well I made a free little utility that lets you customize those cards!
When you create a link via relink.page you're creating a proxy link that redirects to some target url of your choice. But when you paste the proxy link into twitter it will generate a card from the metadata that you specify during the link creation process. Pretty neat, heh?
Moreover many developers simply don't use it because they don't understand what it does for them and trying to adjust size/layout on the <Image /> component is kinda finicky compared to sizing a standard <img /> element with css.
Of course, this quirky layout api is to prevent layout shift but again, many developers don't know this.
Another thing i think many developers don't know is that every next app has a whole hidden image service spun up along side it at an endpoint "/_next/image" that takes the images passed to the <Image /> component and optimizes them by adjusting size, quality, and format.
The <Image /> component even tries to load different sized images based on the size of the device viewing the page and nextjs does this by filling in the srcset attribute for you on the underlying <img /> element.
But all of this is too magical imo. The developer experience when trying to use the <Image /> component is bizarre and the abstractions are leaky. To utilize it well you need to understand the underlying concepts/impl anyway.
<img /> concepts including srcset, sizes, and webp are important to understand as a web developer, especially if you find yourself outside of the context of nextjs.
Binsta does all this stuff for you but more transparently so that you're in control and get to learn about web fundamentals. Binsta also can handle videos which is cool and works outside of the context of nextjs.