DEV Community: Molly

My First React Project

Molly — Tue, 14 May 2019 17:33:44 +0000

The final project for Flatiron’s Online Web Development Bootcamp is a React Redux project with a Rails backend. This project cumulates all of what we have learned in the course – Ruby, JS, HTML, CSS, AJAX, React, Rails, and Redux. React and Redux was tough for me to grasp. In addition to Flatiron’s curriculum I used Stephen Grider’s course on React and Redux: https://www.udemy.com/react-redux/. Stephen uses diagrams and analogies to help explain concepts, I highly recommend this course as he walks through building several projects from scratch.

The app that I built is called Daily Code Log in which you can document your daily coding progress. As a self proclaimed code newbie, I realize how important it is to document learnings, especially being aware of what you don’t know. Over time, as you seek out answers to your own questions, you will look back on answered questions and realize how much knowledge you’ve accumulated.

Now that I am on the other side, here are a few quick tips and pointers if you are thinking about tackling a similar project.

Map Out Requirements and a Schedule

The task at hand seemed daunting, so I decided to break the project into smaller parts. Here was my 9 day plan:

Saturday: Map project out- define relationships amongst objects and be able to answer the question “What is the point of my app?”

Sunday: Create seed data, setup Rails backend of project.

Monday: Create entire (mockup) UI of project.

Tuesday: Hookup fetch get requests to fetch internal API data.

Wednesday: Hookup fetch post requests so API endpoint could be updated.

Thursday: Set up React routes.

Friday: Final touches/ squash bugs.

Saturday: Record video walkthrough of app and write blog post on learnings.

Sunday: …Submit project!!!!

Setting a goal for myself each day was very helpful because each morning I knew exactly what I wanted to get accomplished. If I met my goal earlier in the day, I would move on to my next goal.

Use Semantic UI

I used Semantic UI for the web design of my app. Instead of a template, Semantic UI has many different elements- think buttons, cards, icons- that you can use in your app. Semantic gives you the different building blocks, but ultimately the final product can look original and custom made. In order to reference Semantic UI within your application you simply have to import the following link into the client/public/index.html within the <head> tag:

<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css>">
I then used some CSS to reposition and style the elements further.

Here are some screenshots of the simple design of the app:

Form to create a Code Log

Display of all Code Logs

More Than One Way to do the Same Thing…

The trickiest part of the project for me was submitting forms to update my internal API endpoint. Doing a quick google search, most people suggested I use Redux Form, https://redux-form.com/, but my instructor helped me post data to my API without Redux Form. Instead, we used vanilla javascript. In the form’s handleOnSubmit function, we called on an action call addLog which made a post request to the API endpoint:

The reducer, “ADD_LOG”, then adds the form’s data to the Redux store.

I'm looking forward to diving into Redux Form but it was worthwhile to learn the vanillas JS way. Now, when I learn Redux Form, I'll have a solid idea of what Redux Form is doing behind the scenes.

I did it!

I am very proud of the way the project turned out. I have used the app daily to track my coding progress, and once I add authentication, I hope others use the app for their learning benefit as well.

P.S. Here's a link to the walkthrough of the app! https://www.youtube.com/watch?time_continue=1&v=8IQJEPKMCK8

What is a Framework?

Molly — Mon, 22 Apr 2019 19:08:36 +0000

While I was learning Javascript on my own, I began exposing myself to all the resources I could. Using FreeCodeCamp as my guide, I browsed the internet for other supplemental resources to add context to what I was learning. Eventually, I began reading about Javascript frameworks “Learn Angular vs. Vue”, I couldn’t wrap my head around what a framework actually was. I was under the impression that frameworks would make learning how to code “easier”.

Fast forward 2.5 months into my coding bootcamp, and I am learning the ropes of Rails. So, now that I’ve learned and built a project using a framework, how would I define a framework to a total code newbie? Frameworks, and in this case Rails, didn’t make learning how to code any easier, but it did lay out a lot of groundwork so I could hit the ground running with building my web application. Frameworks use abstraction (high level code) in order to provide a foundation to build off of. For example, typing rails new unicorn creates a directory which provides a standard layout of how to organize the files within your application named unicorn. Also, Rails comes with generators in which you can create tables from the command line, instead of having to create a file in your text editor and write out the code in the file in order to create a table. Not to mention, the infamous scaffold generator, which creates CRUD functions for a model by typing out one line in the command line!

In short, you can think of a framework as a piece of software built because someone identified that there was similar code/ patterns that had to get built out each time a new application is built. In the context of Rails, David Heinemeier Hansson put in the legwork in order to make it more efficient for other developers to build an application. There’s even extensive and fantastic documentation to demonstrate how to use the framework.

I remember bringing this topic of “What is a framework?” up with one of my instructors. I first told him what my initial idea of a framework was— training wheels, since frameworks do a lot of the work for you. However, this setup is not trivial. It’s important to understand Ruby well before jumping into Rails, so you are able to understand and have context with the magic (really abstraction) of Rails. My instructor opposed my analogy, and instead, he said think of using frameworks as standing on the shoulders of giants. Well said.

Growing Into a Dream

Molly — Thu, 18 Apr 2019 23:06:28 +0000

Author's Note: This blog post was originally posted on my blog back in October 2018, before I started my coding bootcamp. I just joined the dev.to community, so I wanted to share the post here as well! Oh yeah, and I finish my bootcamp in 2 weeks!

Chase your dreams. Dream big. If you can dream it you can do it. It’s all so exciting and inspiring, but like everything, this concept has both light and shadow.

