Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@aszx87410
aszx87410 committed Apr 6, 2017
0 parents commit f212aab
Show file tree
Hide file tree
Showing 18 changed files with 575 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
examples/
64 changes: 64 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# 從新手到中手：前端工程加強班

## 這是什麼

這是一系列循序漸進的課程，從最基本的 HTML, CSS 開始，經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack, React 等等。

最初的構想來源可以參考這篇：[[情報] 免費程式教學(前端)](https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html)。

這系列的課程需要的基礎為以下四項：

1. HTML
2. CSS
3. JavaScript
4. jQuery

## 課程大綱

1. 基本 HTML/CSS 練習：以 Twitch 為例
2. 讓畫面變得更動態：神奇的 CSS transition
3. 寫 CSS 必備神器：CSS 預處理器
4. 從假資料到真資料：Ajax 與 API 串接
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll
6. 返璞歸真：vanilla js
7. 走向國際：i18n
8. 當我們包在一起：Webpack
9. 節省 Request 的極致：一為全，全為一
10. 不一樣的思考方式：React

## 課程說明

從 4/10 開始，每週出一次作業，一共十週。
從 4/18 開始，每週二晚上九點為講解課程以及疑難雜症解惑時間。

## 時程表

|課程名稱| 講解時間 | 影片連結 |
|---|---|---|
| 1. 基本 HTML/CSS 練習：以 Twitch 為例 |4/18 | |
| 2. 讓畫面變得更動態：神奇的 CSS transition | 4/25 | |
| 3. 寫 CSS 必備神器：CSS 預處理器 | 5/2 | |
| 4. 從假資料到真資料：Ajax 與 API 串接 | 5/9 | |
| 5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll | 5/16 | |
| 6. 返璞歸真：vanilla js | 5/23 | |
| 7. 走向國際：i18n | 5/30 | |
| 8. 當我們包在一起：Webpack | 6/6 | |
| 9. 節省 Request 的極致：一為全，全為一 | 6/13 | |
| 10. 不一樣的思考方式：React | 6/20 | |


## 如何交作業

請先 clone 一份這個 project，並且在 `answers/` 資料夾底下相對應的子目錄撰寫作業，例如說 homework 1 就在 `answers/hw1` 裡面寫作業即可。

```
git clone
cd answers/hw1
// 開始寫作業
```

