第一週心得 (2019/02/13~2019/02/20)

完成 appWorks school 第一週後，發現自己在 HTML、CSS 和 JavaScript 上的掌握有一些狀況。
第一週再做首頁的時候，使用 Mobile First 的方式設計 RWD (Responsive web design) 網頁。其中有很多技巧沒有掌握好，導致在設計的時候很多地方會需要分別製作手機版和電腦版，用 display: none; 或是 display: block; 來做控制。並且沒有 廣設 class、id 等等，而在 CSS選取的時候大量使用 .className p 這種選擇方式，造成自己之後修改上的困難。以往做簡單的切版時都使用 px 和 % 為單位，這次作業深感不足，發現了 vw 、 vh 等等的單位，使用上更加靈活許多。

總結第一週體會到的東西

• 設計 RWD 網頁時，仍然使用 Mobile First 設計，但是實作之前，必須先全盤考慮各個物件之間的關係。
• HTML 可以廣設 class 或是 id，但是並須明確。
  • 我目前的方法是用延續複元素的概念，感覺這樣不會重複，而且很清楚是在哪一個位置。

<div class="productPage__Container__Detail">
  <div class="productPage__Container__Detail__Title">
    <p class="productPage__Container__Detail__Title__Text">細部說明</p>
    <div class="productPage__Container__Detail__Title__HR"></div>
  </div>
</div>

• CSS 選擇上必須明確，直接選擇 class 或是 id，必且照 HTML 的順序寫下來，之後比較一目瞭然。
• JavaScript 上目前寫得很凌亂，應該是因為全域變數使用太多了，接下來應該會朝 “一個功能一個 fumction” 的目標前進，感覺這樣變數會很清楚，每次新增功能也不會混在一起。

第二週心得 (2019/02/20~2019/02/27)

這週開始大家得進度好像就有落差了，在二月 27 日有些同學已經做到 week_3_part_3 了，這週作業在刻版面上花的時間比較少，時間大多花在 JavaScript 上。

• addeventlistener, removeentlistener 搞了好久，沒有明確答案。
• sliding banner ，想了很久、查了很多卻沒有實作出來，大概浪費一整天。
• 到最後才發現 HTML 的 Tag 可以加一堆 Attribute。天阿，整個發現新大陸，這可以讓整個 JS 操作上更加順暢方便 100 倍還有剩。
  • Special thanks to Pengpeng 和 Arron (P 老師 請 A 同學分享他的 code)
• 有鑒於發現自己在寫 JS 控制 DOM 物件上超沒邏輯，決定如果進度趕得上，就每天跟著 Wes Bos 的 JavaScript 30，希望能夠進步一些 。
• 如果有看到關於 CSS 的 challenge 也一定會挑戰一番。
• （一定要擺脫爛 code！）

以下參考：doggy8088和CSScoke

使用 CSS Reset

• 有時候做出來的網頁在不同的瀏覽器之間會有一些差異，是因為每個溜覽器會有自己的 CSS 設定
• 例如 Chrome 和 Firefox 對於 h1 tag 的 line-height 不同
• 有很多 CSS Reset 的套件可以幫助解決這個問題，例如 Normalize 和 meyerweb.com CSS Tools: Reset CSS
  

最基本的 CSS Reset 大概長這樣：

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

• 使用 * 選擇全部可能會有效能上的問題

面試題：請問如何解決 CSS 樣式在不同瀏覽器間的差異

繼承 box-sizing

把 box-sizing 屬性從 html 元素繼承下來，之後要改比較方便

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

使用 unset 而不是重置所有屬性

unset 有一個 all 可以代表所以樣式屬性

button {
  all: unset;
}

使用 :not() 選擇器來決定表單是否顯示邊框

/* 新增邊框 */
.nav li {
  border-right: 1px solid #666;
}
/* 去掉邊框 */
.nav li:last-child {
  border-right: none;
}

改成

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

將 line-height 加入到 body 元素

• 不必分別為每個 <p> 或 <h**> 元素加入 line-height，因為文字預設會繼承 body 的樣式。

body {
  line-height: 1.5;
}

為連結和表單元素設置 focus

設定 focus 可以讓元素脫穎而出，使用者能更方便確認位置。
因為 CSS 優先權的關係（後面會蓋掉前面），<a> 設置如下順序：

// 一般 <a> 
a:link{}
// 有造訪過
a:visited{}
// 選取到元素
a:focus{}
// 游標晃到元素上
a:hover{}
點擊下去還沒放開
a:active{}

focus 也能用來做一些特效，例如

  <input type="text">
  <input type="text">

  <style>
    input{
      width: 100px;
      border: 1px dotted green;
      transition: 0.5s;
    }
    input:focus{
      width: 200px;
      border: 4px solid red;
    }
  </style>

部署 AWS EC2 remote machine

AWS 網頁上設定

• 首先要辦好 amazon aws 的帳號

  • 新創的帳號一年內基本功能是免費的

