Day 34: Angular.js

Not too much to add today. All I did today iterate more on Angular making sure that I understand the concepts. The way that I'm making these single-page apps is just simply amazing. It's just so easy with this framework to make something that loads so fast and quick.

Here's a quick example of what my code is now looking like.

You can see that I'm using things called "directives" that start with the ng-. Each of them have special functionality that accomplish a lot with less code.

Really not much to show today. Project week starts next week and I'll be sure to have something hosted up for everyone to check out.

Day 33: More Mongoose and Intro to Angular.js

Today I simply worked on more mongoose. I still don't feel like I have a solid understanding of mongoDB and mongoose but I'm sure it'll come with time and repetition as with everything else we learned in class.  After about halfway through the day I finally finished my assignment. I got all the proper data into database, queried the database, and properly displayed all the information on the browser. Essentially covering all the CRUD operations.

After that was all done, I started learning Angular.js, a front-end framework that helps you build Single-Page-Applications. It's just a cleaner, more organized way coding instead of doing tons of Ajax calls with callbacks in callbacks.

Below you'll see a list of users that I manually inputed. The search functions allows me to filter and only display the users that fit the criteria in the search box. As you can see only names that show up starting "jo" are displayed. This is the type of technology that is used on searches like on Facebook and other searches where results are dynamically changed based on the data in the search box.

Below is just an example of what Angular code looks like. It's nice because there's functions that really help you accomplish with less code (e.g. for loops replaced with ng-repeat).

Once again another new technology. My brain is getting pretty tired. After a little more of this, we'll have our project week where I'll be working on a personal project I was thinking of. Stay tuned!

Day 32: Mongoose

Today I started learning about MongoDB and Mongoose. MongoDB is simply a datastructure that is more flexible than SQL databases. However because it can become too flexible, it's easy to lose structure and organization for your databases. Mongoose is a helper for MongoDB (kind of like DataMapper) that provides structure in the form on schemas.

This morning we had a lecture on how to use MongoDB and Mongoose. It kind of sucks that MongoDB doesn't have a nice User Interface that MySQL has but it does "build character" when using the Terminal. It does make you feel more like a developer rather than a designer.

And then off to a familiar assignment except with totally new tools. We have now incorporated the "M" in "MEAN stack". All I have left in the future is to learn Angular which I will start tomorrow.

I feel like I'm learning this stack at a much slower pace than the MAMP (mac, apache, mysql, php) stack. It's kind of discouraging but I keep reminding myself that the desire to keep going on through the difficulties is what makes you into a great developer!

Day 31: More express.io

Last weekend I tried to force myself not too look at too much code so I won't get burned out this week and... I failed. I ended up working on some personal ideas but I made sure not to dive back into express.io until Monday(today).

Above is an example of users each an individual box where they can type in a message in the box and the text will be transmitted to all users. (Each browser acts as a new user, notice one is Safari and the other is Chrome). This allows for real-type typing as all users on the server can see the typing real time.

The next assignment is a pretty similar one in which there is a conversation board that users can log into. For each new session, the browser will only ask for your name once. If you visit the site again, you don't need to retype in your name as the server remembers your sessionID. Furthermore, the previous information is saved in the server and can be loaded up for all new users to see after logging in.

I've pretty much learned a significant amount of functionality with express.io. The only thing that I don't know yet is how to implement a database to this. Whenever the server is restarted, all the previous information is gone so it's important for me to learn how to keep the data persistent.

Tomorrow I'll be learning MongoDB, a no SQL database, so that I can connect information to these programs.

Day 30: Express + Socket.io

Halfway through the program! It's been quite a journey so far and I'm sure getting kind of burnt out. A lot of my fellow classmates are feeling the same. It's been intense. Really intense. Definitely going to take a break from coding this weekend so I can rest my brain.

Although I've been pretty tired I gotta say the stuff we're learning is quite cutting-edge stuff. Node with express as a framework really changes the way things are going to be done in the future.

The pictures above show how I'm making a persistent connection with my server using express.io. Rather than having the server or client make request back and forth, there is a persistent connection that listens for events that are happening.

Next week on Monday I'll be working on a chat room in which multiple users can log on. Using jQuery on top of that allows me to display on the HTML the content that gets passed back and forth between the client and server. Pretty neat stuff. This is the type of application that node shines in.

