Silon – Adders and Logic Gates in Pure CSS

http://silon.slaks.net

by stirno • 11 years ago

173 39 11 years ago

silon.slaks.net

devsquid4• 11 years ago

Good job man!

devsquid4• 11 years ago

Hey heads up Steve Gibson of the Security Now podcast just shared your website. You might be getting a ton of traffic, if thats a concern

nosir33• 11 years ago

Maybe I missed it. What's the security connection here?

slaks3• 11 years ago

I'm on GitHub pages, so I should be fine.

vardump• 11 years ago

You can implement an adder in CSS? Somehow this reminds me of C++ templates. These things seem to gain power and have new features until they become turing-complete. And beyond...

yellowapple• 11 years ago

Languages of the future will be compiled to CSS in the same way that languages of the present are compiled to Javascript.

I get shivers just thinking about all the fun I can have breaking web semantics this way.

spartanatreyu• 11 years ago

CSS is already turing complete: - http://stackoverflow.com/questions/2497146/is-css-turing-com...

This project doesn't use rule 110, it uses LESS which sorts out the logic while compiling and spits out the results in css.

Dylan168072• 11 years ago

I still say that doesn't count as long as you have to make the user click on all the cells. CSS by itself is capable of doing a single row of rule 110, but that's not enough.

devsquid4• 11 years ago

haha, thats a funny thought. I like CSS. I would love for it to have variables so I could consolidate changes and edit them via JS. Sorta like all the CSS-libraries.

o.o am i doing it??

girvo• 11 years ago

I highly recommend checking out LESS -- even if you ignore all of it's features, being able to define variables alone is worth it :)

robin_reala• 11 years ago

CSS does have variables: http://www.w3.org/TR/css-variables/

Of course, this being the web you’re somewhat limited in browser support: http://caniuse.com/#feat=css-variables

pdkl953• 11 years ago

It's not really any surprise that templates (or CSS) could be Turing complete, as all the lambda() function does is the same thing a template does - replacing the macros in a template with an argument.

This is actually an important lesson that is often missed: if the app you're writing gives the anonymous users any kind of find/replace macro capability, you're giving them a fully Turing complete language (though it's probably not easy, but that rarely stops anyone) and all the potential problems that can bring.

jacquesm6• 11 years ago

In case you're wondering what makes it tick:

https://github.com/SLaks/Silon/blob/gh-pages/styles/basic-ga...

teraflop3• 11 years ago

Aww, after seeing that I'm a little disappointed. Each CSS file is basically just a giant truth table that describes which state each bit should be in under all possible combinations of inputs.

It makes for a cool demo of how simple Boolean circuits work, but you can't really say it's "doing computation" in CSS when all of the actual computation has been done ahead of time.

Still, it's clever.

pdkl953• 11 years ago

Using a lookup table is a valid way to implement something. It is used often for precalculating expensive functions. (trig tables are very common). This is just one extreme of the runtime-vs-memory trade-off.

talmand• 11 years ago

I have to wonder what exactly you expected?

As someone who works with CSS everyday, it's exactly what I expected once I saw it working. How else could it possibly work?

slaks3• 11 years ago

Note that that's all computed by LESS code.

https://github.com/SLaks/Silon#implementation-details https://github.com/SLaks/Silon/blob/gh-pages/styles/_operato...

The actual declarations end up being nicely simple; see https://github.com/SLaks/Silon/blob/gh-pages/styles/_themed-...

The CSS is just a truth table, but the LESS (which is Turing-complete) actually contains all of the logic.

nickysielicki2• 11 years ago

this was the coolest thing I've ever seen in my entire life.

pkghost• 11 years ago

dude.

jacquesm6• 11 years ago

Why?

javajosh• 11 years ago

Youth.

nickysielicki2• 11 years ago

Because this is hackernews, and this is a really cool CSS hack.

crimsonalucard• 11 years ago

It's like programming with a crayon on a dirty wall. Sure.. but why?

tombh• 11 years ago

Very cool :)

I didn't realise you could click on them until after a good while though.

Silon – Adders and Logic Gates in Pure CSS

Related Stories