5 ms·

Show HN: A drag drop webpage builder in 10k HTML/JS/CSS

69 points by nrkn 15y ago

geuis 15y ago
Very interesting. While I think there are some UI issues (a bit confusing to figure out how to change styles initially, how to save/open needs better explanation, etc), I believe these are simply attributed to the limited space available to the app. Very good job, and I would love to see this fleshed out a bit outside of the contest.
- nrkn 15y ago
  Thanks, definitely agree on there being some issues. I would have liked to have spent more time on polishing it but I submitted it literally 1 minute before the deadline. There's a link to the mailing list on the app if you want to follow progress :)
happyfeet 15y ago
Nice. The part I like the most is that I liked playing around with your app to know what it can do. It does require changes to make it more intuitive and will be looking forward to see how it evolves. Good luck.
- nrkn 15y ago
  Thanks, I have a todo list longer than my arm, a lot of which is UX related. There simply wasn't time, I expected to run out of bytes before I ran out of time but it turns out that 10k is a lot when you throw in zip compression - especially if you're coding with the way zip compression works in mind from the start
spiralganglion 15y ago
It's fantastic that you've tackled something so ambitious for 10k Apart. This is a super cool project, and the outcome is fun and inspiring. But it also offers a great benefit to me, personally. Lately, I've been heavily considering building a drag-drop, intuitive-as-possible editor for some of the content my company develops. I've never built such an editor before, so it's great to see some of the design decisions you made in putting this together. On one hand, the system you've built feels limited. It's so easy to make the snap judgement, "Anything I could make with this tool would be trivial to code by hand — what use is it to me?". But that's a dangerous line of thinking to fall into, when evaluating such a tool as this. Maybe it's not supposed to be a replacement for code. Maybe it's a fundamentally different approach to content design. I'll need to be mindful of this difference, when I build my editor. I'll be compelled to dream big, to attempt to make it both simpler and more powerful than what we can do with our hand-coded content. But it's an awful lot harder than one may expect, to capture the general ability to design something systematic in a very simple symbolic interface. I'd be wise to look for unique advantages that can come from visual/spatial interaction, and not just try to recreate the processes of coding with GUI tools. Thank you for sharing this. Contest or not, you've made something that's inspired at least one fellow hacker.
- nrkn 15y ago
  Thank you very much for your kind words. The paradigm that I have in mind is fundamentally different to how web dev tools are usually done. This is just a very rapid prototype of some of the most basic elements done rather crudely but I hope it gives some idea of the direction we're going :)
karl_nerd 15y ago
Love the snapiness and complete lack of fancy animations!
- nrkn 15y ago
  I actually had some transitions etc. but I found they made it feel slow on anything but a desktop machine
PeterMcCanney 15y ago
Bravo! Lovely bit of work for just 10K. The only criticism I would make is about the zoom. Not sure that the controls should enlarge as well. Is there a betting pool where I can put a few quid on you winning the contest?
- nrkn 15y ago
  Yeah the whole thing around that is a bit iffy, it was a compromise I made because it's a little fiddly on very small screens (my phone) and I didn't have time to think about it properly.
deleted 15y ago
[deleted]
yannis 15y ago
Is the code open sourced? The UI needs some work and so does the css, but overall is very good for the amount of code.
- nrkn 15y ago
  Hi there, not at the moment but I may be releasing something at some point depending on time etc., keep an eye on https://github.com/nrkn https://github.com/nrkn
geekytenny 15y ago
I was dragging onto the grey area, i think the 'canvas-like' div should have a min-height even if it contains nothing. What do you think?
- geekytenny 15y ago
  Great job though..
- nrkn 15y ago
  Agreed. You're not the first person to say that.
gavinpc 15y ago
Note that you need cookies enabled for the site for the app to work. Having said that, as Freud observed, "sometimes 10k is just 10k."
- nrkn 15y ago
  Curious, as I didn't touch anything to do with cookies in the code. Perhaps browsers use the user setting for allowing cookies to also allow/disallow html5 localstorage, which the site does make use of.

