Technical Blog

Javascript: setTimeout() vs. window.requestAnimationframe()

Leave a comment

Hello Newbies,

As JS evolves so quick, I always pay highly attention to the press’ year whenever I need to buy a JavaScript book.

Before 2011, most programmers use setTimeout( ) to make animation, because back then, window.requestAnimationframe() was not cross browser supported yet. After 2011, you could see people only use window.requestAnimationframe() to make animation. But I wonder, why do we use window.requestAnimationframe() with several other lines to make sure all browsers can perform correctly, rather than a simple line with setTimeout(). Today, I found the answer from Professional JS for Web Developers, on page 253.

” True intervals are rarely used in production environment because the time between the end of one interval and the beginning of the next is not necessarily guaranteed, and some intervals may be skipped. Using timeouts ensures that can’t happen. Generally speaking, it’s best to avoid intervals. “

Technical Blog

Exercises before Udacity’s Arcade Game Project

Leave a comment

My goal for this week is to tackle down Udacity’s Arcade Game Project. I’ve been reading a lot of chapters and watching a lot of videos regards to Object Oriented Programming, JavaScript. However, these are way too passive. Before I get into LocalStorage etc. advanced concepts, I need to finish several mini-projects which are mainly focusing on applying OOP.

For now, my Dynamic Quiz is functional as expected. However, it is not included much OOP. The missing features of my Dynamic Quiz is localStorage and layout. So, I am gonna take a break from there at this moment. Because I feel that I lack in OOP skill.

When I opened Arcade Game original files from Udacity, I really have no idea where to start or how to read these files. I read it carefully one time. Then, I began to know what are the functions doing there. However, I still have no idea what I should create. Fortunately, I found a series of tutorials from Youtube that was related to this project. Even I finished reading the videos, I am still stuck to start.

I remember that there is a similar project from Eloquent JavaScript, so I decided to do EJ’s exercises before I start Udacity’s Arcade Game.

Here is what I’ve learned from EJ’s exercises.

Chapter 5 Higher-Order Function.

Array.prototype.reduce()

Example: Sum up all values within an array

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6

Example: Flatten an array of arrays

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

Array.prototype.concat()

var alpha = ['a', 'b', 'c'],
    numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3]
Technical Blog

Constructors as Functions

3 Comments

Reading Professional JavaScript for Web Developers, in Chapter 6, the author was talking about the downside of Constructors is that methods are created once for each instance. So, person1 and person2 have a method called sayName(), but those methods are not the same instance of Function. So every time a function is defined, it’s actually an object being instantiated. Logically, the constructor actually looks like this:

function Personc(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = new Function(“alert(this.name)”);
}

The mechanics of creating a new instance of Function remain the same. Thus,

alert(person1.sayName == person2.sayName); //false   (p.183)

It’s possible to work around this limitation by moving the function definition outside of the constructor,

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}

function sayName() {
alert(this.name);
}

**** Inside the constructor, the sayName property is set equal to the global sayName() function, since the sayName property now contains just a pointer to a function, both person1 and person2 end up sharing the sayName() function that is defined in the global scope. This solves the problem of having duplicate functions that do the same thing but also creates some clutter in the global scope by introducing a function that can realistically be used only in relation to an object. (p.184)

Reflection

Imagine that you are creating thousands of instances of Person, it saves you thousands of “instances” in your program.

The Prototype Pattern actually wipe out the downside of the Constructor Pattern.

For example,

function Person() {

}
Person.prototype.name = name;
Person.prototype.age = age;
Person.prototype.job = job;
Person.prototype.sayName = function() {
alert(this.name);
};

person1 and person2 are both accessing the same set of properties and the sameName () function.

Cultural Blog, Pair Programing

Women Who Code San Francisco Meet up on Dec 3rd, @ Zoosk

Leave a comment

