Tuesday, July 26, 2016

IPND stage 012, html,CSS,python


update on 2017-3-5

More than 7 months after the original post, I realize that as a today’s software developer, my end user will be mostly web-based. I should polish these web-based data visualization skill to best express my knowledge, insight or anything. It’s like a pretty girl spends 30 minutes dress up and wear perfume before she walks into the street.
In retrospect, the most important thing I learn is not the technical part. It’s what Andy Brown inspires me in the stage 0 and 1: Yes, you can and what are the possible mental states from novice to expert.
I notice some nice improvement in this nanodegree program to fill the knowledge gap. For example, in stage 5, Back-End(full-stack) developer path has added some webcams about Vagrant and the projects to help learners. However, there is knowledge gap that is untold. Why not use SQLite? The course section teach SQLite but the project use PostgreSQL and a vagrant environment. That’s because the server side consideration. You are providing services to other

stage 0, html

why computers are stupid?
Computers are stupid because they interpret instructions literally
  • HTTP: protocol
  • www=World wide web
  • HTML=Hypertext Markup Language
realtime html editor
html+CSS+JavaScript: http://www.codepen.io
html+ inline CSS: http://scratchpad.io/
web development documentations: http://www.w3schools.com/
install atom
install atom-html-preview package. This gives you instant feebback locally.

Thinking like a programmer

  1. procedural thinking: create perfectly clear and unambiguous instructions for a computer to follow. It requires more thought than telling a person. But once it is created, computers do it much faster.
  2. abstract thinking: finding similarity and generality, avoid unnecessary repetition of work.
  3. systems thinking: involves big-picture thinking and decision-making about a problem and how differnt pieces of a program can work together to solve it.
  4. technological empathy: understand how computer works and what it’s good and bad at doing
Andy: anyone can learn anything

Tag and Elements

While XML has DIY tags, HTML has pre-define tags, so any html file can be correctly resolved by different browsers.
element = opening tag + contents + closing tag
There are several types of element: inline vs block( boxes and containers), or void tag. Some tags doesn’t have attributes, some tags have attributes like class, href, src, alt which greatly enrich the representation.
<b> bold font </b>
<em> emphasize</em>
<a href="www.yuchao.us"> anchor tag for website </a>
<img src="url" alt="imag tag"'> 
<br> line break
<p> paragraph tag </p>
<span> inline container</span>
<div> box container </div>

html structure

To generate the following code snippet, use atom shortcut: html+Tab
              <meta charset="utf-8">
            <title> real title </title>
        <body>  content

stage 1

How Learning anything works

From novice( don’t even know where to begin) to expert(why was this ever hard)? Break the process into 4 stages:
stage Mind state feel transition time
0 Ignorance don’t know it exist. WTF minutes
1 Awareness that’s a thing days
2 Ability this is hard, I can do it years
3 Fluency it comes nature
Always break the structures into boxes


HTML is used to describe the structure and content of the page. And this abstract structure is called DOM (document Object Model) tree.
CSS is used to polish how the page looks, such as font size, color, background, border, position, etc.


