Day 50.5

Recap of Winter Break

Winter break is almost over and I have finished over the time:

• Relearned and added some features to Secret Santa Project
• Still requires the random generator.
• Did not do anything for the MEAN project.
• Read through and did the first chapter of the iOS stack.

All in all, I should have done more but with so much of my break planned and the school not being open, it was hard to get a lot of good work done. Fortunately (for me), my MEAN group also had a lot of holiday plans so we didn't make a lot of headway there implementing the project but I think everyone has an idea of how they want to get their piece of the project done. We'll reconvene after the iOS to finish up everything.

Day 45 to Day 50

Winter Break + Plans

When I first signed up for classes at the Dojo, I was pretty confused why my second stack would only have 3 weeks but I realized the 4th week of every stack is reserved as a project week. Our Python stack got a bit behind so instead of a full week for group or individual project, we only had a one day hackathon. For the MEAN project, we were to work solo or with others over the course of Winter Break. I joined a group with Colin, Maric, Sarah and Raul. Our project is known as a MEAN Screen where we users can register and login to, essentially, an online theatre with group chat abilities. My part of the project is figuring out how the web server is going to broadcast a real time video.

Unfortunately, through my research, it seems this time of feature is precisely what HTTP is not really supported for. But an alternate method of this I found, is to have a user broadcast a stream. Now this is different in a couple of ways because it doesn't require the video to be put on the web server. Instead, the source of audio and video are on the users' side and the only thing to do is make a link that has the broadcast embedded. Anyways, that is going to be my contribution to the project. Although a lot of the members, including myself have Christmas plans so I don't know how far this project is going to get off the ground.

Also, my last stack is going to be iOS. From hearing the instructors, iOS is the hardest stack so I'll probably plan on getting a jump start on the learning platform sometime during the break. I intend to relearn a bit of Python and the Django framework so I can finish my Secret Santa project to post on GitHub. Hope all the readers have a good holiday break!

Day 44

Deployment and MEAN Black Belt

This morning I learned how to deploy via AWS (Amazon Web Services). I think usually, students deploy via Heroku (although there are a bunch of options to deploy). Heroku is very simple, you create a deployment server and git push your project unto that server where it will automatically run. Once you write 'heroku open', it will open up on your browser your project and if everything ran right, the project will load with its own database. AWS deployment is similar, but a lot more work as you have to go on the AWS site to launch a new instance of your project. Then you go onto your ubuntu server, type in that specific instance IP which will send you to a cloud server. The instruction had us go into a specific directory where we have to install node.js and changing to another directory to git clone our project from GitHub and finally linking our project into another directory and finally starting the server that way. Oh, and there is another public IP that your AWS instance gives you, which is what you use to share it publicly. And that is how AWS deployment works..don't know if I'm going to deploy on AWS that often.

Now onto the black belt. I was pretty nervous for the exam since I thought it would be a lot harder than the red belt and I was not very confident in my MEAN skills besides finishing up the Discussion Board assignment yesterday. Upon unlocking the test however, it wasn't as bad as I thought it was. The only thing I haven't seen was the use of time to act as data that needs to be manipulated to have certain functions. I got almost all the features but during the last hour and a half, I was attempting to plug in the last feature and it broke my code and I spent the remainder of my time desperately trying to fix my code. At one point, I was reading a function name and its code and....I had no idea how it related to the flow of information between my client side and my server side. Talk about a brain meltdown. Anyways, although I didn't get a perfect score on it, I was reasonably happy that I was able to solve a lot of things that I didn't have prior experience with.

Day 43

DONE WITH MEAN!

I finally finished the last assignment for MEAN. Discussion Board is by far the longest work I've done so far. It makes me really appreciate all the web sites that have basic associations with each other. But the biggest gem in this assignment is deep populate. Thank you Buu Nguyen for creating a brilliant module that dives into nested objects in schemas. Essentially, waaaaay back in Python when we played around with the Google Map API, the returned json was a huge object that contained a lot of information. Each of the information nested in those objects or arrays or whatever all had information that can be extracted. I dug myself into a whole thinking I had to do just that writing a lot of get/show methods. With deep populate, I just populate all the nested information easily and can access them via embedded Javascript.

My next assignment is to learn how to deploy and right after that will be the black belt. Wish me luck!

Day 42

End of Full MEAN

As of now, I'm 60/70% done with the last assignment. Gonna crank it out tonight. To be really frank, I feel really burned out. If you asked me last week how I felt, I would say pretty damn good. Going into full stack MEAN was a huge jump, not in difficulty (although there is a gap) but in how much patience is required. Sometimes I get so absorbed in how the information flows that I overlook a lot of syntax errors. And because there are so many files, you have to check each one to make sure the flow of data is correct and after hours of doing this, it can get really tiring. 

For our black belt, we know that we're gonna have the following being tested:

1. Login/Registration 
2. Validations
3. Associations in Mongo
4. CRUD operations

And, as I've said before, it's nothing new. But adding them all together can really wear out someone's patience simply because the task is pretty ginormous. I wrote that during the Red Belt Exam, it felt like the 4 and a half hours flew by. And I feel like this time it's gonna be even more so since we only have 4 hours. And on top of that, we have to deploy our project. But this is what it means to be a programmer; to really love what you're doing even when you would prefer not to. So let's go. I'll update you guys tomorrow on deployment.

Day 41

Last week of MEAN

Starting the last week of MEAN, I had almost finished the mini-store assignment over the weekend. It took me a while to finish all of it because of the validations. We were shown how to do validations with ng-messages but I found a more bootleg way that resembled how we did flash messages in Python: write the validations in the client controller file and have an error switch. For each error switch, have a span that writes out the error messages via ng-show. Ng-show allows the span to be hidden until the expression that is written is shown to be true.

We have our Black Belt exam on Thursday. I plan on finishing the last assignment (which is supposed to be really similar to our Black Belt) by tomorrow and start learning deployment of projects. 

Day 40

Trying to finish MEAN!

So basically this weekend will be devoted to finishing up MEAN. I have 2 more assignments to go and it should be pretty good feeling done with most of the coursework. The tricky part about MEAN is how many pieces it has. In a way, it feels like a house of cards. When everything goes right, you have a web app that doesn't require page reloads and you can do a bunch of cool stuff with it. But if there's any syntax error that clogs the flow of information, then everything breaks. A good thing to learn is to console log all the possible error spots which are usually in Angular. The one thing I forgot to mention about Angular is the importance of callbacks. Before, we didn't need to do callbacks in our factories because we have the information at hand but now, callbacks are extremely important because adding something into a database, we want to callback the response from the database. So building an app in MEAN takes a long time to get it right but here's to going!

Day 39

Full MEAN

Now that we have learned Angular, we can now do everything in Full MEAN. Although daunting at first, I realized it's just adding the angular code to the routes and that was essentially it. This is the flowchart for MEAN:

Again it seems like a lot of info but we've done most of the work already. My dumbest mistake of the day was not reading the first assignment fully and not changing the bodyparser to read json. Everything now in MEAN is going to be passing through objects to and from the view to the DB and backwards. 

