The App Academy Experience

I go back to school to become a web developer. Follow me to see what I learn along the way. You may just learn something yourself!

[appacademycourse]

Week 9, Day 4

Full stack web developer, looking for work.

Today I put the finishing touch on my final product. Well, not really (there will always be some new feature I want to add), but it's now at the point where it is functional, unique, and presentable.

I'm really happy with what I was able to accomplish on Better Brewing over these last two weeks. It was a project that I've been thinking about for a while, and it's really exciting to actually see an early version of it actually working and actually online. Over the next few weeks, I'll probably add some more cool features, and maybe even give it a real life domain name!

Tomorrow we present our projects to the class, and then move on to the next phase of App Academy: hiring bootcamp. It looks really interesting and exciting, and I'm especially glad that App Academy focuses so hard on finding its students jobs. While I do have professional experience, the world of tech interviews is new to me, as is looking for a career in the web development field.

I can't wait to see what opportunities this brings all of us.

[appacademycourse]

Week 9, Day 3

Though there are many more features I would like to add, it's time I add a nice layer of polish to everything I've made already.

Today I implemented a couple more features, including having flavor wheel thumbnails in the brew note view, and some more convenient tables and anchored links for easy navigating and brewing.

Tomorrow I will focus mostly on style. While I was able to implement my design early on, many of my views became messed up when I added new features. Simple things like consistent padding broke, and the negative effect is noticeable right away. So, the solution, while tedious and time consuming, is to refactor my CSS! This will probably help me not only make the site look better, but make my code look better too, not to mention making it much easier to maintain.

If you want to see all the progress I've made, check out the site at better-brewing.herokuapp.com! Sign up, play around, and let me know what you think!

[appacademycourse]

Week 9, Day 2

I now have some test coverage for my app! No longer will I break simple features like uploading/cloning recipes, or creating brew notes/navigating to the recipes page, thanks to RSpec and Capybara. I also wrote some more specific tests for several of my models, focusing on any custom methods I wrote for them. Testing is great, because now I can refactor large parts of my code with confidence, knowing that I won't break anything major.

Besides continuing to write more and more tests, I'm still adding features! Today I dove deeper into the brew walkthrough, writing a preliminary version of some actual instructions for brew day. I also dropped hints throughout my site instructing the user on what he/she can do.

For comparing notes, I improved the tasting notes area to account for the fact that a single brew note might have several tasting notes. I got to flex my UJS and jQuery muscles to allow for switching between flavor wheels, while also allowing the canvas to be resized with the screen.

These next few days will be spent focusing on UX. The end goal? A total stranger should be able to navigate to my site and know exactly what to do with it.

[appacademycourse]

Week 9, Day 1

Today i got to do some metaprogramming!

Since I have many different fields that take some sort of volume, I decided on a base unit that I'll store in my database. But that unit (fl. oz.), isn't usually what the brewer is thinking in. For example, when seeing how much beer you have in your fermenter, you are usually thinking in gallons.

So, I learned about Rails Concerns to help me with unit conversions. Concerns let me create a module that I can mix in to my models, giving them common methods that I don't have to rewrite over and over. And because I will be working with many types of unit conversions, I updated the models' method_missing to be able to take an existing method and add _gallons to the end of it (or some other unit), which would handle all the conversions.

For example, if a user saves the fermentation volume as 4.5 gallons, my app just has to say volume_gallons = 4.5. The model can now handle that, and store the proper fl oz value in the database. To retrieve the measurement in gallons, i just have to call volume_gallons, and voila, I can now see the measurement in gallons!

Tomorrow I'll extend this even further and eventually let the user decide what units he/she wants to use to enter the information. Also, it's about time I write some tests...

(photo credit)

[appacademycourse]

Week 8, Day 5

One of the biggest challenges of building this app has been keeping track of everything. I've never worked with this much code before, and it became more and more apparent that a clear and consistent organizational pattern is necessary before moving forward.

So, i spent the weekend refactoring! I also added a few more features to my app, including tasting notes that output a cool radar chart when you fill it out. I used jQuery's UI library to build sliders to connect to a number input to make filling out the 16 different flavor attributes more fun.

Next week is the last week of the main part of the App Academy curriculum, so I'll probably refrain from adding any brand new features. I have the main overall structure of my app in place, so I'm probably better off working inside of it, making it as fast and easy to use as possible, rather than continue adding more things.

Hopefully my weekend refactoring will make next week not too difficult!

Oh, and check out my app at better-brewing.herokuapp.com.

(photo credit)

[appacademycourse]

Week 8, Day 4

Things are starting to take shape! I overhauled the entire look of the site, and now it looks much cleaner and is more pleasant to use. I also continued to add more functionality, including fixing my graphs. Instead of using Chartkick, I went straight to the source: Google Charts API. I spent a bit too much time creating a custom animation as well... Now you can compare two brew notes side-by-side, and can easily spot differences using charts.

