[CSS] 三十個有趣的CSS特效

fb看人分享的，覺得裡面有很多選單特效就先記錄一下啦:D

http://www.hongkiat.com/blog/creative-css-animations/

[Vue.js] vue-router 2.0 使用筆記

記錄一下使用vue-router 2.0的筆記，高手請略過~

 在其他組件呼叫router

例如你會切一個Header.vue的組件，但可能做了什麼事之後要靠router轉頁就會用到

Header.vue如何import

app.js(我的vue app進入點)也要export你new出來的vue-router

router-link自訂active class

由於在2.0版後都使用router-link取代v-link，當router-link被觸發時，都會自已一個樣式router-link-active，你可以用linkActiveClass指定你自已的唷

router-link使用tag自定渲染元素

說明一下怎麼跟bootsrap的nav樣式結合，因為active的效果是在li，因此要自定一下router-link渲染的程式

[Vue.js] 單一組件(*.vue)檔案筆記

記錄一下剛接觸的新手踩雷的筆記XD

template標籤只能有一個根元素

如題，不然vue.js warn就會噴給你看XD

prop屬性警告

[Vue.js] ES6 在Vue.js的筆記

本篇記錄一下為了用組件式寫法隨手記的一些ES6筆記

了解Module模組(模塊)的import與export

[Vue.js] 自定義組件爆錯: Do not use built-in or reserved HTML elements as component

昨天用了vue-router來拆解同一層view的組件，

今天想說找一下怎麼用自訂定header/footer組件就爆下面的錯了lol

Do not use built-in or reserved HTML elements as component

[Laravel] 如何設定 lavavel elixir載入bootstrap的樣式

記錄一下如何在lavavel elixir載入bootstrap的樣式

基本載入

只需要簡單的二個步驟即可

Step1:

原本的專案內 resources/assets/sass/app.scss

會看到以下這個，拿掉原本的註解即可

  Step2:

打開gulpfile修改如下，使用方法為mix.sass的 webpack loader即可，其他code是自已專案的範例

客製化

參考

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

[Node.js] node 指令錯誤

今天在試著建構Vue+Lavavel開發環境，

發現node -v的cli的指令會噴以下錯誤

The program 'node' can be found in the following packages:
 * node
 * nodejs-legacy
Try: sudo apt-get install <selected package>

可以透過以下的指令來解決

sudo ln -s `which nodejs` /usr/local/bin/node

http://stackoverflow.com/questions/20057790/what-are-the-differences-between-node-js-and-node

[Wordpress] 如何傳遞變數至樣版

待處理..

參考

http://mekshq.com/passing-variables-via-get_template_part-wordpress/

[CSS] css 特效hover on 和 off

最近處理一個畫框的特效，效果要在hover的時候順時鐘畫，
原來只有注意hover 的時候加入線的寬，但沒考慮hover off的行為(讓框倒帶)
不過在這篇讓我想到哪裡要修正

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

終於可以順利倒帶 -,-

作品是朋友的網站大境建設 : thegand.com.tw

[Vue.js] Laravel + Vue.js 2.0安裝踩雷之旅

記錄一下整個Lavarel+Vue.js 2.0 踩地雷的過程。
主要參考此篇大大的教學，但沒有用fork的方法Q_Q。

Laravel 中使用 Vue 组件化开发（配置）

https://github.com/jcc/vue-laravel-example

前置環境

sudo apt-get install nodejs 

sudo apt-get install npm

[Vue.js] 建構大型應用程式

基本上的Vue.js是一個library，
如果要做大型專案要配合其他技術才會更完整，
這一篇記錄一下相關的技術資源。
學習前端之路整個變化太快了lol

主要的架構

採用Vue.js 2.0 (組件式寫法，要搭配webpack與es6 js的寫法) + Lavavel 5.2

ES6

由於比較想採用組件式(*.vue)寫法，所以要使用ES6的javascript寫作方式。
另外開一篇筆記記錄=> ES6 在Vue.js的筆記

Webpack 模組管理工具

Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。

它的核心功能如下:

• 可同時整合 CommonJS 和 AMD 模組
• 轉換 JSX, Coffee Script, TypeScript 等
• 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
• 整合樣式表 (css, sass, less 等)
• 處理圖片與字型
• 建置 production-ready 的程式碼 (壓縮)

如果在Lavavel裡面整合的話，請參考Lavarel Elixir (大大簡化使用gulp的流程)

其他webpack參考資源如下

http://webpack.vuefe.cn/

http://www.slideshare.net/newstory0113/webpack-52413453

[Vue.js] 組件筆記

記錄一下學習Vue Compoment的筆記

核心ViewModel類

1. 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2. 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3. 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
4. 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
5. 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。=> 要注意1.0與2.0有些事件已經改名字
6. 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊

[Vue.js] 記錄一下開始學Vue.js的資源

太久沒碰新的前端框架了，至angular 1.x之後就懶了(誤)，從去年就一直覺得Vue愈來愈火紅，但舊專案也沒使用的機會，今年打算在新的專案直接套用Vue.js 2.0 + Lavarel，當作今年的小目標好了XD。這篇記錄一些自已想要導入Vue所想到的問題與現在相關的處理方法~慢慢來更新 :D

想到的問題??

SEO
Google的爬蟲已有公告針對js framework所render出來的結構可以有效記錄了。
其他的解決方案還有prerender.io 與 pa

可以參考SSR章節有此問題的解法? http://vuefe.cn/guide/ssr.html

i18n

Router

Asset的precomplier

與jQuery/Bootstrap整合
https://segmentfault.com/a/1190000007020623


與Lavarel整合

第三方元件庫支援

Vue-strap (基於bootstrap)
https://yuche.github.io/vue-strap/#getting-started

iView 高質量組件庫

https://www.iviewui.com/

Element

http://element.eleme.io/#/

學習的簡報

1.0 完整的文件
https://cn.vuejs.org/guide/index.html

2.0 正在翻譯中的...
http://vuefe.cn/guide/

Kuro大神的簡報

http://www.slideshare.net/kurotanshi/vuejs-62131923

圖解vue2.0架構

http://jiongks.name/blog/a-big-map-to-intro-vue-next/

網路資源

幾乎什麼鬼都有了!!
https://github.com/vuejs/awesome-vue

http://jiongks.name/blog/code-review-for-vue-next/

[php] Fatal error: Maximum execution time of 30 seconds exceeded 超過最長執行時間錯誤

今天寫批次計算演算法時，

發生了此錯誤 Fatal error: Maximum execution time of 30 seconds exceeded

因為預設php是30秒，所以爆開了。

可以簡單為單一執行的程式加入set_time_limit

set_time_limit(0) //則是無上限

沒事不要設定全域的執行時間:D ，想不開可以在php.ini檔設定。

可以找到max_execution_time的設定屬性

[Bootstrap] 讓Modal滿版的樣式修正

為了想讓手機RWD的modal滿版效果感覺比較好，找到了下面的sample。

測試環境的bootstrap 3

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  box-shadow: none;
}

.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  padding: 10px;
  background: #6598d9;
  border: 0;
}

.modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.modal-body {
  position: absolute;
  top: 50px;
  bottom: 60px;
  width: 100%;
  font-weight: 300;
  overflow: auto;
}

.modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}

https://codepen.io/yewnork/pen/Kpaqeq