jim63 / jim63.github.io Goto Github PK
View Code? Open in Web Editor NEWappWorks
appWorks
完成 appWorks school 第一週後,發現自己在 HTML、CSS 和 JavaScript 上的掌握有一些狀況。
第一週再做首頁的時候,使用 Mobile First 的方式設計 RWD (Responsive web design) 網頁。其中有很多技巧沒有掌握好,導致在設計的時候很多地方會需要分別製作手機版和電腦版,用 display: none;
或是 display: block;
來做控制。並且沒有 廣設 class
、id
等等,而在 CSS選取的時候大量使用 .className p
這種選擇方式,造成自己之後修改上的困難。以往做簡單的切版時都使用 px
和 %
為單位,這次作業深感不足,發現了 vw
、 vh
等等的單位,使用上更加靈活許多。
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>
class
或是 id
,必且照 HTML 的順序寫下來,之後比較一目瞭然。這週開始大家得進度好像就有落差了,在二月 27 日有些同學已經做到 week_3_part_3 了,這週作業在刻版面上花的時間比較少,時間大多花在 JavaScript 上。
最基本的 CSS Reset 大概長這樣:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*
選擇全部可能會有效能上的問題面試題:請問如何解決 CSS 樣式在不同瀏覽器間的差異
把 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>
首先要辦好 amazon aws 的帳號
選擇 Ubuntu Server 18.04 LTS (HVM)
選擇免費的服務,接著一路 next 到 Step 6: Configure Security Group
點選 add rule 加入允許的 Protocol
接著按下 review and launch
再回到 EC2 Dashboard 選擇 1 Runnung Instances
打開 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 可由所有者讀出”
不然可能會有這個 error : Error connecting to 18.191.251.152, reason: —> Key exchange failed: Host authentication failed
安裝 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 的話預設是 ubuntuc2-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
npm install
node app.js
等等[延遲(Latency)與頻寬(Bandwidth)是什麼] (https://blog.gtwang.org/web-development/network-lantency-and-bandwidth/)
Method | PRO | CON |
---|---|---|
Electricity | Cheap | Signal Loss |
Light | Really fast, No Signal Loss | Expensive, Hard to Work With |
Radio | Mobile | Short Range |
指令 | 功能 |
---|---|
pwd | Print Working Directory |
ls | List Directory Contents |
clear | Clear |
cd | Change Directory |
cd . | Go Back One Directory |
cd .. | Go Back To Home Directory |
mkdir dirName | Create directory |
touch fileName | Create File |
echo "Hello World" > hello.txt | Write Text To A File |
wc | Word Count |
cat fileName | View Contents Of A File |
rm | Delete A File |
rmdir | Delete A Directory |
cp source destination | Copying Files And Directories |
cp fileNmae dir | Copy File To Directory |
cp -R dir1 dir2 | Copy Whole Directory |
mv source destination | Moving files and directories |
chmod | Changing Permissions |
sudo | Run As Administrator |
exit | Logout Admin |
whoami | Displays The Name Of The User Who Runs The Command |
dig | DNS lookup |
man | Manual |
vim | Vim Editor |
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()
簡單分辨
setTimeout() | setInterval() |
---|---|
只會執行一次 | 重複執行 |
呼叫到 setTimeout() 那一行時,才開始倒數計時 | setInterval 是一開始就標定了執行時間點,如果時間超過了,便會馬上執行 |
<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')
使用。
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");
});
很多看起來厲害的特效,好像都是用 transition
在 CSS 變動時做特效。
這次學到了
transform: translateY(-100%);
會讓物件網上跑出頁面;ransform: translateY(100%);
則是向下跑出頁面。transition: [property 名稱] [duration 時間] [timing-function 特效] [delay 延遲]
e.addEventListener("transitionend", i => {console.log(i.propertyName)})
flex
很好用。flex: [flex-grow] [flex-shrink] [flex-basis]
讓元件伸縮撐滿空間。Operation | Keyword | Example |
---|---|---|
Create | INSERT INTO "表格名" ("欄位1", "欄位2", ...) VALUES ("值1", "值2", ...); | INSERT INTO Store_Information (Store_Name, Sales, Txn_Date) VALUES ('Los Angeles', 900, 'Jan-10-1999'); |
Read | SELECT "欄位名" FROM "表格名"; | SELECT Store_Name FROM Store_Information; |
Update | UPDATE "表格名" SET "欄位1" = [新值] WHERE "條件"; | UPDATE Store_Information SET Sales = 500 WHERE Store_Name = 'Los Angeles' AND Txn_Date = 'Jan-08-1999'; |
Delete | DELETE FROM "表格名" WHERE "條件"; | DELETE FROM Store_Information WHERE Store_Name = 'Los Angeles'; |
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.