Hacker News Reader

Comment by DigitalSea | Hacker News Reader

Oh my God, this is amazing. I envy people like you Brian, this is insanely clever. I wish I were as masterful with CSS to even think of being able to do what you've done here. Would love to know what the process was like, did you have the shapes and positions in mind and knew what you wanted to add to what, or was it more trial and error?

View on HN

Thank you for the kind words! For each one I started off pinpointing the toughest areas/curves to create, and then worked off that. There's a lot of thought behind which layers to place first so that subsequent layers can mask over spills or imperfections, but beyond that the rest is pure trail and error.

yeah, amazing work ++

Awesome work.

My only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)

heh, here's a hacky idea ;) Take a PNG, base64 encode, compress and gzip your js template into it, let it create the same css3 code, but by using javascript. This works by putting the png into a canvas... here's a guide ;) http://creativejs.com/2012/06/jsexe-javascript-compressor/ and http://iamcal.github.io/PNGStore/

haha, you could save angular.js, your css,html and image sprites into two or three png's. :P

Hey are you still with me? We could theoretically go further, there are no guarantees though. We'll use "Multiphase Compression". Uncompression is slow, but we only care about space, let's hope we save more than we use.

Step 1: Store css/html/js into the png as mentioned above. Then look for a "minimal" fractal image compression library written in C. Run the png through the fractal compressor.

Step 2: Save the output into a Javascript ArrayBuffer

Step 3: Now convert the minimal fractal compression decoder to javascript using Emscripten. And store the output into a png again. Then decode the javascript from the png and let the fractal decoder create a png out of the ArrayBuffer. Then extract the js/html/css from the png that we just generated on the client-side. We now have the final data. We can let it remove all unnessary js after saving the extracted data into html5 localstorage.

Reply on news.ycombinator.com