DEV Community: Abdul Rahim Shahad

JS Fundamentals - Break VS Continue

Abdul Rahim Shahad — Thu, 19 May 2022 13:29:18 +0000

Break and Continue are two methods used in Javascript to determine when/where a loop should end or skip an element.

BREAK

Break is used in a loop where we want the loop to cease running. This is most commonly seen in switch statements where a break is usually placed at the end of the final case but it can also be used in other loops such as for loops as well. Below is an example of a break being used in a for loop.
for(let i = 0; i <= 10; i++){ if( i ===7) console.log('lucky seven'); break; }
In the above block of code, when the iteration reaches the number 7, "lucky seven" is logged to the console and the loop ends right there.

CONTINUE

Continue is different to break in the sense that it makes the loop skip/jump at the point where a given condition is met. Below is an example of continue used in a for loop.
for(let i = 0; i <= 10; i++){ if(i%2 = 0) continue; console.log(i) }
The output of the above block of code will be the odd numbers (1,3,5,7 and 9). This is because continue tells the loop to skip every iteration where i is an even number.

Summary

Break terminates the whole loop wherever it is placed or a condition is met.
Continue skips any iteration where a given condition is met in a loop.

JS FUNDAMENTALS - If/Else vs Switch vs Ternary Operator

Abdul Rahim Shahad — Mon, 07 Mar 2022 16:25:55 +0000

Oftentimes when programming, we are presented with situations where we have to write code that produces a certain output(value/result) based on what the input is and any conditions surrounding it. In Javascript, there are three(3) ways to handle such situations. You can use either an if/else statement, the switch statement or the ternary operator.

These 3 all work quite similarly but have their specific use cases and we are going to dive into them right away.

If/Else Statement

The if/else statement has two primary parts:

The if(true) block which states what should be returned if the given condition is met.
The else(false) block which states what should be returned if the condition in the if block isn't met.

This is true for a problem with only one condition as shown below.
if(condition){ code to be executed if true } else{ code to be executed if false }

One may ask, what happens if there's more than one condition? Well, that's where the else if block comes in. The else-if block is used when the problem has more than one condition as shown below. Think of it as basically as second or third if block based on how many conditions there are.
if(condition1){ code to be executed if condition1 is met } else if(condition2){ code to be executed if condition1 is not met but condition2 is met } else{ code to be executed if neither conditions is met }

So you can basically use the if/else statement for a problem with any number of conditions by simply having multiple else-ifs. But you can imagine how repetitive and confusing that would be if the problem had say a 100 conditions. That's literally a bug waiting to happen. A way around this is to use the Switch statement.

The Switch Statement

The switch statement is often the preferred method to use when we have to test for more than 5 conditions. This is because:

It is much easier to read and understand than an if/else statement
It works faster. This is because during compilation, the compiler creates a jump table for the switch. This results in the switch executing only the correct case rather than going through all possible conditions like an if/else would. This is what a switch statement looks like

switch (variable){ case (value1): (code to be executed) break; case (value2): (code to be executed) break; case (value3): (code to be executed) break; case (value4): (code to be executed) break; default: (code to be executed) }
The switch statement compares the given variable to each value by strict equality and decides which code to run. If none of the given values match the variable, the code under default is run.
It is worth noting that since the switch statement only checks for equality, it is not suitable for evaluating boolean expressions.

The Ternary Operator

The ternary operator is basically an if/else statement written in one line. It take three arguments.

First is the condition
Second is the code to be executed if the condition is true
Third is the code to be executed if the condition is false This is what it looks like:

condition ? (code run if true) : (code run if false)

Since the ternary operator is an expression and not a statement like an if/else, its output is always a value. We can as a result store the value of the operation in a variable and pass it on to another piece of code. This not possible with an if/else statement or a switch statement.

Conclusion

Use if/else if the operation involves not more than 5 conditions.
Use the switch statement if the operation involves more than 5 conditions.
Use the ternary operator when you want to make a quick decision and set the result to a variable.

FLATIRON SCHOOL FINAL BLOG POST

Abdul Rahim Shahad — Wed, 05 Jan 2022 04:18:01 +0000

Everything that has a beginning has an end, and so has my journey in Flatiron School's software engineering bootcamp come to and end. This was by far the bravest decision I ever made in my life to transition into tech and the journey was nothing short of amazing.

