Thursday, May 2, 2019

Programming Challenge no. 2: Fibonacci Sequence (Understanding Pseudocodes)

We are finally solving another programming challenge from Project Euler (after a long, long, long time).

 Our challenge for today:
Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ... 
By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.
Before we open our compilers to start programming, we need to understand what the problem requires and the conditions we need to consider.

For this challenge, we'll use Java. (Actually, as long as you understand how the code works, you can use any language you feel comfortable to use.)

Analyzing the Problem


What we need to get: 
sum of the even-valued terms in the Fibonacci sequence.

Conditions:
1.) The numbers we need to add are in Fibonacci sequence.
2.) The numbers we need are less than four million (That's a big number!)
3.) The numbers we need are even.

Now that we have established our objective and requirements, let's create a pseudocode for this challenge.

Creating the Pseudocode


A psuedo-wha?

I've mentioned the meaning of this word in the previous puzzle but let me explain it better here. Let's break down the word. When you Google the word "pseudo", the results will tell you that it means "fake" or "mock". So when you say someone is a pseudoscientist, that person is a "fake scientist".

So we're making a "fake code"?

Err.. Well, to be precise, we are writing a code that resembles a programming language. It is not a real code since if you run it in a compiler, it would create errors. This makes sense because pseudocodes are written not for computers but for humans. With pseudocodes, you need not worry about programming language syntax.

Below is an example of pseudocode:

Declare fibonacciFormer, fibonacciLatter, currentFibonacci, limit and sumOfEvenFibonacci to Long
Initialize limit to 4000000
Initialize sumOfEvenFibonacci to 0
Initialize fibonacciFormer to 1
Initialize fibonacciLatter to 1
Initalize currentFibonacci to fibonacciFormer + fibonacciLatter 
While currentFibonacci is lesser than limit
     Check if currentFibonacci is even
         if True
             sumOfEvenFibonacci = sumOfEvenFibonacci + currentFibonacci
      fibonacciFormer = fibonacciLatter
      fibonacciLatter = currentFibonacci
      currentFibonacci = fibonacciFormer + fibonacciLatter

      return sumOfEvenFibonacci


Pause and try to understand what is happening. If your brain is refusing to process the "fake code" above, you'll have a hard time understanding the real one so let me enlighten you. However, if you figured out what the pseudo code does, you can move on to the coding section.

Let's start with what a Fibonacci sequence looks like. The figure below shows the Fibonacci sequence below 100.



So the next number is the number of the two preceding numbers in the sequence. Can you guess what's the next number after 89? Just add 55 and 89!

Now that we understand the Fibonacci sequence, let's go back to our pseudocode. You'll see that we have variables called fibonacciFormer and fibonacciLatter. These contain the preceding numbers while currentFibonacci is the sum of these numbers. Basically, currentFibonacci is the next number in the sequence. We initialized fibonacciFormer and fibonacciLatter to 1 because the Fibonacci sequence always starts with 1. We also initialized sumOfEvenFibonacci to zero.

Now the conditions! We are given the limitation of getting the numbers not greater than 4 million. We can hard code the condition to the number but it is wise to use a variable (in this case, our variable is called limit) so we can easily modify the code in the future when the requirements change.

1.) We will check if the currentFibonacci is lesser than our limit.
      If it is, then we will go inside the loop and arrive in our next condition.
2.) Since the problem set specifically wants even numbers, we need to check if the currentFibonacci is even.
3.) If it is, we add it to our current sumOfEvenFibonacci.
     If it is not, we skip it.
4.) We will then re-assign the values of our fibonacciFormer to get the value of fibonacciLatter.
5.) The variable fibonacciLatter gets the value of our currentFibonacci.
6.) Then we get the next number of our sequence by adding fibonacciFormer and fibonacciLatter and assign it to currentFibonacci.
7.) Then back we go to our loop until finally, we reach the limit.
8.) We exit the loop and we return the sumOfEvenFibonacci, which should contain the sum of our even fibonacci numbers.

And that's what our pseudocode is trying to do.

Coding


So here is our pseudocode written in Java:

public long getSumOfEvenFibonacci(long limit)
    {
      long fibonacciFormer, fibonacciLatter, currentFibonacci, sumOfEvenFibonacci;
      sumOfEvenFibonacci = 0;
      fibonacciFormer = 1;
      fibonacciLatter = 1;
      currentFibonacci = fibonacciFormer + fibonacciLatter;
   
      while(currentFibonacci < limit)
      {
        if(currentFibonacci % 2 == 0)
          sumOfEvenFibonacci = sumOfEvenFibonacci + currentFibonacci;
     
        fibonacciFormer = fibonacciLatter;
        fibonacciLatter = currentFibonacci;
        currentFibonacci = fibonacciFormer + fibonacciLatter;
      }
   
      return sumOfEvenFibonacci;
    }

