星期四, 12月 29, 2016

[Objective-C] Youtube Oauth2 實作

記錄一下第一次寫iOS如何與Youtube Oauth2串接

首先要申請API KEY跟Oauth要用的Client ID


Oauth2的驗證url記錄 

https://accounts.google.com/o/oauth2/auth?client_id=<你的CLIENTID>.apps.googleusercontent.com&redirect_uri=http://localhost&scope=https://www.googleapis.com/auth/youtube&response_type=code&access_type=offline

403的爆炸

用webview直接丟Oauth2的連結,google會爆給你不允許存取的403 (disallowed_user-agent)



所以改用NSURLSession來處理request,在把結果丟給webview來呈現
成功後你會取得一個auth code: 例如


http://localhost/oauth2callback?code=

[Objective-C] 剛轉入寫iOS Objective的一些簡單筆記~

記錄一下菜到不行的初學者(我本人XD)Objective-C 寫的筆記

變數宣告strong跟weak


用segue轉到另一個view如何退上去的方法

[self dismissViewControllerAnimated:true completion:nil];


用Navigation控制轉viewController

By using below line we can go to parent view controller

[self.navigationController popViewControllerAnimated:YES];


By using below line we can move to main/root view controller

[self.navigationController popToRootViewControllerAnimated:YES];


By using below line we can move to any view controller

[self.navigationController popToViewController:viewControllerObject animated:YES];

星期日, 12月 25, 2016

[Objective-C] 初試一下youtube live streaming (一) 相關資源蒐集

記錄一下工作需要研究的youtube live streaming的呼叫

前置作業

要先到https://console.developers.google.com/ 要先開一個專案並申請api金鑰



帳號啟用直播功能

如果帳號未啟動直播功能,會噴以下錯誤

{
    error =     {
        code = 403;
        errors =         (
                        {
                domain = "youtube.liveBroadcast";
                extendedHelp = "https://www.youtube.com/features";
                message = "The user is not enabled for live streaming.";
                reason = liveStreamingNotEnabled;
            }
        );
        message = "The user is not enabled for live streaming.";
    };
}

可以登入youtube後,到以下連結開通直播功能
https://www.youtube.com/features





Oauth2 處理iOS Client/Server的連線


youtube官方文件

https://support.google.com/youtube/answer/2853700?hl=en&ref_topic=6136989


YouTube Live Streaming API Overviewhttps://developers.google.com/youtube/v3/live/getting-started

YouTube Live Streaming API Code Samples (JAVA/PHP/PYTHON)

Objective C libs for REST

星期一, 12月 19, 2016

[Lavavel] Laravel 5.2 could not open laravel.log

今天跑seed的時候發生laravel.log無法打開的錯誤。
找到StackFlow的解法如下:

http://stackoverflow.com/questions/35715400/laravel-5-2-could-not-open-laravel-log
Try the following commands on your shell:
  1. Clear Laravel cache and the compiled classes
    php artisan cache:clear
    php artisan clear-compiled
  2. Change the storage and cache directories permission
    sudo chmod -R 777 storage
    sudo chmod -R 777 bootstrap/cache
  3. Regenerate the composer autoload file
    composer dump-autoload

[Lavarel] elixir verison 爆掉

試一下version()方法來做版控就爆了

SyntaxError: Unexpected token s in JSON at position 41

at Object.parse (native)

at VersionTask.deleteManifestFiles (/var/www/你的專案/node_modules/laravel-elixir/dist/tasks/VersionTask.js:113:29)


如果遇到version錯誤的話,記得把public/build/rev-manifest.json的格式產生異常了,

可以手動修正。


星期三, 12月 14, 2016

[360] 一些有關於360的照片與影片的web播放技術


記錄一下怎麼在Web實作相關的360照片與影片的播放。
主要採用WebGL來處理,大部份的作者則透過three.js來操作WebGL


基礎觀念可以看的開源

簡單的three.js範例

http://www.emanueleferonato.com/2014/12/10/html5-webgl-360-degrees-panorama-viewer-with-three-js/

簡單的photo spheres製作

http://blog.mastermaps.com/2014/01/photo-spheres-with-threejs.html

簡單用three.js做的panorama video example => 基於three.js

https://gist.github.com/bellbind/9080f608a56c2637aec9


星期三, 12月 07, 2016

[Git] error: insufficient permission for adding an object to repository database .git/objects 異常處理

error: insufficient permission for adding an object to repository database .git/objects

今天在pull 的時候噴了這個錯誤~
找到了有人的解法如下

cd 
cd .git/objects
sudo chown -R : *