Alrighty time to wrap up this blog post short and enjoy my weekend!

Day 29: Node and intro to express

This morning kicked off with a lecture about node.js. They broke down how it's different than other types of servers. Servers like Apache are multi-threaded and eat thread takes care of one client request. Node on the other hand is single-threaded but it's asynchronous.

A good (high-level) analogy is:
Node is a restaurant where there is only one waiter. That waiter takes your order and gives it to the kitchen and proceeds to take the next tables order and whenever the food is ready he will give it to you.

Other servers that are not asynchronous are restaurants where a server takes your order and gives it to the kitchen and waits in the kitchen until the food is ready and get it to you. Each waiter can only serve one table at a time, therefore they have multiple waiters (hence multi-threaded).

Once again node is something that seems so abstract but once you boil it down and it's explained to you, it becomes much easier to understand.


This week we've been doing something pretty cool: Student-led talks. A lot of my classmates are from diverse backgrounds. Yesterday we had a mini presentation on freelance work, where we ran through how to establish your credibility in the freelance realm and how you should be doing business with clients.

Today we had a presentation from a classmate with a Computer Science background. He gave a slide show on assembly/machine language and how computers work on an extremely low-level.

If you can zoom in a little, you can see code that most people have never seen in their life. It's the code that speaks to the CPU telling it how it should store information in the RAM. I became extremely thankful for the advancement in computer technology so that I don't have to write low-level languages.


After working on learning node for about 5 hours, I needed to take a break but I still wanted to do some sort of coding so I decided to fork one my classmates project and add some tweaks to it.

He already had the basic functionality down but the layout looked like it needed some work. So I centered the program in the window and made the layout more appealing. I have a feeling this will be an ongoing project that we'll be working on when we're bored throughout our time at the Dojo and even beyond. haha.

You can find the current version of the www.comfroels.com.


After messing around with this it was time to get back on track. Up next was the Express framework, which is simply a framework that makes it easier to use node on a more structured level. It's not an MVC framework but we'll get to it once we integrate the other two components of the MEAN stack. Another 12 hours logged in today!

Day 28: Javascript libraries and intro to node.js

After tackling a bunch of javascript challenges and learning a bunch of cool ways javascript can do animations and illustrations of data, I decided it was time to move on to the back-end.

I really needed to hit the brakes and take my time when learning node.js. It's the first time we actually learn a server languages. Previously when we were learning PHP, we were simply using Apache as a server in the MAMP stack (mac, apache, mysql, php). But this time we actually begin configuring what the server will do when a user makes an http request.

Node.js is the most effective in situations when a two-way (or more) connection has to be persistent. Because of the nature of Javascript and how it's event-based, it runs continuously rather than other languages that stop running once the code is finished. Javascript and node continuously are listening for event that will trigger other events.

Here I have my node server listening for events on port 7077. Whenever a user makes a request to localhost:7077, the server acts accordingly.

And here is my server-side code, telling the program what to render depending on what the request url is.

Once again, nothing flashy here because we're dealing with server-side but node.js has seriously optimized the speed at which content can be delivered. Really excited to be diving deeper in this topic.

Day 27: More advanced Javascript

This morning started off with a really short lecture by one of the TAs. He just went over SVG and Canvas elements that allow developers to draw shapes on the browser.

When I went back to my computer, I was pleasantly surprised with an email from one of the remote TAs. She went over my code that I submitted yesterday!

It's just a brief 2 minute video, but it was awesome that she pointed out certain things about my code so that I maintain clean code.

We are really diving into what javascript can do in the browser, especially when it comes to shapes and games.

Here is a rendered view of my code in which I have generated 500 circles of random size and colors.

Pretty neat stuff especially since I can animate them and detect when they collide.

Above is a snapshot of my code that generated these circles.

I have gone through about 90% of the Javascript fundamentals all that remains are the optional work where I can do more advanced algorithms. Once I finish those up, I'll be starting Node.js, the hottest topic in development right now.

Day 26: Start of Javascript track

I took the weekend to spend some time with my family and take a step back from all the coding madness. All I did were some exercises to get my brain primed for Javascript.

