Draw a horizontal tree using CSS pseudo elements

Draw a horizontal tree using CSS pseudo elements(igauravsehrawat.github.io)

33 points by igauravsehrawat 8 years ago | 14 comments

twooster 8 years ago |

This is really cool. Yet, somehow, as cool as it is, I find it terribly depressing. In comparison to other "look what I can do" projects -- such code golf, or demo programming, or quines -- which achieve impressive results in a constrained environment because it's challenging, thousands of programmers have HAD to do silly things in CSS because there's no other choice. These amazing-yet-hacky solutions get copy-pasted down through the generations and what should be simple becomes enshrined in the arcane. I look at this and become exhausted in empathy.

So in contrast to the opening line of the article, CSS is not amazing: people's talent for threading camels through the eyes of needles is amazing. Props to this guy for this. May I never have to recreate it.

brudgers 8 years ago | |

There's viz.js, http://viz-js.com/

hacker_9 8 years ago | |

Not sure what point you are making here, but one of the nice things about modern browsers is you can write CSS and see the page update in real time. This is likely where a lot of OPs code came from, that might look confusing if you take it at face value only.

Whenever I'm faced with a CSS problem, it's usually just a case of toggling on/off CSS in the DevTools to find the offender.

LoSboccacc 8 years ago | | |

lucky you, whenever I face a css problem, it's usually the Safari/iOS engine doing something stupid with the browser chroma and requiring dozen hops to work around.

gurgus 8 years ago |

Very cool writeup. I love posts like this that cover random things like this. I'm definitely going to take this away and mess around with it!

ChrisSD 8 years ago |

It's amusing that both this and "SVG can do that?"[1] are on the front page right now. Is it better to draw using HTML/CSS or SVG? I guess the answer is complicated.

[1] https://news.ycombinator.com/item?id=15023766

have_faith 8 years ago | |

From a practical perspective, I've had lots of bad experience with devs insisting on being clever and drawing complex graphics with layers of pseudo elements and complex gradients when dropping in an svg is quicker and more maintainable.

hacker_9 8 years ago | |

SVG can work very well, an example project is Google Blockly [1].

[1] https://developers.google.com/blockly/

swaggyBoatswain 8 years ago | | |

is this the same thing MIT scratch uses?

vincentriemer 8 years ago | |

In my personal/anecdotal experience, I've noticed a higher performance ceiling using HTML/CSS over SVG. Doing similar operations between the two usually shows SVG with better performance but if you are willing to put in the effort HTML/CSS can be made to outperform SVG.

thinkMOAR 8 years ago |

By the title I thought it was a tree 'tree', with leaves and branches :) those you can find in a forest.

Though nice howto nonetheless :)

tobijkl 8 years ago | |

There is also this kind of forest: http://mathworld.wolfram.com/Forest.html

coldcode 8 years ago | |

I also thought the same thing, along the lines of drawing Simpsons characters in CSS.