Forem: Waqar Mohammad

CODING BYTES: PART 5 — Loops

Waqar Mohammad — Fri, 14 Dec 2018 14:27:17 +0000

What is a Loop?

In programming, loops are used to perform repeated tasks based on a set condition. As an example, if we wanted to run a piece of code x amount of times.

'for' Loop

    // A random array with my items from my football kit
    const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];

    for (let i = 0; i < kit.length; i++) { 
        console.log(kit[i]);
    }

    /*
    Breakdown
    for (begin; condition; step) {
        // ... loop body ...
    }
    */

The for loop is the most commonly used and it can be tricky to understand what is going on at first, but lets break it down. Firstly, look at the syntax which is like an if statement. You have the for keyword, followed by parentheses for the conditions and the curly braces for the code that will be looped.

const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];
We are declaring an array to loop over (which is just another way of saying checking through / going through).
for Similar to if, we are starting the for loop
(let i = 0; i < kit.length; i++)
This is where it gets a little confusing. For me, the i was the part which didn't click. So we can start with that. The i can be any letter or word, it is just used similar to a variable to indicate the element in question.
Looking at the example above, when we declare i = 0, we are asking the loop to begin at point 0 in the array, which will be the beginning (sweater). (To see why 0 is at the first item you can read this article).
i < kit.length is setting our condition stating while i is less than the length of our kit array, carry on looping.
Finally i++ is the step to be taken on each loop. In our example, after each loop we want i to increment by one.
{ console.log(kit[i]); }
Within the loop body, we are asking it to console.log() the element on each iteration of the loop.
Specifically the kit[i] is referring to each element of the array, where kit is our array and [i] is pointing to the element.

😬 It may be a little crazy at first, but run through it a few times then try typing the example code out and watch the console for the output. There is also a for/in loop which we will cover in the future, enough 🤯 for now.

'while' Loop

 let i = 0;
    while(i < 4){
        console.log(i)
        i++;
    }

    /* 
    Breakdown
    while (condition){
        code
        loop
    }
    */

Just be careful with ALL loops as you could end up running an endless loop if all the elements are not input correctly.

With the while loop you can see the similarities in structure and syntax. These are less common but once you've understood the for loop it should make sense enough. 😉

As loops can be awkward to get to grips with, practice as much as possible. Why not try out the tasks below?

Further Learning

  for (let i = 0; i < 10; i++) {
        console.log( i );
    }

Read the code above and write down what you think it will output before coding it yourself.
Change the for loop in to a while loop.

If you get stuck drop me a tweet 😃. Good Luck and happy coding!

This will be the last part of Coding Bytes for this year. For those celebrating, have a great time, see you next year. Happy holidays! 🎄

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

Hey Newbies - What Do You Struggle With Most?

Waqar Mohammad — Sat, 01 Dec 2018 14:59:55 +0000

Hey 👋 guys,

Hope you're all well. Learning to code can be hard and it's inevitable we will come across challenges.

What do you/have you struggled with most?
What advice would you give others?

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

CODING BYTES: PART 4 — CONDITIONAL STATEMENTS

Waqar Mohammad — Fri, 30 Nov 2018 11:25:26 +0000

What is a Conditional Statement?

Conditional statements come in use when one wants to perform different actions based on different input/criteria. The simplest example is a true or false question. Let's look at an example of an if statement.

if

   // Is the sun out today?
    let sun = true;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    }

    // Output will be: Yes the sun is shining ☀️

    // Syntax of if statement
    /*
    if(condition) {
        code that will be executed if condition is true
    }
    */

So above we are asking if the sun is out (testing the condition) and because it is true, the code between the curly braces (see example of syntax in comments above) is being executed. So what happens if the sun isn't out?

else

 // Is the sun out today?
    let sun = false;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    } else {
        return 'No, sorry!'
    }

    // Output will be: No, sorry!

    // Syntax of else statement
    /*
    if(condition) {
        code that will be executed if condition is true
    } else {
        execute this code if the first condition is false
    }
    */

Our else statement allows for a fallback. The else keyword just adds to the if statement by offering a backup if the condition isn't met.

else/if

You can probably guess what the else/if statement does 🤔.

  // Is the sun out today?
    let sun = false;
    let rain = false;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    } elseif (rain) {
        return 'No, sorry it is raining today 🌧️';
    } else {
        return 'It is mild'
    }

    // Output will be: It is mild

    // Syntax of esle/if statement
    /*
    if(condition1) {
        code that will be executed if condition 1 is true
    } elseif (condition 2) {
        execute this code if the condition 1 is false and condition 2 is true
    } else {
        execute this code if all of the above are false
    }
    */

