DEV Community: Catchthembodies

Experience at a Coding Bootcamp

Catchthembodies — Thu, 25 Aug 2022 22:53:08 +0000

Ever wonder what life would be like in the tech field. You have seen all of these YouTube videos on it about how awesome the lives of engineers are and how you can create something from scratch. Well this is why I even entertained the idea of coding bootcamp and let me tell you, the best decision of my life. Attending a bootcamp and now finally coming to an end is an amazing feeling. There were times where I felt like this is not for me and I should maybe dropout but trust me once you get past feeling, it is so awarding.

Let's be real, learning on your own is very hard because there is nobody there to guide through the entire learning process but guess what with a bootcamp, you get to meet a bunch of people who are in the same boat as you and where everyone push each other.

In this blog, I plan on explaining why a coding bootcamp might be a great option. This blog will be broken down into different sections where I talk about the structure and value the program has provided.

The Curriculum Structure

I ended up completing the Flatiron School remote course which was attended from my parents’ house in Seattle. It was a nine-hour-a-day, five-day-a-week class that spanned over 15 weeks. The bootcamp was one hundred percent a well planned out curriculum which offered an amazing balance of front-end and back-end.

The front-end part of the curriculum included HTML/CSS, JavaScript, and React. The first 3 weeks was all on JavaScript and made sure we had a good foundation going into React. React is an amazing language someone should for sure learn. It is HTML and CSS but on steroids.

The back-end consisted of many parts including the learning of SQL, Ruby on Rails, and learning so many other functions that help advance your way to approach starting back-end.

Every phase we had to create a project with a group so you can get a feel of working with a team. So many skills are developed doing pair programming and team projects since communication and adapting to someone else's way to code.

Projects:

Javascript Project with HTML/CSS
React Project
Ruby Project with React as frontend
Ruby on Rails with React
A huge Capstone project showing what you have learned so far.

Value of the Program Provided

While the curriculum did scratch the surface of the technologies and frameworks listed above, some people devote entire masters and Phd's to the topics we were “taught” in three days. Which really helped me adapt to learning a new language in no time. The camp also gave me an experience like it was a workspace instead of always just learning. Before attending the camp, I already knew HTML/CSS, and Java but I was not sure what to do with the languages and how to connect the two. Attending the camp definitely helped get rid of my Imposter Syndrome which is pretty huge in the tech field. About 53% of engineers have this issue.

Non-Tech Lessons I learned

To end of this blog, I definitely want to leave some tips for a future developer who plans on attending a camp.

I know this might sound hard to some but (some) experience will go a long way. Some bootcamps offer pre-work programs that get web dev beginners introduced to the basics. These (typically short) lessons teach you the fundamentals of HTML, CSS, and JavaScript. But still look at the languages they are going to teach and just do some research on them.

Talent is not a requirement! Always remember that because coding is really just a skill. Just remember to practice everyday so you do not get behind or forget the structure of the language.

Last tip, "Focus, Endurance, and Grit", if there is one thing my bootcamp taught me, that would be stamina. Coding bootcamps teach you how to teach yourself how to code. Always remember that while you are learning. Learn how to learn. The camp is not going to teach you everything.

Developer Imposter Syndrome: How to Overcome!

Catchthembodies — Thu, 04 Aug 2022 20:57:56 +0000

Imagine going to school or work and seeing others excel at their job or education and you feel like you are just behind and cannot seem to catch up! You get the feeling that everyone is judging you since you do not really seem to comprehend everything that is handed to you. Trust me, I have been there it is something that is not easy to live with.

In this blog, I plan on helping you get over this syndrome since it is very close to me. First off, what is imposter syndrome you might say, this syndrome is the thought that you are not smart, creative or generally deserving of the success you are experiencing, even though there is plenty of evidence of your achievements.

What is Imposter Syndrome?

“Imposter syndrome is the belief that you are not as competent as others perceive you to be,” Isaac Nyakoi, a developer at Libryo Limited.

There are many ways a developer could adapt themselves with impost syndrome. It has been researched that 58% of the tech industry employees, are currently experience some form of this condition. There are many instances when a programmer might feel it, for example,

learning a new language or framework
starting out a new job
deciding whether to pursue further education
you start believing that you don't fit in your team or job

The reason one might start experiencing this condition, is maybe because you feel like you are doing something outside of our comfort zone. The reason why I am writing this blog is because I have noticed that the more material that is taught everyday the more uncomfortable learning becomes but of course, this something that a developer should get used to since everyday is like a rat race since there are new developers with new knowledge about newer frameworks or languages.

