社内向けの管理画面の認証にSlack認証を使うと便利だった

記事をGatsbyからzennに移植しはじめた & 見つけたハマりどころ

zenn cliの記事作成機能っぽいのををinquirerで対話式に自作する

next.jsのAPIを利用して画像proxyのAPIを作る

javascriptで全角は2文字、半角は1文字な文字長(幅)の計算をワンライナーで行う

toLocaleStringでISOに近いフォーマットにしたいときはlocaleをsv-SEにする

標準機能でDateをformatする色々（toLocaleString/Intl.DateTimeFormat/etc)

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

next.jsでSSRの問題が起きたときにはdynamicとssr:falseでお手頃SSR回避出来る

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

string|string[] な値をいい感じに処理する

Thinking about expo ( React native) versioning.

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

SWRとReact Queryどっち使おうか検討したメモ

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やるやつ

M5StickCが回転したら画面も回転するようにするやつ

[*** 使っていた自前]
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とか使うときの設定のアレ

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

Pusherのクライアントをサーバーサイドで自己認証する

#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について知ってること

ReactNativeでignoredYellowBoxではなくYellowBox.ignoreWarningsを使う

#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

react-three-fiberを使ってJSXを3Dプリントする

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

React Hooksでモバイルデバイスのpinch zoomを抑止する

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 Hooksからpng-pongやCanvas経由でBitmapを直描画する

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

React Hooks useEffectsチェックリスト

内部要素のサイズに合わせてfont-sizeを調整するcomponentをhooksで作る

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

React hooksのdependencyについて

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罪に処す

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

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の並列性がわからん

cargo-watchでターゲット(--target)を指定したい

linear-gradient + styled-componentsのドットを描画を利用してQRCodeを表示する

#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はオサラバしたい（できるとうれしい）

Hooks時代のReduxについての感想下書き

netlify devでportを騙さなくなってよくなった話（ & ERR_INVALID_ARG_TYPEを回避する）

FirebaseにアップされたDialogflowのFulfillmentをUnit Testする

Rewrite Auth0 Example with React Hooks

netlifyでyarnやnodeのバージョンを指定したりフラグを渡したりする

netlify devでparcelがランダムポートにならないように騙す

parcelでCannot read property 'length' of undefinedが出たら`.cache`ディレクトリを消す

parcelでsvelte3をセットアップする

JavaScriptの10..toSting(3)というピリオドが2つ続く記述を見つけたのでを調べた

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

lodashのflattenDeepをArray.prototype.flatで代用する

JavaScriptのMath.max/Math.minが可愛い挙動をしてくるので気をつける

TestCoroutineContextを使ってdelayやtimeoutの絡むCoroutineのテストをする

#rust
[*** Cargo]
`cargo watch -x run` 便利
cargo-watch
cargo-edit

terrier.dev

About me

@terrierscript

Links

Recent Posts