Xing XU


Blog: How to Use JavaScript for Games and Web Application


Week12, 13: JavaScript Interview Questions

I got to know which is a tool to help making effficient JavaScript code. From Quora: Practice is the only thing that will make you a good front end guy. The one specific reason being that the number of tools a good UX guy needs is way more than any other domain. First of all you need to learn 3 languages *very well* for any non trivial web app - HTML5, CSS3, JavaScript. For a lot of developers (including me), now its haml, CoffeeScript and sass/scss/less/stylus. There is almost no way of code reuse in HTML or CSS and this makes haml and scss very important. JavaScript is a brilliant language that was monkey patched a 1000 times more than any other language. Because once a feature shipped, you cant take it out of the web. CoffeeScript aims to take a lot of bad parts out of it. Learning good JavaScript is going to take a lot of time. If you still have body onload="init()", you got it completely wrong. Another thing about JavaScript is the number of libraries and frameworks available. There is a new JavaScript library everyday on the front page of hackernews and keeping track of all of them is not a trivial task. There are tons of big-no's in web. 'document.write', scripts in the head, not using sprites, minifications, CDNs etc are considered really bad. You learn all of them by experience, not by reading a few blogs. I'd say - 1. Learn HTML5, CSS3, JavaScript *properly* - No w3schools, check W3Fools - A W3Schools Intervention - Mozilla developer wiki is the best resource online AFAIK for learning HTML - A resource for open web HTML5 developers is epic - JavaScript the good parts is great book for JavaScript - Check blogs by the "popular web guys" - Paul Irish, Addy Osmani, Nicolas Zakas, John Resig etc. They are often very informative. Addy's posts on JavaScript are often mind blowing. 2. Learn a MVC based backend framework - Rails/Python Flask 3. Learn a MVC based fontend framework - Backbone.js 4. Learn about build tools - grunt.js, yeoman etc 5. Learn to use The web's most popular front-end template 6. Never ever write html/css after you learn it. Go for haml and sass/scss/less/stylus 7. Learn about SVG and a drawing library. d3.js, Raphael.js 8. Pick a static site generator - jekyll A few frameworks got so popular that you cant live on the web w/o knowing them anymore. 1. jQuery, prototype, YUI - YUI might teach you a bit of serious JavaScript compared to jQuery 2. Twitter bootstrap 3. Backbone.js + underscore.js 4. Angular.js Not really on the point but important 1. Learn git - Its pretty useful to track your code and revert back when something goes bad. 2. Pick a decent editor - I'm not advocating for emacs or vim, but not gedit/notepad. 3. Use linux/mac. Command line is not a first class citizen on windows.

Week9: Looking into Application

I decomposed the functions in the drawing tool "Paint" in Windows. Functions in Paint: Home Clipboard Paste Paste Paste from Cut Copy Image Select Selection shape Rectanglular selection Free-form selection Selection options Select all Invert selection Delete Transparent selection Corp Resize: Pop up window Rotate Rotate right 90 Rotate right 180 Rotate left 90 Rotate left 180 Tools Pencil Fill with color Text Eraser Color picker Magnifier Brushes Shapes Shapes Outline Fill Size Colors Color1 Color2 Colors Edit colors: popup windows View Zoom Zoom in Zoom out 100% Show or hide Rulers Gridlines Status bar Display Fullscreen Thumbnail

Week8:Presentation and

I did my presentatio on Tuesday. People is saying that I need to focus on the prototype.
How the HTML Parser Works: Bytes->Characters->Tokens->Nodes->DOM. A high level language is ideally an abstraction independent of particular implementations.

I randomly got into the article about the AI in the game, PacMan. I found out that computer games tend to be very male-centered even date back to 30 years ago. And if the game could be okay for female to play. The game could be really popular. “All the computer games available at the time were of the violent type - war games and space invader types. There were no games that everyone could enjoy, and especially none for women. I wanted to come up with a “comical” game women could enjoy.” - Toru Iwatani, Pac-Man creator For the game PacMan, it is the first time that people seperate their role differently. There are a game designer, a software programmer, a artist, and a arcade engineer in the team for PacMan. I am thinking whenever the work are sperated differently. By doing this, the scale of the work could be bigger, the quality could be better(?). I played soccer today with the EA people. It was such a mess in a way that everybody just running around the court back and forth. People get tired really quickly and it is hard to process an organized attack or defense. So organization and the seperation of work is extremely important.

