還記得數個月前,我正經手某專案改版時,跟後端索取了原先該專案 Email 電子報使用的模板。取得之後先是唾棄了當初經手的人使用最原始的 Table 排版,後來做了下功課才發現,原來 Email 對 CSS 的支援度遠低於我的想像!在時程壓力下,只能就當時的架構硬著頭皮邊查 Table 排版的各種細節問題邊將其改為符合新需求的格式。

原先以為與 Email 切版的孽緣就此結束,直到近期的某項專案又接到了 Email 排版的需求,更慘烈的是還需要支援響應式,設計稿分別提供了 PC 和 手機兩個版本。好在先前拜讀了前端大神 Gary 的透過 MJML 快速完成 RWD Email 排版,讓我可以在更短時間內上手這項工具,並將其運用在工作上。

為何要使用 MJML

近年,CSS 分別提出了 Flex, Grid 等更能讓我們簡 …


今天偶然在國外的 Web 社群中看到一個很有趣的問題。問題的原意大概是:我宣告了一個 Regex 並用迴圈去跑,但發現輸出的結果是不同的,程式碼如下:

let arr = ['2','5','3'];
let drgx = /\d/g;
arr.forEach((i,ind) => {
console.log('index: '+ind+' result: '+drgx.test(i))
})

如果有學過 Regex 應該都知道,\d 代表的是吻合數字(如果不知道也沒關係,因為我也很常忘記)g 則是代表 global,我第一次看到這段程式碼,直覺就是:輸出 3 個 true。實際上跑的結果:


最近在支援公司某項專案時,碰到了需要在頁面導入不同源頁面的狀況,在導入過程中由於不知道其高度,直覺上就打算使用 DOM Selector 去取 iframe 內的元素:

const iframe = document.querySelector("iframe");
iframe.onload = () => {
const iframeInner = iframe.contentWindow;
console.log(iframeInner);
};

前陣子就有稍稍了解過 $nextTick ,但一直沒想過有機會可以用,剛好同事碰到了需要用上它的時候,就想趁這個機會整理一下。

Vue 在更新 DOM 的時候是採用非同步去執行的,只要發現資料改變了,它會開啟一個隊列去緩衝同一個事件循環中的所有資料變化,去除不必要的部分,並在下一個事件循環”tick”中刷新隊列才實際執行工作,這可以讓它更有效率地去改變 DOM 的內容。

這樣講可能很抽象,我們可以很快地看個例子:

<template>
<h1>{{ info }}</h1>
</template>
<script>
export default {
name: "About",
data() {
return {
info: "Some text",
};
},
mounted() {
this.info = "some updated text";
console.log("origin:" + document.querySelector("h1").textContent);
this.$nextTick(() => {
console.log("updated:" + document.querySelector("h1").textContent);
});
},
};
</script>

2020 即將進入最後一個月,今天偶然在 Medium 首頁看到了 ES2021 這個關鍵字,就找了一些資料並且記錄在這邊。

EMCAScript 每年都會有一些新的特性被納入規範中,由一個稱為 TC39 的委員會負責這一塊,從提出到正式納入規範會歷經 strawman,隨後是 proposal > draft > candidate > finished 四個階段,通過後就會成為在年度發布的規範中,今天會記錄已經進入第四階段,將成為 ES2021 標準的新特性。

String.prototype.replaceAll

以往我們要在字串大量取代某個文字時都必須要使用正規表達式去達成:

const str = '江南可採蓮,蓮葉何田田,魚戲蓮葉間,魚戲蓮葉東,魚戲蓮葉西,魚戲蓮葉南,魚戲蓮葉北。'
const reg = /魚戲/gi
console.lo …


今天要記錄的是運用 Vue Cli 搭配 Vue Test Utils 撰寫前端測試。

為何要學習撰寫測試

任職前端以來的八個月,曾同時負責開發一個網站的前台和後台,由於時程較趕加上內測時間極短,在網站剛上線時發生了非常多問題,而在緊急修復這些問題的同時,又有「改了這個導致那個壞掉」的事情發生。在網站逐漸穩定後,想回頭來整理當初為了求快而留下的技術債,又擔心因此弄巧成拙,只能咬牙告訴自己 "If it ain’t broke, don’t fix it."。

此外,人工測試也會碰到「這個改動其實也影響到了組件B,但實際只測了組件A就發布」的問題。在自我檢討後,決定學習撰寫自動化測試來解決這些痛點。

Jest 是目前 Vue Test Utils 官方文件中推薦的測試工具,因此選擇它作為入門學習的工具


今天想要記錄的是之前因應顧客需求文章內容須要自帶朗讀器,運用 SpeechSynthesis 搭配 SpeechSynthesisUtterance 解決這問題的筆記。

SpeechSynthesis 是一個原生的 JavaScript API,它可以將一段文字轉換為語音並朗讀出來,其中也能透過 SpeechSynthesisUtterance 針對其語音進行簡單的控制,例如語言、語速、音調、音量等。

如果目前需要解決與語音發音有關的 API,又沒有太多時間可以研究,建議可先到 MDN 提供的 Demo 玩玩看。

準備一個簡單的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta nam …


還記得之前用 Node.js 寫 API Server 的時候,常常碰到撈資料時因為每筆資料的內容不盡相同,時常會需要使用三元運算子避免上面的情況發生,Optional Chaining 就很好地解決了這個困擾。前幾天我基於好奇到了 Babel 想看看 Optional Chaining 是如何運作的:


接續上篇,這篇主要記錄使用 Composition API 將 API Calls 模組化、

在前端作業中,串接 API 是我們很常進行的一個行為,在串接過程中,我們也可能會在每一次等待伺服器回傳結果前後進行一些固定的事情,例如加上 loading 提示、或在捕捉到錯誤時進行處理。假設我底下是我的一個組件:

<template> 
<div>
Input name: <input type="number" v-model="searchInput" />
<div>
<p>loading: {{ isLoading }}</p>
<ul>
<li v-for="(user, index) in users" :key=" …


有一陣子沒有寫部落格了,自從上工後第一份專案準備上線加上其他私事後,技術學習如 Vue SSR 解決方案 nuxt.js 、Vanilla JS 及前端相關知識等等的都是斷斷續續沒規劃地(想到才)學,昨天看到了神Q超人的這篇文,才驚覺自己已經很久沒有寫 Medium 了

Vue3 在兩天前正式釋出了,之前就一直常常看到 composition API 這個關鍵字,藉著這個時間點稍微了解了其使用方式,簡略做個筆記。

Composition API 只是 Vue3 中另一種編寫組件的方法 ,在 Vue3 中仍然可使用 Vue2 編寫組件的方法,其好處如下:

  • 提供更好的 TypeScript 支持
  • 組件太大,需要依功能分類時可使用
  • 需要跨組件使用程式碼
<!DOCTYPE html>
<html la …

Eason Lin

前端工程師,偶爾看看電影跟書

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store