TIL:  JSX ＜Foo bar={bar} baz={baz}＞  can rewrite 
＜Foo {...{baz,bar} }＞

JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける

next.js(vercel)でString.prototype.replaceAllをpolyfillする

ちょっとだけコンパクトなJSON.stringifyをする

JavaScriptでObject.entries/fromEntriesでreduceの利用頻度を減らす

Magicを使ったマジックリンクログインをReactでの素振りサンプルと感想

expoのapp.jsonでflavorみたいなことをやる

next.jsでAPI resolved without sending a response...のエラーが出るとき

JavaScriptで億とか万とかに変換したいときはNumberFormatのnotation:compactが便利

opensslで暗号化したファイルをnode.jsのcreateDecipherivで復号する

Operate Firestore data with robot account on server side

firestoreにサービスアカウントっぽいアカウントで操作する

next-authとgetServerSide(Static)Props使うときの__NEXT_DATA__に注意

pillowでtextを泥臭くletter-spacingする

react-navigationで画面遷移したときにuseSWRをrevalidateしたいときの話

@zxing/browserとReactの組み合わせでQR Code Reader作る

Prisma2でDB Resetを無理やり行う

lodashの代わりにjustを使う

大腸の内視鏡検査をしたので次回のためにメモ。
[** 1ヶ月前]
どうも尻から血が出るし痔っぽかったので肛門科を探して行った。
感覚的に切れ痔とかじゃないのかと思ったがどうも中から出てるっぽかった。
「とりあえず薬出しときますね」と言われたのと同時に「内視鏡検査とかやったことある？なかったら一回ぐらいやっといたら？」と言われたので「ああ、そうですか」みたいな感じでやることにした。

内視鏡検査した

息子が2歳になったので0〜1歳向けの良かった絵本をまとめる（主に乗り物系）

Process `string | string[]` item with `flat()` and `map()`

Thinking about expo ( React native) versioning.

expo(React Native)における私的バージョニングルール検討（あるいは如何にしてOTAと付き合うか）

Generate staging app.json for Expo like flavor

Expoでflavorっぽいことをする

- M5 Burner
- UIFlow-1.4.5.1
- SeriesをAtom-Matrixにする
- Baudrateは750000
- いまいちわかってない。

M5 AtomでmicropythonのREPLやるやつ

[*** 使っていた自前]
https://github.com/terrierscript/dogrun-template
構成
Parcel / React / TypeScript / chakra-ui / jest / prettier
[*** なぜ自前で素振りにしてたか？]

自前の素振り用テンプレをやめてnext.jsでまかなえるか？

#GCP
↓移動しました
https://zenn.dev/terrierscript/articles/2020-06-10-cloud-run-cloud-sql-hasura-prisma 

CloudRun + CloudSQLでHasuraとかPrismaとか使うときの設定のアレ

[** 概要]
マックのモバイルオーダーアプリが色々考えて最高
2019/7月頃には部分的に実験してたらしい
https://gasket.bizright.co.jp/2019/07/4/
上記記事によれば2020/01頃に全国展開

マックのモバイルオーダーが好きすぎる

当たり前だけど<RecoilRoot>がなければ怒られる
同じキーを設定したら上書きされる
当たり前だけど下記は怒られる
atomGenerator的な関数は可能

Recoil

Subscribe Pusher on the node environment

#GraphQL
hasura
サーバーを立ててそこにHTTPアクセスする
クライアント側は提供してない。apolloか何かとかで組み合わせる
API周り生成したかったらgraphql-code-generatorを組み合わせる

hasuraとPrisma2

[** 色々前提]
mac版は gd32v-mac-unofficial じゃないと動かない
dfu-utilが多分いる（うろ覚え）
焼き込むときはresetボタンを押しながらbootボタンを押して離す。どっちがどっちかわからない
[** とりあえずCでサンプル動かしたやつ]

Longan Nano Liteあそび

https://github.com/hasura/awesome-fluent-graphql/
[*** JSで記述したオブジェクトをGraphQL化する系]
gotQL
リクエストクライアント内包型
クエリの書き心地はだいぶ変わる

Awesome Fluent GraphQL つまみ食い

