ajourneytocode

[ajourneytocode]

W9D4

I worked on profile page, picture and general styling

[ajourneytocode]

W9D3

Vote is complete.

[ajourneytocode]

W9D2 - Capstone

Today I ve worked on my voting system, using acts as votable gem. It s a pretty neat gem as it gives you a polymorphic association. You can decide which model can be voted and and which can vote. It results in a bunch of interesting methods like the list of people who voted for a certain product. I am also trying to reuse different components like the voting button and the product list in various places (index page, profile page).

[ajourneytocode]

W9D1 - capstone

Today I started the votes feature. I used acts as votable ruby gem that comes with pretty neat methods. It work on the front, now I need to connect the actions to the database.

[ajourneytocode]

W8D5 - Capstone Day 4

Today was mostly a day of debugging and improving existing stuff. I still don’t get the router to do what I want but CodeHunt is making progresses.

The more I work through the full stack of the app the more I get it and get how things are supposed to work together and be implemented.

I’m in that exact phase where my current and numerous struggling moments strengthens my foundations of building an app from scratch, from database to the front and everything in the middle.

Can’t wait to raise the speed and get into the voting logic.

[ajourneytocode]

W8d4 - Capstone Day 3

Focus on product page comments and fixing the router that is not officially fixed yet.

[ajourneytocode]

W8D3 - Capstone Day 2

I’ve worked today on my router, my product index, product form and start building the product page. I’ve also done some styling. It’s pretty simple but very efficient.

[ajourneytocode]

W8D2 - Capstone Day 1

Today was the first official day working on capstone. I did not do all the things I wanted to do. I waste some time trying to make the login with react, and at noon, I decided to go back to the old erb style.

I’m happy with the landing page I have. Lucky I’ve been working on my flux loop on monday, this will save me a some time and hopefully let me catch up!

Doing its own project is really interesting and quite fun. I know I like to spend some time on small details, so I need to keep the plan and schedule in mind.

So far so good.

[ajourneytocode]

W8D1 - BenchBnB & Final project

Today, we’ve continued to work on BenchBnb (the airbnb for benches). To be honest, once I had my map working properly, I couldn’t help but continuing to work on Code Hunt. I spent most of my time refining my plan on how to tackle it. I mainly refactored it to have each step corresponding to a specific feature (from back to end user): authentication, products/search, vote up/ranking, profile, comments with a promising bonus if I get there: tags, follow and collections. I spent a lot of time thinking about the authentication. Indeed I’d like people to be able to land on the product list (index) without being logged in. For each action they try to take, a signin/signup popup appears to let them continue their action. I’m not sure how in what order to implement this.

I’m also thinking about writing all the files and all the flux boilerplate for the full mvp I want to build to be able to just add code to existing skeleton. Then I’ll add the detail and the logic on each feature step by step. I tend to think that having the whole basic code structure might help keeping the big picture and remaining organized among complexity. I must admit that’s one my biggest apprehensions.

Anyway, tomorrow is the first official day working on our project, I really hope I’ll get that index page with authentication modal working.

[ajourneytocode]

W7D5 - The Loop is Looped

First day where I actually make a flux loop looping and on which we can build new features. We also had a first coding experience working with a public API. We’ve already worked with APIs before, but mostly APIs that do things under the hood. Playing with an API from a product I use almost everyday (google map) was cool.

We’ve also talked about jbuilder. We could define jbuilder files as views that collect, curate and transmit json data to the framework we cherish and love. React (SEO).

Week end spent at: 75% crafting the capstone project proposal and 25% chilling max. The project will eventually be a Product Hunt clone. I aim for a mirror clone at first, I let the doors open for customization along the way.

I had another idea that I’ll keep for after the program. It’s a screencast platform for building clones of famous webproducts.

In the meantime, huge focus on my PH clone: CodeHunt.

[ajourneytocode]

W7D4 - React router

Today we’ve learned about the react router which is pretty amazing. First, I’m glad that now I get the flux architecture. My partner and I were able to build the full cycle by ourselves!

