Practical Math for Frontend Developers
Written by Nikos Vaggalis
Friday, 26 June 2020

This course raises the eternal question about the relation between programming math. "Do I need Math to become a Programmer?" Let's find out!

As Mike James put it in Does Math Help Programming Or Programming Help Math?:

The relationship between programming and math is something that both sides of the fence discuss from time to time, but mostly it is the programmers who think about it. The reason I suppose is that many programmers don't consider themselves good at math and therefore the assertion that math is essential to programming is threatening.

In practice, while programming has its roots in math, you can go through most of your daily routine without having to think about it. But this can be looked at the other way around - learn math through programming. Since math is about abstract concepts, something concrete that shares the same principles, like programming, can actually make you visualize those concepts and understand true math through it. That's the concept behind educational languages, like Logo for example.

Much of the time, the intersection between math and programming is mostly about computational thinking and doing calculations, not solving equations and proving formal type  - well unless your job is that of a Data Scientist. Computational thinking is approaching a problem in abstraction, breaking it down to distinct smaller tasks and linking those tasks together, while the calculations may well involve calculus and variable substitution.

And that's at the core of "Practical Math for Frontend developers", a free, hour-long online course from Ryan Gonyon. It doesn't bore you with formal math, types and equations but shows you how a pinch of math can prove useful in real world scenarios, such as building a shopping cart for instance.

With that said, what we are going to learn through this short course is to build :

• A Shopping Cart, where you'll generate a list of products, calculate the total price of the products and apply a tax rate.

• A Weekly Scheduling app, where you'll learn about the Date object, perform layout manipulation and learn about the reduce function.

• A Monthly Expense Sheet, which brings together everything you've learned and gives you a few handy tips and tricks.

The first scenario "Shopping Cart", involves rolling your own random function since Javascript's Math.Random returns values
only between 0 and 1 and maybe we want values from 10 to 30. We then use our custom made roll() function to generate dummy data for testing , like generating a list of products and their prices.The next step is invoking the Reduce function to get the total of the cart as well as adding tax to it.

In "Weekly Scheduling app", we get to manipulate the Date object plus CSS variables to generate the HTML layout to solve interesting problems, like when defining the layout for the Weekly schedule to have each day take up the 1/3rd of the application's height. This chapter as a whole was mostly about algorithmic thinking in breaking a task into sub-tasks.

And finally in "A Monthly Expense Sheet", we combine everything learned: high order Javascript functions, CSS variables, HTML layout manipulation, all that blended with maths for logistics and layout related calculations.

In conclusion, "Practical math for frontend developers" is a short well-executed guide into light math for use in programming and real world scenarios. And while the HTML layouts generated are ugly and bare bones, they are effective as a way of teaching the basic concepts.

If you are looking for more mathematical thinking see our coverage of some Coursera courses.

#### Related Articles

Does Math Help Programming Or Programming Help Math?

Language Aptitude Not Math Predicts Programming Skill

Learn To Code with JetBrains Academy

 An Introduction and More to Virtual Reality On Coursera16/07/2020What Is Virtual Reality? How Can I Use It? These questions can be answered by following a series of five courses offered on Coursera by Goldsmiths, part of the University of London. You can dip into t [ ... ] + Full Story Elyra JupyterLab AI Extension Improves Usability13/08/2020Elyra AI Toolkit is now available in a 1.0 release. The open source project extends the JupyterLab user interface to simplify the development of data science and AI models. + Full Story More News