DEV Community: Saima Rahman

Handling Exceptions in Ruby

Saima Rahman — Thu, 27 Aug 2020 23:13:51 +0000

When I started working on my first CLI project, I encountered many errors and spent most of my time debugging, which is good because I have read somewhere that “Only half of programming is coding. The other 90% is debugging.” After digging through ruby docs, I found out about these useful keywords, begin and rescue.

What are “keywords” in ruby?
Let me give you a refresher! Keywords or reserved words are used by a language for internal processes and therefore cannot be used as a variable.
For example:

#'if' and 'end' are keywords to check the condition of a given code.
#Here 'if' is checking some condition
if 2 > 1
  puts "I love Ruby"
end # "I love Ruby"
#"if' cannot be used as a variable
#'if' has been already reserved by the ruby language
if = 2 # : syntax error, unexpected '=')

Although there are a bunch of keywords in ruby, I will be focusing on begin and rescue. They are also known as exception handlers. In ruby whenever an exception occurs, it terminates the execution of our program, this is where the exception handlers come into play. The code in your project, that may raise an error or exception can be enclosed within the begin…end block, followed by a code that is written in the rescue block to handle this error:

def some_condition
 puts 3/0
end
#=> divided by 0 (ZeroDivisionError)

The above code is giving us a ZeroDivisonError. Let's handle this error together!

def some_condition
 begin
    puts 10/0
 rescue
  puts 10/2
 end
end
some_condition #=> 5

As expected, this method returned 5! We know, in ruby, a number cannot be divided by zero, and so it will raise an exception. So we wrote the “problematic” code inside the begin block. The code got executed but did not break our program. Instead, it ran the code under the rescue block and returned us with a nice answer! Phew, without an error! Keep in mind that if the code inside the begin block does not raise any possible errors, the code will be executed just fine. The rescue will only be executed when there is an error!

There will be a number of scenarios, where you will also want to see the error messages even after the program is being rescued. Let’s see how it works but this time with a different exception:

def some_condition
 puts "hello".even?
end
some_condition #=> in `some_condition': undefined method `even?' for "hello":String (NoMethodError)

Let’s not break the program and still print the error message:

def some_condition
  begin
    puts "hello".even?
rescue Exception => e #Exception object is being saved to a variable
    puts "hello".length
    puts e.message #prints the error message
  end
end
some_condition
#=> 5
#=> undefined method `even?' for "hello":String

Nice! We have handled our error successfully! We were able to rescue our program as well as print the error message. So what exactly are we doing here? We saved the Exception class to a variable “e”, and now the error message can be printed in the rescue block. Since we already know the type of error, we can rewrite our code like this:

def some_condition
  begin
    puts "hello".even?
rescue NoMethodError => e 
    puts "hello".length
    puts e.message #prints the error message
  end
end
#returns the same result

Please copy-paste these codes and play around with the errors for better understanding! Happy error handling!

Looping Through JavaScript Objects

Saima Rahman — Thu, 20 Aug 2020 02:59:31 +0000

Before understanding how looping works, let us talk about JavaScript Objects. Remember, when we declare a variable using let, const, or var keywords? We set the identifier or variable name equals to a value. JavaScript variable can contain only one value, for example:

let fruit = "apple";

Where the fruit is the identifier or name of the variable and apple is the value. Let’s say, we bought some fresh fruits from the farmer’s market. How can we save all the fruits and fruit count into one variable? Yes, you guessed it right! We can use objects because they can contain many values. Specifically, key-value pairs contained inside curly braces. Key being the property and value is whatever we set it equals to. It could be a string, number, array, object or function definition. Before we begin looping, let refresh our memory on how to gain access to the key-value pairs of an object.

Accessing an object’s key-value pairs

let fruit = {
            name: ["apple", "orange", "grape"],
            fruitCount: 30
            }
console.log(fruit.name) // [ 'apple', 'orange', 'grape' ]
console.log(fruit["name"]) // [ 'apple', 'orange', 'grape' ]
console.log(Object.values(fruit)) // [ [ 'apple', 'orange', 'grape' ], 30 ]

Here, we are using bracket notation, (.) dot notation and Object.values method (object) for accessing the object’s value.

for…in loop

let fruitCount = { 
   apple : 2, 
   orange: 3, 
   grape: 6 
}