• 接著點選 instance -> launch instance
  

• 選擇 Ubuntu Server 18.04 LTS (HVM)

  • 這裡不確定 x86 或 Arm 架構對我的影響是什麼
    

• 選擇免費的服務，接著一路 next 到 Step 6: Configure Security Group

• 點選 add rule 加入允許的 Protocol

  • 研究了一下，下面這幾種應該是必須的吧？！
    • 基本的 HTTP, HTTPS
    • 等一下傳送檔案會用到 SSH
    • Custom TCP Rule 選擇 3000，有點像是 localhost:3000
  • Source 似乎可以設定允許連線的 IP 或 IP 範圍，還不太會用
    

• 接著按下 review and launch

  • 看是要用新的 key pair 或是 用舊的，下載好的 .pem 檔案要保存好
  • 這裡使用到剛學過 asymmetric encryption 的 public & private key pair 真酷ＸＤ
    

• 再回到 EC2 Dashboard 選擇 1 Runnung Instances

  • 記下 Public DNS, IPv4 Public IP

本地電腦連線至遠端電腦

• 打開 terminal,輸入 $ ssh -i 金鑰檔案的路徑 ec2-user@IPv4
  - default ssh username

  • 以我為例 ssh -i /Users/xujinbin/Downloads/AppworkShcool.pem [email protected]

• 務必執行 chmod 0400 /Users/xujinbin/Downloads/AppworkShcool.pem

  • 更改 private key 檔案模態至“0400 可由所有者讀出”

    • chmod: 改變檔案模態
      

  • 不然可能會有這個 error : Error connecting to 18.191.251.152, reason: —> Key exchange failed: Host authentication failed

• 就連上啦～
  

使用 SCP 將檔案從 Linux 傳輸到 Linux instance

• 安裝 SCP 用戶端，大部分的 Linux、Unix 和 Apple 電腦預設都包含 SCP 用戶端。

• 在本地電腦 terminal 輸入
  scp -i /path/my-key-pair.pem /path/SampleFile.txt [email protected]:~

  • /path/my-key-pair.pem 私鑰檔案路徑
  • /path/SampleFile.txt 要傳輸的檔案路徑
  • ec2-user linux 的話預設是 ubuntu
  • c2-198-51-100-1.compute-1.amazonaws.com Public DNS
  • :~ 把檔案放到主目錄，也可以改到其他位置

• 本次輸入

scp -i /Users/xujinbin/Downloads/AppworkShcool.pem /Users/xujinbin/AppWorks/remote-assignments/week3/remoteHomework.zip [email protected]:~/appWork

• 到遠端 ls 一下，就會發現成功了
  

可以傳輸資料基本上就大功告成了

• 接下來的操作就很像本端電腦啦
• npm install node app.js 等等
• 接著連上 http://18.191.251.152:3000/
  • 測試幾個頁面，成功了～

Internet 101

Basic

頻寬（Bandwidth）：傳輸媒介的最大吞吐量（throughput）。

延遲（Latency）：一個封包從來源端送出後，到目的端接收到這個封包，中間所花的時間。

