Super Ruby Ninja's Adventures in App Academy - NYC

Today we had presentations at app academy. They were great and we got to see everyone’s hard work on their website clones. The students all implemented awesome features and the websites looked great! All the projects implemented react and a flux architecture style.

Today’s work on the pinterest clone project involved adding pg search, css required fields, and a delete and edit board option. The board validates if the board author is the current user to allow them to view edit/delete options.

Today’s work on my Pinterest clone involved work on routes and the visual component form pining a picture or uploading an image or url. To listen for changes in the query string I used ComponentWillReceiveProps. Validations were needed to check if the query string was initially blank, blank on update, or possessed a valid/invalid id. Switching between an image and a url so that only one component could be uploaded was more difficult than initially anticipated. I looked at several different options for upload in order to update the input type “file” on the page. Ultimately it was discovered that it is a common advanced problem that is not easily solved and adding a visual overlay to the file input component is the best work-around.

Today’s work on my Pinterest clone, PinFlix was spent fixing up the css to add a “pin it” button on images. To optimize database space I also created a new table called photos to allow multiple pins to belong to the same photo image. The data uploaded must be configured accordingly if a pin creation is generating a photo with a pin photo, a url, or a file upload.

Most of today was centered around working with a new pin form to upload files and attach them to a board. I spent most of the day working around small bugs. Remember when saving something to the database, the association must be called after the record is saved in order to get the most up to date information. When structuring json jbuilder files, remember most “belongs-to” associations are not needed if they are rendered from a parent component and may cause a max stack range error.

This weekend’s work on the capstone project was devoted to refactoring my rails authentication into react-auth. My project is a pinterest clone. I created components for the new user and new session view. The views were refactored to return json. The controllers no longer redirected. The redirect is handled as a callback passed to the Util on success of the ajax call. When using react routes you can check if a user is signed in by using onEnter hooks that will communicate with the current user store and redirect the user to log in, if appropriate. Remember to pass a the redirect as a callback. If the user log in does not persist on page refresh, check your callback to ensure you did not accidentally invoke the callback. Step through the application with your debugger and make sure you hit the methods and components in the order that you expect.

Today’s progress on the Pinterest Clone included adding a comment section to a pin. The section showed all comments for that pin and also a form to create a new pin. When working with jbuilder and partials, specify the folder under which the partial is nested, especially if you are calling the partial from a different controller (i.e. a comment controller calling a pin partial), otherwise you may lose needed associations when re-rendering. I structured my comment components within the pins so that the associations would render comments to be passed down as props.

An easy way to get the hostname of a url is to create a document ‘a’ element then use the document’s url parser to call element.hostname.

Today is the first day of Capstone projects. I am building a Pinterest clone. Today I created the basic rails auth system for a log in and sign up page. We also learned about Heroku and pushed our projects to the site. Heroku integrates with github so make sure that you have one rails project with your git repository inside, otherwise you may run into various issues. You’ll also want to make sure to add the correct dependencies for npm install and add buildpacks to configure both node and ruby.

Today we continued work on Bench BNB. We added router and route react components and a form to create benches that would be displayed on the google map. A click on the map redirected the user to a create bench form that was auto-populated with latitude and longitude coordinates from the user’s click on the map from the previous page. These coordinates were passed using a query hash. The map page would then reflect the created benches.

Today’s project was to begin creating a Bench BNB website. To do so we integrated a third party api, google maps inside of our react components to render a map on the page. We then queried the database to generate markers on the map. Our database queries were restricted the bounds of the map to avoid fetching unnecessary data. The table stored the latitude and longitude of each bench location.

Today was the last day of pair programming. We learned about Routers and Route components using react then build a Pokedex. A Pokedex is a website that lists Pokemon and their toys. We used routers and react to show information on the page. URL hashes were employed in order to not have to make a full request to the server for information.

Today’s lecture covered flux, an application architecture for building user interfaces. The concept behind flux is unidirectional data flow that maps from the Controller-View to the Action/Action API to the Dispatcher to the Store and back to the Controller-View. Flux helps to decouple applications. Today’s project involved creating an organ grinder that maps to a keypress from a keyboard. 

Today’s lecture involved using stores in a react project to render json in ajax calls. The project involved creating a to-do list from scratch including the database, models, controllers, store files, and react components. The store files were related to the react components and would keep track of the data and callbacks to be made. Each component event handler would add a handler to the callback in the TodoStore. They would call the database and process update their private variables, executing all of the callbacks. This would trigger a re-render in the applicable components.

Today at app academy we worked with React.js. React is a javascript library for building user interfaces. It works through components that will update/re-render a section of the DOM. Unlike angular, it does not use two-way data binding. We created the front end presentation for a minesweeper game, a dynamic input field, a weather clock api, and navigation tabs using React components and JSX. JSX is a javascript syntax extension that looks similar to XML/HTML and can help create more readable React elements.

Today’s lecture and project covered ajax and how to use $.ajax to update our webpages. AJAX is asynchronus JavaScript and XML. It is uses the browsers XHR (XML Http Request) functionality to make server requests and handle the response data. The project included adding ajax functionality to a twitter-like website. The basic ajax skeleton contains the url, the data, (the data type - json), a success callback, and an error callback.  The project included adding a follow state to update a follow/unfollow button that would retrieve and update information in the server and update accordingly. We added the text “unfollowing” and “following” to render in between ajax requests to prevent errors if a user tries to re-click a button before the server has updated. We also dynamically updated a users-search input box to list users in the database that match the input as it is being typed. Ajax adds a lot of great functionality without requiring pages to reload.

Today is jQuery’s 10 year anniversary! An exciting day to have embarked on this project.