Day 38

AngularJS Associations

I thought the AngularJS assignments were pretty easy until we started associations. Before, we would just have an array that is our "database". Oh, one thing that should be mentioned is that all the assignments are done in just Angular. Nothing is being done with the other 3 parts of MEAN. Now, originally all the items in the array of objects only had one value per key. But with associations, there can be key with an array value that holds multiple values in itself. 

There is a workaround that you can do; whichever information that is being displayed, you can just push information into that factory. Imagine you can add users and teams. But you have to associate the users into teams and you can only have one team per user. But a team can have multiple users. The proper way to do this assignment is to add a team field to your players list in your player factory and then a users array in your team factory. But on the associations partial, you need to just show all the users that are currently existing and associate teams with them. So my workaround to this correct way is to add a team to the players and that was it. 

However on the next assignment that Kris gave us, it was basically the same thing but with users and parties and we had to work in groups so I did learn how to do it the proper way.

Day 37

Angular JS

Today I started AngularJS, the last part of MEAN. To give you guys a recap, MEAN stands for:

• MongoDB
• ExpressJS
• AngularJS
• NodeJS

Mongo is the database, Node is the web server that passes info to and from the client and the database. Express act as a Node module that relays information from the database to the web server and finally Angular act as the framework that receives and passes information to the web server from the client side. AngularJS uses HTTP requests to pass to and and receive information from the web server. To use it, there is a script to add into your HTML. Angular has its own controllers and a thing called factories. Factories is what passes information to the web server. Controllers directs what is happening on the page. That's just a quick view of Angular!

Day 36

Modularization

We did some old assignments such as the Wall as one of our last assignments for the chapter. Again it was nothing too crazy and it taught us how to do what we've done before but with the MEAN stack. I finished the 1955 API a day early so it allowed me to look back and review what I've learned so far. Before 1955, we learned how to modularize our code. Therefore we separate the Node server to one file, and every Model, Controller and Routes we had into each of its own file. It's a pretty arduous process but it makes the structure of my code a lot cleaner.

The 1955 API is just a simple assignment that allows you to add and delete and look at individual names that you've added. We would first add all the necessary mongoose.js files, routes file, model file, controller file etc. Then everything that we would've had on our server file, we split. So routes has all the routes but none of the functions, that's in the controllers. Model is made to set up the Schema and table in Mongo. But yeah...that's essentially modularizing project structure!

Day 35

MongoDB

Finally, we get to work with NoSQL! For those who don't know, NoSQL is known as Not Only SQL. In SQL, there are strict rules in how columns are changed. For example, let's say person 1 has height, weight attribute. And person 2 has height, eye color and hair color attributes. In SQL, you wouldn't be able to put these two people in the same table and you would actually have to construct multiple tables just to hold these two people! In MongoDB, all that doesn't matter and you can plug these people into the DB. So the first assignment is to work with the syntax of how to insert and manipulate data in Mongo.

The next thing we learned is Mongoose, which is just a layer between our server file and our MongoDB. Mongoose provides a bit more structure for MongoDB. Mongoose also lets us be able to insert and pull data from and to the database. Although similar, Mongoose has its own documentation and has its pros: built-in methods such has update() that allows for easier to understand and less verbose writing it out in MongoDB. Our assignments are all pretty straightforward and we've done them all before, but never in JS with its own JS DB. We're expected to finish the rest of MongoDB over the weekend and start on AngularJS next week!

Day 34

ExpressJS

Again, today we were hit with another recursion problem that was really difficult. Although in my opinion it was easier than yesterday's. The problem is to take a string (like 'abc') and return an array that lists all the combinations (['abc','acb','bac','bca','cab','cba']). It was a similar format to yesterday's, except the return array consists of all combination of the str. In yesterday's case, the substring that is being pushed into the array has an order (i.e. a cannot be after b etc.) but the length doesn't matter (can be 'a', can be 'ab' can be 'abc'). In today's problem, the length does matter, as the substrings that is being pushed into the array must be of the same length of the str that is taken in as a parameter. And also, the order doesn't matter (str of abc can return 'bac'). I tried doing the problem without recursion and I hit a problem; depending on the length of the string, thats how many for loops there must be to rearrange all the characters. The first for loop holds the index of one of the characters, the second for loop holds the second index and the last for loop rearranges the last index. Now if the string was 4 character, then it would be 4 for loops. I was thinking of doing a recursion inside a for loop since even a recursion would have limits, but I still couldn't find a solution. The answer key, as it turns out has a recursion inside the for loop so my mentality was right but I couldn't implement it in code. 

We did ExpressJS today and one of the exciting parts of using Express is the ability to use sockets. Sockets allow a non-blocking connection between the server and the user. All group chats and video games undergoes that kind of methodology. Anything that happens to the server is reflected to every single user in real time. One of the annoying things about Express is all the modules you have to install to make the program work. Sockets is confusing in the sense that every event that you fire from client to server or server to client, you have to write a listener function to that event on the opposite side. 

• Client-side emits handle to Server-side's listener which emits a function to the Client-side's listener for that specific server side function.

Day 33

NodeJS

Today was the first day that I had no idea how to do algorithms. The second algorithm was to write a function that takes in a string and returns an array that gives all possible in-order combination. For example, str = "abc" should return [" ","a","b","c", "ab", "ac", "bc", "abc"]. I wrote yesterday that it makes life easier to first write the non recursive form of this and I did do that...except I couldn't translate it into a recursive function. When Kris showed us his solution, it completely blew my mind and I think it blew everyone else's mind. So far, we've only returned a function by itself once, with this problem, you have to call itself (but with slightly different parameters) again. Even as Kris showed us a feature on Chrome's debugging feature where it showed us everything that is happening line by line, it didn't make sense. Seriously, I've never been so out of depth with algorithms and it does scare me at how unprepared I am.

We went through all of Node today. NodeJS is a backend server that is very useful because of how lightweight and compact it is for very specific purpose of real time functions in a software or website. Imagine a chatroom with 100,000 people, when you write something, the message should show to everyone at the same time and immediately. With other servers, this is not possible without a refresh of the page or if it is possible, causes a high amount of server load so the users in the chatroom would be severely limited. One node in NodeJS can handle 200,000 connections. But Node does have drawbacks, namely working with relational databases, like MySQL and anything that requires heavy computation.

All in all, the assignments again weren't too hard but there was a lot of information to absorb. There is a way of doing routes that makes it easier than how it was done in Django but it was really repetitive to write a code for every static, image files. This is what I mean:

