Pure CSS FizzBuzz | Hacker News Reader

Pure CSS FizzBuzz

joseph.mx

43 pointsjosephmx60 comments

Open articleView on HN

You can use css counters to output the count on non fizz, buzz or fizzbuzz iterations

http://codepen.io/anon/pen/QbNLxO

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count...

If you don't mind the dots you can do: http://jsbin.com/resihe/1/edit

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

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

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

That'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?

I don't think it's necessary for the post. I figured the comments would be a nice place for it if people were curious.

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.

Agreed, I can't believe people are taking that blog post seriously. It's literally FizzBuzz we're talking about.

The 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.

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.

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.

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

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.

I am a front-end guy, and I end up doing UX, design, back-end, bug tickets support, managing projects and clients and even back-end.

If you try to stick to your job description, you are not going to be very helpful in the real world.

I do the same, and it's pretty common. I feel like the point of the post is that if that is what a company expects, they should outline it in the initial job description to prevent wasting everybody's time. Just saying HTML/CSS/JS Angular/Backbone doesn't indicate what level of expertise you want or how big a part they'll play in the position.

I'm fascinated by how involved people get in these kinds of stories. Hundreds of comments, and the mods been deleting a bunch. Post after post saying more or less the same thing. I need to figure out a way to channel this sentiment into an app and strike gold!

I think you just invented Twitter, congratulation

>and descriptions that are not representative of the job they're trying to hire for.

The position is described as a UX engineer and designer, and the applicant is expected to be experienced with JS and various frameworks for it.

The story seems to be more about a person who can't read and feels entitled to a job position they're not fit for. They were unable to display knowledge of basic for loops and conditionals and they were unable to convert a timecode string into seconds. Both of which are basically tests for "does this person even understand programming". Which they obviously don't because they wrote "OMG MATH" to a problem consisting only of the most basic logical concepts.

Maybe next time they should apply for a job that doesn't require programming knowledge.

I don't disagree with you that the job expected programming in their candidate. Nor should she have rationalized away the two lines that mentioned Javascript in description. However, I do believe that there is a communication error on the part of the company.

A UI/UX Designer/Engineer does not inherently require programming. In many startups, it does, as does wearing many hats. But if they're looking for someone to program, it should be outlined in the responsibilities. Knowing "HTML/CSS/JS" is different than building an entire application (just an example).

Not only that, but the line "Experienced with Object Oriented JavaScript and modern JavaScript libraries such as Ember, Backbone, or Angular." was placed under "Preferred Qualifications", which to me says "desirable but not necessarily required". If that's not what they meant, they should have clarified the importance.

My personal opinion is that if a job wants you to build stuff, they should outright say "You will be responsible for developing and maintaing a code base, in addition to designing and lending UI/UX expertise" rather than just loading a job listing with keywords.

I think the job posting clearly communicated that the applicant should at least have a basic grasp of JavaScript. On a related note, it's weird that the author claims to have experience with Ember/Angular.js or other similar frameworks without being able to write the FizzBuzz.

To be fair, I was a self taught programmer (albeit PHP) and I was on my second or third programming job before I came across a modulus in the wild. It's really simple basic programming theory, but not super common in live web development.

That's not being fair. That's your own problem. I'm also a self-taught programmer, but I don't feel like I need to compare myself to her.

The point is that she didn't fit the requirements of the job.

As a result, she did not get the job. That's pretty much end of story. If the job requires her to be "experienced with JS", that means that they want her to know the language.

And it's not just modulo. She didn't know how to convert a timecode string to seconds.

I have no idea how someone like that would be able to understand the code. Nor why she would think that "it's okay" not knowing those things and yet be an engineer at their company.

To repeat what has been said - she was not applying to a job as a designer. She was applying to a job as an engineer and designer. She didn't meet at least half the criteria (and she didn't have degrees, which is probably why they even asked her those questions to test what actual knowledge she has).

Yeah, I guess I didn't quite make my point clear. All I meant was that it's easy to work inside frameworks without truely understanding the language.

I wasn't "comparing" myself to her. I was just explaining how it could happen. I agree that she wasn't qualified for the job and didn't deserve to get it. But I'd be willing to guess that if they job had a line like "This job will be 75% programming, 25% ui/ux design", she wouldn't have applied. I feel like she was looking for a design job but didn't find out otherwise until the middle of the interview.

> To be fair, I was a self taught programmer (albeit PHP) and I was on my second or third programming job before I came across a modulus in the wild.

