Draw a horizontal tree using CSS pseudo elements | Hacker News Reader

Draw a horizontal tree using CSS pseudo elements

igauravsehrawat.github.io

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.

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.

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.

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

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!

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

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.

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.

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

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

is this the same thing MIT scratch uses?

From the docs [1]:

"Scratch Blocks [2]: Designed by the people behind MIT's Scratch and built on the Blockly code base, Scratch Blocks offers a simplified programming model ideal for young learners."

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

[2] https://scratch.mit.edu/developers

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 :)

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

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

Reply on news.ycombinator.com