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)並加以整理,詳情可以連結至原作者文章。

什麼都行,最重要的是:絕對不能「食物中毒」!

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

避免食物中毒的措施

閱讀我吧!

關於 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.htmlsrc/app/app.component.ts

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

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

閱讀我吧!

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 LuZHI-WEI
    • jquery - $.extend()
    • loadash - _.cloneDeep()

閱讀我吧!

目的

this 鎖在 function 當中。
為了取代舊有的.bind().bind() 會綁定 this 到指定的 obj)。

適合情境

只要 function 內的 this 還要再往下傳的時候,就適合使用 arrow function

閱讀我吧!