Awesome! Please do continue with this project. Such a generator allows for very cool features, such as integration of Google Web Fonts for default fonts.
Your functions and variables are in a global namespace. That's not a good sign. Sure if you are absolutely sure this code will never run alongside existing code, that's okay. But if you are working with code from multiple places, that's perhaps not the wisest approach. I guess you have no long-term intentions of allowing third party plugins and modules?
You're being too-clever using commas effectively as statement separators (or maybe your JS compressor is), and boolean operators instead of if statements. Shows off that you know how to flex JavaScript, but probably concerns whether you'd be a good fit into an existing team of developers.
I wonder if concatanating chunks of strings interspersed with variables is the best course of action. I'm tempted to suggest to collate the big strings together as static text with replaceable tokens (or perhaps bring in an existing templating language like mustache).
I worry about <div class="clearDiv"> being used to clear floats. I'm surprised that blueprint forced you into that.
jQuery constructs like: $(a).parent().parent().attr("id") and $(a).parent().parent().prev are brittle, they assume/enforce a particular markup. Which means if you need that extra wrapper div, now you need to update each of those constructs.
Thanks for checking out the code. I am aware that JavaScript's "bad parts" are used throughout. This is of course a prototype built rather quickly. In the end all of this will be done using backbone.js (and will be much faster). If I approached this pedantically, it would have taken me much longer.
I was hoping someone would develop something like this too.
Free to use would be great, and the amount of traffic the tool would regularly get could create a substantial revenue stream from just a few small non-intrusive ads.
Small nitpick: If you say you generate HTML5 markup, I think you should make use of the new HTML5 tags like <header>, <footer> etc in the rendered file. Right now it looks like you are just changing the doctype?
thanks for the feedback, very helpful. I am thinking about what kind of new features to add and I would like to keep the features to an elegant minimum. HTML5 tags would be nice but I don't want to overwhelm the user with a cluttered UI.
While it would be nice to have a toggle that enables output of HTML5's new semantic tags, I don't believe that it should be the default. Internet Explorer 6-8 require a JavaScript polyfill to support these tags, which means that for IE users with JS disabled, the layout completely breaks. Here's a blog post from Trevor Davis at Viget that summarizes the argument pretty well: http://www.viget.com/inspire/html5-elements-irresponsible-ch...
I have considered that but I would like as much of the UI as visible as possible, nothing hidden. I would like to make a decision as to show controls on hover (or not) based on some measurable usability testing.
Very nice first project. There was some recent discussion (http://news.ycombinator.com/item?id=3523316) about WYSIWYG editors for HTML. This is the first step toward exactly the type of tool that will make WYSIWYG useful to serious designers and frontend coders.
Since you focused on the layout only, I'll take the opportunity to show off my weekend project which will help picking a colorscheme:
http://plainas.github.com/cubecolors/
As for pabeblox, looks handy, but you _must_ implement dragable border instead of buttons.
Initial thought: cool idea, but why would I want a tool to generate a css layout that wasn't responsive css in an age where mobile devices can NOT be ignored?
34 comments
[ 0.24 ms ] story [ 100 ms ] threadQuick review of your JavaScript:
Your functions and variables are in a global namespace. That's not a good sign. Sure if you are absolutely sure this code will never run alongside existing code, that's okay. But if you are working with code from multiple places, that's perhaps not the wisest approach. I guess you have no long-term intentions of allowing third party plugins and modules?
You're being too-clever using commas effectively as statement separators (or maybe your JS compressor is), and boolean operators instead of if statements. Shows off that you know how to flex JavaScript, but probably concerns whether you'd be a good fit into an existing team of developers.
I wonder if concatanating chunks of strings interspersed with variables is the best course of action. I'm tempted to suggest to collate the big strings together as static text with replaceable tokens (or perhaps bring in an existing templating language like mustache).
I worry about <div class="clearDiv"> being used to clear floats. I'm surprised that blueprint forced you into that.
jQuery constructs like: $(a).parent().parent().attr("id") and $(a).parent().parent().prev are brittle, they assume/enforce a particular markup. Which means if you need that extra wrapper div, now you need to update each of those constructs.
It needs some more work of course but the potential is right there.
Also consider the other way round (analyze page that have been created by other means and extract the metrics)
In fact there is a whole product hidden in this, with the proper design and approach.
Free to use would be great, and the amount of traffic the tool would regularly get could create a substantial revenue stream from just a few small non-intrusive ads.
See how HTML5BoilerPlate uses the header & footer tags: https://github.com/h5bp/html5-boilerplate/blob/master/index....
It would also be nice it you can directly output a version of html that contains all the features from HTML5BoilerPlate.
That said, what can you expect from a weekend project on a browser with >1% market share. Nice job! I'll probably use this.
As this is the only part of the WYSIWYG editor I would use, I would go as far as to say that this is the //last// step.
As for pabeblox, looks handy, but you _must_ implement dragable border instead of buttons.
I would enhance the UI and maybe add inline code editing for blocks in the next version.
Good luck.