DEV Community: Layne Andrews

Advice for Success at a Remote Coding Bootcamp

Layne Andrews — Wed, 09 Aug 2023 19:51:05 +0000

Learning programming is not an easy thing to do. While it's rewarding to connect the dots and build your own programs, this milestone usually comes after several difficult learning curves and likely, many failures. In my last blog post before I graduate Flatiron, I wanted to elaborate on a few things and offer some advice that in my experience, might be helpful when facing challenges that come with learning to program at a coding bootcamp. Please keep in mind that these tips were written as general advice and the degree to which you heed this advice should be based on your own personal circumstances.

1. Turn on your blue light filter

With a coding bootcamp, or any tech job that requires extended time in front of a screen, a blue light filter will mitigate the strain on your eyes. For a while, researchers have been studying the effects of prolonged blue light exposure and have found, among many things, that blue light can strain your eyes and have an effect on the quality of your sleep. So if you're going to spend a long time in front of a screen each day, you might consider changing the display settings on your machine.
https://www.apollotechnical.com/best-practices-for-minimizing-blue-light-exposure-in-the-workplace/

2. Find the fine line between taking healthy breaks and procrastinating

You are going to be taking in large amounts of new information and concepts everyday, and often times they are complicated concepts and material. It's easy to get overwhelmed by the amount of information coming in. Because of this you're going to want to take regular breaks where you can disconnect for a few moments and ground yourself. Finding that fine line of the right amount and length of breaks is important. You don't want to take a 45 minute break every hour, and you'll want to take more than a 5 minute break every 3 hours. Everyone is different, but defining a healthy break system where you can maintain productivity while also giving your mind enough time to rest is very important.

https://www.techtarget.com/whatis/definition/pomodoro-technique?Offer=abt_pubpro_AI-Insider

3.1. Go outside and move your body everyday if possible

3.2. Consider investing in a stand up desk

If you're like me and a lot of your hobbies outside of work and school are sedentary hobbies, it can be easy to skip out on exercise and spend too much time cooped up inside on top of 8 hours a day of bootcamp. Science has clearly shown us that sitting around too much is really bad for our health. I definitely noticed negative effects on my mind and body on the days that I moved too little and stayed inside too much. Conversely, the days that I got outside and moved more helped when it came to studying. If you're able to learn well while standing, you might look into investing in a stand up desk so if your schedule doesn't allow for getting outside and moving as much as you'd like, at least you can burn a few more calories and remain a bit more active by standing while you're learning.

https://www.betterhealth.vic.gov.au/health/healthyliving/the-dangers-of-sitting

4. Embrace a growth mindset

I'll never forget learning about the growth mindset from my bass teacher in college. The growth mindset is about not putting limits on yourself and believing in your ability to improve. It's really easy to get imposter syndrome while learning to code. You might start doubting your intelligence or your ability to succeed. But the fact is that with practice you can get better at anything. Some days you might only get 0.0001% better at coding by failing an algorithm 10 times in a row. But you're still getting better because you learned 10 ways of how not to solve that algorithm.
https://hbr.org/2016/01/what-having-a-growth-mindset-actually-means

Flask Project Guidelines

Layne Andrews — Thu, 20 Jul 2023 19:50:09 +0000

Overview

Flask is a great, light-weight web framework for Python. It's a relatively new framework in the world of programming as it's first stable release came out in 2010. It was developed by Armin Ronacher as an April Fool's joke but the idea continued to develop and rose in popularity among web developers. Flask has a built in debugging shell and it supports RESTful routing. SQLAlchemy is a great ORM to use with Flask and this article will give instructions under the assumption that you are using SQLAlchemy for interacting with your database, though any different SQL library or ORM will work fine as well. I'd like to elaborate how to start a Flask application using just a few simple steps:

Step 1.

First, you have to create a new directory and initialize your database:
mkdir flask-app
flask db init
cd server
Most of the work you'll do will be in the server folder

Step 2.

Create a file where you will define your models. The models file will contain all of your models that will act as templates for tables in your database. You can also create validations in the model file and customize how data will be retrieved from your database using serialization methods. An example might be a model for a User:
class User():
__tablename__ = users
id = db.Column(db.Integer, primary_key=True)
email = db.Column(db.String)
name = db.Column(db.String)
In a database, the code above would translate to a table called users, with columns and rows of id, email and name data.

Step 3.

Create a main app file where you will define your RESTful routes. In this file you can define classes and methods within those classes that contain your routes, shaping how the data from your database will be retrieved and how it can be accessed. An example from my own group project is a class for real estate properties, and am index route that enables you to retrieve data for all of the properties stored in the database:
class Properties(Resource):
def get(self):
all_props = [prop.to_dict() for prop in Property.query.all()]
return make_response(all_props, 200)

Step 4.

Create a seed file where you can create some instances of your class so you have some data to work with:
prop = Property(address="838 Mt. Rd", city="Logan", state="UT", image="image2.png", bedrooms=6, bathrooms=3, floors=2, garage=True, pool=False)
db.session.add(prop)
db.commit()
At this point you can instantiate your database with the data from your seed file by running
flask db migrate -m "message"
flask db upgrade

Step 5.

Use the debugger by entering flask shell in the terminal from within your server folder. This will allow you to actively debug and test your application. You can create a front-end with your preferred framework to make your application full stack.

Important side-notes.

