文章

目前顯示的是 2016的文章

Package an Angular CLI Application into Electron

Package an Angular CLI Application into Electron | Bruno d'Auria

Electron Tutorial - YouTube

Packaging and distributing your electron/angular 2 desktop apps. - YouTube

electron-userland/electron-packager: Package and distribute your Electron app with OS-specific bundles (.app, .exe etc) via JS or CLI

使用 electron-packager 時可能會出現不知道 electron 版本的問題,在下指令時指定即可:

electron-packager dist --asar --platform=linux --arch=x64 --version=1.4.13
指令下在 angular-cli project 根目錄

先用 ng build 產出 dist 目錄(參數可省略)
 ng build --prod --aot=true -sm=false --asar:保護原始碼不會被直接看到(需要安裝 asar :npm install -g asar)

--platform=win32 可編譯成 windows 的程式,不過要裝 wine 才可以

electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

electron-builder 是另一套打包工具,不過我沒用過....

electron 官網文件:Documentation - Electron

electron type 定義檔:@types/electron


electron-forge  可以打包成 deb / rpm / zip ..... 等檔案格式

使用 Docker 建立 Laravel 環境的例子

Snapper-GUI:snapper 的 GUI

Libraries.io : 找 library 的一個好地方

Search for angular2 - Libraries.io

Search for angular 2 - Libraries.io

關鍵字分別是:angular2 與 angular 2

angular2-modal:不錯的 modal 套件,還有產生器可用

HTML5 Drag and Drop file upload

Create a MEAN app with Angular 2 and Docker Compose

Create a MEAN app with Angular 2 and Docker Compose | Scotch

重點在 docker 與 docker-compose ....

JavaScript — Observables Under The Hood

JavaScript — Observables Under The Hood

雖然後面的 code 看不太懂,不過前面的比喻還蠻貼切的,希望以後能完全看懂....

angular2 讀取 excel 資料表 part 2

上一篇

這次安裝 typescript wrapper,angular-cli.json 不用改了


