3 ms·
const color = ["yellow", "blueviolet", "deeppink"]; const path = ["M 5 10 Q 5 5 8 1", "M 5 10 Q 4 5 2 4", "M 5 10 Q 6 6 8 4"]; const endPoint = [[8, 1],
by quink 4y ago
const color = ["yellow", "blueviolet", "deeppink"];
const path = ["M 5 10 Q 5 5 8 1", "M 5 10 Q 4 5 2 4", "M 5 10 Q 6 6 8 4"];
const endPoint = [[8, 1], [2, 4], [8, 4]];
const BallPath = ({ n }) => (
<>
<path fill="none" d={path[n]} />
<circle fill={color[n]} cx={endPoint[n][0]} cy={endPoint[n][1]} r={0.5} />
</>
);
export default () => (
<svg viewBox="0 0 10 10" stroke="#000" strokeWidth=".1">
{[0, 1, 2].map((n) => (<BallPath n={n} />))}
</svg>
);
React yay. Combine with TypeScript for best results.
- masklinn 4y agoAt this point you might as well use closure & hiccup, it’ll be clearer and more uniform.
- quink 4y agoEverybody already knows and uses React and I had to repeat a tag name once only (barring the hidden React.Fragment). Sure it'll be clearer and more uniform, yet somehow you're typing this in English instead of Esperanto, Volapük or Toki Pona. https://hnhiring.com/search?q=hiccup https://hnhiring.com/search?q=hiccup "0 jobs found"
- samatman 4y agoIt's fine that you don't understand how the Clojure ecosystem works, but you don't. No one would bother listing hiccup, which is very little more than a convention for representing HTML. https://hnhiring.com/search?q=Clojure https://hnhiring.com/search?q=Clojure give seven hits, and I doubt HN is in the top five ways Clojurians find employment.
- quink 4y agoOK, fair enough, a search for JSX doesn't give any results either. To step back a bit though, there's 1 job with Clojure listed on my country's biggest job board. React? 3200. My whole point was trying to prove that you don't have to have something new and obscure to enable something but it's already there in something that almost everyone is using already. And then you replied that you can do it cleaner in something objectively vastly more obscure. Yes, yes you can. I'm sure you can.
- geocar 4y agoWhy wouldn't you: const M = [ { c:"yellow", d:"M 5 10 Q 5 5 8 1", cx:8, cy:1 }, { c:"blueviolet", d:"M 5 10 Q 4 5 2 4", cx:2, cy:4 }, { c:"deeppink", d:"M 5 10 Q 6 6 8 4", cx:8, cy:4 } ]; export default () => <svg viewBox="0 0 10 10" stroke="#000" strokeWidth=".1"> {M.map(({c,d,cx,cy}) => <><path fill="none" d={d} /><circle fill={c} cx={cx} cy={cy} r={0.5} /></>)} </svg> seems like as M.map's closure gets bigger, it's already in a good shape for lifting into one or more helpers.
- quink 4y ago> Why wouldn't you Because 1. in the original, they were separate as well, 2. the path is derivative of the endpoint 3. you might want to cycle the colours or they're a pure derivative calculation based of the number of points or whatnot. So combining them like that is definitely prettier and makes sense if the requirements don't change, but also seems like a premature optimisation. (also, forgot about `key`)
- geocar 4y ago> the path is derivative of the endpoint Oh I didn't notice that from the example. Is it worth splitting off the last two parts for that? > you might want to cycle the colours or they're a pure derivative calculation based of the number of points or whatnot Simply lift color out and use the second argument to map's closure to index it modulo the length of color. If you really anticipate this, you should have %X.length everywhere, otherwise it just looks like a bug the next guy is going to hit and blame you for it. The problem (as I see it) stems from the hardcoded [0,1,2] iota -- if there's a better (domain-specific) way to eliminate it, then great, but it'll have to consider the rank of M's constituents and I just don't think the juice is worth the squeeze. > combining them like that is definitely prettier and makes sense if the requirements don't change, but also seems like a premature optimisation I would urge you to reconsider. Trying to guess what the next person is going to want to do tends to create more code, not less, and changing a little code is better than changing a lot.