As we can see, the else/if continues giving us extra options to choose from. The statements are processed from top to bottom, so there must always an else when using else/if. The else isn't necessary for an if statement.

Switch

var day = 'thursday';

switch (day) {
    case 'sunday' :
        day = "Sunday";
        break;
    case 'monday':
        day = "Monday";
        break;
    case 'tuesday':
        day = "Tuesday";
        break;
    case 'wednesday':
        day = "Wednesday";
        break;
    case 'thursday' :
       day = "Thursday";
        break;
    case friday:
        day = "Friday";
        break;
    case  'saturday':
        day = "Saturday";

}

// Syntax of switch statement
    /*
    switch(expression) {
    case x:
        code block
        break;
    case y:
        code block
        break;
    case z:
        code block
        break;
    default:
        code block
}
    */

The switch statement executes the code, and returns the matched value. The break keyword stops executing the code once the match has been found as further execution is not required. In the example, a default wasn't used but it can be added if required.

Differences between else/if and switch

There are a few smaller differences between the two, which can be discussed at a later stage.

Further Learning

To practice, create a conditional statement for the following scenario. There are 4 greetings for the day depending on the time.

Between 00.00 and 12.00 the greeting will be 'Good Morning'
Between 12.01 and 17.00 the greeting will be 'Good Day'
Between 17.00 and 20.00 the greeting will be 'Good Evening'
Between 20.01 and 23.59 the greeting will be 'Good Evening'

You can use console.log() for outputting your results or try CodePen to play around with better syntax highlighting.

If you need get stuck drop me a tweet 😃. Good Luck and happy coding!

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

Productivity Hacks

Waqar Mohammad — Mon, 26 Nov 2018 19:36:15 +0000

Hey Guys 👋🏽,

Hope everyone is OK. When learning (reading a lot) i've found myself getting distracted easily so today I thought to try the Pomodoro technique and i'm happy to say I saw some great results!

It got me thinking, what other hacks work you guys?

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

Learning Resources for Dev Newbies

Waqar Mohammad — Tue, 20 Nov 2018 18:49:31 +0000

Dev Newbie Learning Resources

Self-learning coding can be difficult as well as confusing. During the course of my learning I have been collating resources but never had single list so here goes.
If you feel I have missed anything, please complete a pull-request. I will be updating it as and when required too.
When learning, it is too easy to get confused by the noise, just try to learn the basics and the rest will follow. See the roadmap below to help you focus.

ℹ️ Apologies in advance if it is Javascript-heavy as it is what I have been working with most.

Roadmap 🏎️

RoadMap - Follow this and you can't go wrong.

Learning 🤹

FreeCodeCamp - Without a doubt, the best learning resource for me personally
Udemy
Lynda

Books 📚

Very well rated and easy-to-understand books.

Documentation / Guides 📂

CSS

CSS Tricks - Extremely useful CSS guide, I normally use when stuck
Co Drops - Another great CSS Resource

JS/HTML/Jquery

PHP

PHP Manual

Blog Posts 💻

Lawyers Code (My personal attempt to solidfy my learning and hopefully pass on some knowledge)
Eric Elliot - Extremely knowledgeable and informative, but on the advanced side.
FreeCodeCamp Medium Publication - Various authors with some great content
Smashing Magazine
CSS Tricks
Zen of Programming

Video Tutorials 📽️

Traversy Media - Various languages and frameworks covered
DevMarketer - Mainly PHP/Laravel but also covers some great concepts around git
Laracasts - Geared towards Laravel, but other frameworks/langs are covered as well as general principles
Wes Bos

Useful Twitter Accounts 🐦

lawyerscode - Me 😃
Javascript Teacher - Easy to understand tutorials, despite the name CSS and other useful information is shared.
Sara Soudein - Great for css and design related detail
Ali Spittel
Benjamin Spak - Positive, engaging content for devs
Getify
Veni Kunche - Provides great info on scholarships for conferences
Eleftheria Batsou - Great doses of energy and determination, especially around the #100DaysOfCode Challenge

Communities 🏢

DEV Community - One of the best dev communities I have come across
Dev Newbies Discord - General chit chat and helpful for dev newbies
#100DaysOfCode - Excellent community for learning as well as gaining momentum in your journey
Code Newbie

Help! 🆘

For When you are stuck

I am a Law grad working towards my first development role. Ask Me Anything!

