2019-10-16

思考コストの少ない家計簿を作った

spreadsheet

思考コストの少ない家計簿を作った

f:id:kei_s_lifehack:20191016082146p:plain

background

普段Generic Excel, Googleの提供しているSpreadSheetで家計簿(expenses)をつけて収支計算をしている．
その際に「この欄は銀行口座で...ここがカードの引き落としで，これが食費で...と毎月書いていると欄を間違えている時間が長いと感じた．これは「コスト」である．時間も勿論だが，思考のエネルギーを無駄に使っていると感じた．
かのFB創立者Markも提言しているように，一日の思考(選択)には限りがあり，可能な限り無駄な選択は減らし，重要なことに思考を費やすべきである．

f:id:kei_s_lifehack:20191016082203p:plain

www.independent.co.uk

used tech

桁の欄で無駄に幅を取らないように，思考も少ないようにk(キロ単位)を使った．
文字よりも処理が早く負担の少ない画像，なおかつベクターアイコンを使用してテンプレートを作成した．(svg, png, gif, etc)
- Dark Mode で反転しても気持ち悪くならないのも理由の一つ．

f:id:kei_s_lifehack:20191016082250p:plain

Google Docsの採用理由はMacのshort cutの適応性と，自動保存でスマフォでも同時編集できるからである．勿論無料で広告なし．
- プログラミングとかしなくても，大抵の現場はこれで相当作業が減ると思う

www.google.com

CSSでweb siteを設計している経験を活かして，中央寄せなどでうまく揃えた

The sheet link
Google Spread Sheetはshareも簡単．img in cellが便利になったし．

Copy of expenses_2019-10-16~ - Google スプレッドシート

references

iconの収集に使ったサイトはこちら．楽天のロゴとかはPinterestやGoogle画像検索で保存した．

以上だ．皆さんもうまく思考を節約して，大事なところで頭を使おう．

2019-10-13

Ledger, 受付台帳, Detail

CAKE CSS Career PHP intro

intro

前回の八耐から業務用承り台帳Webアプリ，"Ledger"を製作している．
その進捗だ． Github: https://github.com/kaede0902/cake3/tree/master/ledger/

2019.10.13 11:50

at media 1450px, 880px, 320px,で分けた．
スマフォ，タブレット，PCに対応したresponsiveなlayoutにした．

f:id:kei_s_lifehack:20191013235817g:plain

2019.10.13 00:58

color change black main
set ctp. stylesheet.

2019.10.15 00:15

add hover to each card, and add link to edit of each card.
paginator Ui update

2019.11.10 04:00

start separating and using Element
Designed header

2019.11.10 05:45

Made up original header nav
And UI cleaner

f:id:kei_s_lifehack:20191110061128p:plain

2019.11.11 01:00

enabled changing background color black to blue, by done or yet.
card background changed by record, $ledger->done.

2019.11.20 00:35

Learned how to show img, add link to img
updated nav.
used the nav to index and add

f:id:kei_s_lifehack:20191120003938p:plain

2020.02.15 16:25

herokuでdeployを試みたが失敗してしまった

https://ledgers-k.herokuapp.com/

f:id:kei_s_lifehack:20200215162613p:plain

2019-10-12

CSS Grid Layout Cheatsheet

CSS HTML5

CSS Grid Layout Cheatsheet

what is css grid?

align direct child of the its display: grid items by grid.

www.youtube.com

gap
fr
repeat(times, numfr)
repeat(auto-fill, minmax())
repeat(times, width1, width2)
auto-rows
span

Define Number of columns and rows

Use these.

grid-template-columns: num num num;
grid-template-rows: num num num;

gap between each grid items

grid-column-gap: 20px;
grid-row-gap: 20px;
// or grid-gap:20px;

fr, repeat()

fr is a fractional unit.
equal width columns.
1fr: 100% width 1 column.
2fr: 50% width 2 column.
3fr: 33% width 3 column.

grid-template-columns:

1fr

f:id:kei_s_lifehack:20191012225325p:plain — 1fr

1fr 1fr

f:id:kei_s_lifehack:20191012225424p:plain

1fr 1fr 1fr

f:id:kei_s_lifehack:20191012225448p:plain

repeat()

these are same.

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(10,1fr);

f:id:kei_s_lifehack:20191012225603p:plain

repeat(auto-fill, minmax())

css-tricks.com

simple responsive layout element
at least width 250px, align 1fr

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr) );

f:id:kei_s_lifehack:20191012225649p:plain

repeat pattern

width (50px, 100px) x 3 times.

