DEV Community: Tripp

What's Next For SWE Students?

Tripp — Thu, 11 Jul 2024 14:21:27 +0000

What's up SE Nerd!! I'm back with another post. This one won't be as technical as I will be using this one to reflect on my last 15 weeks of a SWE Bootcamp!

First of all, I want everyone reading this to know that I didn't know much about computers or much about technology before I started this program. I was halfway through a SWE degree and decided I was ready to jump into it, crunch as much learning as I can and start getting some experience in this field.

When I first started this course, I didn't know what to expect. After taking the prerequisites to get into this course, I knew it was going to be a challenge, but I also knew that if I put as much time and effort into it I would get results. That's how I approached this from the beginning and I never strayed away from that. I put everything I have into this course. There were times were I would stay up until 3 am debugging or just knowing I had a lot to do to soak up this information in a short amount of time.

As I continued, the extra time and effort was all I needed to not just succeed, but to push limits of my new skills and knowledge. I would shoot past the moon for any project, I would continue doing labs or challenges to see other ways of doing things and getting better results.

This course has sparked a fire in me. This is what I was built for. I love it and I never want to get off the computer now!!

I want to share what makes this field special for me. I have never been an artistic person, and it's unfortunate because I have a very creative mind. I have never had a job or been involved with anything that I can actually put my creative thoughts into action. This is it, this is my art, this is my comfort zone, this is IT!! I absolutely love putting in so much effort to see amazing results.

I hope my blogs have been a good guide to starting your SWE journey, I will continue to blog about the job process and where this education takes me from here. Good luck to all of you, and it's always good to be a SE Nerd!!

Flask: The basics!

Tripp — Tue, 25 Jun 2024 21:42:07 +0000

Welcome back SE nerds!! I'm back with another blog to talk about everything you'll need to know about Python Flask! Flask is an awesome addition to being a full-stack developer, bringing the backend dynamics and the next step to put the frontend and backend together!

This first thing you should be familiar with is an extension called Flask-SQLAlchemy (pronounced 'sequel alchemy'). This extension is a great Object-Relational Mapping tool that allows you to work with databases! An example of code that uses SQLAlchemy, will look like this:

Another good thing to know is about relationships. These can be one-to-many or many-to-many relationships between tables that are setup using the 'db.relationship' method. A one-to-many relationship is a single record linked to multiple records. This is what that code would look like:

class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
user = db.relationship('User', backref=db.backref('posts', lazy=True))

Many-to-many relationships means the records in one table can be linked to multiple records in another table, and vice versa. Code for this will look something like this:

A really cool feature to use with Flask is the use of APIs. Flask can handle APIs in various formats, including JSON. This is what a code for this will look like:

REST or Representational State Transfer is also good to know for Flask. This is an architectural style that uses HTTP requests to access and use data. Flask routes can handle RESTful operations defined by HTTP methods like GET, POST, PUT, DELETE. This code will look like This:

Constraints and Validations are key to having a legitimate backend. These ensure data integrity and correctness. In FLask-SQLAlchemy, these can be applied directly at the model level as shown in this example:

Cookies are also a good thing to know about. These are small pieces of data stored in the user's browser. Flask reads cookies easily. Here's an example of code using Cookies:

Authentication is also a good tool to know. This involves identifying users and allowing them access to certain resources. This is an example of code using authorization:

Password protection as you can guess, is an important tool when using personal data for a user. Passwords should be securely stored by hashing them before they're saved to the database. Flask uses libraries such as Flask-Bcrypt for this. Here's an example of how password protection works:

I hope you found this helpful, and if there are any errors or you would like to comment, feel free!!

Python for Software Engineering Beginners!

Tripp — Wed, 29 May 2024 18:43:09 +0000

What's up SE nerds!! It's Tripp, back with another blog from SE Bootcamp, currently finishing up Phase 3 out of 5! This time we are learning about using back end with Python. Here's a rundown of the basics and what you can expect from when learning Python.

Some of the basic concepts you'll start learning about in Python are Variables that store data values; Data Types like integers, float, strings, lists, dictionaries, tuples and sets; Control Structures such as 'if' statements, 'for' loops, and 'while' loops (sound familiar?); And Functions that work the same as in JavaScript, they are codes that perform specific tasks. Here are some brief examples:

The next part about Python you'll need to know is about Object-Oriented Programming (OOP). This is made up of 'classes' and 'objects'. A 'Class' defines a data type with 'attributes' (like properties) and 'methods' (behaviors). An 'object' is an 'instance' of a class. Here's an example to put it together:

You'll also need to know about Inheritance. This allows a class to inherit attributes and methods from another class. This creates a hierarchy and allows code to be reused. This consists of a 'base'/'parent' class that the 'derived'/'child' class inherits from. Here's an example below:

This last part brings all of this together that's why it is appropriately called Object Relationships. This relates objects to each other in various ways. Two of these ways are 'composition' which is made up of one or more objects from other classes as a relationship, and 'aggregation' where a class can contain objects from other classes but they can be independent. Here's an example of this:

