IPND, stage 4, paths to choose

Basically, there are 4 paths for a programmer or developer to take:

1 front-end developer:

problems

responsive design
mockups to websites
fast loading speeds

different kinds

Design focus: HTML, CSS
Application focus: JavaScript

essential skills

Empathy: you aren’t developing a website for yourself, you’re creating it for other people
Breaking problems into manageable chunks.

frameworks

Angular.js, Ember.js, Backbone.js, Knockout.js, React.js and Polymer.js.

Web Dev Building Blocks

2 back-end programmer:

databases, deployment tools, back-end frameworks
The technologies used by back-end programmers tend to stick around longer than those used on the front-end because rearchitecting an application is a major undertaking. As a result back-end technologies change more slowly.
Languages like Java and Go are popular among large teams and large projects because they enforce code organization and structure. Languages like Python, Ruby and Javascript allow rapid development and easy prototyping, but they don’t necessarily scale to heavy loads as easily. This implies cultural differences between the communities around different languages, and in the teams that use the different languages. Java in particular is used at larger enterprises. PHP tends to be seen in legacy applications.

Front-End vs. Back-End vs. Full-Stack Web Developers”
Ruby vs. Python

3 Mobile programmer: iOS, Android

problems

responsive design
clean user interface
sync to server
from a functional state to a production ready state
mobile hardware

essential skills

oo programming, networking (online APIs)
programming paradigm called model view controller
ios: swift (since 2014 summer), objective C, IDE is Xcode
android: Java, IDE is Android Studio

Android vs. iOS which Platform to Build For First
MVC

4 data analyst.

Python for data wrangling, D3. js for data visualization, R for statistical analysis

problems

trends from data
applied statistics, machine learning
data visualization

Jessica Kirkpatrick, data scientist at hired, PhD at astrophysics.
In her view, data analysts is to basically help other people in the company make decisions and prioritize their work by using the data we collect
language: sequel to fetch data, or similar language (Hadoop or MapReduce), statistical package like R, python, whatever for more advanced statistics and modeling and numerical analysis

essential skills

• Mathematics and statistics. Understand how to interpret the results, the technical aspects of models that are employed, develop new or alternate techniques to go beyond the built-in.
• Programming. Beyond software package to perform “out of box”. customized effects
• a sense of curiosity. Ask questions of their data to generate a logical flow in analysis. If an oddity is detected, such as missing data, outliers, unexpected trends, steps should be taken to understand the oddity and try to resolve it.

python vs R

https://www.datacamp.com/community/tutorials/r-or-python-for-data-analysis#gs.gnQqQWs
https://www.dataquest.io/blog/python-vs-r/

R. Best at very specialized task:

1. ggplot2: good-looking visualizations to hasten exploration of the data
2. dplyr, tidyr: reshaping data

   Python. easier to learn and understand

• scikit-learn, matplotlib, seaborn: for machine learning and visualization

learning zone:

safe-stretch-strain
The Safe Zone - This is where concepts are familiar and we don’t have to take any risks. The Safe Zone is important because it gives us a place to return and reflect on our current understanding. However, our potential for growth is limited in the Safe Zone because we are not challenged with unfamiliar concepts.

The Stretch Zone- To grow we must leave our Safe Zone and explore a Learning Zone just beyond our secure environment. Only in the Learning Zone can we make new discoveries and slowly expand our Safe Zone. Entering the Learning Zone is a borderline experience. We feel we’re exploring the edge of our abilities and our limits.

The Strain Zone- Beyond our Stretch Zone is the Strain Zone where learning becomes difficult and is blocked by a sense of fear and frustration. Learning that is connected with negative emotions is memorized in a part of the human brain that we can access only in similar emotional situations. While learning is possible in the Strain Zone, most of our energy is used managing and controlling our anxiety.

dancer, psychologist and coder: http://georgiatdavis.com/

​

Unitarian Universalist

I happened to know UU last week in my previous post. And I paid a real visit to the First Unitarian Church of Oklahoma City last Sunday. Here were my encounters:

1. We got a warm welcome there and a lady showed us around, handed us booklets, and introduced us to everyone we met.
2. The number of people there is smaller than I expected. Just a few tens. Maybe it’s because summer session.
3. To eat a donut, you will have to pay. But the coffee is free.
4. The order of service at 11 AM took place at Sanctuary. They usually take turns to lecture. Today is about UU jokes, which totally blew my mind. I am surprised they are so open to different beliefs and opinions that they can laugh at themselves.