[jQuery Plugins] 號稱最好用的廣告輪播owl carousel套件



大部份的landing page都會在最上面放一個很大的廣告橫幅,
Owlcarousel為許多工程師首選的套件,支援RWD,以及多種的橫幅表達方式



http://owlgraphic.com/owlcarousel/

官網好像失效了,改到github https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html


[Gulp] 快快樂樂學Gulp與Lavarel Elixir

由於最近開始與後端工程師使用Lavarel框架+Angular實作系統
順便把拖了很久的Gulp前端工具記錄一下。

參考


http://www.slideshare.net/yvonne_yu/cp-gulp
http://www.slideshare.net/appleboy/automating-your-workflow-with-gulp
https://laravel.tw/docs/5.2/elixir#copying-files-and-directories
http://adamalbrecht.com/2014/06/20/building-your-angular-app-with-gulp-js/

星期二, 12月 06, 2016

[jQuery] 簡單易物的jquery gallery 套件: lightbox2


今天將公司的sharktech.tw 官網改了一下lightbox套件,於是找到Lokesh Dhakar這個作者寫的。
因為太好套了所以推給大家。只要加上data-lightbox這個屬性,即可做單張preivew或群組(gallery)的preview效果了。





[Webpack] 解決jquery在webpack載入全域的處理方法

webpack真是個很屌但不熟會搞死人的東西,
為了搞一個全域的jquery函式庫,
找到StackFlow裡面一個大神提供的各種解法

這位大大也有遇到一樣的事:D
https://blog.fntsr.tw/articles/2016/09/13/%E8%AE%93-jquery-%E5%9C%A8-webpack-%E4%B8%AD%E6%88%90%E7%82%BA%E5%85%A8%E5%9F%9F%E8%AE%8A%E6%95%B8/

備份文章

星期日, 11月 27, 2016

[Vue.js] 透過directive的機制整合tinymce 使用vue.js 1.x

找到人家wrapper tinymce的範例~

https://jsfiddle.net/edwindeveloper90/edjc82z0/
使用vue.js 1.x寫的
可以看一下怎麼轉2.x的語法



星期三, 11月 16, 2016

[Vue.js] 簡單上手的表單驗證外掛 vee-validator

由於目前專案使用vue.js 2.0,套用vue-validator會有異常。
於是找了另一個替代方案vee-validator,使用簡單好理解也好擴充。
可以參考官方文件: http://vee-validate.logaretm.com/#about

基礎範例


https://dotdev.co/form-validation-using-vue-js-2-35abd6b18c5d#.3j0nq7tne

星期二, 11月 15, 2016

[Wordpress] 讓所有頁面導向具體頁面

如果想把全站的page導向某一頁的話可以在functions.php加入一個action:
 template_redirect



function redirect_page_standard() {
  wp_redirect(  get_site_url() . '/notice.html', 301 );

}
add_action( 'template_redirect', 'redirect_page_standard' );

星期三, 11月 09, 2016

[Vue.js] 還不錯看的vue.js樣版: https://vue-admin.fundon.me/#/

在vue.js 台灣的社群看到的,覺得以後有機會採用。
先記錄一下。

https://vue-admin.fundon.me/#/

星期六, 11月 05, 2016

[jQuery] youtube iFrame API無法在iOS上播放影片的解決方法

測試youtube錯誤,最近幫客戶的網站套了jquery.youtubebackground.js RWD的jquery套件後,就噴了以下錯誤。

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match


 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match.

查了一下原來是這個套件用的是youtube的iframe api,因為在iOS上(safari 和chrome)執行playVideo()這個方法是會爆炸了,雖然有提到可以用cueVideoById("youtubeId")來處理。但用了還是不會播,所以目前的workaround就先讓程式判斷iOS不要先執行play,讓用戶自已點取影片。

http://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b

https://developers.google.com/youtube/player_parameters?hl=zh-cn#IFrame_Player_API

星期二, 10月 25, 2016

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

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




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

星期日, 10月 23, 2016

