Jan 22 – 24 [Pre-Work]

Since Thursday, I have been doing Coding House Pre-Work Challenges.

Below are 10 Challenges I finished over the past three days in a chronological order.

Screen Shot 2016-01-24 at 11.13.45 PM.png

Challenge 4)
When doing this problem, I wasn’t sure what happens when you try to change case on characters like spaces or punctuation. I learned that these characters are case less and was able to simplify my code after receiving the feedback from Coding House.

Screen Shot 2016-01-24 at 11.16.44 PM.png

Challenge 8)
I have done similar problems on coderbyte and on codewar before except at that time, I didn’t know the map() method. This time I am able to use map to write shorter code.

Screen Shot 2016-01-24 at 11.39.01 PM.png

Challenge 5)
This is one of the challenges I enjoyed working on the most because I took the feedback from Coding House and combined it with my random idea, I was able to experiment the code and turned this challenge into a personal project. I called it Mandy’s Dance Club. I enjoy using my creativity to make ideas come to life through programming.

Check this out!   Mandy’s Dance Club

Screen Shot 2016-01-24 at 11.54.08 PM.png

Challenge 6)
Whenever I want to update any CSS elements on my personal webpage, I always use the Element inspector in Chrome Dev Tools to play around with the styles first. I then preview any changes I make. So this challenge was not surprising to me.

Screen Shot 2016-01-25 at 12.05.23 AM.png

Challenge 9)
I enjoyed this problem because it had a lot of parts that I was familiar with, but presented some interesting edge cases. The edge cases were when a comma or period appeared.

Screen Shot 2016-01-25 at 12.08.06 AM.png

Challenge 14)
This is a pretty straight forward problem as long as you know the string method .fromCharCode()

Screen Shot 2016-01-25 at 12.10.47 AM.png

Challenge 7)
While I have used bootstrap button, modal and various components to build my site for Coding house Scholarship entry, this challenge still took me some time to get the desired result as comparing to what Coding House required.

Screen Shot 2016-01-25 at 12.17.12 AM.png

Challenge 3) I have done similar problems on codewar. It refreshed my memory on object creation and property assignment. There are many ways to create an object in JavaScript. The two that I know are object literal and object constructor. In this case, I used object literal where you declare an object using a pair of curly braces. The constructor is typically used when you want to set up prototypes and inheritance.

Screen Shot 2016-01-25 at 12.19.21 AM.png

Challenge 2)
Practice Makes Perfect. Whenever I wanted to take a break from solving the logical problems, I would go to this site. On Sunday, I took a screenshot with a 55.87 WPM 🙂

Screen Shot 2016-01-25 at 12.20.52 AM.png
Screen Shot 2016-01-25 at 12.22.30 AM.png

Its fun practicing touch typing! I now go to this site almost every few hours whenever I want to take a break and just keep my fingers busy instead of my brain.

Screen Shot 2016-01-25 at 12.33.20 AM.png

Challenge 10)
This challenge is actually very similar to challenge 3. Except you need to be familiar with those array methods (forEach, reduce and sort) in order to make your code shorter and easier to read.

 

Overall, I have been enjoying all the challenges from Coding House. I like solving the logic problems as well as experimenting with the front-end JQuery and bootstrap components. I realized I forgot some JQuery effects or events that I learned from codeacdemy back in November as well as the JQuery tutorial I recently took on Udemy. So in order for me to finish the Challenge 5 JQuery Basic and Challenge 7 Navbar Mockup, I took the codecademy Make an Interactive Website course. It is a really good summary of some basic JQuery knowledge such as DOM Manipulation as well as events and effects. I was able to apply the effect bounce for Mandy’s Dance Club based on codecademy JQuery course as well as using setInterval method that I learned from Udemy Complete Web Developer Course. I have used SetTimeout for my reaction test game and I thought if I can use SetTimeout in loop, then I can make something funny and I did. 🙂

By the end of Sunday, I was messing around and trying to work on Challenge 16 – the Game of Hangman. It will be cool to see what I can build outside of Udemy Course. In the past, I have built a couple small games based on Udemy course. For example, Fingers guessing game and Reaction Test Game

I look forward to continue working on the other pre-work challenges and to build many different small projects this week.

Day 31 – Jan 20 [Coding House]

I finally applied for Coding House today. It’s exciting but also nerve-wrecking at the same time. Because I have been wanting to apply for a bootcamp since October and I first heard about this bootcamp from my friend, Paige on December 20th. The next day this blog was born 🙂