Waqar Mohammad — Tue, 20 Nov 2018 09:37:53 +0000

Coding Bytes Part 3: Javascript Functions

Waqar Mohammad — Tue, 20 Nov 2018 08:24:47 +0000

This is part 2 in the Coding Bytes series, earlier parts are listed below:

Part 1
Part 2

What is a Function?

A function is in fact an object designed to perform a specific task, often on a repetitive basis.

Defining a Function

There are a few ways of defining a function, but we will focus on the most basic, so arrow functions/ ES6 functions will be overlooked for now.

    function nameOfFunction (parameters) {
        statement;
    }

As seen in the example above, the function keyword is used to define a function. The keyword is followed by a name of your choosing but it is normally good practice to describe what the function does - more on this below.

After naming the function we have the parameters in parentheses ( ) followed by our statement in curly braces { }. You can have up to 255 parameters defined separated by a comma. Parameters are similar to placeholders wherein the function knows to look for these to perform its intended use. You may encounter the term arguments used inter-changeably, but there is a slight difference, which is better explained in an example.

ℹ️ If you are using Chrome, you can try following along in the console.

Example

In our example, my friend is a carpet fitter who needs to work out the area of a room so he knows how much carpet is required. We know that area = length x width, so how do we put this in a function?

function area (length, width) {
  return length * width;
}

In the example, our function is named area and the parameters are length, width. You can see a return statement which stops the execution of the function and tells the function what we are expecting to see as a response. In the statement, we are asking for the length and width to be multiplied. In short, the task of our function is to multiply the parameters.

Invoking a Function

Invoking a function is just a fancy way of 'calling' a function. To call a function we just need to reference it by its name followed by parentheses. We can refer back to our example above and invoke the area function.

area(10, 5);

As you can see, we call the area function but you will notice the 10,5 in the (). The two numbers represent the length, width we mentioned earlier, otherwise known as parameters. But here, because they are data being given to the function - we call them arguments. Hopefully it is easier to see the difference between the two now 😃 .

All we are saying in the invocation above is, run the area function and use 10,5 as arguments. As we know our function is set to multiply the two arguments, resulting in the output of 50. Congratulations 🎉 we created and invoked our first function.

Further Learning

This was just a very basic function, but you can do so much more! To practice further, think about where a function can come in handy and try to create one. There is another example below, try to understand what it may do before copying it in to your console.

function sayHello(name, age){
  console.log(name + " is " + age + " years old.");
}

You will need to research what console.log() does, and remember strings are wrapped with " ". Good Luck!

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

To All Ye Naysayers - It's OK, I Know My Value 😃

Waqar Mohammad — Sun, 18 Nov 2018 21:47:33 +0000

I managed to bag my second FreeCodeCamp (FCC) certification for Javascript Algorithms and Data Structures and shared it to my small following on twitter. Before I knew it a fair few people had seen it due to Quincy (FCC founder) responding to the tweet.

I wasn't surprised by the amount of nice comments and congratulatory messages received as this community is awesome. I did manage to attract a couple of tweets which weren't as, well, congratulatory. They focused on the fact that the certificates didn't have any real value - meh 😒. Whilst what they tweeted didn't really bother me, I thought it important to share my responses so other people who come across the same attitude can see things in a better perspective.

Tweet 1

Tweet 2

Yes, technically, the certificates don't hold value, but then neither does our university degree right? The value these items hold are the blood, sweat, and tears we put in. The hundreds of hours of effort and time. The sacrifice. And the knowledge gained.

So if anyone tries to downplay your achievements - just let them know. But more importantly, make sure you know exactly what the each milestone you achieve means. And celebrate like a boss 👑.

P.S if you want to be a part of a support newbie community, come join us on Discord

Happy Coding!

Thanks for reading. If you want to join along in my coding journey come say hi 👋 on twitter. I can be found @lawyerscode

Talking About Burnout

Waqar Mohammad — Thu, 08 Nov 2018 10:06:50 +0000

👋 Guys,

It seems burnout is an important element of being a dev. I’ve seen a few threads on social media about it with newbies and seasoned professionals going through one or multiple occurrences. As a learner, I feel I have experienced it on occasion too.

Do you think it is discussed as much as it should be?
How does one reduce the risk and affect of it?
How do you deal with it if you have experienced it?

Favourite VSCode Plug-ins

Waqar Mohammad — Wed, 07 Nov 2018 17:08:08 +0000

👋 guys,

I know emmett is avail on other Code editors too but it’s one that I like. Other than that I just have one that shows icons based on the file extension and autocomplete.

