6 ms·
Show HN: Moebius – HTML5 Canvas Drag and Drop Website Builder (macOS Alpha)
- baus 9y ago> Moebius is built with Javascript. All rendering is done through the canvas element. Does this mean the entire UI is drawn using the canvas element, which then outputs a standard HTML/CSS webpage?
- jamarante 9y agoAs of right now the GUI you are looking at is built with HTML and CSS (later on this will change). But what renders the page in the application's canvas and the published webpages is all within the canvas element.
- jlebrech 9y agoplease have it output to wasm/canvas. no html/css/js :)
- jamarante 9y agoHaha yup. The interface you are seeing now is not the final one, you can be sure that in the future the application is going to be using wasm. Just like the guys at Figma are doing.
- mwcampbell 9y agoNo, please don't! The HTML DOM behind the canvas is necessary for accessibility.
- jamarante 9y agoI was referring to the app not the published web pages. Hehe
- jlebrech 9y agoif you want accessibility you can build it natively accessible. keep the interface simple.
- mwcampbell 9y agoI agree with you in principle. But, needless to say, most developers don't design for accessibility above all else. We who care about accessibility need to meet developers and designers where they are, helping them incorporate accessibility into the way they're already building the UI or content, rather than tell them they need to do it a completely different way.
- afandian 9y agoYou mean the text renders on a canvas in the final page? How do you deal with, for example: - partially sighted users with screen-readers - resizing text and/or zooming in? - keyboard controls. E.g. can I find / highlight / copy text? can I tab between links and elements? - scrolling, especially on resource constrained browsers. Do you have a massive framebuffer? what about long pages? animation and region invalidation? - script blockers
- jamarante 9y agoWow, these are some good questions. - "partially sighted users with screen-readers": For example, the final interface will expose a set of controls to set attributes that help screen readers do their jobs. The HTML structure is pretty much determined by the order of elements inside the content panel. - "keyboard controls. E.g. can I find / highlight / copy text?": The canvas piggybacks from the generated HTML. So for example if the user presses the tab key to alter the input focus in the page, with a listener the changes can be reflected on the canvas depending on which element is focused. DOM elements are linked to the entities being rendered in the canvas. Text picking with the mouse would be handled by queying the scene graph and mirroring how text gets highlighted in the browser. Copy and pasting would be handled by the Clipboard API. - "scrolling, especially on resource constrained browsers. Do you have a massive framebuffer? what about long pages? animation and region invalidation?": While the amount of elements in the page will correlate directly with the amount of memory that page is consuming. We have to keep in mind that most (if not all) of the things that are rendered are being treated as quads. This isnt a 3D mesh. Infinite scrolling is a feature I do have in mind implementing, but I don't have an specific answer for that yet unfortunately. Region invalidation (I'll assume you mean with space partioning) would be handle with the scene graph. Could you tell me more specifically what you want to know about animation? - "script blockers": If the user is blocking scripts in the browser then all he will get to see is plain HTML unfortunately. AFAIK this is something that cannnot be stopped. Thanks for the feedback! If you have more questions keep asking them.
- neilsimp1 9y agoMaybe I'm missing something. If there's html behind the canvas that elements on the canvas are mapped to, why render everything in the canvas at all instead of just using html/css?
- neoberg 9y agoWhat about accessibility?
- jamarante 9y agoPlease refer to the reply I gave afandian and let me know if you need something more specific.
- castis 9y agoBuilt with javascript as in, it's an electron app.
- jamarante 9y agoYep.
- thrownaway954 9y agothe look and feel reminds me of GrapesJS: http://grapesjs.com/ http://grapesjs.com/
- jamarante 9y agoAh, have never seen this one before. Thanks!
- thrownaway954 9y agoI could only imagine what you and the grapejs author could come up with by working together. You both are extremely talented and instead of working on separate projects, maybe there could be some sort of collaboration between you guys? In the era of electron applications, maybe just wrapping grapsjs inside electron could give you the platform version of an editor that you are trying to achieve? In any event, I wish you all the luck in the world.
- jamarante 9y agoAs of right now there are no plans to integrate this app with others. Thank you for your feedback! Means a lot!
- tomcam 9y agoWow! That's a seriously big project I never heard of!
- afandian 9y agoI'm intrigued by the HTML output of this, especially given the "no CSS" promise and scare-quotes around "standards". I'm not sure if the "save" or "publish" menu items are meant to do anything, as it's alpha, but nothing happens when I click them.
- jamarante 9y agoYeah to be honest, the demo is more of a vertical slice of the application itself. I still have not exposed that feature in the demo, it is like 80% finished. There is a HTML Export video that shows a demo of that feature.
- pjmlp 9y agoYet another step forward to Web "Delphi", good luck!
- jamarante 9y agoThanks! :)
- afandian 9y ago> Everything is design centric What kind of design? Poster design? Graphic design? Industrial design? ... Web design? > designers with no previous web development experience I don't want to sound elitist, but I would argue that designers should learn about how the web works, or they're not qualified to design for the web. Issues like pixel-perfect vs flexibility, the constraints of a browser vs the freedom it gives to a wide audience. The fact that it's not just for able-bodied people using off-the-shelf browsers. If designers can learn all about typography and layout, they can surely learn about DOM and CSS (or some sub/superset). Even if it's a bit messy. > in a code free environment Knowing the mental model is not the same as writing code. I've worked with some great web designers, and the ones that produced the websites that looked, felt and worked the best were the ones that could prototype their designs in CSS. I've only had a brief play with this, and it does look very cool. But you can give a non-developer a good experience by creating an explicit and mental model that reflects the model of the web. The "content" view does look like it has a well thought-out consistent hierarchical semantic model (i.e. not just smushing lots of things onto a page). But if it isn't a superset of the Document Object Model, you're going to be fighting the browser, not working with it. If you're doing this, you're on the same trajectory as designing in Photoshop and exporting image maps. Or Making Macromedia Flash sites. Or distributing pages as PDFs or PNGs.
- mwcampbell 9y ago> not just for able-bodied people To expand on that point, my concern with WYSIWYG tools of all stripes is that they lead designers (at least inexperienced ones) to assume that what you see is all that matters. Has the developer addressed the accessibility of these websites with screen readers, or even with large fonts? As for the "off-the-shelf browsers" part I didn't quote above, AFAIK, only a very small minority of blind and low-vision people do not use mainstream browsers these days. The overwhelming opinion among blind and low-vision computer users seems to be that adapting mainstream applications, via screen readers and magnifiers, is much better than designing alternative applications just for us, because those alternatives can't keep up with mainstream developments. In other words, we don't want "separate but equal". Edit: Thanks jamarante for addressing the accessibility concern elsewhere on the thread.
- GEBBL 9y agoJust want to say this looks fantastic and keep at it :)
- jamarante 9y agoMeans a lot thanks!!!! <3
- gvoncheap 9y agoAn absolute gem of software. Please take note to the issues listed in the comments and keep moving forward. Sign an NDA with another developer and get some help. This can very well open a new door for web design. I would also consider the costs of upkeep and extensions and factor that into your price, $50 is very cheap. Great Job!
- jamarante 9y agoThanks!
- jbob2000 9y agoThis is a tool for prototyping, at least, I hope that's all it will be used for. Otherwise, this is a step backwards. No large company will use this in production because it completely kills accessibility. You have no idea the lengths I go to for accessibility, at least 50% of my development hours is programming for accessible users. Also, canvas will kill mobile batteries because canvas rendering taps the hardware more than normal DOM rendering. Kill this now, it's flash all over again!
- mwcampbell 9y agoThank you. Of course, small companies and startups should care about accessibility too.
- jamarante 9y agoI agree.
- jamarante 9y agoLol at the last statement. I've also worked with accessibility previously, I understand it takes a lot of fine tuning. Thanks for the feedback!
- amelius 9y agoNice, but does it allow multiple people to work on a website simultaneously?
- two2two 9y agoThis looks promising. I'm surprised there has been no mention of Adobe Muse in the comments thus far. Adobe Muse is a similar WYSIWYG website design tool. One which I've used extensively; both pre-responsive and post-responsive versions. Adobe's Muse has been a blessing and a disaster for me as a designer. I've had to, on two separate occasions, refund deposits for projects I couldn't complete because I reached bugs in the software that would prevent my designs from working properly. Once an "update" is released, sometimes fixing these bugs, new bugs are introduced. I have walked away from the software altogether because it literally reduced my net pay due to unforeseen hours spent chasing issues outside of my control. Not a great feeling when you're stuck in subscription model. With that said, I welcome and support software competing with Adobe's design tools.
- jamarante 9y agoOuch! That hurts. I have been there too I know how it feels. Thanks for your feedback and support. Means a lot.
- joshribakoff 9y agoI built an editor based on canvas and DOM, eventually you run into problems with canvas that the dom already solves. At that point your options are reinvent the wheel (for example write logic to draw tables with lines and the drawing API), or float DOM elements over the canvas. The latter gets hairy with z index as canvases block mouse and touch events from "passing through" to elements behind them. There are of course hacks like invisible dom elements that toggle pointer-events on the canvas, but you have to ask yourself if the problem you're trying to solve is really worth these hacks/reinventing the wheel. If you're not letting users draw with a paintbrush, you probably don't need canvas but that's just my opinion. Canvas is also a bit of a leaky abstraction in some cases. For example it essentially uses the same text layout algorithms as HTML, deciding on its own where to line wrap. Line wraps can jump around when resizing the browser. It is not vectorized text so it doesn't work for all types of designs
- jamarante 9y ago"but that's just my opinion", Good opinion regardless. To keep the line wrapping consistent with how the designer sees it in the application, wrapping is handled by the app itself, it doesn't rely on the text layout algorithm HTML uses. Consistency is the priority.
- mwcampbell 9y ago> To keep the line wrapping consistent with how the designer sees it in the application From my perspective as a low-vision person who often uses magnification, this is an unwelcome invasion of the one-size-fits-all mindset from print design. Let my device reflow the text. Designers just have to embrace this newer, more dynamic medium. Edit: Besides accessibility, what about the variety of screen sizes we have these days? This isn't the 90s. Edit 2: To jamarante and others that think a canvas-based tool like this is a good idea, I recommend this article for a different approach to web design: https://www.chenhuijing.com/blog/a-better-web-design-process/ https://www.chenhuijing.com/blog/a-better-web-design-process... I don't like being negative, but, having given it a day's thought and read more of the comments, I firmly believe that what you're doing is a step backward for the Web. That doesn't mean that I think Web designers should write HTML and CSS by hand. Do give them better tools, but don't try to turn the Web into a new PDF.