6 ms·
Bubble sort in pure CSS
- op00to 3y ago> 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?
- EForEndeavour 3y agoWhere does that text appear in the article? I learned from the article and found the subject interesting, but the breathlessly excited tone and forced cuteness were offputting.
- Hamuko 3y agoI think he clicked on the wrong article since https://one-from-nippon.ghost.io/worlds-first-app-store/ https://one-from-nippon.ghost.io/worlds-first-app-store/ ("The First App Store") on the front page starts with that.
- topato 3y agoI'm glad to know other people are annoyed by this rather perverse style of writing. I associate it with "web business guru" / "side-hustle tutorial" / "how I made X amount of dollars in Y months", and it reeks of ultra thirdh::) xx For a while, I
- op00to 3y agoOops! Sorry all!
- codesnik 3y agoI can't wait for "tone it down" AI button in the next chrome version.
- op00to 3y ago“Change it to reflect my opinions” costs $1 extra
- broken-kebab 3y agoI guess you're on mobile, and your finger landed on a neighboring article.
- deleted 3y ago[deleted]
- globalise83 3y agoWhy release half a product? We should only release when 100% of the features are completed.
- autoexec 3y ago> . Why write half an article? Twice the page views? To "drive engagement"?
- Jaxan 3y agoIt seems to only work for a fixed size. Wouldn’t that be called a sorting network?
- pzmarzly 3y agoIt is a sorting network corresponding to bubble sort on 5-element input. It is actually pretty good - the code uses 10 comparisons, while the optimal sorting network for 5 elements uses 9: https://bertdobbelaere.github.io/sorting_networks.html#N5L9D5 https://bertdobbelaere.github.io/sorting_networks.html#N5L9D...
- Jaxan 3y agoThat’s a cool page! Thanks!
- pzmarzly 3y ago> (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.
- thaumasiotes 3y ago> 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 apply multiplication and addition to the integers (mod 2).
- dvt 3y agoIt's called logical addition which is different than arithmetic addition, so it's best to not conflate the two. It's called "addition" because you "add" another propostion, creating a disjunction. And by the rules of logic, as long as the original proposition was true, the truth value is preserved no matter how many propositions you introduce (or "add"). A ⊢ ((A ∨ B) ∨ C) ... ∨ n
- thaumasiotes 3y ago> It's called "addition" because you "add" another propostion, creating a disjunction. By that argument, conjunction is also called "addition". Perhaps there's a different reason? The choice of terminology, contrasting "logical addition" with "logical multiplication", obviously indicates that logical addition is supposed to be analogous to addition. What is the analogy?
- andai 3y agoI don't know if this relates to formal logic, but in C a true value is defined as not zero, so all nonzero values are treated as the same value. So the only way to get a false is to OR (or add) two zeroes, making the two operations equivalent as far as boolean logic goes. Actually, you can add 1 and -1 to get 0, which breaks the model... Hmm... Guess it only works on natural numbers / unsigned.
- tutfbhuf 3y agoThat's cool, but it's expected since CSS is Turing complete as long as you consider an appropriate accompanying HTML file and user interactions to be part of the execution.
- ourmandave 3y agoAs I said, not a tutorial. But I did want to introduce some interesting CSS "switches" and "booleans" that may become useful in some strange scenario in the future for you!
- JaDogg 3y agoThis 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.
- karaterobot 3y agoThis is a fun proof of concept, but it isn't what CSS is used for. There's no conceivable reason you'd do this in practice.
- JaDogg 3y agoThose 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.
- karaterobot 3y agoA 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 is no relationship between this (very neat) trick and CSS skills, so it would be a terrible test to give people.
- JaDogg 3y agoFair enough.
- micromacrofoot 3y agoIf 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.
- 3y ago
- stylepoints 3y agoCould've used flex weights instead of hardcoding the heights.
- andai 3y agoSee also the sequel: pure CSS neural network! https://news.ycombinator.com/item?id=38151018 https://news.ycombinator.com/item?id=38151018
- hoosieree 3y ago2026: npm in pure css
- adrianmonk 3y ago> 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 another.
- SonOfLilit 3y agoThe 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.
- cbcivyxt 3y ago[dead]
- appplication 3y agoThe current one also broke in my case (mobile safari). The three smallest bars just sort of disappeared right before the last swap.
- sentientslug 3y agoIt’s noted on the page right above the visualization that it doesn’t work on mobile
- deleted 3y ago[deleted]
- michaelr1998 3y agoyou must be a blast at parties /s
- 3y ago
- omneity 3y agoSince 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!
- The_Colonel 3y agoTangential, but this brought me to https://en.wikipedia.org/wiki/Bogosort 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.
- baka367 3y agoI'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.
- hpeter 3y agoIt's broken on brave