First thing I want to show everyone is that I passed my PHP MVC exam. I elected to take the Red Belt exam which bypasses the green belt.

I'm able to get my black belt in as soon as 3 weeks after I master Javascript and all that it entails.

If you didn't know already, Coding Dojo teaches fast. I mean really really fast. Here we are on our first day of javascript and we're already talking about Callbacks. Which are essentially a function being passed as a parameter to a function. It's not easy to visualize functions as a variable you pass especially as a beginner. It doesn't initially make sense as a beginner.

But luckily for me with Javascript practically being my first language, I had a lot of exposure to this topic.

Above is just some lines of code that is for a little Ninja game that was part of our assignment.

We have my little ninja character moving around the screen controlled by the arrow keys on my computer. This reminded me a lot of pokemon haha. Now I understand how they got Ash to move around. Alrighty that's about it for today, tomorrow I'll be diving into more complex topics of Javascript before I start learning Javascript on the server side.

Day 25: APIs and Red Belt Exam

I write to you with my brain hardly functioning right now. After 4 hours of examination with my brain firing on all cylinders, I completed my Red Belt Exam. Something that I totally underestimated. It was to create a basic application where users can register, login, and link with each other to become friends. I'd say 95% of the application wasn't anything we haven't seen before but the other 5% literally took me 2 hours and I still didn't get it right. There were two complex SQL queries that I couldn't figure out just right which caused me to not do it 100%. I still think I'll pass the exam because you need at least 8/10, but kinda bummed that I won't be getting all 10. Guess we'll all find out on Monday!

But in the morning I was expanding my knowledge by learning about APIs.

If you're familiar with Ajax, APIs are simply the same thing except that you're calling an external site rather than an internal link.

Here I'm using the Google Directions API. I just send it two parameters (the start and end location) and it returns me JSON data that I can parse and display.

That exam wiped me out, no more coding for me until tomorrow.

Day 24: More Ajax

Today was more Ajax in a lot more complicated situations.

I honestly thought I wasn't going to have much trouble but I had a lot of difficulty applying concepts in different contexts.

The first challenge I experienced today was getting functions to work on dynamically added content. After working for 2 hours and with a help of a classmates, I realized I needed to have my jQuery listeners constantly on rather than just having them on the DOM load. It's so funny how I thought this was solidified on my head about 2 months ago. But I guess it wasn't solid enough. I hope it is now!

 Below is just a quick snapshot of my Ajax call displaying a "ghetto" loading message while my server is retrieving the necessary information from the database.

Today was another stressful day trying to get a wealth of knowledge shoved into my brain. But there really isn't a bigger high of figure it out when you're all done.

Tomorrow I'll be learning APIs and also be taking the Red Belt exam which will test my skills in PHP and Codeigniter MVC. The test is building a 3-4 page web application with login/registration as well as numerous other features. After seeing MVC for so long now, I don't feel too worried about it. I'm very excited for next week where we'll be learning Javascript and the hottest topic on the market, NODE!

Day 23: Ajax

Today was probably the roughest day when it came to learning a new technology. If you don't know Ajax is how a web application can retrieve data from the database and change the content without having to reload a page.

It literally took me 5 hours to get the first assignment done. I didn't ask for much help because I wanted to figure it out for myself but eventually I caved in and got more help than I hoped to need. It was a very humbling experience. Over the course of Coding Dojo, concepts never were challenging to the point where it took me 5 hours. But now that I figured out how it all works... it's so f-ing simple. Seriously... so simple. Which made me kick myself even more.

Above is a snippet of my Ajax call. The problem is that the code is so nit picky that you have to be extremely careful else it won't run at all. The whole class actually had a lot of difficulty understanding the Ajax so what the instructor and TAs did was a special demo session where they built an ajax form all from scratch.

Seriously though... now that I know it's so simple. Tomorrow I'll be doing more assignments in increasing difficulty to solidify my understanding of Ajax and do them in different contexts.

Day 22: Finishing up CodeIgniter and DataMapper and Intro to Ajax

