DEV Community: LeahESc

The Things I Didn't Expect to Learn from Coding Bootcamp

LeahESc — Mon, 08 Feb 2021 17:52:55 +0000

Last summer I took a big risk and decided to dive into a full-time software engineering program at the Flatiron School. I had been interested in web development for a while but had very little experience with actual coding. I had saved up enough money to be able to leave my yoga teaching and non-profit jobs behind to embark fully on this five-month journey.

Five months later, I can whole-heartedly say that it was one of the best decisions I've ever made. It was incredibly challenging and I was forced to push myself harder than I ever have, but with that came an illuminating experience of self-empowerment. Besides gaining the skills and knowledge to confidently navigate five different programming languages, there were a handful of personal lessons that I learned while in coding bootcamp.

If you're considering applying for a bootcamp and living off of beans and rice for five months in order to pay for it, do it. In addition to being an incredible way to shift your career path and discover something you love doing, bootcamp will provide you an experience of self-growth unlike any other.

Compassion

This was a big one for me just two weeks into Flatiron's Software Engineering program. The first two weeks of the program are something they call 'The First Mile' it is meant to be a rigorous two weeks to prepare you mentally for what is to come. It's like walking into your French class as a new student but the teachers are only speaking to you in French and you have absolutely no idea what they are saying. I was instantly overwhelmed and felt like everyone was lightyears beyond my skillset. It was one of the most challenging periods of coding bootcamp for me. It was a lesson in self-compassion. I had remind myself that I was learning an entirely new language! That it was ok to ask for help! In the middle of week two I decided to reach out to a couple other students in my cohort to see how they were feeling. To my surprise, they felt the intensity and overwhelm just as much as I did. It felt reassuring that we were in this together and helped me be a little easier on myself. I was reminded that we were all just learning this for the first time; that there is always a learning curve with anything new, and that eventually, (hopefully!!!) it would click.

'Belief Perspective'

This was one of the messages I programmed into one of my many iphone alarms. It would go off every morning at six a.m. to remind me to believe that I could complete what I had started. Self-doubt is something I have come up against time and time again throughout my life. And though I started to feel it creeping up on me in a coding lab or project week, it never derailed me. I attribute that to the fact that there just isn't much time to question yourself in a coding bootcamp. One of the benefits of having 50+ hours of your week dedicated to coding is that there isn't much time for anything else, including comparing yourself to others. In my experience, I didn't have the capacity to entertain those pesky inklings of self-doubt because I knew that I had to stay on track, which meant completing x amount of labs that day. You have to keep going. And at the end of the day or week, when you make it through the number of labs you had set out to accomplish you get to look back and revel in that achievement.

The Ability to Learn From Anyone and Everyone

The Flatiron School program really stressed the fact that even if you've been working for years as a developer, there will still be things you run into that you don't know. Becoming comfortable googling questions to issues I was having a pouring over the official Active Record documentation gave me a whole new universe of teachers! The coding community is immensely generous, you can find a youtube video demo on almost anything! I can't remember the last time I watched a youtube video to actually learn something. Once I realized that the world was full of resources, I felt so much more supported in my learning journey.

Empowerment

It is the most thrilling feeling to build a web application that functions like it's supposed to!! It is so exciting to be able to fix a bug in your code and even more exciting to be able to look at someone else's code and fix their bug! Reviewing something that you built with your own nimble fingers and creative imagination is such a wonderful feeling. Seeing my very first project completed made me feel like I could do anything I put my mind to.

I'm so grateful for all the skills I learned in my time at coding bootcamp, but especially thankful that I was fortunate enough to have such a transformative personal experience.

Making a Community-Centered Yelp!

LeahESc — Fri, 05 Feb 2021 22:15:21 +0000

For my final project at the Flatiron School, I wanted to create a yelp-like app that would celebrate small businesses and the rich diversity of local shops in Los Angeles. My yelp-clone would allow a user to filter the businesses searched for by the communities one wanted to support so a person could search through BIPOC-owned businesses, LGBTQ+-owned businesses, Women/Womxn-owned businesses, and/or businesses that have a documented track record of having a social impact commitment.