In college my dream job was to work for a renewable energy company that had a fun company culture— preferably based in sunny southern California. At 21 years old I believed my career was limited to a 9-5 office job, and so if I had to go to work everyday, it might as well be in a welcoming and positive environment working towards a cause I was passionate about. After a series of trial and error, I finally landed my dream job as an analyst at an emerging clean tech company in Philadelphia, PA. My coworkers quickly became good friends, I had semiannual trips to our LA office (!), and I was even teaching yoga to my coworkers after working hours. I was living the dream I had curated and more.

After a year and a half in the role, I wasn’t feeling as aligned as I once had. My internal landscape became quite prickly. I began feeling ungrateful- “…but you had worked so hard and others have helped you so much to get to this point!”

I began reflecting and contemplating – is this what I want for my current self, at 25 years old? It was difficult to admit to myself that my desires have changed.

My desires now demand more flexibility. I dream of living near the beach, working my own hours, and having a schedule that has space to teach yoga.

I began to gain interest in a career that would compliment the lifestyle I was seeking, programming. I got my start by taking classes with a local non-profit, Girl Develop It. Their beginner friendly classes not only taught me the basics, but left me feeling empowered to learn more on my own. I got into the routine of waking up early before work to teach myself how to code. I was determined. After 5 months, I realized that a coding bootcamp would catalyze my shift in careers, but that would come eventually, I thought — it doesn’t have to happen right now.

I’m not ready. I don’t know enough. Why leave my job now? There’s still space for growth and opportunity in my current role. I fed myself excuses.

Ultimately, clinging onto an outdated dream was no match in comparison to my zeal to make the leap.

In a few weeks I’ll be starting my 5 month bootcamp to become a Software Engineer. I don’t know what will follow, but I do know I want to build a lifestyle that my soul desires. I don’t feel ready, but that’s the point.

I’m on the other side of all the confusion, resistance, and fear. Through it, I learned that I outgrew a previous self’s dream in order to grow into a dream that fits all the pieces of my current self. And if I’m lucky enough, this will not be the last time I go through this dream cycle.

What's an API?

Molly — Wed, 17 Apr 2019 18:47:10 +0000

Before attending Flatiron’s online coding bootcamp, I worked as an Operations Analyst for a clean tech company. Although writing SQL queries were the closest I got to actual coding, I was constantly surrounded by tech jargon. I remember hearing lots about API’s. They seemed fragile, complex, hard to define. However, after adding Javascript onto an existing rails project, and enabling internal API use, I have a clearer understanding of what an API is and its use.

What’s an API?

An API is an end point to request data. The data is typically in JSON (Javascript Object Notation) format, reading like a dictionary with its key value pairs, making it very intuitive to read. Data is processed from the endpoint through the browser and can be viewed in the console before it is added to the desired destination, or page. Viewing the data in the console is very helpful because you can play around with the data with Javascript in the browser’s console— testing code to access the points of data that are important to your application.

Internal vs External API’s:

I always thought as API’s as exclusively external. My goto example of an external API is Google Maps. For example, my local pizza shop has Google Maps embedded into the user interface of their website. Luigi’s connects to Google Map’s API so pizza lovers can see the restaurant location when they go onto the site.

However, in the context of my project, I wasn’t in need of external API’s, I wanted to render data that was available within my application. The theme of the project was to render data via AJAX. For example, after a user click ‘View Class Plan’ the class plan will be rendered from the API endpoint, and there will not be a page refresh.

The API endpoint looked like this:

I then wrote the following code in order to render the data from: http://localhost:3000/yoga_classes/6/yoga_class_data and append it to the yoga_classes index page: http://localhost:3000/yoga_classes

``$(function() {
    $(".js-more").on('click', function(){
        let id = $(this).data("id");
        $.getJSON("/yoga_classes/" + id + "/yoga_class_data", function(data) {
        $("#body-" + id).append("<p>" + data["class_plan"] + "</p><p> Created             
        by: " + data["user"]["email"] + "</p>")
         });
    });
  }); ``

Breaking down the code:

Line 2: is saying for class “js-more”, which was assigned to the “View Class Plan” button, when the user clicks the button the following should happen…
Line 3: assigns a variable id to the yoga_class id so that in line 4 the yoga_class_data URL can be dynamic.
Line 4: is where the magic happens. The JQuery method $.getJSON takes two arguments the, the dynamic /yoga_class_data url and a function…
Line 5: that function takes in data (which represents JSON data of a yoga_class) as an argument and appends (adds) the class plan and user to the class ID body-[id], this case body-6, which is located underneath the yoga class title on the page http://localhost:3000/yoga_classes.
Note: I also used Active Model Serializers gem which grants the backend ability to serialize data with the necessary attributes and relationships. .

When Learning and Applying Something New, Pace Yourself:

At the end of each module for Flatiron’s Online Software Engineering Immersion course we are required to build a project which culminates everything we learned the 3 works prior. We cover so much material in 3 weeks that when project time comes around I don’t feel comfortable with the material initially. Each project week I look over the scope of the project and immediately the requirements seem daunting. The Javascript, APIs, and AJAX section was no different. Instead of remaining in a state of resistance I decided to breakdown the project. We had 5 requirements, so my goal was to complete a requirement per day, leaving two extra days for pesty bug fixes or more time in case a certain spec took longer to tackle. This proved to be a great method. I managed to finish my project in 4 days. If I was able to meet my requirement for the day, I continued working. I find that learning happens best when spread out over multiple sessions, so working on a requirement (each requirement tackles a slightly different concept) over 2 separate days solidified my learnings.

Learning a second language was tough, but I learned why it’s necessary. AJAX requests make it quicker for a user to interact with my app. It gives the user the ability to request more data without having to load a new page, which is the modern experience of the web. I’m looking forward to how the concepts of AJAX apply to Redux and React, the last module for the coding bootcamp!