Matt - The App Academy Era

Clean up

The first half of the day was spent finishing up some work from yesterday.

You now get a warning before deleting a photo, and the confirmation modal dialog looks quite nice.

The site now has a title and a fun font for a welcome. I picked out one of Google's fonts and used their CDN

The supposed "demo account" offered to users at the sign up page now actually exists. Using an ajax request, the form is filled out for you with an existing demo user who has seed data (fake data that is set automatically behind the scenes to look like a real user's data).

Albums

The CR

Create. Read. This is most of what you could do with photos on Paintr until today. Creation is done via the Cloudinary widget and a modal dialog form. Reading is done by visiting your home page and clicking on photos. On that click, react renders a large version of the photo for display.

The UD

Giant Undo Button

A friend once described git to me as "a giant undo button." It keeps track of all the changes you make to your file structure so that you can go back to its state at any time later.

Undo the Undo-ability

Unfortunately, a few days ago I let some large images (background images and test images) for my web app into my file structure. They were tracked by git, and now my repository is too large. To undo that would involve undoing many other things, unless it is done carefully. A large repository can stop the webserver we are using from working. It also slows down your git pushes and pulls, and is generally an inefficient way to work. Today I re-wrote history to remove these images from my repository. A few of the commands involved in this process:

git branch (to make any changes undo-able)

git whatchanged

git log -Sjpg (shows only commits that affect filenames with jpg)

Modal Dialogs

A modal dialog is a child window shown in front of the main, parent window. Modal dialogs can be irritating, but if used correctly, they can also be a nice way of focusing on the task at hand. If they are shown by request of the user, and easy to close, they can be useful. With some CSS styling, they can also look really good.

Forms for Uploading

Photo Sizes

I am using a site called "Cloudinary" to host the images for my web app. They provide the functionality to edit photos on their webserver just by inserting parameters into the photo's url. For example, you can splice in "w_200,h_200" in a certain place in the url string to get a 200px by 200px image sent back. In contrast, one could resize the image with css or html on the front end, but that costs a lot of valuable loading time for a large image.

Styling

Photos and Styling

Today I did some more work on the photo show page. That's the page you arrive at when you click on a picture in the list of all pictures. I styled the title, description, and other attributes, and centered and resized the photo to dispaly a large version.

Forms

Progress

The Project

I'll be writing a web app called Paintr over the next two weeks. It is inspired by Flickr and will be built using Ruby on Rails and React.js. You can use it to share photos of your art.

Progress

Bench Routes

The Project

This time, we started a clone of AirBnB, except that instead of finding housing, you find benches. This will be good practice for our final projects, which are starting in week 8. The schedule is to finish on Monday, then start our final projects!

The Tools

We continued to use Flux and React.js on top of Ruby on Rails for this project. In addition, we learned how to use the Google Maps API. It is a nice way of embedding a map into your website. We placed markers on the map (those red bubbles that point to specific locations), by describing coordinates on the globe.

API Use

The Idea

The main bottleneck in web apps these days is the time it takes to go through an HTTP request-response cycle. The more of your web app you can move to the front end (the users computer), the better. React has a way of making a single web page look like multiple pages by re-rendering certain portions of the page. For example, switching between news feed and messages in facebook. This is done by a front end "router" in flux.

The Project

The Project

Today we created a piano keyboard that you can play with the keys on your typing keyboard. The most interesting feature right now is that you can record and play back songs. Because each note is just a simple sine wave with constant volume and pitch, it is completely determined by the following three pieces of information:

The time at which the note started

The time at which the note stopped

The pitch of the note

Therefore, the sound can be recorded using a JavaScript array holding this information about each note!

Flux

Combined!

We put Rails and React together today. This meant writing JavaScript to run on the client-side, and Ruby to run on the Server. We used a gem called react-rails to make them work together.

The Project

What is this?

React is part of the "V" (view) from the MVC paradigm (model, view, controller). It is a way of working with DOM elements, like we have been with jQuery and AJAX. React works with something called a "virtual DOM." You describe the way you want your view to look, then when data is updated on any part of the page, it re-renders the entire page so that the changes show. This is very different from the way Backbone or Angular work.

Cost

Re-render the entire page? Well, the virtual DOM is re-created with the changes, then through a process called "reconcilliation", the virtual DOM is compared with the real one, and only needed changes are updated. The DOM is slow. Updating only the changed parts makes React very fast. You don't have to keep track of what to render because react reacts for you to every change on the page.

Projects

What is it?

Asynchronous JavaScript and XML (AJAX) is a way for a client computer to get data from a server without having to do an entire page refresh, make the entire screen go blank for a second (or longer), and annoy users. To acheive this, an HTTP request is made in the background (asynchronously). When the response is ready, the relevent part of the page can update cleanly and quickly.

Examples

Plugins

A jQuery plugin is one way to DRY up your code. If you are using a certain pattern of jQuery functionality over and over, you can encapsulate that functionality into a plugin for re-use.

Projects

JQuery!