Don't wanna be here? Send us removal request.
Text
Capstone Project Day 6
Project update: I finished a tagging system for my project. It took slightly longer than I thought because there’s a many-to-many relation and my skills in setting up rails association was slightly rusty. I’m glad that I had the opportunity to review that.
Cohort update: Secret Santa was awesome. One very special gift was a jar with a goldfish in it!
0 notes
Text
Capstone Project Days 4 and 5
Over the last couple of days, I’ve consulted a few TAs about passing information around among React components. To the best of current knowledge, I summarized the following patterns:
From a parent component to its children component, use props;
When navigating from one component to another, we could use query string in history.pushState’s third argument (usually something small like id) and then rest of the information should be available in stores.
0 notes
Text
Capstone Project Day 4
At this point, most of us are quite comfortable using react and other tools to build the basic components, but integrating other libraries and could take more time than I expected. Sometimes reading the documentation itself takes a while and trial and error in addition to that. But hey, it’s better than reinventing the wheels. I look forward to using more mixins and plugins in the days to come
0 notes
Text
Capstone Project Day 3
Progress on the project has been slow but good. I've built a basic version of Flux structure for my Project which allows users to view and create projects. Next step is to add capabilities to add multimedia files to projects. Jeff showed us how to use Cloudinary to store user uploaded files. The best way to learn is to try it myself. Stay tuned.
0 notes
Text
Capstone Project Day2
Things can get pretty intense during the Capstone Project. For one thing, we are on our own most of the time, unlike pair-programming. For me, that's a huge disadvantage when it comes to debugging. I have things working this minute, and then after I made a bunch of changes, it stopped working completely. And then I will try to fix it in the next 30 minutes or so and be mad at myself. And then try a bunch more things to make it work. In the heat of moment, I tend to forget one of the most powerful techniques of debugging: comparing what works with what does not and learn from it. This is where git comes in handy. I wasn't a firm believer of git for the most part, but now I'm a convert after it saved my ass a few times. Capstone project: Let's git it done!
0 notes
Text
Capstone Project
We’re starting our capstone project! I started with an excitement that soon transformed into...slight disappointment. I tried to build entire authentication myself but could not do it without looking up previous materials. I reviewed and tried again. I couldn’t do it as fast as I imagine. But it’s ok, this is where learning really happens. Let the struggle begin.
0 notes
Text
Strange bug
Today I ran into a strange error while making an ajax request. The strange thing is that it’s a “Maximum Stack Call Reached” reached. Wait... I haven’t seen this in a long while. This is mostly for recursive methods. But I didn’t use a recursive method! It turns out that this strange error came from passing in data incorrectly, and somehow caused buildParams to run recursively. This careless error makes me feel nostalgic about pair-programming already. A fresh pair of eyes would have helped.
0 notes
Text
Routing with React Router
One very useful features on a webpage is the ability to navigate to different elements without refreshing a page, which minimizes network traffic and speeds up the loading. We learned how to do that with React Router today. The History mixin that comes with React Router can handle the rendering to a specific component and/or its children if given its url. Max showed us a way to append url to the location hash without reloading the whole page and then retrieve that value of the location hash to setup routing (location.hash). Pretty awesome stuff.
0 notes
Text
Flux dispatcher
Flux has a quite interesting bit of history. It originated from a Facebook bug that showed different components that share the same resources as having different states. It was Facebook’s solution to manage resources so that when a state changes, it propagates through all the nodes that share that resource. The solution, from what I understand, is a centralized collection of callbacks to be called when a update action is initiated that is aptly named the “Dispatcher”. In addition, an important feature of Flux is that the pattern requires a single-direction data flow. Each stage can take command only from its assigned previous stage. That way, it ensures, that no one state change would be “heard” by some props but not the others.
0 notes
Text
Forms React + Rails
Today is the first day we’re integrating frontend and backend apps. We built the backend with Rails and then used React to handle the frontend renderng. One of the main departures from Rails is that a #new action to render a form is forever gone; it’s done with React instead. That also means forms now need to make an .ajax request to a new api route setup in the controller. Now that’s my first api setup.
0 notes
Text
widgets
After a short lecture today, we went on to build some simple widgets. The weather clock looked easy at first, but it turned out to be the one that took most of our time. We stucked on how to use get the current location through navigator without setting it first in getInitialState() in react. The problem is with the asynchronous nature of Javascript. While getInitialState() requires a return statement which executes immediately, it doesn’t require an immediately correct value. We set the location state to be a dummy {} at first since geolocation takes a few seconds to load its currentLocation for us, The componentDidMount() turns out to be the best place to start loading data like location or any other HTTP requests that may take longer. We also made a mistake in making location to be a state of the component, but we didn’t really display the location anywhere on our widget. A piece of information should be a state of a component only if it could change and its change directly changes the rendered DOM. We spent a lot of time on this, but it’s well worth it!
0 notes
Text
The power of JQuery’s .ajax() and DOM manipulation
Web development doesn’t emphasize only simply-written, readable, maintainable codes, it also needs optimized code. It’s after Jeff’s lecture on Friday that I truly appreciate JQuery’s power. Jeff started with as slow html page with lovely corgi photos and user comments. The page took more than 5 seconds to load, and each time a new comment is added, the page has to reload again because Rails controllers will redirect to the new page after each update before it new content can be displayed. No more with JQuery’s .ajax() method for handling HTTP request and response without reloading. A new request and response cycle will only pertain to one or more specific DOM elements and the new view is rendered through JQuery’s DOM manipulation capabilities, without reloading a page. The improvement is impressive. The added comments only took < 3 seconds to load.
Jeff’s analogy to two players playing chess over a long distance is particularly illuminating: the Rails way of handling updates is like sending chessboards after each move from a player to another player, and the JQuery way is like two players calling each other to update a move by a specific piece and the other player could then handle the update.
0 notes
Text
JQuery Lite
We’ve built Rails Lite and Active Record Lite. Those are replica attempts with the goal to understand what Rails and Active Records do to automate things. JQuery Lite is not very much so. I must say that considering Javascript DOM elements already have a lot of built-in methods available to them, JQuery is not very impressive. Still, it’s nice to know how it works through replica projects.
0 notes
Text
Wacky painter
Today Max live demoed the building of a wacky painter app. At the end, we’re all impressed by his adroitness in using JQuery to retrieve and build DOM elements, setting up event listeners, writing callback methods to dynamically change the html page, all while clearing explaining the steps along the way. Kudos to Max!
0 notes
Text
CSS
We’re learning CSS today. There’s really not that much to CSS, except identifiers, positioning. Brooke did the right thing in making the lecture short and left more time for our experimentation. The rest of the day is just a lot of Google look up and learning some fancy attributes of CSS as well as getting the positioning right for each element on the page. After some manipulation, we got about half of the fancy cat page done.
0 notes
Text
Javascript, day 3
After a weekend of Javascript studying and practice, it has become easier to understand. Right now I see callback functions a lot more like Ruby’s blocks. I also learned a trick from my coding partner today that when two or more functions need to be called in a callback, but only one callback is accepted in an asynchronous function, such as the setTimeout() function, we can package them together.in a single callback function. In another exercise, we returned the function(without any argument) and it will later on pick up several other arguments in its calling. I’ve come to appreciate the flexibility of functions in Javascript
0 notes
Text
Javascript, day 2
I have accustomed to Ruby’s elegantly expressive syntax, Javascript has not been easy to pick up. The ideas of closures, callback functions, and asynchronicity of function execution seem to be quite strange. I’ve come to understand that not everything is going to be fun or easy at a/A. Dealing with the frustration of struggling attempts to learn materials quickly is part of the training here. I’m thankful for the supportive TAs who have been quite patient with my elementary and sometimes repeated questions Javascript and even offered consolation from “the other side” of the learning curve. Thumbs up to you!
0 notes