現在因為要製作政府的專案，需要符合國家通訊傳播委員會的無障礙規範，google 通用設計的概念，意圖去了解無障礙設計與通用設計的差異。後來看到大愛電視台，唐峰正老師的分享「通用設計」，發現：其實我們做的每一件事情都能增添溫度 - 同理心。

大家都知道，一個好的網站需要包含很多要素。其中有一個很大的 topic，「Accessible Web / Accessibility」，卻經常淪為建構網站時，有時間才去優化的事情，是一個 option 而不是 main feature。

Accessibility

閱讀我吧！

Demo(本頁開啟) | 我的設計稿

撰寫 CSS 的過程中，都會搭配 SASS 預處理器，之前一直有聽過 CSS IN JS，不知該如何寫起？剛好今年六角學院的前端精神時光屋切了第一週的版（蕃茄鐘），想說用 Vue 來練習 CSS Modules，其實是看到 Vue Loader 官方文件的介紹，動手做做看，再 google 大大們的文章吸收一下日月精華，整理在此。

CSS IN JS（JavaScript）

閱讀我吧！

Bulma

講到 CSS Framework，應該無人不知 Bootstrap。最近在 State of CSS 2019 的問卷結果中看到全球 CSS 使用數據，包含知名度、感興趣程度及使用滿意度，Bootstrap 的滿意度極低，而 Bulma 在使用滿意度算表現得很好，高達 74%，居於第二名，滿意度的第一名是 Taiwlind。CP 值好高，所以想來試試看 Bulma！

知名度：**50%**｜ (全部受測數 - 從沒聽過的人) / 全部受測數
感興趣：**41%**｜有興趣 / (有興趣 + 沒興趣)
滿意度：**74%**｜想再使用 / (想再使用 + 不想再使用)

本篇文章純粹紀錄如何使用，方便自己日後忘記可以快速上手，不會與其他 CSS Framework 進行比較唷。

Bulma 的 Responsive Web Design 跟 Bootstrap 4 一樣，也是利用 flexbox 來實現的，這篇記錄的 Bulma 版本是 0.7.5。

閱讀我吧！

完全參考至 （千人活動的便當該如何準備？——Karl Lin）並加以整理，詳情可以連結至原作者文章。

什麼都行，最重要的是：絕對不能「食物中毒」！

辦活動訂午餐，可以不好吃，可以又貴份量又少吃不飽，可以剩一堆廚餘，但**絕對絕對不能食物中毒**。

避免食物中毒的措施

• 謹慎挑選便當業者。
• 不要太早送到活動場地。
• 讓便當業者自己送餐（因為他們知道不同天氣下怎樣送便當能避免變質）。
• 不要使用 UberEATS 或 LaLaMove（因為他們不是食物外送專家）。
• 每種口味的便當預留一份放冰箱（因為如果最後食物中毒，至少有保留證據能釐清問題是便當業者或是活動方）。

閱讀我吧！

關於 Webpack

Webpack 是什麼？

它是一個「打包工具」。將眾多模組與資源打包成一包檔案，並編譯我們需要預先處理的內容，變成瀏覽器看得懂的東西，讓我們可以上傳到伺服器。

前端日新月異，我們寫的內容已不只是寫 HTML、CSS、JavaScript 單純的檔案。前端出現了許多預處理工具及框架，預處理工具如 PUG、SASS、Babel；框架如 Vue、React。不過瀏覽器並看不懂我們寫的預處理內容，每每都需要透過編譯才能使用，也因此出現了自動化工具，Webpack、Gulp、Grunt、Parcel、Browserify…等。

Webpack 能夠做什麼？為什麼？

閱讀我吧！

1. 使用 Array.includes 來處理多重條件

// 原始寫法
function test(fruit) {
  // 條件語句
  if (fruit === "apple" || fruit === "strawberry") {
    console.log("red fruit");
  }
}

乍看之下，寫法沒什麼錯誤。可是當我們有更多紅色水果的選項時，如 cherry（櫻桃）和 cranberries（蔓越莓），難道我們要增加更多的 || 邏輯運算子來判斷？

我們用 Array.includes 來改寫一次上面的判斷式：

// 改寫後
function test(fruit) {
  // 將選項提取出來，放入陣列當中
  const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
  if (redFruits.includes("apple")) {
    console.log("red fruit");
  }
}

閱讀我吧！

修改了某些檔案，一次只 commit 其中某幾個檔案

假設我們在開發的過程當中，做了某些檔案的修改。

git status

# 看到以下的狀態
On branch develop
Changes not staged for commit:
  (use "git add <file>..." to update what will be commited)
  (use "git checkout -- <file>..." to discard changes in working directory)

modified: document.json
modified: package-lock.json
modified: package.json
modified: src/app/app.component.html
modified: src/app/app.component.ts
modified: src/app/app.module.ts
modified: src/index.html
modified: src/styles.css

no changes added to commit (use "git add" and/or "git commit -a")

可是我只希望部分檔案加入 staging area，比如寫 component 時很好用，現在只希望加入 src/app/app.component 開頭的兩個檔案： src/app/app.component.html、src/app/app.component.ts。

# 原本要這樣加入
git add src/app/app.component.html src/app/app.component.ts

# 現在只要這樣寫
git add src/app/app.component-*

閱讀我吧！

Var

露出去的變數 i

for(var i = 0; i<10; i++) {
  console.log(i)
}
console.log(i) // 10

• 感謝 Reynold Cheng 於 2020/10/01 熱心指正第一個範例，結果為 10。

function scope：function 外就存取不到變數 i

閱讀我吧！

CSS

剛開始學習容易上手
往後卻難以維護

CSS 較鬆散， 非常仰賴攥寫的順序
但這些都比不上不懂 Specificity 的恐怖！XDDD

Specificity 看不懂？

閱讀我吧！

本篇文章翻譯自 How to clone an array in JavaScript - by Yazeed Bzadough on freeCodeCamp @medium，搭配 JS 的拷貝 by Kai @github 提及的概念，整理成筆記。

TL; TR

• 8. JSON.parse and JSON.stringify 是深拷貝。其他都是淺拷貝。
• 「call by reference」與「call by value」？
  • 基本型別 (Primitive Type) - number, string, boolean, null, undefined - 傳值
  • 物件 (Objects) - array, function, object - 傳址
  • array/object 當中若含有複合型別時，此複合型別是 call by reference 而不是 by value。
• 「淺拷貝」與「深拷貝」的定義與差異？
  • 淺拷貝在複製 object 時，會參考到同一個物件，並沒有將此物件拷貝到並建立出新的關聯。
  • 深拷貝在複製 object 時，會獨立出來不共用同一個記憶體位置，改動 newObject 時不會動到 oldObject。
• 這只是試看看能否用一個步驟就能深拷貝陣列的方式而寫的文章，網路上能找到其他更有趣的實作唷！
  • 更多深拷貝與淺拷貝的比較也可以參考 Larry Lu、ZHI-WEI
  • jquery - $.extend()
  • loadash - _.cloneDeep()

閱讀我吧！