Skip to content

Commit f212aab

Browse files
aszx87410aszx87410
committed
init
0 parents  commit f212aab

18 files changed

+575
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
examples/

‎README.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# 從新手到中手：前端工程加強班
2+
3+
## 這是什麼
4+
5+
這是一系列循序漸進的課程，從最基本的 HTML, CSS 開始，經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack, React 等等。
6+
7+
最初的構想來源可以參考這篇：[[情報] 免費程式教學(前端)](https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html)。
8+
9+
這系列的課程需要的基礎為以下四項：
10+
11+
1. HTML
12+
2. CSS
13+
3. JavaScript
14+
4. jQuery
15+
16+
## 課程大綱
17+
18+
1. 基本 HTML/CSS 練習：以 Twitch 為例
19+
2. 讓畫面變得更動態：神奇的 CSS transition
20+
3. 寫 CSS 必備神器：CSS 預處理器
21+
4. 從假資料到真資料：Ajax 與 API 串接
22+
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll
23+
6. 返璞歸真：vanilla js
24+
7. 走向國際：i18n
25+
8. 當我們包在一起：Webpack
26+
9. 節省 Request 的極致：一為全，全為一
27+
10. 不一樣的思考方式：React
28+
29+
## 課程說明
30+
31+
從 4/10 開始，每週出一次作業，一共十週。
32+
從 4/18 開始，每週二晚上九點為講解課程以及疑難雜症解惑時間。
33+
34+
## 時程表
35+
36+
|課程名稱| 講解時間 | 影片連結 |
37+
|---|---|---|
38+
| 1. 基本 HTML/CSS 練習：以 Twitch 為例 |4/18 | |
39+
| 2. 讓畫面變得更動態：神奇的 CSS transition | 4/25 | |
40+
| 3. 寫 CSS 必備神器：CSS 預處理器 | 5/2 | |
41+
| 4. 從假資料到真資料：Ajax 與 API 串接 | 5/9 | |
42+
| 5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll | 5/16 | |
43+
| 6. 返璞歸真：vanilla js | 5/23 | |
44+
| 7. 走向國際：i18n | 5/30 | |
45+
| 8. 當我們包在一起：Webpack | 6/6 | |
46+
| 9. 節省 Request 的極致：一為全，全為一 | 6/13 | |
47+
| 10. 不一樣的思考方式：React | 6/20 | |
48+
49+
50+
## 如何交作業
51+
52+
請先 clone 一份這個 project，並且在 `answers/` 資料夾底下相對應的子目錄撰寫作業，例如說 homework 1 就在 `answers/hw1` 裡面寫作業即可。
53+
54+
```
55+
git clone
56+
cd answers/hw1
57+
// 開始寫作業
58+
```
59+
60+
除此之外，記得把這個 project 弄成 [Github Page](https://pages.github.com/#project-site)，在交作業時一併附上連結。
61+
62+
## 提問
63+
請至 [Issues]() 區塊直接開一個 Issue，提問前請先參考：[提問的智慧](https://www.gitbook.com/book/ryanhanwu/how-to-ask-questions-the-smart-way/details)。
64+

‎answers/hw1/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="style.css"></link>
6+
</head>
7+
<body>
8+
hw1 template
9+
</body>
10+
</html>

‎answers/hw1/style.css

Whitespace-only changes.

‎homeworks/hw1.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Homework 1
2+
3+
## 作業名稱
4+
基本 HTML/CSS 練習：以 Twitch 為例
5+
6+
## 作業說明
7+
[Twitch](https://www.twitch.tv/) 是一間專門做遊戲直播的公司（但近期有想要跨到其他領域去），之前被 Amazon 收購。
8+
這系列的作業會以 Twtich 為例子，嘗試做出裡面一些簡單的頁面。而第一次作業就是要以 Twitch 的遊戲畫面為例，模仿出類似的介面。
9+
讓我們先來看看 Twitch 的介面：
10+
11+
![](images/hw1_twitch.png)
12+
13+
再來看看這次作業要做出的成果：
14+
15+
![](images/hw1_demo.png)
16+
17+
作業成果圖只是示意最後做出來的樣子，但詳細內容，例如說字體大小、padding、margin 等參數憑感覺調整即可，不一定要跟示意圖相同（但也不能相差太多）
18+
19+
## 作業規格
20+
21+
1. 每一個方格的寬度為 300 px，高度不限，但每個方格的高度必須一樣
22+
2. 上面為遊戲瀏覽畫面，圖片可以用[這張](https://static-cdn.jtvnw.net/previews-ttv/live_user_wayne75525-320x180.jpg)
23+
3. 下面左邊是實況主的大頭貼，可以先用[這張](https://static-cdn.jtvnw.net/jtv_user_pictures/fate_twisted_na-profile_image-f51be41c0c37cf65-300x300.jpeg)代替
24+
4. 一排有三個方格
25+
5. 不需做 RWD，可以直接假設螢幕寬度會在 1000 px 以上
26+
6. 背景圖片可以用[這張](http://cdn.leagueoflegends.com/lolkit/1.1.6/resources/images/bg-default.jpg)
27+
7. 因為背景圖片太亮，所以背景圖片上面必須疊一層透明度為 50% 的黑色
28+
8. 背景圖片必須保持不動（`background-attachment: fixed`）
29+
9. 作業成品需要有九個方格，你可以做完一個之後複製九遍即可
30+
10. 必須可以滾動
31+
32+
示意圖：
33+
![](http://g.recordit.co/X3n7JqEsEJ.gif)
34+
35+
## 作業規範
36+
37+
1. 禁止使用任何 CSS framework（例如說 bootstrap），請自己手刻 CSS
38+
2. 可以使用 CSS preprocessor 如 Sass, Less, Stylus 等（如果你不會用也沒關係）
39+
40+
## 學習資源
41+
42+
1. [html & css is hard, But it doesn’t have to be](https://internetingishard.com/html-and-css/)
43+
2. [MarkSheet: A free HTML & CSS tutorial](http://marksheet.io/)
44+
3. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/)
45+
4. [Google](https://google.com)
46+
47+
## 自我練習
48+
49+
1. 請問 CSS 的屬性`position`有哪幾種值？
50+
2. 承上，請問那幾種值有哪些區別？請講出適合應用的地方。
51+
3. `display`的三個值`inline`, `block`, `inline-block`有什麼異同？可以試著舉出幾個例子嗎？
52+
4. 有哪些 HTML 元素是 `inline`, 哪些是 `block`？
53+
5. 當我設定一個元素的`width`為`300px`，並且`padding`設成`10px`之後，這個元素的寬度應該會是多少？
54+
6. 這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示`...`？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345...」？
55+
56+
## 進階閱讀
57+
58+
1. [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
59+
2. [學習 CSS 版面配置: flexbox](http://zh-tw.learnlayout.com/flexbox.html)
60+
3. [深入解析 CSS Flexbox](http://www.oxxostudio.tw/articles/201501/css-flexbox.html)
61+

‎homeworks/hw10.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Homework 10
2+
3+
## 作業名稱
4+
5+
不一樣的思考方式：React
6+
7+
## 作業說明
8+
9+
[React.js](https://facebook.github.io/react/)是由 Facebook 開發出來的 Library，主要在處理與 UI 有關的邏輯，官方網站上的介紹寫著：`A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES`。
10+
11+
現在已經有以 React 為中心建構出來的整套生態系，例如說搭配 Redux、React Router 就可以做出一個完整的 Single Page Application，或是用 React Native 可以做出 Mobile App 等等。
12+
13+
這次的作業希望能讓大家理解到 React 跟以往在用的 jQuery 或是其他 library 有什麼不一樣，也希望讓大家有一點 React 的基礎。
14+
15+
## 作業規格
16+
17+
1. 把整個專案用 React 改寫
18+
19+
## 作業規範
20+
21+
1. 嘗試把頁面分割成各個 Component 並且渲染出來
22+
23+
## 學習資源
24+
25+
1. [換一種思考方式：React](http://ithelp.ithome.com.tw/articles/10188008)
26+
2. [從零開始學 ReactJS](https://github.com/kdchang/reactjs101)
27+
3. [React 入门实例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)
28+
29+
## 自我練習
30+
31+
1. `props` 跟 `state` 差在哪裡？
32+
2. 說說看，寫 React 的時候有沒有覺得跟以前有哪裡不一樣？
33+
34+
## 進階閱讀
35+
36+
1. [React 简介和原理](http://anjia.github.io/2015/07/24/fe_react/)
37+
2. [reactjs源码分析-上篇（首次渲染实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/)
38+

‎homeworks/hw2.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Homework 2
2+
3+
## 作業名稱
4+
讓畫面變得更動態：神奇的 CSS transition
5+
6+
## 作業說明
7+
上一次作業中我們完成了簡單的遊戲遊戲顯示畫面，可是卻覺得不夠生動。
8+
於是決定在滑鼠移上去的時候做一點效果，希望能夠讓整個頁面看起來更精緻一些。
9+
10+
11+
## 作業規格
12+
13+
1. 每一個方格在滑鼠移上去時都會有浮出來的效果（`box shadow`）並且變亮
14+
15+
示意圖：
16+
![](http://g.recordit.co/IWfPduGfVL.gif)
17+
18+
## 作業規範
19+
20+
1. 禁止使用任何 CSS framework（例如說 bootstrap），請自己手刻 CSS
21+
2. 可以使用 CSS preprocessor 如 Sass, Less, Stylus 等（如果你不會用也沒關係）
22+
3. 這次作業不會用到 JavaScript
23+
24+
## 學習資源
25+
26+
1. [W3School: CSS3 transition 屬性](http://www.w3school.com.cn/cssref/pr_transition.asp)
27+
2. [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
28+
3. [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
29+
4. [CSS :hover Selector](https://www.w3schools.com/cssref/sel_hover.asp)
30+
5. [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
31+
6. [CSS Tricks: filter](https://css-tricks.com/almanac/properties/f/filter/)
32+
7. [CSS3 box-shadow Property](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)
33+
8. [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
34+
35+
## 自我練習
36+
37+
1. 你能不能試著做出另外一種 hover 的形式？例如說 hover 的時候背景顏色改變之類的
38+
2. 我希望我滑鼠移上去之後過一秒才發生 hover 的效果，應該怎麼辦？
39+
3. 為什麼我們應該在使用 transition 的時候避免 `transition: all`？
40+
41+
## 進階閱讀
42+
43+
1. [前端性能优化（CSS动画篇）](https://segmentfault.com/a/1190000000490328)
44+
2. [CSS animation和transition的性能探究](http://zencode.in/18.CSS-animation%E5%92%8Ctransition%E7%9A%84%E6%80%A7%E8%83%BD%E6%8E%A2%E7%A9%B6.html)
45+
3. [前端性能优化之更平滑的动画](https://w3ctrain.com/2015/12/15/smoother-animation/)
46+
4. [CSS动画的性能优化](http://zencode.in/14.CSS%E5%8A%A8%E7%94%BB%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.html)
47+
5. [Web Fundamentals: Rendering performance](https://developers.google.com/web/fundamentals/performance/rendering/)

‎homeworks/hw3.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Homework 3
2+
3+
## 作業名稱
4+
寫 CSS 必備神器：CSS 預處理器
5+
6+
## 作業說明
7+
你有沒有發現每次寫 CSS 都很麻煩？總是會有許多重複的部分，或者是加上一些瀏覽器的 prefix。甚至是只想要改個網頁的背景顏色，就要同時更改許多地方。
8+
9+
有沒有可能在寫 CSS 的時候就像在寫 JavaScript，你有變數、函式甚至是迴圈可以用！這樣的話世界該有多美好。
10+
11+
沒錯，CSS 預處理器就是你在尋找的東西！
12+
13+
## 作業規格
14+
15+
1. 在 [sass](http://sass-lang.com/), [less](http://lesscss.org/), [stylus](http://stylus-lang.com/) 之間選擇一套並且改寫之前的 CSS。
16+
17+
## 作業規範
18+
19+
1. 一定要使用 CSS preprocessor
20+
21+
## 學習資源
22+
23+
關鍵字（只是提供一些範例而已）：
24+
25+
1. less sass stylus 差別
26+
2. css 預處理器 簡介
27+
3. stylus 入門 教學
28+
4. css preprocessor tutorial
29+
30+
## 自我練習
31+
32+
1. 為什麼我們需要 CSS 預處理器？沒有 CSS 預處理器的話會怎樣嗎？
33+
2. 在那三套裡面，你為什麼選擇了現在這一套？理由是什麼？
34+
35+
## 進階閱讀
36+
37+
1. [CSS pre- vs. post-processing](http://silvenon.com/css-pre-vs-post-processing/)
38+
2. [CSS Post-Processors For Beginners: Tips and Resources](http://www.hongkiat.com/blog/css-post-processors-tips-resources/)
39+
3. [Deconfusing Pre- and Post-processing](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3#.lpnqyww7m)
40+
4. [[心得] 什麼是 postcss?](http://huli.logdown.com/posts/262723-experiences-what-is-postcss)
41+
5. [cssnext](http://cssnext.io/)

‎homeworks/hw4.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Homework 4
2+
3+
## 作業名稱
4+
5+
從假資料到真資料：Ajax 與 API 串接
6+
7+
## 作業說明
8+
9+
直到目前為止，我們的資料都還是自己手寫在 HTML 裡面的，但是對一個實況網站來說，這樣子一點用都沒有。因此，我們需要真正的資料，並且在拿到資料以後轉成 HTML 並且顯示出來。
10+
11+
那具體上要怎麼做呢？從上面的敘述，你可以看出兩件事。
12+
13+
1. 要有辦法寫 code 跟某個地方拿資料並且做處理
14+
2. 要有地方讓你拿資料
15+
16+
第一點指的就是`ajax`，你可以透過`ajax`在網頁前端利用 JavaScript 去跟某個地方拿資料，那其實這個「某個地方」指的就是 API。Twitch 有把自己的 API 開放出來，讓想開發的開發者們可以自己串接真的資料。
17+
18+
## 作業規格
19+
20+
1. [Twitch API](https://dev.twitch.tv/docs)裡面有一個 API 是可以拿到現在正在直播的某個遊戲底下的資料，API 的描述是「Gets a list of live streams.」，看到這行就代表你找對 API 了。
21+
2. API 要帶的參數有一個 `game` 的欄位，請帶`League%20of%20Legends`
22+
3. 請顯示 20 個實況，不多不少，要剛好 20 個
23+
24+
完成示意圖：
25+
26+
![](images/hw4_demo.png)
27+
28+
## 作業規範
29+
30+
1. 除了 `jQuery`，不能用其他的 Library
31+
32+
33+
## 學習資源
34+
35+
1. jquery ajax
36+
2. jquery append
37+
3. ajax
38+
4. [HTTP access control (CORS)](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Access_control_CORS)
39+
40+
## 自我練習
41+
42+
1. HTTP method 有哪幾個？有什麼不一樣？
43+
2. `GET` 跟 `POST` 有哪些區別，可以試著舉幾個例子嗎？
44+
3. 什麼是 RESTful API？
45+
4. JSON 是什麼？
46+
5. JSONP 是什麼？
47+
6. 要如何存取跨網域的 API？
48+
49+
50+
## 進階閱讀
51+
52+
1. [簡明RESTful API設計要點](https://tw.twincl.com/programming/*641y)
53+
2. [浏览器同源政策及其规避方法](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)
54+
3. [跨域资源共享 CORS 详解](http://www.ruanyifeng.com/blog/2016/04/cors.html)

‎homeworks/hw5.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Homework 5
2+
3+
## 作業名稱
4+
5+
讓網頁變得更完整：加上 placeholder 與 infinite scroll
6+
7+
## 作業說明
8+
9+
瀏覽器載入每一張圖片都需要時間，假如在網路連線速度不太好的情況下，就很有可能發生文字已經顯示出來，但圖片卻還在下載的情形：
10+
11+
![](images/hw5_broken.png)
12+
13+
這樣其實是很破壞使用者體驗的一件事，因為整個網頁看起來就像跑版了一樣。如果要讓使用者體驗變得更好，應該要在圖片載入的時候先放一張佔位圖（placeholder），載入完成之後才顯示真的圖片。
14+
15+
除此之外，光放佔位圖還是不夠的，因為目前 div 的高度是由圖片比例所決定的，所以當圖片還沒載入完成的時候，就會像上圖那樣高度是 0，所以我們可以先把高度寫死，這樣就可以確保載入前的高度就是正確的高度。
16+
17+
再者，現在的內容數量固定是 20 個頻道，可是使用者很有可能還想要看更多的頻道。該怎麼辦呢？一個顯而易見的做法是第一次載入時就載入更多的頻道，例如說 100 個，但是這樣子的話資料量太大，時間可能會太久。
18+
19+
比較好的做法是每當使用者要滑到快到底的時候，就自動載入新的 20 個頻道，只要使用者一直往下捲，內容就會一直出現，這就叫做 infinite scroll，有點像是 Facebook 的動態時報一樣，你可以一直往下滑。
20+
21+
這次的作業就是需要實作這兩項新功能。
22+
23+
## 作業規格
24+
25+
1. 你可以拿我們在第一次作業用的[這張圖](https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg)當作 placeholder。
26+
2. 必須先出現佔位圖，等圖片載入完成再顯示真的圖片
27+
3. infinite scroll 的部分，可以參考 Twitch API 的 limit 跟 offset 這兩個參數
28+
29+
完成示意圖：
30+
31+
![](http://g.recordit.co/Iqw49b7Uag.gif)
32+
33+
![](http://g.recordit.co/gu4hwKWAMC.gif)
34+
35+
## 作業規範
36+
37+
1. 除了 `jQuery`，不能用其他的 Library
38+
39+
40+
## 學習資源
41+
42+
1. [Check if a user has scrolled to the bottom](http://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom)
43+
2. [onload Event](https://www.w3schools.com/jsref/event_onload.asp)
44+
45+
46+
## 自我練習
47+
48+
1. 佔位圖也是圖片，也需要下載時間，有沒有什麼方法可以優化這點？
49+
50+
51+
## 進階閱讀
52+
1. [实例解析防抖动（Debouncing）和节流阀（Throttling）](http://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/)
53+
2. [Debounce and Throttle: a visual explanation](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation)
54+
3. [throttle与debounce的区别](https://segmentfault.com/a/1190000004909376)
55+
4. [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/)

0 commit comments

Comments
 (0)