By playing this example, I observe several interesting rules:
  1. css seems to be a collection of dictionaries ( but different key-value pairs are separated by semicolon), the name of the dictionaries are called CSS selectors. There are 3 major types of selectors: tag(the same name), class(dot+ name), ID attribute (# + name). Other attributes can be used as selector as well, e.g. [data-modal=”open”]{}
  2. the page of html is constructed by stacking rectangles. It’s very convenient to use “Developer tools” in Chrome to see how html (Elements), JavaScript(console) and css(Styles) work collaboratively to display the object.
  3. the styles window in Chrome not only shows the corresponding code in css files, but also shows the default stylesheet for the pre-define tags such as h1, head, body.

how does CSS relate to html?

The recommended way is inside head block, add:
<link rel="stylesheet" href="xx.css">
<script src="xx.js"></script>
No need to use type attribute.
Sometimes, people use <style> tag or <div style=""> for experimenting. But it is not recommended for general use. Because css is all about don’t repeat yourself.


code comments
HTML: <!-- here -->
CSS: /* here */
w3 standard check & beautifier
the first website of the world
Tim Berners-Lee is the inventor of html. By wiki, I learned that he believes Unitarian Universalism. After a few days, I went to First Unitarian Church of Oklahoma City, which is an interesting place.

Stage 2

install python and setup
command line introduction. Actually I have organize mine in a previous post. some missing:
  1. Introduction to Algorithms
  2. Intro to Theoretical Computer Science

my notes in CS 101

def name(a,b):
a.find(b, number)
if statement:
while statement:
for a in list:
** is power
a in list
a not in <list or str>
list.append (a)
' '.join(string)
try:  except


入门的话,可以看看 Python 官网介绍的几本

Monday, July 25, 2016

Atom in my favor

Written with StackEdit.
I am not aware of the powerfulness of Atom until today.


small prefix+ Tab= larger code block. Depending on the file type, snippet prefix include:
- html
- table
- img

favorite atom packages

  • open recent
  • autoclose-html
  • platformio-ide-terminal ( intergrate with terminal)
  • markdown pakages:
markdown-preview-enhanced (interpret equation)

Mac terminal command in my flavor

Written with StackEdit.

why you need to learn? Because mastering command line will make you like a Hacker.

Command line is case sensitive and require file extension. A command line includes Command Name –Options Arguments Extras. Each word is separated by space. Either absolute path or relative path is OK.

cheatsheet: https://github.com/0nn0/terminal-mac-cheatsheet

my frequent usage

command function note
say “hello” Pronounce
sleep 600 && say “hello” A timer for 600s and alarm
type coomandName tell it’s internal or external command
man commandName Open manual for the command name Q to quit
man –k keyword open all manual with certain keywords
pwd print working directory
ls list directory content similar to dir
cd change directory
cd / go to root directory
cd ~ go to user directory
cd .. go to upper directory
cd first letter+ auto complete the whole folder name
ls -a list hidden folder
ls -la list hidden folder and files
cat concatenate
which command name location of command
whereis command name location of command
* ? [] wildcard characters
mk dir, cp, mv, rm make directory, copy,move, reomve
vi visual text editor
nano nano text editor (much better)
open . use Finder to open current directory
history see what you have input
ctr+ L clear screen
ctr+ C stop current execution
echo string print string
alias string=”command name” make alias for command
su substitute user

install software

Homebrew is the most powerful package manager:

‘/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”’

Then you can use brew install or brew cask install to install many softwares
- Dash: collection of all documentation
- cheatsheet: shortcut anytime

Directory structures in Mac HD

4 visible file folders under root
1. Applications: for software
2. System: /library/…
3. Library: has Dictionaries, desktop picture, documentation, Favorites, Fonts, iTunes, Java Mail, preferences, etc
4. User: / yourname/Desktop, Download, Library, Documents, Application

Hidden file folders:
• bin
• cores
• dev
• home
• net
• Network
• private
• sbin
• usr
• Volumes
• files: etc, var, tmp

⌥ is alt (option), imagine it as a track changing switch
^ is control
⇪ Capslock
⇧ Shift


convert MS table to MD table http://www.tablesgenerator.com/markdown_tables
write MD in MS word: http://www.writage.com/


Sunday, July 24, 2016

Git & GitHub

git command

  • git clone [github link] [(optional)folder name]
  • git log
  • git log —stat
  • git diff first_id secod_id
  • git checkout
  • q
  • git config —global color.ui auto
    Atom as Git commit editor
    git config --global core.editor "atom --wait"

    make a repository

  • git init
  • git status
  • git add add new work to the staging area, a bridge b/w working directory and repository
  • git add . add all work
  • git commit will open a text editor, write, save and close editor.
  • git commit -m "message no need to open text editor
  • git diff (empty)
  • git diff --staged
  • git reset --hard
  • git branch
  • git branch easy-mode
  • git checkout easy-mode


  • git remote
  • git remote add origin url.git set the url as your remote reference
  • git remote -v stands for verbose
  • git push origin master sync to remote by master branch
  • git pull origin mastersync local by master branch
  • git config --global credential.helper osxkeychain password once for all
    -git pull=git fetch+git merge
  • pull request is actually merge request

CSAIL, the future is here

CSAIL stands for computing science and artificial intelligence laboratory. https://www.csail.mit.edu/
I knew it yesterday from Sisy Chen. http://www.cw.com.tw/subchannel.action?idSubChannel=382 I was shocked by her insight and her interview with the genius guy in MIT. And I knew nothing about them. I will spent some time to learn what exactly they are doing and update my blog.
I will learn these people:
Think out of the box.

Wednesday, July 13, 2016

Is GcMAF an alternative treatment for cancer?

One of my best friends has cancer and he went to German for alternative treatment which is not yet approved by FDA. I am quite interested in it and tried to understand why it was banned.

A google search of “Goleic” returns very confusing results. Then I learned that Goleic is a product sold by Immuno Biotech, a company located at a small island Guernsey to England. 2015-2-25, Immuno Biotech CEO David Noakes announced that Goleic, licensed as a vitamin supplement in Germany, was allowed into Guernsey. The price is very expensive, 8 doses for 450 Euros.

The wikipedia of GcMAF gave me a better understanding. The scientific foundation of this treatment was first published by a Philadelphia research group led by Nobuto Yamamoto on “Cancer Immunol Immunother” (a low-impact journal) in 2008 July. The title of the paper is Immunotherapy of metastatic colorectal cancer with vitamin D-binding protein-derived macrophage-activating factor, GcMAF. However, this paper and his other two papers were retracted because Inconsistencies and questionable reliability of the publication found by Anticancer Fund

Following are trustworthy critics:
CancerResearchUK:“Cancer cured for good?” – Gc-MAF and the miracle cure
Scholarly Open Access: Would You Take a Cancer Cure Proven Effective in a Predatory Journal?
BBC: Unlicensed blood drug GcMAF still for sale
the Health Archive: The end of GcMAF

How do different kinds of white blood cell fight cancer? Good cop, bad cop: the immune system and breast cancer spread


纪小龙医生 : 1 人体有500-600左右的癌症种类,分布全身每个角落,每一个癌都有各自的不同特征,所以,至今没有一个“万能”的发现早期癌的方法,只能针对人体常见的排在前面的10个癌采取相应的早期发现的办法,比如,胃癌只能用胃镜检查,肺癌只能用CT检查等。 2 最佳预防是定期体检。


方舟子 : 经常有人说吃某种东西(例如吃大蒜)能预防癌症,但是这些都只是初步的研究,不要轻信。要预防癌症,更重要的是不吃什么,避免摄入含强致癌物的食物,例如避免发霉食品,少吃油炸、烧烤、腌制食品。

I never trust traditional Chinese medical which is full of rumor. But sadly, today I found similar rumor happens in American:

Thursday, July 7, 2016

Notes on Steve Jobs

Jobs has been a symbol in our era. His products have revolutionized human's life styles. I plan to read his biography.

“That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.”
Tip: Create focus blocks of time. This way, you can focus on the work that matters most and block out all other distractions.

“Your time is limited, don’t waste it living someone else’s life. Don’t be trapped by dogma, which is living the result of other people’s thinking. Don’t let the noise of other opinions drown your inner voice. And most important, have the courage to follow your heart and intuition, they somehow already know what you truly want to become. Everything else is secondary.”

Cal Newport, professor of Computer Science at Georgetown University, explains that to build a career that you are satisfied with, you must first answer the question “What way of working and living will nurture my passion?

Tip: Answering Newport’s question is an important step, but what’s more important is to not fixate on regrets.

“I’m as proud of many of the things we haven’t done as the things we have done. Innovation is saying no to a thousand things.”
Tip: Say “no” and say it often. If what is being asked of you does not align itself with your goals, then it will become a distraction from the work that needs to get done.

My favorite things in life don’t cost any money. It’s really clear that the most precious resource we all have is time.”

We don’t get a chance to do that many things, and everyone should be really excellent. Because this is our life. Life is brief, and then you die, you know? So this is what we’ve chosen to do with our life.”
Tip: Ask yourself, “When it comes time for me to die, what will I regret not doing?” That is what matters most — so go and do it.

Wednesday, July 6, 2016

Notes on Yihui.name

I am trying to compare Markdown and Latex in my last post, and happened to find this guy, Yihui. He is an early pioneer in R and a founder of  online community on statistics http://cos.name.

Here are some interesting excerpts:
  • 一是要知道自己爱干啥,不然干啥都累
  • 二是从兴趣中做出一点成果,否则跟人说话苍白无力;
  • 三呢,有自己独立的想法,不要为了出国而出国,人到哪里都是这山望着那山高,外国不一定有想象的那么好,先想清楚要做什么,再想什么地方适合自己(比如我觉得数学伤脑子我就不想去数学气氛太浓的学校

build website by https://jekyllrb.com


Best Markdown Editor and Solution

Update on 2017-1-18

After 6 months, I stick to the little software Typora. The best features are immediate feedback, autosave and elegant. To render markdown in blogspot, just copy the source mode and convert it by an Chrome Extension “Markdown here“, which supports MathJax. Everything is nicely done.
By the way, the windows version of typora seems very unstable. Once it died half way and everything I wrote was lost.
In case you are in a public computer, then https://stackedit.io is the best choice.

Equations in Markdown

try $3n+\sum_2^n{\pi}$ to see whether it supports MathJax.

convert equation to LaTex code

However, remember LaTeX Math Symbols will help you type equation faster.

Write equation in Github Markdown

Sadly, Github flavored Markdown doesn’t support MathJax. The solution is to use some websites to convert it into image, and insert it using ![]() syntax. Such websites include:
how to use: convert-> download -> copy and paste

Write equations in gmail

A chrome extention “Tex for Gmail“ do the job. write equation by the above link and paste.
Note: simple equation is good, complex equation is terrible

MarkDown vs LaTex

MarkDown->html -> scrolling in one page
LaTex->PDF -> printing multiple pages
Let’s rock:
All roads lead to Rome, some people die at the starting line instead of on the roads.

Tuesday, July 5, 2016

broken window theory, technology timeline, qcloud

Broken window theory:
Not fixing problem is an indication that it's OK to have poor quality. So don't bother to look for the culprit, just fix it.  Be an example of the standards you want to reach, and praise those who follow the example.

Adoption Chart

qcloud conference:  http://www.qcloud.com/event/tcc2016/live 

Monday, July 4, 2016

Learning notes on DFT

I learn this to prepare for an interview. A very abstract theory. I will learn it anyway.DFT is an acronym for density functional theory, which is widely used in computational physics and computational chemistry to study the fundamental property of material. Density is for the density of electrons. Functional is a mathematical term, meaning "function of a function", e.g. F[f(x)]. There is a particular maths course called "functional analysis".
DFT was initially developed in Thomas and Fermi in 1920s, but hadn't achieve a good theoretical foundation until 1960s. Hohenberg-Kohn theorem demonstrated that the ground state properties of a many-electron system are uniquely determined by an electron density with only 3 spatial coordinates, and the correct ground state electron density minimizes the energy functional of the system. Later, Kohn-Sham equation provides a method to specifically describe the potential term. The effective potential is divided into external potential, and Coulomb interaction effect (exchange and correlation interaction). The interaction terms are difficult to model, and are treated by local-density approximation (LDA).

A real calculation by classical DFT on liquid Neon [^1] is a best way to dive in. This is done by a few lines of Mathematica codes revealed in its supplemental material.
A review paper on DFT by Burke's group [^2] provides in-depth overview, including its development, two most popular choices of functionals (empirical and nonempirical approaches) and the research trend.
[^1]: Jeanmairet, G., et al. (2014). "Introduction to Classical Density Functional Theory by a Computational Experiment." Journal of Chemical Education 91(12): 2112-2115.
[^2]: Pribram-Jones, A., et al. (2015). "DFT: A Theory Full of Holes?" Annual Review of Physical Chemistry 66(1): 283-304.

Saturday, July 2, 2016

Gratitude Journal

After many hours of talk with Pastor Bill, I suddenly realized that the bast part of Christian is not the biblical teaching, but the grateful prayer that they keep practicing all the time.  In the past several months,  I have been indulging in a defensive mode or "victim mentalness"

Surprisingly, there's a professor in UC Davis, named Robert Emmons, doing many years of research on this particular subject.

Other approach: Gratitude visit.


  1. First make the conscious decision to become more happier and more grateful. Don't go through motions.
  2. Elaborate in details about a particular person/thing instead of listing many superficial things.
  3. reflect on what your life would be like without certain blessing, rather than just tallying up all those good things. No hurry, go deeper.
  4. Try to record events unexpected or surprising, which provokes stronger level of gratitude
  5. Weekly journaling is better than daily journaling.Gratitude journal forces us to pay attention to the good things in life we'd otherwise take for grated.  Over doing it will make the brain adapt to positive events quickly. 
  6. Make the conscious effort to associate it with the word gift.
  7. Translating thoughts into concrete language,whether oral or written, has advantages over just thinking the thoughts: It makes us more aware of them, deepening their emotional impact.
  8. Writing help to organize thoughts, accept your own experience and put them in context. In essence, It allows you see the meaning of events around you and create meaning in your own life.