1: /* app.component.ts */ 2: 3: import { Component } from '@angular/core'; 4: 5: @Component({ 6: selector: 'app-root', 7: templateUrl: './app.component.html', 8: styleUrls: ['./app.component.css'] 9: }) 10: export class AppComponent { 11: 12: title = 'app works!'; 13: dropzoneStyle: any = null; 14: 15: reader: FileReader = new FileReader(); 16: files: FileList = null; 17: 18: workBook: IWorkBook = null; 19: workSheetNames: string[] = []; 20: workSheets: { [sheet: string]: IWorkSheet } = null; 21: currentWorkSheet: IWorkSheet = null; 22: currentData: any[]=[]; 23: 24: constructor() { 25: this.reader.onload = this.setReaderOnloadHandler(); 26: } 27: 28: /** 29: * drop event handler 30: * 31: * @param e 32: */ 33: readFile(e: DragEvent): void { 34: e.stopPropagation()…

Typescript — Integrate jQuery Plugin in your Project

Typescript — Integrate jQuery Plugin in your Project – Medium

一個在 angular-cli 下新增自定義 type 的例子

Angular 2 — Take Advantage Of The exportAs Property

Angular 2 — Take Advantage Of The exportAs Property

雖然不太有機會自己寫 directive,不過很少看到 exportAs 的例子說....

exportAs ==> 將 instance export 給樣板參考變數

就像:

#f="ngForm"

Angular 2 : Deal with Different Form Controls Cheat Sheet

Persisting user authentication with BehaviorSubject in Angular

Persisting user authentication with BehaviorSubject in Angular

利用 BehaviorSubject 取得最近一次的值 或 初始值的特性,讓寫法簡潔許多。

最好將 Observable 利用 share(),避免多個 subscriber 時的問題。(文末有說明)

External JavaScript dependencies in Typescript and Angular 2

External JavaScript dependencies in Typescript and Angular 2 - Rick Strahl's Web Log

當使用的套件沒有 type 定義檔時真的很傷腦筋.....

文章中幾種方式可以嘗試看看

angular2 讀取 excel 資料表

圖片

無密碼登入實作 in Laravel 5.2

Let's Kill the Password! Magic Login Links to the Rescue!

其實就是使用 email 接收一次性的登入連結啦

Angular 2.3 新功能:Component Inheritance 範例

如何在PhpStorm活用PHPDoc

LaravelInstaller: A web installer for Laravel 5.1

RachidLaasri/LaravelInstaller: A web installer for Laravel 5.1

Laravel Installer - YouTube

挺方便的工具,聽說 5.* 可用,有機會來試試

Query Mongo: MySQL to MongoDB Query Translator

Query Mongo: MySQL to MongoDB Query Translator

好工具,雖然還沒開始學 MongoDB....

functional programming 的一些資料收集

整合 TinyMCE 與 Angular2

Rxjs 教學影片

Angular 2 Lifecycle Hooks

My Right To Code - Angular 2 Lifecycle Hooks

有一段短片可以觀察 lifecycle hook 的順序

constructorOnChangesOnInitDoCheckAfterContentInitAfterContentCheckedAfterViewInitAfterViewCheckedOnDestroy 參考: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

pipe for ng2

danrevah/ng2-pipes: Useful pipes for Angular2

不想自己寫 pipe ?先看看需要的 pipe 有沒有現成的吧。

幾個拖曳上傳套件 for ng2

VMWare ESXi 6 窮人備份手冊 by XSIBACKUP 使用深入剖析

loading / spinner 資源

[ Laravel ] 透過 request 參數來找出執行過的 SQL query

Quickly Dumping Laravel Queries - Laravel News

這招不錯,不用安裝套件,如果只是要查看執行哪些 sql 語法,這招夠用了。

Angular 2 form fundamentals by Todd Motto

Updating Angular 2 Forms with patchValue or setValue

Updating Angular 2 Forms with patchValue or setValue

patchValue 會忽略不存在的 formControl

setValue 則會報錯

兩者都可以 formGroup 、 formControl 呼叫,formGroup 的實作實際是 wrapper

Composing Reusable Modal Dialogs with Vue.js

Composing Reusable Modal Dialogs with Vue.js

值得參考的方法,不只是 vue 能用喔....

虛擬化 (Proxmox VE)本地與每天雲端空間備份方法

虛擬化 (Proxmox VE)本地與每天雲端空間備份方法 – OSSLab

雖然沒有真正用過 proxmox,先記下來再說囉....

[Angular2] 在每個Request加入自訂的Header資訊

PHP 讓 json_encode() 指定回傳格式

PHP 讓 json_encode() 指定回傳格式 - Tsung's Blog

以 PHP 當作 api 時是以 json 格式將資料傳回前端,使用 json_encode 將資料轉成 json 格式,但是數字也會被轉成字串,可以在第二個參數傳入 JSON_NUMERIC_CHECK 解決,這樣前端就比較好處理啦。

備份 YouTube 影片

第一次使用 IndexedDB 存取資料就上手

第一次使用 IndexedDB 存取資料就上手 | Mozilla Tech | 謀智台客

IndexedDB基礎概念 - IndexedDB | MDN

原來除了 localStorage、sessionStorage 之外,還有個 indexedDB 呀!

Easy Angular Authentication with JSON Web Tokens

PHP 回傳 json 時 header 的寫法

header('Content-Type: application/json; charset=utf-8');
資料來源:

回傳 JSON 記得送 header - Tsung's Blog

boolean 反相之 sql 語法

要將某筆紀錄的 boolean 欄位值反相,又不想先撈出該筆資料 (多一次查詢),sql 語法可以像這樣寫:

UPDATE todos SET done = NOT done WHERE id = 該筆紀錄的 id

讓 ubuntu 支援 exfat

手上有一張 64G 的 micro sd,檔案系統格式是 exfat,在 ubuntu 16.04 中預設不支援,輸入以下指令就可以囉:

sudo apt install exfat-utils exfat-fuse

RxJS at ng-europe 2016

André Staltz (@andrestaltz): You will learn RxJS at ng-europe 2016 - YouTube

講解 Observable 的基本運作,有點不好懂,需要時間消化

Rob Wormald (@robwormald): Angular & RxJS at ng-europe 2016 - YouTube

講到 Http、Forms、Router 的部份,要有點基礎再來看比較好喔

了解與修補 SQL injection

CORS - cross origin request tutorial and example in PHP

PHP Authorization with JWT (JSON Web Tokens)

Laravel service provider examples

Laravel service provider examples - A blog about Laravel Framework, web development and related stuff | Barry van Veen

service provider 可以做哪些事?值得參考的文章。

是說以後大概不會寫 package 了吧....

A Complete List Of Laravel Events

A Complete List Of Laravel Events

是說還沒用過 Laravel Event 耶....

Learn Angular 2 (TypeScript) by building a simple YouTube player

Learn Angular 2 (TypeScript) by building a simple YouTube player - YouTube

Let's Learn Angular! (with companion codelab) - Google 簡報

Plunker

不錯的教學影片,適合有接觸過 angular2 的人看,影片中特別值得看的是 view 和 content 的部份

compodoc:超強大的 doc 產出工具 for angular2

网页特效大全,jquery插件:安德兔

在 laravel 5 實作瀏覽器推播通知

在 laravel 5 實作瀏覽器推播通知 · JIGSAWYE

雖然文章有點舊了,實作上可能有點出入,不過基本觀念還是值得看看。

How to install PHP 7 on Ubuntu Linux 14.04 LTS

Vue-Awesome-Swiper :vue 的輪播套件

Vue-Awesome-Swiper by surmon-china

不錯的輪播套件 for Vue.js

[ 參考 ] 如何對 Laravel 進行自動化驗收測試?

如何對 Laravel 進行自動化驗收測試? | 點燈坊

好文,看得懂,雖然還是不會寫測試.....

Angular 2 Forms 中文參考資料

.htaccess 相關文章

Securing Angular 2 Routes (with OAuth and Firebase)

[講座分享] Composer 從入門到實戰 (PHP 也有 Day #28)

PHP 不能在 heredoc 中使用 static 變數的解法

將靜態變數存到另一個一般變數,在 heredoc 中使用一般變數即可,最好用大括號界定變數。另外還有一個 nowdoc,其作用與單引號包圍的字串相同,heredoc 作用同雙引號。



參考資料:

php - Using static class variables -- in a heredoc - Stack OverflowPHP: Strings - Manual

Build Angular 2 apps with TypeScript and Visual Studio Code

Youtube

簡報

johnpapa/angular2-tour-of-heroes @ github

John Papa 在 Microsoft Ignite 上的演講,想了解 Angular2 的可以看看

各種 linux 版本的伺服器設定

Server World - Build Network Server

朋友提供的,收下來備用囉。

Book of Modern frontend tooling:現代前端工具的電子書

Book of Modern frontend tooling

收藏起來有空再看

好用的螢幕錄影工具

faker.js:javascript 的假資料產生器,支援中文

Marak/faker.js: generate massive amounts of fake data in Node.js and the browser

可大量產生假資料的 javascript 套件,可支援中文呦 ^_^

[RxJS] MultiCasting

[RxJS] MultiCasting | CK's Notepad

中文的,有範例,不錯呦

Angular2 Router 介紹

Angular 2 Router Introduction - Child And Auxiliary Routes - Pitfalls

影片:
https://www.youtube.com/watch?v=VES1eTNxi1s&index=1&list=PLOa5YIicjJ-VA38pChXHhq8jY2U8iYynr

介紹了 Router 的用法,child router,多個 router-outlet

文章很長,還有影片,值得看喔

NgModule 介紹,以及一些該注意的陷阱

Angular 2 NgModule Intro - Ahead Of Time Compilation And Lazy Loading

介紹了各種 module 與 DI 的注意事項:

root modulefeature modulelazy loadingshared module
也介紹了 JIT 與 AoT 兩種 compile 模式。

值得一看的文章,不過很長......

360 & VR Vídeo with Angular 2

Angular 2 Forms @ Angular Connect 2016

Angular 2 Forms | Kara Erickson - YouTube

投影片:

http://g.co/ng/ac16-forms

Demo code:

http://github.com/kara/ac-forms

同時 Demo 了兩種 form 的用法,值得一看

Rewrite rules for SPA

現在的 SPA 的 router 應該都支援 html5 pushstate, url 看起來就像一般的網址,可以當作書籤,看似方便,但我卻想到一個問題,如果直接輸入該 url 或開啟書籤,browser 應該會發出 request 到 web server,那 web server 會如何回應?我的想法是,正常來說應該是會經由 SPA 的網頁,假設是 index.html ,經由 SPA router 處理,例如:example.com 會載入 example.com/index.html ,此為 SPA 的入口,example.com/login 會由 SPA 的 router 載入相對應的 component,request 還是由 index.html 處理。但如果直接輸入 example.com/login ,一般的 web server 是否會直接處理這個 request,然後因為找不到人處理,所以報錯?

因為沒有實作過,所以不知道我的猜想是否正確。不過今天看到一些討論,看來我的猜想是對的,所以找了一些常見的 web server 的 rewrite rule 設定,有機會再來實作驗證看看。
for Apache and Nginx :
ReadyState4 » Blog Archive » Nginx and Apache rewrites to support HTML5 Pushstate in pure Backbone.js (or other JS MV*) Application.

for iis :
Rewrite Ruls for Vue.js SPA on IIS
URL Rewrite : The Official Microsoft IIS Site
Creating Rewrite Rules for the URL Rewrite Module : The Official Microsoft IIS Site


angular2 可用(Apache,.htaccess ):
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]

How to Setup Watchman on Ubuntu 16.04

執行 angular-cli 的 ng 指令時會出現以下訊息:
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info. 如果看不順眼,可以這樣做:

1: git clone https://github.com/facebook/watchman.git 2: cd watchman/ 3: git checkout v4.7.0 4: sudo apt-get install -y autoconf automake build-essential python-dev 5: ./autogen.sh 6: ./configure 7: make 8: sudo make install 9: watchman --version

來源: How to Setup Watchman on Ubuntu 16.04

 Watchman 官網: Watchman | A file watching service

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (2)

上一篇的方法雖然可以運作,可是解法其實蠻醜陋的,於是又研究了幾天,終於找到一個比較能接受的解法。
版本:
angular-cli : 1.0.0-beta.16
auth0-lock : 10.4.0
angular2-jwt : 0.1.23
-----------------------------------------------------------------------------
安裝套件:
npm install --save auth0-lock
npm install --save angular2-jwt
npm install --save-dev @types/auth0-lock
-----------------------------------------------------------------------------
設定 tsconfig.json :
加入 "allowSyntheticDefaultImports": true
-----------------------------------------------------------------------------
在 ts 檔中 
import Auth0Lock from 'auth0-lock'

參考資料:
Typescript definition ‧ Issue #521 ‧ auth0/lock

[ 教學 ] building hacker news with angular 2 cli, rxjs and webpack

Building Hacker News with Angular 2 CLI, RxJS and Webpack

不錯的文章,解釋的算仔細,而且第一次看到遞迴使用 component 的用法。

TypeScript 模組定義檔搜尋

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (1)

Auth0官網教學文

官網教學文是使用 CDN 載入,想試著結合 angular-cli,用 bundle 的方式使用,就試了一下囉。

---------------------------------------------------------------

版本:

angular-cli : 1.0.0-beta15

auth0-lock : 10.3.0

angular2-jwt : 0.1.23

---------------------------------------------------------------

安裝套件:

npm install auth0-lock --save

npm install angular2-jwt --save

---------------------------------------------------------------

設定:

* angular-cli 專案資料夾下的 angular-cli.json 中 packages 陣列加入

"../node_modules/auth0-lock" 像這樣

 "packages": [
    "../node_modules/auth0-lock"
  ]
* app/auth.service.ts 加入(我是加在 import 之下):

let Auth0Lock = require('auth0-lock').default;
* Auth0 Dashboard,在 client 設定中設定 Allowed Origins (CORS),加入

http://localhost:4200
視實際狀況,網址可能不同,angular-cli default 是 4200 port


 ---------------------------------------------------------------

Sample Code:

Angular 2 Form Validation

Angular 2 Form Validation | Scotch

scotch-io/angular-2-form-validation: Angular 2 Form Validation Demo App

不錯的文章,使用 angular 2 正式版,也有如何整合 Auth0  的範例。

javascript 產生連續數字的陣列

let a = Array(10).fill().map((value, index) => index + 1);
a 是一個 10 個元素的陣列,其值為 1 - 10
let a = Array(10).fill(5);
a 是一個 10 個元素的陣列,其值全部都是 5

[ 工具 ] 跨平台的 SQL Client:DBeaver

DBeaver | Free Universal SQL Client

跨平台的 SQL Client,支援多種資料庫系統。雖然有中文語系,不過是簡體中文,看不習慣就....換成英文吧。只要啟動時加上  -nl en 就好,可以考慮直接修改啟動捷徑。

Ubuntu 的啟動檔路徑:

/usr/share/applications/dbeaver.desktop



Exec=/usr/share/dbeaver/dbeaver

改成

Exec=/usr/share/dbeaver/dbeaver -nl en

[ 參考 ] 圖片裁切範例@Laravel

Laravel 5.2 - Image Crop and Edit Example

使用 Laravel 與 Jcorp 進行圖片裁切

[ 參考 ] MySQL 超新手入門

MySQL 超新手入門

參考參考

[ 筆記 ] angular 2 之 $event.stopPropagation()

下面是 angular.io 的一段程式碼範例:

1: <li *ngFor="let hero of heroes" (click)="onSelect(hero)" 2: [class.selected]="hero === selectedHero"> 3: <span class="badge">{{hero.id}}</span> 4: <span>{{hero.name}}</span> 5: <button class="delete" 6: (click)="delete(hero); $event.stopPropagation()">x</button> 7: </li>
li 有個 click event,內層的 button 也有個 click event,為了防止按下內層的刪除按鈕的同時也觸發了外層 li 的 click event,所以加入 $event.stopPropagation() 以阻止 event bubble 的發生。

其他資料:

[IE][JavaScript] Bubble Event - StopPropagation | 當麻許 - 點部落

DOM 的事件傳遞機制:捕獲與冒泡 | TechBridge 技術共筆部落格 (推薦閱讀)

Laravel JWT Auth with Vue.js

Laravel JWT Auth with Vue.js

Laravel JWT Auth with Vue.js 2.0 – JimFrenette.com

雖然還沒有好好學 vue,不過 Laravel 的部份可以參考參考

[ 教學 ] Angular Modules Series by John Papa

John Papa: Introducing Angular Modules - Root Module

不錯的教學文章,值得一看

John Papa 在 Pluralsight 的課程(付費課程):

Angular 2: First Look | Pluralsight

SoundManager 2 :A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio

SoundManager 2: JavaScript Sound For The Web

可用 javascript 控制聲音檔播放的 library

用前端技術開發桌面應用程式的框架

NW.js  vs  Electron

目前個人比較傾向於 electron,雖然都沒實際用過啦。網路上對於 nwjs 的評價似乎有不少坑,不過 nwjs 程式的進入點可以採用 html or js 檔是我比較喜歡的點,electron 只能用 js 檔。

CSS中的多重選擇器(Multiple Selectors)包含空白或逗號

CSS中的多重選擇器(Multiple Selectors)包含空白或逗號

我就是常常搞不清楚的那種人.....  Orz

Ajaxify Your Laravel Application Automatically

Ajaxify Your Laravel Application Automatically | Muhammad Usman

用 middleware 來讓 Laravel 自動 AJAX 化 (例如重導向變成 JSON 輸出) ,而不需要重複地判斷是否為 AJAX 要求

Reactive programming with Angular 2

Reactive programming with Angular 2

文章中的例子用的是 ReplaySubject,對於 ReplaySubject 的解釋還算清楚易懂。

How to Set up Authentication and authorization In Angular 2

Quill:看起來不錯的所見即所得編輯器

Quill - A Rich Text WYSIWYG Editor with an API

TypeScript definitions for Quill

一個輕量的所見即所得編輯器,有機會再試試看

zeal:離線文件查詢器

記性不好,寫程式時常常要查詢文件?試試 zeal 吧,還是跨平台的呦!
Zeal - Offline Documentation Browser
ubuntu 16.04 下安裝: sudo apt update
sudo apt install zeal 安裝好之後要先下載離線文件檔:
File -> Options -> Docsets 在 PhpStorm 中,先安裝 plugin : Dash

JetBrains Plugin Repository :: Dash

預設快速鍵:
Ctrl + Shift + D 用法:

選擇要查詢的關鍵字,然後按快速鍵即可查詢

PS. zeal 是從下面的影片看來的

給 PHP 開發者的 Visual Studio Code 指南/給 PHP開發者的Visual Studio Code指南 | Community Open Camp 2016 | Channel 9

Build a Laravel Application with User Authentication

Build a Laravel Application with User Authentication

使用第三方服務,提供使用者註冊、驗證、密碼管理等功能,懶得自己來的可以參考看看,不過相關畫面的中文化可能要思考一下如何進行。

Summernote - Super Simple WYSIWYG editor

深入解析 NgModule Decorator

NgModule Decorator Deep Dive | Eyal's space

概略解釋了NgModule的幾個屬性的作用:imports、declarations、exports

搭配圖解,算很清楚囉

載入中....Free HTML5 And CSS3 Loaders and Preloaders

Solaar : Linux 下 Logitech Unifying Receiver 的管理工具

圖片
因為桌機滑鼠壞了,買了一個同樣使用 unifying receiver 的新滑鼠,但羅技並沒有提供支援 ubuntu 的配對工具,因為原來的接收器已有鍵盤配對使用,於是要把新滑鼠與舊的接收器配對。拜了一下谷先生,果然找到了!!
Solaar
ubuntu 16.04 可直接從 apt 安裝:
sudo apt update
sudo apt install solaar solaar-gnome3
在啟動 solaar 之前,最好先把舊的接收器拔起重插。以下就看圖說故事囉!!













[ 參考 ] 為 angular 2 加入觸控手勢

Using HammerJS (Touch gesture) in Angular 2 | Scotch

看起來不會太難,而且 angular 2 也內建支援 HammerJS

angular.io API 搜尋 hammer

微軟提供免費 Windows 10 開發環境,四種虛擬機器平台實作內建常用工具

多重開機 USB 隨身碟設定檔

運用 syslinux 製作多重開機 usb,設定檔 在此

內含Clonezilla live (to ram)、 DRBL live (to ram) 與 Ubuntu 的設定

[ 參考 ] How to scale Laravel horizontally with Docker

[ 參考 ] 用 Docker 建立 Laravel 的開發環境

mysql in docker 的一些『眉角』

今天臨時要用較新版本的 mysql server,又不想安裝在日常使用的機器,所以就想到用 docker 啦,可是在用 adminer 連線時卻一直連不上,所以就研究了一下,順便也解決預設編碼的問題囉。

docker 版本:1.12
mysql image:tag 5.7版,https://hub.docker.com/r/library/mysql/

需求:

建立資料庫 demo建立 user 帳密 demo / demo,管理資料庫 demo本機 3306 port 對應至 container 3306 port將資料庫編碼由 latin1 更改為 utf8預設時區更改為 +8:00
Step 1: 建立 docker-mysqld.cnf(檔名可自訂),假設存放在 /home/user/docker-mysqld.cnf
[mysqld] user = mysql datadir = /var/lib/mysql collation-server = utf8_unicode_ci init-connect='SET NAMES utf8' character-set-server = utf8            default-time-zone = '+8:00'

utf8_unicode_ci 可換成 utf8_general_ci,我比較常用這兩種,laravel 我個人偏好 utf8_unicode_ci
Step 2:
docker run 啟動指令如下
docker run --name mysql \    -p 3306:3306 \    -v /home/user/docker-mysqld.cnf:/etc/mysql/conf.d/mysqld.cnf \    -e MYSQL_ROOT_PASSWORD=12345678 \    -e MYSQL_DATABASE=demo \    -e MYSQL_USER=demo \    -e MYSQL_PASSWORD=demo \    -d mysql:5.7 如果要將資料庫保存下來,有幾種方式,比較簡單的作法步驟如下

建立資料夾,如:/home/user/db啟動指令在 run 之後,mysql:5.7 之前加入 -v /home/user/…

shutter 快速鍵設定

[ 工具 ] 製作USB多重系統選單式的開機碟工具 – WinSetupFromUSB

製作USB多重系統選單式的開機碟工具 – WinSetupFromUSB | | 挨 踢 路 人 甲

windows 下製作多重開機 USB 的工具,除了 Windows 之外,似乎也可以加入 Linux,不過好像只能選擇 UEFI 或 MBR 其中之一?

[ 參考 ] .htaccess snippet

phanan/htaccess: A collection of useful .htaccess snippets.

關於 .htaccess 的一些設定片段,是說最近想跳到 nginx 了說....

[ 參考 ] Angular 2 之檔案上傳術

安裝 Linux 的筆電之電池續航力增加術

Re: [問題] 低耗電上網版本選擇? - 看板 Linux - 批踢踢實業坊

linrunner.de: TLP – Linux Advanced Power Management

PCMan 推薦,值得試試!!

我是安裝 Ubuntu 16.04

sudo apt update
sudo apt install tlp tlp-rdw

不錯的 Docker Swarm Mode 筆記

[TIL] Learning note about Docker Swarm Mode

不錯的 Docker Swarm Mode 筆記

[ 參考 ] ViewChild (VuewChildren) vs ContentChild (ContentChildren)、viewProviders vs providers

ViewChildren and ContentChildren in Angular 2 – Minko Gechev's blog

解釋了什麼是:

ViewChildViewChildrenContentChildContentChildren 以及 viewProviders 與 providers 的差異
以下是概略的筆記:
view child 為 child component,child component tag 會出現在  parent component 的 template中
content child 出現在 component open tag 與 close tag 之間,在 component 的 template 中會以 ng-content 插入

ViewChild 和 ContentChild 是單數,只有一個

ViewChildren 和 ContentChildren 是複數,可以有多個
@ViewChild(TodoInputComponent) todoInput: TodoInputComponent;
@ViewChildren(TodoComponent) todoComponents: QueryList<TodoComponent>;
可以在 ngAfterOnViewInit 取得 this.todoInput 與 this.todoComponents 之值,其中 this.todoComponents 可以看作是 Observable
ContentChild 與 ContentChildren 可以在 ngAfterOnContentInit 取得值
viewProviders 宣告的 service 只有 view child(ren) 可以用,content child(ren) 無法使用
providers 宣告的 service 都可以用

[ 參考 ] VS Code 檔案顯示設定

VS Code 檔案顯示設定 | Jeff's WebTech Note

雖然幾乎沒在用 vs code,紀錄一下備用囉

[ 參考 ] jwt 與 cors in Laravel 5.2

[ 參考 ] animations example in angular 2

Building an slide-out notification drawer with Angular 2 animations

不錯的文章,對於像我一樣的美工白痴是不錯的參考資料

Angular 2 - Animations - YouTube

雖然聽不懂作者講的英文,不過 code 看得懂就好....

[ 收集 ] Swarm in Docker v1.12

Nordri Tools: 好像不錯的 PPT 工具

Nordri Tools——讓PPT變得簡單起來

沒用過,但看起來似乎不錯

[ 參考 ] Observables in angular2

圖片

[ 參考 ] ES6 你可能不知道的事

[ 參考 ] angular2 的 routing

Routing Angular 2 Single Page Apps with the Component Router | Scotch

用一個簡單的範例講解 routing,包含 child routing 以及 guard

Routing in Angular 2 revisited

有用到 route 的 snapshot

Protecting Routes using Guards in Angular 2

說明三種 guard

The Amazing Angular 2 Router v3 by Gerard Sans

有不少範例可看喔

[ 參考 ] angular 2 rc4 的兩種 form

[ 參考 ] 用 Docker 建立開發環境 for Laravel

[ 參考 ] 關於 angular2 之 change detection 的一些文章收集

[ 參考 ] 如何將自定義的 Pipe 設為全域的 Pipe

Create a Globally Available Custom Pipe in Angular 2 | Scotch

原本自定義的 Pipe 要在 Component 使用,必須在 @Component 加入 pipes 設定,如果有很多 Component 要用就很麻煩,可以在 bootstrap 時就先加入 DI,就可以像內建的 Pipe 直接用啦。

[ 參考 ] YAML 語言教程

YAML 語言教程 - 阮一峰的網絡日誌

vagrant 的設定檔就是 yaml 啊,有必要了解一下。

[ 參考 ] JWT 學習筆記

完整整合 Facebook SDK 的套件 for Laravel and Lumen

SammyK/LaravelFacebookSdk: Fully unit tested Facebook SDK v5 integration for Laravel & Lumen

據說是個完整整合 Facebook SDK 的套件,想要取得更多資料的可以改用這個。

[ 參考 ] Processing a csv file in Laravel

Processing a csv file in Laravel

值得一試的方法。