I have been taking different online tutorial courses from codeacademy, codeschool and treehouse since October. Just like everyone else, my road to code is not linear. I would bounce between one website to next and found out the materials are repetitive. Thats why I really hope by attending a bootcamp like Coding House, I can learn in a much more organized and structural way.

I started doing Coding House challenges on Thursday, Jan 21st. Below is a list of materials that coding house posted on their site as soon as I submitted my application.

Coding House JavaScript Workshop Part I

Coding House JavaScript Workshop Part II

Coding House JavaScript Workshop Part III

Intro to Git and GitHub

Mastering GitHub

As I moved on to a different problem, I would receive feedback about the previous challenge that I finished. I found this very generous of Coding House to take their time and give me constructive feedback. I can see Coding House truly want their applicants to learn or get something out of the application process. I don’t know if there are any other bootcamps doing the same thing, but this is pretty impressive to me. They share many different resources with me and help me to learn even before I get accepted as their student!

Among different challenges, I think  Practice Typing   is one of the many challenges that is going to take me a while. Because I am not that fast at typing. For now, I am skipping this challenge. But I will definitely go back to it soon! Practice Makes Perfect 🙂

Below are other materials Coding House share with me along the way. I am aware that my indentation is not the best. Thank you Coding House for the feedback. I will go back to CS 50 Problem Set after I complete all the challenges.

Explore and Master Chrome DevTools

JS Best Practice – Indentation

CS 50 Problem Set

 

Some of the problems I solved.

Challenge 5 – jQuery Basics

I deployed the solution to my personal page. Check how I took a few extra steps and turned the basic JQuery challenge into my own personal Dance Club. Here’s the Link to Mandy’s Dance Club 🙂 I enjoy building things and programming let me use my creativity freely.

Screen Shot 2016-01-21 at 9.23.08 PM.png


Challenge 6 – Chrome DevTools

Screen Shot 2016-01-21 at 12.36.17 PM.png

Day 27 – 28, (Jan 16- 17)

This weekend, I decided to create my web site for #ChangeTheRatio Scholarship entry. On Sunday, I deployed my site to Heroku.

Here’s the link to my page for Coding House’s Scholarship entry.

Screen Shot 2016-01-20 at 6.16.50 PM.png

 

On top of creating a site for Coding House scholarship entry, this weekend, I also found other online resources to learn more about JavaScript on Egghead.io

Here is a list of tutorials I watched.

JavaScript Call Stack

Recursion – the problem

Recursion – the solution

Reducing an Array into an Object

Introducing Reduce: Common Patterns

Using the node.js REPL shell

 

My goal for the following weeks is to keep building more projects by taking two Udemy courses.

Learn Bootstrap Development By Building 10 Projects (13.5 hours)

Projects In JavaScript & JQuery (9 hours)

Screen Shot 2016-01-20 at 11.03.11 AM.png

Screen Shot 2016-01-20 at 11.02.29 AM.png

Day 24 – 26, (Jan 13 – 15)

I accidentally found a great JavaScript Guide while reading an article about callbacks on JS for cats. Below is the link to the guide.

JavaScript Guide by Mozilla Developer Network

In addition to reading various articles, I took a 12 hours course on Udemy learning about the basic of Node.js. I know it maybe too early for me to understand Node.js provided that I’m still new to JavaScript (My coding journey started in October)

People say learn how to walk before you learn how to run. I understand it. But I couldn’t resist my curiosity of learning how JavaScript is being used in the back-end world via Node.js.

Over the past three months, I have been taking different online tutorial courses about HTML and CSS as well as JavaScript and jQuery. All of those only show me how JavaScript is being used in the front end world. Now that I have finished 60% of this Node.js course, i learned that there are so much more about JavaScript that I do not know yet.

One thing about self-study is you don’t know what you don’t know until you push yourself to learn something new. In this case, the Node.js course helped me realize that I still need to learn more about objects, prototypal inheritance, prototype chains and many more basic concepts of JavaScript such as functions (i.e callbacks) and scope.

The course I took on Udemy is called Learn and Understand Node.js

