

Show HN: my weekend project, PageBlox - ctek
http://pageblox.com

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

~~~
sainib
+1 for that..

~~~
tstegart
+2 for that. +1000 in fact.

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

~~~
Isofarro
"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.

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

------
niyazpk
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....](https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

It would also be nice it you can directly output a version of html that
contains all the features from HTML5BoilerPlate.

~~~
jakelear
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...](http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-
now/)

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

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

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

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

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

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

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

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

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

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

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

~~~
ctek
thanks for the heads up, I just did

------
Raphael
Why such small font?

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

~~~
ctek
yes, this is the next feature I will implement

------
masukomi
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?

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

~~~
ctek
just added tinymce editor...

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

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

------
toddwahnish
this is fantastic- great work!

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