#redux #react
[*** 食わず嫌いしている理由]
「あくまで選択肢の一つ」というのは理解出来る
しかしRedux Toolkitが「Style Guideとして推奨されている」という事実にはあまり好みな感情を持っていない
https://redux.js.org/style-guide/style-guide#use-redux-toolkit-for-writing-redux-logic

redux-toolkitを食わず嫌いしないでみる

#React
[*** 課題]
[** パターン]
state, actionsごとにわける
reducerの中でactionを作る

複数のuseReducer、どうまとめる問題

[** 方向性]
言語をいじくりまわすのと同じ気持ちを忘れない
楽しいからという目的のみでやる。
rustで遊ぶのはなぜか？rustをやりたいからであってrustの仕事をするためではない
飽きたらやめる。

English

#React_Native
stack
あくまでstackの動きをエミュレートしてると考えるのが良さそう
https://twitter.com/terrierscript/status/1231598848021151749?s=20
stackの考えのwebとの違い

React Navigationについて知ってること

#React_Native
ファイルを読み込んで云々するやつ
https://twitter.com/terrierscript/status/1225266943831076864
kitten 
themeの作り方

React Native 書けそうな話

#React_Native
expoを使う
expo sdkがある
expo install xxx
tabテンプレートは参考になる

React Nativeについて知ってること

[react] [redux] [React Hooks]
https://twitter.com/terrierscript/status/1207325004095819778
[Hooks時代のReduxについての感想下書き]
[*** 背景]
Hooksが産まれた

2020年になったのでRedux離れを考える

[*** どれ]
https://amzn.to/36KNdsz
[**** ソフト]
[*** CAD化]
tinkercad

安い3Dプリンターを使ったメモ色々

3D Printing JSX model with react-three-renderer

styled-componentsで作る年末年始にぴったりなCSS Gridにおける要素の重なりの話

Gatsby + netlify から next.js + zeit/nowに乗り換えようと試みて(未遂)得られた知見

Tips: CSS Variables for styled-components

Create animating element on CSS Grid with React Hooks 

React Hooksを利用してCSS Grid上の要素をアニメーションする

Suspend pinch-zoom on React Hooks

styled-componentsで複数のpropsを利用したい時にcss helperを使ったいい感じのやり方を考える

next.jsでForkTsCheckerWebpackPluginを実行させない方法

gatsbyでmarkdownをコンバートしているところをreact-markdown + remark-syntax-highlightに置き換える

このブログの配信をnetlifyからnow.shにした話

疑似要素
`:in-range`
https://developer.mozilla.org/ja/docs/Web/CSS/:in-range
max/minの値の間かどうかで出し分け出来るやつ
`:out-of-range`

細かすぎて伝わらないCSS機能

parcel2が来る前に不要なmainフィールドはpackage.jsonから消しておいた方が良さそう

Web Componentsをgatsbyで使えばmdxいらずである程度色々出来る

#React #React_Hooks
（量が出てきたら別途まとめたいやつ）
![Hooksアンチパターン]
無限ループ起こる系
ContextにObjectを入れてないか？

React Hooks useEffectsチェックリスト

#javascript #React #React_Hooks
[** 前提]
hooksのdependencyには「いかなる理由があっても嘘をつくべきではない」
https://overreacted.io/ja/a-complete-guide-to-useeffect/
`// eslint-disable exhaustive-deps`は認められないものとする

React hooksのdependencyについて

フロントエンドエンジニアというものについて余計なことを考える（2019秋版）

英語字幕とテキスト読み上げ機能を使うと少しだけ英語が捗った話

JavaScriptのMath.min/maxの挙動の気をつけどころ

Apropcalypseという造語に出会ったのでまとめる

React Hooksだけでライブラリ使わずにgoogle mapを利用する

react-hooksのuseStateでfunctionを管理させたい場合のTips

CSSを書くエンジニアがなるほどデザインを読むとCSSに対して意識が変わるかもしれないという話

onAuthStateChanged
ログインしてなければnull、されていればcurrentUserとれる
しかしこれどこに置く？みたいな問題ある
[* 案]
Contextに置く

ReactでFirebaseの認証どこ置く問題

#redux #TypeScript
補完めっちゃ効いてハッピーハッピー村

ReduxとTypescript型ちゃんとつけてあげる