Week7: Keep reading the book and prepare for presentation

(updated 02/28/2013) Although, there are many browsers and different platforms. But you have to design the app based on the user's preference.
the core functionality provided by a game engine includes rendering, physics, sound,scripting, animation, AI, networking, streaming, memory management, threading,......
Now here from Wikipedia about Game Engine

Before game engines, games were typically written as singular entities: a game for the Atari 2600, for example, had to be designed from the bottom up to make optimal use of the display hardware—this core display routine is today called the kernel by retro developers. Other platforms had more leeway, but even when the display was not a concern, memory constraints usually sabotaged attempts to create the data-heavy design that an engine needs. Even on more accommodating platforms, very little could be reused between games. The rapid advance of arcade hardware—which was the leading edge of the market at the time—meant that most of the code would have to be thrown out afterwards anyway, as later generations of games would use completely different game designs that took advantage of extra resources. Thus most game designs through the 1980s were designed through a hard-coded ruleset with a small number of level and graphics data. Since the golden age of arcade video games, it became common for video game companies to develop in-house game engines for use with first-party software.

Week 6: Focus on side project

(updated 02/19/2013) The Web App's reading from last week is only 60%finished. I will catch up this week and work on the game for the Mozilla competition. THe deadline for that is this Sunday. So the schedule for next week became reading as far as it goes and preparing for making a game engine. Also, me and Shaveen will be at the WebGL meetup event on Tuesday! Exciting!!

(updated 02/27/2013) I went to the WebGL meetup in the SONY office, San Francisco. I met Tony and other bunch of people who are interested in WebGL. The European Goo Engine team showed some of the games that they made with that Engine. They are good games but not that impressive to me actually. At the end of the event, we all said one or two things about how to improve the engine. and several people mentioned that Engine is important and the tools is very very crucial to the popularity of a game engine and people saying that there should be one iconic WebGL game in the market and hit it really good. I am thinking maybe for a lot the good games they are either one deep experience designed just for that technology or a deep desgin in a specific genre.

Week5 Objects, Classes and MVC

(02/11/2013) I am jumping around with the book "Building iPhone Apps". The explanation of the comparisiton is qutie interesting. The biggest three difference I see are hardware access, payment, and development cycle.

(02/12/2013) After finish reading the first 6 chapters of the Guide and skim through chapter 7,8, I read 25 pages of the Good Part. It seems very easy to read and many people recommend this book to me. I will read this for this week as accompany with the other books. It is interesting that the writer finish the good part of JS in precisely 100 pages. My strategy will be just read through this 100 pages. The understanding of Inheritance is a great lesson for me. I see this as the starting point of learning MVC and Classes. Meanwhile, I should have a faster pace on the schedule. Pages need to finish= Good Part(75p)+Web App(70p)=. I will be on the plane on Thursday for 11 hours. So if I will not be sleeping, I will try to finish the iOS JS book on the plane(140+p). Here I would also add some of the script I got when meeting with the WebGL pioneer Tony. There are several game engines: Gladuis, KickJS, SkyBox, PlayCannvas, Goo,. Blueberry is hitting big on HTML5. I also had an idea of making API for 3d Modler so they could easily show their model on their website. He mentioned Turbosquid. I will look it up later.

I finished skimming the Good Parts on the plane back to SF. The book is very helpful and I picked up a lot of good software development pattern. I decided to read it again or the script.

Script from the Good Parts:

(updated 02/19/2013)Good parts:
The || operator can be used to fill in default values:
var middle = stooge["middle-name"] || "(none)";
var status = flight.status || "unknown";
Attempting to retrieve values from undefined will throw a TypeError exception. This can be guarded against with the && operator: // undefined // throw "TypeError" && // undefined
Objects are passed around by reference. They are never copied:
The other approach is to use the hasOwnProperty method, which returns true if the object has a particular property. The hasOwnProperty method does not look at the prototype chain:
flight.hasOwnProperty('number') // true
flight.hasOwnProperty('constructor') // false
One way to minimize the use of global variables is to create a single global variable for your application:
var MYAPP = {};
A better approach is to make an asynchronous request, providing a callback function that will be invoked when the server’s response is received.
A module is a function or object
that presents an interface but that hides its state and implementation.
Recursive functions can be very effective in manipulating tree structures such as the browser’s Document Object Model (DOM). Scope in a programming language controls the visibility and lifetimes of variables and parameters. This is an important service to the programmer because it reduces naming collisions and provides automatic memory management: JavaScript does have function scope. it is best to declare all of the variables used in a function at the top of the function body. Functions can use objects to remember the results of previous operations, making it possible to avoid unnecessary work. This optimization is called memoization. JavaScript’s objects and arrays are very convenient for this.
The long-term value of software to an organization is in direct proportion to the quality of the codebase. Over its lifetime, a program will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and charac- teristics, it is less likely to break when it is modified in the never-too-distant future. Moore's law does not apply for battery so performance is still important. and We value simplicity.

Week4 Reading the Core of JavaScript

(update 02/05/2013, 02/09)

Here is an 63 minute JavaScript talk in GoogleI/O 2011.

Function is Object, even Array.

In Array, it transforms the index to strings and access the element value. Function is the only way to create new scope not while or if. I also found out this link Mozila JS guide It quite goes with the same flow like the Definitive Guide. Memory Management: An object is considered garbage-collectable if there is zero reference pointing at this object. Limitation : cycles
Mark-and-sweep algorithm: This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".

Detect the features maybe easlier thatn detect the browser. Mondernizer.Rought figure: ~1ms per 1KB of JS. A closure is created when the inner function is somehow made available to any scope outside the outer function. Later today, I found out that the Chrome Advocate, Colt McAnlis is teaching a class on Udacity for HTML5. I check it out. It is short and neat and I may follow back to this site later.

I found CodeAcademy and they are teaching programming in a very interactive way. I tried their JS session. I love the instant feedback of those puzzles but the content is just too easy for me. THe OutfitSwap is on the Mozilla Gameon page and I talked to the other ETC people and Shaveen specifically for making a game for the competition. I watched another talk video "Building a JavaScript-Based Game Engine for the Web" in year 2010, June.

I talked with Shaveen, Nathan, and Annabel about the game desgin idea and the technology we may use. Later on, inspired by Tony's talk, we will make a small 3d avatar in the webpage and let it hang around in the webpage.

Week3 the Data Types of JavaScript

(updated 01/30/2013)

the plan of reading

I skimmed the structure of these two books. And I decided to read "the Definitive Guide"'s first 9 chapters(core JavaScript) first and then read the first 5 chapters in "the Web Application"(MVC). This may give the learning a better flow. There will be ((9-2)+5)=12 chapters and (251+72)=323 pages to finish. It will be at least 40% of the total volume of these 2 books.
So I will try to read 4 chapters for each week. By the end of week 5, I will finish this part of the reading.

I talked to one of the EA stuffs today about my interest of learning JavaScript. And I asked specifically about the 3 potential ideas for my side proejct and how should I improve. He mentioned several tools that I may have to take a look at. Fantom, Closure, RequireJS, and V8 engine. He seems to saying that work on the game engine may be a good way to go for practice.

Week2 the Books and 3 Potential Ideas for the Side Project

(updated 01/27/2013)

2 books

I read the table of contents of the book "JavaScript Definitive Guide". The books has two major parts one the the core usage of JavaScript and the other are the client-side usage of JavaScript which seems both simple and throughout. And I read table of contents of several other JavaScript and HTML5 related books. And the Oreilly version of "JavaScript for Web Application" seems to have the best fit for my learning interest as the book companying "The Definitive Guide". This books talks about the concept of MVC and classes at the beginning and give the explanation of the use of Backbone Library. The other books that I have will still be part of the reference for the learning process. For "the Definitive Guide" I borrowed the 5th edition of the book(published 2006) from the ETC SV library and I may need the 6th edition(published 2011) since JavaScript is changing so fast recently and the 6th edition has the explanation of HTML5.

3 potential ideas