Tomorrow I'm going to add tasting notes. This will create a whole new layer of functionality, and round out the entire set of core features. A user could create a couple of brews, then compare them on many different metrics. Does mashing for longer make it taste more astringent? Did fermenting at a lower temperature make it taste less fruity? Now you can know!

Next week: Homebrewing walkthrough for beginners, and built-in timers for brew day.

[appacademycourse]

Week 8 Day 3

Today I continued to work on my capstone project. The main focus of the day was adding Unobtrusive JavaScript wherever I found it appropriate. The most notable difference is that now, in my main brew note show page, you can add rows to the various tables, edit rows in place, and even delete rows, all without requiring a page refresh.

I also started on my note compare page, where you can directly compare brew notes for two brews. The hope here is to be able to fine tune your process by figuring out exactly what changed between your brew days and how it affected the final product. For now, you can see a list of all the notes for a single recipe, and open up notes on a left or right column. I am using Chartkick to help visualize the data in a more exciting way.

Tomorrow I'm going to focus on design, which means lots of time with CSS3! Now that I have a decent amount of functionality, I want the site to look and feel nice.

[appacademycourse]

Week 8, Day 2

I spent the bulk of today adding nested notes fields to my recipe brew notes. The result? A giant form containing fields for any note you'd ever want to take when brewing a beer. While it is nice and functional, it definitely isn't fun to fill out.

Enter Unobtrusive JavaScript.

Now, when you create a new brew note, my app automatically creates a completed note with no data. It then walks you through each of the brew steps (mash, boil, fermenting, etc...), and shows you a nice form to fill out for each step. As you brew, you can move through the steps, taking notes along the way. When you're done, it shows you all of the notes that you took in a nice, organized way!

You can also go back in and add even more notes or edit notes, if you want.

Tomorrow I plan to continue to learn more about UJS, and try to use it to make my app faster and more exciting to use.

[appacademycourse]

Week 8, Day 1

Better Brewing exists for real now! Although its functionality is all very basic, a user can sign up, upload a recipe from some preexisting beerxml, click on a nice green "Brew Me" button on the recipe page, and take some brew notes. They can then access these notes later on. He/She can also see other brewers, their recipes, and add them as friends. And if a user sees a recipe on the site that they like, they can clone it for themselves!

I still have miles to go, but it's nice being able to already see a basic functioning app. After class I set up Heroku and Paperclip. Users can now upload photos of their beer (a great way to compare color), and actually visit my site. I'll have that link for you as soon as it's ready...

Tomorrow I plan on further enhancing my beer notes functionality. It should have all of the necessary fields, and make it easy to edit notes in the future. I also have to figure out how to safely add some general styles to my site ('safely' in that they won't mess up the styles I've already defined) so that I can add features without needing to style it right away.

So much to code, so much to learn, so much to brew!

[appacademycourse]

Week 7, Days 5-7

This weekend I started building Better Brewing. This is the first project that I'm making that lasts more than 2 days, so it'll be interesting to see how long the different phases take.

So far I've managed to put together a general layout, with a mostly functional top bar and side bar. I also built my main index view, which is where you are sent to after logging in, and the core piece of my recipe view.

I used the Devise gem, which helps you set up user sign up and login. It takes care of much of the boilerplate that I was writing for my in-class projects for setting up sessions and users, and provides some other helpful features as well.

I also did some work with the Brewser gem, which helps parse BeerXML (a standard format for home brew recipes) into a useable Ruby object. Because the site where I'm importing my BeerXML recipes doesn't export some key data, the gem wasn't working. So, I also got a chance to contribute to an open source project on Github!

With the Brewser gem now working the way that I need it to, I will move forward with figuring out how to start with raw BeerXML and give the user something interesting. I can't wait to see how this project turns out!

[appacademycourse]

Week 7, Day 4

Today we became web designers. We were handed a series of templates, and had to build websites using HTML and CSS to mimic their looks and functionalities. I learned that you could do a lot of interesting things with just HTML and CSS (no JavaScript required), like make a responsive drop-down menu. It was fun to be able to think about how to best layout a website from the view down. We had normally been starting with the API layer, building our databases and relationships first before doing any front-end design. But for our capstone, we are going to work with a mockup of the final product first. This should help us better understand our goals, and when we actually get to coding, give us a much clearer direction. I am putting the CitiBike project on the backburner for now, as I focus on my capstone. Introducing: Better Brewing, a web app for helping beginner and intermediate homebrewers make better beer! More to come...

[appacademycourse]

Week 7 Day 3

The last of our mini projects is completed. Tomorrow we work on CSS, and then we start our capstone projects.

Today we built a clone of Github Gist. We got even more practice using Backbone.js, especially using composite views. New to today's app was the ability to create an arbitrary amount of Gist-Files in a new Gist. This involved being able to render views inside of a view, and passing attributes in a nested hash to the Rails API.

It's convenient to be able to lean on some of Backbone's abstractions, but at the same time there is a lot that I'd rather do manually. It feels nice to be comfortable enough using JavaScript and JQuery to want to try to do things manually, but I'm sure my code would look nicer if I used more of Backbone's builtin functions. It's just a matter of getting more practice using Backbone, and knowing more intuitively what it can and can't do for me.

