The Web is a wide audience. How do you design visually for the people who cannot see? In other words, how does this tool ensure that a site built using it remains accessible at WCAG2.1 A or AA level?
Show HN: A Visual IDE for React
61–70 of 148 posts
Re: Show HN: A Visual IDE for React
#62Is it really that tough to Cmd+Tab then Cmd+R? All jokes aside, good job. Creating tools to solve problems is always fun.
I even have the browser and code on the monitor at the same time. And with pretty much all modern web frameworks you have a dev server that automatically does hot module replacement, so you instantly see your changes without reloading anything yourself.
I've never seen a hot reload that worked fast enough to not be annoying.
React does it all quickly when all it's re processing is css but anything js related and it seems not to be able to treeshake down to bare minimum updates.
We're talking 750ms to 1.5s, and I admit it's still a marvel compared to things I used to have to deal with, but it's still enough to feel cludgy.
Flutter is another example of this. It's not _slow_ but if I'm sitting there waiting for even a bit I'm less likely to use the feature as an incremental tool rather than batch a bunch of things before looking or tabbing over.
Re: Show HN: A Visual IDE for React
#63I don't believe we need an IDE for React, it will end up dead like Dreamweaver or FrontPage. BUT, a Vscode plugin that visualizes self-contained components with all its styles intact would be nice: like I open MyComponent.tsx and in the right pane I see it visually, without running the actual webpage or server.
https://previewjs.com/ does that
It's there some kind of equivalent for Angular components ?
Re: Show HN: A Visual IDE for React
#64This is a pretty slick app! One thing I notice is that there are a lot of options in things like the insert menu with tags that aren't super popular. Maybe prioritizing more commonly used options would help with the UX? Also once you're logged in, there's no way to get back to the landing page without logging out.
Will make these changes in a few minutes, thanks for the heads up!
Also, is there a way to make more than one project/rename projects? Another UI thing, I think having those side panels expand on hover is a little distracting, maybe use a chevron to expand/collapse? If you have contact info on the page I'd be happy to give some more feedback, don't want to spam HN
Re: Show HN: A Visual IDE for React
#65Sorry, I could not go farther in the video after watching the narrator trying to accurately click on all those inputs, dropdowns etc. simultaneously saying "writing this in code would be annoying". In my opinion using mouse pointer to click things on screen is annoying when it comes to programming.
I think it comes down to preference, but ultimately I agree with you. There are a lot of misconceptions about "code", and when people talk about how code is either slow, hard, annoying etc, they're speaking in the abstract and not being specific. At the end of the day, "code" is really just typing what you want instead of dragging around a mouse. It's like saying "I like to use my mouse to copy and paste instead of typing cmd+c cmd+v, it's faster". It doesn't make any sense.
Re: Show HN: A Visual IDE for React
#66I'm a bit fed up with those "IDE" for web attempts. Every 9 Month or so , we get a new attempt at fixing Web Dev lack of Visual Feedback and productivity issues. The typical coder behind this type of project get "Mental Fatigue/ Coder Exhaust" after 6 Months as they generally ignore the complexity behind building such product and end up abandoning the project.... There is a google graveyard , but we should also build…
At face value this seems like it could apply to a bunch of different categories (e.g., another text editor, another todo list, another chat app, etc...)? Yes, most new software in every category fails, but every once in awhile one succeeds, and that's how we make progress. The failures along the way just seem like a necessary byproduct of progress.
>Yes, most new software in every category fails, but every once in awhile one succeeds, and that's how we make progress.
+100
Also, I'm rather uncomfortable when a "Show HN" gets dumped upon - furthermore with no actual specific criticism, let alone advice on how to improve.
What happened to that "Be kind. Don't be snarky." from the guidelines?
Re: Show HN: A Visual IDE for React
#67https://utopia.app/ also does this
Utopia doesn't "also" do this, they are doing something far more useful (bidirectional visual editing of the code) that could actually end up making its way into many people's workflow (it's just a shame that they don't support Typescript yet).
There are plenty of drag and drop visual React builders, but as long as they follow an unidirectional export-once workflow, they are about as useful as a Figma mockup.
Re: Show HN: A Visual IDE for React
#68I don't believe we need an IDE for React, it will end up dead like Dreamweaver or FrontPage. BUT, a Vscode plugin that visualizes self-contained components with all its styles intact would be nice: like I open MyComponent.tsx and in the right pane I see it visually, without running the actual webpage or server.
Dreamweaver has existed for 25 years and it’s still around.
Re: Show HN: A Visual IDE for React
#69Cool project, congrats you finished it up to this point :)
As some people pointed out, web developer demands are pretty specific and vary from person to person. To fulfill most of them would mean immense efforts.
In contrast to that, I think your idea could thrive as a `boiler plate` component generator. Add an export button that just hands you the component code and you got me hooked for some quick components.
Re: Show HN: A Visual IDE for React
#70Sorry, I could not go farther in the video after watching the narrator trying to accurately click on all those inputs, dropdowns etc. simultaneously saying "writing this in code would be annoying". In my opinion using mouse pointer to click things on screen is annoying when it comes to programming.
I find mocking things up is better done visually. Whether that’s pen/paper, Illustrator, or a GUI builder like this. I think they serve the same purpose. The only difference is that with this, you’re closer to getting a final asset you can tweak with code. GUI builders have a long history. But the best of them produce code you can commit to git.
But, I guess the real question of usefulness is how good (or sane) the generated code is.
To use an example from a different comment, if it is closer to Dreamweaver, that at least produced workable code. If it is closer to FrontPage… good luck.