Howdy Everyone!
In my previous blog post, I wrapped up the week's curriculum at my Flatiron bootcamp with a project. For that project I built a small guessing game called 'Food Fight'. If you are curious about it, check out my Week 6 Blog Post!
If you'd like to see Week 8, click here.
Front End Development with Javascript
So far we've been dealing with building objects, persisting them in a database, and connecting those models to neat-o web applications that we built through Rack & Rails Model/View/Controller architecture. We also were taught the concept of validation and authentication (which is something I am reviewing this weekend, more on that later) to keep our database safe from iffy people. We also learned how to access Application Programming Interfaces to grab data sets from other servers (internet) to use for our applications. We've done all of this using Ruby on Rails, and HTML.
And that was really awesome, moving data around on the internet and building simple websites was cool, but those websites were pretty static.
I mean, even looking at my food fight game, it really was just a series of pages that held some information, but the information on each page never changed during their viewing (AKA the html never re-rendered).
Well, this week was learning about how to make our websites show dynamic behavior using Javascript. I spent the entire week working through coding labs, because we have a code challenge next week!
Obviously coming from learning Ruby and making a shift to learning a new language had setbacks. During the first 2 days I reviewed javascript fundamentals and had some challenges:
- Using ruby syntax when writing javascript code (causing errors)
- Learning low level iterators (like, actually) because ruby has a bunch of fantastic enumerables that javascript did not
- Getting used to giant concept of "callbacks"... and learning to use functions as objects
- Tying Javascript with the concept of a Document Object Model (or DOM).
But, surprisingly enough, since I learned a lot of base programming fundamentals from ruby, I pretty much reached an equivalent programming competence in javascript as I had in ruby in 2-3 days (because the concepts were really similar, so it was mostly getting the syntax down).
Learning Javascript and HTML Manipulation
The first two days passed by and I felt comfortable enough to tackle the material relating Javascript to our web applications. This began with understanding the Document Object Model (DOM). The DOM is tied with Javascript and is basically how Javascript manipulates HTML. We learned how to see our Javascript handywork through the browser's "Inspector" tool. Learning how to extract or "target" HTML elements using Javascript was a new concept, but when I realized that DOM objects are basically hashes, whose keys point to the HTML's properties and values... it began to be easier to work with!
Learning Javascript and Dynamic Behavior
After I understood how to manipulate a page's HTML using Javascript, we learned how to use EventListeners to do that manipulation on a button click, or a form submission. This was effectively tying a button click (i.e "event") to a function execution (or callback), then taking the target of the event and grabbing its information in DOM form. Using event handlers, we could create cool forms to take text input, create lists of stuff, and even make stuff change color on demand!
Using Javascript for Internet-ish Things
Basically, our web application could serve up some HTML (CSS... optional?) to a user pretty quickly. This was based on RESTful routing practices I learned during my Ruby days:
- A request to our web application would (hopefully) match a route in our routes file
- That route would go to a controller action
- The action would manipulate our ruby models and eventually render a view
- Our HTML *view would have forms or buttons that would redirect to a route
But now, using Javascript:
- A request to our web application would (hopefully) match a route in our routes file
- That route would go to a controller action
- The action would manipulate our ruby models and eventually render json (javascript object notation)
- That json would be returned to the action that initially made the request, called a fetch in the javascript file
- That json object would be used to manipulate the DOM and manipulate the page as desired
- Wait for next request, like a button click
Learning this meant that I could dynamically pull in new content via the DOM by making HTTP requests (and update a page's content), as well as persisting data to a database by processing the fetch responses!
Does this mean I learned how to be a junior full stack developer? That might be a stretch... but I definitely could now do back end AND front end basics!
When Friday came around I had made good progress, and took some time to think about how I might package all my new knowledge into a project for the next couple weeks!
Bonus: Hack To Give Thanks Hackathon
As a way to practice my new Javascript skills, I entered a local hackathon offered by DemocracyLab with some of my classmates. It was today and it was an absolute blast!
A Hackathon is an event where developers (and non developers) of all skill levels come together to solve a problem. This was a special hackathon targeted towards doing good for the world. Typically you have a day or two to come up with a project (or work on an existing one) and you present in front of a crowd at the end. It's a fantastic way to meet other eager beavers, and also helps build core skills like public speaking, working in a team, project management, and networking!
The idea I came up with (which was validated by my classmates) was "Play It Forward"!
Play It Forward is a web application aimed at supporting non-profits by "gamifying" volunteer engagement! Basically, you as a user get points and rewards as you volunteer for registered non-profit events. Your points level your "character" up, and the higher level your character is, the cooler stuff you can do in the game-part of the application. We also thought that having some sort of partnerships between local businesses would be awesome, where they could register under this application and offer discounts to users with certain levels of engagement (and they would in turn, get business and good PR).
We did some late night brainstorming and came up with a general model, associations, and page structure the night before the Hackathon:
We got to the Hackathon and the session began with team formations. Our initial team of 4 people grew to a team of 9! We have a mix of front-end, back-end, and non-developers. We had 7 hours to go from a plan, to some deliverable or web application to present:
We worked through lunch, and went from this:
To this!
This was an absolutely transformative experience
Our team split into Front-End and Back-End. We all worked on our individual components and coordinated our changes through GitHub. I struggled with GitHub merges, and had one of our team members help me make sure I didn't ruin our entire project by "pushing to master". I also struggled to implement authentication for our volunteer and non-profit model, so I will be practicing that tomorrow!
All in all, I would recommend Hackathons to anyone trying to accelerate their career, practice their skills, and network with some really dedicated (and super nice) people.
Good luck in your own endeavors! See you next time!
Shawn
Top comments (0)