7 ms·
Pure CSS FizzBuzz
- waxim 11y agoNice idea.
- agjmills 11y agoWithout the JS: http://codepen.io/anon/pen/NqNKYv http://codepen.io/anon/pen/NqNKYv
- honest_joe 11y agoHe did use JS to just populate the HTML :-)
- zodiakzz 11y agoWith HAML :) http://codepen.io/anon/pen/MwyYey http://codepen.io/anon/pen/MwyYey
- bmelton 11y agoThis is kind of brilliant. I think if I were interviewing you, and asked you to do a FizzBuzz (which is unlikely, but let's ignore that), and you said "Oh, cool, can I do it in CSS," I'd have probably laughed at you. This is clearly an academic exercise, but one that I would never have even thought to attempt, as I probably would have chalked it up to probably waaaay more trouble than it's worth.
- josephmx 11y agoI'm grinning more than socially okay at work right now, thanks a lot! It's really appreciated
- workingandtired 11y agoI could be wrong, but I believe the post that he's referring to as inspiration is this one: https://css-tricks.com/tales-of-a-non-unicorn-a-story-about-the-trouble-with-job-titles-and-descriptions/ https://css-tricks.com/tales-of-a-non-unicorn-a-story-about-... A pretty interesting story about job titles and descriptions that are not representative of the job they're trying to hire for.
- josephmx 11y agoThat's correct, but I left the link off because the fizzbuzz comment isn't strictly relevant, it just interested me a little. Would it be better etiquette to put the link in?
- workingandtired 11y agoI don't think it's necessary for the post. I figured the comments would be a nice place for it if people were curious.
- carlosrg 11y agoMore like a story of someone that applied for a job that asks for Javascript skills without knowing Javascript and then blamed the company, and made a blog post/rant about it, because they hired someone else that probably fits that particular position better.
- bramgg 11y agoAgreed, I can't believe people are taking that blog post seriously. It's literally FizzBuzz we're talking about.
- pyre 11y agoThe job description was a bit disjointed, and she chose to ignore relevant portions and focus on irrelevant ones. The company in question could have done a better job with the posting (wtf is a "B.Sc. in Design"?). On the other hand, her reaction that FizzBuzz is only for some uber CompSci geeks is nonsensical. First sentence from the Wikipedia page for FizzBuzz: Fizz buzz is a group word game for children to teach them about division.
- dkersten 11y agoI thought so too at first (and its not like FizzBuzz is hard), but if you read the post you'll see the job advert was for design, only listing JS as "HTML5, CSS3, JavaScript" after talking about design up until then (and then only listing further JS stuff as nice to haves). The person made clear that they can do all the design stuff and can use JS to add basic interaction to the frontend. The job post didn't ask for a programmer. I don't see how its the designers fault for not being a programmer.
- kylemhill 11y agoHere's the solution with numbers in the non-fizzbuzzy boxes: http://codepen.io/kylf/pen/zGqOjy http://codepen.io/kylf/pen/zGqOjy
- bshimmin 11y agoI feel like it must be possible to do the numbers using CSS's counters: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count... If I didn't have a whole bunch of work to do this afternoon, I'd have a go myself.
- bshimmin 11y agoAnd, seconds earlier, someone else had already done the hard work!
- d_j_s 11y agoYou can use css counters to output the count on non fizz, buzz or fizzbuzz iterations http://codepen.io/anon/pen/QbNLxO http://codepen.io/anon/pen/QbNLxO https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count...
- mcallister 11y agoPretty cool. Slightly different than the one posted three years ago https://news.ycombinator.com/item?id=3939294 https://news.ycombinator.com/item?id=3939294
- smrtinsert 11y agoOh, now you're a REAL programmer. Congratulations.
- dbj 11y agodisplay: float; indeed
- josephmx 11y agoEmbarrassing! I'm not sure how it happened, sorry
- jebronie 11y agobut how well does it scale?
- dandigangi 11y agoAm I missing something on how this is CSS only when you are using jQ...?
- nine_k 11y agojQ is only used to generate enough divs that serve as input data. You can remove jQ and add the divs manually.
- nine_k 11y agoI love how declarative style makes the important part of the code practically trivial. If anyone needs an example to show how functional style is more concise and expressive than procedural, this could be one.
- patrickocoffeyo 11y agoWhy is this on hacker news.
- cpach 11y agoWhy not?
- patrickocoffeyo 11y agoit's not particularly interesting or inspiring... maybe that's just me.
- cpach 11y agoEach to their own I guess. I wouldn’t say it’s the most incredible hack in the history of computing. Still a fun experiment IMHO.
- honest_joe 11y agoBTW i loved your honest CV. No exaggerating.
- kyllo 11y agoDoes this mean that CSS is now Turing-complete, or does it just mean that Turing-completeness is not required to implement FizzBuzz?
- cporios 11y agoTuring completeness is not required to implement FizzBuzz. But CSS + HTML are turing complete since Rule 110 can be implemented in pure CSS + HTML. EDIT: I'm not entirely right. Here's a good answer: http://stackoverflow.com/questions/2497146/is-css-turing-complete http://stackoverflow.com/questions/2497146/is-css-turing-com...
- kyllo 11y agoOK, and I see the Pure CSS Fizzbuzz is likewise not Turing complete, because it would still require a Javascript client to append divs to the document in a loop (or when called) in order to pump the automaton.
- mdpopescu 11y agoThere's a mistake in that code: .fizzbuzz:nth-of-type(3n)::before{ content: "buzz"; } Should be "fizz".
- collyw 11y agoCan anyone recommend some intermediate resources for learning CSS. I have gone though css dog, and I kind of know most of that stuff already. Everything seems to be beginner or expert level. And not csszengarden. It has some wonderful examples, but doesn't really explain how they work.
- _zachs 11y agoHonestly you should get a book. After you go through enough web resources you realize a pattern of dropping off after only scratching the surface of a topic, and books really help you to solidify the knowledge. I've heard great things about this book (http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=zg_bs_379357011_1 http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118...), but it is geared more towards beginners.
- Practicality 11y agoNice! I am going to use this concept to solve problems "that can only be done in Javascript." Can't wait to confuse and delight the designers.
- livingston 11y agoShorter version of pure css fizzbuzz :) http://codepen.io/livingston/pen/xGVbGd?editors=110 http://codepen.io/livingston/pen/xGVbGd?editors=110