[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
- 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.
- abstract thinking: finding similarity and generality, avoid unnecessary repetition of work.
- 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.
- 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:
- 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”]{}
- 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.
- 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:
CSS:
<!-- here -->CSS:
/* here */
w3 standard check & beautifier
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.
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:
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 folderstage 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:
- Introduction to Algorithms
- 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/
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
http://wiki.python.org/moin/IntroductoryBooks