除此之外，記得把這個 project 弄成 [Github Page](https://pages.github.com/#project-site)，在交作業時一併附上連結。

## 提問
請至 [Issues]() 區塊直接開一個 Issue，提問前請先參考：[提問的智慧](https://www.gitbook.com/book/ryanhanwu/how-to-ask-questions-the-smart-way/details)。

10 changes: 10 additions & 0 deletions answers/hw1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
hw1 template
</body>
</html>
Empty file added answers/hw1/style.css
Empty file.
61 changes: 61 additions & 0 deletions homeworks/hw1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Homework 1

## 作業名稱
基本 HTML/CSS 練習：以 Twitch 為例

## 作業說明
[Twitch](https://www.twitch.tv/) 是一間專門做遊戲直播的公司（但近期有想要跨到其他領域去），之前被 Amazon 收購。
這系列的作業會以 Twtich 為例子，嘗試做出裡面一些簡單的頁面。而第一次作業就是要以 Twitch 的遊戲畫面為例，模仿出類似的介面。
讓我們先來看看 Twitch 的介面：

![](images/hw1_twitch.png)

再來看看這次作業要做出的成果：

![](images/hw1_demo.png)

作業成果圖只是示意最後做出來的樣子，但詳細內容，例如說字體大小、padding、margin 等參數憑感覺調整即可，不一定要跟示意圖相同（但也不能相差太多）

## 作業規格

1. 每一個方格的寬度為 300 px，高度不限，但每個方格的高度必須一樣
2. 上面為遊戲瀏覽畫面，圖片可以用[這張](https://static-cdn.jtvnw.net/previews-ttv/live_user_wayne75525-320x180.jpg)
3. 下面左邊是實況主的大頭貼，可以先用[這張](https://static-cdn.jtvnw.net/jtv_user_pictures/fate_twisted_na-profile_image-f51be41c0c37cf65-300x300.jpeg)代替
4. 一排有三個方格
5. 不需做 RWD，可以直接假設螢幕寬度會在 1000 px 以上
6. 背景圖片可以用[這張](http://cdn.leagueoflegends.com/lolkit/1.1.6/resources/images/bg-default.jpg)
7. 因為背景圖片太亮，所以背景圖片上面必須疊一層透明度為 50% 的黑色
8. 背景圖片必須保持不動（`background-attachment: fixed`）
9. 作業成品需要有九個方格，你可以做完一個之後複製九遍即可
10. 必須可以滾動

示意圖：
![](http://g.recordit.co/X3n7JqEsEJ.gif)

## 作業規範

1. 禁止使用任何 CSS framework（例如說 bootstrap），請自己手刻 CSS
2. 可以使用 CSS preprocessor 如 Sass, Less, Stylus 等（如果你不會用也沒關係）

## 學習資源

1. [html & css is hard, But it doesn’t have to be](https://internetingishard.com/html-and-css/)
2. [MarkSheet: A free HTML & CSS tutorial](http://marksheet.io/)
3. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/)
4. [Google](https://google.com)

## 自我練習

1. 請問 CSS 的屬性`position`有哪幾種值？
2. 承上，請問那幾種值有哪些區別？請講出適合應用的地方。
3. `display`的三個值`inline`, `block`, `inline-block`有什麼異同？可以試著舉出幾個例子嗎？
4. 有哪些 HTML 元素是 `inline`, 哪些是 `block`？
5. 當我設定一個元素的`width`為`300px`，並且`padding`設成`10px`之後，這個元素的寬度應該會是多少？
6. 這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示`...`？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345...」？

## 進階閱讀

1. [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
2. [學習 CSS 版面配置: flexbox](http://zh-tw.learnlayout.com/flexbox.html)
3. [深入解析 CSS Flexbox](http://www.oxxostudio.tw/articles/201501/css-flexbox.html)

38 changes: 38 additions & 0 deletions homeworks/hw10.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Homework 10

## 作業名稱

不一樣的思考方式：React

## 作業說明

[React.js](https://facebook.github.io/react/)是由 Facebook 開發出來的 Library，主要在處理與 UI 有關的邏輯，官方網站上的介紹寫著：`A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES`。

現在已經有以 React 為中心建構出來的整套生態系，例如說搭配 Redux、React Router 就可以做出一個完整的 Single Page Application，或是用 React Native 可以做出 Mobile App 等等。

這次的作業希望能讓大家理解到 React 跟以往在用的 jQuery 或是其他 library 有什麼不一樣，也希望讓大家有一點 React 的基礎。

## 作業規格

1. 把整個專案用 React 改寫

## 作業規範

1. 嘗試把頁面分割成各個 Component 並且渲染出來

## 學習資源

1. [換一種思考方式：React](http://ithelp.ithome.com.tw/articles/10188008)
2. [從零開始學 ReactJS](https://github.com/kdchang/reactjs101)
3. [React 入门实例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)

## 自我練習

1. `props` 跟 `state` 差在哪裡？
2. 說說看，寫 React 的時候有沒有覺得跟以前有哪裡不一樣？

## 進階閱讀

1. [React 简介和原理](http://anjia.github.io/2015/07/24/fe_react/)
2. [reactjs源码分析-上篇（首次渲染实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/)

47 changes: 47 additions & 0 deletions homeworks/hw2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Homework 2

## 作業名稱
讓畫面變得更動態：神奇的 CSS transition

## 作業說明
上一次作業中我們完成了簡單的遊戲遊戲顯示畫面，可是卻覺得不夠生動。
於是決定在滑鼠移上去的時候做一點效果，希望能夠讓整個頁面看起來更精緻一些。


## 作業規格

1. 每一個方格在滑鼠移上去時都會有浮出來的效果（`box shadow`）並且變亮

示意圖：
![](http://g.recordit.co/IWfPduGfVL.gif)

## 作業規範

1. 禁止使用任何 CSS framework（例如說 bootstrap），請自己手刻 CSS
2. 可以使用 CSS preprocessor 如 Sass, Less, Stylus 等（如果你不會用也沒關係）
3. 這次作業不會用到 JavaScript

## 學習資源

1. [W3School: CSS3 transition 屬性](http://www.w3school.com.cn/cssref/pr_transition.asp)
2. [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
3. [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
4. [CSS :hover Selector](https://www.w3schools.com/cssref/sel_hover.asp)
5. [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
6. [CSS Tricks: filter](https://css-tricks.com/almanac/properties/f/filter/)
7. [CSS3 box-shadow Property](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)
8. [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

## 自我練習

1. 你能不能試著做出另外一種 hover 的形式？例如說 hover 的時候背景顏色改變之類的
2. 我希望我滑鼠移上去之後過一秒才發生 hover 的效果，應該怎麼辦？
3. 為什麼我們應該在使用 transition 的時候避免 `transition: all`？

## 進階閱讀

1. [前端性能优化（CSS动画篇）](https://segmentfault.com/a/1190000000490328)
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)
3. [前端性能优化之更平滑的动画](https://w3ctrain.com/2015/12/15/smoother-animation/)
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)
5. [Web Fundamentals: Rendering performance](https://developers.google.com/web/fundamentals/performance/rendering/)
41 changes: 41 additions & 0 deletions homeworks/hw3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Homework 3

## 作業名稱
寫 CSS 必備神器：CSS 預處理器

## 作業說明
你有沒有發現每次寫 CSS 都很麻煩？總是會有許多重複的部分，或者是加上一些瀏覽器的 prefix。甚至是只想要改個網頁的背景顏色，就要同時更改許多地方。

有沒有可能在寫 CSS 的時候就像在寫 JavaScript，你有變數、函式甚至是迴圈可以用！這樣的話世界該有多美好。

沒錯，CSS 預處理器就是你在尋找的東西！

## 作業規格

1. 在 [sass](http://sass-lang.com/), [less](http://lesscss.org/), [stylus](http://stylus-lang.com/) 之間選擇一套並且改寫之前的 CSS。

## 作業規範

1. 一定要使用 CSS preprocessor

## 學習資源

關鍵字（只是提供一些範例而已）：

1. less sass stylus 差別
2. css 預處理器 簡介
3. stylus 入門 教學
4. css preprocessor tutorial

## 自我練習

1. 為什麼我們需要 CSS 預處理器？沒有 CSS 預處理器的話會怎樣嗎？
2. 在那三套裡面，你為什麼選擇了現在這一套？理由是什麼？

## 進階閱讀

1. [CSS pre- vs. post-processing](http://silvenon.com/css-pre-vs-post-processing/)
2. [CSS Post-Processors For Beginners: Tips and Resources](http://www.hongkiat.com/blog/css-post-processors-tips-resources/)
3. [Deconfusing Pre- and Post-processing](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3#.lpnqyww7m)
4. [[心得] 什麼是 postcss?](http://huli.logdown.com/posts/262723-experiences-what-is-postcss)
5. [cssnext](http://cssnext.io/)
54 changes: 54 additions & 0 deletions homeworks/hw4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Homework 4

## 作業名稱

從假資料到真資料：Ajax 與 API 串接

## 作業說明

直到目前為止，我們的資料都還是自己手寫在 HTML 裡面的，但是對一個實況網站來說，這樣子一點用都沒有。因此，我們需要真正的資料，並且在拿到資料以後轉成 HTML 並且顯示出來。

那具體上要怎麼做呢？從上面的敘述，你可以看出兩件事。

1. 要有辦法寫 code 跟某個地方拿資料並且做處理
2. 要有地方讓你拿資料

第一點指的就是`ajax`，你可以透過`ajax`在網頁前端利用 JavaScript 去跟某個地方拿資料，那其實這個「某個地方」指的就是 API。Twitch 有把自己的 API 開放出來，讓想開發的開發者們可以自己串接真的資料。

## 作業規格

1. [Twitch API](https://dev.twitch.tv/docs)裡面有一個 API 是可以拿到現在正在直播的某個遊戲底下的資料，API 的描述是「Gets a list of live streams.」，看到這行就代表你找對 API 了。
2. API 要帶的參數有一個 `game` 的欄位，請帶`League%20of%20Legends`
3. 請顯示 20 個實況，不多不少，要剛好 20 個

完成示意圖：

![](images/hw4_demo.png)

## 作業規範

1. 除了 `jQuery`，不能用其他的 Library


## 學習資源

1. jquery ajax
2. jquery append
3. ajax
4. [HTTP access control (CORS)](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Access_control_CORS)

## 自我練習

1. HTTP method 有哪幾個？有什麼不一樣？
2. `GET` 跟 `POST` 有哪些區別，可以試著舉幾個例子嗎？
3. 什麼是 RESTful API？
4. JSON 是什麼？
5. JSONP 是什麼？
6. 要如何存取跨網域的 API？


## 進階閱讀

1. [簡明RESTful API設計要點](https://tw.twincl.com/programming/*641y)
2. [浏览器同源政策及其规避方法](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)
3. [跨域资源共享 CORS 详解](http://www.ruanyifeng.com/blog/2016/04/cors.html)
55 changes: 55 additions & 0 deletions homeworks/hw5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Homework 5

## 作業名稱

讓網頁變得更完整：加上 placeholder 與 infinite scroll

## 作業說明

瀏覽器載入每一張圖片都需要時間，假如在網路連線速度不太好的情況下，就很有可能發生文字已經顯示出來，但圖片卻還在下載的情形：

![](images/hw5_broken.png)

這樣其實是很破壞使用者體驗的一件事，因為整個網頁看起來就像跑版了一樣。如果要讓使用者體驗變得更好，應該要在圖片載入的時候先放一張佔位圖（placeholder），載入完成之後才顯示真的圖片。

除此之外，光放佔位圖還是不夠的，因為目前 div 的高度是由圖片比例所決定的，所以當圖片還沒載入完成的時候，就會像上圖那樣高度是 0，所以我們可以先把高度寫死，這樣就可以確保載入前的高度就是正確的高度。

再者，現在的內容數量固定是 20 個頻道，可是使用者很有可能還想要看更多的頻道。該怎麼辦呢？一個顯而易見的做法是第一次載入時就載入更多的頻道，例如說 100 個，但是這樣子的話資料量太大，時間可能會太久。

比較好的做法是每當使用者要滑到快到底的時候，就自動載入新的 20 個頻道，只要使用者一直往下捲，內容就會一直出現，這就叫做 infinite scroll，有點像是 Facebook 的動態時報一樣，你可以一直往下滑。

這次的作業就是需要實作這兩項新功能。

## 作業規格

1. 你可以拿我們在第一次作業用的[這張圖](https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg)當作 placeholder。
2. 必須先出現佔位圖，等圖片載入完成再顯示真的圖片
3. infinite scroll 的部分，可以參考 Twitch API 的 limit 跟 offset 這兩個參數

完成示意圖：

![](http://g.recordit.co/Iqw49b7Uag.gif)

![](http://g.recordit.co/gu4hwKWAMC.gif)

## 作業規範

1. 除了 `jQuery`，不能用其他的 Library


## 學習資源

1. [Check if a user has scrolled to the bottom](http://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom)
2. [onload Event](https://www.w3schools.com/jsref/event_onload.asp)


## 自我練習

1. 佔位圖也是圖片，也需要下載時間，有沒有什麼方法可以優化這點？


## 進階閱讀
1. [实例解析防抖动（Debouncing）和节流阀（Throttling）](http://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/)
2. [Debounce and Throttle: a visual explanation](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation)
3. [throttle与debounce的区别](https://segmentfault.com/a/1190000004909376)
4. [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/)
Loading

0 comments on commit f212aab

Please sign in to comment.