I talked to some ETC alumni the other day, and they are recommending that making a simple but whole game engine will benefit the engineer a lot. And I am thinking about making a 3D game engine for JavaScript Browser . And the other is a JavaScript interpreter or a basic functioning browser . The third potential idea will be participating in an open source project on GitHub . However, I have no clue by now which project I should work for. I may have to ask some JS(JavaScript) Engineers for this. So the final decision of the idea depends on the workload, how it could be showed and how much I could learn. And I will decide soon next week.

reading thoughts and extract

"JavaScript is the programming language of the Web. The overwhelming majority of modern websites use JavaScript, and all modern web browsers—on desktops, game consoles, tablets, and smart phones—include JavaScript interpreters, making Java- Script the most ubiquitous programming language in history. JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behavior of web pages. This book will help you master the language."

I became interested with the saying of "major of the modern browsers". Then, I Googled to see if there is any other browsers that does not support JavaScript.

And I found out Lynx by Wikipedia"Lynx is a highly configurable text-based web browser for use on cursor-addressable character cell terminals.[1][2] It is the oldest web browser currently in general use and development,[3] having started in 1992 and as of 2013, 21 years later, still in use and development."

File:Lynx vs. Firefox rendering.png

image: Lynx vs. Firefox rendering.png


JavaScript is case-sensitive. So "While" could not be functioning. However, HTML(not XHTML) is case insensitive. JavaScript is using Unicode. A literal is a data value that appears directly in a program.

Optional Semicolons:there are two styles. Also, there some programmers like to use defensive semicolon(semicolon before each statement to make sure that the statement is continuous.) For the optional semi-colon, there are two exception one is the return, break and continue the other is ++, --.

Week1 Blog Description and Purpose

(updated 01/27/2013) Selected topic How to Use JavaScript for Games and Web Application Reason for selecting the topic I always like to make web application and online service. Recently, I like the HTML5 idea very much. And using HTML5 comes along with the use of JavaScript. The popularity of the flexible JavaScript is very new. But I have never got a deep look into JavaScript and how to program it in a structural way. And I would love to find a job related to that when I graduate. I was very often to be bad at technical interviews and I think the ability I showed during the event is not equal to what I actually could accomplish. So I have to pick up some algorithm concepts to be better at interviews and it could help me get a job. Research materials There are so many online materials for JavaScript and HTML5. Since JavaScript code is openly exposed in the browser, there are many open libraries online to look into. Here are some examples:

Google Chrome Experiments - WebGL Experiments

HTML5 Rocks(a good site for HTML5 lessons and resources):

Microsoft showcase site for HTML(Windows 8 development got a strong blend with HTML5):

Mozilla's HTML5 page:

Apple's page of HTML5 and CSS3:

Facebook's HTML5 pages:

Adobe's HTML5 page:

Html5 Canvas Demo:

Sinuous - HTML5 game

Arena5 - HTML5 game

3Bored - HTML5 game

Sandtrap - HTML5 game

I could ask the EA stuff for advice and experience. And to learn the framework Backbone.js will potentially help me too. Books that I have already: Pro HTML5 and CSS3 Design Patterns, Learning JavaScript Design Patterns by Addy Osmani, JavaScript Web Application by Alex MacCaw , Metrics of success Does the knowledge that I learn helped me find a job, To be an expert in JavaScript for Web Development (Best among the students), Could end up by making a small and nice side project (JavaScript engine), Introduction to my blog
Milestones and the final goal Time What to do Specific outcome
Week2 Skim all the books and resources that I could possibly get, thinking about the side project ideas 3 side project ideas, choose 2 books to read
Week3, 4, 5 Read and practice the content of 2 books, meanwhile look online materials for support, start working on the side project and set the schedule for the side project, meanwhile take reading notes. Schedule for the side project,
Week6, 7 Read and practice the content of 2 books, meanwhile look online materials for support, and maybe hold a presentation within EA and share the things I learnt and ask the EA folk for thoughts, by the end of week 7, there should be a working prototype. Finish one book, a working prototype
Week8, 9, 10 Keep reading the book, ask the people around for feedback and suggestion and polish the prototype and add new features, finish another book. Finish the other book, feedback for the prototype, mid-term report
Week11, 12, 13 Prepare for presentation, keep working on the project Finish the project
Week14, 15 Write a final report and clean up the blog