Below are some terminologies i learned from this course

  • Module (i.e module exports)
  • Event Emitters (i.e system events eg C++ core or custom events eg JavaScript core)
  • Event Listener
  • .call() and .apply()
  • First-class functions
  • Object.create()
  • Prototypal inheritance
  • Function constructors
  • Understand Module and Require by reference (e.g Object) or by value (Primitive data e.g numbers)
  • Scope
  • IIFE (immediately invoked function expression)
  • Json (JavaScript Object Notation)
  • babeljs.io
  • Asynchronous vs Synchronous
  • Buffer
  • Stream
  • Binary Data
  • Character Set , Character Encoding
  • ES6 Typed Arrays
  • File and fs
  • TCP/IP, Protocol, Port and Socket

A Quick Review of what I have learned so far up to Section 6

Section 1.pngSection 2.pngSection 3.pngSection 4.pngSection 5.pngSection 6.png

Day 21 -23 , (Jan 10 – 12)

Code War Challenges

  1. Insert Dash
  2. Vampire Numbers
  3. All, None, Any –   Functional Programming
  4. Triangle sum of odd numbers    *** This is a great question!
  5. Narcissistic Number
  6. Title Case
  7. Build a Calculator – Calculating averages

Two More Closure problems

  1. Closure – twice
  2. Closure – Alternates

As a self-taught novice JavaScript programmer, I found that closures, callbacks, recursions and functional programming can be confusing at times. I wonder if there is any relationship between each of them. Over the past two months, I came across these four terms occasionally at different online learning platforms. I learned closure is extensively used in Node.js while callback is frequently used in jQuery. Recursion and functional programming are two programming techniques one can use creatively when solving coding challenges.

I have not yet read anything in depth on each of the topics above except closures. However, I plan to search for more online articles as well as programming books in order to understand each and their applications in JavaScript programming.

Here I found a good article about the callback (higher-order) functions. It answered the confusion I had of callbacks, closures and functional programming.

Understand JavaScript Callback and use them

According to the article,

  • Callback functions are derived from a programming paradigm known as functional programming. At a fundamental level, functional programming specifies the use of functions as arguments.
  • One of the chief techniques in functional programming happens to be callback functions.
  •  Callbacks are closures. A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. Link about closures
  • Callbacks are used for asynchronous execution such as reading files, making HTTP requests. Callbacks are used in Event Listeners/Handlers, setTimeout and setInterval methods.

Over the past few days, I also read four articles on Coding House’s Blog  which improved my understanding of some JavaScript array methods as well as object iteration.

  1. Counting, split(), and Objects

    I learned how to create objects within an object and how to access the inner object’s properties. I also learned how to add keys and values to the object by setting up the following function:

    var superCounter = function(str) {
        var counterObj = {};
        return counterObj;
    } 
    console.log(superCounter("Count me in"))
  2. Swapping Cases, Iterators, and TernariesI learned how to use the forEach iterator and set the iterator up with an index by passing in an “i” as an argument. I also learned an alternative way to replace “if…statement” which is by using ternaries. Below is a good summary of code that I learned from this blog post:
    var swapCase = function(str) {  
    var swapArray = str.split(' ');
    swapArray.forEach(function(e, i) {
    var swapped = (e[0] === e[0].toUpperCase()) ? 0: 1;
    swapArray[i] = swapped;
    });
    return swapArray.join(' ');
    };
    console.log(swapCase("ThEre is so MuCH to DO"));

3.  Reverse() and Map()

I learned the difference between array.map() and array.forEach().
Array.map() applies a callback on all elements of an array and returns a NEW array, but forEach() applies a function once for each item in an array and doesn’t return anything.

I also learned that Javascript’s map() method creates a new array by calling a callback function on every element in the provided array. Array.map() on its own does not alter the array on which it is called but the callback function does.


    4.  Function Arguments, Object Iteration, and Some Math

I learned the iterator that work with objects. The for – in loop which allows us to access both the  objects’ keys and values easily. I also learned the JavaScript reserved word ‘arguments‘ which is an object and therefore we cannot use any Array.prototype method such as Array.sort() on ‘arguments’. To convert the ‘arguments’ into an array of numbers, for-in loop becomes very useful.  See the example below from the blog.

var median = function() {  
  var numbers = [];
  for(var key in arguments) {
    numbers.push(arguments[key]);
  }
};
console.log(median(7, 2, 3, 8, 5));  


At the end of the blog, the writer posted a challenge. Solve the problem 
if an even number of arguments is being passed into the function. 
Instead of returning 'undefined', return a correct median. 
// Below is My Solution.

 var median = function() { 
 var numbers = [];
 for(var key in arguments) {
 numbers.push(arguments[key]);
 }
 numbers = numbers.sort(function(a, b) {
 return a - b;
 });
 console.log(numbers)
 
 if((numbers.length%2)===1){
   return numbers[(numbers.length-1)/2];
 }else{
   return (numbers[(numbers.length)/2]+numbers[(numbers.length)/2-1])/2
 }
};
median(7, 2, 3, 8, 5,9); ==> return median '6'