[延遲（Latency）與頻寬（Bandwidth）是什麼] (https://blog.gtwang.org/web-development/network-lantency-and-bandwidth/)

Internet transmit method

IP addresses and DNS

Address on the internet is just a number

IP, Internet Protocol (A protocol used in internet communication)

IPV4 vs IPV6 [認識IPv4與IPv6的差異] (https://www.ithome.com.tw/tech/92046)

The Domain Name Systems (DNS) is the phonebook of the Internet.DNS translates domain names to IP addresses so browsers can load Internet resources.

Packets, routers, and reliability

• Network packet : it contains data, where it came from and where it goes to
• Router : keep the packets moving through the internet smoothly
• TCP, Transmission Control Protocol : check if entirely packets are sent

HTTP and HTML

HTTP, Hyper Text Transfer Protocol

• WWW is about communication between web clients and servers
• Communication between client computers and web servers is done by sending HTTP Requests and receiving HTTP Responses
• There are GET request and POST request

HTML, HyperText Markup Language

• Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.
• Other content like images or videos need to send another request to get content

SSL, TLS

• Create a safe channel
• Digital certificte

Simple layer of internet

HTTP & DNS : Manage the sending and receiving file of WEB file

TCP/IP & routing : Break down and transport packets

Wire, cable and Wifi : binary sequence of 1's and 0's are sent physically

!!! We don't have to know all above these, but I can definitely trust they work together successfully to deliver at scale and with reliability. !!!

Encryption and public keys

Encryption : Scrambling or changing a message to hide it

Decryption " Unscrambling the message to make it readable

"Too hard" in Cryptography means too many possibilities to compute in a reasonable amount of time

Type of encryption

• Symmetric encryption : Use same key to encrypt & decrypt, the secrete key has to be agreed ahead of time by two people in secret
  • Caesar Cipher
• Asymmetric encryption : Use different key to encrypt & decrypt, there are public key and private key
  • SHA-256
• SSL and TLS use public key encryption

Cybersecurity and crime

• Viruses
• DDoS, distributed denial-of-service
• Phishing

Virtual Machine

• VM is a program that simulates a computer
• Host OS: 自己主機的作業系統
• Guest OS: 安裝在 VirtualBox 或是 VMWare 上的作業系統
• VM software: VirtualBox or VMWare
• Vagrant: a programming makes VMs more convenient to use.

In the VM

• type exit or control-D to logout
• at shell folder type vagrant ssh to connect

terminal vs shell

• terminal 運行在 shell 之上，他提供一些指令給 shell 等待 shell 回應後，再轉成文字顯示回來，在以前是一台機器
• shell 是在應用程式之下，在核心(kernel)之上，有很多種 shell ，各有不同特性，例如 sh, zsh, csh, bash 等等

Linux Command Line

Day2 CSS + JS Clock

transform 裡面有很多屬性可以玩，這個 project 使用 transform:rotate(x degree)來讓指針轉動
transform:rotate(x degree) 預設是繞著物件中心轉動，obj.style.transformOrigin = '100%'; 設定轉動中心到最右邊。
transition 可以讓整個畫面看起來更酷炫。

• 例如 transition: all 0.5s 在變化位置或是顏色等等時，會用漸變的方式改變，總共耗時 0.5s。
• transition-timming-function 可以設定改變的方式。可以在 chrome dev tool 調整到喜歡的再複製貼上。
• const now = new Date() 可以得到目前的時間
  • now.getSeconds() 得到現在的秒數

setTimeout() v.s. serInterval()

簡單分辨

Day3 Update CSS Variables with JS

<input> 可以設定 type="range"，可以製造滑動桿的效果
純 CSS 可以設定變數並且用 JavaScript 操控，全瀏覽器支援。使用方法如下

// 在 :root 裡面設置環境變數
:root {
  --base: #badaaa;
  --blur: 0px;
  --spacing: 10px;
}

// 取用時，使用 var(--variableName)
img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

document.querySelectorAll 選到的是 NodeList，不是 Array。從 chrome 的 Dev tool 可以觀察到，如果把 array 印出來，選擇 __proto__，會看到一大堆 method 可以使用。但是如果是 NodeList 的話就沒有這麼多 method 可以使用。

element.dataset 會回傳一個 object ，裡面有所有 data-* 屬性的 key, pair

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" data-name="oledu">

console.log(document.querySelector('input').dataset);    
// will return an object DOMStringMap {sizing: "px", name: "oledu"}

可以透過 document.documentElement.style.setProperty 來設定 :root{} 裡面的變數 document.documentElement.style.setProperty(--variableNmae,value);

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

監控 <input> 使用 addeventlistener('click') 可能不太夠，因為只有在切換後才會觸發，可以配合 addeventlistener('mouseover') 使用。

Day4 Array Cardio Day 1

JavaScript 在 array 裡面內建很多 function ，filter(), map(), reduce(), sort() 等等，彼此間還可以互相 combo。
順帶一提，在瀏覽器 querySelectAll('selectorName') 得到的是 NodeList ，只有 forEach() 可以使用，如果有需要可以用 Array.from(obj) 或是 ES6 的語法 [...] 轉換成 array。

const category = document.querySelector(".mw-category");

方法 1 :
const link = Array.from(category.querySelectorAll("a"));
方法 2 :
const link = [...category.querySelectorAll("a")];

Combo

const de = link.map(link => {
          return link.innerText;
        }).filter(streetName => {
          return streetName.includes("de");
        });

Day5 Flex Panels Image Gallery

很多看起來厲害的特效，好像都是用 transition 在 CSS 變動時做特效。

這次學到了

1. transform: translateY(-100%); 會讓物件網上跑出頁面；
2. ransform: translateY(100%); 則是向下跑出頁面。
3. transition: [property 名稱] [duration 時間] [timing-function 特效] [delay 延遲]
4. js 可以偵測 transition 結束，event.propertyName 可以知道是哪個 transition。e.addEventListener("transitionend", i => {console.log(i.propertyName)})
5. flex 很好用。flex: [flex-grow] [flex-shrink] [flex-basis] 讓元件伸縮撐滿空間。

SQL

CRUD

The LIKE operator for fuzzy matching

• LIKE will match English alphabet characters without regard to capitalization
  • SELECT * FROM baby_names WHERE state LIKE 'ny';
• Using LIKE with wildcards
  • % - The percent sign represents zero, one, or multiple characters
  • _ - The underscore represents a single character

Using IN to match against multiple possibilities

• SELECT * FROM baby_names WHERE state IN('CA', 'NY', 'TX');
• SELECT * FROM baby_names WHERE state NOT IN('CA', 'NY', 'TX');

Specifying a range with BETWEEN

• SELECT * FROM baby_names WHERE year >= 2010 AND year <= 2014;