開心開一

[React] FIX: Hooks can only be called inside the body of a function component.錯誤

2019-02-01T22:00:00.001+08:00

Hooks can only be called inside the body of a function component錯誤除了 react 要升級到 16.8.0-alpha.1 之外 react-dom 也要 16.8.0-alpha.1 以上

[ZPL] Zebra 印中文標籤 print chinese characters

2018-10-28T17:41:00.002+08:00

最近在用 Zebra GT800 印標籤(透過 web browser)

全英文標籤沒什麼問題

但中文部分都吐亂碼或問號

看了 GT800 裡面有特別內建 CHT.FNT, SIMSUN.FNT

起初我一直以為 CHT.FNT 是印繁體中文的字體

SIMSUN.FNT 則是印簡體中文的字體

BUT.....

CHT.FNT 都吐問號 , SIMSUN.FNT 內竟然也有繁體中文.... (／‵Д′)／~ ╧╧

所以用 SIMSUN.FNT 就通吃中文惹....

然後字的部分要轉成 HEX String 然後搭配 ^FH 一起使用

假設要印 “繁體中文讚讚讚!”

首先將繁體中文讚讚讚! 貼到 https://openopen114.github.io/TextToHexString [Github]

點 Gen 後選擇 Hex String For ZPL 可得到 _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21

然後 ZPL CODE 如下

^XA
^CI28
^A@R,50,50,E:SIMSUN.FNT
^FO50,50^FH^FD _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21 ^FS
^XZ

[Angular] ngFor filter

2018-06-17T14:15:00.002+08:00

解決 electron 安裝失敗問題(Mac)

2018-06-02T13:33:00.002+08:00

npm install -g electron 出現Error

permission denied, mkdir '/usr/local/lib/node_modules/electron/dist'

使用下列安裝就順利裝上去惹＠＠

sudo npm install -g electron --unsafe-perm=true --allow-root

[JavaFx] *Fix Failed to start sceneBuild via Intellij Idea for Mac

2018-05-08T10:00:00.002+08:00

1. download SceneBuild
link:http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-1x-archive-2199384.html#javafx-scenebuilder-2.0-oth-JPR

Intellij Idea -> Preferences

search "JavaFX"

then setting the path of sceneBuild App

Done!

[解決] -bash: dotnet: command not found for Mac

2018-04-13T22:57:00.002+08:00

裝完官網的 dotnet 要用就出現

-bash: dotnet: command not found

先用 /usr/local/share/dotnet/dotnet --info

看有沒有執行，有的話只是連結問題

改用 ln -s /usr/local/share/dotnet/dotnet /usr/local/bin/

就可以惹＠＠

[解決] High Sierra 滑鼠頓 lag 問題

2017-11-07T08:39:00.001+08:00

升級到high sierra 後 magic mouse 頓頓der

用一般 USB Mouse也一樣

後來google到裝usb overdrive就解決了

link: http://www.usboverdrive.com/USBOverdrive/News.html

[Node.js] express: command not found [解決辦法]

2017-07-12T16:25:00.003+08:00

sudo npm install -g express-generator

這樣就可以在terminal express projectName惹 0.0

[Angular 4] 好用的scroll to

2017-06-21T08:54:00.003+08:00

https://www.npmjs.com/package/ng2-scroll-to

直接 npm 安裝

加上 scrollTo 就可以用了

單純記錄0.0

[Angular 4] sideNav via materialize

2017-05-11T08:07:00.003+08:00

[Angular 4] http

2017-05-10T14:53:00.000+08:00

[Angular 4] service

2017-05-09T17:18:00.002+08:00

[Angular 4] Form

2017-05-05T14:08:00.001+08:00

1.via ReactiveFormModele 2.via FormModele

[Angular 4] Todo List

2017-05-05T13:14:00.003+08:00

[Angular 4] Router 用法

2017-05-05T09:08:00.003+08:00

1.在app.module.ts import routermodule

2.設定forRoot path and component

3.在html部分 tag a 裡面使用routerLink去辨識，然後內容會顯示在router-outlet

[Apache] 固定ip架設網站設定 in Ubuntu

2017-04-07T16:50:00.003+08:00

最近在改寫公司網站

順便把部署環境從windows改成Ubuntu

恩...就不愛微軟跟Asp....

Ubuntu上安裝LAMP可以google有很多教學

或是可以參考這篇「LAMP Web Server 網頁伺服器快速建置入門」

因為公司有固定ip，Ubuntu上設定ip也不困難

然後在 /etc/apache2/ 下有 ports.conf

可以設定要從哪個port進來

像是 Listen 90 的話就是從 90 port 進來