Here are my favourite UU jokes:

• What do UUs have in common with Pontius Pilate?
  They ask, “What is truth?” and then don’t stay around for an answer.
• What’s the difference between an agnostic, an atheist, and a Unitarian?
  I don’t know, and I don’t care one way or the other.

A youtube video by Aaron White explains the basics:

1. rejection the notion of Trinity. Jesus is a human prophet.
2. rejection the notion of original sin.
3. rejection the notion of eternal punishment. How could God do that to God’s children?
   book: a treatise on atonement.

   It makes no sense to me that an infinite God infinitely punish a finite human being for making finite mistakes. An unlimited force brought down in punishment unlimited to people who do what limited people do.

We take the scripture and traditions of our Christain ancestors seriously, but not literally.

Credo religion vs Covenantal religion. we are the latter kind. I don’t come here to be better or more worthy than anyone else or to secure a special place for myself in my family. Everyday we wake up and keep a promise we’ve made about how we will live.

A promise guided by profound humility and active love.

1. even we want certainty about life’s biggest questions,we’re unlikely to find it.
2. not passive response

As limited human beings, we just can’t know everything. Our best response to the gift of life is to love and serve as many others as we can while we’re still alive for this might be the only life we have.

whether the story is true or not is not important; but what’s true about it?

The Five Reasons You Shouldn’t Be a Unitarian

• you can’t believe anything you want.
• I don’t have argument with fundamentalism, because I can’t argue with them.

My local branch:

West Wind UU
1309 W Boyd St, Norman, OK 73069, United States

1st Unitarian Church of Oklahoma City

Sundar Flansburg on 2016-7-10
-what disturbs me: so many people seem to blindly apply their very limited experiences to other people and complex societal problems, failing to recognize that those experiences are not shared ones. Raising children, getting a job, driving through the city, going out to a club to dance—all of these things can be profoundly different experiences, depending on your race, gender, sexual identity, socioeconomic status. We need life skill, community building skill, of being able to step outside of our direct knowledge and imagine something else.

• I’m convinced that in sharing stories we develop and expand empathy Like travel, art, music, reading, and other ways we step out of our everyday lives, listening deeply to other stories helps us see the world in a different way, helps us step into the experiences of people different from us.

Maureen Harvey on 2016-2-14

• Fear stands in our way of living in a state of pure love. It causes us to be small, to shrink, to disconnect, to isolate. So, what can we do about fear? I believe it’s best to invite fear in and allow ourselves to really feel it, to sit with it, of course, draw about it, befriend it and learn from it, including our fear of dying. Resisting unpleasant feelings like fear causes them to grow and wreck havoc in our lives while befriending such feelings helps them to shrink.
• Study shows 85% of the things we worry about never happen, and when things did happen, most people discovered they could handle the difficulty better than they expected, or they learned a valuable lesson from it.
  -97% of what you worry over is not much more than a fearful mind punishing you with exaggerations and misperceptions.
• An experience we had 10 years ago does not have to define us. We are not the same as we were last week or yesterday. Our feelings are just feelings and our thoughts are just thoughts—they are not who we are.
• If each one of us focuses on one issue we are passionate about, and puts our energy towards justice in that area we can make big changes.

claims

• God is not so much about what I believe. God is about what and how I serve.
• We believe that personal experience, conscience, and reason should be the final authorities in religion. We put religious insights to the test of our hearts and minds
• We believe that religious wisdom is ever changing. Human understanding of life and death, the world and its mysteries, is never final. Revelation is continuous.
• We affirm the worth of every person. We believe people should be encouraged to think for themselves. We know people differ in their opinions, choices, and identities, and we believe these differences should be honored.

resources, books

• uua
• uuworld
• uu service committee
• UU church of larger fellowship
• A Chosen Faith: An Introduction to Unitarian Universalism
• The Unitarian Universalist Pocket Guide, 5th Edition
• Faith Without Certainty: Liberal Theology In The 21st Century

notable believer

