前端雜談

曾經想為 React 特調寫系列文，這是第一篇也是最後一篇

前端雜談

什麼是網頁（webpage）、瀏覽器（browser）、為什麼看得到網頁？
瀏覽器是一隻程式，瀏覽器實作 W3C 規範（HTML/CSS/JavaScript），能解析（畫）出前端看到的畫面，網頁就是「看到的畫面」。

HTML 是什麼？
HTML/CSS/Markdown 都是靜態標籤檔案，只要有對應的軟體就能讀，就像 .doc 可以用 MicroSoftWord 讀取

為什麼上網可以看到網頁、瀏覽器怎麼透過跟伺服器拿 HTML？
瀏覽器會透過 protocol （常見的如 HTTP） 去跟伺服器要檔案。
瀏覽器當然也可以讀本地的檔案，這時會用 protocol file 讀取 .html 檔

什麼是靜態網頁、動態網頁？
靜態網頁 -> 把 HTML 靜態檔案放在伺服器上
動態網頁 -> HTML 是用程式（NodeJS、PHP、Python...）產生出來的

HTML 是什麼？
HTML/CSS/Markdown 都是靜態標籤檔案，只要有對應的軟體就能讀，就像 .doc 可以用 MicroSoftWord 讀取

為什麼上網可以看到網頁、瀏覽器怎麼透過跟伺服器拿 HTML？
瀏覽器會透過 protocol （常見的如 HTTP） 去跟伺服器要檔案。
瀏覽器當然也可以讀本地的檔案，這時會用 protocol file 讀取 .html 檔

什麼是靜態網頁、動態網頁？
靜態網頁 -> 把 HTML 靜態檔案放在伺服器上
動態網頁 -> HTML 是用程式（NodeJS、PHP、Python...）產生出來的

為什麼要命名？我不能 div 到底嗎？
你當然可以，但是...

• 命名在 React 是很重要的，一個專案隨便都有一百個 Component
• 你可以更快的完成一個案子
• 以及 SEO （請愛用語意化標籤QQ）

命名的例子
一、導覽列

NavBar/NavItem

nav 到底是 NavBar 還是 NavItem

二、main

        section
        conainer 外壁通常 container 做在中間，設計可能會發生某一個區塊不想做內容置中
        內壁
        row
        col

row, col 應該就單一職責的做流動排版，避免莫名的被擠爆

三、BEM CSS

加速你的網站 -> 減少 first rendering 時間

• minify -> 刪除空格
• uglify -> rename variable
• bundle -> 減少 request、blocking, ajax 堵塞
• 通常會依照功能分 bundle，一支超巨大bundle .js 也不好
• 前端的打包工具 -> webpack, gulp

結構化資料

• JSON-LD
• 語意化標籤