Alpha camp learning history @alphacampjohn - Tumblr Blog

03/09 alpha camp note

STLC : software testing life cycletesting : all level should apply

Questions 1. What’s different between waterfall and prototyping style ? prototype : fast, close to customers, fundraising, fail to execute in organize no big pic ? waterfall : stage by stage, each stage is perfect then go to next stage. already have big pics

Special note:

作為一個leader, 重要的是要讓人”Trust”, be energetic person, be passion on what you are doing.

Different between “project manager” and “product manager” —> product manager has the ability to create spec while project manager only needs to control and monitor the schedule

Web & app design : layout, picture —> to catch eyeball

#Jack of all trades : the man who is generalize with skills but not a specialist

Learn how to find the resource on internet

Why app/web

Design methodology :

Design concepts

Product require document

User story/ user cases :

Storyboard : the rough idea of your webpage design or app design

wireframe : almost final layout for post designer to finish up the design (art design)

Web is used for cross platforms

APP , could have the best UX ( only for the specific OS ), no need to go on internet ( for some apps )

Waterfall : easy for stage/milestone checking but is high risk in early stage, already has big picture then use waterfall methodology !?

Incremental : cut the whole waterfall progress into many waterfall stages

pros : can have the systematic way to create the new features than prototype and have better flexibility to add features than traditional waterfall method

cons : not easy to cut the stage , maybe hard to integrate all the progress

modularity : always make the design to module ( info. hiding )

compatibility : backward compatible

extensibility (flexibility)

fault-tolerance ( robustness )

Maintainability

reliability

security

like customized release note

Story : 抽象的idea from customers,

Cases : 將Story(抽象的idea)轉成visual的features

非常強調口頭上的溝通

對每個人都容易了解

大小剛好適合計畫

適合 iterative 開發

鼓勵延後細節

鼓勵人人參與的設計

#alpha camp4 #web_ios

3/6 Study note part1

Inline-block: take inline elements as a whole block

#css #layout

3/5 Study note part1

CSS reset : in case to remove the default layout style of the browser

Two way to reset css ( or more ) :

go http://www.meyerweb.com/eric/tools/css/reset/ —> reset code there (the code reset all the elements to none or zero)

Use normalize.css sheet -> go to http://necolas.github.io/normalize.css/

Block layout : means each block occupy some lines and with specified style

Body container : to wrapper a part of content to keep it from too wide or too narrow, and center its position

ctrl + shift + w + select region —> wrapper all the select region ( default is <p></p> )

set “display : inline” could prevent element to occupy a whole line and then can put another element aside.

#css #layout

3/4 Study note part4

<select> - The select element renders a drop-down menu that contains selectable options. This type of form control is ideal for scenarios where the user must choose one option from a preset list of 5 or more choices.

<option> - The option element represents one of the choices that a user can choose in a select menu. It should always be nested inside of a select element.

<optgroup> - The optgroup element wraps one or more option elements and helps to create logical groups. The label attribute specifies the text that the optgroup should display above the nested options.

Radio button - compare to select menu, radio button is used for less option

.with same name attribute, the radio button can be exclusive

selected

checkbox - use to select multiple option

#html #syntax #forms

3/4 Study note part3

<form> - The form element wraps a section of the document that contains form controls. The action attribute specifies the web address of a program that processes the information submitted via the form. The method attribute specifies the HTTP method that the browser should use to submit the form, such as POST or GET. Forms cannot be nested inside one another.

<input> - The input element is used to create many different types of form controls. The type attribute specifies what kind of form control should be rendered, such as text, email, passwords, and more. The name attribute is submitted with form data so that server-side code can parse the information.

<textarea> - The textarea element accepts multiple lines of text from the user. Most browsers will render the textarea element with a widget to allow for resizing the editing area.

<button> - Just as the name implies, the button element will render a clickable button. The type attribute specifies whether the button should submit the form data, reset the form, or have no default behavior for use with JavaScript

<label> - The label element helps to organize forms by assigning some helpful text to a form control. This text helps the user to understand what kind of data they should add to each form field.

<label for=“aa”></label> : the aa is matched for input “id”

<fieldset> - The fieldset element wraps multiple form elements into common groups. This can help organize a form and make it easier to understand for users.

<legend> - The legend element is similar to the label element, but instead of labeling a form control, it labels a fieldset. Adding a legend to a fieldset can provide some helpful context for users that are filling out a form.

#html #syntax #forms

3/4 Study note part2

<table> - The table element represents data in a series of rows and columns. Tables should only be used for displaying tabular data, and never for page layout.

<tr> - The table row element defines a row of cells in a table. Table rows can be filled with table cells and table header cells.

<td> - The table cell element contains data and represents a single table cell. Each table cell should be inside a table row.

<th> - The table header cell helps label a group of cells in either a column or a row

<thead> - The table head element (not to be confused with the table header cell element) defines a set of rows that make up the header of a table.

<tbody> - The table body element defines one or more rows that make up the primary contents (or "body") of a table.

<tfoot> - The table foot element contains a summary of the table. This might be totals for columns of numerical data or meta information about the source of data.

colspan —> to span a element to be the same length as num. you want

<caption> - The caption element represents the title of the table.

#html #table #syntax

3/4 Study note part1

MiniTest is an automated testing library that comes with Ruby

use assert, assert_equal, assert_in_delta, assert_match (for string)

Minitest::Spec The Spec library in MiniTest allows one to use a different syntax to write automated tests

TTD (test driven development) : base on the test target to write a program, to reduce the bugs inside the program

#ruby #test

3/3 Study note part 7

Ruby Standard Library

YAML stands for "Yet Another Markup Language." YAML is a plain text and human readable format that is frequently used for configuration files