Alright so I finally finished up that long assignment. I can't believe how long it took me. Assignments never take more than a day to finish but boy was this one a challenge. It was mostly difficult because of the way DataMapper is set up. Because the nature of ORMs are to simplify things according to standard, it leaves little room for flexibility. I was attempting to retrieve user information, connected it with the messages that are posted on that user's wall, and connect it with the user that posted it. Because I was referencing the user's table twice it was super difficult. After 4 hours of trying to solve this issue and with the help of Michael Choi I finally got it to work.

Coding can be downright difficult but I never felt a greater "high" after finishing this project.

After doing Codeigniter MVC all week, I decided it was time to move on to the next topic even though there was still one more optional assignment in that section.

Up next is Ajax! The technology behind Google giving you suggestions on what to search. The ability to see your new posted comment on Facebook without having to reload. Ajax is the whole reason why we have Web 2.0, the new way to make web applications.

Day 21: More CodeIgniter MVC and DataMapper ORM

Repetition. Repetition. Repetition.

Today I began tackling an assignment that took much longer than I expected. We were to create an entire functioning Facebook-like application with login/registration, dashboard, administrative privileges, ability to edit your profile, personal walls where users can post message and leave comments.

The amount of features that it has really became overwhelming and exhausting. Not to mention my messed-up sleep schedule due to the hackathon. I even ended up taking a one-hour nap to recharge my brain.

Here is the giant wireframe that encompassed the entire assignment.

One of the mottos of Coding Dojo is "strength through struggle". That didn't resonate more true than today. It wasn't necessarily the individual features that were tedious but the sheer number of them and making sure that they all work without breaking each other was the challenge. But the days I struggle the most are the days when I learn the most. Rock on!

Week 4 weekend (continued): Raspberry Pi Hackathon

Wow today a few classmates and I got together and decided to make a product that we can use on the Raspberry Pi. If you don't know a Raspberry Pi is a computer that can work as a standalone computer. It has two USB ports, video output, HDMI port, SD card reader and additional ports where you can plug in sensors.

Here a pic of one of my classmates (a Linux master) setting up the Raspberry Pi, you'll notice that it boots up a desktop. The Operating System it runs is a light-weight version of Linux Debian, called Raspbian.

Before the hacking started, we first had to decide on what we wanted to do. One of the classmates is very experience in Agile development and was leading us through the steps. Below is a list of features that we'd want as a user.

We decided on building a rear view camera that will have a realtime stream that will be viewable directly onto the browser or a native app.

This posed a series of tasks that we needed to accomplish.

1. How do we get video from a camera attachment to the Raspberry Pi.

2. How do we get the Raspberry Pi to emit information via Wifi?

3. How do we get the video trasmitted over Wifi?

4. How do we render the video onto the browser/Native App?


Over the course of 13 hours we were able to answer 3 out of the 4 questions before we burned out and decided to tackle this another day.

Doing this type of project required knowledge of node.js as it is the best solution for a Real-time stream. However since I lack a lot of knowledge of that I focused my contributions mostly on developing a landing page where prospective users can get information about the product.

My Twitter Bootstrap skills are become more and more refined. We plan on putting this website live within a week. The website is a one-page site that has many parallax scrolling features and animated page moment that make it a fun user experience. Furthermore prospective users can fill out a form to be part of the Beta and the form is sent via Ajax. I'll definitely be posting a link to the webpage once it goes live.

All-in-all, today fueled my entrepreneurial spirit and I definitely hope to participate in a Startup Weekend or a similar hackathon once this is all done. I did feel like I didn't contribute as much as the others due to my lack of experience with node and real-time server but I focused on my strengths and contributed heavily on the front-end.


In summary this is one of the great parts about Coding Dojo. I'm not only learning from Michael Choi and the school staff but I'm also learning from my fellow students. I have a lot of respect for the knowledge that they have and what they bring to the table. There is no replacement for the community that the Dojo provides. I am extremely ecstatic about what my future holds with the skills I'm learning.

Week 4 weekend: More MVC and ORM

So basically I can't get enough of coding. I've spent about 70 hours this week at the Dojo and what do I want to do on a Sunny Saturday afternoon? Code.

Today I parked myself at a cafe and worked on some more assignments. But instead of running full-octane like I usually do at the Dojo, I took a more relaxed approach. As much as coding can be stressful, it can also be extremely therapeutic if you have the right mindset.

