DEV Community: Kaleb

Full Stack Web Development

Kaleb — Thu, 22 Aug 2024 08:23:00 +0000

My name is Kaleb, I didn't know the first thing about web development, react, flask, and redux but here 3 months later I can make an entire website. I'm enrolled in the FlatIron software engineering program. Before this I had some Python and Javascript experience with MyFreeCodeCamp. When this program started I knew I was different than most with my little knowledge before the start of classes. Mentally I told myself I had to want it and crazy enough to get it done. Crazy meaning, hours spent at my desk studying, applying, doing labs, talking with mentors, and I think you get the idea. This program at FlatIron has been a life-changing decision that I highly recommend.

Mindset

This has been a bumpy road the last few months and it wasn't easy learning this amount in such a short time, I feel my mindset was what made me such a resilient student who when faced with a challenge was able to overcome it. Mindset is key when starting a new journey. I knew I was behind most in terms of skill starting off. Having a solid mindset and drive towards learning and being willing to spend 13 hours working on javascript labs was vital to my success.

Life as a student at FlatIron

The morning starts at 8:30 wake up get ready for the day sit down at my PC at 9:00 am for standup. after that normally lab time is from 9-12 and 12-2 was the lecture. 2-3 is scheduled lunch time but normally it is time to get some sun. from 3-5:30 is lab time then at 5:30 is stand down. Stand up was normally do we have any blockers and What are our goals for the day, stand down was mostly the same but do we have any blockers (blockers meaning are we stuck on anything and need assistance) and did we accomplish our goals or a funny question this was Monday through Friday and for the weekend I'm currently working Saturday and Sunday.

My Final Project

This project was built with a React and material UI front end, Python, and Flask backend. My Final project was based on the Girl Scouts, My coworker has a daughter in the Girl Scouts and said that they could use a local website for their troop. This has a nice home page as well as nutritional facts about the cookies, locations the troop will be at on what day, and the sales tracker. after the day the troop leader or manager can input the Girl Scouts name, how many boxes they sold, and the price per box along with the location where it was sold. This way they keep track of the highest sellers and see a nice graph along with it. Full crud for most objects and soon to be deployed. I also used React-Oauth for Google to allow users to sign up and in with that.

First Full Stack Project

Kaleb — Thu, 01 Aug 2024 06:53:20 +0000

My name is Kaleb and this is my 4th blog.

Key points I'll be going over in this blog!

My process of making a full-stack application
Using Python and React
What I feel I'm good at and what feel I need to work on
Impostor syndrome

My process of making a full-stack application
This phase was straightforward with databases, tables, SQL, queries, and restful routing. Restful routing was the most natural to me and I enjoy routing and servers a lot, the debugging is very easy and gives you more information than some of the coding errors I've come across. My project features Restful routing, Material Ui, Yup, and Formik to start. CSS/Material Ui is challenging but if I gave it time it would be something easy to master. formik and yup for forms are nice but not needed. The long way I know how to do but I feel for employment the cleaner and faster methods are going to be best, Formik and Yup are the tip of the iceberg with what packages you can use. Phase 5 I have a few I would love to implement and get to use React Bootstrap, and Redux, and my personal favorite I've been researching is Firebase. Learning about passwords was interesting the depth you must go to ensure your user's safety and being a junior developer I never want to compromise my users so having Firebase do that authentication would be amazing for my phase 5 project.

Using Python and React
Using 2 languages at the same time and going back and forth definitely had my head spinning at first when writing variables and other small differences between the languages. If I had a dollar for the number of times I forgot const = on this project, I would have a considerable amount of money. This project and phase tested me mentally more than anything due to impostor syndrome and the weight of the project itself. Building a full-stack web application sounds scary but when broken down step by step it makes it simpler. Making a Trello board and putting all of my ideas and steps into it. Moving a card one by one is definitely the biggest tip I have for new devs. We know what to do but looking at the entire picture can be intimidating.

What I feel I'm good at and what feel I need to work on
Personally, I am proud of myself, 2 months ago I used javascript and had the hardest time using .map over an array and now I'm making web pages with submittable forms, a fully functional backend, Full CRUD, and a great understanding of the languages I've learned to data. I feel what needs work is my self-confidence. Impostor syndrome has been mentioned a few times but it set in when faced with a full-stack project. It was the big bad wolf at first which led me to delay starting this project for a few days. Once I started, Making a Trello board, breaking it down, and rubber ducking all errors, It was a breeze. I know this project I could have done more and I will go back and make the changes I feel are needed after phase 5.

Explaining my project
My project was a Recipe web page where you can make users, recipes, and reviews for all recipes. The project has some styling and looks presentable, I want to spend more time with Material Ui and improve the looks in the future. I met all requirements but I want to add a star system have an average star for the recipe based on the average of all reviews and add a user login.

My experience with Python

Kaleb — Thu, 11 Jul 2024 19:05:43 +0000

Hello all readers, Thank you for taking the time to read this blog! We will discuss Python and my experience as a FlatIron student learning it for the 2nd time. I had a Python class a few years ago in a community college class and it was exciting. Python Is my favorite coding language so far. The options are endless and exciting, all the way from coding machines to just a small birthday tracker linked to SQL. My project was making a birthday tracker, We all know your mom/dad/partner has gotten upset if you forget their birthday. Learning Python was challenging due to Classes and iteration being a lot different from JavaScript, Except once I learned ipdb or breakpoint or using print to see what's happening it helped so much. Learning JavaScript first taught me that console.log/print shows you what that data is and helps code through it. Seeing what you are working on makes coding 100x easier. Python will be the language I use to make more projects after school. My next project is going to be a Discord bot! I want to make something that you use ! or . followed by something that will run my code and return what I want. I want the bot to return random quotes that have been said before from our friend group. When something funny happens we quote it in the channel and once a year we go back and re-read that and reminisce about that moment we all shared. An easy .randomquote in a discord chat channel that returns a random quote wouldn't be too hard but very fun and exciting. Python makes me want to be creative and nothing against JavaScript/react I feel those have a lot of use for websites/CSS and more except Python has more value to me at the moment for the projects I have planned In the future.