要設定給固定ip的話可以設定

Listen *:80
Listen xxx.xxx.xxx.xxx:80

其他不用改就可以了(假設 DNS 服務代管已經有設了o.0)

然後重啟apache

sudo service apache2 restart

這樣就搞定了

[Angular2] Angular 2 Host in Apache Server

2016-12-22T17:16:00.001+08:00

一般都用Angular CLI的 ng server去host

但突然想要用 Apache

1. ng new YourProj

2. set build/output directory(option)

// in angular-cli.json
// outDir 可以設定build/output的資料夾，預設是dist

"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],

3.use relative path
// in index.html
// base href="/" -> base href="./"
base href="./"

4.ng build --prod
bulid完就會出現dist資料夾
然後把dist資料夾移到apache的路徑下就ok了

[Anguler2] routing 用法

2016-12-22T10:32:00.001+08:00

youtube影片可以參考：https://youtu.be/Uvj_7ZMrHmg

1.新增 app.router.ts

import { ModuleWithProviders } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

import { AboutComponent } from './about/about.component';

import { ServicesComponent } from './services/services.component';

// setting router path

export const router: Routes = [

{path: '', redirectTo: 'services', pathMatch: 'full' }, //redirect to service

{path: 'about', component: AboutComponent },

{path: 'services', component: ServicesComponent },

];

// generate router module

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

2.app.module.ts 要import routes

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import {routes} from './app.router'; //import

import { AppComponent } from './app.component';

import { AboutComponent } from './about/about.component';

import { ServicesComponent } from './services/services.component';

@NgModule({

declarations: [

AppComponent,

AboutComponent,

ServicesComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

routes //import

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

3.app.component.html 設定routerLink & router-outlet

//router-outlet就是所對應的component表現的地方

routerLink="about">About

Services

<router-outlet></router-outlet>

[Angular2] service with Http Error Catch 用法

2016-12-09T09:10:00.003+08:00

當http 抓不到資料時拋出錯誤
github

1. import
/* employee.service.ts */
------------------------------------

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http'; //import Http, Headers , Response
import {Observable} from 'rxjs/Observable'; //import Observable
import 'rxjs/add/operator/map'; //import rxjs map
import 'rxjs/add/operator/catch'; //import rxjs catch
import 'rxjs/add/Observable/throw';

@Injectable()
export class EmployeeService {

private _url: string = "../apidata/employeeData.json";

constructor(private _http: Http) {}

getEmployees(){
return this._http.get(this._url)
.map(res => res.json())
.catch(this._errorHandler); // catch error handler
}

_errorHandler(err: Response){
console.error(err);
return Observable.throw(err || "Server Error");
}

}

2.
/* employee-list.component.ts */
-------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';

@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
errorMsg: string;

constructor(private _empService: EmployeeService) { }

ngOnInit() {
// this.employees = this._empService.getEmployees();
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData,
resEmpError => this.errorMsg = resEmpError);
}

}

[Angular2] service via Http Rxjs 用法

2016-12-08T16:04:00.000+08:00

在 service 用http 去要資料(json)

然後給component 用

1. get data via Http
/* employee.service.ts*/
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http'; //import Http, Headers
import 'rxjs/add/operator/map'; //import rxjs

@Injectable()
export class EmployeeService {

private _url: string = "../apidata/employeeData.json";

constructor(private _http: Http) {}

getEmployees(){
return this._http.get(this._url)
.map(res => res.json());
}

}

2.subscribe
/* employee-list.component.ts*/
-----------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';

@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})

export class EmployeeListComponent implements OnInit {
employees = [];

constructor(private _empService: EmployeeService) { }

ngOnInit() {
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData);
}

}

[Angular2] Output 用法

2016-12-08T15:20:00.003+08:00

從inside component 發送一個值到App component

1.import EventEmitter, Output
emitSpot 就像是發射台，將東西發射出去

/* inside.component.ts */
------------------------------------
import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})

export class InsideComponent implements OnInit {

@Output()
emitSpot = new EventEmitter;

sendTextToAppComp(val: string){
console.log("outputText2App func working");
console.log(val);
this.emitSpot.emit(val)
}

constructor() { }

ngOnInit() {
}

}

2. html 就簡單按 click button 後呼叫sendTextToAppComp()將 input value 送到App Comp

/* inside.component.html */

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

/* app.component.html */

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

emitSpot)="OutputTextFromInsideComp($event)">

/* app.component.ts */

----------------------------------------
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'app works!';
public AppText = '';

OutputTextFromInsideComp($event){
console.log("OutputTextFromInsideComp Working");
console.log("event: :"+$event);
this.AppText = $event;
}

}