All day I was just taking my time and working through another MVC/ORM assignment. I'm loving the repetition. With each subsequent assignment I understand the concepts more and more. I'll definitely be ready for the Red Belt assignment when it happens next Friday if I keep building more and more apps with MVC.

As I'm going through these assignments, I actually became quite impressed at how quickly I'm able to build the HTML and CSS. Doing front-end development constantly for every assignment for 4 weeks straight really make you fast and accurate at making the code look exactly like how you want it to look. Now most of my time is figuring out how the models, views, and controllers all talk to each other and how to use ORM to talk to the database.

Here's a little example of the assignment I worked on today. We have to build this application based on the wireframe and add all necessary features.

Now I'm off to meet up with some classmates. We're doing a mini hackathon amongst ourselves to build an application for the Raspberry Pi. One of the guys has experience with Agile Project Management so he's gonna be the main organizer. I have no idea how these things work but it's time to learn! I do hope to participate in events like Startup Weekend so I better get my feet wet!

Day 20: DataMapper ORM

Wow so that wraps up 1/3 of the entirety of the bootcamp.

This morning's lecture consisted of a couple algorithms and discussions on how to solve them. They were typical technical interview questions like: Write an algorithm that will tell you whether one word is a permutation of another, how can you tell if a word has all unique characters? Then do one without using a temporary array. We'll be doing these on a more regular basis throughout the bootcamp.


Up next on the morning lecture we learned about REST architecture and how we should structure our application according to the REST principles.

There should only really be 7 methods for each controller because a user would only need these 7 functions: create, show, update, delete, new form, edit form, and show all(index).

Then once again back to the assignments. We to recreate some applications that we've done before however we were to speak to the database using Object-Relational Mapping. That's just a fancy way to say a more object-oriented and elegant way of making queries to the database. Some popular frameworks like Rails do not even use regular SQL queries and only use ORM for database connections. It's super interesting because I know there's a lot of people that are learning rails and ORM but they actually have no idea what is going on behind the scenes. I'm just glad I'm not going to one of those Hacker schools that don't teach you what's actually going on behind the scenes.

I must say for the first 4 weeks, I've been cruising along. Sure I've had some difficulty, but it was nothing I couldn't do. However today, I hit my first real wall. The syntax and structure of ORM was quite difficult to grasp. I know one day it'll be beneficial for me to be using ORM but the learning curve was much steeper than I expected. I'm definitely going to be working this weekend so I can solidify my understanding of it.

Here's a quick screen shot of ORM. Notice it's a different than normal SQL queries.

Rather than speaking directly to the database, ORM allows us to treat each SQL table as if it's an object and gather properties of that object from that point.

That's about it for the day, I'm very glad that it's Friday and I get to relax for a little bit. This week has been pretty tough for me as well as the rest of my classmates. We are all pretty tired from data overload, but we are always here to cheer each other up and give encouragement. Before I go I just wanted to show everyone a glimpse of my workstation. There's a lot of monitors available at the Dojo and recently I felt the need to use 3 monitors: one for my code, one for my output, and one to see the assignment requirements.

Day 19: Linked LIsts, more Codeigniter and intro to Object-Relational Mapping

This morning we revisited the concept of linked lists and did some challenges on that topic. Although we rarely use linked lists in actual web development, learning these things are pretty important for technical interviews. Those interviewers often ask these types of conceptual questions because they want to see if you think like an engineer. Sure they might be used in lower-level machine languages. But for the purpose of what we're doing, they really have to practical value except for getting a job through technical interviews.


Switching gears back to the learning platform I am continuing to learn CodeIgniter. Yesterday was pretty much dedicated to understanding the whole concept of how that MVC works. Today is dedicated to actually making complex applications to solidify my learning.

At first the whole separation of views, controllers, and models seemed so tedious. Just a lot of extra work. I understand the whole concept of why you'd want to do it especially in applications with ten-thousands of lines of code, but it was just relatively difficult to absorb.

Here's a screenshot of my controller that allocates to the proper places depending on what the input is.

Below is a screenshot of my model. The model is what communicates with the database. At first I didn't really understand what that meant, but now I realize that all it's doing is making queries to the database (inserting data that the application wanted it to insert and retrieving data that the application requested).

And below is just a quick glimpse of the HTML output of my database queries and the form used to put data into the database.