How to develop skills overcome imposter syndrome

The effects of Imposter Syndrome are obviously bad for the mental health, sense of self and confidence. Once you start to realize that you might be developing this syndrome, here are some ways to begin overcoming this syndrome.

Luckily, there are ways to avoid or to mitigate imposter syndrome:

join a community
find mentors
always ask questions
get used to being uncomfortable
keep track of your accomplishments

Join A Community

Working with a community or even a team is an amazing way to learn and improve your skill. Especially, when working on a particular project alone. Reduce the feeling of this syndrome by becoming an active member of a minority organization. There is a wide variety of them; you will surely find one that fits your needs.

Try to spend time with people facing similar challenges to your own. Once you discover that you are not in this alone, the feeling of confidence will start rising and you will be feeling way more confident in your workplace or classroom. Also keep in mind, that you can safely explore your weaker skill sets because your peers or community will be there for you.

Find Mentors

Find a mentor in your profession environment that would give you an outsider perspective on what people really think of you and your work that you have accomplished. A mentor will be able to identify knowledge gaps and suggest certain training and learnings that could help improve decrease that gap. A lot of seniors in their career will always tell you that it is ok to be overwhelmed reading the code of new language or project. But keep in mind, try to look for a mentor that is able to put themselves in your shoes, make you feel calm, comfortable, and relaxed.

Ask Question!

People should not be afraid to ask question, from mentors, coworkers, or anyone else. Asking a question, allows you to fill in the gaps of knowledge that is causing your imposter syndrome. Try to seek out for constructive criticism, if one can not give you that answer, go talk to your senior coworkers.

Get Used to Being Uncomfortable

Software Development is a field every nobody knows everything. Mostly, every developer loves to share and talk about technology that they are working on or have explored. Since nobody wants to become a bad developer, everyone tries to learn some sort of technology. Learn that when you see someone who is proficient in their field, it does not mean that they are know everything. I can assure you that, even pro developers in a certain language sometimes end up using StackOverflow.

You must accept the truth, which is that you can not be a expert in software development or in any field because you will find someone who is better than you, who reads up on every update or learns a language faster than you. So instead, focus on your learning and getting better everyday in the right direction.

Keep Track of your Accomplishments

When you enter in programming and keep learning you start realizing how far you’ have come. How you solved your first programming problem, how you cracked some interviews, how you dealt with the most horrifying bug generated at a production level, how you learned new technology or tools when you had to add some feature in the product. How you become expertise in some language and how you took the challenge to solve some complex problems in difficult situations. These things will give you positivity and it will help you to overcome imposter syndrome.

You can plan a career goal for yourself and decide what you might want to learn every month. Check your past accomplishments, take inspiration from there and feel positive for everything you have achieved. Keep a document where you add praise you receive for the work you’ve done. Also try to celebrate your accomplishments from time to time.

Conclusion

To end it off, remember this, sometimes you are not going to have a good day, maybe you will struggle to figure out a problem, and sometimes it might take a while to figure out a solution to a project or problem you are working on. We are all humans after all, nobody is going to expect you to be perfect all the time.

React Native : Core Components

Catchthembodies — Tue, 02 Aug 2022 20:59:00 +0000

Ever since facebook announced a game-changing JavaScript framework during the summer of 2015, called React Native. It has made it easy for developer to design IOS and Android apps since it can handle about 85% of your code for you. With this framework, you could write pretty much all of your application which makes it very a valuable framework to learn.

React Native is a JavaScript framework for writing natively rendering mobile applications. A lot of companies like React-Native since it really increases the productivity and it reaches the market in no time. To name some companies: facebook, Instagram, Pinterest, Skype, UberEats, Bloomberg, discord, and of-course many more.

In this blog, I plan on going over the main twenty-four core components and explain the functionality of each one. Of course there are many more components but the most used ones are displayed below.

24 Native Core Components:

View: maps directly to the native view on whichever platform you are using. It can be displayed directly or you can build a custom views on top of it. View is a container that supports layout with flex-box, style, some touch handling, and accessibility controls.

Text : a foundation component, anytime you want to display any type of text in your component. You can use this directly or create your own wrapper component.

TextInput: how users input text into your app. It comes with some awesome properties like autocorrect, placeholder text, autoCapitalize, and autoComplete(Android). The TextInput values is always a string.

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState("");

  return (
    <TextInput
      label="Email"
      value={text}
      onChangeText={text => setText(text)}
    />
  );
};

