らいふうっどの閑話休題

興味のあることをゆる~く書いていく

Gitbook has been released. / Gitbookを公開しました。

f:id:ic_lifewood:20191129001659p:plain

Windows development environment / Windowsの開発環境

https://gurezo.github.io/windows_setup_dev/

Ubuntu development environment / Ubuntuの開発環境

http://gurezo.github.io/ubuntu_setup_dev/

macOSは、時期を見て作成したいと思います。
I want to create macOS by looking at the time.

XPS13を使ってみた

きっかけ

デルのXPSモニター募集に応募したら、当選したのでブログを書くことに。

開封

モニター書類

f:id:ic_lifewood:20191007210049j:plain

初期化手順書

f:id:ic_lifewood:20191007210202j:plain

カタログ

f:id:ic_lifewood:20191007210236j:plain

サイズ比較

f:id:ic_lifewood:20191007210500j:plain

左から Mac Book Pro, XPS13, Falcon 2-in-1 Laptop 
Mac Book Pro のよりも XPS13 が若干小さいですね

f:id:ic_lifewood:20191007210914j:plain

モニターの表示状態もMac Book Proにフィルターを貼ってあることも差し引いても
XPS13 の方が鮮やかに見えます。

表示領域サイズは、Mac Book Pro の方が大きいのでファーストビューの情報量は
Mac Book Pro が良いです。

小物(バッテリー)

f:id:ic_lifewood:20191007211759j:plain

バッテリー関係もケーブルとアダプターは、セパレートなので
小物入れにコンパクトに収まります。

XPS13 ドライバアップデート

f:id:ic_lifewood:20191007213230p:plain

Dell のドライバアップデート用ソフトウェアが分かり易いので
簡単に指定、アップデートできました。
なお、ドライバにもよりますが複数回の再起動が必要です。

開発環境

XPS13にインストールした開発環境は下記の通りです。

slack

f:id:ic_lifewood:20191007215534p:plain

初期のバージョンでは、複数チームを開くとプロセスが多数発生して
PCの負荷が高かったのですが、XPS13だとなんのストレスもなく使用できました。

開発

ターミナル(Git Bash)の起動

f:id:ic_lifewood:20191007220556p:plain

マウス操作なしで、キーボード操作のみでスムースな起動ができました。

githubリポジトリからコードをダウンロード

f:id:ic_lifewood:20191007212933p:plain f:id:ic_lifewood:20191007213059p:plain f:id:ic_lifewood:20191007213126p:plain

なんのストレスもなく、一連の操作ができました。

ビルド

f:id:ic_lifewood:20191007213643p:plain f:id:ic_lifewood:20191007213715p:plain f:id:ic_lifewood:20191007214123p:plain f:id:ic_lifewood:20191007214229p:plain f:id:ic_lifewood:20191007214313p:plain f:id:ic_lifewood:20191007214334p:plain f:id:ic_lifewood:20191007220412p:plain

npm インストールや Angular のコードをビルドもなんのストレスもなく、
スムースにビルドブラウザ表示が可能でした。

まとめ

プログラミング開発の観点で、XPS13は十分ありだと思いました。

残念だったのは付属品として、USBハブが最初からあると
使用当初に戸惑いが軽減されるのでは?と思いました。

Pentium3時代のInspiron以降、デルPCにはご無沙汰だったので
予算確保に向けて検討したいなと思った次第です。

Angular & bazel's memo part Normal build revert

Angular & bazel's memo

angular & bazel のサンプルプロジェクトを通常ビルドに戻す時のメモ
Notes on returning angular & bazel sample project to normal build


通常ビルドに戻すために下記ファイル名を変更しました。
The following file names have been changed to return to the normal build.

angular.json ==> angular.json.bazel.bak
angular.json.bak ==> angular.json

f:id:ic_lifewood:20191005155805p:plain

ノーマルビルドを実行した時にエラーになった場合は、下記ファイルを削除
If an error occurs when executing a normal build, delete the following file:

  • src/initialize_testbed.ts
  • src/main.dev.ts
  • src/main.prod.ts

f:id:ic_lifewood:20191005161219p:plain

切替時に通常は、上記ファイルを削除することはなく、ビルドが正常終了するとはずです。
Normally, the above file is not deleted when switching, and the build should end normally.

rbenv memo

github.com rubyをアップデートする時にトラブルを対処した時のメモ
Notes when dealing with troubles when updating ruby.

$ rbenv install 2.5.0

rbenv install コマンド実行すると上記issueのエラーに遭遇しました。
When I executed the rbenv install command, I encountered the above error.

issueの回答は、awkが壊れているのではないか?ということでした。
Isn't the answer of issue awk broken? It was that.

調査の結果、下記 issue が見つかりました。
As a result of the investigation, the following issues were found.

awk の issue / issue of awk

gist.github.com 上記 issue の command.sh で、awkが直りました。
Awk has been fixed in command.sh of the above issue.

バージョンの切り替えができない / Cannot switch versions

