Bird vs. Bird @birdvsbird - Tumblr Blog

Audio Controls

Today was filled up with general debugging and the addition of functional audio controls to the user interface. The user interface was a lot of fun to design, I was able to get a workable tracking bar using just JavaScript and React by interacting with the audio tag on the DOM. Learned a lot about working with media through HTML and JS. Just about ready to present tomorrow afternoon.

Sounds in the Cloud

Today was a big day, in that my site finally can actually play sounds! It was really satisfying to, for the first time, hear the roar of a TIE Fighter when I hit the play button. There were a couple of technical challenges involved in implementing the feature, and it took me the better part of the afternoon, but in a lot of substantial ways it was the same as the image uploading feature I implemented yesterday, so that was helpful. As it stands the site can accept .wav files, .mp3 files, and other types of audio, as well as track photos. Ready for the big last stretch tomorrow.

Image Upload

Today was focused on getting Image Upload working. Started off with an unrelated job, creating the Track view page, then also added the ability for Series of Tracks to expand into a full view from a collapsed one that only shows four tracks at a time. Image Upload was a big project, had to first get set up with Amazon Web Services to host my Images -- I also plan to host my audio files there once I start implementing sound tomorrow -- then reconfigure my database to include image files attached to Users and Tracks. By the end of the day I had images set up to be uploadable along with Tracks, and from there it should be fairly quick and straightforward to expand the functionality to include User avatars as well. Updated my seed file accordingly.

Collecting Tracks

Worked on collecting Tracks into Series today -- should not have called them Series in hindsight, since it’s the same singular as plural, which was a little confusing. But first I had to extract the Navigation Bar out into being its own Component, which took a little while, and then work out some bugs in Track creation. Once it was time to do Series, the work was slow but steady -- took me a while to set up the database change, but eventually got to the point where I could work through making the Series display, and the capability to toggle between a User’s Tracks and Series. Still have to implement Series creation, then I’m planning on handling Sound and Image upload tomorrow.

Tracks on Rails

Finished up implementing Tracks on Friday, then over the weekend added the User Detail view. Took me a while to work through Tracks, but I think it’ll make it easier to do the subsequent ones. CSS for the User Detail was fun as always.

Back to Front

Spend some time this morning finishing my homepage’s styling -- I’ve decided to do a lot of my CSS up front so that I can look at something like what I’ll end up having as I expand and test my functionality. After that, I spent most of the day moving the user auth functionality from the Backend to the Frontend, which was tedious work that involved a lot of debugging, but resulted in my getting a much richer understanding of exactly how all the pieces of the puzzle that is React fit together. It should, if everything goes according to plan, make it a lot easier to handle Frontend creation and editing of Tracks and Playlists tomorrow.

Capstone Episode II: Attack of the Database

https://cloud-cast.herokuapp.com/ I had done a little bit of database work yesterday to save Users, but today I really started to bite into working with the database as I implemented Tracks. Building the Track model and controller were easy enough, and I used JBuilder to let the frontend API access the information, but when it came time to actually build the frontend with React I ran into some trouble. After a few hours of flailing around the project trying to remember all the React syntax I’d need to get the job done, I managed to get a working index, and I spend the last hour or so of the day using CSS to style the index items in imitation of SoundCloud’s visual design.

Capstone Day 1: User Authentication

Today was our first day working on our capstone projects, ending with me uploading my first live page via heroku: https://cloud-cast.herokuapp.com/session/new It’s not much so far in terms of functionality, but at least locally, the user authentication seems to be working pretty well. The idea is that by two weeks’ time it’ll be a full-fledged SoundCloud clone, so hopefully that works out alright! Had some time to edit my planned schedule before starting with CSS and user auth, and I think I have a pretty reasonable itinerary planned out. So far so good.

Active Record Refresher

Day 2 of the AirBnB project, which for me was dominated by refreshing my knowledge of how to integrate Active Record with React and Rails. It had been a while since we’d done much with the server-side of our Rails projects, so it definitely took some reacquainting for me to get comfortable with it again. The challenge that took me the longest was restricting the on-page map to load from the database only the markers which it would actually have to display. Figuring this out was a long process but it got me feeling much more comfortable with the back-end aspects of dealing with the server, just in time for Capstone to start tomorrow. Looking forward to it.

React on Rails

Today was our biggest ground-up React project to date: we were assigned to make a Air BnB clone using React, Rails, and an embedded Google Maps API. There were a few stumbling blocks for me in the beginning getting React to work with Rails and getting a firmer understanding of the project’s structure, but once I got my head around it I was able to get going much more smoothly. Got a much deeper grip on React, and it felt good to do a file or two in Ruby again after all this time in JavaScript. Think I like JavaScript better though.

React Routers

Learned to make React projects with Routers today, which allows for single-page apps with the appearance of multiple pages but the efficiency of one. The project was a database project to make a Pokedex app with 124 pokemon. That meant we got to organize pictures among with text data, which was interesting, and integration with Ajax and JQuery was a good challenge.

Flux

Had a great time learning Flux today, it really helped solidify my understanding of how to use React. As an architecture Flux was not intuitive at first, but once I got a handle of why it was laid out how it was it made sense to me in a much deeper way than the React projects we did yesterday and today. Our project was to build an in-browser keyboard that could play a tune, record it, and then play it back to the user. We’d never worked with sound before and it was a really engaging project, good way to work out how Flux works and why it’s worth using.

React Stores

Learned to do React with Data Stores today, the project was to build a To-do list app. Got a lot more comfortable with React over the course of the project, especially in terms of incorporating it with Rails through JSX. Unlike yesterday we did all of the JSX work up front today before touching anything with React, which really helped to have a clear foundation for what we were trying to do.

React

Started working on React today, I’m still finding it a little opaque but starting to get the hang of it. The part of it where I can get kind of tangled up is with the structure of requests, especially with asynchronous functions. Still, it seems like a more powerful tool even than JQuery so I’m looking forward to getting more comfortable with it. The assignment was to make some widgets, a selector menu and a weather clock. The weather part was especially tough because it involved making a request for both the user’s location and the weather there, but we were able to push through it and eventually work it out.

Ajax

To learn Ajax today we were given a very basic Twitter clone that ran inefficiently -- reloading the current page every time the user changed or posted anything -- and tasked with making it more streamlined using Ajax requests. This also involved a lot of practice for our JQuery skills, which was good. Also started to get more comfortable with Ajax, which I can see is going to be a very powerful tool going forward. Starting React next week. Big picture.

Building JQuery

Today’s project was to build our own Lite version of JQuery, implementing events, appending, and most of JQuery’s other most basic functionality. Yesterday I wasn’t 100% on JQuery, but coding its foundation from scratch gave me a much deeper understanding of what it is and how it works. Another useful effect of today’s project was that I would feel comfortable doing some basic logic without JQuery that I otherwise would have wanted to use it for. I can definitely see how this could be useful, since the entirety of JQuery wouldn’t be necessary for every case.

JQuery

JQuery! Very exciting. Today we went back to two of the first games we built when we first learned Ruby -- Tic Tec Toe and Towers of Hanoi, but this time with user interfaces built in the browser using JQuery and CSS. This was how we learned JQuery, which we spent the morning having a lecture about, but it was also really excellent CSS practice: my partner and I spent a lot of time getting our game setups to look good, experimenting with different layouts and elements until we got it just how we wanted it. It was extremely satisfying to finally be able to make a game that looked good, and I wish we had in-class time to do the same with something more complicated like Battleship or Minesweeper. JQuery is tough but real useful, and I’m loving CSS.

Trending Blogs

Recently Viewed Blogs

Bird vs. Bird