export default MyComponent;

ScrollView : If you are building for a web, you would not need to use this component since it is automatically always rendered but when doing mobile apps, you should definitely consider this.

FlatList: is a component that renders items in a scrollable view, like a list of countries, states, or provinces.

<FlatList
data={Groceries}
renderItem={yourRenderItem}
keyExtractor={item=>item.id} />

SectionList: very similar to FlatList, but the list of data is organized to a section and each section would of course have a Header.

ActivityIndicator: displays a loading indicator animation, it is very limited, the only thing you could customize is the size of the loading and the color.

import * as React from 'react';
import { ActivityIndicator, Colors } from 'react-native-paper';

const MyComponent = () => (
  <ActivityIndicator animating={true} color={Colors.red800} /> //animating: determines whether to show it or hide it
);

export default MyComponent;

ImageBackground: basic way of showing a background view.

KeyboardAvoidingView: a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.

DrawerLayout: is android specific, pop a little menu from the right side to the left side.

TouchableNativeFeedback: responds to touches on android.

SafeAreaView: makes sure the content is well within the safe area boundaries of a device. Sadly, it is only applicable to iOS device with version 11.0 and after. It automatically puts padding to the page so that the navigation bar, tabs, toolbars, etc are not covered.

StatusBar: The status bar is the area, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.

Button: is a basic button component that renders nicely on your app. If you feel like it does not look right, start applying TouchableOpacity or TouchableWithoutFeedback components. You can make the button an icon or even the loading spinner.

import React, { Component } from 'react'
import { Button } from 'react-native'

const App = () => {
   const handlePress = () => false
   return (
      <Button
         onPress = {handlePress}
         title = "Red button!"
         color = "red"
      />
   )
}
export default App

Switch: a visual toggle between two states, like on or off.

import * as React from 'react';
import { Switch } from 'react-native-paper';

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;

TouchableHighlight: allows you to handle the users touches and when pressed the under-light color will be shown.

TouchableOpacity: Also used for user touches but, also has builtin opacity when pressed button. A lot of people seem to use this over highlight.

TouchableWithoutFeedBack: No built in feedback, all elements that respond to press should have a visual feedback when touched