Enjoy react key takeaways from a new developer.

Kaleb — Thu, 20 Jun 2024 18:56:56 +0000

Welcome back to my second blog on DEV. I have completed phase 2 of FlatIron school and this phase covered react. Phase 1 was JavaScript, phase 2 was React with phase 3 being Python and SQL. React was difficult for me due to a lot of different concepts and learning it a lot faster than javascript.

Key Topics Covered in This Blog:

The Impact React had on me as a developer
The useState Hook
Lastly Props

Starting with React's had on my understanding of web development, it's hard to write how it changed my preception. Now, when I scroll through Facebook or click a link, I know that it triggers an onClick event, followed by a GET request. Understanding this process has been extremely impactful on my day-to-day, and I enjoyed working with React.

Understanding and Using useState:
Initially, useState was nothing short of a challenge. Its syntax and the concept of hooks were completely new to us as students. However, useState was very helpful and was the backbone in our project and for React projects in general. It allows us to update the page without refreshing it. To explain the syntax, the useState is defined as const [state, setState] = useState(). When setState(Anything) is called, it triggers a re-render and updates the page. The state variable holds the value of Anything, which could be data from a fetch request, a boolean for a loading feature, and so on.

Props:
Props are similar to arguments in JavaScript but are different. They allow you to pass functions, state or setState, variables, and data. Props allow you to pass what you will need to other files. You need to send props and accept them. Props can be deconstructed and go hand and hand with state.

Finding what iterator to use and when from a beginner!

Kaleb — Thu, 30 May 2024 04:53:57 +0000

Hello, my name is Kaleb and I'm a beginner at coding. I am an active student at Flatiron School and our first phase is javascript. Learning arrays and objects was easy, but adding them together and iterating over them was extremely difficult. I will be going over some the iterators as I understand them and give detailed examples. When I was doing research it was difficult to understand which to use and why.

The iterators I will be going over are:
.forEach()
.map()
.find()
.filter()

Starting with forEach() this is an iterator that does something for each value or object in the array. This is an iterator we learned with little value in the real world from my perspective. forEach is a loop as well, it can be used to console log elements in the array like the example below.

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

numberedArray.forEach(function (number) {
console.log("What number is being logged" + number);
});

This will console.log:
What number is being logged1
What number is being logged2
What number is being logged3
until it reaches 10 and then will stop.
this can be useful to see what values you are getting or for debugging. forEach is not something I personally would learn due to .map outshining it, forEach returns the same array but changed where .map returns a new array.

the map() definition that I believe explains this very well is: The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

What does this actually mean? how does it work? what does it look like?

first, we should break down the definition it is a method that creates a new array populated with results from the provided function on EVERY element. exactly like the forEach iterator it goes through the [1-10] and does something on everyone and provides a NEW array.
Second let's see it in use to wrap our head around when and why we would use it. For example, We only want the last names of the guests staying at the hotel we run. our data might look like this:

let guests = [
{ firstName: 'Bob', lastName: 'Joeseph'},
{ firstName: 'Tracy', lastName: 'Miller'},
{ firstName: 'Siera', lastName: 'Allen'}
]

const lastNamesOfGuests = guests.map(firstAndLastNames => firstAndLastNames.lastName)
console.log(lastNamesOfGuests)

it will return: [ 'Joeseph', 'Miller', 'Allen' ]

Let's walk through it, We set a variable name for guests that is an array of objects and those objects have the first and last names of our 3 guests. We are setting lastNamesOfGuests to equal our variable guests and calling .map then we are passing in the objects it is going to each one and grabbing the .lastName and implicitly returning the strings inside a new array.

Now that we understand both of those we are finishing it up with my favorite combo the .find and .filter iterators and personally my favorite to use. .find is very easy to understand its job is to find something and return it once found, if nothing is found .find returns undefined and filter returns a new array with no elements looking like []. The difference between .find and .filter is once find gets a match it will stop looping and return that element. in our example, if we wanted all the fruits and vegetables starting with the letter B. Find will only return the banana in our example below.

let fruitAndVegetables = ['apple', 'banana', 'broccoli', 'carrots']

const namesWithB = fruitAndVegetables.find(fruitAndVeg => {
return fruitAndVeg.toLowerCase().startsWith("b")
})
console.log(namesWithB)
This will return: banana

small explanation on why I used .toLowerCase() and .startsWith(), toLowerCase makes all of the elements lowercase making it so if banana was a capital B it would still start with lowercase b. making our search case insensitive. the startsWith is very self-explanatory but if it starts with what is in the () it will match and return those elements.

.filter is very similar to .find but has some key differences. The filter offers more than 1 match and returns a new array with the match from the search. an example will show you the differences very nicely. in our example, we changed one word and got both bana and broccoli. we changed find to filter. find returns the first match and stops the loop, filter goes through and makes a new array and populates it with all the matches from the elements passed in.

let fruitAndVegetables = ['apple', 'banana', 'broccoli', 'carrots']

const namesWithB = fruitAndVegetables.filter(fruitAndVeg => {
return fruitAndVeg.toLowerCase().startsWith("b")
})
console.log(namesWithB)
This will return: [ 'banana', 'broccoli' ]

// used the definition for map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map