流程大概就是
sendTextToAppComp() -> emitSpot.emit(val) -> (emitSpot) -> OutputTextFromInsideComp($event) -> this.AppText = $event;

[Angular2] Input 用法

2016-12-08T14:26:00.001+08:00

將 App component 的值 input 到 inside component 用

也就是 inside comp 需要吃一個值從 App comp

github

1. import input, 設定input 的變數

/* inside.component.ts*/
------------------------------------
import { Component, OnInit ,Input} from '@angular/core'; //import Input

@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})

export class InsideComponent implements OnInit {

@Input()
public inputTextFromAppComp='';

constructor() { }

ngOnInit() {
}

}

2. html 部分就簡單直接print

/* inside.component.html*/
------------------------------------
input text from AppComp:

{{

inputTextFromAppComp}}

3.

/* app.component.ts*/
------------------------------------
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'app works!';
public appText = "string in app comp "

}

4.在App comp的appText 傳給在inside Comp 的 inputTextFromAppComp

/* app.component.html*/
------------------------------------

inputTextFromAppComp]="appText" >

[Angular2] service 用法

2016-12-08T13:21:00.003+08:00

1.先用 "ng g service EmployeeService" create service

create src/app/employee-service.service.spec.ts
create src/app/employee-service.service.ts

2. 在service裡面寫 getEmployees() function
/* employee-service.service.ts*/
----------------------------------------------
import { Injectable } from '@angular/core';

@Injectable()
export class EmployeeService {

employessData = [
{"id":1, "name":"name_1", "age":11},
{"id":2, "name":"name_2", "age":12},
{"id":3, "name":"name_3", "age":13}
];

// getEmployees() in service

getEmployees(){
return this.employessData;
}

constructor() { }

}

3. import service

/* app.component.ts*/

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

import { Component } from '@angular/core';

import { EmployeeService } from "./employee.service" //import service

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [EmployeeService] // add providers

})

export class AppComponent {

title = 'app works!';

}

/* employee-list.component.ts*/

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

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from '../employee.service'; //import service

@Component({

selector: 'app-employee-list',

templateUrl: './employee-list.component.html',

styleUrls: ['./employee-list.component.css']

})

export class EmployeeListComponent implements OnInit {

employees = [];

constructor(private _empService: EmployeeService) { }

ngOnInit() {

this.employees = this._empService.getEmployees();//get data via emp service

}

/* employee-list.component.html*/

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

result:

[Angular2] npm install 錯誤 Error: Cannot find module 'minimatch' 解法 (Mac)

2016-11-28T15:01:00.002+08:00

解法可參考https://github.com/npm/npm/issues/10434 Keyamoon的回覆

基本上就是把/usr/local/lib/node_modules/npm 整個資料夾刪除

然後再去https://nodejs.org/en/download/ 下載重新安裝一次 Node.js

就可以順利npm install Angular 2 package

install Samba in Ubuntu

2016-11-17T16:08:00.001+08:00

#安裝samba

sudo apt-get install samba

#修改 samba 設定

sudo vim /etc/samba/smb.conf

#在smb.conf 最後加

[pi]

comment=pi's home

path=/home

read only=no

guest ok=no

browseable=yes

create mask=0755

directory mask=0755

#重啟服務

sudo service smbd restart

#設定帳號密碼

sudo smbpasswd -a pi

smb://xxx.xxx.xxx.xxx
就可以進去囉

開心開一

[React] FIX: Hooks can only be called inside the body of a function component.錯誤

[ZPL] Zebra 印中文標籤 print chinese characters

[Angular] ngFor filter

解決 electron 安裝失敗問題(Mac)

[JavaFx] *Fix Failed to start sceneBuild via Intellij Idea for Mac

[解決] -bash: dotnet: command not found for Mac

[解決] High Sierra 滑鼠頓 lag 問題

[Node.js] express: command not found [解決辦法]

[Angular 4] 好用的scroll to

[Angular 4] sideNav via materialize

[Angular 4] http

[Angular 4] service

[Angular 4] Form

[Angular 4] Todo List

[Angular 4] Router 用法

[Apache] 固定ip架設網站設定 in Ubuntu

[Angular2] Angular 2 Host in Apache Server

[Anguler2] routing 用法

[Angular2] service with Http Error Catch 用法

[Angular2] service via Http Rxjs 用法

[Angular2] Output 用法

{{AppText}}

[Angular2] Input 用法

{{

[Angular2] service 用法

[Angular2] npm install 錯誤 Error: Cannot find module 'minimatch' 解法 (Mac)

install Samba in Ubuntu