Dear Ms. FEWD: Going in Circles

Dear Ms. FEWD,

I’m in 7th grade. I always hear kids asking, “When am I ever going to use this math?!” and I’m guilty of the thought, too. When does an adult ever solve for x? Why do we need to know the formulas and equations for shapes? Can you give some good examples of what types of math are used in your job, please?

Thanks,

Going in Circles


Dear Circles,

As a kid, I had the same question, too. Am I ever really going to use this? Maybe not, but you never know. It’s good to take in what you can now, so you have a wide base of knowledge to prepare yourself. It’s another tool in your ever-growing arsenal. Even the basic principles of math apply to programming, in that there are formulas and sequential steps that have to be followed to get the correct result. I love math, and exhausted Kent State University’s math program by the time I was in my senior first semester in high school. Was it a waste of time? Not at all. I wouldn’t trade what I learned for a second. And, I use it all the time in my career! From the simple to the complex, there isn’t a day that goes by where I don’t use math.

For instance, developers use algebra when doing something as minor as resizing pictures. Let me give you an example. A designer hands you mock ups, but they’re in the smallest end of the viewports. However, we need the largest size image needed, because if you load a small image, it will blur in the larger viewports. But we need to find out what that largest size is, by solving for x.

In our hypothetical mobile mock, we have an image that goes 100% width of the browser, and measures 200px height by 320px width. The largest end of our mobile viewport might be 1024px. With this information, we know:

200px                  x

———     =     ———

320px             1024px

Now we can simplify the equation, and solve for x in order to get the largest height needed to reproduce the 200px h by 320px w ratio when in the smallest end of the viewport:

1,024px * 200px = 320px * x

204,800px = 320px x

1/320px * 204800px = 1/320px * 320px x

640px = x

So, we now know our image dimensions will have to be 640px h by 1024px w.

We also use geometry quite frequently. In fact, we had a client that asked for images to be animated, and spin slowly around a central circle. I’ve put the general idea in a jsfiddle, where different background colors are used, so you can easily parse out what’s happening. And, it’s been commented, so you know what’s doing what. You can play with the math and see how it works between both CSS and JS.

Squares, triangles, and circles are all common shapes that developers need to draw. Think of a tooltip you’ve seen on a website – these are usually compromised of a rectangle for the informative text, and then a triangle as the arrow pointing to what text this tooltip is giving the user more information on. However, we can also do fun shapes too, like Pacman! There is no end to what shapes you can create in CSS, you just need to know your math.

Remember learning about the Fibonacci sequence? You may have noticed it in nature – in flowers, pinecones, and even in nautilus shells:

The sequence runs like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc.

The numbers are found by starting with 0 and 1 and adding the last number from there.

0+1 = 1

1+1 = 2

1+2 = 3

2+3 = 5

3+5 = 8

5+8 = 13

8+13 = 21

13+21 = 34

21+34 = 55

This is the perfect sequence to size our tickets. When they come in, we mark it as a small ticket (1-3), medium ticket (5-8), or large ticket (13+). We know that if we get above 21, then the ticket could probably be broken down into more manageable pieces. This gives us a number to work from, in order to be able to adequately know how big of a project it will be, how many people we need on the team, and how fast we can get it done.

I hope I’ve given enough examples covering a wide range of topics to show that math is useful and important. It’s helpful not only on the programming/development side of my job, but for the business side of it, too. Stick with it, it sometimes takes repetition, but there’s no better feeling when the lightbulb clicks, and you get it. And remember, don’t let advanced math intimidate you. It’s as easy as pi!

Happy developing!

Ms. FEWD

 

Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com

Our services

One experience. One team.

Studios.
  • Digital Strategy & Planning
  • Data & Analytics
  • Content Strategy
  • User Experience Design
  • Campaign Management & Operations
Labs.
  • Data Hub
  • Content Hub
  • Intelligence Hub
  • Digital Publishing
  • System Operations