Today, I attended first meet up in my life. Met with Kristin, UX designer @ Zoosk. I don’t know about Zoosk that much, but I believe it must be a fun place to work at.

Today, we got a guest speaker from CDC/FDA, Steven Meloan, who focus on what data that CDC can provide for you.

Presentation: Steven Meloan will explore open health data at the federal, state, and local levels—including syndicated web content, downloadable datasets, and API-accessible information.

After that, we could ask HTML/CSS/JS related questions and try to fix it.

It’s a fun experience. I will join next week if my schedule meets.

Well, I will focus on Technical Blog more now.

Uncategorized

Journey of DevBootcamp

Leave a comment

Well, when I was freshman in college, I began to be aware of building websites, because I needed a website for my e-commerce business back then. I guess that’s where I started getting to know about WordPress, CMS, etc. There were so much going on during my college life, so let me skip thousands of words here.

To be honest, I knew I wouldn’t be able to get a great job right after I graduated. Why? Ask yourself? How much capital can you generate for a business? What can you provide for a company? Besides from “detail-oriented, confident, blah blah blah,” these kind of vague words, I guess people who don’t graduate from top tier schools cannot think of anything. However, I had to get a job after I graduated.

Back then, I thought that I needed to get a job first, because if I really want to start my business, I need capital. Where will my first capital come from? My job.

I got a job where its culture that I didn’t fit into, where I didn’t see any career advancement I can make. Thus, I made courage to quit my job in October. Else, I would never get out from the comfort zone.

After resigning my job, the days were a little bit stressful but I enjoyed it a lot. Why it would be a little bit stressful? I tried to apply for several bootcamps. However, you wouldn’t be able to join them until four months later. That was a little bit crazy for me to do it. I first applied for a JS bootcamp, because JS was the language that I had some experience. Before applying for the JS bootcamp, I went over a lot of exercises that I never done before. In the past, because there was no motivation. I learned coding very passively. I watched a lot of online tutorials in the past five years, but I barely wrote coding by myself, except HTML&CSS. That’s why I wasted five years of time to learn coding. So then, I took a week to do JS practices. I got accepted by the JS bootcamp, but I couldn’t go to school until February, which was more than three months away.

I also did research for other bootcamps. However, a lot of them were with vague curriculum. App academy and DBC are with highest reputation from what I researched. Thus, I began to study Ruby in order to pass the interviews. It was a shame that I failed App academy’s last round of interviews. I was so desperate on that day. Then, I flipped over my email, I spotted DBC contacted me for setting up an interview in mid of October, which was one month ago. Since I have no further option, I set up DBC’s interview the next day at 6AM. yes, it was 6AM, because I am living in West Coast.

There I started the journey of DBC. I got accepted in the cohort on the date that which was already started two days. But fortunately, I made a quick decision. Because I noticed that three days after I joined the program, the next cohort was full as well. How scary that was!!! Because if I were unable to join the recent two cohorts, I will not be able to go to school until March or April!!! My parents must complain me not going to school or not going to work!!! Anyways, I made it!

Even though I didn’t attend App Academy, I believe most of the stuff are the same. I did all the exercises that AA required, so I don’t feel any challenges while I am doing DBC’s first phase. The difference between AA and DBC is that AA required you to prepare and learn all the basics by yourself. Yet DBC will accept you if you have positive attitude, and let you learn all the basics through Phrase 0.

Besides from doing pair programing and GPS with classmates every week, I just need around 3 ~ 5 hours to finish my homework @ DBC.

I don’t want to just pull away my JS knowledge, so most of my time is actually learning Javascript by myself. I hope to learn most JS before DBC’s phrase 1 start, which will be Feb 2nd, 2015. I followed JavascriptIsSexy’s road map to learn Javascript properly. Meanwhile, I subscribed Code School as a supplement. Tomorrow, I will attend my first meetup @ Woman Who Code .

Well, I guess I need to stop here. Will catch up with you guys soon.

Best,
Yumiko