weihanglo

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

weihanglo

// import Dispatch
import Foundation

let semaphore = DispatchSemaphore(value: 0)
let group = DispatchGroup()
let globalQueue = DispatchQueue.global(qos: .default)

print("Tasks started!!!")
print()

weihanglo

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+）

weihanglo

I/O Redirection 常用指令紀錄

grep、tr、sed、awk 是幾個很常見的標準串流 [Standard Streams][1] 處理工具，靠著regex的加持，這些工具使用在 I/O redirection 比起寫個python script快多了，唯一的壞處就是options太多，容易遺忘。本文主要紀錄上述工具使用筆記與心得。

（撰於 2016 年年初，致青春）

sed

sed 是 Stream EDitor 的縮寫，最常用來處理pipeline。特色是一次只讀取一行input到buffer處理，導向至「標準輸出(STDOUT)」後，再處理下一行。

weihanglo

Intro of ReactiveX

聽過 Reactive Programming 嗎？ReactiveX（Rx）是近來火紅的技術，帶動函數響應式程式設計的熱潮。本系列將從 Rx 最原始的概念解釋起，一步步認識 Rx 巧妙的設計理念。期盼讀完後，人人心中都能有 Reactive 的思維！

（撰於 2017-08-15）

weihanglo

Intro Rx - 2. Observer Pattern

本篇介紹 Rx 另一個重要的基礎概念 Observer pattern。

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

Definition

weihanglo

Intro Rx - 1. Iterator Pattern

本篇介紹 Rx 的重要基礎概念 Iterator pattern。

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

Definition

weihanglo

Understanding Error Handling in Swift

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

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

weihanglo

/**
 * 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'

weihanglo

/**
 * 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) {