[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屬性警告

星期六, 10月 22, 2016

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

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


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






星期五, 10月 21, 2016

[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





星期三, 10月 19, 2016

[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/

星期二, 10月 18, 2016

[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

星期一, 10月 17, 2016

[CSS] css 特效hover on 和 off



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

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

終於可以順利倒帶 -,-

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

星期五, 10月 07, 2016

[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 開發的模組整合工具。
它的核心功能如下:
  • 可同時整合 CommonJSAMD 模組
  • 轉換 JSX, Coffee Script, TypeScript 等
  • 分散封裝專案使用的程式碼,使載入頁面時只需載入當頁所需的程式碼以加速載入速度
  • 整合樣式表 (css, sass, less 等)
  • 處理圖片與字型
  • 建置 production-ready 的程式碼 (壓縮)


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

星期四, 10月 06, 2016

[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当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊

星期二, 10月 04, 2016

[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大神的簡報


星期一, 10月 03, 2016

[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的設定屬性

星期日, 10月 02, 2016

[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

星期三, 9月 28, 2016

[Wordpress Plugin] MySimpleSpace計算硬碟使用空間


想要看一下wp用了多少主機空間,可以裝一下MySimpleSpace



這裡有一篇討論區也是教你寫一個dashboard的wigget來顯示空間,不過貼了會爆炸。
沒仔細看哪裡錯了,先筆記起來

http://wordpress.stackexchange.com/questions/67876/how-to-check-disk-space-used-by-media-library

星期一, 9月 26, 2016

[WordPress] TinyPNG外掛: 省空間的好幫手lol

最近虛擬主機的空機開始不足了,
感覺應該被幾個wp的站台用掉太多圖片空間,找了一下wp的圖片外掛,
原來TinyPNG也有出wordpress外掛,
在你安裝好TinyPNG外掛之後,
可以到TinyPNG申請開發者API KEY

https://tinypng.com/developers



就可以享受每個月五百張的額度。
另外壓縮圖片對於搜尋引擎最佳化(SEO)來說有正面的影響。

星期日, 9月 25, 2016

[php] PDO 批次插入與更新筆記

記錄批次插入並檢查已存在就更新的寫法



$sql = "INSERT INTO `table` (`id`, `name`) VALUES (?,?),(?,?) ON DUPLICATE KEY UPDATE `name` = VALUES(`name`) ";//將要批次插入的值放到 (?,?),看你要插入幾組
 $values = array(1, "test", 2, "so so");//要插入的值
 $stmt = $this->db->prepare($sql);//建立pdo statment
 $stmt->execute($values);//執行時把要插入的值丟入pdo



http://stackoverflow.com/questions/1176352/pdo-prepared-inserts-multiple-rows-in-single-query

https://gist.github.com/kublaios/007ee6b7b7936c6cd80a

星期三, 8月 31, 2016

[Wordpress] wp_users 與 wp_usermeta tables取值的key

記錄一下常用到get_userdata與get_user_meta常要用取值key的值!!!
  • users
    • ID
    • user_login
    • user_pass
    • user_nicename
    • user_email
    • user_url
    • user_registered
    • display_name
  • user_meta
    • first_name
    • last_name
    • nickname
    • description
    • wp_capabilities (array)
    • admin_color (Theme of your admin page. Default is fresh.)
    • closedpostboxes_page
    • primary_blog
    • rich_editing
    • source_domain

星期一, 8月 29, 2016

[MySQL] 如何判斷要插入新資料還是更新

今天要算一下統計表格需要的sql,如果資料已存在就要更新,反之就插入一筆,記錄一下。


Step1: 未設unique key是會失敗的

ALTER TABLE 你的表格名 ADD UNIQUE (要UNIQUE的欄位)



Step2:
INSERT ... ON DUPLICATE KEY UPDATE:



http://stackoverflow.com/questions/14383503/on-duplicate-key-update-same-as-insert

星期四, 8月 18, 2016

[Wordpress] sql查詢特色圖片(featured images)

如果要查詢縮圖的資訊直接查詢postmeta這張表_wp_attached_file這個meta_key即可。文章縮圖的id則為_thumbnail_id

[Wordpress] 使用自訂的sql抓取WMPL翻譯的文章類型

記錄如何自已下sql取得文章的多國類型,裝的外掛為WMPL。
請注意WMPL此外掛是將翻譯的關連資訊存到mywp_icl_translations



以下為sql語句


select
posts.ID,
posts.post_name,
posts.post_date,

IFNULL((SELECT PM.meta_value FROM mywp_postmeta AS PM WHERE posts.ID = PM.post_id AND PM.meta_key = "your_post_type"),'') as link,
IFNULL((SELECT PM.meta_value FROM mywp_postmeta AS PM WHERE posts.ID = PM.post_id AND PM.meta_key = "_thumbnail_id"),'') as thumbnail_id

FROM mywp_posts AS posts
where
post_status = 'publish'
AND
post_type = 'emel_ad_slider'
AND
ID
IN
(
select element_id from mywp_icl_translations
where element_type = 'post_your_post_type' and language_code = 'zh-hans'
)
order by posts.post_date desc

星期日, 8月 14, 2016

[Paypal] paypal direct payment 直接使用信用卡付款

測試paypal direct payment api的筆記過程。

Website Payments Pro 解決方案

https://developer.paypal.com/docs/classic/products/website-payments-pro/

在Website Payments Pro這一包的產品下,裡面包含以下的整合技術
Direct Payment, Express Checkout, and additional PayPal solutions and tools — like Virtual Terminal, Fraud Management Filters, and reference transactions.

簡介Website Payments Pro
https://developer.paypal.com/docs/classic/paypal-payments-pro/integration-guide/WPWebsitePaymentsPro/

星期一, 8月 08, 2016

[Wordpress] WooCommerce 自訂頁面呼叫相關API


今天要在自訂的php頁面呼叫wc的api記錄,因為老闆說要另外做一頁就這樣搞了XD不要問

載入WP的函式庫

require_once(dirname(dirname(__FILE__)).'/wp-load.php');


星期日, 8月 07, 2016

[Wordpress] 取出指定user meta值的用戶清單


這次想要在wordpress的帳號管理的查詢功能新增自已的user meta key查詢。
使用到的Hook分別為如下:

  • restrict_manage_users ACTION:

這個Action可以替users表格上面的filter區塊自訂我們要的html 語法,這次要做的效果一樣弄一個下拉式選單就OK了。送出後你會發現網址QueryString會加了我們指定的值

// Adds a dropdown to filter users based on a meta field
function add_recommand_filter_into_user_table() {

    global $pagenow;

    if (is_admin() && $pagenow == 'users.php') {
        $optNone = '';
        $optYes = '';
        $optNo = '';
        if(isset($_GET['recommand'])){
          if(strcmp($_GET['recommand'],'1') == 0){
            $optYes  = 'selected="selected"';
          }else{
            $optNo  = 'selected="selected"';
          }
        }else{
           $optNone  = 'selected="selected"';
        }

        echo '';
    }
}
add_action('restrict_manage_users', 'add_recommand_filter_into_user_table');



  • pre_get_users FILTER:


這個Filter簡言之就是要處理我們新增的action所送出的值為何,然後可以重改變動query物件的meta參數
// Updates user query based on filtering criteria
function query_recommand_query_from_user_table($query) {
 
    global $pagenow;

    if (is_admin() && $pagenow == 'users.php' && isset($_GET['recommand'])) {
        $recommandValue = wp_strip_all_tags($_GET['recommand']);
       
       if(strcmp($recommandValue,'') != 0){
          $meta_query = array(
            array(
           'key' => RECOMMAND_KEY,
           'value' => $recommandValue
           )
         ); 
   
         $query->set('meta_key', RECOMMAND_KEY);
         $query->set('meta_query', $meta_query);
        }   
    }
 
}

add_filter('pre_get_users','query_recommand_query_from_user_table');


參考


  1. http://wordpress.stackexchange.com/questions/189077/how-to-get-users-by-a-custom-field-by-user-meta-data
  2. http://www.davemccourt.com/wp-user-filtering/

星期四, 8月 04, 2016

[jQuery] 滿版的Dialog外掛

效果不錯的滿版型動畫Modal外掛,留著以後參考。


官方demo

http://joaopereirawd.github.io/animatedModal.js/



http://joaopereirawd.github.io/animatedModal.js/

星期三, 8月 03, 2016

[jQuery] 偵測元素是否進入到viewpoint外掛

今天想要處理偵測用戶scroll的位置判斷是否有進入指定元素viewpoint的議題。
找到以下三個jQuery外掛

http://imakewebthings.com/waypoints/guides/getting-started/

https://github.com/protonet/jquery.inview

https://github.com/morr/jquery.appear

比較過後,暫時先用inview即可解決,
其他二個外掛有比inview強的地方就是增加了offset的參數可設定。
不過inview有pull-request已解決這個功能




[jQuery] Offset 詳細圖


最近在做的專案需要detect 元素的位置,查了一下找到以下這張圖解。
可以清楚了解jQuery offset,筆記一下唷


星期一, 8月 01, 2016

[Wordpress] 擴充User management 的表格欄位

如果你想要自已擴充全部帳號(users.php)頁面,只需要透過二個hook機制就可以快速完成。
所以你就可以自已加欄位加按鈕,做更多客製化操作啦。


  • 使用filter hook: manage_users_columns來擴充欄位
  • 使用action hook: manage_users_custom_column來修改欄位值

範例


參考

https://www.tipsandtricks-hq.com/adding-a-custom-column-to-the-users-table-in-wordpress-7378

[Wordpress] 如何ajax來呼叫 php function

記錄一下如何在wp操作ajax function呼叫php function,意思就是你可以透過hook機制寫自已的api嚕

官網的sample說明


  • action命名規則wp_ajax_[你的方法]
  • action function 命名規則 [你的方法]_callback
tips: 請注意你的方法命名不可以長的不一樣,會無法對應呼叫

add_action( 'wp_ajax_my_action', 'my_action_callback' );

function my_action_callback() {
 global $wpdb; // this is how you get access to the database

 $whatever = intval( $_POST['whatever'] );

 $whatever += 10;

        echo $whatever;

 wp_die(); // this is required to terminate immediately and return a proper response
}

在頁面render一個jquery的方法(因為是範例所以方法很簡單,page_load之後就打)可以搭配admin_enqueue_scripts來整理你自已外掛所需的js
 jQuery(document).ready(function($) {

  var data = {
   'action': 'my_action',
   'whatever': 1234
  };

  // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
  jQuery.post(ajaxurl, data, function(response) {
   alert('Got this from the server: ' + response);
  });
 });

參考

https://codex.wordpress.org/AJAX_in_Plugins

[Wordpress] wp_enqueue_script / wp_enqueue_style 在wp自訂你的js與css檔

wp_enqueue_script 允許我們快速的在wp的頁面加入js函式庫,
反之 wp_enqueue_style讓我們加入樣式檔。

你可以寫法functions.php做全域的載入或至到外掛模組佈景主題裡面做客製化的載入唷

範例

以下範例教你怎麼加入bootstrap框架

function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

參考


  1. https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
  2. http://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress
  3. https://codex.wordpress.org/zh-cn:%E5%87%BD%E6%95%B0%E5%8F%82%E8%80%83/wp_enqueue_script

[jQuery] 視差滾動元件: scrollme 簡單、快速、好上手


最近在做某個網站使用視差效果,原來使用stellar.js,
但網頁滾動起來發生很卡的現像,非常不平滑。
於是又找了到 scrollme這個元件,由於我們的目的可以針對元件某些元素進行一些特效
加上scrollme的效能非常的平滑,使用語意也超級簡單(連教學都不用寫了XD),所以推給大家使用。


http://scrollme.nckprsn.com/

星期三, 7月 27, 2016

[Linux] 常用的一些Server狀態指令


記錄一下Server常用指令集

linux基礎的檔案目錄說明
目錄名稱說明
bin系統的一些重要執行檔Kill、cp、df
boot系統開機的一些載入檔 
cdrom光碟機裡的資料被掛上來的地方 
dosc開機時把dos檔案系統掛上來的地方 
etc系統設定檔 
home使用者的自家目錄所在、ftp server 
lib基本函數庫 
Lost+found系統檢查結果 
mnt可以掛上其它檔案系統 
proc整個系統運作資訊 
root系統管理者的自家目錄所在 
sbin一些設定的可執行程式、設定網路 
tmp雜七雜八的東西 
usr應用程式X-window
var記載著各種系統上的變數的地方 
vmlinuz系統核心檔案 

星期一, 7月 25, 2016

[MAMP] 手動變更php版本

如果想要自行變動php版本的話,可以下載php版本後
放置以下目錄


再修正httpd.conf

sudo vim /Applications/MAMP/conf/apache/httpd.conf


開啟後再修正版本模組即可

#LoadModule php5_module        /Applications/MAMP/bin/php/php5.6.10/modules/libphp5.so

#你想要的版本
LoadModule php5_module        /Applications/MAMP/bin/php/php5.6.24/modules/libphp5.so

[MAMP] Mac的php版本改用MAMP的php版本的方法

直接用MAMP來取代mac原本裝裝php5版本,

請參考下面流程,請注意MAMP_PHP改為你要使用的版本號即可

open terminal, type
touch ~/.bash_profile; open ~/.bash_profile
edit as follows below, save, quite and restart terminal or alternately
source ~/.bash_profile
to execute new PATH without restarting terminal
and in the fashion of the DavidYell's post above, also add the following. You can stack various variables by exporting them followed by a single PATH export which I demonstrated below
export MAMP_PHP=/Applications/MAMP/bin/php/php5.6.10/bin
export MAMP_BINS=/Applications/MAMP/Library/bin
export USERBINS=~/bins
export PATH="$USERBINS:$MAMP_PHP:$MAMP_BINS:$PATH"
http://stackoverflow.com/questions/4145667/how-to-override-the-path-of-php-to-use-the-mamp-path