In actuality we are just doing assignments that are similar to the ones we've done before except now we are doing them in an MVC framework. There really is a lot of beauty in how an MVC framework is structured, it makes everything look so clean and accessible. I'm definitely going to try to get this to be second nature.

In order to prep me for higher-level frameworks like Rails, I'm learning something called DataMapper which uses Object-Relational Mapping. Not really sure what that's all about but I'll know for sure by tomorrow!

I believe that you can get anything good at anything if you just put in the time. That's the kind of mentality I have right now and it's been working pretty well so far. Just gotta keep trucking along!

Day 18: Codeigniter

No morning lecture today but nothing to worry for we had plenty of things to learn on the learning platform. Just wanted to give people as example of what other things go on in the Dojo besides coding. In the mornings, all the early birds pull money together to buy breakfast food. We always eat pretty healthy stuff. It's a hassle to prep breakfast and eat at home before arriving. Instead, while we eat we have discussions about the assignments, future jobs, or jump straight into coding.

The community truly is the reason why anyone should do this. It's incredible what happens when 10 people come together and spend over 70 hours a week together. As I'm typing this, we still have over half of our cohort trying to fully understand linked lists to make sure they're prepped for technical interviews. It's quite magical.

Today I spent the whole day learning Codeigniter, the popular MVC framework for the PHP language. I'm starting to understand why Coding Dojo has us learn an MVC framework at this point and not earlier. Learning an MVC framework is already difficult, however trying to learn MVC without having a solid foundation is even more difficult.

Whenever we learn new concepts we always have a very basic assignment like making a application that shows what the current time is.

I haven't spent so much time in one day on learning one thing before jumping into the assignments. The way that the Models, Views, and Controllers speak to each other is significantly different than how it is done when the code is procedural.

To be honest, I am getting a little frustrated because concepts aren't coming as easily as they usually do. But I just gotta keep ramming into the wall and it'll eventually break down.

One other really cool thing I want to point out is the video code reviews that the TAs do for us. Here is just a snapshot of a TA going through my code pointing out what I did well and what I didn't do so well on. They really do give great feedback that I use in all future projects. There's a lot of nasty code out there and I don't want to be contributing to it!

Day 17: More OOP, Node and Tree algorithms and intro to MVC framework, Codeigniter

Another jam packed day is in the books with the morning kicking off with an introduction to Object-Oriented Programming. I already had a pretty solid foundation on this concept due to some programming classes at the University of Washington. But I do gotta comment on how well Michael Choi explained everything in class. The analogy he used was from "Age of Empires" and how if you want to upgrade your buildings or soldiers, you can simply inherit from the superclass. It's funny how I have yet to see anyone else use this analogy when so many aspiring developers play video games like this, not to mention it's super engaging. I personally played "Starcraft" but I kind of understood the terminology.

The lecture was followed up by a quick group exercise in which we took the last major assignment, the wall, and figure out a "plan-of-attack" if we were to do it again. Here is my group's plan:

There were some students in the class that were having trouble understanding queries to the database and figuring out how to render everything properly on the browser. To assist those students, there was a special session that went over step-by-step on how to tackle the assignment. This right here is one of my favorite things about Coding Dojo. I know that in other bootcamps, if you simply can't keep up with their curriculum, you're booted out of the program. I can't help but think that's what they have to do in order to "pad their stats".

Alright so after the morning activity we were sent back to continue our assignments. I finished all the sections on Object-Oriented Programming so now I was off to working on some tough optional assignments.

This first assignment was about linked lists. I remember doing this back in college but boy was my memory failing me. Long story short it's just a list that have associations in which you can access the data through traversal. It's very common for interviewers to have technical interviews on this concept.

And of course all programmers know after learning about linked lists, you learned about binary trees. Above is just me trying to figure out how I was going to do a sorting algorithm using trees. Trees are just a special kind of linked list in which you have two children and a parent and it makes it quick and easy to sort or organize data.

After I finished those the optional assignments (which took about 9 hours of my day), I proceeded onto the next chapter, the MVC framework called Codeigniter. In the picture above is just the file structure. Tomorrow I'll be diving into it completely! I've had experience with MVC because of Rails but I wonder what it's going to be like without all the behind the scenes magic!