Matt Trifilo JavaScript is eating the world.

Lessons Learned from My First Full Stack Application

All of the things I've been learning for the past two years were finally brought together to build out my first full stack application for Free Code Camp, a polling app. It's deployed! You can view the source on GitHub.

I took my time on this project because while I was comfortable with React, Express, and MongoDB, I'd never used them together to build a large, modern CRUD application. Piling on to that, I had no experience at all with Redux or the Flux pattern in general, much less how to pass state around in a larger React/Redux application. This was also my first experience visualizing data with D3.js and dealing with user authentication.

I've learned more from this project than anything else I've ever built. This seems like a good time to take a step back to reflect on and share some of the most useful lessons I've learned from this project.

Read on...

Navigating the Unknown Unknowns

As new coders traverse the vast, treacherous landscape of modern JavaScript development in 2017, many chasms in knowledge appear out of the fog that can stop them in their tracks. There's no avoiding it. There's no guessing where they might even arise at times.

In my case, the first "knowledge chasm" of many appeared after completing Codecademy's JavaScript course, and finishing all of Free Code Camp's beginner algorithm challenges. I felt pretty confident. JavaScript was becoming familiar, and I built web pages with HTML, CSS, and jQuery with increasing ease.

Then came Free Code Camp's Intermediate Front End Development challenges to build simple client-side apps like a quote generator and a weather app. I barely knew where or how to begin. I knew how make a web page with HTML and CSS, I knew how to work through a JavaScript algorithm challenge, and I could make page elements fade and reappear with jQuery. That's all very nice, but how do you build an application? The problem was that everything I'd learned up to that point was from the safe confines of interactive code challenges. Solve the problem laid out in the pre-written code in the IDE window, and you get a virtual high five!

The guided trail of interactive code challenges ended and the time came to venture into wild. Blocking the way I wanted to go was this gaping, vertical ravine of not knowing how to build an application. How do you cross a wide, steep, menacing ravine? The simple answer is to find the tools you need to repel down and then climb up the other side. Learn which techniques and tools to use when, where, and why, learn them well, learn how to use them together, and you can reach your goal. Easy right? Not so much.

Read on...

Leveling Up

At the end of May, I finally completed my Front End Certification for Free Code Camp.

Since then, I've spent some time refactoring a few of my older projects to get them to a place where I don't cringe every time I look at the source code. They were pretty grisly. My Pomodoro app from last year in particular was a hacky mess. It was my first project trying out AngularJS, and while it worked, it broke pretty much every relevant style in John Papa's style guide. Here's the old source if you have a strong stomach. All of the logic was in one controller and $scope was polluted with almost every variable in the project. Not even one service to handle business logic. The controller was in charge or user interactions, business logic, and state. The horror. It must be destroyed. I didn't even know how to use a service versus a controller at the time. It's a small app, and the design-pattern-less layout of the code was well commented, but it would have quickly turned into a field of thorns if it ever needed new features. Good code should be mostly self-documenting anyway. I took this as an opportunity to refactor the app's code structure and logic to separate concerns (UI elements, state, application logic, user interaction handling) and get some practice using Angular 1.5's great new component method, modeled after Angular 2's component pattern. That's a story for another blog post, but it was a humbling learning experience, and Angular 1's paradigm makes so much more sense now on every level.

The new pomodoro source code is here.

It's far from perfect, but application state is maintained in a single shared service (not spread out all over the application), the controllers simply handle user interactions, and the application structure is organized by feature.

Using Redux would greatly impove the state handling, but that's for another day.

Read on...

First Blog Post!

I thought I'd christen this shiny new blog with a reflection of how I got to this point. This post will be long (okay, it's a novel), but this will be a good chance for me to reflect on the past few years that have been a roller coaster to say the least.

Read on...