rbenv で、2.5.0のインストールができましたが、バージョンが切り替わりませんでした。
その時に見つけた情報です。
With rbenv, 2.5.0 was installed, but the version did not switch.
Information found at that time.

Rubyのバージョンが切り替わらない時の対処法!

自分の環境は、zshなので、 .zshrcに下記内容を追記しました。
Since my environment is zsh, I added the following contents to .zshrc.

export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
eval "$(rbenv init -)"

ruby 2.3.3 => 2.5.0にバージョンアップできました。
ruby 2.3.3 => I was able to upgrade to 2.5.0.

余談 / Digression

jekyll の issue も見つけました。
I also found a jekyll issue.
github.com

bundle exec jekyll serve で起動

理由は、jekyllサイトのローカル環境構築が目的でした。
The reason was to build a local environment for the jekyll site.

ng deploy memo

f:id:ic_lifewood:20190914154053p:plain ng コマンドに deploy が追加されたので試してみれました。
I tried it because deploy was added to the ng command.

リポジトリ作成 / Create Repository

f:id:ic_lifewood:20190914154046p:plain

プロジェクト作成 / Create Angular Project

f:id:ic_lifewood:20190914154125g:plain

angular-cli-ghpagesを追加 / add angular-cli-ghpages

    "angular-cli-ghpages": "^0.6.0",

f:id:ic_lifewood:20190914154201g:plain

スクリプト追加 / add script

    "build": "ng build --prod",
    "deploy": "ng deploy --base-href=/ng-deploy-sample/",

f:id:ic_lifewood:20190914154302p:plain

ng ビルド実行 / excute ng build

f:id:ic_lifewood:20190914154332g:plain

ng デプロイ実行 / excute ng deploy

f:id:ic_lifewood:20190914154406g:plain

ブランチ

デプロイコマンドが実行されると、 gh-pages というブランチが作成されます。
When the deploy command is executed, a branch called gh-pages is created. f:id:ic_lifewood:20190914154459p:plain f:id:ic_lifewood:20190914154524p:plain

リポジトリ設定 / repository setting

リポジトリ設定へ移動します。/ Navigate to repository settings. f:id:ic_lifewood:20190914154542p:plain

GitHub Page

Sourceのプルダウンが、 gh-pages branch になっていれば、公開されています。
If the Source pull-down is in the gh-pages branch, it is open. f:id:ic_lifewood:20190914154647p:plain

デプロイコマンドの結果 / Result of Deploy command

https://gurezo.github.io/ng-deploy-sample/ f:id:ic_lifewood:20190914154719p:plain

サンプルコード github.com

for referrence

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. tips

Docker Angular
Dockerizing an Angular App with Karma and Protractor containers を試してみて、 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. に遭遇したときのメモ
A note on trying Dockerizing an Angular App with Karma and Protractor containers and encountering MaxListenersExceededWarning: Possible EventEmitter memory leak detected.

ブログ記事の Dockerfile ファイルを実装後、 docker build を実行したら、下記エラーが発生
When docker build is executed after implementing Dockerfile file of blog post, the following error occurs

➜  ng-dockerizing git:(master) ✗ docker build -t ng-dockerizing:prod .
Sending build context to Docker daemon  290.8MB
Step 1/11 : FROM node:alpine as builder
 ---> 8880b18e5207
Step 2/11 : COPY package.json package-lock.json ./
 ---> Using cache
 ---> f028b2d6387c
Step 3/11 : RUN npm ci && mkdir /ng-dockerizing && mv ./node_modules ./ng-dockerizing
 ---> Running in 1768cfde52e9
(node:6) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
 :
 :
(node:6) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit

> fsevents@1.2.9 install /node_modules/webpack-dev-server/node_modules/fsevents
> node install
 :
 :
> @angular/cli@8.2.2 postinstall /node_modules/@angular/cli
> node ./bin/postinstall/script.js

added 1085 packages in 42.247s
Removing intermediate container 1768cfde52e9
 ---> 8f2e18ff652f
Step 4/11 : WORKDIR /ng-dockerizing
 ---> Running in 907c44820503
Removing intermediate container 907c44820503
 ---> 6cdea1d1ae53
Step 5/11 : COPY . .
 ---> 6bd6b85f49f3
Step 6/11 : RUN npm run ng build -- --prod --output-path=dist
 ---> Running in 63e569baa171

> ng-dockerizing@0.0.0 ng /ng-dockerizing
> ng "build" "--prod" "--output-path=dist"


chunk {0} runtime-es2015.b2aca5be9e7b8cc1a1b4.js (runtime) 1.41 kB [entry] [rendered]
 :
 :
chunk {2} polyfills-es5.b71e50d75ad86204c322.js (polyfills) 118 kB [initial] [rendered]
Date: 2019-08-24T08:31:14.920Z - Hash: 26e87d3c676623e10980 - Time: 31228ms
Removing intermediate container 63e569baa171
 ---> 6c8fdfdd7be9