• John Adams(2nd president of US): regular church service was beneficial to man’s moral senses; strove for a religion based on a common sense sort of reasonableness;
• Clara Barton (founder of US red cross)
• Oliver Wendell Holmes Jr. (Asso.Justice of Supreme Court)
• Louisa May Alcott (author of little woman)
• Waldo Emerson (thinker)

Matt’s Tech Conference Survival Tips

• Today’s networking contacts are tomorrow’s clients
• If you’re the smartest person in the room, you’re in the wrong room.
• ‘Don’t take on any project unless you’ll learn something from it’. So my take away here is when given a choice, choose the topic that pushes your boundaries, even if some of it goes over your head.
• Kick it Old School – Use Paper notebook & pens. maximize your focus.

​

IPND, stage 3, movie trailer, Python, JavaScript

Stage 3 gets you more practice on Python and some modules like webbrowser, turtle, os, time. And get familiar with Python class.

The project is cool, although it is kind of deceptive. Because the dirty work is actually done by JavaScript, which is already written for you. I may figure it out in another post.

project 3

project guide

fresh_tomatoes.py

html scripts are written and stored as string variables:

• main_page_head: bootstrap is used as css and js. Track clicks and open movie trailer on youtube by javascript.
• main_page_content: 4-level div
• movie_tile_content

def create_movie_tiles_content(movies): use regular expression to search trailer_youtube_id and update the value in movie_tile_content.

def open_movies_page(movies): update main_page_content and write into “fresh_tomatoes.html”, use webbrowser to open the file.

media.py

define a Movie class, with attributes of title, storyline, poster_image_url, trailer_youtube_url

entertainment_center.py

This is what the student is supposed to finish. The easiest part.

use media.Movie() to initialize 3 instances

To run it, put all python files in one directory, open terminal:

python entertainment_center.py

It then generates a html and opens it in a browser. If you click on the movie icon, it starts to play. It is pretty cool. However, github is not able to host a displayed HTML. Instead, I host it in my AWS: https://s3-us-west-2.amazonaws.com/jychstar/fresh_tomatoes.html

​

IPND stage 012, html,CSS,python

[TOC]

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

Acronym

• 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

<!DOCTYPE HTML>
    <html>
        <head>
              <meta charset="utf-8">
            <title> real title </title>
        <head>
        <body>  content
        </body>
    <html>

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

CSS

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.

shapes.html/css

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.

tricks

code comments

HTML: <!-- here -->
CSS: /* here */

css reference

udacity guide for html coding format
flexbox

w3 standard check & beautifier

https://validator.w3.org/#validate_by_input
http://jigsaw.w3.org/css-validator/validator

http://www.cleancss.com/html-beautify/
http://www.cleancss.com/css-beautify/

anecdote
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:

• mkdir: make directory (file folder)
• touch: create file with a extension name.
• rm: remove file
• rmdir: remove file folder
  stage 2 has 50~70% overlap with CS 101: intro to computer programming :build a search engine. Beside, they recommend some udacity courses I am interested:

1. Introduction to Algorithms
2. Intro to Theoretical Computer Science

my notes in CS 101

def name(a,b):
str(number)
a.find(b, number)
len(a)
if statement:
while statement:
for a in list:
** is power
list.index(a)
a in list
a not in <list or str>
list.append (a)
<string>.split()
<string>.split(‘symbol’)
' '.join(string)
try:  except
chr(ord(<str>))
range(star,end)
range(star,step,end)
max(a,b)
pow(a,b)

resources

http://learnpythonthehardway.org/book/
https://developers.google.com/edu/python/introduction?hl=zh-CN&csw=1#prelude
http://www.tutorialspoint.com/python/
金旭亮http://www.jinxuliang.com/

入门的话，可以看看 Python 官网介绍的几本
http://wiki.python.org/moin/IntroductoryBooks

​

Atom in my favor

Written with StackEdit.

I am not aware of the powerfulness of Atom until today.

Snippet

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-scroll-sync
linter-markdown
markdown-writer
markdown-toc
markdown-pdf
markdown-preview
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
less
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

other

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

Reference:
http://xiaolai.li/2016/06/16/makecs-basic-dev-env-settup/
https://developer.apple.com/library/mac/documentation/OpenSource/Conceptual/ShellScripting/CommandLInePrimer/CommandLine.html
https://www.renfei.org/blog/mac-os-x-terminal-101.html