Front-end Note Blog

Hello! I'm a 25 years old web developer from Taiwan currently based in Yunlin. I love everything that has to do with web design & development, front-end engineering, photography, and I feel a true devotion for web development.

[frontendnote]

the <textarea> of the future

[frontendnote]

[frontendnote]

圖片來源:softuni Javascript 從1995演變至今，已經成為主要最流行的程式語言之一。其中，主要的革新關鍵在幾項特點: 非阻斷式(non-blocking)、事件驅動...

[frontendnote]

慕课网

[frontendnote]

[frontendnote]

加入text-overflow:ellipsis; \\讓文字超出範圍後可以呈現...

[frontendnote]

Introducing Extract for Creative Cloud.psd

Here you can access, view, and share creative files saved in Adobe Creative Cloud from virtually any internet-connected device.

[frontendnote]

A set of small, responsive CSS modules that you can use in every web project.

Pure CSS framework

[frontendnote]

jQuery 偵測瀏覽器版本

[frontendnote]

FullPage.js

fullPage.js - fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

Ref:

http://w3ci.com/plugin/655.html

http://download.w3ci.com/jquery/fullPage/77/index.html

[frontendnote]

Free Tempalte

Latest free PSDs & other resources for designers

[frontendnote]

CSS 背景位置 background-position 用法

background-position: 25% 50%;      /* 水平 25% ，垂直 50% */

background-position: 50px 25px;    /* 水平 50px ，垂直 25px */

background-position: center;       /* 水平垂直都 50% */

background-position: bottom right; /* 水平 100% ，垂直 100% */

Ref:

http://www.w3school.com.cn/cssref/pr_background-position.asp

[frontendnote]

JQuery find() 用法

ex. $(this).find("img") 

尋找當前元素下子元素

Ref:

http://raylee0616.blogspot.tw/2013/09/jquery-find-chidren-filter.html

http://www.w3school.com.cn/jquery/traversing_find.asp

[frontendnote]

Selenium IDE 網頁應用程式測試工具

http://www.seleniumhq.org/

Reference:

http://pulipuli.blogspot.tw/2011/07/selenium-ide.html#postcata1418279503814_anchor4

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

[frontendnote]

Grunt: 網站開發自動化執行工具

Grunt官網: http://gruntjs.com/

Grunt中文官網:http://www.gruntjs.net/

Available Grunt plugins http://gruntjs.com/plugins

◎ Development：

grunt-contrib-sass //sass編譯

grunt-contrib-coffee //coffee編譯

grunt-contrib-jshint //js語法檢查

grunt-contrib-watch //觀察檔案變更

◎ Release：

grunt-contrib-concat //JS合併

grunt-jsmin-sourcemap //JS壓縮、 最小化min

grunt-contrib-cssmin //CSS合併、 最小化min

grunt-contrib-htmlmin // html 壓縮

grunt-image // Image 壓縮

Test task

grunt.registerTask('test', ['jshint', 'qunit']);

Dev task

grunt.registerTask('dev', ['sass', 'coffee']);

Release task

grunt.registerTask('default', ['htmlmin', 'image', 'sass', 'cssmin', 'coffee', 'concat', 'jsmin-sourcemap']);

Reference:

http://www.gtwang.org/2013/12/grunt-javascript-task-runner.html

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

[frontendnote]

Less, Sass, Compass and CoffeeScript GUI編譯工具

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

http://koala-app.com/

[frontendnote]