In the beginning, things progressed pretty smoothly in the bootcamp due in part to the fact that the earlier courses were more introductory in nature and as such easier. As things progressed however, I started encountering some stumbling blocks.
The first major hurdle I had to overcome was in phase 3 when we started with Rails. The library felt easy to use but at the same time pretty complex, which I would attribute to the fact that Rails is significantly larger than Sinatra which we had used in the phase before. Thankfully, there was no shortage of support at Flatiron and the difficulties I faced were addressed accordingly.

Fast forward, Javascript was pretty enjoyable but React/Redux seemed to present the some of the same problems I faced with Rails. The resources provided by flatiron which include but is not limited to one on one sessions with a cohort lead etc. helped me overcome any difficulties I faced.
Also, and maybe more importantly, I learned throughout this bootcamp that the one, sure-fire way to get good at programming is to keep coding and building projects. That's how you learn new concepts and get older concepts to stick.

Overall, as with everything, there were some ups and down but I do firmly believe that I made the best decision to attend Flatiron School and if I had to do it all over again I wouldn't choose anywhere else to help me transition into tech.

FLATIRON FINAL PROJECT - REACT/REDUX & RAILS API

Abdul Rahim Shahad — Mon, 13 Dec 2021 04:23:17 +0000

For my final project at Flatiron school I decided to make an app that would allow user post their own versions of popular movie titles online. This app is called Fan Fiction and has full CRUD functionality.

One of the major difficulties I faced when I was building the app was implementing reducer and action for edit functionality so I am going to explain how I implemented it.

First, I started from the reducer by creating a case for the edit action. In the reducer, I iterated through the movies array in my state object using the find method and returned the movie that matched the the payload I was going to receive from my edit action. The payload in this case was also an id. I then set this return value to a variable. After that, I set the variable to the current movie object in my state push it into my original state using the spread operator so as to not alter the other parts of the state.

Next, I created the action for both edit and update. Edit action grabs for us the item we want to edit and update makes the necessary changes to that item.

Finally, I made a reducer for updating. The logic I used here was to set a variable to the payload I was receiving from the update action. Then iterate through all the movies in state to see the movie whose id matched the id of the movie we get from the payload. When that movie is found, we replace it with the new movie object from the payload and then add it to the existing state using the spread operator. Finally we clear out our current movie object since it has already been modified.

Overall this project really tested my knowledge and skills but I am far from finished with this app. I intend to add more useful features to it in future.

FLATIRON SCHOOL - JAVASCRIPT & RAILS PROJECT

Abdul Rahim Shahad — Mon, 11 Oct 2021 20:42:27 +0000

The Project

This is the fourth and penultimate project we had to do in Flatiron's software engineering programme. The requirements of this project was to build a single page web application with a JS, HTML and CSS frontend, and a rails API backend. The application was supposed to have a least three AJAX calls, one has-many relationship on the backend and all communication between client and server was to be handled asynchronously in JSON format.

My Application

The application I made is called Yard Sale. It is an app that takes a real world yard sale online by allowing users to put up items they own, whether new or used, online for sale. The app has full CRUD (create, read, update and delete) functionality and also has extra features that allow users to search for items by name and also hide items on the page.

Making The App

The Backend

I built the backend of the application first. This was fairly quick and easy to do as I used the rails scaffold generator to generate the models, migrations and all other needed files. There is a slight difference in the commands used to generate a new rails app and a rails api. The command used for the rails api is rails new [app_name] --api. The api flag at the end tells the system the app is strictly being used as an api so it does things such as: 1. let your ApplicationController inherit from ActionController::API instead of ActionController::Base.

configure your generators so they skip generating unnecessary files such as views, helpers and assets.

I also used an ActiveModel Serializer to serialize the data and select only the information I wanted to display. Finally, I added model validations to control what data I wanted to be entered into forms on the frontend.

The Frontend

Most of the work I did came in the front end. First, I implemented separation of concerns concept by separating my JavaScript files into four different folders which each contained code that was exclusive to a unique purpose. The code was also organized into classes following Object Oriented Programming principles as shown in the code snippet below.

