只要花 60 秒瞭解「無障礙網站」概念

Yes

Your Website + Accessibility = BFF —— Jenn Lukas

前言

「網站」是一種資訊傳播的方式,我們製作網站最普遍的目的是為了將「資訊」傳播出去。比如說現今大多數公司會建置自己的官方網站,去傳達公司理念、服務項目、聯絡方式…等等,這些都在資訊的涵蓋範圍。

閱讀我吧!

查看使用者搜尋什麼關鍵字

想提升 SEO ,所以之前就有把我的部落格網址提交到 Google Search Console,在後台能了解:

  1. 成效報表:網頁搜尋總點擊次數
  2. 使用者點擊錯誤的網址數量
  3. 使用者會搜尋什麼關鍵字而到你的部落格
  4. 使用者是從哪些國家搜尋
  5. 行動裝置可用性…等等

其中,蠻喜歡這幾個功能

  • 「索引 > 涵蓋範圍 > 排除』:能去看哪些是被檢索後但失效的。
  • 「連結」:查看外部連結,哪些最熱門,來你的部落格的人又是點擊了哪些外部連結。

閱讀我吧!

Snippet Generator

好,我習慣用的編輯器是 VSCODE,雖然有安裝一些 Snippets 擴充套件,讓我敲程式碼時比較不會因為打錯浪費時間 debug。但,真正開發時,創建結構時常常都要建立新檔案去切分 component,打幾乎同樣的程式碼有點煩,所以~找了一下該怎麼來設定自己要的程式碼片段。希望有幫助到你:)

一、設定 Setting.json

1-1. command + ,
1-2. 右上角 {},打開自定檔
1-3. 新增以下語法:

// 啟用自訂程式碼樣版
"editor.tabCompletion": "on",

// 如果你跟我一樣,有裝其他的 Snippet,可以將編輯器的權重提高
"editor.snippetSuggestions": "top",

閱讀我吧!

An Accessible Web

現在因為要製作政府的專案,需要符合國家通訊傳播委員會的無障礙規範,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)並加以整理,詳情可以連結至原作者文章。

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

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

避免食物中毒的措施

閱讀我吧!

關於 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-*

閱讀我吧!