In your seed file, you need to define the context of your app so the data can be seeded correctly by putting with app.app_context():at the top of your seed file and then creating your instances within that.

In your models file it is helpful to make a reference to whatever ORM your using and store it in a variable called db like so: db = SQLAlchemy()

Within your main app file, define a reference to your app and set up some environment configurations
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.json.compact = False
migrate = Migrate(app, db)
db.init_app(app)

You will also need to import some libraries
from flask import Flask, request, make_response, jsonify, abort
flask_migrate import Migrate
flask_restful import Api, Resource

Society is a DB

Layne Andrews — Thu, 29 Jun 2023 19:38:36 +0000

As I was learning about databases in phase 3 at Flatiron, I started to notice similarities between the way databases (DB's) and society (particularly here in the U.S.) manages data. This really dawned on me when I learned that each table in a DB keeps track of each row/entry with a unique ID. Thinking about your driver's license or personal ID card, you might realize that the unique ID number on the card, which is in the state system, is simply a unique ID on an enormous table of data that contains you as an entry/row. This blew my mind when I thought of it this way, especially when I considered that digital DB's have only been around for around 20-30 years. Before computers, these huge DB's containing all of our identifying information was stored in filing cabinets.

You might imagine what other attributes or columns might be on a given table for a U.S. state's DB. You have your unique ID which is just an integer. But then you also have Boolean data. Has a given entry (person) demonstrated through testing that they are capable of operating a vehicle safely and are over the age of 16? True or false? Has a given entry given consent to donate their organs to medical causes should they meet an untimely demise? True or false? And then our state's DB stays updated with other data like our weight, height (INT's), whether or not we can see well without glasses (Bool), and also a good old JPEG with an image of each entry from the chest up.

It was really interesting to consider how dependent we are on using numerical, text and binary data to organize systems in our societies. So much of our lives revolve around data. Whether it's your lunch number, the unique magnet in your credit card, your Flatiron student ID number or your Facebook account password, you can rest assured that you are an entry in a DB, somewhere.

React Components - Parent/Child Relationships

Layne Andrews — Mon, 01 May 2023 06:46:13 +0000

Components are the building blocks of a React application. You can think of a component as an isolated block of your application that accomplishes a certain task or displays information to the user. In react applications you often have a root entry point into the application in your base .js file. This is where all of the components will be "injected" into the application. Most often you will have a parent component called App.js. This is the root of your component structure that will act as the parent of all of your other components. It's very useful to visualize your component hierarchy like an upside-down tree where App.js is the root and the branches growing down are its child components:

The idea with using React and components is to compartmentalize your application so each component has a specific job or contains specific content. You might have components dedicated to your app's navbar at the top of the page, the footer at the bottom of the page or the main body of your content in the center of the page. You might also have a component dedicated to a user login form or some other kind of form that a user could submit. This might look something like this:

In this example, Navbar, Footer, Body and LoginForm would all be child components of the parent component, App. Child components can also have children of their own:

One of the things I find most interesting about components is how information flows between them and where information lives in a React App. If a component needs certain data, it has to receive it from a parent component and it has to go down the component tree. So if two child components need to share data, they would need to receive that data from a parent. Here is a diagram of how information typically flows in a React app:

Information flow between components can be a little daunting when you are first learning React. Visualizing components as an upside-down tree and understanding the data flow between them will set you on your way to making fully functional front-end applications.

Phase One Blog - Scope

Layne Andrews — Sat, 08 Apr 2023 05:09:55 +0000

Scope in JavaScript can be a little hard to understand as a beginner. Scope has to do with the environment where your code is written in relation to the larger body of your code, and the limit to which that code can access and interact with other code in your coding environment. Take the following example -

In this example we have a variable called "globalVariable", a function called "doSomething" and a variable within that function called "localVariable". These are aptly named to illustrate the concept of scope and what domain these particular variables are stored in. Notice what happens when we console log "globalVariable" right below our code snippet -

As would be expected, we are able to see a console log of our global variable. Great. But what would happen if we console logged out "localVariable"?

We get an error saying that "localVariable" is not defined! What's going on here, JavaScript? Did you get enough sleep last night? Clearly we have a variable called "localVariable" and it's defined right inside of our "doSomething" function. So why is JavaScript saying this variable is undefined? This example illustrates the concept of scope and how depending on where certain code "lives", other code will either have access, and be able to interact with that code or not. The reason for our error is that "localVariable" is only defined in the 'scope' of our function. This, in effect, only makes "localVariable" available in the scope of our "doSomething" function, not in the global scope where we have our "globalVariable" defined.
We can also think about scope in the same way we think about a physical environment. Take a house for example. In most houses we have a kitchen, a living room, a bathroom and a bedroom. Outside of the house there are more "global" systems like electrical plants and water treatment facilities. In JavaScript, this analogy might look something like this -

In a house you would perform certain actions within the "scope" of certain rooms. You would cook in the kitchen, relax in the living room, shower in the bathroom and sleep in the bedroom. If you were relaxing in the living room and needed to use the toilet, you wouldn't have access to the toilet within the scope of the living room. Likewise, if you were cooking in the kitchen, you wouldn't have access to your bed. Since the water treatment facility and electrical plant is defined globally, the rooms in our house do have access to them because they are defined in the global scope.
Scope among other things was interesting to learn about in phase one and it gets more complex as your code does. But it's important to get a grasp on, as it is very important in JavaScript.