grid-template-columns: repeat(3, 50px 100px);

f:id:kei_s_lifehack:20191012225756p:plain * width (100px, 30px) x 3 times.

grid-template-columns: repeat(3, 100px 30px);

f:id:kei_s_lifehack:20191012225814p:plain

auto-rows

www.youtube.com

define all rows height!

grid-auto-rows:70px;

f:id:kei_s_lifehack:20191012230301p:plain

span

increasing this increase the one grid.

.item5 {
    grid-column: span 3;
}

span 1 (default)

f:id:kei_s_lifehack:20191012230336p:plain

span 2

f:id:kei_s_lifehack:20191012230401p:plain

span 3

f:id:kei_s_lifehack:20191012230412p:plain

general

use nth-child(even) to look easier.

.item:nth-child(even) {
    background: #236fc8;
}

2019-10-04

Form Cheat Sheet CakePHP

Form Cheat Sheet ~ 覚書 ~

why

I got err.

Notice (8): Undefined variable: ledger 
[APP/Template/Ledgers/edit.ctp, line 20]

in edit.ctp Line 20:
<?= $this->Form->create($ledger) ?>

I did not how GET or POST data send.
So I dicided to write down GET and POST basic.

concept

List basic CRUD usage by MIN examples
use Ledger TABLE.

index (pass data)

Controller

public function index(){
    $ledgers = $this->paginate($this->Ledgers);
    // or $this->Ledgers->find('all'));
    $this->set(compact('ledgers'));
}

take all record by arr from ledgers table.
and pass ctp $ledgers by set(compact('hoge')) method.
ctp

<?php foreach ($ledgers as $ledger): ?>
<?= h($ledger->customer_name) ?>

select values by foreach() form the $ledgers and print each ledgers column record.

edit form (update)

index.ctp

<?= $this->Html->link(__('Edit'), 
['action' => 'edit', $ledger->id]) ?>

This sending GET to edit.ctp!
passing this url:
http://localhost:8765/ledgers/edit/2

Controller/edit()

$ledger = $this->Ledgers->get($id);

can send $ledger safely to edit.ctp this goes patch or put. maybe.
debug

https://qiita.com/qiita_taro/items/23f935f24840d0bd3cf9 https://www.codeofaninja.com/2012/04/cakephp-2x-crud-tutorial.html

debug($this->request->params['pass'][0]);
// GETの場合
debug($this->request->query);
// POSTの場合
debug($this->request->data);

Returns id sent by GET

Form

Controller

In LedgersController/edit/:

$passedArgs = $this->request->params['pass'][0];
debug($passedArgs); // 2
debug($this->request->is('get')); // true.

        $ledger = $this->Ledgers->get($id);

        // this is POST only -------------
        if ($this->request->is(['patch', 'post', 'put'])) {

            $ledger = $this->Ledgers->patchEntity(
                $ledger, $this->request->getData());
            if ($this->Ledgers->save($ledger)) {
                $this->Flash->success(
                    __('The ledger has been saved.'));

                return $this->redirect(
                    ['action' => 'index']);
            }
            $this->Flash->error(
                __('The ledger could not be saved.'));
        }
        $this->set(compact('ledger'));

that was GET method.

This save data to DB.

To improve form UX by CSS

blogs.windows.com

2019-09-30

八耐 ~八時間耐久製作会~ に参加しました！！

八耐に参加しました！！

八耐とは？

八耐とは – 大八耐

From FukuOka EngineeringUniv, Sato moved here and continued the project.

where

Mixi, at Shibuya

mixi.jp

another building of main building.

f:id:kei_s_lifehack:20190930194046j:plain

Menter

SawaGuchi at Personal Innovation com

Sato at Mixi promter, from Fukuoka

My 8 h Project

I will make another article for this too.

CakePHP3で作成した．

こんな感じでUIを書いて，DB構成を作って

miro.com

f:id:kei_s_lifehack:20190930194114p:plain

工事などの承り台帳としてのledge appを作成した．

f:id:kei_s_lifehack:20190930194152p:plain

migrationでTABLEとCOLUMNの作成をした

bin/cake bake migration CreateProducts name:string description:text created modified

bin/cake bake migration createLedges \
customer_name:string[64] \
customer_adress:text \
customer_tel1:string[64] \
customer_tel2:string[64] \
staff_id:int \
work_category:int \
content:text \
created:date \
reserved:date \
modified:date \

bin/cake migrations migrate 
bin/cake bake all ledgers

命名規則ゆえのエラーもメンターの沢口さんに助けてもらって，要件listのCRUDまでは完成した

