Tuesday, July 26, 2016

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 */
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.

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

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

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)