69 points by nrkn 15y ago

geuis 15y ago

Very interesting. While I think there are some UI issues (a bit confusing to figure out how to change styles initially, how to save/open needs better explanation, etc), I believe these are simply attributed to the limited space available to the app. Very good job, and I would love to see this fleshed out a bit outside of the contest.

nrkn 15y ago
Thanks, definitely agree on there being some issues. I would have liked to have spent more time on polishing it but I submitted it literally 1 minute before the deadline. There's a link to the mailing list on the app if you want to follow progress :)

happyfeet 15y ago

Nice. The part I like the most is that I liked playing around with your app to know what it can do. It does require changes to make it more intuitive and will be looking forward to see how it evolves. Good luck.

nrkn 15y ago
Thanks, I have a todo list longer than my arm, a lot of which is UX related. There simply wasn't time, I expected to run out of bytes before I ran out of time but it turns out that 10k is a lot when you throw in zip compression - especially if you're coding with the way zip compression works in mind from the start

spiralganglion 15y ago

It's fantastic that you've tackled something so ambitious for 10k Apart. This is a super cool project, and the outcome is fun and inspiring. But it also offers a great benefit to me, personally. Lately, I've been heavily considering building a drag-drop, intuitive-as-possible editor for some of the content my company develops. I've never built such an editor before, so it's great to see some of the design decisions you made in putting this together. On one hand, the system you've built feels limited. It's so easy to make the snap judgement, "Anything I could make with this tool would be trivial to code by hand — what use is it to me?". But that's a dangerous line of thinking to fall into, when evaluating such a tool as this. Maybe it's not supposed to be a replacement for code. Maybe it's a fundamentally different approach to content design. I'll need to be mindful of this difference, when I build my editor. I'll be compelled to dream big, to attempt to make it both simpler and more powerful than what we can do with our hand-coded content. But it's an awful lot harder than one may expect, to capture the general ability to design something systematic in a very simple symbolic interface. I'd be wise to look for unique advantages that can come from visual/spatial interaction, and not just try to recreate the processes of coding with GUI tools. Thank you for sharing this. Contest or not, you've made something that's inspired at least one fellow hacker.

nrkn 15y ago
Thank you very much for your kind words. The paradigm that I have in mind is fundamentally different to how web dev tools are usually done. This is just a very rapid prototype of some of the most basic elements done rather crudely but I hope it gives some idea of the direction we're going :)

karl_nerd 15y ago

Love the snapiness and complete lack of fancy animations!

nrkn 15y ago
I actually had some transitions etc. but I found they made it feel slow on anything but a desktop machine

PeterMcCanney 15y ago

Bravo! Lovely bit of work for just 10K. The only criticism I would make is about the zoom. Not sure that the controls should enlarge as well. Is there a betting pool where I can put a few quid on you winning the contest?

nrkn 15y ago
Yeah the whole thing around that is a bit iffy, it was a compromise I made because it's a little fiddly on very small screens (my phone) and I didn't have time to think about it properly.

deleted 15y ago

[deleted]

yannis 15y ago

Is the code open sourced? The UI needs some work and so does the css, but overall is very good for the amount of code.

nrkn 15y ago
Hi there, not at the moment but I may be releasing something at some point depending on time etc., keep an eye on https://github.com/nrkn https://github.com/nrkn

geekytenny 15y ago

I was dragging onto the grey area, i think the 'canvas-like' div should have a min-height even if it contains nothing. What do you think?

geekytenny 15y ago
Great job though..
nrkn 15y ago
Agreed. You're not the first person to say that.

gavinpc 15y ago

Note that you need cookies enabled for the site for the app to work. Having said that, as Freud observed, "sometimes 10k is just 10k."

nrkn 15y ago
Curious, as I didn't touch anything to do with cookies in the code. Perhaps browsers use the user setting for allowing cookies to also allow/disallow html5 localstorage, which the site does make use of.