HTML5 中的 Drag & Drop API 可以讓我們在瀏覽器中做到拖曳元素、排序元素、或者是讓使用者透過拖拉的方式把要上傳的檔案拉到瀏覽器當中。
在學習 HTML5 Drag & Drop API 時，最重要的是去區分 Drag Source 和 Drop Target，因為它們會需要各自去監聽不同的事件。
假設我們要把下圖中藍色的圓從左邊的區域移到右邊的區域，那麼：
Drag Source 指的是被點擊要拖曳的物件，也就是藍色的圓，通常是一個 element
Drop...
2017年8月25日
2017年8月24日
[筆記] 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式（Learn event loop, stack, queue, and concurrency mode of JavaScript in depth）
本篇內容整理自 Philip Roberts 在 JS Conf 的演講影片 What the heck is the event loop anyway? 和 MDN Concurrency model and Event Loop
如果你對於 JavaScript 的執行環境還不夠清楚，建議可以參考以下文章：
[筆記] 不同execution context的變項不會互相影響─了解function背後運作的邏輯
理解 Javascript 執行環境 @ Andyyou
單線程（single threaded）
首先，我們要知道 JavaScript 是單線程（single...
2017年8月10日
[App] Color Palette 簡單儲存搜尋色票匯出 SASS/SCSS
個人非常喜歡蒐集一些有的沒的顏色，雖然已經有一些可以儲存色票網站，像是 coolors, Adobe Color 等等，但是一方面它是 5 個顏色 5 個顏色一組，而且載入速度都稍微有點慢，今天來和大家分享一個簡單好用可以儲存、搜尋自己的色票，並匯出成 SASS/SCSS 的 Web APP - Simple Color Palette。
使用方式很簡單，其實好像也沒什麼好說明的...。
儲存色票
只要打入正確的色碼，並且可以幫這麼顏色取的名稱方便之後搜尋，在按下 「SAVE」：
搜尋顏色
匯出色彩
按下 「Export」後，可以將儲存的色票匯出成 SCSS／SASS...
2017年8月9日
如何在 Rails 中搭配 Turbolinks 使用 Vue （Use Vue in Rails with Turbolinks)
keywords: webpacker
說明如何在 Rails Turbolinks 中搭配使用 Vue。
Initialize the App
# initialize the app
rails new rails_sandbox_vue --database=postgresql --webpack=vue
# install package
bundle
yarn
Scaffold the app
# Scaffold the app
bin/rails g scaffold User name email
# Create database and migrate
bin/rails db:setup
bin/rails db:migrate
Create Vue Component
在 ./app/javascript/ 中建立...