文章

目前顯示的是 九月, 2016的文章

[ 筆記 ] 在 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