ERB stands for "Embedded Ruby" and is a templating system built in Ruby. ERB allows you to create templates and has a special syntax for embedding Ruby variables and code.

FileUtils module allows you to interact with the file system in your Ruby programs. The FileUtils video walks through some common uses of the FileUtils module

__FILE__ : stands fot the directory name of the current file

.expand_path() : show the absolute path of argument

Dir.entries() : show all the files under the argument path

FileUtils.mkdir_p() : mkdir under the path of argument

FileUtils.touch ‘’ : touch a file ‘'

Logger class provides a built in way of logging at different levels automatically

URI open(“http://google.com”).read will show the html content of google homepage

benchmark Benchmarking is the process of measuring how long certain parts of programs take to run. The Benchmark module provides a common starting point for benchmarking your programs

optparse It is common to allow command line programs to accept options, or flags. The OptionParser class provides a common way of parsing command line arguments and displaying help text

observable The Observable module allows you to easily implement the observer pattern in your classes. The observer pattern specifies that an object maintains a list of its dependents, called observers, and notifies them automatically of any state changes

#ruby #STD LIB

3/3 Study note part 6

Symbol as a key in hash would not be clone even the hash is copied

require is the keyword for ruby to use or load the build-in function

strftime is used to formet the date

The Enumerable module can be included in your classes to easily give you the ability to sort, traverse, and search your classes

Usage of IO module

implement in File class

open a file

File.open(“./xxx.txt”, “w+”)

show the content in file

puts IO.readlines(“xx.txt”)

Struct

Structs are a quick way to bundle attributes together without having to write your own custom class

ex. Class = Struct.new(:bbb, :ccc) —> create a class name Class with bbb and ccc instance variable

#ruby #syntax #date_time #symbol #enumerable #module #io #struct

3/3 Study note part6

#ruby #syntax

3/3 Study note part5

Proc instantly returns from the block and breaks any further operation inside method

Lambda on the other hand returns from block and goes back to the caller (so returns back to the method).

Method's always return the last line of code.

Module

module Xx —> the first letter of module must be upcase

yy = zzz

end

Xx::yy —> print zzz

:: means inside the module xx to see what is yy

Extend (makes methods available to the class)

extend can allow class to access with other module that does not exist in class

ex:

class Hello

def initialize(name)

@name = name

end

module SayHello

def say_hello

puts “Hello #{@name}”

end

hello = Hello.new(“john”)

hello.extend SayHello

hello.say_hello

—> Hello john ( if no extend, it will show error that there is not defined for SayHello

Include (makes methods available to class instances)

define module before class, then we can “include” module

module SayHello

…

end

class Hello

include SayHello

(can also extend SayHello here)

…

...

#ruby #syntax #proc #lambda #module

3/3 Study note part4

Procs and Lambdas

procs and lambdas must have block after called

ex. xx = Proc.new {} or xx = proc {} (lowercase)

my_lambda = lambda { } or my_lambda = -> { }

call proc —> .call

xx.call

Will return the action inside the block {}

proc and lambda can use call while function can not

def xx(kk)

yy = xx(kk)

end

yy —> call yy or function xx(kk)

my_proc = proc { |aa| dd }

my_proc.call —> call proc but not sending anything

my_proc.call(“jason”) —> call proc and send jason to |aa|

#ruby #syntax #proc #lambda

3/3 Study note 3

Yield

pass the number(variable) into the block

ex program

def show_numbers()

i = 0

while i < 10

yield i —> passing i to block variable “number"

i += 1

end

show_numbers do |number|

puts “The current number is #{number}.”

end

—> The current number is 0

The current number is 1

…

The current number is 9

#ruby #syntax #block

3/3 Study note part2

Block

once you have “call” the block —> block.call

no matter you assign or not assign it to a variable, the method will still execute the action in the block and return the last line in block

ex.

def aa( &block )

puts “hello”

name = block.call or block.call

end

aa do

puts “yeah”

end

—> hello

yeah

ensure block —> make sure the operation below this block will still work while there is something wrong before

rescue block —> to rescue some errors

BEGIN and END block —> set the headline and endline of your program

ex:

puts “inside the program”

BEGIN { puts “this is beginning” }

END { puts “this is ending” }

—> this is beginning

inside the program

this is ending

#ruby #syntax #block

3/3 Study note 1

Block

ex: program

def say_hello ( &block ) —> block can be any name

puts “ Hello, world”

block.call —> call block

end

say_hello { puts “Hello again” } —> describe block doing in {}

or

say_hello do

puts “Hello again”

end —> {} will have higher priority than do end in Ruby

interpreter

—> Will print out

Hello, world

Hello again

===============================

block_given? —> to check if block is given or not

ex

if block_given?

…

else

…

end

#ruby #syntax #block

3/2 Study note 4

.next if xxx : jump to next element in for loop if meet the condition

.break if xxx : jump out the for loop if meet the condition

retry and redo

retry will repeat all loop

redo only repeat current status

ex.

for num in %w( a b c d e f g )

puts “ the word is #{num}"

retry if word == “d”

end

—> abcdabcdabcdabcd….

change retry to redo

—>abcdddddddddddd…..

#ruby #syntax #loop

3/2 Study note part3

Until loop

until i > 10 while i <= 10

xxx is equal to xxx

end end

For loop

for i in xx

yy

end

======================

.ranger —> 1 to 10 can be expressed 1..10

%w(a b c d e f g) is a short cut to [“a”, “b”, “c”, “d”, “e”, “f”, “g”]

#ruby #syntax #loop

Trending Blogs

Recently Viewed Blogs

Alpha camp learning history