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

41–50 of 73 posts

Re: Bubble sort in pure CSS

#41

Post by SonOfLilit »

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.

Re: Bubble sort in pure CSS

#42

Post by schemescape »

micromacrofoot wrote: post #38
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.

If someone asked me to write CSS at this level for an interview I'd probably question the job, because if you have to write CSS at this level for work something is horribly wrong.

Despite the pressure to constantly hustle, it’s still ok to take a job just because it sounds fun*.

*Obviously, abusing CSS isn’t everyone’s idea of fun.

Re: Bubble sort in pure CSS

#43

Post by layer8 »

thaumasiotes wrote: post #14
pzmarzly wrote: post #5

> (oneIsGreater * origArray[0]) + (twoIsGreater * origArray[1]) There is a reason why conjunction (AND) is also called logical multiplication, and disjunction (OR) logical addition. There is not much difference between this and: (oneIsGreater ? origArray[0] : 0) | (twoIsGreater ? origArray[1] : 0) This is often useful to think about when working on bitset or SIMD algorithms.

> There is a reason why conjunction (AND) is also called logical multiplication, and disjunction (OR) logical addition. Really? The connection between AND and multiplication is obvious, but disjunction doesn't behave like addition. (For one thing, just like AND, it destroys information, which multiplication does do and addition doesn't.) Addition would usually be XOR. In fact, AND and XOR are what you get when you ap…

OR still forms a semiring with AND, and that semiring operation is still called addition. OR is also like addition in saturation arithmetics. In those senses, it’s an additive operation, and it is indeed called logical addition:

https://en.wikipedia.org/wiki/Logical_disjunction

https://mathworld.wolfram.com/deMorgansDualityLaw.html

Re: Bubble sort in pure CSS

#44

Post by appplication »

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.

Re: Bubble sort in pure CSS

#45

Post by [deleted] »

xigoi wrote: post #36
moritzwarhier wrote: post #26

Earlier quoted context omitted.

Is there a way to express OR (not XOR) using integer arithmetic without case distinction or special functions in the natural numbers mod 2? Meaning, using only elementary arithmetic and modulo? Seems like there should be either an obvious answer or an interesting one :)

a + b + a * b

[deleted]

Re: Bubble sort in pure CSS

#46

Post by JaDogg »

micromacrofoot wrote: post #38
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.

If someone asked me to write CSS at this level for an interview I'd probably question the job, because if you have to write CSS at this level for work something is horribly wrong.

Fair enough, however it is better to hire few frontend specalists rather than depending on fullstack/backend people to do the frontend.

Re: Bubble sort in pure CSS

#47

Post by JaDogg »

karaterobot wrote: post #32
JaDogg wrote: post #21

Earlier quoted context omitted.

Those you know it well can abuse it in a fun way. Probably not useful in practice. Nevertheless this proves talent of the one who wrote it.

A better test for someone using CSS would be activities that CSS is typically used for. Have them make a complex layout that is responsive at multiple display sizes, or have them architect a set of reusable classes for a design library or something. You may think that this sort of cleverness is generalizable: that someone who would come up with this solution would also be good at laying out web components. But there…

Fair enough.

Re: Bubble sort in pure CSS

#48

Post by skrebbel »

adrian_b wrote: post #33
moritzwarhier wrote: post #28

Earlier quoted context omitted.

Yeah that makes sense of course. Should have specified "special function", was aiming at "algebraic" or "polynomial" I guess. Then the answer seems to be no, right? Edit: The abs() function seems to be enough, awesome: https://math.stackexchange.com/a/1641271

The abs function works because it is equal to the maximum of x and -x. The logical "and" and logical "or" functions are precisely particular cases of the minimum and maximum functions. The so-called "exclusive or" function is simultaneously a particular case of addition and of subtraction, i.e. addition modulo 2 and subtraction modulo 2 are the same function. Therefore applying the 4 functions minimum, maximum, addit…

I really enjoyed reading this comment, thanks. I love the reason why min/max aren’t thought of as basic arithmetic building blocks (they’re too easy), it makes so much sense now you put it that way.

Re: Bubble sort in pure CSS

#49

Post by sentientslug »

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.

It’s noted on the page right above the visualization that it doesn’t work on mobile

Re: Bubble sort in pure CSS

#50

Post by cubefox »

moritzwarhier wrote: post #39
xigoi wrote: post #36

Earlier quoted context omitted.

a + b + a * b

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)

Post reply on HN