- On the front-end browser for user interactions
- On the back-end server for responding to data requests
- On the command-line for automating tasks
Find the companion source code repo hosted on GitHub. It brings to life all of the ideas found in this article. Clone it and pull it down to your dev machine.
Open the file “client\index.html” in your favorite browser. For example Google Chrome.
You’ll see a simple page with an input field resting besides a button. Type a number into the entryfield and press the Go! Button. You’ll see the FizzBuzz algorithm working up to whatever count that you give it.
Look for the button callback handler in the Ready() function.
The button calls a function that’s stored globally and you may easily call it manually. In the browser’s developer console enter “CalculateFizzBuzz(12)” and you’ll see the page’s contents change. Get a feel for this by trying it with a few other parameters. Read the source code implementing the CalculateFizzBuzz() function.
Before you build a working user interface you can call your logic routines in the developer console. Get your logic locked down first and perfect it next by layering up your UI.
What’s A FizzBuzz?
Interviewing programmers often makes people ask them to code things. What sort of code? Basic algorithms in a relevant language.
The idea seems kinda crazy to me because it’s often done top of head and standing at a whiteboard. Neither condition is how I code. It seems to be the convention for interviewing programming candidates regardless of being far from perfect.
FizzBuzz is a small test seeing how a candidate approached a problem. Telling them to “think out loud” helps to see what they make of the problem and how they break it down into a solution. Rules for FizzBuzz are straightforward:
- Loop some amount of times, for example 100
- Print out “fizz” for every number that’s evenly divisible by 3
- Print out “buzz” for every number that’s evenly divisible by 5
- Print out “fizzbuzz” for every number that’s evenly divisible by 3 and 5
- Print out the number if not evenly divisible by 3 or 5
Simple stuff, right? You’ll be amazed to search on the web seeing many solutions abound, Each reveals thoughtful insights about its author. You’ll pick out what’s important during the code walkthrough.
Serving from the Backend
See how the app creates a simple web server in NodeJS.
Because NodeJS is very interesting technology, and we want to explore it more, try entering this URL “localhost:8080/42” and you’ll see the FizzBuzz routine run again with the count. In this case the right-most part of the route is pulled off and converted into a number telling how many loops to iterate.
Read the server-side implementation of CalculateFizzBuzz(). Note in particular how similar it is to the client-side one.
Play nicely with this because there’s little user input validation logic. You could certainly add more as an interesting exercise for the reader.
Invoking on the Command-Line
Why? Because file processing is a classic engineering job just like FizzBuzz is a classic interview question. It’s fun to build one too!
As you navigate around the article’s source code repo change into the “command_line” folder. Enter this command “node fizzbuzz.js” and read its helpful hint on how to invoke the program. It expects a single argument.
Try running it again like this “node fizzbuzz.js 50” and you’ll see text output as the logic churns through the number of iterations you ask for.
See how the RunWithParams() function directs that activity
Cool, right? Read through this program to learn more. Create your own command-line utilities to automate tasks. Drudgery is the death of creativity and that’s a human being’s primary value-add. Robots, on the other hand, thrive on orderly routine. Make little software robots to be your assistants.
- Functions tend to move into the global namespace and look like spaghetti but we want code to be rational and professional
- There is a this and it’s rarely a reference to the memory that you want it to be – particularly on callback context
- It has a notion of class, but objects are prototypal in nature, which totally works, but doesn’t track with most software experience
- It’s a C-style language, but has risky block-scope variable declaration because they’re hoisted to the top of their function
After a while I get used to these things and have design patterns that work around them, and sometimes leverage them.
Recognize there are some changes happening to this language. It’s evolved greatly in its years of service, and it’s about to receive it’s most significant change to date.
Digesting that specification could take up the remainder of your year. Check out this site instead because it wonderfully summarizes key upgrades to the JS language.
It’s probably best if you choose a new feature that’s appealing and dive headlong into it. Then grab another, and another, until you’ve learned everything new listed in ES6.
Google Chrome and Safari webkit have similar status pages. Find links to them in your favorite search engine when you’re ready to learn more.
What about specified features that aren’t in a browser yet? How can you learn firsthand about those? Transpilers convert a program in one language into another. BableJS makes it possible to turn ES6 into ES5. You can try tomorrow’s language today. Any of the language’s new features that aren’t covered in a forward-thinking browser might be available by way of this conversion tool.
- 2013 => ASM.JS: Optimized for speed, memory management, and pre-compiled.
- 2012 => TypeScript: Adds static typing, other classical OOP constructs
- 2011 => NPM: NodeJS module package manager
- 2011 => Dart: Types, traditional-looking classes, support libraries
- 2009 => CoffeeScript: lightweight syntax, new function declarations, class syntax
- 2008 => V8: Google’s open-source JS engine, compiles to machine code, iterative optimization, during runtime
You Can Learn It
People new to programming, who are dedicated to learning, will find a class organized by Khan Academy. It’s structured in a way that brings you to the discipline of building software. It could be slow going, but have heart, and concentrate on the coursework. It’s a tough job, but it’s worthy work.
You may enjoy my book if you learned from this article. It’s called Responsive Web Design Toolkit: Hammering Websites Into Shape. Get it on Amazon today!