JavaScript/ HTML/ CSS 工具資源

-

JavaScript

語法觀念

  1. 寫 JavaScript 的推薦習慣
  2. Operator precedence and associativity, grouping and short-circuiting - MDN
  3. coding style：
  4. JavaScript: The Good Parts
  5. JavaScript 的 Reference 遊戲
  6. 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？
小心地雷
  1. 重新認識 JavaScript 系列
  2. JavaScript 全攻略：克服 JS 的奇怪部分
  3. JavaScript 常見大坑與細節
  4. JavaScript: typeof operator
  5. 浮點數計算
  6. 型別強制轉換（coercion），範例：

繪製流程圖

  1. Draw.io
  2. Google Drawing
程式碼編輯器（text editor）
  1. Visual Studio Code：我的 Visual Studio Code 設定
  2. Sublime Text
  3. Atom
  4. Vim
  5. Emacs
  6. Brackets
  7. WebStorm 
編輯器套件（extension）
  1. 自動修訂語法格式：
    1. JSLint
    2. ESLin：ES6 標準格式

套件管理工具（Node Package Manager）
  1. Yarn
  2. Bower'
  3. volo
  4. pnpm
Debug 工具
  1. Python Tutor：將程式運作過程圖像化，適用 Python, Java, C, C++, JavaScript

HTML

語法

  1. HTML 起手式
  2. htmlreference：It features all elements and attributes.
  3. HTTP 狀態碼 - MDN

工具

  1. 繪製線框稿：Wireframe.cc
  2. 把網站轉為框線稿：Wirify
  3. 圖示：Font Awesome
  4. 字體：Google Fonts
  5. Emmet：
    Emmet 教學 - 基本用法
    Emmet Cheat Sheet
  6. Pixels to Ems Conversion - w3schools

小心地雷

  1. 我們使用換行、縮排等方式，增加程式碼的易讀性，但換行和縮排，會在 DOM 中產生空白文字節點。為了以防萬一，會在網站正式發布前，取消所有的換行和縮排（此舉也能讓檔案變小）；這個取消換行和縮排的操作稱為 minify。工具：HTML Minifier。
    How whitespace is handled by HTML, CSS, and in the DOM - MDN

CSS