#Serverless #React #Firebase #next.js
+ Firebase
単純にAPIの代わりなのだから不都合はない
+ next.js
これどうなる？ちょい謎。

Redux + Firebase or next.js

#Firebase #Serverless
verifyの違いは？
verifyIdToken
idTokenVerifier.verifyJWT(idToken)
createIdTokenVerifier

Firebase/Session・認証周り

#Serverless
２つある。
flex
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/hello-world/flexible/app.yaml
standard

Google App Engine

#Serverless #Firebase
Auth
めっちゃ強い
認証そろってる。
JWTベース

Firebase

#Serverless
SSRをすべきかどうか？
元々
SSR＝コスパ良いか？うーん微妙　という立場
とはいえ、食わず嫌いみたいな部分ちょっとある

SSRとかSPAとか

#気持ち
システムの分割、難しい
最初から考慮出来るか？
大きい企業の新規事業とかであれば？
最初から一定のスケールが考えられているという場合

システムの分割について

#TypeScript #気持ち
flowとtypescriptを改めて比較しようと考えた
けどそうじゃない、結局TypeScriptが良いというだけだと気づいた
TypeScriptが良いのはそうなんだけどそれよりVSCodeが良くなりすぎてるという方が圧倒的に強い
最近のえげつなく良いVSCodeの機能

TypeScriptとFlowのことを考えたら、ただVSCodeがえげつなく良いだけだと気づいた

[https://lh3.googleusercontent.com/-25kUJKCbg78/AAAAAAAAAAI/AAAAAAAAABs/7w6gHjdUMhA/photo.jpg]
this is terrierscript’s page
#member

terrierscript

VueとReact比較した話：余談

普段使いから始めるNext.js

react hooksで初回に設定されたら変えさせないテクニック

#TypeScript #react
2019/10/05
[* この記事のミッションステートメント]
TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす
対象読者

今こそ伝えたい！@ts-ignoreの魅力

#React #React_Hooks
DIパターン
共通的な要素のDIのためのもの
Event Receivedパターン
ライフサイクル上で何らかのイベントが発火したらそれを踏まえてイベントを飛ばすなど

Hooks Design Pattern

CSSは辛い。
性格に言うとセレクタやその周辺が辛い
property自体はそこまででもない（いやそこまででもあることもある）
[*** ここが辛いよCSS]
[** カスケード・セレクタ編]

CSS罪に処す

https://note.mu/terrierscript/n/n263331addd7d
↑
こっちに清書した
元ネタ・参考文献
https://shgam.hatenadiary.jp/entry/2019/09/21/104413

[archived]JSON色付けに思うフロントエンドのこと(2019年秋版）

#react #redux
2019/09/25
[** 主題: もうnormalizr使うこと無さそう ]
Redux
主となる役割は状態管理である。

さよならnormalizr

#Rust
基礎編
https://doc.rust-jp.rs/the-rust-programming-language-ja/1.6/book/concurrency.html
メッセージパッシング
https://doc.rust-jp.rs/book/second-edition/ch16-02-message-passing.html

Rustの並列性がわからん

#Rust
[*** 前提]
Raspberry Pi Zero HW
SH1106使う
WS-13890

Rustわからん (raspberry pi corss compile編)

#rust
[* Installation]
[* arrayに変換]
[* arrayをloopする]
[* debug]

WASMさっぱりわからん

parcel + rustでwasm_bindingを使うとき （TypeError: WebAssembly.instantiate(): Imports argument must be present and must be an objectの解決

yarnでnodeのバージョンが合わない場合に無理やり回避するオプション

Firebase Functions + TypeScriptをparcelで事前ビルドしてやりすごす

#react #React_Hooks
[* こんなhooksは嫌だ]
複数のeffectがdocument.titleが書き換え合戦をする
無限ループeffect
refsに頼りすぎる

Hooksアンチパターン

#react #redux
[* TL: DR (個人的感想)]
相変わらず有益なのはcombineReducer。これが使いたいかどうかで決まりそう
気をつけてればuseContext自前でも行ける気がする（行けると信じたい）
簡易な非同期通信のためのmiddlewareはオサラバしたい（できるとうれしい）

terrier.dev

About me

@terrierscript

Links

Recent Posts