# Maker - GH60 RevCHN 拿了這板子有段時間了
一開始有試著用 Windows 刷 layout 進去, 但一直失敗(應該跟 Windows 不合吧
但直到前一陣子有人分享用 Mac 刷, 這真是太好了, 終於可以開工了
經過漫長的收集材料加焊接(詳情請見 GH-60 刷刷刷~開發月誌?)
廢話不多說
## Install crosspack & dfu-programmer 利用 homebrew 安裝
brew install Caskroom/cask/crosspack-avr brew install dfu-programmer ## git clone Firmware tmk_keyboard_custom
git clone https://github.com/kairyu/tmk_keyboard_custom.git ## Modify Config 進到拉下來的 tmk_keyboard_custom 目錄, 再進到 gh60 的目錄
cd keyboard/gh60 vim config.h 找到 #define CONFIG_H
在底下加上 #define GH60_REV_CHN
vim Makefile 註解或刪掉下面的
KEYMAP_IN_EEPROM_ENABLE = yes # Read keymap from eeprom ## Check Device 接上 gh60
...
# JavaScript - Use createElement or string? 常常討論在頁面上塞入新的 DOM 究竟是用哪種方式好
其實在現今是要看 browser 如何解析 JavaScript
所以目前沒一定的答案
以下為效能測試的數據
jsperf - dom-test-string-vs-createelement
雖然樣本數少
但依據上面的結果用 createElement 還是較有優勢
...
# CSS - Modify Pseudo Element Content 之前遇到個問題就是偽元素的內容(content)到底可不可以修改, 於是就求助於 Google
最後的答案是可以的, 而且還不少方法
Refer - Modify pseudo element styles with JavaScript
看下來就以下的方式個人覺得最好用
#red::before { content: attr(data-attr); color: red; } <p id="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p> setTimeout(function (argument) { document.querySelector('#red').setAttribute('data-attr', 'green'); }, 3000);
...
# Hubot - Develop log HUBOT
## Develop Environment Mac OS X ## Require nodejs(install from brew) redis(install from brew) ## install npm install -g yo generator-hubot 製作資料夾
mkdir myhubot cd myhubot 設定 hubot
yo hubot ? Owner: <bot owner> ? Bot name: <bot name> ? Description: <description about this bot> ? Bot adapter: <campfire or shell> 資訊會放在 package.json
Refer - Getting Started
## Use it
...
# JavaScript - Cross Module Communication When website modulize, need a better way handle cross module communcation.
Refer JavaScript design pattern’s observer pattern and Android EventBus
## Principle ## My Implement ## Example Hub is a array put publish object
publish object must include action and something want to do
var funcA = function () { alert('Red Alarm'); } publish('alarm', funcA); If more something to in same action
var funcA = function () { alert('Red Alarm'); } var funcB = function () { console.
...
# AJAX - REST 在 REST 當道的現在, 不得不了解一下如何實作 CRUD(create, read, update, delete) 本文 server side 以 php 為例子
var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.html', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('myDiv').innerHTML = xhr.responseText; } }; xhr.send(); 上面為一個簡單的 AJAX 行為
在此之前須了解在做 AJAX 行為時, 資料是如何跟 request 一起帶到 server side 大致上有 3 種
FormData application/x-www-form-urlencoded payload 前面 2 種是用傳統的 form 包起來一起帶到 server side 再經由 php 解析 GET / POST 由於 php 只有 $_GET & $POST 這無法達到真正的 rest(不過有人硬幹出來 tronice/epv) 所以必須由其他方式實作 最簡單的實作就是使用 $_SERVER['REQUEST_METHOD'] 來捕捉 4 種 request 的 method
...
# AJAX - XMLHttpRequest Introduction ## Intro 說到 AJAX 行為就不行不提到 XMLHttpRequest object
不知道現在的前端工程師還有人認識這個東西嗎?
當前 library 眾多(YIU, jQuery, AngularJS, Backbone.js…)
可能用過
Y.jsonp(url, callback); $.ajax(); $http(); …… 這些處理 AJAX 行為的 method
這些 library 在處理 AJAX 行為時其實都是 base on XMLHttpRequest
所以就來簡單說明一下這玩意, 了解這東西其實有助於處理 AJAX 行為
因為這算是在前端開發上會較接觸到網路 http Protocol 的東西, 也跟後端有較緊密的關係
## History 其實在早期 XMLHttpRequest 尚未定案下來時也有許多名稱
var httpRequest; if (window.XMLHttpRequest) { // IE7,Mozila,Safari... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE5,IE6 // 找出最新版MSXML剖析器 var msxmls = ["MSXML2.
...
# JavaScript - Detect CSS3 transitionEnd transitionend
It is a event can fired when CSS3 transition end.
function transitionEnd() { var el = document.createElement('div'), //what the hack is bootstrap transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' }; for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return transEndEventNames[name]; } } return false; // explicit for ie8 ( ._.) } // Usage document.
...
# JavaScript - Converting a JavaScript string to a html object var str = '<div id="myDiv"></div>'; var htmlObject = document.createElement('div'); htmlObject.innerHTML = str; /* htnkObject is obj; <div> <div id="myDiv"></div> </div> */ Refer - converting a javascript string to a html object
...
# PHP - install phpcs(PHP CodeSniffer) Use pear install phpcs
## in Linux(Ubuntu 14.04) sudo pear install --alldeps php_codesniffer ## in Mac(Mac OS X 10.10.1 Yosemite) ### install pear sudo curl -O http://pear.php.net/go-pear.phar then
sudo php -d detect_unicode=0 go-pear.phar Update
pear upgrade pear pear upgrade ### install codesniffer sudo pear install --alldeps php_codesniffer check
phpcs -i return
The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz and Zend if return
...