# 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
...
# git hooks 和其他版本控制系統一樣，當某些重要事件發生時，Git 有方法可以觸發自訂腳本。有兩組掛鉤(hooks)：用戶端和伺服器端。用戶端掛鉤用於用戶端的操作，如提交和合併。伺服器端掛鉤用於 Git 伺服器端的操作，如接收被推送的提交。你可以為了各種不同的原因使用這些掛鉤，下面會講解其中一些。
git hooks 簡單的說就是在進行版本控管時可以再額外多做一些事
Refer - Git 客製化 - Git Hooks
在以前我們公司在前端開發上是用前輩大大寫好的 hook 做一些事 但前輩大大們陸續離開後, 架構又改了 新專案沒法用原有的 hook 所以只好跳進來寫 hook 了
## 可以用來幹嘛? ### Client side lint 檢查 coding style 檢查 完善要推的 code 做自動化測試 … ### Server side deploy code to production auto build … ## 打算用來幹嘛? 身為一隻前端攻城獅, 只要顧好 client side 就好了 預計完成
phpcs jshint image trans to png8 ? multi-lang file check ?
...
# Firefox 10 週年歡慶派對 ## Intro 身為一隻前端攻城獅, 在 Firefox 3 時就開始使用它了
所以在 facebook 上看到這消息就立馬報名了
但最近剛忙完專案, 真的覺得快倒了, 在前一天還在想要不要取消報名在家休息
但身為一隻攻城獅熱血是必要的條件, 所以還是馬不停蹄地趕來參加了
也沒想到會遇到學弟在當 Firefox 志工, 上次看到他是在 COSCUP 2014 也稍微跟他聊了一下
## Session ### 首先大致講了一下 Mozilla taiwan 與 Firefox 的發展史 因為我是從 2.x 跨 3.0 開始使用
當時的印象就是吃記憶體, 很多操作行為會卡卡, 記憶體又一直飆高, 讓我的怒氣也一直飆高
當時 Google Chrome 剛起來, 所以就憤而投向 Google 的懷抱
就把 Firefox 當成第二瀏覽器
因為 Firefox 其他功能像是附加元件、自訂工具列(這功能很早就有了)…等很方便
當時 Developer 必裝的就是 firebug
But
Firefox 也陸續把一些以前要裝附加元件才能用的好用的開發工具整進去, 真是造福開發者
### 播放介紹的影片 一些關於 Firefox 開發時的發想與秉持的概念
...
# JavaScript - handle textarea value Handle textarea string.
// jQuery var textarea = $('textarea').val().replace(/\n/g, '<br>'); // JavaScript var textarea = document.querySelector('textarea').value.replace(/\n/g, '<br>');
...
# Compass - Use transform in compass 1.0.1 On august 15, 2014 Compass release 1.0.1 Some code in scss change wording. This article provide CSS3 transform wording in scss.
I use this Mixin
@import "compass/css3"; /*simple-transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y, $origin-x, $origin-y)*/ @include simple-transform(1, 45deg, 5px, -15px, 0, 0, 0, 0); /* Advance Usage */ /*@include create-transform($perspective, $scale-x, $scale-y, $scale-z, $rotate-x, $rotate-y, $rotate-z, $rotate3d, $trans-x, $trans-y, $trans-z, $skew-x, $skew-y, $origin-x, $origin-y, $origin-z, $only3d);*/ Refer - Compass Transform | Compass Documentation
...
# Web Develop - Flexible Footer Sometimes we think footer must fixed in website bottom or put it in last of content.
I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.
## Feature flexible only use CSS ## Usage min-height: calc(100% - <footer height>);
#hd { height: 50px; background: #aaa; /*display: none;*/ } #bd { text-align: center; min-height: calc(100% - 50px); /* important */ background: #ccc; } #content { padding-bottom: 60px; } #footer { position: relative; bottom: 50px; text-align: center; height: 50px; background: #999; } 50px is footer height
...
# Mac - SSHFS SSHFS can help Mac user mount remote support SSH protocol. Intro
Usage
## It has problem in oh-my-zsh!
...