Step 7/11 : FROM nginx:alpine
alpine: Pulling from library/nginx
9d48c3bd43c5: Pull complete
13bf8394c846: Pull complete
Digest: sha256:e0f88b21626f56e5d9e038da863aee331640efb03ca7d8f453ed8243343acfaa
Status: Downloaded newer image for nginx:alpine
 ---> 41c8c3458a93
Step 8/11 : COPY nginx/default.conf /etc/nginx/conf.d/
COPY failed: stat /var/lib/docker/tmp/docker-builder601496124/nginx/default.conf: no such file or directory
➜  ng-dockerizing git:(master) ✗ 

エラー発生時の環境 / Environment at the time of error occurrence

➜  ~ npm -v
6.11.2
➜  ~ node -v
v10.16.0
➜  ~
➜  ~ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.0
Node: 10.16.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.0
@angular-devkit/core         8.3.0
@angular-devkit/schematics   8.3.0
@schematics/angular          8.3.0
@schematics/update           0.803.0
rxjs                         6.4.0

➜  ~

調査結果下記のissueを発見 / Find the following issues

github.com

対策は、以下の通り / The measures are as follows

➜  ~ npm install -g npm@6.10.3
/Users/lifewood/.nodebrew/node/v10.16.0/bin/npm -> /Users/lifewood/.nodebrew/node/v10.16.0/lib/node_modules/npm/bin/npm-cli.js
/Users/lifewood/.nodebrew/node/v10.16.0/bin/npx -> /Users/lifewood/.nodebrew/node/v10.16.0/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.10.3
updated 13 packages in 12.083s
➜  ~ node -v
v10.16.0
➜  ~ npm -v
6.10.3

npm のバージョンを下げて解決しました。 / Resolved by lowering the version of npm. 6.11.2 => 6.10.3

npm リリース情報 / npm release information

github.com

サンプルコード / Sample Code

github.com

angular-ja translation bazel

angular-ja translation
angular-ja translation

序章 / Introduction

昨日の 第8回:Angular もくもく会@グンマー 活動内容は、guide/bazel の翻訳 #412 でした。
Yesterday's 8th: Angular Mokumokukai@Gunma Activities are guide/bazel の翻訳 #412.

前回Angular Document Transration Beginingは、途中で休止状態になり、他の方に引き継いで頂いたという苦い思い出があります。
Previous Angular Document Translation Begining is suspended on the way and taken over by the other person I have a bitter memory that I received.

今回は、必ずPull Requestまでやり遂げようと思い、興味のあるテーマ且つボリュームが少ないページを選びました。 それが、Building with Bazel です。
This time, I always decided to finish up to Pull Request, and I chose a page with a few interesting themes and volumes. That is Building with Bazel.

第二章 / Chapter 2

まずは、リポジトリを最新に更新します。
First, update the repository to the latest.

➜  angular-ja git:(master) git fetch upstream master
➜  angular-ja git:(master) git pull upstream master

一度ビルドします。この時にエラーになりました。
原因は、 yarn が最新バージョン v1.16.0だったことです。
Build once. I got an error at this time. The cause is that yarn was the latest version v1.16.0.

ビルド出来るyarn のバージョンは v1.13.0 です。
The version of yarn you can build isv1.13.0.

第三章 / Chapter 3

まず、issueを書きます。
First, write the issue. issue 作成

issue対象のページを入力します。
Enter the page for issue. 対象ページ

入力完了です。
It is input completion. 入力完了

第四章 / Chapter 4

翻訳前にファイルをコピーし、ファイル名を xxxx.en.md とします。 今回は、 bazel.en.md です。
Copy the file before translation and name it xxxx.en.md.
This time, it is bazel.en.md.
翻訳前コピー

後は、差分を見易いように極力同じ行で、翻訳します。
After that, translate on the same line as much as possible to make it easy to see the difference. 翻訳

翻訳が一通り終わったら、Pull Requestを作成します。
After translation is complete, create a Pull Request. Pull Request

第五章 / Chapter 5

Contributor License Agreement (CLA)sign in & submmitします。
Sign in & submmit to Contributor License Agreement (CLA). CLA

その間にCircle CIで諸々のスクリプトが実行されています。
テストが失敗すると下図のようになります。
During that time, various scripts are executed in Circle CI. If the test fails, it will look like the figure below. テスト失敗概要 テスト失敗詳細

コンソールに出力されているエラーの内容を一つずつ修正します。
正常に終了すると下図のようになります。
Correct the contents of the error output on the console one by one.
If it ends normally, it will become like the following figure. テスト正常終了

第六章 / Chapter 6

後はレビューの結果待ちです。 今回はPull Requestまで出来ました。
The rest is waiting for the result of the review. This time we were able to pull request.

終章 / Final Chapter

マージされるまでが翻訳です。 心を無にして、結果を待ちたいと思います。
It is translation until it is merged. I want to have no mind and wait for the results.

参考 / referrence

lifewood.hatenablog.com

追記 / Postscript

先程マージされました。
It was merged earlier.

merge