In the above example, we have names of the fruits as our key and count of each fruit as the value. So what if we want to count the total number of fruits?

let totalCount = 0
for(let key in fruitCount){
      totalCount += fruitCount[key]
  }
console.log(totalCount); // 11

Here we are iterating through each object property using a for..in loop. By using this method, we have now access to the values using the bracket notation on the object itself.
We usually use for..in loop to iterate over the properties of an object. Check if a value exists for a key, display the key-value pairs using console.log. This is actually a great debugging tool. A key thing to remember is, for..in is not recommended to use with arrays because the index order is important.

for…loop

There is another way of doing this, using Object.keys method that takes in an object as an argument and returns an array of keys.

let fruitCount = { apple : 2,
                   orange: 3,
                   grape: 6 
}
let fruitArray = Object.keys(fruitCount)
  let totalCount = 0
 for (let i = 0; i < fruitArray.length; i++) {
     let fruitName = fruitArray[i];
     totalCount += fruitCount[fruitName]
}
console.log(totalCount); // 11

In this example, we are getting back an array of keys, which we have saved it to a variable named fruitArray. Using a for…loop, we iterate through each fruitName (keys) in the array. Since we know that we can key into an object to get the value using bracket notation, we use this trick to get the fruit count and add it to the total count.
Happy Coding!

JavaScript .splice() method

Saima Rahman — Wed, 12 Aug 2020 16:51:07 +0000

There are many array methods in Javascript but the one with which I struggle the most is, .splice() method.

So the other day, I came across a leet code problem, which asked me to manipulate an array without making a copy of it! I searched for methods and I remembered, that .splice() can be useful for this problem. So without wasting any time lets dive into the basics of .splice() method.

              Deleting A Number from an Array 
let array = [2,3,4,5,6]                                                  //At index 0, let's delete the first number which is 2 in this case!
array.splice(0, 1) 
==> return value:[2] // returns the removed element
==> console.log(array)// [3,4,5,6]
//At index 0, Let's delete, first two numbers which is 2 and 3 
array.splice(0, 2)
==>  return value:[2,3]
==>  console.log(array) // [4,5,6]

In the above example .splice() is taking two parameters:
The index number(the point at which we want to start deleting elements)
The second parameter is the number of elements we want to remove from an array.

                Delete elements and add things
let array = [2,3,4,5,6]
//starting from index one, I want to remove two elements and add chicken
array.splice(1,2, "chicken")
==> return value: [ 3, 4 ]
==> console.log(array) // [ 2, 'chicken', 5, 6 ]

Here we are giving .splice(), three parameters, the third parameter is optional. Recap:

First parameter: Starting index, the point at which you want to delete things
Second parameter: Number of elements, you want to remove from an array
Third parameter: Optional, elements you want to add at a specified position

Delete none, Add things 
let array = [2,3,4,5,6]
//At index one, delete nothing (hence 0 as the second parameter), and add few more elements
array.splice(1,0,"grandma", "loves", "chicken")
==> return value: []
==> console.log(array) // [ 2, 'grandma', 'loves', 'chicken', 3, 4, 5, 6 ]

When you don’t want to delete anything, just add “0”, to the second parameter.

Replace elements with other things
let array = [2,3,4,5,6]
//At index 4, replace number 6 with other elements
array.splice(4, 1,"grandma", "loves", "eric")
==> return value: [ 6 ]
==> console.log(array)// [ 2, 3, 4, 5, 'grandma', 'loves', 'eric' ]

I hope this blog was helpful! Now go ahead and play around with .splice() until it is clear and also challenge yourself with a leet code problem: Move Zeros.

Reference:
Javascript Splice

Complexity & Big0 notation

Saima Rahman — Tue, 04 Aug 2020 04:04:26 +0000

When we talk about complexity and evaluate algorithm problems, we usually talk about two things:

Time Complexity
- Deals with how efficient or fast an algorithm is.
Space Complexity
- Deals with how much space or memory it will require.

Complexity is always related to the input, more importantly, the size of the input.

for example:

O(n): Linear

input= [1,2,3,4,5,6,7,8,9,10]

function countNum(){
let counter = 0
  for (let i = 0; i < input.length; i++){
    console.log(counter++)
  }

}

countNum(input)
//output:
0
1
2
3
4
5
6
7
8
9