//http server
var http = require('http');
var fs = require('fs');
//creating a server
server = http.createServer(function (request, response){
  response.writeHead(200, {'Content-type': 'text/html'});
  console.log('Request', request.url);
  if(request.url === '/'){
    fs.readFile('views/index.html', 'utf8', function (errors, contents){
      response.write(contents); 
      response.end();
    });
  } else if(request.url === '/dojo.html'){
    fs.readFile('views/dojo.html', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else if(request.url === '/stylesheet/style.css'){
    fs.readFile('stylesheet/style.css', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else {
      response.end('File not found!!!');
  }
});
server.listen(8000);
console.log("Running in localhost at port 8000");

Low and behold, our last assignment of the day was to find out how to write an import .js file that dynamically knows which folder to look in and render which file in the fold.er

Day 32

Advanced Javascript Topics

We are blazing through the MEAN stack at the moment. We've yesterday we've finished two chapters (fundamentals and OOP) and now we're going through all the advanced topics. These topics include callbacks and event handling. Callbacks are just functions that are passed through another function as a parameter. Why is it important? Delegation and event handling. Think of delegation as a parent function continuing whatever is coded into it and the callback being a function that runs in the background or along side the parent function. This is where event handling comes in, the callback function runs if the event is met or the callback returns something when a callback happens!

The assignments weren't too hard, it covered most basic callback functions. I don't know whether this is a good thing since I've heard callback functions are very useful and used a ton in industry or maybe callback functions is only as complicated as the functions you put into it. Anyways, that's it for today's post.

I also want to mention that algorithms has been kicked up a notch. After linked list last week in Python, we are now doing recursive functions for the first week of the 2nd stack. I remember hearing about it from CSE 143 students and I can see why it's so hard to grasp. The trick I learned so far is that recursions are essentially for loops or while loops. So, do the problem first using for or while loops and eventually translate that into a recursive function.

Day 31

MEAN

Today was the first day of the MEAN stack. This stack is all in Javascript and we'll be learning technology such as AngularJS, NodeJS, Express and MongoDB. I somewhat regret not preparing more over the break since apparently half my class has already finished the first section! Luckily, the material isn't too hard because it was just the fundamentals. We learned basic data types of Javascript and prototypical inheritance. 

Most of our assignments have focused on OOP, or object oriented programming. That is, writing classes or constructor functions that in itself has different objects or methods that contain code that does something. One of the important parts of OOP that its a blueprint for whatever code thats going to be written and it helps layout all the attributes that the program might have. The assignments kind of eases us in with learning new concepts such as prototype and the different ways to write OOP (good and bad way). 

The big jump up was the Deck of Cards assignment. Because there weren't that many instructions, it was really hard to think how to create a random deck of 52 cards that can shuffle and deal out cards to individual players. Mike did a demo on it before I was able to finish the assignment and he made it look really easy. I'm sure a week from now, it will make more sense but it was definitely a big wake up call for me to not get behind. All the learning happens when you struggle through stuff instead of looking at the demo and pretending to know what's going on.

We are going to finish the JS Advanced Topics tomorrow..wish me luck!

Day 29 - 30

Thanksgiving Break!

Not much to report other than taking a small breather from programming!

Day 28

Presentation Day

So....unfortunately, we weren't able to fully flesh out our project. Turns out, I still have a lot to learn on GitHub and collaborating with developers on it. Merging conflicts were the death of me and when we finally figured out that binary files can't be merged, it already took away 2 hours of time. The presentation was originally set at 3 but was pushed forward to 2. We tried to add the bootstrap to make the website look nice but because I was working on the backend of the same file, Brian worked on the CSS so when we tried merging, it was either deleting the functionality of the website or the aesthetics. We stuck with functionality since that was more important but I was disappointed when all the other groups had pretty good CSS.

We weren't able to get to the random Santa generator so all in all our app was a bust but it was very cool working on a project with others and seeing how other people work out their code. I'll admit, I should've done more for the project and I got to cocky that I had everything all working only to find out that after merging all 3 of our codes, there were issues that had to be debugged. Since we didn't merge early enough, we spent the time to debug and that cost us the ability to add the random santa feature.

Other groups had similar ideas on the backend (movie watch list etc.) but the coolest one was the winning group and deservedly so. They created Thinder, where you can sign up and create an event on where and when to go eat. So if you're hypothetically alone on Thanksgiving, you can go on this app and see who else is doing what so you can join their event and everyone can share a meal together!

But thats the end of Python! Time went by really fast. We get the rest of the week off and starting Monday we'll be starting MEAN! Going to take this weekend to catch up with this blog and help with finishing my group project as well as look at the first couple things on the MEAN Stack. Happy Thanksgiving everybody!

Day 27

Secret Santa App

My group decided that our Python project is going to be a secret santa app. We learned about the AGILE system of development. Basically, have an overarching goal of what the end product is and divide into parts the different pieces of the project and its features and slowly implement and increment towards the goal. Eric has been a PM at Microsoft for the past 8 years so he was really well versed in AGILE and taught me and Brian on how to approach it.

We decided to do this app because of the holiday theme and also it kinda is something that we've done before. There will be a login/registration page with an OAuthr2 that will route to a dashboard page that will have the user's wish list and their friends' wish list in another table. You can add an item and also add an item on your friends wish list to your wish list. Now, when you add an item, it's not just a simple input form for the user to fill out but we'll use the Amazon Simple Product API that will give us a search bar that after inputting your item, will populate the top 5 most popular items and display them. From there, the user can then add that item to their wish list.

The last part of the app is to embed a clock that after it reaches a certain time, will generate a secret santa for all the users that are currently in the Django DB API. We divided our project and got to work and by the end of the day we got the Amazon API working as well as all the routes, databases and templates.

Day 26

End of Django

Today was a very chill day; finished the last 2 assignments for Django and just read on some new techniques of having custom queries. The last assignment of Django is a product catalog and I finished it relatively quickly. Since our 4th week is cut short, our project is a hackathon starting tomorrow! One of the things I'm trying to get better at is foresight in my building a project. Django is very unforgiving in the sense that if your urls don't have a method attach to the name, the page won't load at all even if the route isn't being used. It seems like Django is a perfectionist in the sense that it needs to know everything ahead of time. I think this feature is there so that traversing through different routes are faster and grabbing information from servers are faster that way too.

Anyways, I've gotten closer to the people at my table (whose name is not Maric's) and met Brian and Eric who sits next to me. The three of us has been partnering up for all the morning algorithms. I think we're gonna do our hackathon project together!

Day 25

More Django

Today Django got a bit harder because we focused on the Models. Something I should've mentioned in yesterday's post is that Django uses the MVC architecture, just in different names. Views in MVC are the Controllers in Django. And Templates from Django are the Views in MVC. Anyways, moving past that, one of the benefits of Django is that we do not need a MySQL DB; Django provides us with one! We set up the Model files with all of our tables and what we want on them and we migrate the changes. For each project that we start, there's a Django repository that gives us a DB to use. All we have to do is when we make our changes to our Models, we migrate them up to the Django DB and the changes will be set.

Unfortunately for the cohort, for the past 2 weeks, we've been doing roughly the same type of SQL queries to return what we want from the DBs. Django has its own syntax and queries of how to return information. In some ways, it's very straight forward but for newcomers it can be daunting. For example, usually we write "SELECT info, info etc. FROM table" and we populate the result that we want. Django's DB is an API, and as APIs go, it will return a JSON element. Since it's an object, we can't write in the way we have been for traversing through our information. We instead have to look at JSON in an OOP way to access the information (kind of like how we traversed through the Google Maps API to get the information we wanted). 

Another downside of Django's DB is that there are no visual representation of our data. When you have a query like Modelname.objects.get(id=1), it will return back an object. So thankfully, most of the assignments we've done require small bits of data although in the industry this is most definitely not the case since Python is known for being able to process through huge amounts of data quicker than other languages. Mike however, gave us a pretty print file that allows us to visually see what each object's keys and values are which makes things a bit easier.

Relationships between tables are written in the Models.py file and it's a bit different. In MySQL, when you have a many to many relationship, it will automatically populate a joiner table that has the foreign keys of the two tables it is joining. In Django, this is not the case and you write one line of many to many relationship code into ONE of the tables that you want to join. I like a different approach; creating a third table that acts as a joining table and use a foreign key of one to many relationship between the two tables. The assignments today weren't that hard as again, it was a repeat of what we've done before, just writing it in Django. Gonna relax a bit this weekend after the hard work I put it for the Red Belt!

Day 24

Django

The last thing we're learning in our Python stack is Django. Django is a high-level web framework that many app like Instagram and Pinterest uses. One of the cool things about Django is that it's very modular in the sense that you can quickly remove and input another application inside your project. However the con, for a developer building a project from scratch, is that there are many things to set up within your Django project. Such as:

• Creating an application folder
• Creating a url specifically for that app
• Creating templates/static folders within that app
• Add to projects urls routes that need to go thru each app
• Add to settings the apps that are being used in the project.

Today was an easy day as we mostly just read through how Django works and did some basic routing and set up. Our last assignment of the day is the classic Disappearing Ninja where the primary goal is routing through all the different images on the urls page. Note, that Django does all of its variables in url with regex:

url(r'^(?P<question_id>\d+)/$', views.show, name='show')

Day 23

AJAX, API with Pylot

To give you guys an update; I passed my Red Belt Exam! Today is a retake day as well and I took the exam again just to get really confident in creating a web app with Pylot. I think it's important to write as much code as you can, that's the only way to solidify your skills. Anyways that was after doing AJAX with Pylot.

Today, we are going to use AJAX with databases. Meaning that we're going to employ the .post() function on our HTML. The first couple of assignments were creating a Wall-esque type of web app. Instead this time, when you post a message, the page will not reload and you can see the message show on the browser immediately after submitting the button. This first assignment was pretty straight forward although it took a bit of time to get used to having a partial HTML that will render the messages without loading. 

The structure of AJAX with Pylot is very similar to all Pylot assignment: 

• Routes.py
• Controller,py, Views.html, Models.py

Except that there will be an extra folder in the views folder that has a partial html (almost a blank html file but with pythonic code that goes through all the information being relayed.). Another exception is that most of the logic is going into the index.html jQuery script. The next assignment really challenged having multiple AJAX forms operate all at the same time. In the assignment Notes, we are told to create something similar to messages but when you create a note title, it pops out a new note that has the title and a note description (which was not on the page before and only appears when a new note title is being created). The note description will also have the ability to update via AJAX. So before, we would have a form input that has an update button that will update the database but now, has to update automatically. 

Here are the steps to creating an AJAX loaded webpage.

1. Create the web app the same way you would without AJAX.
2. Start incrementing features in script section (jQuery stuff)
3. Create the partial html that will show AJAX loaded content.
4. Remove update button
5. Add AJAX feature with updates.

Our last assignment for the day was using the Google Maps API and creating a direction list. That was super cool. It was just getting the JSON from the .get() function and traversing through it and relaying the information into the HTML. I remember 10 years ago, I go on Yahoo or whatever site and printing out the directions list. Well, I created it this time!

Day 22

Pokemon AJAX APIs w/ jQuery

After taking the Red Belt Exam, we read on APIs which stands for Application Program Interface. APIs are the basis of modern application development. It is a set of rules that defines how a user interacts with a program. Think of a repository of information that you want and using jQuery to present this information on to the browser. We implement this feature by having this jQuery script tag in the HTML page:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>

Flowchart of AJAX Request

AJAX is Asynchronous Javascript and XML and is a web development technique that allows the user to not have to reload when sending and retrieving the data to the server or database. This is a departure from what we've done in all of our assignments so far since every time the user clicks a button or submits a form, the page reloads. Now, with AJAX, that won't be necessary.

Implementing AJAX is just writing Javascript functions in our script tags. The hard part of returning a JSON element from an AJAX request is traversing through all the information.

$.get("http://pokeapi.co/api/v1/pokemon/1/", function(res) {
    console.log(res.types[0].name);
    console.log(res.types[1].name);
}, "json");

Here's the breakdown of the API info request:

• .get('url', function(data_name) {function code}, "return json or XML element")
• .get is just to ask for the following API information, in this case the JSON of the pokemon API with the number 1 (bulbasaur!)
• The console.log is the traversal of the object.

Anyways, these were the basic information to get us started with AJAX and APIs. The assignments were pretty fun! We made a Pokedex based off the information we traversed through with JSON we got from the Pokemon API. A hard lesson I learned early on is that you should console.log a bunch in different areas of your jQuery code so that you know which functions or part of your jQuery is being ran. This helps debugging and troubleshooting your code!

Day 21

Red Belt Exam

I didn't finish the Red Belt Prep but I got most of everything working. There were some features that I just left out for the sake of simplicity; such as if the author is already added, just add him to a list of drop down menu that contains all the authors. But anyways felt pretty prepared for the exam.

I was pretty nervous and I didn't realize that when you enter the code to unlock the exam began. But I started my exam first. Just put on my earphones and got to work. We get 4 hours and 30 minutes to finish the exam. It seems like a long time but it actually goes by really fast. I did everything that I knew how to do first: set up my database, set up my HTMLs and setting up my routes using the RESTful method. I won't tell you the specific of my test since any future Dojo members might see this and it might give them an unfair advantage. Needless to say, it was much easier than the Red Belt Prep and most of the features on the tests were things we've done before with only one part a new feature. 

The exam was challenging but definitely manageable so I feel pretty good about being able to pass it the first time around. After the exam we were told to read up about AJAX and APIs as we're moving on from Pylot. Which again goes back to the point that we do not spend that much time on different technology...

Day 20

Red Belt Review

Oh boy, the Red Belt Prep was actually a lot harder than what I thought it'd be. It is basically the product catalog but has multiple catalogues on the dashboard. When you're on the dashboard, there is a book review table that reveals the most recent books that were reviewed but on the side it's a table of the most recent reviews of books. Only a few of my cohort members were working on the Red Belt Review as everyone else was reviewing past materials. I think the most draining thing about the prep is how long it is. I spent the first 2-3 hours just typing up and setting up all the HTML pages.

I've come to realize that truly everything that we do stacks on top of each other. And the order of the different frameworks that they taught us (Flask, then MySQL + Flask, then Pylot MVC) really matters. Taking a step back and kind of reviewing what I've learned so far; we began with basic Python syntax and we moved onto objects and classes with OOP. Flask is when we started putting all the algorithms together and started building basic web apps. With MySQL we can do even more with the information that user inputs into our site. Flask builds on routing knowledge. And finally with MVC, we're using an industry standard architecture albeit with a relatively unused framework in Pylot. 

By the time we get to the Red Belt Review, there really isn't anything new under the sun. Create the database of users with a one to many relationship to reviews, with a one to many relationships to books table and finally a one to one relationship with author. There is the login/registration which we've done to death. Then it's a product catalog-esque book reviews. Then build the link goes to the add a book review page. Again, using the RESTful routing. When you add a review/book, session the user id of the person who is logged in. 

I think Kris and Mike has done a pretty great job making sure we know everything and I'll be spending this weekend working away on this Red Belt Review!!

Day 19

Semi-RESTful Routes

Today was more Pylot and for us to starting using the RESTful method of routing. REST is a way to route server side code with the browser in a very coherent way and under 6 actions:

1. New - routes to a new HTML for creation of product in database.
2. Create - creates a new product.
3. Show - routes to a new HTML for product info.
4. Edit - routes to a new HTML for editing product info.
5. Update - updates specific product info.
6. Destroy - destroys specific product from database.

Note that these are in-built routes on Ruby on Rails. For Pylot we want to implement similar features because it will make the most sense in terms of code and file structure. The assignment for today is implementing these routes via a product catalog where the database reflects the products, and there are options to look at product info, edit then update the product, delete the product or add a new product.

It was a pretty fun assignment and wasn't too hard (even though I said I struggled with routes in the beginning). What I learned about setting up each project is to just take each thing step by step and make sure that the routes work before trying to do anything else. It sucks to write so much back-end code only to not see what is actually going on because you can't even go to the page. 

Note: It's announced that next Monday will be our Red Belt Exam! Thus tomorrow is just a full prep day.

Day 18

MVC Architecture

I think one of the hardest parts about the bootcamp so far is picking up new technology like every other day. Yesterday was the last day of using Flask and MySQL. And we were only on Flask and MySQL for two days. Now we're learning Pylot MVC to help us understand MVC architecture.

MVC is a way to organize server side information.

Here's a flowchart of how MVC works

• M stands for Model and does all the data manipulation to and from the database.
• V stands for View and is all the HTML templates or whatever the user sees.
• C stands for Controller and is the director of where information goes.

I struggled with understanding the routes of MVC. Since in Flask, everything is done on one server-side file, you initialize the app.route('/name of route') and when you want to redirect you just write redirect('/name of route'). But in MVC, you have a specific routes file that handles all routing. Initially, I thought this was a waste of time but I quickly realized how useful it is. This is the progression of routing:

1. Form action on html page is submitted
2. Information is sent to the routes file
3. If the action matches the route as well as route method (POST, GET etc.), it will go to whatever is after the hash in this example ('Controller_name#method_name')
4. It will go that controller's method and execute whatever code is written in it.

The assignments were all assignments we've done before, except this time we're doing everything in MVC so all in all, wasn't too much of a struggle today.

Day 17

THE ****ING WALL

I've been pretty busy with all the coursework the past 2 weeks so I haven't been posting regularly...but here I am! At the beginning of week 2, we started on Flask + MySQL. For me, learning so much so quickly was a pretty big challenge. Now, in the beginning of using MySQL with Flask, it wasn't so bad. Everything is pretty straight forward because the query and the relationships between tables were very straight forward; 2 tables and either a one to one or a one to many relationship between them. Then came the Wall assignment. I think this is the first glimpse into future frustration with coding.

Wall wireframe:

Think of the Wall like a Facebook wall, you have a login/registration that goes into the user tables. When you log in, you can post multiple messages and on each message, you can post multiple comments. Here is the ERD:

So the login/registration part is straight forward because we've done it before. Having each user write messages is easy: you session the user id as they log in and input that user id into the messages table. So 80% of the assignment was basically done. All that was left was to get the comments. And this is the part where, looking back, I should've thought more about how to approach it rather than just start coding. I thought it'd be similar to the relationship between messages and users (and it is!) but I also had to pull out the message id so that the comments will display under the correct message.

That took me 4-5 hours to figure out. Looking back, I should've just tried to input an example comment with a message id that already exists and on MySQL, keep troubleshooting queries until I got the information that I wanted. So I began with getting all the comments with the message id;

• SELECT comment, message FROM comments JOIN messages ON messages.id = comments.message_id WHERE messages.id = '{}'

This returns all comments for that message id. But name is also required! So we do another join.

• SELECT name, comment, message FROM comments JOIN messages on messages.id = comments.message_id JOIN users ON users.id = comments.user_id WHERE messages.id = '{}'

By adding the second join, we're also asking for the user id which will give us the user name from the users table. After using that query to pull the information form the database, I was finally done...with the Wall.

Day 16

Beginning of Week 2: MySQL +...Flask

I spent the majority of the weekend reviewing Flask and reading up ahead on setting up a database which is our next chapter. Our database is MySQL and installed a couple of connector programs on terminal. The assignments for this chapter are pretty straightforward: learning the syntax of SQL queries in Python code and how to use that to retrieve, receive and transmit code to and from the client side server.

Our class always begins with 20 minutes to an hour of algorithm challenges. I think this is one of my favorite part of the class because it really picks at your brain on how to accomplish a task. There's literally nothing else you need to know other than basic for, while, if else statements. So far the challenges aren't that bad and only uses basic algorithms. It's pretty cool to sometimes the wide variety of answers different groups come up with. I'm sure the challenges will get harder as time goes on but I'm pretty sure I'm up for the task.

We did Python Olympics again and...well PO is like Jeopardy and we guess the output of Python codes that Kris gives us. I know it's a good exercise to think like a machine but practically you can run the codes and see if it works and fix after whatever error pops up. Anyways, I didn't pay too much attention and I got caught using my computer...for fantasy football haha.

The rest of the class was spent doing the assignments, and in my opinion they were a great segway to learning the new material. The first being an email database where you enter a proper email (using if not email regex) and it will show up in the database on the index page ('/'). I built my HTML page based off of the Ninja Gold assignment where I had an activities box that displayed information from the server but this time, wrote code to display information from the database using (SELECT * FROM ...etc).

The next assignment was adding a friend that will be sent to a database that will also be sent back to the index page to the right of the input. The friends in the database can also be edited or deleted.

Very minimal design-wise, but the key was to be able to store, delete and edit databases through Flask.

Day 15

End of Week 1

Today's the end of week! Honestly every day at the Dojo goes by really fast. The assignments don't really end and when you think you mastered everything you learn in one day, the next assignment or chapter will start barraging you with that much more information. The pace of the Dojo is honestly up to the individual. You can get a lot of things done, or you can fool around a bit and have to finish assignments longer. 

We're supposed to have finished Flask today and move onto MySQL + Flask. I kinda accomplished that, I got to the last assignment and got stumped (but eventually figured out! More on that later). The Ninja Gold assignment was pretty fun to do and I learned how to use datetime as a module. Ninja Gold is a basic app that allows you to click a button for 4 different buildings, each building giving you money or in one case, might also take away money. You have a gold counter at top and an activities log on the bottom. Tricky part about this assignment was to figure out how to create a message log for all activities, since showing one message is relatively easy. Maric recommended me to do a list or dictionary and I chose the former. Here is the result:

I didn't really do much CSS on this page since the main part of the project was to figure out how to create 4 inputs on the HTML that links to one app.route(using the hidden type) that puts out 4 different scenarios (all done with if and elif statements). I definitely should go back and make my projects more appealing for my GitHub account.

The last thing about Flask we learned today was validation and flashing messages and advanced routing. Validation is just having the server read what the user input is and comparing it with what is supposed to be; i.e. passwords must be longer than 8 characters, password must contain 1 uppercase etc. I tried to develop my own method outside of the password regex but alas Kris just told me to google regex since it's so much simpler.

Advanced routing was where I got stuck on, which is why I got stuck on the last assignment. Now, advanced routing is just using a variable and putting it as a parameter in our app.route() as well as our function within the route and the resulting render_template or redirect. I didn't really understand the assignment until I realized that the changes between pictures or HTML elements are due to the URL of the browser. 

Here's what I've learned in the past week:

1. Basic Python syntax/algorithms.
2. Python OOP including lambda functions.
3. Flask fundamentals

Now this list doesn't seem like much but there's a lot of nuances and sub-sections in each of the bullet points but also, if you've read my previous blog posts, you'd know how much more. Anyways, gonna relax this weekend but also read into the next section of MySQL + Flask. See you guys next week!

Day 14

Seriously...what the flask?

After much confusion the day before, I'm starting to understand Flask a little bit better. There are some required syntax: 

• Importing Flask and importing all the modules that is used in the server-side file. 
• All of our assignments require us to have the app.run(debug=True) statement at the bottom on our server files so that if there were any issues with the code, the browser will give us error messages.
• app = Flask(__name__)
• app.secret_key = "your key", when you are passing POST info.
• app.route(): are where you direct where client-side action goes.

App.route('.whatever is in here') - when using HTML elements such as form, writing in action="whatever is in here" will route whatever you write in that space into the same app.route that has the same parameter name. 

For example: <form action="/example"> will route to app.route('/example') and do whatever function you have written inside.

All app.route() must have a function inside it and that function must return something. Either a render_template('example.html') or a redirect('/example'). This is to ensure that whenever a button is pressed and the information is routed, there will be a page that exists. That last sentence probably doesn't make sense but that's the best that I can describe it.

We learned two main methods of passing information between client and server: POST and GET. Post is what you use during <input> elements and requires secret keys (see above) and is primarily used for private and sensitive information like passwords. GET is used to ask the server for information to display client-side.

• GET allows us to request information from client side webpages. 
• We can use session['example'] = request.form('name') to store the GET request of the form element with the name 'name' (think <input type="text" name="first_name">).

And the last topic of the day is how to represent python code in your HTML. For just printing something that is stored in the server via session, just write {{session['example']}}. If you want to use if else, for loops, use {% algorithm %} and also {% endalgorithm %}. Ending the algorithm is very important!! Going through the assignments and getting a lot of help from my classmates solidified the foundation of Flask so I'm pretty proud of being able to create a small web apps.

Day 13

Advanced OOP and What the Flask??

The good part about today was that there weren't too many assignments. Unfortunately we also learned a lot in the process without too much practice on what we learned. We started with multiple arguments to pass through functions using the splat operator, which is just putting an asterisk next to the name of the parameter. This means that you don't know how many values will be passed but there will be multiple of the same values. Now splat operators only return tuples. 

• So def function(*value), and if you call function(4,4), the splat operator will pass the parameters as (4,4). This includes any lists or even other tuples. i.e function((4,4),(4,4)) will return as ((4,4),(4,4)).  
• A useful trick I learned from a classmate is to write print type(*value) to see what data type is being returned because with the assignment paired with splat operators, a lot of my compiling error was that I kept trying to put tuples with ints or lists with ints. Finding out exactly where the data types are coming from can help you figure out a code to change ints to tuples or vice versa.

After this we went over lambda functions, or the functionalities of lambdas. Lambdas are expressions, not statements so they don't have the same restrictions as statements. Lambdas are primarily used as a shorthand version to write a function with one method but allows for a multi-functional usage of that method.

For example: 

• def map(self, myList, myLambda): 
• returnList = []
• for i in myList:
• returnList.append(myLambda(i))
• return returnList
• print _.map([1,2,3], lambda x: x*x) 
• This function and this print statement will cause all the values in the list to be squared. But by changing the x*x to other mathematical statements, you can manipulate the list further. We don't change the original function, but we change what we can do with that function in the lambda function. 
• If it looks confusing, it's not as bad as it looks. myLambda(i) is a representation of the lambda function we write below (the x*x), the myList parameter is just the list we enter after print ([1,2,3]). 

We moved on to Flask really late in the day, much to the chagrin of the cohort. Flask is a framework used to build a single page webpage. I didn't get too much reading done unfortunately since it was so late in the day. Kris went into the lecture and it just kinda flew by my head. Fortunately Flask isn't as hard as I made it out to be although there is a lot of new syntax that I have to learn such as @app.route in my server file and {{session['name']}} in my html.

Day 12

Python OOP

Today's class started off sort of slow. We did an algorithm practice sheet for an hour and went through all the problems. I'm still getting used to writing in Python and these are some of the things I kept tripping up on:

• for i in range (#, #): the upper limit is NOT inclusive. Meaning, if you want something from say, 1 to 10, you have to write (1, 11) because Python goes up to but not including 11.
• When writing for i in list: this for loop runs all the values inside your list. I kept mixing that up as list[i] which is not the case, therefore if I wanted to change the actual values in the list at a certain index (list[i] = new_number), then I would either create another for loop for that purpose or, as Maric pointed out: create a counter variable outside of the for loop and do count += 1 inside the loop to note what index the for loop is on.
• I need to get used to writing things in functions.

But we moved on to OOPs right after. For the readers who don't know, OOP stands for object-oriented programming and it's less of a Python thing than a programming paradigm across all languages. It allows for programmers to not have to re-write code and makes code a lot easier to read and follow. Michael Choi described OOP through Age of Empire barracks: 

• A blueprint of a barrack (not an actual barrack) is the class.
• Blueprint in the sense that the actual barrack doesn't exist but if it were to, it would come from the class of barracks.
• Attributes like health of the building etc. are a part of the class.
• Methods or functions of the building (like creating soldiers) are a part of the class.
• This leads to the creation of the barracks (or an instance/object) and this barrack will inherit all the attributes or methods that the class of barrack has, but only if these attr/methods are public.

We then learned more about the syntax that sets up the class in Python like __init__. A tricky part about OOP is that when you first start learning it, a lot of the objects that are being passed in the parameters of classes or functions will make your head spin. It can get really confusing really easily as you stack more functions in a class and when you start creating more classes that use functions in another class. Here is an example:

Basic objects and classes

...lol doubly linked lists

Definitely the biggest head scratcher for today was the idea of singly and doubly linked lists.

Singly linked lists are nodes that have a head portion (that contains the value) and the tail portion (which points towards to another node). If there's only one node or if there is not another node to point to, the tail section will become null. Doubly linked lists are the same as a singly linked but has two tail portions which can point in a bidirectional manner instead of a single direction like singly linked lists. I won't focus too much on it since it's optional and is mostly to ready a person for a technical interview but it's definitely a CS theory that I should get down by the end of this bootcamp.

Day 11

First Day On-Site!

Woke up today pretty early at 6:30AM. Got a good amount of sleep last night and packed up all my food. Unfortunately by the time I got there, all the parking spots got taken up. The email wasn't kidding about no parking spaces. I parked with a friend at the nearby Toys 'R Us: there doesn't seem to be any rules about parking there for any length of hour so here's to hoping there's no ticket on my hood when I leave today.

This is what the setup is like for our cohort:

A good chunk of today was devoted to setting up Python on our laptops. Installed everything via terminal which was pretty cool. Kris went through the basic syntax of Python really quickly. I'm probably going back to the Dojo website to catch up on anything I didn't know. Python is really simple to learn yet tricky in a lot of ways since it does things differently than what I'm used to in Java/JavaScript.

In Java/JS you write for loops as 

• for (var i = 0; i < #; i+#) {} 

But in Python, the syntax is 

• for i in range (#, #):
• And the fact that everything is differentiated by indentation.

The biggest difference for me in doing problems with arrays (or lists, as it's called in Python) is that in JS, all the for loops I've written to go through every array element is via 

• for (var i = 0; i < array.length; i++) {some function with array[i]}

You can do for loops via the basic for i in range etc. but a TA showed me, in my opinion, a better way: for i in list_name:

Thats it! Another cool bit of code is that when you are in a for loop to look at each elements of a list, you can write i[#] to look at the specific characters in an element (that's a string) and pull that number out for use, which is what I had to do in an assignment. Also, a new conditional statement for Python: if type(i) is int: which is basically saying if the element of the array at i is an int, then...

I didn't expect this many students and with such diverse age and background. There was a lot of learning going on today especially with nested dictionaries which I still haven't fully comprehend but will try to do more on it at a later tie. A dictionary is essentially a library for all lists and touples (immutable lists) and can have another sub-dictionaries in them. The biggest pain of nested dictionaries is how to access the values as there are a lot of different ways to do it. Some easy, some way too complicated for our assignment. One way we learned was to use enumerate and the second is to create a 3rd nested for loop.

8 hours went by really quick today and I can definitely see how the pace can be very quick very fast.

Day 10

Last Weekend + Review

After finishing advanced jQuery, I decided to review a lot of what I've learned so far. I finished 1 or 2 optional assignments that I didn't get to finish although if I have time during the on-site days, I'll probably try to get around to it. I read up some python syntax to get a bit of a head start come Monday. I just finished paying off my tuition (or emptying my bank account) today and got to see the building. They told me that we will be located on the 3rd floor (originally 1st) and that it would be a lot bigger so I can't wait to see how it turns out because the original floor was already pretty big with 2 monitors per desk. I can't tell you guys how crappy it is to work on just one 13.3' monitor. Having multiple screens should make things move along a lot faster. Time for everything to start!

Day 9

Advanced jQuery

I went through advanced jQuery today as the last part of the web fundamentals course. On paper, dynamic content is simple; they're elements that are created after the page is loaded. You use the .append() function and whatever function is in the parameter is what will be executed after a certain event occurs. Now add in .on() which is a way to add event handlers. Event handlers are code that executes a function when an event happens (click a button, hover or something etc.). Make the selector as specific as possible so that the server doesn't take too much time finding all the elements.

Now for callbacks. Callbacks are just functions that causes other functions run after a certain event. Sound like the .on() function? It is similar, but callbacks allow for more precise coding. Write out a callback function outside the scope of $(document).ready, (this is to allow the callback to exist anywhere on jQuery) and plug whatever you dub the callback function into your jQuery scripts.

Anyways, it was pretty tough but I had a breakthrough late in the day. I kept thinking append() and on() methods as  really daunting tasks but once I started to little stuff by little stuff, it's essentially creating something in html but within the parameters of append. One thing that took me a while to get a hang of is that when you write .append('<div>' + [insert html elements] '</div'), you can STILL id/class whatever HTML elements you are putting in. Which makes customizing the element with CSS a breeze.

I think the hardest part about jQuery is learning which methods can stack with other methods so you don't have to write a lot of code. I guess that comes with practice and doing more problems. jQuery is super useful for the front-end side of things, and there are so many methods has been developed and I'm pretty sure will there will be more cool animations developed later!

Day 8

More SQL Queries

The homework for SQL Queries were actually pretty fun. Like I wrote in my previous entry, figuring out the queries and how to get the information you want from the databases is a lot like plotting a route in a maze. You look at tables and see what information they have and you look at the relationships to help you determine your starting point and your ending point.

Unfortunately for me, I always get screwed on easy questions because of a small thing that I overlooked. The question was write a query that will return all movies that are in the drama genre and has a rental rate of 2.99. Seems pretty straight forward, and I saw in the ERDs that I'm going to be joining quite a bit of tables to get my answer (shown below).

I would go from categories table all the way to the payment table. Or so I thought. The film table actually has a rental rate column that I overlooked. Which led to me scratching my head and doubting my confidence in my joining abilities.

I don't like looking at the answer sheet unless I am truly stuck. But after spending an hour trying to figure out where I go wrong, I gave in and realized how dumb my mistake was.

This just goes to show how merciless databases can really be. Or that I need better vision.

Anyways, I only had enough time to finish the mandatory SQL assignments. I plan on going back to it this weekend when I have time.

Day 7

MySQL Queries

And just when I thought I understood databases, SQL queries messed me up. Now I grasped SQL a lot easier than I did ERDs, probably because I spent so much time on ERDs. The trickiest part of SQL queries is joining tables. CodingDojo's website had .gifs showing each step of the query and how it is visualized. What I learned is that when creating queries for data that you want, it's like creating a trail through different tables. 

How queries works:

select (the data that you want from the query)

from (select a table - usually the table that you have a specifying feature)

(insert any sort, order, join commands);

How join works:

from table1

join table2 on table1.id (or whatever is the primary key's name) = table2.id (the foreign key)

join table 3 on table2.id = table3.id etc.

One feature that I learned for join is that you can join another table without referencing the previous table that is joined (which is the most common type of joins).

from table1 

join table2 on table1.id = table2.id

join table 3 on table3.id = table2.id

I also learned self-joins, which became very meta very quick. Self joins are basically tables referencing itself. Think of a table with users connected to a friendship table. You have a foreign ID from the users table in your friendship table to reference the users. But you also have a friend ID that is not referencing any other tables but itself (since you have the users, those are your friends). Confusing? It gets better; 

How self-joins work:

select 'something'

from table1

join table 2 on table1.id = table2.(foreign key #1)

join table1 as table1'  on table1'.id = table2.(foreign key #2)

This might not be the best illustration but if I find a better way to describe self-joins then I'll edit this entry!

Day 6

ERDs

I remember when I worked at ADP, I would use Access a lot to pull information from our databases. Today I learned how to set up those databases and pulling information is a lot easier than creating them... ERD are known as entity relationship diagrams. I learned about the 3 relationships: 

1. One-to-one 
2. One-to-many 
3. Many-to-many

When first going through the videos, it makes a lot of sense; have unique IDs for every table, foreign keys in the tables you want information on, and many to many relationships have to have a joining table. Then the normalization rules:

1. Each column have can only have 1 value (think address street, city, state, zipcode being broken up into separate columns)
2. If not foreign or primary key, cannot repeat values. This prevents repetition of data.
3. Non-key columns cannot be dependent on non-key columns. Meaning, that if you have a column in a table that affects other columns, (like zip codes determining state and city), then you must create another table for that column and have a foreign ID put into the original table.

Here's a picture to illustrate:

Then, after learning just these 6 things, they start asking questions on the assignments that slowly didn't make sense. I don't know why it took me so long to understand these concepts. The only cure was to keep practicing and answering a variety of questions. But the one question that will stick to my mind is: can A have multiple B? Can B have multiple A? To determine what relationships the two objects have with each other.

The assignments weren't too difficult and didn't take a long time although the instructions could be clearer. All in all, the more assignments I finished, the more I understood the subject although now my issue is that I can't fully explain my decision about creating relationships between tables. I can't believe that most DBs can have 50+ different tables when I'm struggling with just 5!

Day 5

Yellow Belt Exam

So I absorbed quite a bit of information the past week. Today I took my yellow belt exam, which was just to re-create a website; pretty much the same as what I've been doing with the CSS assignments. I had 4.5 hours to finish the exam, and am able to use anything help me to finish the test. I got the website that had a lot of color gradients, which is irksome since I like to be perfect with what I'm creating. Anyways, I finished the exam in 2.5 hours. The one thing that I know I'm gonna get marked down for is using a div container for only one element. But for some reason, I couldn't figure out how to properly position my text next to the image. 

Anyways, the test wasn't that hard although it is disconcerting that I couldn't fix the text next to image issue. Probably going to go to Kris, my instructor, about how to fix the issue. For this weekend, I'm just gonna review over what I've learned so far - Git/Terminal + HTML/CSS.

Day 4

jQuery

Having done the CodeAcademy track for jQuery, I went through this section pretty quickly. jQuery is definitely a useful tool for adding cool animations onto websites. The section was pretty straight forward, learned the basic syntax of $(document).ready(function(){}); and the first homework assignment went through a lot of different methods (by having you write them). 

I was kinda surprised that we didn't use a separate file for jQuery scripts. But then again we didn't do too many animations. The first assignment that made me think was the one that had you click a picture which changes into another corresponding picture that fits like a puzzle (so think a picture divided horizontally 5 times. And when clicked, it would change to another picture that is also a puzzle. I'm pretty proud of being able to write it in one line of jQuery:

$(this).attr('src', attr('src').replace('ninja', 'cat'));

The attribute method allows for change, specifically in this case the source of my image. Since each image (ninjas0, cat0) have the same numbers to represent its vertical placement, I decided to just change the name of the image.

For the last assignment, it asked us to do a fade in/out of images as you hover over them and this is where I cheated a little and used the same pictures for the 4 images they wanted us to have. This part is where you get to use parameters and I wrote a pretty short piece of code. That's when a friend of mine in the cohort asked me, "what if all the images had to be different" and that got me to thinking about how you can have the same effects but not repeat the code. Obviously I had to use a variable but specifically do I put in it? A method? But with what parameters?

And thats when my friend and the previous assignments instruction started to make sense; use "data-alt-src" and store it as a variable so that it's hidden but the data is still there and use jQuery to surface it! There's an advanced jQuery section but that's not until later. The next unit is ERD and MySQL!

Day 3

Terminal and Git

Sorry for the late posts! Met up with Allen from my cohort today at the Regional Library. I worked on Terminal and Git for the longest time. The assignments weren't hard but for some reason I just couldn't understand how to do them that quickly. I think the weirdest part about Terminal is that you have to tell it exactly what to do and which directory to do it from. It was pretty annoying to have to change my directory all the time so I can change into the correct folders. For example, when I create a directory on my desktop and enter it, I can't just change into another directory, I have to go up one level (in this case, back to my desktop) and change into another directory that's a child of desktop.

That might sound really confusing to some, and maybe I'm just not explaining it well but think of it like branches (which ironically was another part I got stuck on in Git), you can't jump from skinny branches to another skinny branch parallel to it, you have to retrace your steps to a thicker trunk and then go into another smaller branch. I don't know if I made it more complicated but there it is!

Using Git and GitHub was interesting...and since we have been taught how to use terminal I decided to use terminal for the last assignment. What I ingrained in myself today is that process to do anything with a file in a local repository and how to export it (or push) into my GitHub account. 

1. Always stage the file via git add . or git add file.extension
2. Then git commit -m "initial commit"
3. Make changes.
4. Repeat step 1-2.

That was the easy part..the confusing part for me was the last assignment when I had to clone a copy from GitHub, add then commit, then create a branch, enter that branch, make changes, then re-add and re-commit. Then finally push it out into GitHub. I spent FOUR HOURS on this assignment and the stupid thing is the very first step that I didn't do; I didn't freaking FORK the file. I was so confused why I couldn't add my edited file into the GitHub repository, re-did the assignment probably 20 times. I guess the only good thing that came out of it is that I have since became very comfortable using Terminal and Git...but the next unit is going to be jQuery so I'll update about that next!

Day 2

Git and Terminal...

Today we had our first lecture via Google Hangout. Our instructor, Kris, just went over the basics and the first assignment on the CSS sheet. I was half-listening and half trying to learn terminal commands. I was still able to see how Kris did his webpage in a much faster time than I did. One cool feature was his use of outline property on CSS to outline which containers are which. I've been using borders to see where everything is but outline was the property I was looking for since it outlines the edges of the container rather than the outside border. 

Kris used the inspect element A LOT. He actually just tested all his CSS on the inspect element and when he was satisfied with what he saw, he would just re-write the code on the editor. This was pretty neat since I think it saved a lot of time but also I think you have to be pretty adept at using html/css to be comfortable knowing where to put everything although it's definitely another way I can make webpages faster!

As mentioned in the yesterday's post, I kinda breezed through the twitter bootstrap and LESS optional assignments. I definitely need to find time this weekend to at least get a deeper look. Twitter bootstrap just seems to be a bunch of pre-set code and all you have to do is change classes and whatnot to fit your desired webpage layout. LESS, from what I understand is a principle of how to write less CSS code. Although you have to run it through a program so that it works. One thing I've read and am pretty excited about is the fact that you can use variables in your CSS. This makes editing your webpage later on so much better since you can insert a variable and just change the variable at the top and see it cascade through all your selectors!

Anyways I'm meeting up with a bunch of fellow cohort people tomorrow at the regional library for a study session. It should be a pretty good experience getting to know each other.