Knowing of an existing modulus operator/function isn't necessary to solve FizzBuzz; there's a fairly simple solution with just add/increment, assignment, and conditional logic without modulus.

Yeah, you're right about that. I was just trying to explain how you can work in an environment and make websites, but not necessarily grasp a full understanding of the language you're working in.

But my feeling from the post was that she is first and foremost a UI/UX designer, with some supplemental jquery/js knowledge. She applied for the job thinking it was a fit, but didn't find out otherwise until the middle of the interview. She wasn't qualified for what they were looking for, but I can empathize with the ambiguity in some of the job listings requirements.

> A UI/UX Designer/Engineer does not inherently require programming.

I would argue that UI/UX Designer might not, but UI/UX Engineer inherently does.

> But if they're looking for someone to program, it should be outlined in the responsibilities.

It was.

> Knowing "HTML/CSS/JS" is different than building an entire application (just an example).

FizzBuzz doesn't test ability to "build an entire application". It tests fairly minimal ability to apply logical reasoning and apply it with a programming language.

If you can't solve FizzBuzz in a programming language, its not unreasonable for a company to see that as a strong negative signal for any job requiring proficiency in the language, and JS proficiency was advertised as a requirement for the job in question.

Like I mentioned below, as a self taught web programmer, it was years before I came across a modulus in a real-world situation. I feel like it's understandable to not have a 100% grasp on all the basics and still produce stuff.

I think the more damning thing in her case is her questioning the question and seemingly not giving it a thorough effort.

Again, just listing "HTML5, CSS3, JavaScript." by itself as a minimum qualification doesn't specify what level of knowledge is expected of you. Familiarity? Proficiency? Master? Do you need to know how v8 interprets Javascript?

I'm not making the case that the job was right for her or that she was competent enough to handle it. I'm arguing that ambiguities in descriptions wasted both her time and the company's time.

>doesn't specify what level of knowledge is expected of you. Familiarity? Proficiency? Master? Do you need to know how v8 interprets Javascript?

It says "experienced with OO JS". That's vague, but not so vague that it can mean "I don't even know the basic operators of the language".

And that from someone who claims they can "teach others to code". (http://notlaura.com/services/teach-me-to-fish/)

> Like I mentioned below, as a self taught web programmer, it was years before I came across a modulus in a real-world situation.

So? Like I mentioned in response to that, modulus isn't necessary for FizzBuzz.

> Again, just listing "HTML5, CSS3, JavaScript." by itself as a minimum qualification doesn't specify what level of knowledge is expected of you.

FizzBuzz doesn't require much depth of knowledge in the target programming language. If you are can handle assignment, addition, conditional logic, and any one of iteration, jumping, or recursion (note that some language may not support all three of those, so which are available depends on language), you can do FizzBuzz.

What FizzBuzz does require (assuming you haven't already studied it and memorized a solution in the language given) is being able to think through a dirt simple problem and apply a programming language to it. It identifies people with minimal programming skills as distinct from those who are limited to cargo cult copypasta (well, again, except that memorization means it can produce false positives.)

Yeah, you're right. FizzBuzz does test a programmers mindset and it's pretty clear she didn't meet those expectations. I was focusing on a tiny aspect of it.

The main point I was trying to get at is that it doesn't seem to me like she identifies as a programmer. She's a UI/UX designer with a little bit of code experience. IMO, the whole point of it wasn't that she was upset that she didn't get the job or what they asked her. It was simply that based on the description, she went in thinking the primary focus was mockups, design and user testing rather than programming. Had the post been more clear about their expectations for the position, she wouldn't have tried for it.

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... If I didn't have a whole bunch of work to do this afternoon, I'd have a go myself.

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

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.

I'm grinning more than socially okay at work right now, thanks a lot! It's really appreciated

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

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

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.

Pretty cool. Slightly different than the one posted three years ago https://news.ycombinator.com/item?id=3939294

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.

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...), but it is geared more towards beginners.

There's a mistake in that code:

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

Should be "fizz".

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

Shorter version of pure css fizzbuzz :)

http://codepen.io/livingston/pen/xGVbGd?editors=110

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

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

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.

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.

Without the JS:

http://codepen.io/anon/pen/NqNKYv

He did use JS to just populate the HTML :-)

With HAML :) http://codepen.io/anon/pen/MwyYey

display: float; indeed

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

but how well does it scale?

Nice idea.

BTW i loved your honest CV. No exaggerating.

Why is this on hacker news.

Why not?

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

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.

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

Reply on news.ycombinator.com