Show HN: my weekend project, PageBlox | Hacker News Reader

Show HN: my weekend project, PageBlox

pageblox.com

134 pointsctek32 comments

Make a version of this for twitter bootstrap and you will have reached an incredible amount of win.

+1 for that..

+2 for that. +1000 in fact.

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.

...a project that showcases my JavaScript skills. I am looking for consulting work so please contact me if you need a front-end designer/developer

"a project that showcases my JavaScript skills"

Quick 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.

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.

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?

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.

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...

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.

Nice first step indeed!

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.

Yes yes, a thousand times yes.

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.

It's annoying having to click a button to adjust the bloxes. Would be better if you could just adjust them by dragging the sides.

that was tricky to implement so for now I used buttons... it's on my to-do list

Also, having the buttons on each Blox causes some noise, maybe show them on hover?

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.

I like it. It scares me a bit that the tool layout seems buggy on my Opera, does that mean that the output will be buggy there too?

That said, what can you expect from a weekend project on a browser with >1% market share. Nice job! I'll probably use this.

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.

Very good work! I love the simplicity and the provided templates.

I would enhance the UI and maybe add inline code editing for blocks in the next version.

Good luck.

@ctek - update your profile page if you are interested in making contacts here on HN. Cool project BTW!

thanks for the heads up, I just did

Why such small font?

nice! can you add a button (next to render) that can zip&download all the files?

yes, this is the next feature I will implement

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?

Nice! I think it would be smart if text can be edit without thinking HTML, like wysiwyg editor. Can edit layout includes h* and p.

just added tinymce editor...

Just a short note - vertical gutter should be either adjustable as well or simply the same as horizontal.

Great job. Maybe you can add the possibility to edit IDs/classes?

this is fantastic- great work!

That's really awesome, I will definitely use this. It would be even cooler if I could style it a little bit.

Reply on news.ycombinator.com