f:id:kei_s_lifehack:20190930194910p:plain

が，editの画面でエラーが直せなかった．GETで持ってきているものを POSTで処理するIF文になってるみたいだが，時間内 (18:00)までには解決できなかった．

f:id:kei_s_lifehack:20190930194213p:plain

ガガンガン

Mixi社員の人が持ってきたガガンガンを楽しんだめっちゃ熱中しました．動画も貼りたいな

f:id:kei_s_lifehack:20190930194236p:plain

other man

4 grade student

www.microsoft.com

horo renze app. baseball, xr strike app, playball, strike, ball, from app contest!

HiroZawa

Working as a menter, for new one
HTML C lang textarea exe app!
for the C env for windows env
written by go and docker
compiler in docker.
present by draw.io

Imoto in Mixi

robotstart.info

GAGANGAN, 2.5k in Amazon I played a lot.
shoot and move around.

man(in Fukuoka)

rasuberry pie tank. A camera is build.

Ohsiro(in Fukuoka)

a spair teacher in KyuSyu
STG. Cannot see in plane's status is students grade.
students can make bullets.

交流タイムでは沢口さんとcakeのよしなにやってくれすぎるがゆえのエラーのあるあるで盛り上がって楽しかった． Evaの人にblender移行を妨げる原因について聞けて面白かった，ペンタブのペンを忘れてマウスだと100倍時間がかかると聞いて逆に Blenderのpenの効率がすごいなと思った．当然がガンガンもした．

japanese.engadget.com

on the way back

Cset DNS CNAME: orininal domein fileを記載すればgithub pages で簡単に独自ドメインportofolioが作れて「わかってる」アピールになると教えてもらった．.tokyoが狙い目らしい

pages.github.com

のでそれで作る．.xyzはエロサイトが多いので，エロサイトを作るときだけにしておきます...w

shooting game, VBA pop making app, resume gold rate そしてそれをGithub.io にリンクとYouTubeで撮った動画のリンクも乗せ、独自ドメインと本気のデザインで納得され、 paper などで新卒280k手にした即戦力の人の話を聞いた
景気がいい．
俺もProductとPortfolioを作れないわけではないし，努力を続けて彼になりたい．是非ロールモデルとして参考にして，同じようになれるよう充実させていこうと思う．

お金欲しい！！頑張る！！！！！

add 追記

2019.10.04 H 01:04 (FRI)

ようやくシステムのdebugが終わりました！！！

お客さんの名前住所電話番号，案件カテゴリ，担当者，案件詳細をPHPとDBで管理する従業員用業務システムです！！！

八時間どころか80時間かかった気がしますがやり遂げた！！！全部追加と編集できるしセレクトも組めた！！

あとはデザインと詳細詰めていきます．やり遂げた... 一段階やり遂げた..... (問題はEntityのaccessibleのfalseとtdとthの見逃しでした．やはり自動生成されたコードはバグの温床になりやすいかもな...)

f:id:kei_s_lifehack:20191004013656p:plain

all code here

github.com

2019-09-30

playCanvas hands-onに参加しました！！

HTML5 Event JavaScript Career GameDev

playCanvas hands-onに参加しました！！

f:id:kei_s_lifehack:20190930183521p:plain tag: event, HTML5, js, gamedev

what なにそれ？

PlayCanvasのハンズオン！その場で作って，公開まで流れを掴もうという会． Unityの用なweb 3dゲームをブラウザの中で完結させられるプラットフォーム．

https://playcanvasjp.connpass.com/event/139680://playcanvasjp.connpass.com/event/139680/

At GMO internet, PlayCanvas Promote room,

f:id:kei_s_lifehack:20190930183337j:plain

www.gmo.jp

by Haga, working as R&D, ex front engineer

2 girls (serverside engineer) and 3 men attended

where

shibuya, GMO Internet com

GMO LOGO

hands on

Contents are in another article

Made Doser game , cut from branch,

f:id:kei_s_lifehack:20190930183403j:plain

used this.

playcanvas-cedec.gitbook.io

PLAYCANVAS | 日本公式サイト

How was it

MacBookPro15inch 2019を使っているのにかなり読み込みが重い． Wifiが弱いと初手の読み込みすらできないのは辛い．

一応その通りに用意されたJSを追加して衝突判定作って完成はしたが，後述のコイン累乗バグが解決できなかった．

PCの中で動かすUnityやUE4と比べるとどうしても通信やそれに伴う読み込みが発生するので，不利ではないかと感じたが実は前者の二つともInstallしかしてないので，動かして比べて見たくなった.