This project presented me with a number of logistical challenges, some of which I'm still working through (if anyone reads this and can help me figure out why my google map markers won't render, holler!). To make this application, I used a React-Redux frontend with a Rails API backend. The API is a database that I constructed myself. It, unfortunately, does not contain every minority-owned or social-impact-committed business in LA because I'm only one woman and that is A TON of data, BUT I designed this application to also be open-sourced, thus any individual could foreseeably add a missing business or shop to the backend database.

The first and main challenge in my project was to replicate the basic feature of yelp: creating a search bar that directs you to a list of relevant businesses.

If you're familiar with react, you're likely familiar with React-Router, which is a package that allows you to make a SPA, or single-page application, into a site with dynamic urls and navigational components. My landing page is just one big search bar and I wanted to have the search button take the user to a url that would read something like localhost:3000/categories/:id/shops where the shops displayed were filtered by the tags the user selected in their search. My first major challenge was figuring out how to hook up a button to link to a page whose url parameters would be determined by a user.

First thing's first, to conquer this challenge I knew I would need that route to exist and to point to the component that would display a particular category and all of its shops. In my App.js, I set up my Router, which comes--originally titled Browser Router--from React-Router, with a Route--another navigational component that you get from React-Router that pointed to that exact url path.

You'll notice to that I have a '/' path Route (my 'home' page route) set to render my HomeSearch component which receives (props). Render is a function that allows you to pass props to a component on render. These 'routerProps' include things like history, match, and params. We'll get back to that later.
In my HomeSearch component, I set up a local state that includes a key, 'search' whose value was determined by what a user types in the input field.

I have a simple handleChange() function which handles the setting of state to the user's input:

Once a user types a business category such as 'restaurants' and hits submit, I had to create a function that would match whatever they had typed to one of the 15 or so categories I had programmed into my database. I sliced the first three characters from their search term and filtered through my list of categories (which I had retrieved by connecting this component to global state and pulling all of my categories into props) to match the first three letters of one of my pre-programmed categories to their search term.

So that gave me the matchedCategory which in turn would give me that category's id, which I would eventually insert into the url I was directing the user to. If there was no category that matched a user's search term, I programmed an alert to pop-up gently redirecting the user to type something else in the input field.

Once a successful match occurred, I knew I would not only want to direct the user to that category's 'show' page but also I want the page to display a list of shops belonging to that category that are filtered by the tags the user selected in their search.

I filter through the tags in state to see which ones are checked and use that information to create my query string! Query strings are commonly used for embedding parameters into a URL. Query strings usually begin with a ?q= and multiple parameters are separated by a &.

Here, I'm going through the selectedTags and spliting their names on the spaces, and then rejoining them with an underscore in between. I create my queryString by joining the tags (if there are two or more--if there is only one it won't have any other manipulation) with a &. I insert that query string, along with my matchedCategory into my future url string (the url I want to direct the user to) and push it into the current component's history (remember, when you render a route, the component rendered receives props that include history which keeps track of url paths that have been visited). When that happens, the user gets pushed over to the next page! So, at the end of the day, my search function looks like:

Once the user arrives at that next page, they have the category and thus all of its shops available to them. I used the parameters included in the url to filter the shops by their tags and then display them on the page, thus mimicking the key 'search' feature of yelp for my React project!

Making a Javascript Trip Planner

LeahESc — Thu, 07 Jan 2021 23:12:51 +0000

Of all the projects I've created in my time at Flatiron School, this was the one I was looking forward to the least. Our task was to create a web application with a Javascript frontend and Rails API backend and a minimum of two models with a belongs_to and has_many relationship.

I felt really confident in my rails knowledge and decided early on that I wanted to have four models in my project. I began to create my Trip Planner rails backend using the following models: Trip, Category, Item, and Trip Category. The last model was necessary to create a joins table between Trip and Category since each one 'has_many' of the other. By day two of my project, I was seriously questioning why in the world I thought creating four models was a good idea. Nevertheless, I pressed on.

The first thing I wanted to be shown on my web application was a list of all Trips that had been created with their respective Categories listed beneath them. This required a fetch call to my Rails API at localhost:3000/trips. I decided to create a service class that would handle all of my fetch calls, making them async functions. My first fetch looked like this:

Because this project required us to use Object Orientation, I knew I would need a Trip class to be able to handle all of my trip objects and how I might display them to the page. For this first function, to render my trips onto the DOM I built a renderTrip() function in my Trip.js file.