The react router basically gives us the ability to architect our various components on the page by creating nested routes. The cool thing is that we have a real control over the URLs, and it does not affect any of the rails routes we have on the backend side. This means we can design a very nice and coherent architecture on the front side.

We applied these principles through the making of a Pokedex, a word that I haven’t heard since the 90′s. That was a pretty cool last pairing day.

Now I need to practice more with react architecture and router to get very comfortable at it and always keep the big picture in mind.

[ajourneytocode]

W7D3 - React/flux

Today was flux day. Creating a React components are just a step in the full flux design process.

Flux is a software pattern that is used with react to architect data flow in an app. It has its very own rules that you want to follow if you want your code to be efficient and your result appealing.

We put that in practice by building a virtual Organ with webaudio and react. WebAudio code was given, but it was very interesting to understand how sound can be generated through the browser. For example, to instantiate a Note, you need to provide its frequency.

We used react and flux to create the UI interactions: pressing keys to get sounds. Getting all the piece and handle them is still requires a lot of effort, but it seems that practice makes you get used to it.

It was nice to have another full stack webapp, this time with the real frontend architecture. Until we meet the react router tomorrow I guess.

[ajourneytocode]

W7D2 - More React...

Today we had the chance to build something close to a fullstack webapp: an interactive Todo List.

We made a simple backend (model, controller) in rails, then built the view with react. In between, we had to create a ‘store’ that would be the link between the view and the backend.

It was pretty nice to build a real API (the store) that our view could consume when needed. I took the time to continue the project after class to have a fully featured to do list.

Props and state start to make more sense to me. I’ve been confused by the fact that props are not really ‘stored’ in the component as they would be in a traditional javascript object, but either come from the outside, or are received by your parent states.

While building our API, we’ve also had a nice nested route to create with the api namespace.

Tomorrow’s flux.

[ajourneytocode]

W7D1 - Enter React.js

Today we had our first react day. I studied during the week end to get to know the fundamentals of react, what it does, its tools (jsx) and how to basically build components.

React handles one thing (to me now): the view. It offers a great way to render UI interactions to the view. Its trick is to create a virtual representation of the DOM made of js objects. Each change due to user interaction will be updated to the virtual DOM. In general, one user interaction means many small changes on the interface, from the parent element up to some of its children. By having the copy of the DOM and being able to keep track of all the changes that have been made, react ‘reconciliates’ the virtual DOM and the actual DOM by rendering the view of all the updated elements, or more accurately, components.

Components are the heart of react. They describe in a pretty intuitive manner a specific tree of nodes. We worked today for example on a nice name search widget. The widget needed to display in realtime the accurate names while we were typing letters. The search bar was a component and a change of its state (letter typed in) would modify another component, namely the names list.

Using react consists - among many other things - in smartly connecting all the parts of a view through descendance, state and props transmission.

[ajourneytocode]

W6D5 - AJAX

Today we learned about AJAX calls. In a few word, AJAX lets you send http requests to the server and render them without refreshing the whole page and re-rendering all the elements. Everything is done in background. It’s pretty cool. After starting to learn about react this week end, I’m curious about how that lib manipulates ajax calls.

[ajourneytocode]

W6D4 - Making jQuery Lite

Today was about rebuilding a small part of jQuery - basically several of its most used methods.

That was really nice to understand what exactly jQuery does under the hood and how it manipulate javascript methods.

That article was just a break in the middle of assessment practice. Break’s over.

[ajourneytocode]

W6D3 - jQuery

Today we’ve learned about jQuery, a javascript librairy originally designed to help developers manipulate the dom using the same methods for all browsers.

jQuery’s cool in the sens that we can make our site interactive without calling the database, just by reaching and manipulating the DOM. Let’s try an analogy.

The DOM is like a front-end database. We’ll look for nodes (get) or create new ones (post), we’ll modify them (update) or remove them (delete). We’re able to search nodes according to attributes (queries), based on CSS selectors.

I’ll stop the comparison here.

On top of that, we have javascript async power to let things happen only in response to some events (clicks, hover...). Could we say that async work js does to the dom is similar to the work rails controllers do to the model ? I know ruby is a sync language, but still...

Anyway, let’s get back to assessment prep.