しかしGUI操作は手作業な一方バグが発生しにくく，特に衝突判定は非常に直感的だったので素晴らしいものだ．

Problem

f:id:kei_s_lifehack:20190930183437p:plain falling coin is not one by one.
it powerd (like 1, 2, 4, 8, 16...) off course stacked over flow

It could not be solved by Haga

can use as progressive web app

HTTPS,manifest.json, fetch event handler to service worker

doing things like that, pusing github page enables PWA.

talke to Haga after the event

I showed him my shooting.html

kaede0902.github.io

intro blg link

He is surprised so much.

Three.js, pixy, babiron.js などのライブラリを教えてもらった． look MDN game engine compare.

drink in shibuya

エンジニア2年目の方が居たので，就活の話でも聞こうと渋谷駅まで一緒に帰らせてもらった。

AWS EC2でのPHP Project 公開を勧められた．

ご飯をご一緒した，鳥貴族に行った．MEGAでも全品298は安い！

f:id:kei_s_lifehack:20190930183245j:plain

就活のコツは名刺配りまくり，メールを必ず一本うって印象付けろとのことだった．
上司の方の方に最初に配属されたソシャゲ会社での PHP案件の話を聞いた．

300枚3kだとしても高く感じられて作っていなかったが，ちゃんと裏までデザインして裏に使える技術とか並べて，作っていこうかなという気になった．
強く勧められたのでFaceBookも始めた．
やはりFBしかやっていないからと行って連絡後で取れなくなってしまうのはもったいない(?) 二人にはしっかりメッセを送った．
話していてスパイスファクトリーの退職は結構トラウマになっているので，なんとか乗り越えないとなぁと思った．
これを書いているのが二日後の月曜日なのだが話した内容を割と忘れてしまっているので，ちゃんと覚えてるうちにアウトライン書いておかないと行けないと危機感を持った．

こういう会に参加して頑張って会話をすると大きく現職の優秀なプログラマ様から知見を得られるので， 19:00 ~ 渋谷なら仕事の後に参加しやすいし，出来る限り参加していこうと思う．

(EOF)

2019-09-27

第8回ゴリラ.vimに参加しました！！

Bash Event Vim

第8回ゴリラ．vimに参加しました！！

What is this event

Vimmers event, organized by a man making docker TUI controller

https://gorillavim.connpass.com/event/146919://gorillavim.connpass.com/event/146919/

where

Shibuya Station, to 20min West. 渋谷区南平台町16-17,住友不動産渋谷ガーデンタワー9F

LT Speakers

pocke

twitter.com

long poney tail guy
comment if condition if's end
He is using vim mode in terminal
exit internet univ and worked.
He was working in univ.
He told me how tmux session works.

gorilla

twitter.com

Made Docker.vim
Developping OSS, vim plugin, go tools,

image (list, del, pull, push, search, tag, build, open in broser)
containers (print, start, stopm kill, )
monitor (docker events)

use in :hoge can work php
It has a monitaring windows!!
graph is especialy very adimired.

All men in this room was heat up.
//I should have the docker skills?

using curl in back.
separating by docker/api docker/window

Miura(supporter)

at CCC marketing

www.cccmk.co.jp

