Hacker News Reader

Comment by rangelreale | Hacker News Reader

In 2006/2007 I built HTMLButcher, a C++ desktop application to slice PSD/image website designs made by designers to HTML. In these years sites where made with tables, so for slicing a design I had to cut the images and fit then into borderless HTML tables. I took 2 years to build it, and in this timeframe people started building sematic websites with CSS, and abandoning table-based designs. I managed to sell 100 copies, for some reason 90% to India. After some years without selling nothing, I open sourced it: https://github.com/RangelReale/htmlbutcher. The good thing is that I REALLY learned C++ with this project, and this knowledge was the basis for my current company where I made a digitalsignage application in C++ that runs in some of the largest DOOH places in Brazil, in Windows, Linux and MAC (targets of HTMLButcher). So in the end it was a good investment!

View on HN

A zillion years ago I had a housemate who was a brilliant programmer and could smoke himself into the Zone like nobody's business, and one of his weird little side ventures was a Mac app to cut up Illustrator files and lay them out in HTML using tables, because that was the state of the art.

As best I can recall, he wrote it in CodeWarrior over a couple weeks together with another guy who presumably knew Illustrator, and Adobe bought it before they had to deal with anything like a business plan.

> he wrote it in CodeWarrior

Wow, that's a name I haven't heard in 20+ years. We used CodeWarrior Pro for my Pascal class at a local community college that I took during high school, because my high school was so small, I literally ran out of classes to take by senior year, so I had to take a programming course at a CC that was 10 miles away. Had to get a waiver to leave school before noon to go to the class because state policy was that students can't be released from school before noon, and because all my classes (all 3 of them) were over by 11:30.

Was it possibly integrated into Adobe ImageReady [0]? It had a feature like what you're describing where after you finished designing your website, you could define cutouts and export as images+HTML.

This is actually how I first got into programming when I was younger. I made my first site in ImageReady, but it couldn't do all the other cool stuff other sites did like comment sections and logging in, so I went on a quest to learn how to do all that and the rest is history :)

[0] https://en.m.wikipedia.org/wiki/Adobe_ImageReady

Edit: actually, I found an example from 13 years ago https://youtu.be/qCq0JiwMcJs

> could smoke himself into the Zone like nobody's business

Can you elaborate on this?

Smoking weed to get into the proverbial, "flow" state.

What is the Ballmer Peak[0] equivalent for weed?

[0] https://xkcd.com/323/

The Snoop Summit

Also take a look at the marvelous table-based design of the app website: http://rangelreale.github.io/htmlbutcher/index.html

I would have paid a lot of money for that back in the pre-CSS days, assuming it worked well. Was it purely image-based or could it recognize when an area could be rendered without using an image (like a single color zone/etc.)?

You could select a kind for each cell, "None" would not generate an image, and you could select a cell color or html tags. It could also be "Image" or "Mask", with Mask being an inner table within a cell.

You can see this on the main screenshot on the website: http://rangelreale.github.io/htmlbutcher/index.html

That’s cool. Everything about the design fills me with nostalgia and takes me to the good old days of the Micro ISV, the Joel on Software forums, and my own, now unsuccessful, plans for world domination.

I'm a little confused. That feature has been built into Photoshop since at least CS1 (2003), maybe earlier.

https://helpx.adobe.com/photoshop/using/slicing-web-pages.ht...

Photoshop had a kind of high price point just for cutting up images.

That's where you start. But to make it responsive it takes more work. If I remember..

For a 9x9 basic table grid you would set the width 100% of the top and bottom image do the opposite for the sides and fix the corners. All of these tricks involved choosing designs that could work.

It would have been a tool I would have liked.

Also webdesigners loved to change the layout mid-project and it was a big hassle to migrate the slicing from one PSD to another.

Not counting that some websites had dozens of PSD files, it was a pain.

It never worked well. The html was full of issues and the kind of image slicing was for backwards compatibility with email clients. However PS did have a way to write scripts with JS and extend or even change the HTML generation.

Can you share the name of the Digitalsignage company? I am in market for such a solution

https://inviron.com.br/

I made a plugin for photoshop around 2010 to do the exact same thing. It has a slicer tool, and an API for it, so spitting out HTML was easy, but just used it as an internal tool for one of my first web dev jobs.

I would have used this in ~2005. Seems like you were just slightly late to market. CS2's built in tool to slice PSD -> HTML kind of sucked and required a lot of post-processing work.

Apart from the table based design, did you feel any competition from services like CSSilize? Was it difficult add support for the DIV based design?

I added and AP tablebless (absolute positioning) option, but this was only simulating tables with CSS. People stopped using large and sliced images with CSS, so it wasn't worth it.

Reply on news.ycombinator.com