We found out yesterday that we are going to be building one capstone project instead of two, with the idea being that we can spend more time and energy focusing on building and polishing one awesome project, rather than having two that we had to rush to finish. I can't decide which of my projects to make, though...

[appacademycourse]

Week 7, Day 2

Our project today had us exploring more ways to use Backbone.js, an awesome JavaScript library that can be used for making single page apps.

One shortcoming of Backbone is that it doesn't support the robust associations that models in Active Record support automatically. For example, if we said that a single RSS feed had many entries, you could simply write feed.entries in Rails to see a list of all of the entries associated with that feed. But this information isn't included in the JSON that's returned by Rails by default, and our backbone Feed model couldn't parse it even if it was.

So we rewrote the parse method for our Backbone Feed model, which allowed it to also instantiate an entire Backbone Entries collection using the information in our nested JSON. This means that, when we initially load the page, we get all the necessary data from our server at once, making navigating through different feeds incredibly fast.

I definitely want to try to use Backbone on my capstone project. Tomorrow we get even more practice with Backbone and nested views when we build a clone of Github Gist. Views inside of views...

[appacademycourse]

Week 7 Day 1

Time is flying by. I just submitted my proposal for the first of my two capstone projects. HINT: it has a lot to do with that side project I started a couple of weeks ago.

Today we made our first single page app using a combination of Ruby on Rails and Backbone.js. The app was a basic online journal, with functionality for creating, editing, and deleting posts.

We were able to set up the backend fairly quickly, and moved into Backbone mode. The front end of the site had its own router, which was able to serve up views quickly without having to refresh the page.

We employed some CSS to give the layout a sidebar, which in turn used some Backbone listeners. The sidebar consisted of an automatically updated list of posts ordered chronologically, which loaded the more detailed post view next to it when clicked on. We also had some time to make the app look nice, including adding some fade in and fade out effects when you load or delete a post. Feel free to check out the code on Github.

We barely scratched the surface of what Backbone can do. Tomorrow we delve deeper into Backbone, exploring how it can interact with multiple types of integrated models.

[appacademycourse]

Week 6, Days 5-7

This weekend I learned that one MVC just simply isn't enough to make a nice web app. You actually need (at least) two!

Now that we are fairly comfortable using JavaScript, we're turning our simple multi page apps into single page apps (SPAs). This means that the majority of the Rails portion of our apps have turned into a nice RESTful API for our front end JavaScript to interact with.

But now that we've lost most of the View part of the Rails MVC architecture, what do we do? The answer is: use a ton of JavaScript to make up for it. Thankfully, we have Backbone.js, a lightweight javascript MVC framework, to help us out.

The Backbone.js frontend interacts asynchronously with the Ruby on Rails backend and uses JQuery to display views to the user without having to refresh/redirect to a whole new page. Nice!

Tomorrow we build our first app using Backbone.js. I imagine that my capstone project would work really well as a single page app, so this should help me better visualize what I need to know going forward.

This weekend marks the unofficial (official?) halfway point through the entire App Academy curriculum. I've learned a ton, and I have a ton left to learn, which seems like a good place to be at a halfway point.

[appacademycourse]

Week 6, Day 4

Today we combined our new knowledge of JQuery and AJAX with what we had previously learned in Rails to build a "secrets" app. What sets this app apart from previous projects is that it could update a page with new data without needing to refresh or redirect to a new page.

The toughest new thing to grasp was using javascript to interact with data returned from an HTTP request. With AJAX, you can make a request in the background, which can then use JQuery to update the webpage as the information comes in.

In this case, we were able to post secrets on a friend's wall and have it appear on the page at the same time, without a refresh. We also built a simple dynamic form, which had a button that added a new pulldown menu so that you could tag your secrets with multiple tags.

AJAX is simple yet extremely powerful, and allows you to make web pages that interact with your server-side code without slowing down the experience on the client side. I can't wait to see what else I can do with it.

[appacademycourse]

Week 6 Day 3

SNAAAAAAKE

Today we built a Snake game using Javascript. To implement the UI, we used HTML, a tiny bit of CSS, and JQuery.

Rather than drawing the game on a canvas, I used my new knowledge of JQuery to build and modify regular old html divs. By changing their classes dynamically, I made it look like a snake was moving across the screen, collecting apples and growing in size.

JQuery is a powerful library, allowing you to interact with any element on a website using JavaScript without having to refresh the page. This means you can "animate" webpage elements based on user input.

Well, what are you waiting for? Check out my code on github and play for yourself!

After I finished snake, I changed the game around a bit to make it more like TRON. Two players can play at once, each controlling their own ever growing snake. Whoever crashes first loses! Check out that game here.

Tomorrow we start with AJAX, a powerful feature of JavaScript/web browsers that lets you make HTTP requests in the background. Let's see what it can do!

(photo source)