It looks like our pseudocode, right? Except this one has brackets and semi-colons. Also, notice that to check if the number is even, we used the expression currentFibonacci % 2 == 0. The percentage symbol represents the modulo operation. We'll get to that in another post sometime.

Recommendation


If you run this Java code, it will give you the answer to the second puzzle in Project Euler. But this is not an efficient algorithm.

Algo-what now? Rhythm? We talking about music now?

Let's deal with algorithms in the next puzzle, aight? For now, give yourself a pat for taking the time to understand the Fibonacci sequence and how to get the sum of its even numbers.

Sunday, March 31, 2019

The Past Five Years

I'm not sure if you've noticed but there's a gap of five years between my recent post and the post before it. The only excuse I could give for this gap is: life happened.

I won't go into details what exactly happened. I'm simply thankful that I can blog again.

There are some changes though. I won't be giving ActionScript and Flash tutorials anymore. I know. I know. You might be saying to yourself: "But you never gave any tutorials of sort." Well.. Now I definitely won't :P I loved programming with AS3 and Flash but since most browsers have dropped support for it, there's no point learning it from here on forth. (I might still make games with it though.)

What are the other changes?

I have recently enrolled for postgraduate diploma in Information Technology. I am now currently learning new technologies that I would love to share in this blog:


  • ASP.NET
  • C#
  • Node.js
  • PHP
  • MySQL
  • Continuous Integration/Deployment


and more! I will still continue giving guides for the Project Euler puzzles. I will still share mathematical and computer science concepts. And I will still rant about my programming life.

I hope you will continue to learn with me in this journey!

Poroporoaki! (Oh. Did I mention that I have recently moved to New Zealand? Yes. I'm studying in NZ now.)

Learning Web Development: CSS

CSS or Cascading Style Sheets is used to layout and style websites. HTML or Hypertext Markup Language is used to structure information in websites. You should not confuse the purpose of these two languages. When writing HTML, think how you want your information to be structured, not displayed. To design your website's appearance is CSS' job.

Layouting
One of the very first things that a web designer has in mind when designing a website is its layout. How big is the header? How many columns should the webpage have? Should the navigation stay on top or stay at the side?


This is an example of w web layout with a header, navigation menu, a main content between two contents and a footer at the bottom.
Example of Web Layout (Source: W3School)



This is an example of website layout taken from W3School. Another great website for learning layouting with CSS is the blog called Learn CSS Layout. Learn CSS Layout teaches the basic layouting and briefly introduces flexbox. To learn more about Flexbox, here is a complete guide to it. You might also want to learn about Grid, a grid-based layout system using columns and rows. The CSS Grid is also a great resource in learning Grid layouting.

CSS Coding Guidelines
Working on a project by yourself means you're only communicating with yourself so there's no need to follow conventions. However, most developments of software happen by teams and guidelines are needed to make sure that everyone is on the same page.
Here are some guides to check out:


You might be thinking, "Wait. So which one should I follow?" If you're working by yourself, choose the one you're comfortable with. If your company has different guidelines, follow the one that gets you paid (or make suggestions to improve their guidelines.)
Teams benefit from guidelines but it's also worthwhile to follow them even if it's a one-man project.

HTML/CSS Tools
  • The HTML CSS Javascript website provides free online tools to maximize your coding efficiency in web development. They have cheatsheets, templates, code cleaners and more. 
  • Do you want to create animations using CSS but doesn't know how to? Do you want to simply specify the layout you want for your website and get the CSS styles for it? Check out The Ultimate CSS Generator. (This website is actually called Web Code Tool and is not limited to CSS. You can also produce HTML and Javascript codes.)
  • Have no time to style your menus? Luckily there's a CSS Menu Maker which speeds up your web development by providing various menu themes.
Note: These are simply tools to aide you in your web development. Don't rely on them and ditch learning CSS. Knowing how CSS works and how to read CSS code are necessary to be an effective web developer.

Web Development Learning Websites
Want to enhance your knowledge in CSS or web development in general? Here are some websites to visit to unleash your web development skills:

I hope you found these resources helpful. Pang signing out.