In this example, when we talk about time complexity, we are actually talking about the number of operations. Since the number of input is 10, the number of operations will also be 10. If you increase the number of elements in the array, the number of operations will also increase. It is therefore 1:1 relation. We call this Big O(n), where n is the number of elements in the given array, and since it is 1:1 relation we call this linear.

O(n^2): Quadratic

input= [1,2,3,4,5,6,7,8,9,10]

function countNum(){
let counter = 0
  for (let i = 0; i < input.length; i++){
    for(let j = 0; j < input.length; j++){
      console.log(counter++)
    }
  }

}

countNum(input)//
Check the console.log, you will see 
the operation has increased by 10folds

In this example, the number of operations is growing faster than the input. We have a nested loop, each loop has a time complexity of O(n), so we multiply the time like so: O(n) * O(n) = O(n^2). Note: We don't really focus on the coefficients, all we care about is the power.

O(logn) Logarithmic

It is the opposite of exponential growth. For example in binary search the input is sorted and split into two, where one half is discarded depending on the condition and another half is being checked. This saves time complexity and considered the fastest of solving an algorithm problem after O(1).

O(1) Constant

Accessing the array index and not looking up the value. Just accessing the index directly. Then push and pop in a Stack is also constant. Removing and inserting from a Queue is considered to have O(1) complexity.

Happy Coding 😄

Intro to redux

Saima Rahman — Wed, 29 Jul 2020 21:13:32 +0000

Redux is a predictable state container for Javascript applications, as mentioned in redux documentation. It took me some time to get my head around this concept. What does it actually mean?
Let’s break this down into three points and focus on each of them separately. Redux is for:

1. Javascript Apps

This simply means Redux can be used with any frameworks such as React, Angular, Vanilla Javascript, etc. It can be used independently and is not tied together to react.

2. It is a State Container

It stores the state of the application as a single source of truth. This means, whenever we want to look up or share information about the state, we can always go back to that one place. In a typical react application, states can be defined in different components. Imagine, you are working on a project which has nested components, it will be really messy and as well as difficult to keep track of the state. This is where Redux can help us, by storing all the information about our state in one place.

3. It is predictable

In react application, we use the setState() method, to change the state of a component, but in redux driven applications, all state changes happen through “reducers” which are nothing but pure functions. To learn more about reducers check out getting started with the redux doc. Keep an eye out for my next blog, where I will write about the three main concepts of redux. But the take away is we can always predict the behavior of the state of our app.

React components can have their own state, then why do we need redux as a container to store all state? Let's look at the big picture:

In the above diagram, we have a javascript app with nested components. Let's say, component A has an input field to hold username, therefore we are locally setting the state in this component. What if it’s sibling, component B wants to display the username? Then we would find a common parent, in this case, component C and move the state one level up and send the state as props to C’s children which are components A and B. But as your app grows bigger and bigger, now components I and J, needs access to the username. In this scenario, the best option is to lift the state up in the hierarchy, which is the App itself. So now we have to pass username props through all the intermediate components F, G, and H. Even though F, G, and H components don’t need the props, they still need to be informed about it in order to pass to their children. But now if we incorporate the Redux library into our app, we can move states from our app components to the Redux State Container. Now if we change the username, in component A, Redux container will only communicate with component A and other components who are in need of the value without having to inform other components.

The purpose of this blog is to introduce the bigger picture of why using redux can be useful! Understanding this concept will help to manage state in larger applications.

Ruby 101 part:1

Saima Rahman — Sun, 19 Jul 2020 23:38:12 +0000

Hello, Rubians! This blog post is for newbies who want to learn the basics of Ruby or just here to refresh their memory!

What is Ruby?

Ruby is an object-oriented language. It simply means everything in ruby is an object, including the data types.

Four Basic Data Types:

Numbers (Integer & Floats)
Strings
Symbols
Boolean (True, False, Nil)

Today I going cover Numbers only.

#Addition
2 + 2   #=> 4

#Subtraction
 3 - 1   #=> 2

#Multiplication
 3 * 3  #=> 9

#Division
20 / 5  #=> 4

#Exponent
 2 ** 2  #=> 4
 4 ** 3  #=> 64

# Modulus (find the remainder of division)
print(4 % 2 )  #=> 0  (4 / 2 = 4; no remainder)
print(15 % 4)  #=> 2  (10 / 4 = 3 with a remainder of 3)

Difference between Integers and Floats

