文章

目前顯示的是 一月, 2017的文章

How to Embed YouTube Videos as an Audio Player

如何在 Laravel controller constructor 中取得 session data

Chance.js: Utility library to generate anything random for JavaScript

iLovePDF:PDF文檔在線轉換工具

iLovePDF | 為PDF愛好者提供的PDF文檔在線轉換工具

完全免費的PDF文檔在線管理工具,其功能包括:合併PDF文檔、拆分PDF文檔、壓縮PDF文檔、Office文檔轉換為PDF文檔、PDF文檔轉換為JPG圖片、JPG圖片轉換為PDF文檔。無需安裝。

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

SMPlayer 也開始支援 Chromecast 了

巢狀關聯 in Laravel

Laravel – Nested Relationship Revised | Sheikh Heera

文章可以有回覆

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

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

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

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

ng2-youtube-player component

html5 - Playing audio with Javascript

Build a Music Player with Angular 2+ & Electron

About Fetch API

基本RWD版型設計

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

好用的css 3新單位vh vw

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

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

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

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

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

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

利用 事件 與 反射 實作的

javascript 產生 Barcode / QR Code

快速取得鍵盤按鍵 keycode

JavaScript Event KeyCodes
不必再查半天了....

找回 Laravel 4 的錯誤除錯畫面

Angular Expo

Angular Expo

有許多用 angular 2 開發的不錯網站或套件,有些還有提供原始碼

CoreUI - Admin Theme - Angular Expo

ng2-admin Admin Template - Angular Expo

這些 theme 看起來不錯呦,有原始碼

File Uploader - Angular Expo

File upload Directive - Angular Expo

檔案上傳

Drag and Drop - Angular Expo

拖放

Ng2-Select - Angular Expo

下拉選單

Chrome开发者工具的小技巧

VueCircleMenu: A beautiful circle menu with Vue.js

JS30 系列筆記

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

作者真是佛心來的呀~~

follow 下去囉

Using Kendo UI With Angular 2

透過Dexie套件對indexedDB進行CRUD

Flexbox Tutorial (CSS): Real Layout Examples

TWBSColor:自訂 bootstrap navbar 配色

ng2-toastr / toastr-ng2 : Bootstrap style toast for angular 2

用 angular reactive form 建立 Tesla 電池里程計算機

Angular 與 Larvel 5.3邂逅

[Angular]與Larvel 5.3邂逅 | CK's Notepad

不錯的作法,值得參考

自動化 nginx 反向代理 for docker

Hover.css:滑鼠 hover 特效

Responsive Equal Heights with an Angular 2+ Directive

Git Submodule

[ 練習 ] Laravel Route Model Binding

Laravel 版本:5.3
Implicit Binding1: 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(); …

[ 練習 ] 使用 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=…

How to add font-awesome to Angular 2 + CLI project

3 Ways to Pass Async Data to Angular 2+ Child Components

3 Ways to Pass Async Data to Angular 2+ Child Components | Scotch

data 非同步取回,預設為空(空陣列、null....等),取回後賦值

方法 1:
使用 *ngIf,最簡單,如果確定變更只會發生一次。

方法 2:
使用 ngOnChanges lifecycle hook,缺點是失去型別資訊

方法 3:
使用 BehaviorSubject,缺點是 code 會多一點,要記得 unsubscribe


Demo


Set Up Laravel 5.3 with Docker + LaraDock + Let's Encrypt SSL in Digital Ocean

ES2015 [ES6] cheatsheet

Bulma: a modern CSS framework based on Flexbox

Bulma: a modern CSS framework based on Flexbox

laracasts.com 採用的 CSS 框架

基於 flexbox,更重要的是:只有 CSS,不相依任何 js 喔!!!!

專為 PhpStorm 技巧建立的網站

Seven Graphical Interfaces to Docker

Seven Graphical Interfaces to Docker | OUseful.Info, the blog...

七個 docker 的 GUI 界面工具

其中 Lorry.io - Docker Compose YAML Editor 可以線上產生 docker-compose.yml