<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<ul>
<li><a href="#css-panel">CSS</a></li>
<li><a href="#html-panel">html</a></li>
<li><a href="#css3-panel">CSS3</a></li>
<li><a href="#html5-panel">html5</a></li>
<li><a href="#javascript-panel">javascript</a></li>
<li><a href="#jQuery-panel">jQuery</a></li>
<li><a href="#vue-panel">vue</a></li>
<li><a href="#react-panel">react</a></li>
<li><a href="#common-panel">common</a></li>
<li><a href="#other-panel">other</a></li>
<li><a href="#browser-panel">browser</a></li>
<li><a href="#font-panel">font</a></li>
<li><a href="#book-panel">book</a></li>
</ul>
</header>
<ol>
<li><a href="http://liuyan5258.github.io/2015/10/23/front-ready/">如何用gulp搭建一個自動化的(gulp+browserify+react+less+es6)前端開發環境</a></li>
<li><a href="https://github.com/liuyan5258/react-example">用gulp搭建一個自動化的（gulp+browserify+react+less+es6）前端開發環境</a></li>
<li><a href="http://my.oschina.net/u/1403181/blog/672501">webpack+react+es2015輕鬆環境搭建，配置，執行專案</a></li>
<li><a href="http://www.imooc.com/article/7221">webpack學習實踐系列(一)</a></li>
<li><a href="http://www.w3cfuns.com/notes.php?mod=view&u=27029&id=44c0113bdbdb3e6b20a693fe35d27035">express+webpack+react搭建專案</a></li>
<li><a href="https://github.com/fwon/blog/issues/17">gulp + webpack 構建多頁面前端專案</a></li>
<li><a href="https://github.com/eyasliu/webpack-gulp-react-dev-env">Webpack + Gulp 搭建 React 開發環境</a></li>
<li><a href="https://cnodejs.org/topic/56cd8675d8d481361ac7f632">ES6 + Express + Babel + Gulp + React + Webpack</a></li>
<li><a href="http://blog.callmewhy.com/2015/11/09/use-react-with-babel-and-webpack/">使用 Babel + React + Webpack 搭建 Web 應用</a></li>
<li><a href="https://cnodejs.org/topic/559b94fa1e5c761761468831">fis3也出來了, 分享一個我這幾天弄的fis3+vue+...的開發環境</a></li>
<li><a href="http://www.html-js.com/article/3137">基於vue.js和webpack的Chat示例</a></li>
<li><a href="https://www.zybuluo.com/jeffjade/note/288801">Gulp+Webpack+Vue</a></li>
<li><a href="https://www.zybuluo.com/jeffjade/note/324124">Vue(Webpack+Gulp+Sass+Jade)開發流程</a></li>
<li><a href="https://github.com/MeCKodo/webpack/tree/master/SPA%E7%89%88">webpack_SPA版</a></li>
<li><a href="http://hcysun.me/2016/03/25/%E5%9F%BA%E4%BA%8Ewebpack%E5%92%8Cvue.js%E6%90%AD%E5%BB%BA%E7%9A%84H5%E7%AB%AF%E6%A1%86%E6%9E%B6(%E5%85%B6%E5%AE%9E%E4%B8%BB%E8%A6%81%E7%94%A8%E4%BA%8EHybrid%E5%BC%80%E5%8F%91H5%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%8C%E4%BD%86%E6%98%AF%E4%BE%9D%E7%84%B6%E8%83%BD%E5%A4%9F%E4%BD%9C%E4%B8%BA%E7%BA%AFweb%E7%AB%AF%E4%BD%BF%E7%94%A8)/">基於webpack和vue.js搭建的H5端框架(其實主要用於Hybrid開發H5端框架，但是依然能夠作為純web端使用)</a></li>
<li><a href="https://segmentfault.com/a/1190000003969465">gulp + webpack 構建多頁面前端專案</a></li>
<li><a href="https://www.zybuluo.com/pockry/note/141157">使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用</a></li>
</ol>
<ol>
<li><a href="http://es6.ruanyifeng.com/">《ECMAScript 6入門》阮一峰</a></li>
<li><a href="http://www.ibm.com/developerworks/cn/web/1501_chengfu_browserify/">通過 Browserify 在瀏覽器中使用 NodeJS 模組</a></li>
<li><a href="http://blog.jobbole.com/78825/">browserify執行原理分析</a></li>
<li><a href="http://segmentfault.com/a/1190000000711469#articleHeader2">Gulp思維——Gulp高階技巧</a></li>
<li><a href="http://www.gulpjs.com.cn/docs/api/">gulp api文件</a></li>
<li><a href="http://www.csdn.net/article/2015-05-24/2824757-building-modular-javascript-applications-in-es6-with-react-webpack-and-babel?reload=1">基於ES6，使用React、Webpack、Babel構建模組化JavaScript應用</a></li>
<li><a href="http://www.tuicool.com/articles/rY7FR32">React 入門–高效開發環境的搭建</a></li>
<li><a href="http://qiita.com/hkusu/items/e068bba0ae036b447754">React.js + Babel + Browserify + gulp の環境を作ってみた</a></li>
<li><a href="http://www.tuicool.com/articles/MFjAZn6">在 Gulp 中使用 Browserify</a></li>
<li><a href="http://blog.csdn.net/woxueliuyun/article/details/39294375">package.json欄位全解</a></li>
<li><a href="http://www.jianshu.com/p/tY6UPN">當 React 遇見 Gulp 和 Browserify</a></li>
<li><a href="https://webpack.github.io/docs/webpack-for-browserify-users.html">WEBPACK FOR BROWSERIFY USERS</a></li>
</ol>
<article>
<section>
<h2>CSS</h2>
<div class="" id="css-panel">
</div>
</section>
<section>
<h2>html</h2>
<div class="" id="html-panel">
<div class="meta-tag">
<p>head中的meta標籤</p>
<a href="https://gold.xitu.io/entry/5727f06f2e958a0065778508"></a>
<p><a href="https://github.com/xiaoyu2er/HEAD"><head>標籤中到底可以放什麼?</a></p>
<p><a href="https://segmentfault.com/a/1190000002407912">常用meta整理</a></p>
<p><a href="https://segmentfault.com/a/1190000004279791">HTML meta標籤總結與屬性使用介紹</a></p>
</div>
</div>
</section>
<section>
<h2>CSS3</h2>
<div class="" id="css3-panel">
<p><a href="http://cubic-bezier.com/#.17,.67,.83,.67">CSS3 貝塞爾曲線 cubic-bezier</a></p>
<p><a href="http://matthew.wagerfield.com/parallax/">parallax.js 重力陀螺動畫</a></p>
</div>
</section>
<section>
<h2>html5</h2>
<div class="" id="html5-panel">
</div>
</section>
<section>
<h2>javascript</h2>
<div class="" id="javascript-panel">
</div>
</section>
<section>
<h2>jQuery</h2>
<div class="" id="jQuery-panel">
<div>
<h3><a href="http://web.jobbole.com/84028/">前端開發者都應知道的 jQuery 小技巧</a></h3>
<ol>
<li>回到頂部按鈕</li>
<li>預載入圖片</li>
<li>檢查圖片是否載入完畢</li>
<li>自動修復損壞的圖片</li>
<li>Hover 上的 Class 開關</li>
<li>禁用 input 欄位</li>
<li>停止連結載入</li>
<li>淡入淡出/滑動開關</li>
<li>簡單的摺疊效果</li>
<li>將兩個 Div 設為相同高度</li>
<li>在新視窗開啟外部連結</li>
<li>找到文字元素</li>
<li>切換可視與隱藏的觸發器</li>
<li>Ajax 呼叫的錯誤處理</li>
<li>鏈式操作</li>
</ol>
</div>
</div>
<p><a href="http://www.ithao123.cn/content-1094359.html">js和jquery設定disabled屬性為true多個例項</a></p>
<p><a href="http://13473996167.iteye.com/blog/2275389">用jquery設定按鈕的disabled屬性來實現按鈕的禁用</a></p>
</section>
<section>
<h2>vue</h2>
<div class="" id="vue-panel">
</div>
</section>
<section>
<h2>react</h2>
<div class="" id="react-panel">
</div>
</section>
<section>
<h2>common</h2>
<div class="" id="common-panel">
<p><a href="https://github.com/weixin/PageSlider">PageSlider -- 移動端滑屏元件</a></p>
</div>
</section>
<section>
<h2>other</h2>
<div class="" id="other-panel">
<div class="ffmpeg">
<h3>static FFmpeg binaries for Mac OS X Intel 64bit</h3>
<p>FFmpeg是一個自由軟體，可以執行音訊和視訊多種格式的錄影、轉換、流功能[1]，包含了libavcodec——這是一個用於多個專案中音訊和視訊的解碼器庫，以及libavformat——一個音訊與視訊格式轉換庫。</p>
<a href="http://evermeet.cx/ffmpeg/">靜態FFmpeg</a>
</div>
</div>
</section>
<section>
<h2>browser</h2>
<div class="" id="browser-panel">
<p><a href="http://www.w3cfuns.com/notes/24383/c3a6e18768cb0ba32decac4a6e9e4478.html">十款 Chrome 擴充套件幫你在前端開發中增加編碼效率</a></p>
</div>
</section>
<section>
<h2>font</h2>
<div class="" id="font-panel">
<p><a href="http://font-spider.org/">字蛛是一箇中文字型壓縮器</a></p>
</div>
</section>
<section>
<h2>book</h2>
<div class="" id="book-panel">
<p><a href="https://github.com/cssmagic/CSS-Secrets">CSS揭祕</a></p>
</div>
</section>
<section>
<h2>font</h2>
<div class="" id="font-panel">
</div>
</section>
</article>
</body>
</html>