I hope this post helps you out with your Python journey. Feel free to comment if there are any errors or anything that could help this post be more beneficial to new Python learners or SE students!!

REACT: The Basics!

Tripp — Tue, 07 May 2024 14:23:59 +0000

What's up SE nerds! I'm back with a new post as I advance my skills throughout the bootcamp. This time I will be explaining the basics of what you'll need to know to master JS REACT!

I will start by explaining a wireframe. A wireframe is the blueprint or the skeleton layout of your App or website. This will be important for staying organized and making sure your work functions correctly. The wireframe is made up of 4 main "components" (pun intended!) => a 'Header', 'Side or Nav(igation) Bar', the 'Body or Main Content Area', and the 'Footer'. Each of these will be filled out using UI (user interface) components that represent elements that design the App or site to make it more user-friendly. These can include logos, search bars and buttons. if you're feeling a little confused at this point, the image below is an example of how all of this comes together.

Here, you can see the 'Header' and 'Sidebar' as main wireframe components, and the 'logo' and 'Nav Links' are UI components that compliment the wireframe.

The next things you'll need to know about are props and state. Props are how components communicate with each other. They work by accessing html elements from react. They typically pass down from parent component to child component. They check the child component to see if props are different before re-rendering, if they are the same, it won't re-render. I have an example of this below.

In this example, 'ParentComponent' passes the prop 'message' to the 'ChildComponent'.

This makes it so that the 'ChildComponent' receives and will display 'message'.

The next important element you'll need to know is 'state'. State represents data that is managed by a component that can be updated based on user interaction like API responses or any dynamic changes. State lives in a component and only that component can change it. A component can choose what state passes down to. in state, the parent component always re-renders. Here's an example below.

In this example,'useState' is usedto create a variable called 'newName'. This is initialized with the name received by the props. The field allows you to change 'newName' and it's updated value.

One more thing to keep in mind about React, is how to pass a child component to a parent. The simple answer is with callback functions passed as props. For instance, when you click a button (submit), the child component invokes the callback. The callback then updates the parent component's state or basically trigger an action based on the information passed. Here's an example below:

In this example, the 'ParentComponent' defines the callback function 'handleChildClick' and then passes it as a prop called 'onClick' to the 'ChildComponent'. The rest of this will be posted below:

This part shows how the 'ChildComponent' invokes the callback 'onClick' passed from the parent when the button is clicked, then passing a message back to the parent.

For New and Inspiring Software Engineering Students!

Tripp — Mon, 15 Apr 2024 13:42:49 +0000

What's up SE nerds!! My name is Tripp, I am starting my career in software engineering through a bootcamp. I am finishing up the first phase, and the word bootcamp is perfect for this course! It is hard work, it takes extra practice away from class hours and it takes a lot of dedication to really understand how it all works. Thankfully, I am dedicated and really enjoy learning how to code and seeing the results. It hasn't been perfect and the pace is very fast. I have had to find ways to keep up and really get the content of this phase down.

My approach has been to find ways to better understand what we're doing in my spare time. I hand write labs or projects we have gone over during lectures to make my own notes and really break things down step by step to understand how they connect and how each code 'functions' (pun intended!).

For instance, we had a mini project called "Fetch Dog CEO," where the first objective was to fetch images using a url containing an array of images, parse the response to JSON and add each image element to the DOM. Sounds pretty easy, right!? Well it wasn't as easy as it might seem. For better understanding of how to do this I hand wrote these instructions and code step by step and explained what each step does and how it relates to the content its working with.

For example (as seen in the code below), the first step isn't too complicated, it's a fetch statement that includes a url, then response to JSON, then renderImages(data), does just that renders the image data. I still made sure to write notes beside each step explaining how each step makes that happen. The next part was to add each element to the DOM. For this, I wrote out the first part: function renderImages (objStoringUrls) {; Above function renderImages I wrote *After rendering or collecting the image data, I need a function that adds or renders the images. Above (objStoringUrls) I wrote *This gets the elements from the Object that Stores the Urls. For the next step: urlArr = objStoringData.message; I explained that urlArr refers to the array of Urls within the "message" inside the object. I drew a square diagram next to this, showing the data structure of the array (image of data below), and drew lines connecting each part of the code to it's element in the structure. For instance urlArr points to the elements within the [array of Urls]. The objStoringUrls points to everything within the {object}. The .message points to { "message":[] }. I took the time and continued this for 2 project labs we went over in lectures.

This really helped me understand what is actually happening and how everything corresponds. If you found this method of study helpful, leave a comment and I will add other blogs for this, share the notes I took for the other parts in this code, and provide images of this approach. I feel much better about JavaScript, but still need more practice and experience to keep improving my skills. I'm always excited to learn something new and how it all works!

Data structure reference:

Block of code reference (only the first part talked about in this blog)