(all using Let's Note.)
Writing: Arudiuno, Python, JS,
Doing T point service dev, by deep learning
using python lib, vue, bt4,
Started vim by:
* Vim Adventure: till lv 3, free vim game. * Vim tutor: basic tutorial in bash. * typra: powerful markdown viewer. He stopped using vscode!!

ShigeMoto(ForkWell)

He is working at grooves that has many vimmer.

forkwell.com

forkewell products

forkwell portfolio: can read github or qiita,
forkwell scout

about tmux

github.com

pocheさんにsessionが理解できていない話をしたら実演してくれた．
彼はDirectoryごとにsessionを分けて名付けして管理し，それを terminal appのtabごとに開いているらしい．
sessionはcommand q しても破棄されないので，安全に復帰できるし自分のやりたかった分割したpainとwindowの保持もこの技術でできた．
Meguro.vimのorganizerのthincaさんにsessionがwindowを含んで， windowがpainを含むことを確認してtmuxの理解が大きく深まった．
(tmux cheat link)
この記事をupdateしなければ！！

具体的に彼には,session listの出し方とattach(使うsessionを選択して開く) の方法，defaultの番号で管理する方法に、彼のオススメの名前をつけるやり方を教えてもらった． sessionは常に起動している.

隣の機械学習エンジニアさんに話したらtmuxは感動を与えることがわかったから紹介記事ちゃんと書こうと思う．

career

生き様と新卒採用について

帰り道一緒になったGorillaさんに相談した.
f:id:kei_s_lifehack:20190927000536p:plain どういう技術持つ人間が欲しいか。
すると力強いメッセージを頂いた。

企業のWeb見ても分からない、だからまずインターンすると言った。彼にもあとから技術は付けられる、だが人間の生き様や方向性は他人が絶対に口出しできない。そこを自分だったらみる。でも実際いくら熱意があっても口だけではわからないから、なにか作り続けて行動として登壇する事だと言われた。自分の勉強会もガンガン使っていけと。それで実際に熱意を行動として示せと！！

隣にいた方にも先行募集をチェックしてなるべく早く面接するべきと言われた。第一志望が残っていると力が入らないらしい。

実力不足を言われるのが怖いから技術が着いてきた後半にしようと思っていたが、それは間違っていたようだ。

やはり、「なにもしないと人生(学生)は長くなにかをするにはあまりにも短いのだろう。」挫折せずに作り続けなければ行けない。自分の欲しい世界を構築できるものを。

調べよう労務freee(行きたい仕事効率化企業)を。交渉しよう。土水のインターンを。春のインターンを。そして必要な足りない業務知識やスキルを食らいついて聞き出す。それをしないとダメだ。

自己肯定感とツールについて

日本にはエンジニアでさえも？自分の制作物を持っていなかったりツールに最大効率を求め続ける人間が少ないせいか私はVimのextentionsをはじめとするプログラマーっぽく素早く思った通りに作業できるツールを使えていてそれらを全く知らない人に褒められることが多く，恥ずべきことであるがそれだけで自分は技術力あるんだすごいと間違った思い込みをしてしまうことがそこそこあった．もちろんツールを使いこなすのも技術ではある意味あるのだが，本当の技術とは自分でそれらを作成して使ってもらうことであって，それに至っていないにも関わらずに調子に乗るのは自己肯定とは違うしそこは勘違いしないようにしようと思った．
まとめると拡張ツールは全てツールであり，それを使った作り上げたものがない人間は何も理解していない空っぽだという事だ．

今回のCakeのCRUDアプリもそうだが，ゴミみたいなもの作って(出来てすらいない) 楽な技術使って知らない他人に褒められるのは良いことではない、

それよりもゴリラさんみたいにデザインにメッセージ性が見えない、誰になにをアピールしたいのかしっかり考えてそれを調べながら色つけしていってなどと言われたことを大事にしていくべきだろう．
褒めてくれるのは悪いことではないしそれを悪くいうつもりは毛頭ないのだが，どういう話というか，人間関係というかコメントというか，それをよく考えていこうと思う．自分のポエムをここまで書くのは久しぶりだからあまりまとまっていなくてすまない，だが正規雇用の獲得という大きな転換に向けて方向性は最も大事なものであるらしいので，これからもこういう記事が続くであろう良ければ今後もKAEDE HACK BLOGにお付き合いいただきたい，無論開発技術のシンプルな導入や紹介などの本来の方針も続けていくので．

(EOF)

思考コストの少ない家計簿を作った

background

used tech

The sheet link

references

intro

2019.10.13 11:50

2019.10.13 00:58

2019.10.15 00:15

2019.11.10 04:00

2019.11.10 05:45

2019.11.11 01:00

2019.11.20 00:35

2020.02.15 16:25

CSS Grid Layout Cheatsheet

what is css grid?

contents

Define Number of columns and rows

gap between each grid items

fr, repeat()

grid-template-columns:

1fr

1fr 1fr

1fr 1fr 1fr

repeat()

repeat(auto-fill, minmax())

repeat pattern

auto-rows

span

span 1 (default)

span 2

span 3

general

Form Cheat Sheet ~ 覚書 ~

why

concept

index (pass data)

Controller

ctp

edit form (update)

index.ctp

Controller/edit()

debug

Form

Controller

八耐に参加しました！！

八耐とは？

where

Menter

My 8 h Project

ガガンガン

other man

4 grade student

HiroZawa

Imoto in Mixi

man(in Fukuoka)

Ohsiro(in Fukuoka)

on the way back

add 追記

playCanvas hands-onに参加しました！！

what なにそれ？

where

hands on

How was it

Problem

can use as progressive web app

talke to Haga after the event

drink in shibuya

第8回ゴリラ．vimに参加しました！！

What is this event

where

LT Speakers

pocke

gorilla

Miura(supporter)

ShigeMoto(ForkWell)

forkewell products

about tmux

career

生き様と新卒採用について