I used fetch() to make all my AJAX calls with the appropriate method included. I also took advantage of template literals( literals delimited with backticks (`), which allow embedded expressions called substitutions) to sometimes output HMTL in my JS classes as shown below.

Another concept I took great advantage of was the use of destructuring assignment when creating objects in my application.

Challenges

The main challenge I encountered during the making of the app was how to implement the search feature. I am going to detail how I did it below step by step.

The first step was to create a form in my html file where users can type in search terms.
<form id="search-items"> <input type="text" placeholder="Search item... "/> </form>
Next, we add an event listener to the input. But before that, it is always advisable to assign that input to a variable to make our code more readable and also in case we need to reuse that input.
We grab the input by first finding the particular form using document.forms[id] and then using the query selector to grab the input. In the case of our form above, this will be :
const [variable_name] = document.forms["search-items"].querySelector("input");
We now attach an event listener to the input we have grabbed. The event listener takes in two arguments: the name of the event and the callback function we want to run when the event occurs.
[variable_name].addEventListener("keyup", searchItem);
"keyup" here is the type of event and "searchItem" is the callback function.
We now have to define this callback function function searchItem(e){ }.
i. We set a variable to the value of the input and convert it to lowercase to avoid any case issues when users search for an item.
const [var] = e.target.value.toLowerCase();
ii. We have to set a variable to the "li" tag which contains the item assuming they are in a list.
const [var_name] = parentNodeofList.getElementsByTagName("li");
iii. This will yield a collection so we use the Array.from method to generate an array from this collection and use forEach to iterate through each element.
Array.from(var_name).forEach(element =>{})
iv. At this point, our searchItem function looks like this:
function searchItem(e){ const [var] = e.target.value.toLowerCase(); const [var_name] = parentNodeofList.getElementsByTagName("li"); Array.from(var_name).forEach(element =>{}) }
v. Now we need to grab the content of the exact text that we will be matching the user input against. In the case of my app, this was stored in an "li" element with this classname of "name". We set it to a variable as usual for reusability.
const [text] = element.querySelector(".name").textContent;
vi. Our next step is to compare the user input with the text content. We do this by determining whether the user-entered text is found anywhere within the name of the items in the database in the case of my app. This is done using the indexOf method. This method returns -1 if the object is not found in the array. So we say if the indexOf method does not return -1, the item should be displayed on the page. Else, the item should not be displayed.
if(text.toLowerCase().indexOf(var) != -1) { element.style.display = "block"; } else{ element.style.display = "none" }

vii. Our full searchItem function now looks like this:
function searchItem(e){ const [var] = e.target.value.toLowerCase(); const [var_name] = parentNodeofList.getElementsByTagName("li"); Array.from(var_name).forEach(element =>{ if(text.toLowerCase().indexOf(var) != -1) { element.style.display = "block"; } else{ element.style.display = "none" } }) }

Conclusion

This project has definitely been my favorite to work so far because I finally got to build an application which looked and felt like the web apps we use everyday. The whole process thought will never have been possible without the guidance of our very able cohort lead Candice, so I would like to thank her. Overall, this was a very fulfilling project and I learnt so much building it.

RigWorld - Flatiron School Rails Project

Abdul Rahim Shahad — Sun, 15 Aug 2021 05:41:20 +0000

I feel very relieved at last to get to this part of project mode. The blog post is usually the last thing I do and to get to this point now means I no longer have to endure sleepless nights at least till the next project is due haha.

The Rails section of this program was relatively easy in the first few weeks so it was kind of a huge shock to me when we dove into nested forms and everything all of a sudden became so exponentially hard. No, I'm not exaggerating. The difference in difficulty between the prior lessons and nested forms was so huge and glaring to see that it definitely threw me off a bit.
Thankfully, though, with the help of our very able cohort lead and a couple of youtube videos I was able to grasp enough of the concepts before project week came.

Okay, let us dive into my project. RigWorld is a simple Rails app that allows users(companies) present designs of their Rigs and other users leave reviews on them.The straightforward nature of the project meant I did not face any major difficulties until I tried to implement omniauth as a feature. The program would break whenever I tried to sign-in with an error that couldn't find the route I was sending my request to. Apparently google oauth2 does not accept 'get' requests and processes everything as a 'post' request and this was a headache for me because I was oblivious to the fact and whenever I tried to create a link to the omniauth sign in I was getting errors. Thanks to stackoverflow, the fix was simple. To specify in the "link_to" method that it was a post request and also add a csrf protection gem to my gemfile.

Overall, making this project was fun and I will definitely go back to add more features to the application!

PLAYER GENERATOR SINATRA/ACTIVE RECORD PROJECT AT FLATIRON SCHOOL

Abdul Rahim Shahad — Mon, 05 Apr 2021 02:58:45 +0000

I have just finished creating my second fully functional personal project at flatiron school. This is a Sinatra web app that has CRUD (create, read, update, delete) functionality. My app allows a user to create an account, log in and create a football(real football lol) player with certain attributes. The user can also edit and delete their creations but not those of other users. However, all creations by all users are available for all to view.

This project was inspired by my love for the FIFA video game series by EA Sports, especially Ultimate Team mode, and I plan to continue to build it out in the future to include more features such as allowing users to make player cards and build squads.

The process of making this project was definitely rocky for me in all honesty. I believe this is due to the fact that I did not finish all the lessons before I started with the project. My first hurdle came when I had to implement the signup feature. Next came the problem of having to figure out how to get my nav bar icons to appear on every page of the web app. Thankfully I figured out this could be solved by placing the navbar inside my layout.rb file instead. There were even times where syntax errors kept me stagnant on one feature for hours and sometimes even days.

Overall this was definitely my most challenging test at Flatiron school so far but I absolutely loved every bit of it. Good old Google search along with my cohort mate and friend Luis Castillo and DJ Ritchey(our cohort lead) helped me a lot along the way and I am deeply grateful to them.

I am definitely looking forward to taking on the next phase (Ruby on Rails). Can't Wait!!! Till next time, Bye!!

CLI PROJECT - COUNTRY DATA APP

Abdul Rahim Shahad — Fri, 05 Feb 2021 17:01:12 +0000

It's the third day of project week at Flatiron school and I'm still staring at a blank screen on my code editor. I'm lost. Confused. Not that I don't have the skills to start my project, I just don't know where to start from. Gretchen, our cohort educational advisor, comes through big time for me with a video that helps students plan out their project week. This was key to me taking what I consider my biggest step so far in becoming a software developer.

I decided to make an app that helps users find relevant information about countries since I love traveling and geography so much. Making this project was not easy by any means but at the same that it was so fulfilling. I struggled, was stuck on getting a single loop to work for days but thanks to the immense support from my fellow cohort mates I was able to make it. I started out the first day of project week somewhat doubting myself and my ability but today I can confidently say I feel competent enough.

This whole process has helped me expand my knowledge base and also has helped improve my problem-solving skills. What I've been able to learn from this exercise, I don't believe I would have been able to learn from just completing the labs alone, and for that, I am very happy. I have also learned that proper planning is absolutely key to success as a developer. Overall I am very happy with the outcome of this experience and I can't wait to see what lies ahead for me at Flatiron school and beyond.

Why did you decide to study Software Engineering?

Abdul Rahim Shahad — Sun, 20 Dec 2020 04:11:33 +0000

In the fall of 2015, shortly before I started college I had my first ever real-life exposure to computer programming. One of my friends had somehow blocked some of us from connecting to a wi-fi network we'd been sharing. When asked how he did that he simply replied "code", and showed us a long block of multicolored text on a dark background on his laptop screen. I didn't understand then how he did it, and I still don't understand now, but there's no doubt that experience sparked some interest in me to try to find out what all this "code" talk was about.
Fast-forward two years later in my sophomore year in college, I took two courses in Programming with Visual Basic and MATLAB. At the end of the semester, I built a simple calculator that solved basic petroleum engineering questions when given certain parameters. It wasn't a huge project but I was so excited about it because it only took the click of a button, using the calculator, to get answers whereas solving those same equations manually would've required at least 3 sheets of paper. This is where my interest in computer programming truly peaked and I made the decision to pursue a different career path. I had finally seen first-hand the power of just a few lines of code.
I started taking free online programming courses and even attempted to change my major at a point but that simply wasn't possible. I was told I'd gone too far into my current major(junior year at the time) and I'd have to start all over if I wanted to study computer science. This meant more cost, which I couldn't afford, so I had to just finish my current major and find another way.
As I continued to take free online classes, what began as an interest grew into a passion and I joined Flatiron school upon graduation from college. I aim to become a very solid developer by the time I graduate from Flatiron and also land a very good well-paying job because let's be honest; there's a LOT of dollars to be made in the software engineering job market.