[Gulp] Gulp plugin

• Gulp plugin

Gulp plugin，you can find more here http://npmjs.com 

gulp-purifycss

Clean unnecessary CSS

refer to:

https://rgba.hackpad.com/How-to-use-Gulp-GX5upGWCeLh

[React Snippets] React.findDOMNode & jQuery

React.findDOMNode & jQuery

In React v0.13 use React.findDOMNode()

'Use React.findDOMNode(component) instead.'

React.findDOMNode(this.refs.main).value.trim();

var _el = React.findDOMNode(this.refs.main);

$(_el).tooltip();

refer to:
http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html#new-features

[JS] Use console.group for debugging

Grouping Log Messages Using console.group()

You can group related log statements by surrounding them with the console.group()and console.groupEnd() functions:

console.group("URL Details");
console.log("Scheme: HTTPS")
console.log("Host: example.com");
console.groupEnd();

refer to:
http://www.jquerybyexample.net/2015/01/javascript-logging-using-console-group.html
https://developer.chrome.com/devtools/docs/console-api
https://developer.mozilla.org/en-US/docs/Web/API/Console

[Node] Implement Isomorphic (Express + React)

Implement Isomorphic With Express + React

https://github.com/CityRay/express_Isomorphic_reactjs_test

refer to:
https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/
http://jmfurlott.com/tutorial-setting-up-a-simple-isomorphic-react-app/
http://reactjsnews.com/isomorphic-javascript-with-react-node/
http://react.rocks/tag/Isomorphic
http://isomorphic.net/libraries

[iOS] Free Sources To Learn Swift

Swift Blog

Learn Swift Build Your First iOS Game

SwiftV课堂

IOSwift.org

[Front-End] Notes Front-End Libraries, Frameworks, Plugins

JS Framework:

• React.JS (React Rock)
• Angular JS

CSS Framework:

• Foundation.zurb
• Bootstrap

Animation:

• GreenSock
• Velocity.js
• jQuery Transit
• animatable
• Animate.css
• WOW.js
• Dynamics.JS
• Css Animated Headlines

Chart:

• Highlight.js
• NVD3.js

Page Layout or Effect:

• Masonry
• Skrollr
• FullPage.js

Slider or Presentation:

• Swiper (mobile touch slider)
• Slider Pro
• Fotorama
• Reveal.js

Utilities:

• Momentjs
• _lodash
• Select2
• jQuery File Upload
• Immutable Js
• Normalize.css

WYSIWYG Editor:

• ContentTools

Test:

# Frnnt-End Framework  Reference Javascripting, maybe you find more useful 
   Continue to collect...


other:

• jQuery Rain
• Github资源收集

[NPM] npm check updates

If you have the list of dependencies and dev-dependencies for your application( update your package.json). To see what needs to be upgraded, we can use a super-handly Node.js module called npm-check-updates. Using this application is easy; first, install it globally (I recommend installing it globally, since you should be using this for all your projects which rely on NPM!) by running npm install -g npm-check-updates, and second, run ncu within the your application directory.

Then you need to run npm upgrade which will upgrade all the packages to the latest version found in package.json. 

[Linux] Jpeg, PNG Image Optimization / Compress on Centos

運用 jpegoptim & Optipng 進行圖片壓縮，並安裝於 Centos 6.5 (x86_64)系統，以下為安裝步驟：

Step 1.

• 安裝擴充套件( EPEL Repo)於 CentOS 6.5 (x86_64)：
  

         
      rpm -ivh http://dl.fedoraproject.org/pub/epel/6Server/x86_64/epel-release-6-8.noarch.rpm
   

Step 2.

• 安裝 jpegoptim & Optipng：
  

         
      yum install jpegoptim optipng
   

[QR Code] 線上製作 QR Code 工具

QRHacker：
運用QRHacker QR Code 線上製作工具，可以加上特別設計的Logo圖片，可創造出不一樣的QRCode設計圖。

[WEB] HTML5 Developer Tools & Cloud IDEs

HTML5 Developer Tools & Cloud IDEs...

Detection：

•     Modernizr： 用來偵測瀏覽器對 HTML5 / CSS3 支援程度的Library。

[JS] 在IE8下支援 HTML5 和 CSS3

        為了在 IE 8 版本以下瀏覽器支援  HTML5 和 CSS3語法，可以運用 Html5shiv.js 和 Respond.min.js 這兩隻 JS 來讓 IE 6, IE 7, IE 8瀏覽器能支援HTML5 和 CSS3語法。


在head區加入 meta 標籤：

<!--[if lt IE 9]>
  <script type="text/javascript" src="js/html5shiv.js"></script>
  <script type="text/javascript" src="js/respond.min.js"></script>
 <![endif]-->

[工具] Sublime Text 2 安裝紀錄

以下整理 Sublime Text2 文字編輯器的安裝方法及相關套件。

●. 第一個安裝的plugin：(https://sublime.wbond.net/installation#st2)

先按ctrl+`，並貼上下列命令：

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

[.net] asp.net 驗證控制項

asp.net 驗證控制項 ：

1. 驗證使用者是否輸入資料 (RequiredFieldValidator)
2. 驗證 e-mail 格式 (RegularExpressionValidator)
3. 驗證 行動電話 格式 (RegularExpressionValidator)

[CSS] Normalize 重置樣式

Cross-Browser Issues，CSS Reset 的另外一種選擇，但不支援「IE 6」及「IE 7」兩個版本


連結：Normalize.css

[CSS] CSS Layout 產生器

CSS Layout 產生器連結整理：

1. Webcodetools
2. CSSLayoutGenerator.com
3. LAYERSTYLES(CSS3)
4. CSS Portal
5. Little Boxes
6. GenerateIt
7. CSSTableGenerator(Table)
8. CSSTableGenerator2(Table)

[CSS] Reset 重置樣式

CSS Reset 介紹連結整理：

http://www.cssreset.com/

http://ithelp.ithome.com.tw/question/10129547

[CSS]New CSS Image Replacement

Reference：
Discovered by Scott Kellum 
promoted at Zeldman.com

Online Tools for image optimization

透過圖片壓縮工具來壓縮圖片，再不會損壞太多照片品質的情況下，來減少儲存圖片所需的空間，以下為線上圖片壓縮工具：

[Linux]Shell Script Check Httpd 範例

這範例為判斷httpd目前的執行數量，如果執行數量超過100將進行重啟動作。
程式碼參考如下：

[Linux]Using the PageSpeed Module (apache)

Google 所發佈的前端頁面優化 Module，參考：Google PageSpeed

安裝方法(apache / centos)：
1.下載 Stable Version(穩定版) mod_pagespeed 64-bit .rpm (CentOS/Fedora)
2.#sudo yum install at
3.#sudo rpm -U mod-pagespeed-*.rpm
4.修改 /etc/httpd/conf.d/pagespeed.conf， 將 ModPagespeed 設定為 on
5.#service httpd restart

進階設定參考