Product, Result of Idea Collision

When I am asked about the project complete time, I also feel a little bit curious why the stock alert project, simple project, can be so long. So I count the past recorded task time in my google Doc. The "study" + "design" is 70%+, the coding is only about 27%. While my initial estimate on the project development is 3 months, 90 days. Now the actual coding quite match it.  The delay is mainly from "Study".

	Admin	Coding	Deployment	Design	Study	Testing	Grand Total
0	1	75	1	42	151	7	277
		27.08%		15.16%	54.51%

Study! Yes, study, I study so many things in order to address the technical issues. The whole development process to me is more like a study process. I still can remember how I dozed away when watching Google cloud tutorial video. :) 

The following is the things for study. I know, the diagram is quite complex, which also surprise me. Initially I just want to come out a simple list. But its complexity pass the message, this is not a easy journey.

As my idol words, product is a collision of ideas. It starts from a unpolished idea, just like a open a window, then, you enter another new world, which is full of windows. This believing also imply how important to give the staff room for "mistakes". Because diamond is just a rock without polishing.

Wonderful article on JS Delete

http://perfectionkills.com/understanding-delete/

Here’s a short summary of how deletion works in Javascript:

• Variables and function declarations are properties of either Activation or Global objects.
• Properties have attributes, one of which — DontDelete — is responsible for whether a property can be deleted.
• Variable and function declarations in Global and Function code always create properties with DontDelete.
• Function arguments are also properties of Activation object and are created with DontDelete.
• Variable and function declarations in Eval code always create properties without DontDelete.
• New properties are always created with empty attributes (and so without DontDelete).
• Host objects are allowed to react to deletion however they want.

Analysis vs. Design: What’s the Difference?

http://www.omg.org/news/meetings/workshops/presentations/eai_2001/tutorial_monday/tockey_tutorial/2-Analysis_vs_Design.pdf

Requirements 

• Unambiguous 
• Interpretable in only one way 
• Testable 
• Compliance (or, non-compliance) can be clearly demonstrated
• Binding 
• The customer is willing to pay for it and is unwilling to not have it 

Every requirement that is still necessary in spite of “perfect technology” is an essential requirement.

Requirements about speed, cost, and capacity go into the design bucket

Requirements about reliability (MTBF, MTTR) go into the design bucket

Requirements about I/O mechanisms and presentations go into the design bucket

Requirements about computer languages go into the design bucket

Requirements about archiving go into the design bucket

Requirements about the customer's business policy / business process go into the essential bucket

UML for Analysis

UML for Design

Benefits

Reduce apparent complexity: one large problem becomes two smaller ones 

• Understand the customer’s business policy / business process 
• Figure out how to automate that business policy / process with the available technology 

Isolate areas of expertise

Apply the principles of coupling and cohesion at the highest level of the software architecture 

• More robust, less fragile systems 
• Enable separate evolution of the business policy / business process and the implementation technology

Responsive Web Design - Study Memo

Articles

http://alistapart.com/article/responsive-web-design
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
http://alistapart.com/article/fluidgrids
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

W3C

http://www.w3.org/TR/css3-mediaqueries/

Recommended Media Screen Width

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

Use EM, relative unit, instead of PIXCEL for the font size. 

Use fluid grid for responsive website

Tools

css3-mediaqueries-js 

https://code.google.com/p/css3-mediaqueries-js/