Click this, touch that, let's enhance.

Interactive prototype for an idea about a design that starts very minimal, then adds style rules as you interact. Process as style ftw.

image image

This is a normal CSS stylesheet, but rules are loaded one by one, based on user interaction. This makes the design process visible: from raw html content, to a final web design. You can see the script doing that here. The stylesheet is loaded via fetch, split on curly braces, and added to a new stylesheet line by line. More technical details for that trick can be found here

Content could be loaded based on user interaction too, at least partially. So the site could grow from a simple poster to a long and complex page, full of media and copy. It could be loaded from another page via ajax, or form a headless cms, or just a simple txt file. It could also be changed with a set of text replacements to transform from a first draft to solid text.

Process as style™

Unless you're involved with thinking about what you're doing, you end up doing the same thing over and over, and that becomes tedious and, in the end, defeating.

image

This is a normal CSS stylesheet, but rules are loaded one by one, based on user interaction. This makes the design process visible: from raw html content, to a final web design. You can see the script doing that here. The stylesheet is loaded via fetch, split on curly braces, and added to a new stylesheet line by line. More technical details for that trick can be found here

I think that its all to do with the stack memory. Some recursive calls step out of their respective loop to run and then once they are complete they resume and rewind back in time to it's previous memory on the stack. I'm still not properly able to conceptualise it but I think i've got my head round the hardest part. Today is a good day, that was three years in the making!! The thing that is crazy is that this guy managed to create this algorithm in the first place.

image image image
Easy Medium Hard
Buy Buy Buy
Hold Hold Hold
Cancel Remind me later Update now