

Pure CSS FizzBuzz - josephmx
http://joseph.mx/blog/2015/05/12/Pure-CSS-FizzBuzz.html

======
d_j_s
You 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/Count...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Counters)

~~~
criswell
If you don't mind the dots you can do:
[http://jsbin.com/resihe/1/edit](http://jsbin.com/resihe/1/edit)

~~~
dkersten
Took me a moment to see how you were doing that. Nice!

------
workingandtired
I 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-...](https://css-tricks.com/tales-of-a-non-unicorn-a-story-about-the-
trouble-with-job-titles-and-descriptions/)

A pretty interesting story about job titles and descriptions that are not
representative of the job they're trying to hire for.

~~~
carlosrg
More 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.

~~~
dkersten
I 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.

~~~
carlosrg
The job advert asked for someone that knows Javscript. This person doesn't
know JavaScript. The person that got the job probably knew Javascript.

I don't think this deserves a blog post ranting against that company because
they asked you a Javascript question in, I repeat, a job listing that
specifically asked for Javascript knowledge.

~~~
dkersten
The advertised job was for a "UX Engineer/Interaction Designer".

The responsibilities listed were:

    
    
        * Create low and high-fidelity mockups to effectively convey interaction and design ideas (e.g. wireframes, sketches, 'pixel-perfect' mockups, etc).
        * Deliver engaging, innovative prototypes, and contribute to front-end development of our products.
        * Collaborate with and synthesize feedback from other members of the team.
        * Evaluate the usability of new and existing products, apply user research findings, and make constructive suggestions for improvements.
    

The minimum qualifications:

    
    
        * B.S. degree in Design, Computer Science or related technical field or comparable practical experience.
        * 2 or more years of designing clean, valid, and compatible websites and applications.
        * Knowledge of Adobe Photoshop and Illustrator.
        * Clean and elegant visual design aesthetic.
        * HTML5, CSS3, JavaScript.
        * Passionate about creating responsive and delightful interfaces and experiences.
    

Everything except the _HTML5, CSS3, JavaScript._ scream visual/ux designer.
Nowhere does it say _programmer_. I don't think its a stretch that if you came
across that job post that you would assume that Javascript is needed in a
small way to tie bits and pieces together, like the author assumed. _EVERY_
thing else in that post[1] is about UX or visual design. They didn't say they
wanted a programmer, they said they wanted a designer who knows a small bit
about technical things. I think the author fits the bill, especially since
most job posts are now completely inflated with impossible requests (ten years
experience in a technology that's only existed for five? I've seen it done!)

[1] I'm ignoring the "preferred qualifications", since that heading makes it
sound like _nice to have_ not _must have_

~~~
carlosrg
Minimum qualifications: "HTML5, CSS3, Javascript". I think it's pretty clear.
You can question why the company needs a JS programmer in a design job. I
don't know. But it's clear in the requirements that Javascript could come up
in the interview. Knowing Javascript means you can code a loop and some
conditionals, which is all FizzBuzz requires. They didn't ask her to implement
a red-black tree or the Dijsktra's algorithm.

And besides that, who told her the rejection was about the FizzBuzz or JS
issue? Maybe another designer had a better portfolio or whatever. Again, a
blog post that got more attention it deserved to rant about something that
happens every day and has happened to a lot of us: a job interview that
doesn't go well.

------
bshimmin
I feel like it must be possible to do the numbers using CSS's counters:
[https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Count...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Counters) If I didn't have a whole bunch of work to do
this afternoon, I'd have a go myself.

~~~
bshimmin
And, seconds earlier, someone else had already done the hard work!

------
bmelton
This 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
I'm grinning more than socially okay at work right now, thanks a lot! It's
really appreciated

------
kyllo
Does this mean that CSS is now Turing-complete, or does it just mean that
Turing-completeness is not required to implement FizzBuzz?

~~~
cporios
Turing 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-
com...](http://stackoverflow.com/questions/2497146/is-css-turing-complete)

~~~
kyllo
OK, 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.

------
mcallister
Pretty cool. Slightly different than the one posted three years ago
[https://news.ycombinator.com/item?id=3939294](https://news.ycombinator.com/item?id=3939294)

------
collyw
Can 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
Honestly 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/1118...](http://www.amazon.com/HTML-CSS-Design-Build-
Websites/dp/1118008189/ref=zg_bs_379357011_1)), but it is geared more towards
beginners.

------
mdpopescu
There's a mistake in that code:

.fizzbuzz:nth-of-type(3n)::before{ content: "buzz"; }

Should be "fizz".

------
kylemhill
Here's the solution with numbers in the non-fizzbuzzy boxes:
[http://codepen.io/kylf/pen/zGqOjy](http://codepen.io/kylf/pen/zGqOjy)

------
livingston
Shorter version of pure css fizzbuzz :)

[http://codepen.io/livingston/pen/xGVbGd?editors=110](http://codepen.io/livingston/pen/xGVbGd?editors=110)

------
dandigangi
Am I missing something on how this is CSS only when you are using jQ...?

~~~
nine_k
jQ is only used to generate enough divs that serve as input data. You can
remove jQ and add the divs manually.

------
nine_k
I 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.

------
Practicality
Nice! 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.

------
agjmills
Without the JS:

[http://codepen.io/anon/pen/NqNKYv](http://codepen.io/anon/pen/NqNKYv)

~~~
zodiakzz
With HAML :)
[http://codepen.io/anon/pen/MwyYey](http://codepen.io/anon/pen/MwyYey)

------
dbj
display: float; indeed

~~~
josephmx
Embarrassing! I'm not sure how it happened, sorry

------
jebronie
but how well does it scale?

------
waxim
Nice idea.

------
honest_joe
BTW i loved your honest CV. No exaggerating.

------
patrickocoffeyo
Why is this on hacker news.

~~~
cpach
Why not?

~~~
patrickocoffeyo
it's not particularly interesting or inspiring... maybe that's just me.

~~~
cpach
Each 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.

------
smrtinsert
Oh, now you're a REAL programmer. Congratulations.

