Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bubble sort in pure CSS

dev.to

Post reply on HN
Print view View original

61–70 of 73 posts

Re: Bubble sort in pure CSS

#61

Post by EMM_386 »

JaDogg wrote: post #11

This is scary good. Well done. If your product have any frontend and you have the power to decide ensure at least one of your hires can write CSS at this level.

> This is scary good. Well done. If your product have any frontend and you have the power to decide ensure at least one of your hires can write CSS at this level.

I'm having trouble determening as written if this is a joke or not.

If anyone looked at this and thought something along the lines of "wow, think of the possibilities", I would would ask only that they don't put more thought into it. Other thoughts could bring pain ... to the browser that has to run it, the user staring at the page as the fans spin up, and the developer who has the pleasure to work with it next.

This was clearly one of those interesting-yet-useless things that was worth a read.

Re: Bubble sort in pure CSS

#62

Post by xigoi »

cubefox wrote: post #50
moritzwarhier wrote: post #39

Earlier quoted context omitted.

This is the obvious solution I was looking for. Thanks! (and I rightfully feel stupid now)

The formula is slightly wrong though. This is the right one: a or b = a + b - (a * b) The last term is equivalent to a conjunction. Which also makes sense when you think of probability: P(a or b) = P(a) + P(b) - P(a and b)

True, but in modulo 2, + and - are the same. I chose the + to keep the formula simple.

Re: Bubble sort in pure CSS

#63

Post by cbcivyxt »

SonOfLilit wrote: post #41
adrianmonk wrote: post #31

> and add visualisations to it Might I suggest a different animation. The current one swaps two elements (bars) by vertically shrinking the taller bar and growing the shorter one. Instead, the bars should stay the same height but move horizontally. I would rather see values move than slots in the array morph to the new value they should hold. The current animation feels like you are pumping water from one tank to ano…

The visualization you're suggesting would be orders of magnitude harder to create, since this one visualizes what actually happens in his algorithm and the better one would require an algorithm that tracks more things.

[dead]

Re: Bubble sort in pure CSS

#64

Post by EGreg »

cubefox wrote: post #52
EGreg wrote: post #37

Earlier quoted context omitted.

The analogy is deep. But actually the relationship is as follows: P(A u B) = P(A) + P(B) - P(A^B) P(A ^ B) = P(A u B) - P(A) - P(B) And to the guy who said xor is addition — no it’s not: P(A xor B) = P(A) + P(B) - 2 * P(A^B) In Probability, when you have a space of outcomes, doing a Union on two disjoint events (sets of outcomes) the probabilities add. Whereas doing an Intersection on two non-disjoint events those pr…

Interesting, I never saw the arithmetic probability formula for xor. Though the original topic was truth values, not probabilities. To make it short, conjunctions in probability are multiplicative when they are independent, and disjunctions in probability are additive when they are mutually exclusive.

Well I actually came up with it on the spot. Just think of the venn diagram, and add the areas of A and B, which counts A^B twice, and then just remove it twice. :)

Re: Bubble sort in pure CSS

#65

Post by omneity »

Since the steps are hardcoded in the CSS, this would better be named "Bubble sort visualization in pure CSS". I don't know what I was expecting honestly, but seeing all the sorting steps in the stylesheet wasn't it.

Pretty cool trick nevertheless, well done to the author!

Re: Bubble sort in pure CSS

#66

Post by The_Colonel »

Tangential, but this brought me to https://en.wikipedia.org/wiki/Bogosort, and I love a sorting algorithm "Miraclesort":

> A sorting algorithm that checks if the array is sorted until a miracle occurs. It continually checks the array until it is sorted, never changing the order of the array.

It basically waits for god intervention / single event upset. It is guaranteed to be optimal in at least one quantum universe, though.

Re: Bubble sort in pure CSS

#67

Post by autoexec »

op00to wrote: post #2

> Editor’s Note: This article ends on a cliffhanger. The next part goes out in a week I stopped reading there. Let us know when the second part is out. Why write half an article?

> . Why write half an article?

Twice the page views? To "drive engagement"?

Re: Bubble sort in pure CSS

#68

Post by michaelr1998 »

appplication wrote: post #44
adrianmonk wrote: post #31

> and add visualisations to it Might I suggest a different animation. The current one swaps two elements (bars) by vertically shrinking the taller bar and growing the shorter one. Instead, the bars should stay the same height but move horizontally. I would rather see values move than slots in the array morph to the new value they should hold. The current animation feels like you are pumping water from one tank to ano…

The current one also broke in my case (mobile safari). The three smallest bars just sort of disappeared right before the last swap.

you must be a blast at parties /s

Re: Bubble sort in pure CSS

#69

Post by baka367 »

I'm always worried that these kind of investigations might give the hiring managers some weird ideas, I.E.:

Welcome to our phone screen at ${faang}. For the warmup question, let's solve this ${lc_hard} together in css.

Post reply on HN