語法
  1. CSS 起手式
  2. cssreference：It features the most popular properties, and explains them with illustrated and animated examples.
  3. css-tricks
  4. [css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性
  5. 雪碧圖（CSS Sprite）圖片定位：spritecow

顏色

  1. 色碼表
  2. 調色盤
效果產生器（搜尋關鍵字：效果名 + generator）
  1. box-shadow
  2. Flexbox Playground
觀摩線上樣版（搜尋關鍵字：website template）
  1. colorlib
其他
文件

最後更新日期：2021年1月22日

Comments

Post a Comment

Popular posts from this blog

資料關聯

-
以飲料店的商品種類為例，假設我們現在有飲料和杯子兩種資料。 飲料： id name 1 綠茶 2 紅茶 3 青草茶 杯子： id size 1 500 2 600 3 700 一對一（One to One） 若飲料和杯子是一對一的關係，那麼情況就類似這樣： 綠茶只用 500 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 青草茶只用 700 cc 的杯子裝 一種飲料只有一個尺寸的杯子，而且一個尺寸的杯子也只對應到一種飲料。在這種情況下要建立關聯，有下列兩種方式，擇一即可。這兩種做法在技術上效果是一樣的，不過語意解讀上可能不太一樣。 把關聯欄位加在飲料（語意上，是飲料有杯子這個屬性） 把關聯欄位加在杯子（語意上，是杯子有飲料這個屬性） 把關聯欄位加在飲料的資料表： id name cup_id 1 綠茶 1 2 紅茶 2 3 青草茶 3 把關聯欄位加在杯子的資料表： id size drink_id 1 500 1 2 600 2 3 700 3 一對多（One to Many） 若飲料和杯子是一對多的關係，那麼情況就類似這樣： 綠茶用 500 cc、700 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 一種飲料有許多尺寸的杯子，而且一個尺寸的杯子只對應到一種飲料。 或者是這樣： 綠茶、紅茶、青草茶都只用 500 cc 的杯子裝 一個尺寸的杯子對應到許多種飲料，而且一種飲料只有一個尺寸的杯子。 在這種情況下要建立關聯，一般會選擇加在多的那一邊。如果加在少的那一...
Read more

程式設計相關社群、活動

-
網頁開發 網頁開發雜記 PJCHENder網頁開發咩腳 Backend 台灣 (Backend Tw) Taiwan Backend Group Backend.tw (友善版) Google Chrome Developers 語言 Python Taiwan JavaScript.tw Kotlin： Kraftsman：Coding 職人塾 資安 網路攻防戰 資安解壓縮 Infosec Decompress DEVCORE 如何成為駭客 (資安研討會、社群與網路資源篇) Cymetrics Tech Blog （有胡立大大） 台灣電腦網路危機處理暨協調中心 UCCU Hacker HITCON GIRLS 資安人科技網 個人或公司 資料科學家的工作日常 Ant Yi-Feng Tzeng 偷米騎巴哥 John Liu 的軟體工程思維 Will 保哥的技術交流中心 新加坡商鈦坦科技 Line 的技術部落格 區塊鏈李婷婷 、 FB 、 line 群 管理 TGONetworks 91 敏捷開發之路 技術管理者交流社團 課程 軟體開發學習資訊分享 Udemy 限時免費課程 cs50 中文討論區 Lidemy 鋰學院 商業思維學院 未分類 NEX Foundation 台灣未來基金會 iThome FB Daodu Tech 科技島讀 ∞ Lab 無限大實驗室．金融科技第一站 DevOps Taiwan Chatbot Developers Taiwan 軟體開發的疑難雜症交流區 年會 Hacks In Taiwan 台灣駭客年會 FB 台灣資安大會 cybersec 2021 開源人年會 COSCUP 2021 Python 年會 PyCon 2021 ModernWeb 開發者年會 2021 Javascript 開發者年會 FB: JSDC Taiwan 敏捷年會 Agile Summit 20...
Read more

TCP/ IP 通訊協定

-
為什麼要有通訊協定 不同機器之間，若要能夠溝通的話，需要大家都使用相同的語言。所有人都遵守通訊協定，就不會出現語言隔閡。 什麼是 TCP/ IP 通訊協定 要實現「不同機器之間能夠溝通」，從硬體到軟體，有許多工作要完成。為了讓這份工作比較容易進行，所以將工作拆分成好幾個部分，各自獨立完成；以後若要維護的話，哪個部分有問題，只要維修那個部分就好，不必把所有部分都拿出來檢查，降低維修難度。 至於工作到底要怎麼拆分，不同的模型有不同的建議。OSI（Open System Interconnection）模型切成七層工作，DoD（Department of Defense Model）模型則是切成四層，每一層都有不同的通訊協定。雖然目前實作上通常不是採用 OSI 模型，但為了方便理解「不同機器之間能夠溝通」的機制，通常會用 OSI 模型講解，也會試著將 DoD 模型對應到 OSI 模型。 DoD 模型中有許多通訊協定，不過以 TCP、IP 這兩個通訊協定最具有代表性，所以 DoD 模型又稱為 TCP/ IP 模型。TCP 協定對應到 OSI 模型中的傳送層，IP 協定則是對應到網路層。 TCP、IP 通訊協定負責什麼工作 TCP 協定 發送端的 TCP，和接收端的 TCP，會先進行三向交握，確認彼此能夠順利傳輸資料，才正式開始傳輸資料。 我們可以把要傳輸的資料想像成要郵寄的包裹，郵寄時，包裹會有尺寸或重量的限制，同樣地，傳輸的資料也會有大小的限制。如果資料太大了，TCP 會拆分成小包裹，並且幫每個小包裹編號（以便接收端最後能把小包裹還原成大包裹），並注意是否每一個小包裹都成功送達，若沒有成功送達，TCP 會再補上缺少的小包裹。如果資料太小了，TCP 會幫包裹灌水，以符合大小的下限。 IP 協定 IP 位址就像收件地址，以便確認要將包裹送去哪個主機。IP 位址目前有兩種版本，IPv4 用 32 位元儲存地址，IPv6 用 128 位元儲存地址。所以 IPv6 有比較多的地址可以分配給不同的主機。 IPv4 以 IPv4 而言，位址可以切成兩個部分，第一部分代表 Net ID，第二部分代表 Host ID。相同的 Net ID，代表主機位在相同的 IP 網段，相同 IP 網段的主機之間可以用廣播的方式傳遞資料，而不必透過路由。可以從 N...
Read more