Day 17-18 , (Jan 6-7)

On Jan 5, I did one coding problem about closures. I didn’t completely understand how Closures work despite reading this post from coderbyte. So I decided to look into more online resources that explain what JavaScript Closure is.

After some research, I found two posts on Javascriptissexy which help me better understand how closures work. Below are the links to the two articles.

Variable Scope and Hoisting

Understand JavaScript Closures with ease

I learned that closures are used extensively in Node.js which happens to be the next topic I plan on exploring this week. However, before I started learning Node.js, I decided to read some articles about how the web works. One thing about learning programming is sometimes you’re so focused on learning a language, you forget about the big picture of how the internet functions.

Below are the three blog posts I read on medium written by Preethi Kasireddy

How the Web Works: A Primer for Newcomers to Web Development

In this article, I learned about how client and server “talk” to each other and the significance of different parts of the web such as IP, DNS, Host and URL. Additionally, how the browser translate my code into human readable content via a rendering engine. Once the engine finishes parsing the information, it generates a tree structure of DOM elements. This article is really helpful and I got a better understanding of how my code is processed behind the scene.

How the Web Works Part II: Client-Server Model & the Structure of a Web Application

In this article, I learned about how port numbers allow computers to process multiple applications at the same time as well as the relationship between the database and the server. I also learned some new terms such as load balancer which acts as a traffic cop that routes client requests across the servers. Other computer concepts such as algorithms which enable the load balancer to know which server to send traffic to. The importance of services as well as content delivery networks. I am sure after reading these 4 articles posted by Preethi Kasireddy, it will only help me understand Node.js better when I move on to the Node.js courses on TreeHouse this week or the Udemy developer course Section 6- PHP. So far, I have been only using JavaScript on the front-end. I am looking forward to learning more about Node.js and building a simple web application using Node.js.

How the Web Works Part III: HTTP & REST

This article helps me understand how HTTP facilitates the flow of information in web applications. I learned about the structure of HTTP and the common HTTP methods such as GET,POST,PUT and DELETE. Additionally, the term REST which I have heard multiple times in the past.  I learned the relationship between REST and HTTP. When designing an application, REST gives you a set of constraints or guidelines to follow and hence makes the system more scalable, simple and performant.

Day 14 – 16 , (Jan 3 – 5)

I took a break from Udemy courses and continued to work on various codewar coding challenges.

  1. +1 Array   My Solution
  2. Sum of numerous arguments   My Solution
  3. Get ASCII value of character   My Solution
  4. Lost Numbers   My Solution
  5. Declare a new method on array prototype   My Solution

For Question 5, I learned how to use ‘this’ to assign values within prototype functions and how to declare a new method on array prototype.

var arr = [1,2,3,4,5]  // instance of an array
var obj = {}

arr.forEach // => forEach is a function because arr is an array
obj.forEach // => not a function because objects dont have forEach on their prototype

Among the five questions above, question 1, +1 Array took me the longest time to solve the problem. I started doing this problem on Dec 27th but I stopped because there were more edge cases than I expected. I wanted to pass every single case instead of passing this challenge with a few cases unsolved. So I came back to this question on Jan 5 after taking the Udemy course and building some projects. Some of the edge cases include, long array which has limited 15 digits and how to turn 999 into 1000.

At the end of the day, I tried to learn a new concept that I heard a while back when considering to apply for some bootcamps on the west.

The JavaScript concept of Closure, I found some closure examples on coderbyte – 3 common JavaScript closure questions.

Here is the link to my Solution for coderbyte closure question 2.

var addSix = createBase(6);
addSix(10); // returns 16
addSix(21); // returns 27

Day 12 – First Day in 2016

Today, I continued the Udemy course – Section 5 Twitter Bootstrap.

I learned the following Bootstrap components and JavaScript.

Bootstrap components

  • Grid System
  • Navigation Bars
  • Forms and Tables
  • Glyphicons
  • Button Groups
  • Input Groups
  • Badge

Bootstrap JavaScript

  • Alert
  • Modal
  • Scrollspy

By the end of Jan 2. I was able to finish building my App Landing Page using Bootstrap. Here is a link to my project.