Modal: is a basic way to present content above an enclosing view. (tip: To render the Modal above other components, you'll need to wrap it with the Portal component)

RefreshControl: is very much like the Pull-to-Refresh functionality.

Pressable: is a newer and well-defined component compared to the touchable component such as the TouchableOpacity,Button, etc. This component is very easy to implement you can just:

VirtualizedList: a base implementation of the FlatList and SectionList component. It should only really be used when you might need more flexibility.

InputAccessoryView: iOS only component, it enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component allows you to create a custom toolbar.

Conclusion

To conclude, react-native is an amazing JavaScript hybrid framework that allows a developers job to be easier when developing an app for iOS and Android. This framework is still growing and maturing. Of course, there is competition to React-Native, a big one would be flutter. Flutter was developed by Google in 2018 but is still an infant language compared to React Native.

Sources:

https://callstack.github.io/react-native-paper/4.0/index.html

https://reactnative.dev/

SQL: CRUD for Newbies

Catchthembodies — Thu, 14 Jul 2022 18:12:38 +0000

What is SQL?

SQL to begin with is a query language that allows the user to manipulate and have access to the database. SQL stands for "Structured Query Language". If you want to make a living as a coder you definitely need to know to work you way around a database. Otherwise, developers could never build or maintain softwares, programs, and functional website. SQL plays a main role since programmers need to access the data. In this blog, we'll cover basics of sql.

Why learn SQL?

The reason to learn SQL is because it tangentially relates to data manipulation and analysis (e.g. data science, back-end programming, cybersecurity, etc.,). SQL is used for the finance sector as well since it helps with big numbers and does the same amount of work in shorter time.

CRUD

When working with a database you must have used CRUD in the past if you have ever worked with a database. One of the perks of learning CRUD is that it helps a developer to manage data on the webpage. CRUD is an acronym that spells out:

"C": to create or add data to a database
"R": reading the data would include searching and filtering the results
"U": update or edit the rows of data in any table of data
"D": delete or removing the data from the tables.

Using CRUD is a very essential part for developer and is used almost on every webpage since it can handle all of the data in fashionable manner.

CREATE

Creating or adding a data to a database is very simple. Create allows user to add a new row to the already made table. The function for adding data by creating is, INSERT INTO, followed by the name given to the table, column names, and values that need to be added. Here is an example of how you might proceed with process of adding data, there are actually two ways you could proceed:

INSERT INTO table_name `
    VALUES (value1, value 2, ...);

INSERT INTO table_name`
    VALUES (value1, value2, ...);

Below is an example, where we will be adding a new menu item to our pizza table:

INSERT INTO menu
VALUES (1, 'meat lover', 1, '2022-06-12');
"What if we wanted to add multiple rows, we can do the following by:"
INSERT INTO menu
VALUES 
(2, 'pepperoni', 3, '2022-11-14' ),
(3, 'vegetarian', 2, '2020-09-05' );

This will end up adding data to your table (menu table) and with each entry you will end up with a unique id.

READ

The read function allows the developer to see all of the information on the specific records pulled. It is very similar to the search function. For instance, if we go back to the menu table, we can display all of the item in that menu by:

SELECT * FROM menu;

Doing this will not allow to edit the menu instead, it will allow the user to see what menu items are already in the database.

UPDATE

Updating is how we change the already existed data in a table, when we try to update be sure to target the table and column. To update an existing record can happen with the following code:

UPDATE table_name
  SET column1 = value1, column 2 = value 3, ...
WHERE condition;

Going back to menu reference, what if we wanted to update the name and the price, do the following:

UPDATE menu
  SET item_name = 'Hawaiian pizza', price = 12.9
  WHERE item_id = 2;

The above code will be changing the name and price of the pizza with the id of 2.

DELETE

It is pretty obvious what this function does to your table, it can either completely remove the object or remove its selected attribute. The delete command is as it follows:

DELETE FROM table_name WHERE condition;

What if we only wanted to remove one item from the table:

DELETE FROM menu WHERE item_name = 'vegetarian';

But how can we delete a whole table in the database, it would look something like this:

DELETE FROM menu;

Conclusion

At the end of the day, this is only the beginning of SQL and CRUD does play a major part of it. In the world of tech, many companies rely on SQL since it can handle databases and help manipulate the database.

Gettin Started With (Arrow)=> Functions

Catchthembodies — Fri, 24 Jun 2022 05:08:35 +0000

Arrow Function! are an amazing and new way to write functions in the Javascript Language. Arrow functions are different from the tradition functions in many ways, including the way their scope is determined and how their syntax is expressed. This incredible way of approaching functions was added in 2015, is a new way to write anonymous function expression and is very similar to Lambda function in other languages, like Python. In this post, I will show you how to use arrow functions and when to use them. Personally, I try to use them whenever I get the chance since it just makes your so much cleaner and easier to interpret. A normal function would look something like this:

var sum = function(a, b) { return a - b; } sum (2,1) // result = 3

Where as an arrow function would appear in your code as:

const sum = (a, b) => a - b; sum(2,1) // result = 3

Arrow function can also be written in one-liners which is just incredible and makes the code more readable. Also when the function only has one line it automatically has a default return.

Two Main Benefits of Using Arrow Functions

A much shorter syntax than your typical functions
There is no bing of this

Arrow Functions Parameters

With Arrow function parameters, you must realize that the number of parameters affects the syntax of the arrow function. For example, if I have:

0 parameters:
() => { statements }
Since we had 0 parameters, we end up using an empty parenthesis. Where as:

1 parameter:
parameter => { statements }
If we only have one parameter, we can just leave out the parenthesis around the parameter from the arrow function.

2+ parameters:
(param1, param2, paramN) => { statements }

Arrow Function Return

Arrow functions have a built-in to short the return syntax: “If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword. This tells the arrow function to return the statement.” (https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b?source=social.tw)
Lets look at how to use the benefit of arrow function when returning, this is a function expression:
let greet = function(parameters){ return expression }
This function expression is shortened to:
let greet = (parameters)=> expression

Main Takeaways:

Arrow functions are useful to many developers and is one of the most used features of Javascript since it can help the developer to finish the same task with very minimal code.
Arrow function end up providing different syntax for different number of parameters. (no parameter, 1 parameter, 2+ parameters)
If we return a single-line of code from arrow function, discarding out the brackets and return keyword will end up with the remaining statement.

Conclusion

To conclude this blog, I would like to say that arrow function are an amazing asset to a developer, planning on utilizing map/reduce/filter functions. It also handles well with Promises and Callbacks.