2017年1月27日 星期五

Angular 2 Smart Data Table component

akveo/ng2-smart-table: Angular 2 Smart Data Table component

似乎不錯的 data table component

可以行內編輯、新增、刪除,還有分頁、排序、過濾功能

How to Mixing Side Menu and Tabs in Ionic 2

How to Mixing Side Menu and Tabs in Ionic 2

ionic 2 中混合使用 side menu 與 tabs,還有問題解決

Ionic 2 Firebase Email Authentication Tutorial

Ionic 2 Firebase Email Authentication Tutorial

ionic 2 使用 Firebase email 認證之實作

Laravel Random Keys with Keygen

Laravel Random Keys with Keygen

隨機產生 數字、英數字、token、bytes

gladchinda/keygen-php: A fluent PHP random key generator.

Complete Usage Guide

API Documentation

SMPlayer 也開始支援 Chromecast 了

SMPlayer 17.1 Features 'Experimental Support' for Chromecast - OMG! Ubuntu!
SMPlayer 越來越好用了

2017年1月25日 星期三

巢狀關聯 in Laravel

Laravel – Nested Relationship Revised | Sheikh Heera

文章可以有回覆

可以針對某一則回覆做回覆 => 這就產生巢狀關聯了,自己關聯自己

Laravel 當 API 從 DB 回傳資料給前端保持數字型別的方法

嗯,下次試試,之前是在 model 中 protected $casts 處理的。

return response()->json($datas)
                                  ->setEncodingOptions(JSON_NUMERIC_CHECK);

2017年1月24日 星期二

ng2-youtube-player component

ng2-youtube-player - 利用angular 2封装易于使用的一个youtube组件 - JavaScript开发社区 | CTOLib码库

GitHub:orizens/ng2-youtube-player: a youtube component wrapped with angular 2

似乎不錯用的樣子....

html5 - Playing audio with Javascript

html5 - Playing audio with Javascript? - Stack Overflow

howler.js - Modern Web Audio Javascript Library - GoldFire Studios

HTML Audio/Video DOM Reference

angular2 - Trying to import an npm module (Howler) in Angular 2 app - Stack Overflow

一些參考文章,以後可能用得到

Build a Music Player with Angular 2+ & Electron

Build a Music Player with Angular 2+ & Electron I : Setup & Basics Concepts

Build a Music Player with Angular & Electron II : Making the UI

Build a Music Player with Angular & Electron III : Bringing It All Together



GitHub:christiannwamba/scotch-ng-music-player

About Fetch API

How to Use the JavaScript Fetch API to Get Data | Scotch

深入浅出Fetch API

基本RWD版型設計

[筆記] 基本RWD版型設計 | PJCHENder愛分享

值得參考喔

CSS:+、~、> 是什麼意思?多重選擇器?

CSS中加號(+)和取代符號(~)的意思 | PJCHENder愛分享

CSS中的大於(>)是什麼意思? | PJCHENder愛分享

[教學] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號 | PJCHENder愛分享

a b

a>b

a+b

a~b

以上四種傻傻分不清楚?來看看吧~~

其他參考資料:CSS selectors

好用的css 3新單位vh vw

