sunil.page

Is it fizz buzz?

Friday, 21st February 2020 ◆ Softly making amends to get ready (11)

I remember playing Fizz Buzz at primary school in my Year 6 class (age 10-11). Starting with 1 and going down the register, each kid counts the next number. If the number is a multiple of 3 or 5 (or 15), however, you don't say the number and instead say either "fizz", "buzz" (or "fizzbuzz") respectively.

1, 2, fizz, 4, buzz, fizz, 7, 8, fizz, buzz.... you get the gist.

It was fun, simple and achieved its goal of training our mental maths skills.

Recently, though, the game has re-entered my consciousness as it has become a popular tool by which to test programmers. I have not been asked to code fizzbuzz in an interview so far, however it is best to be prepared. So for a possible future in which I am asked to create an implementation under pressure, I will spend some time thinking about it now. I'll pick three popular languages I have been using recently, and make an implementation in each of them.

XSLT

I have had the "pleasure" of using XSLT in both of my last two jobs. It's a language used to transform XML documents. I have seen it be used to transform backend data from XML into HTML for the front-end (in a move I would class as "not sensible"), and to convert RSS feeds from various providers into a single format so they can all be processed together ("sensible").

XSLT is meant to be used to transform documents on a largely element-by-element basis. For example, to transform <cat> into <pet type="cat">. It can get much more complex than that, but still there is no need for loops, so the language doesn't have them.

This is clearly the perfect choice for a language with which to create fizz-buzz. XML is ubiquitous, so by outputting it we are opening the possibility for our program to interface with a wide variety of applications. Furthermore, we are not tied into a small pool of compilers or interpreters as if we'd used a more convential language. There are XSLT implementations written in every language under the sun, so our prospective employer will definitely have no problems in running our program.

We do have to get around the issue of there being no loops, which we can do by creating a recursive template. We also have to provide a valid XML file as an input document, even though we ignore it. Nevermind, these are minor inconveniences compared to the myriad benefits of writing our program in XSLT.

Implementation

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" indent="yes"/> <xsl:template name="number"> <xsl:param name="current"/> <xsl:param name="max"/> <xsl:if test="$current &lt; $max"> <xsl:choose> <xsl:when test="$current mod 15 = 0"> <number>fizzbuzz</number> </xsl:when> <xsl:when test="$current mod 3 = 0"> <number>fizz</number> </xsl:when> <xsl:when test="$current mod 5 = 0"> <number>buzz</number> </xsl:when> <xsl:otherwise> <number><xsl:value-of select="$current" /></number> </xsl:otherwise> </xsl:choose> <xsl:call-template name="number"> <xsl:with-param name="current" select="$current + 1"/> <xsl:with-param name="max" select="$max"/> </xsl:call-template> </xsl:if> </xsl:template> <xsl:template match="/"> <numbers> <xsl:call-template name="number"> <xsl:with-param name="current" select="0"/> <xsl:with-param name="max" select="256"/> </xsl:call-template> </numbers> </xsl:template> </xsl:stylesheet>

If you want to try it yourself, there are many XSLT runners online, such as this one. For the XML input, you can use any valid XML, such as <a/>.

Output

<?xml version="1.0" encoding="UTF-8"?> <numbers> <number>fizzbuzz</number> <number>1</number> <number>2</number> <number>fizz</number> <number>4</number> <number>buzz</number> <number>fizz</number> ... </numbers>

MySQL

MySQL is another language I've used a lot of. If you have a database full of data, using MySQL to interact with it is a dream. However, if you want to create a phantom table with new values, things get a little more complex. There are no loops in MySQL, and no easy way to select a list of numbers without simply writing them all out.

Let's say I want to create a dummy table with two rows, I must write each select separately and get their union:

SELECT 0 UNION ALL SELECT 1

Note that SELECT 0, 1 selects one row, with each number in a separate column which is not what I want.

If I want to select, say, the first 256 integers, this would be unfeasible. However, if I were to join 8 tables like the above, MySQL would select 2^8 rows. Then I can convert those rows into the numbers I want using binary. Easy!

Implementation

SELECT IF(num % 15 = 0, "fizzbuzz", IF(num % 3 = 0, "fizz", IF(num % 5 = 0, "buzz", num))) n FROM (SELECT b1.`1` * 1 + b2.`1` * 2 + b4.`1` * 4 + b8.`1` * 8 + b16.`1` * 16 + b32.`1` * 32 + b64.`1` * 64 + b128.`1` * 128 AS num FROM (SELECT 1 UNION ALL SELECT 0) b1 JOIN (SELECT 1 UNION ALL SELECT 0) b2 JOIN (SELECT 1 UNION ALL SELECT 0) b4 JOIN (SELECT 1 UNION ALL SELECT 0) b8 JOIN (SELECT 1 UNION ALL SELECT 0) b16 JOIN (SELECT 1 UNION ALL SELECT 0) b32 JOIN (SELECT 1 UNION ALL SELECT 0) b64 JOIN (SELECT 1 UNION ALL SELECT 0) b128 ORDER BY num ASC) t

CSS

CSS is another great tool to use for programming test. Every interviewer will have a web browser, and thus they will definitely be able to run and check your code. You might argue that Javascript is equally as common yet more suitable for a task like this. However, if JavaScript is so perfect, why would people keep coming up with alternatives?

There is a CSS feature called counters which would allow the numbers to be generated via pure CSS. However, it didn't work in my browser of choice (Safari), so I am leveraging the automatic numbering you get with ol lists instead. This does means we get a decimal point after each number, but I can live with that.

Implementation

This one does require a bit of HTML as well, so perhaps that is cheating...

<ol class="fizz-buzz"> <li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li> </ol>

ol.fizz-buzz :nth-child(3n), ol.fizz-buzz :nth-child(5n) { list-style: none; margin-left: -1em; } ol.fizz-buzz :nth-child(3n)::before { content: "fizz" } ol.fizz-buzz :nth-child(5n)::before { content: "buzz" } ol.fizz-buzz :nth-child(15n)::before { content: "fizzbuzz" }

Output