To put it all together, I created a function in my index.js that would both call the fetch as well as the render functions.

That single async function is called when the page first loads with my bindEventListeners function. It effectively calls on an instance of my ApiService class (which I create at the very top of the page --not pictures) and uses the fetchTrips() instance method to retrieve all of my trip-related data. Once I have the data, I iterate through each trip object, creating a new instance of my Trip Class and then using my renderTrip method to display each of them on the page.

My project was starting to look like a real web application! Once I understood how to use my Api Service class effectively, retrieving the data I needed wasn't too much of a challenge. The most challenging piece of this project for me was manipulating the DOM in a way that allowed me to store all of the necessary object ids in places where I could access them to eventually create a new object. For example: to create a new instance of my Item class, each Item needed to know both the trip instance(trip_id) and category instance(category_id) it belongs to. To do this, I had to sneakily insert that information into the document and the form within which the item instance is created.

In my createNewItem() function, I needed the trip_id and category_id information to create my configObj which would be sent to my backend in order to create a new instance of an Item. I was able to pull the trip_id from a <div> element that I had created on the page with the id of that particular trip.

And I had access to the item's category_id from a form dataset that I inserted into the item's form when the form was created:

To create the item instance itself, I just had to pull it all together:

Once I got the hang of storing necessary information, I was able to successfully work through the project adding Create and Delete functions to each of my Models.

Though I was actively dreading this project at the beginning, I think working through it made me a much better debugger. I feel so much more confident handling javascript code and knowing how to sift through and move through a function step-by-step to figure out which piece of the puzzle is broken. I feel really grateful for deciding to do a somewhat complicated project because it really forced me to be acutely aware of where exactly I was in my code at all times and knowing how to search for the information I needed to get everything working.

Managing Vacation Homes with Rails

LeahESc — Thu, 03 Dec 2020 18:14:50 +0000

It's December 2020 and Los Angeles has just been issued our second 'Stay At Home' order. So when I was tasked with building a Rails-based web application for Flatiron School's third module project, I knew immediately that I wanted to create something that would allow me to fantasize about once again getting out of the house. After months of quarantining and dreaming about one day vacationing again, I decided to create a web application for users to be able to manage their vacation homes.

The project had a number of specific requirements. The first of which was that I had to have at least two has_many, through: relationships. I decided to initially create three models for my project. I knew that I would have a user model and that each user would has_many :properties and has_many :locations, through: :properties. That in turn would make my Location model has_many :properties and has_many :users, through: :properties. These relationships made my Property model serve as my joins table, uniting my User and Location models. I knew my property would have user-submittable attributes for bedrooms and bathrooms, but what fun is a vacation property if it doesn't have amenities?! Enter my Amenity model.

Naturally, a vacation property has_many :amenities but an amenity also has_many :properties. I couldn't just have an Amenity model. I needed another joins table to connect my properties and amenities. My new PropertyAmenity model and respective data table would serve as a more standard joins table, just working to connect those two models.

The other major requirement for this project was to have the capability to have 3rd authentication either through Github, Twitter, Facebook, or Google. I decided to include options for both Github and Google. Thanks to the smarts of my fellow classmate, CJ, I was able to use both platforms to authenticate users in my application. Once I had these first steps set up I started to add functionality to my site.

My main form to create a new property needed to be set up with nested form capability so that a user could create a new location for a property as well as a new amenity if they have one that isn't already listed. To do this, I had to set up my Property model to accept nested attributes for both a location and an amenity.

I included validations to ensure that the names for both a location and amenity could not be blank and then set up my property_params to permit the nested attributes for each. In addition to permitting these nested attributes, I also had to permit amenities_ids:[] if a user were to select amenities that had already been created and location_id if a user were to select a location that already exists.

Once I had my basic CRUD functionality set up for a user's properties, I wanted to add the ability for someone to add images. I had no idea where to begin but was lucky enough to stumble upon a very helpful Medium article by Ana Harris that walks through a step-by-step guide to adding upload image functionality using Active Storage. I installed active record storage in my terminal and that immediately generate two tables in my database:

Once that was set up, I simply had to add has_one_attached :avatar to my Property model and set up my property_params to also permit :avatar (which is what I decided to call my image). I added a simple line of code to my view to be able to disply the image if it was uploaded:

<% if p.avatar.attached? %> <img src="<%= (url_for(p.avatar)) %>" class="card-img-top" alt="..."> <% end %>

Ta-da! Now a user can admire their gorgeous vacation properties in all their visual glory!

Thanks for reading! You can watch a full run-through demo of my app here: https://www.youtube.com/watch?v=v6jWvsM1jN0

Creating Well-Being Rituals with Sinatra

LeahESc — Wed, 28 Oct 2020 00:07:19 +0000

For my second big solo-build at Flatiron School, I wanted to give myself plenty of lead time to conceptualize and design the application I wanted to build. I knew that it had to be something that utilizes the ActiveRecord ORM to associate things to a user. Since I wouldn't be pulling from an API like in the first project, and would instead be creating and inserting my own data, the world was really my oyster. I decided I wanted to create a wellness-type application that would allow a user to record their personal habits or techniques that help them feel their best mentally, physically, and emotionally. My web application, Ritual, would serve not only as an epic record of each user's practices (or, rituals) to help them handle life's big ups and downs, but also act as a personal reminder for each user of all the things they can do to help them self-soothe and take care when things get tough. Or even when things are perfectly fine.

I would be using MVC architecture for this application, separating my code into Models (to store data), Controllers (to communicate routes and render views), and Views (to display my code in the browser). I wanted to use three models--User, Ritual and Category--that would be associated to each other through either a belongs_to or has_many relationship. To chart things out clearly before I began coding, I drew out three tables representing each of my models and how they would relate to one another. My User class has_many rituals and has_many categories, through rituals. My Ritual class belongs_to a user and belongs_to a category. That means that in my rituals database I would need a foreign key for both the user_id and the category_id. My Category class has_many rituals and has_many users through rituals.