For those that use VS Code, what are your fav plug ins?

Code Newbies - Lets Connect

Waqar Mohammad — Mon, 05 Nov 2018 19:32:36 +0000

Hey guys 👋,

Have been in this community for a few weeks now and it is 😎. Everyone seems so friendly and the content is amazing too. So much to learn!

I’m just wondering how many newbies / learners there are on here. It would be great to connect and grow together. Come say 👋.

Coding Bytes: Part 2 — Data Types, Operators & Syntax

Waqar Mohammad — Fri, 02 Nov 2018 18:09:36 +0000

This is part 2 in the Coding Bytes series, earlier parts are listed below:

Part One

Data Types Continued...

In the first part we didn't get to finish of all of the data types. This was intentional as the post was getting a little longer than I wanted, and secondly, during the course of the series some things will be omitted so as to keep things as simple as possible.

Objects
We have covered arrays previously, and similar to arrays are objects. An example of an object:

var me = { 
  firstName:"Waqar", 
  lastName:"Mohammad", 
  age:33, 
  eyeColor:"brown"
};

As you can see, arrays and objects are similar. As we move forward in the series we will go in detail about the difference between arrays, multi-dimensional arrays and objects. For now, we just need to know objects can be used to store data that has descriptive properties, such as in the example where I am the object in question. See the table below for a representation of the 'me' object.

Property	Property Value
firstName	Waqar
lastName	Mohammad
Age	33
eyeColour	brown

Boolean (again)
We covered that boolean is a true or false value which can also be represented with '1' or '0'. In actual fact there are a few more 'falsy' values. For now, we won't go into details but it's important that we skim over them.

Falsy Values

0
false
null
undefined
""
NaN

Operators

Arithmetic Operators
Operators are the same as you will have seen in math(s) class during school and may use daily. These are known as arithmetic operators. The table below shows how they work.

Please note: x = 10 and y = 3 in examples.

Operator	Symbol	Example
Addition	`+`	x `+` y = 13
Subtraction	`-`	x `-` y = 7
Multiplication	`*`	x `*` y = 30
Division	`/`	x `/` y = 3.33
Modulas (remainder of a division)	`%`	x `%` 3 = 1
Increment	`++`	var z = x`++`. Result `z = 11`
Decrement	`--`	var z = x`--`. Result `z = 9`

The modulas operator may be a little confusing, but all we are doing in the example above is dividing x by 3 and asking the computer to carry on dividing equally as long as possible, then give us the remainder which here is 1. So instead of the 3.33 we get when we do the standard division of 10 / 3, we are getting a remainder of 1 because 3 can be divided in to 10 a total 3 times, but on the fourth attempt, there is only 1 left - which is what the modulas operator gives us. I know it can be confusing at first 😕! But you will get used to it, I promise.

Another thing to note is that the ++ and -- operators can come before or after the value in question e.g. ++y or y++, and the positioning is important which we will review at a later stage.

Lastly, there are other operators which we will review as the series proceeds.

Syntax

Syntax in Javascript (and other languages) are a set of rules, such as we have in spoken languages like English.

Keywords
We have come across the var keyword before. Keywords are reserved for certain actions where var is used to assign a variable. It must be noted VAR or Var cannot be used instead of var as Javascript is case sensitive.

Semicolon
A semicolon or ; is used to end a statement, like a full-stop or period . would end a sentence.

Comments
We will often need to comment in code, so starting with two slashes // will let ensure any text/data after them will be ignored. An example is shown below. Note the multiline comment syntax too.

// this is an example of a comment.
var test = "test";

/*
This is a
multiline comment
*/

Identifiers
Identifiers are essentially names. The rule in Javascript is that a first character of an identifier must start with a letter, _, or a $ sign. It cannot start with a number. A fun way of learning / testing if your identifier is valid can be seen here.

Types of Case

Camel Case

In programming we will come across a few types of case. We have come across camel case in the object example above where firstName was the property. In camel case the words have no space between them and the first letter of each word, excluding the first word, are capitalised.

Pascal Case

Pascal case is exactly like camel case, the only difference being the first word has a capital letter too. So instead of firstName as it would be in camel case, here it would be FirstName.

Others

Other examples are underscore where each word is separated by an underscore, first_name. And hyphen, first-name.

Whitespace and Line Breaks
Javascript ignores any spaces that you put in between code, unless they are specified in something like a string.

Thanks for reading. If you want to join along in my coding journey come say hi 👋 on twitter. I can be found @lawyerscode