Integers are whole numbers, such as 16 and floats are decimal numbers such as 16.0, 0.25, or 4.3.

Ruby Things!

In Ruby, when you want to do some arithmetic with two integers the answer will always be a whole number:

5/2 #=> 2

It is weird, right? In order to get the correct answer, we have to use float.

5/2.0 #=> 2.5

Convert Integers to floats or vice versa

Integer to a float:
2.to_f #=> 2.0 
18.to_f #=> 18.0 

Float to an integer
3.0.to_i #=> 3
1.8.to_i #=> 1

Number methods in Ruby:
Well, there are many numbers in Ruby, I am going to share two over here, rest you can check here.

.even?

13.even? #=> false
12.even? #=> true

.odd?

14.odd? #=> false
15.odd? #=> true

Keep an eye out for my part:2!
Keep coding! 😁

Props in React.js

Saima Rahman — Sat, 18 Jul 2020 17:05:30 +0000

What are “props” and how do we really use it? Assuming, we all know about react Components, which are reusable, meaning they can return any JSX, which can be included in any part of our application. Let's build a simple app whose only job is to welcome a user by their name.

Access Props in Functional Component

Here the parent is App.js, which is a class component, and its child Welcome.js is a functional component.

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
 render() {
    return (
     <div>
      <Welcome/>
      <Welcome/>
      </div>
    );
  }
}
export default App;

In App.js, we are rendering Welcome which is a functional component, twice, inside the return function. The Welcome.js file looks like this:

//this is Welcome.js file
import React from 'react';
const Welcome = () => {
    return <h1>Hello Joe Goldberg</h1>
  }
export default Welcome;

Now if we tune into http://localhost:3000/, the result should like this:

Because we are rendering the Welcome component twice in App.js, it will print Joe Goldberg twice, returning the inner text of the h1 element from the Welcome function.

But, what if we want to make this component dynamic? Meaning we want to print different usernames or welcome different people, using the same component. Now we can make good use of Props, which is also known as properties. Think about how we add attributes, such as CSS class to an HTML element. Similar idea, we want to add props to our component as their property or attribute and set it equals to the desired value, in this case, username. After assigning values to our props, we have to somehow send props from App.js to Welcome.js, let us take a look:

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
render() {
    return (
     <div>
      <Welcome name="Joe Goldberg"/>
      <Welcome name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

In App.js, we have named our props as “name” and have set it equals to the desired username. Now we have to pass the props to the Welcome component.

//this is Welcome.js
import React from 'react';
const Welcome = (props) => {
  //console.log(props);
    return <h1>{props.name}</h1>
  }
export default Welcome;

Notice that App.js which is a parent component is passing props as a parameter in the Welcome function (arrow function), which can be then used in the function body. If we console.log props, we can see that props are nothing, but a plain javascript object with key and value pairs. We can access the key of “name” using (.) dot notation like this, props.name inside curly brackets because it is a JSX expression.

//console.log(props)
>{name: "Joe Goldberg"}
>{name: "Mrs Maisel"}

Now if we tune into http://localhost:3000/, the result should like this:

We have successfully made our component dynamic by using props!

Access Props in a Class Component

Now we will rebuild the same app, whose job is to say goodbye to the users, using their username. In App.js, we are rendering the Goodbye component which is a child, twice and passing the “name” as our props.

// this is App.js
import React, { Component } from 'react';
import Goodbye from './Goodbye.jsx'
class App extends Component {
 render() {
    return (
     <div>
      <Goodbye name="Joe Goldberg"/>
      <Goodbye name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

Unlike Welcome which was a functional component, Goodbye will be a class component:

//this is Goodbye.js
import React, { Component } from 'react';
class Goodbye extends Component {
  render() {
    return (
      <h1>Goodbye {this.props.name}</h1>
    );
  }
}
export default Goodbye;

Notice the difference, we are not sending props as parameters anymore. Since Goodbye is a class component, props will be accessed with “this” keyword which is a reserved word in react. Now we can render the h1 element with the associated username using this.props.name inside curly brackets.
Now if we tune into http://localhost:3000/, the result should like this:

A key thing to remember is props are immutable! If we try to do this:

his.props.name = "Jon Snow";

Our application will break and throw an error at us. Try it yourself!

Points to be noted:

Props can be any data type
String
Integer
Array
Objects
Functions
Boolean
Props are immutable