Weihang Lo weihanglo

與 IE 相處的日子

近幾年來，JavaScript 可謂風生水起，從後端到前端，從 mobile 到 desktop，各種 module 滿天飛，信手拈來就是一個 web app。不過，「沒碰過 IE，別說你會做前端」，本人從超新手的角度出發，整理最近修正 IE 相容性遇到的坑與解法，給自己日後留個參考。

（撰於 2017-07-15，基於 IE 11／Edge 15）

Modern Concurrency in JavaScript - Async Functions

在前一篇介紹 [JavaScript Concurrency 的文章][weihanglo-promise]中，Promise 提供開發者安全統一的標準 API，透過 thenable 減少 callback hell，巨幅降低開發非同步程式的門檻，大大提升可維護性。不過，Promise 仍沒達到 JS 社群的目標「Write async code synchronously」。本篇文章將簡單最新的 Concurrency Solution「Async Functions」，利用同步的語法寫非同步的程式，整個人都變潮了呢！

（撰於 2017-06-17，基於 ECMAScript 7+）

Introduction

Modern Concurrency in JavaScript - Promises

所謂良好的使用者體驗，有個基本要求：「能即時回饋使用者的互動」。在 Mobile Native，常利用多線程（Multi-threading）分散主線程（main thread）的負擔，讓其能即時響應使用者點擊等事件。反觀 web 端的霸主 JavaScript，卻是易被阻塞的單線程（single-threaded）語言，不過藉由 Event Loop 的設計，仍可達成非同步操作，線程不至完全阻塞，或多或少彌補了單線程的不足。

眾所周知，[Concurrency is hard！][concurrency-joke]設計不良的非同步程式，絕對會讓你痛不欲生。本文將簡單介紹 Promise 這個現代 JavaScript Concurrency Features，讓 JS 新標準帶你從地獄回到~~另一個煉獄~~人間。

（撰於 2017-06-12，基於 ECMAScript 6+）

Generics in Swift

泛型程式設計（Generic Programming） 是經典的程式設計典範之一，不論是老牌的 C++，還是潮潮的 TypeScript，都能一睹泛型的風采。近年來，程式設計吹的是 static typing 風，泛型又開始被廣泛討論。

本篇將簡單介紹泛型的背景，再來理解並學習 Swift 語言的泛型寫法。

（撰於 2017-05-08，基於 Swift 3.1）

Understanding Error Handling in Swift

如何利用 Swift 的語言特性來處理例外？使用 Optional 是常見的做法。如果成功就返回 value，失敗則返回 nil，這種模式常用於簡單的狀況。然而，面對複雜的情況，例如網路請求，若只簡單返回 nil，調用者並無法得知是 404，抑或 500。為了解決這個問題，我們必須緊緊抱住[錯誤／例外處理][wiki-exception-handling]的大腿。

（撰於 2017-04-10，基於 Swift 3.1）

Front End Development Toolchain

在大前端的時代，開發 Web app 不再像以前使用一個 jQuery 的 CDN 這麼容易，從 html 模板的抉擇，css 預處理器的挑選，Javascript 模組化的方法，自動化工具的使用等等，都是一門學問。本文將從建置基本的前端開發環境起頭，簡單介紹~~個人愛用~~現代常用的前端開發工具。

（撰於 2017-03-10）

	/**
	* Calculate the rendered rect of img content (useful with object-fit: contain)
	* @param {HTMLImageElement} img
	* @return {object} rect of the object (the coordinate origin is top-left).
	*/
	export function getRenderedRect (img) {
	const style = window.getComputedStyle(img)
	const pos = style.getPropertyValue('object-position').split(' ')
	const contains = style.getPropertyValue('object-fit') === 'contain'

	/**
	* Get real element offset with an offsetParent referencing element
	*
	* `getBoundingClientRect` return values is not correct under CSS multi-column
	* layout, so we recursively get `offsetLeft`/`offsetTop` instead.
	* @param {HTMLElement} el - element of interest
	* @param {HTMLElement} stopEl - one of the offsetParent as a reference
	* @return {object} object wth top and left offset
	*/
	export function getClientOffset (el, stopEl) {

	/**
	* GET request with a cancelable token
	* @param {string} url - url to request
	* @param {objecg} token - an object with a `cancel` function property.
	* @return {Promise}
	*/
	export function cancellableGet (url, token) {
	const xhr = new XMLHttpRequest()
	return new Promise(function (resolve, reject) {
	token.cancel = function () {

	const blobURL = URL.createObjectURL(new Blob([ '(',

	function () {
	function fibonacci () {}
	onmessage = function (ev) {
	const result = processData(ev.data)
	postMessage(result)
	}
	}.toString(),