Now that I had the foundation for my models and databases laid out, it was time to build. I created controllers for the application, users, rituals, and categories and views for users, rituals, categories, and sessions (which only render my '/login' page. Writing the routes that weave through each of my controllers and views pages was challenging at first. I referenced many previous labs, especially the fake twitter app that we had to create just days before. The most important part of working through building this app was knowing exactly where I was in my MVC pattern: remembering which get renders which view and which form posts or patches from which view. There is a lot happening with three models and it was necessary for me to remind myself of my place within the architecture at any given time. I used a lot of binding.pry to make sure that my forms were posting and patching to their proper places and that each form was actually gathering and persisting the correct data. Submitting the "new" form in my browser and watching the proper params appear in my binding.pry was extremely rewarding.

My first big challenge with this project came when I wanted to add a drop-down menu of category options to my "create a new ritual" form. After reading through a number of StackOverflow discussions, I was able to figure out how to properly use the <select> tag in my form and iterate through all of my @categories to show each category's name in the drop-down menu. The only problem was that when I selected a category option, the new ritual I created didn't know that it belonged to that category! There was no :category_id in my params hash!

I combed through my form code again and again until I realized the missing piece: there was no name:"category_id" that my params could pick up. "Could fixing this issue be as easy as adding a name="category_id" to the select tag?" I wondered. Turns out, yes. That's all I needed.

Once I got that form working, every other route went along smoothly. I felt like I had a real understanding of where I was as I moved through my MVC architecture in my browser, testing my code and trying to hack my own application.

I created a page that showed a user all of his/her/their rituals within a single category and thought it would be very cool (but impossible?!) to create a new ritual that already knew it belonged to that particular category.

I worked with my cohort-leader, Nancy, to create a nested route that would allow a user to do exactly that.
In my rituals_controller I created a new get route to /categories/:category_id/rituals/new that renders erb ':rituals/new'. Within that route, I created an instance variable @category_selected and set it to true. I then added a similar instance variable (@category_selected) in my original get '/rituals/new' route and set it to equal false. With just two little conditionals in my new form and a hidden input line of code, I was able to flag if the user was creating a ritual that already had a given category or not!

With just a few hours more of coding and styling, I had a full CRUD web application that a user could sign up for; login to; create, read, update, and delete their well-being rituals; and logout of! Flatiron School Project Week 2 down!

Marian the Librarian CLI Project

LeahESc — Wed, 30 Sep 2020 18:42:52 +0000

For my first major solo project in the Flatiron School curriculum, I was tasked with creating a CLI(Command Line Interface) application that pulls data from a public API to provide information to a user. I wanted to create something that I myself would want to use and also something manageable, as I only had a week to pull everything together. Github has a very handy list of free public APIs identifies which APIs require key authorization and which don't. I decided to use an API that didn't require a key(for ease of use) and selected the OpenLibrary API.

I used the HTTParty and Json gems to retrieve and parse the data collected from OpenLibrary. The colorize gem I used helped to make everything more legible and engaging for the potential user.

Marian the Librarian--the name of my CLI--includes an API class, which collects data on books when searched with an author's first and last name; a Book class, which serves as my model; and a CLI class, which is where the application runs, loops, and prompts the user for input.

The first hurdle I had in building this CLI was dealing with all the data from the OpenLibrary API. Looking back, I probably would have chosen an API that was slightly less vast. This one has information about pretty much every author that has ever existed. It has entries for every book each author has ever written, including separate entries for various translation. What it also has is seperate entries of the same book if the book title is recorded in a different way. For example. Searching for all books written by Zadie Smith will return: On Beauty, White Teeth, A Changed Mind, a changed mind,..etc. I didn't want to return a list of books to my users with duplicate titles. To make sure that only unique titles were created from all the data parsed from OpenLibrary, I wrote my API method to account for, and not create duplicate titles. If a book object had already been created with that same title, my application would not create a second book object.

The name of the game for me on this project was menuing logic. Because I created a main menu that asked for user input concerning an author as well as a secondary menu that asked for user input concerning a book number, there were a couple times when I accidentally coded myself into a never-ending loop.

My #list method was one of those never-ending loops. Before I had coded it to receive another possible input, it was stuck printing out the details of a book forever.

Working step by step through the logic of each coded line really helped me breakdown the functionality of the application to understand exactly what needed to happen and where the librarian was going off the rails--so to speak.

Once I had everything working, I spent a significant amount of time trying to clean everything up. I wanted to refactor my code so that my CLI was DRY (do not repeat yourself) and easy to follow.

I feel incredibly proud of myself for finishing my first Flatiron project! It's amazing to look back to merely four weeks ago and realize how much I have learned in such a short period of time. Now onto the next piece of the curriculum!

#Why I Decided to Learn Software Development

LeahESc — Fri, 18 Sep 2020 21:44:20 +0000

When the Covid-19 lockdowns happened I, like so many others, was left with only a percentage of my usual income. I had been working as a yoga teacher in Los Angeles and was suddenly left without a studio in which to teach, private clients to instruct, or retreats to lead. After recovering from the blow of losing so much, I started to consider my options. Realizing I had options was in itself extremely liberating. I put together a mental list of what a completely different career path might offer me. Then I began to wonder what path that might be.

I've always been interested in design; both of the built environment as well as our virtual environment. I had had the opportunity to build three different websites (for myself as well as companies I worked for) in the past year using platforms like Squarespace and Weebly and really enjoyed creating those online worlds. I was interested in UX/UI design, but after taking a day-long "bootcamp" course in visual design realized that I wanted to know more about what was going on behind the scenes of design. How did these worlds function? More than just building out what something looks like, or how a user interacts with that something, I was interested in the systems that lay beneath all that.

I had no idea what a career as a software developer looked like, so I did what all resourceful humans who have ever watched "Who Wants to be a Millionaire" do; I phoned a friend. Kristina had completed the Flatiron School Software Engineering program two years ago and was loving her life. She had the most positive things to say about what the program had offered her and how coding had become a great passion of hers. She described her work as building and solving puzzles all day long. "I like puzzles," I thought while speaking with her.

After talking with Kristina, I started to dig a little deeper. What kinds of “jobs” do software engineers do? I listened to the story of a woman who works for The Guardian and designed an application for their website to help prevent their customers from feeling burnt out by depressing news stories. That story really opened my eyes to the idea that software engineers and web developers aren’t only building websites but also have the tools to build systems of great advancement.

I don’t know exactly what I want to do or where I want to work once I graduate from Flatiron School but I know that ultimately I’d love to be able to create systems that help environmental conservation and preservation efforts. I find the cross-section of tech and the environment incredibly fascinating and the development of that cross-section as integral to the protection of our planet.