[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同 | PJCHENder愛分享

vh => view height 可視範圍之高度

vw => view width 可視範圍之寬度

如何利用Bootstrap的標籤(Tabs)和導覽列(Navigation Bar)

如何利用Bootstrap的標籤(Tabs)和導覽列(Navigation Bar) | PJCHENder愛分享

解釋得很詳細喔,推!!

Random User Generator

Random User Generator | Home

有時需要假資料,卻偷懶不想動資料庫?Try this .....

What’s new in Docker Compose v3

What’s new in Docker Compose v3 – Medium

看看 docker compose v3 有哪些新玩意兒

Working with Docker v1.13 CLI -Management commands

Working with Docker v1.13 CLI -Management commands – Medium

Docker 1.13 命令速查表


webpack优秀中文文章

webpack-china/awesome-webpack-cn: webpack优秀中文文章

對岸同胞整理的,簡體中文加減看啦

How To Auto-Validate Eloquent Models On Laravel 5.3

How To Auto-Validate Eloquent Models On Laravel 5.3

利用 事件 與 反射 實作的

2017年1月20日 星期五

Chrome开发者工具的小技巧

Chrome开发者工具的小技巧 | | 酷 壳 - CoolShell

實用,收藏起來

VueCircleMenu: A beautiful circle menu with Vue.js

GitHub - OYsun/VueCircleMenu: A beautiful circle menu with Vue.js

好酷的選單呦

JS30 系列筆記

[筆記] JS30 系列 Day0 - 課程說明 | PJCHENder愛分享

作者真是佛心來的呀~~

follow 下去囉

Using Kendo UI With Angular 2

Using Kendo UI With Angular 2 -Telerik Developer Network

不錯的入門參考

同場加映:

Tutorial: Add bootstrap to angular-cli apps – Medium

透過Dexie套件對indexedDB進行CRUD

GitHub - teed7334-restore/Dexie: 透過Dexie套件對indexedDB進行CRUD

還沒用過 indexedDB,收下來參考先

2017年1月8日 星期日

Git Submodule

Git Submodule使用完整教程 - 咖啡兔 - HenryYan  ==> 推

Git Submodule 介紹與使用 | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY

Git Submodule 新增、使用 與 移除 - Tsung's Blog

Git Submodule 用法筆記 - @ChingHanHo

[ 練習 ] Laravel Route Model Binding

Laravel 版本:5.3

Implicit Binding

1:  Route::get('api/users/{user}', function (App\User $user) {  
2:    return $user->email;  
3:  });  

uri 參數:user
function 參數:$user

相符合,則依據 uri 參數之值找出 App\User 物件(預設依據 id 欄位),若找不到則會發生 404 error

若不符合,則 $user 為 空(似乎沒有進行查詢?)

下例即為不符合的例子:
uri 參數:u
function 參數:$user

Explicit Binding

在 RouteServiceProvider 中的 boot method 加入 Route::model,明確指定 uri 參數 user 對應查找 App\User 物件:

1:  public function boot()  
2:  {  
3:    parent::boot();  
4:    
5:    Route::model('user', \App\User::class);  
6:  }  

註:這邊要注意是 \App\User,官網文件 App\User 是錯的

若 uri 參數名稱為 u,則應更改為:

5:  Route::model('u', \App\User::class);  

自訂搜尋欄位

預設搜尋 id 欄位,在 model 中加入:

1:  /**  
2:   * Get the route key for the model.  
3:   *  
4:   * @return string  
5:   */  
6:  public function getRouteKeyName()  
7:  {  
8:    return 'slug';  
9:  }  

則搜尋欄位變更為 slug 欄位

自訂搜尋規則

在 RouteServiceProvider 中的 boot method 加入 Route::bind:

1:  public function boot()  
2:  {  
3:    parent::boot();  
4:    
5:    Route::bind('user', function ($value) {  
6:      return \App\User::where('name', $value)->first();  
7:    });  
8:  }  

則 route uri 中 {user} 均會套用此搜尋規則

例如:

1:  Route::get('profile/{user}', function ($data){  
2:    return $data;  
3:  });  

uri 為:profile/admin

則 $data 為 App\User 物件,name = admin 的第 1 筆紀錄



參考:Routing - Laravel - The PHP Framework For Web Artisans

[ 練習 ] 使用 Laradock 建立 Laravel 開發環境

laradock/laradock: A Docker PHP development environment.

以下是在 Laravel 專案下安裝 Laradock(各專案獨立)

OS: ubuntu 16.04 x64

步驟:

1. 建立 Laravel 專案(laradock-demo)

2. cd laradock-demo

3. git init

4. git add .

5. git commit -m "fresh project"

6. git submodule add https://github.com/LaraDock/laradock.git
    會在 laradock-demo 下新增 .gitmodules 檔
    如果 laradock-demo 沒有建立 git repo的話改用 git clone
    兩種都會安裝在 laradock-demo/laradock 下

7. 編輯 laradock-demo/.env,將 DB_HOST 設為 mysql
    mysql 是 docker-compose.yml 中預設的 MySQL 服務名稱

8. cd laradock

9. 編輯 mysql/my.cnf,新增以下內容
    collation-server = utf8_general_ci
    init-connect='SET NAMES utf8'
    character-set-server = utf8
    default-time-zone = '+8:00'

10. 編輯 php-fpm/laravel.ini,將 date.timezone 之值改為 Asia/Taipei

11. 編輯 docker-compose.yml,將 workspace 服務的 args 下的 TZ 改為之值改為 Asia/Taipei
    workspace 中是安裝 php-cli,可用:
    docker-compose exec --user=laradock workspace bash
    進入 container 進行操作,如 php artisan(或利用 alias 為art)、composer
    --user=laradock 是指定 user 為 laradock,其uid 與 gid 為 1000,在 container 內產生的檔案擁有者與群組為 laradock,host 會是 uid 與 gid 為 1000 的 user / group,預設是 ubuntu 安裝時產生的帳號/群組,可在 docker-compose.yml 中變更(PUID、PGID)。

12. 如果要指定資料庫檔案存放至特定位置,編輯 docker-compose.yml,將 mysql 服務的:
    volumes:
            - mysql:/var/lib/mysql

    改為:(存在 laradock/db 下)

    volumes:
            - ./db:/var/lib/mysql

13. 在 laradock 下(docker-compose.yml 所在目錄)執行:
    docker-compose up -d nginx mysql
    第一次會 build,需要一些時間。這裡指定要使用之 web 與 database service。

14. 確認 service 執行狀況:
    docker-compose ps

15. 若 mysql service 為停止狀態,執行:
    docker-compose start mysql

16. 下載 adminer 至 laradock-demo/public,並建立 phpinfo.php

17. 瀏覽 localhost/phpinfo.php

18. 瀏覽 localhost/adminer.php,帳密 root/root or homestead/homestead,伺服器輸入 mysql (service 名稱,container host name)

19. 停止並移除所有 container:
    docker-compose down
    docker-compose down -v ==> -v 是移除自動建立之相應 volumns,位置在 /var/lib/docker/volumes 下 laradock_ 開頭之資料夾,需 sudo 才能查看

20. xdebug 與 PhpStorm 可參考:
    laradock/phpstorm.md at master · laradock/laradock

    LarryEitel/laravel-laradock-phpstorm: Wiring up Laravel, LaraDock [Laravel+Docker] and PHPStorm to play nice together complete with remote xdebug'ing as icing on top!