知見
経験から得た物事の芯を書き出すという試みをしている。 チームのリーダーをやったり、エンジニアリングマネージャーをやった経験から今回はチームについて。 scrapbox.io 最近は思考をScrapboxに書き出している。
2FA: two-factor authentication = 二要素認証/2要素認証 この記事では以下、2FAで記載する。 E2Eとセキュア問題 E2Eテストするサイトがログインが必要かつ2FAが必須というサイトが当たり前になりつつある。 で、E2Eテストするときにヘッドレスブラウザ上で…
タイトルが雑だし、こんな記事を書くのも変な話だけど、意外と書かれているのが少ない気がしたので書いておく。2023年以降になったらプラクティスがまた変わってるかもしれないけどそれはそのとき。 久しぶりにカスタムHooks書いていて、「Hooksの内部処理な…
人様のフロントエンドのDOMをいじるのが好きで、Listenerを調べたくなるときがある。 やり方知らなかったのだけど、ググったらあった。 stackoverflow.com Chrome限定になるけど謎のAPIがdevtoolsに生えていて、これで click だの mousemove だのリスナーが…
yarn workspacesでmonorepoを構成しているときに特定のpackageだけhoistの対象外にしたいというときがある。 そういうときにどうすればよいかというと、noHoistオプションを単に使えばいいのだけどなぜかちゃんと書いてあるつもりなのにnoHoistが効かなくて…
yarn workspacesでmonorepoを構成しているときに特定のpackageだけhoistの対象外にしたいというときがある。 そういうときにどうすればよいかというと、noHoistオプションを単に使えばいいのだけどなぜかちゃんと書いてあるつもりなのにnoHoistが効かなくて…
タイトルが長い。しかもパッとわからない。 ので以下のストーリーを理解されたい。 ストーリー 脆弱性があると言われている GitHubでセキュリティアラートをONにしていると依存しているライブラリに脆弱性があったときにこんな感じに教えてくれる。 そしてDe…
タイトルどおり。 アプリケーションでエラーが出た場合にSentryにエラーレポートを飛ばしていたのだけど、送信する手前でなんかごにょごにょやりたくなったので調べた。 beforeSend Sentryのドキュメント、ものすごく目的のものを見つけづらい。 docs.sentry…
SVGの内側にコンポーネントを表示させようとして、やったらハマった。 普通にできるものだと勘違いしていたけれど、SVGの内側にはSVGが描画できるタグしか通常描画できない。なぜならSVGはSVG空間だから…。 結論 foreignObjectを使う。 developer.mozilla.or…
オブジェクトのキーが [ ] ←これ に囲われている 見かけたことはありますか?僕はあります。 const obj = { [a]: 'foo' } こういうやつ たまに見かけるけど頻繁には見ないのであんまり書くことも少なくて、ついどういう挙動だったか忘れてしまうシリーズ。 …
経緯 github.com react-loopsというHooksを使ってJSXでForループをやるというアプローチのライブラリが出ていたので見ていた。 実装どうやってるんだろうな〜って思ってソース見てたらなんかPropsオブジェクトのプロパティをチェックしていて、あんまり見な…
タイトルが長い! 3行 useCallback(()=> ,[])とかuseEffect(()=>,[])みたいにハンドラをメモる ムダな再レンダリングが起こるのを防ぎたい イベントハンドラ内で外部変数(例えばconst [state, setState] = useState()のstate)を参照する イベントが起こるた…
タイトルが長い。 useEffectとかuseMemoとかの第一引数に渡した関数を発火させるかどうかの条件指定とも言える第二引数の配列にオブジェクトをまるごと入れたらどうなるのか というはなし。 勘違いしそうなので最初に説明しておくと、 useMemo(()=> someFunc…
MSのTSチームがESLintを推進させ始めた まだ完璧ではないがだいぶ安定してきてそろそろTSでも現実的にESLintできるようになってきた気がする プロジェクト単位で**ESLintでTypeScriptの面倒をみる方法 typescript-eslint @typescript-eslint/parser https://…
TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに const isString = (arg: any): arg is string => typeof arg === "string"; のように「引数 is 型」と書かれたものを見かける。 このコードは引数に…
JSばっかやってて.yml書くことはあまりないのだけど、CircleCIのコンフィグとかはyaml記述なので書いていく必要がある。 それで、CircleCIのコンフィグを書いていると、pathとか、複数のjobでそれぞれ同じようなことばかり書いている部分があってDRYじゃない…
あるfunctionが返す値から型を作りたかった。 たとえば const foo = ()=> { return { foo: 1, fooo: 2, foooo: 3 } } という関数があって、返り値のオブジェクトの内容で型を定義したかった。 この返り値を直接活かして型に変換して type Foo = { foo: numbe…
あいかわらず自分はfish-shell使っていて、よくわかってないのでよく困ったりしている。 きょうはBrace…波括弧{}の展開をしたかったけどfish: Mismatched bracketsといわれて困っていた。 どういうことをやりたいのか $ echo x{boy, girl, man, lady} xboy x…
タイトルが長い。 VS CodeでReact書いてるとき、ファイル拡張子が.jsではシンタックスハイライトや補完が効かない問題がある。.jsx にするとちゃんと補完が効いてくれるようになって助かる。 でもみんながみんなVS Code使ってるわけじゃないし、GitHubみてる…
エディタで⌘+Dで単語選択するけど、同じ単語5つのうち4つまでを選択したいような場面がたまにある。でも⌘+D押しすぎてしまって、5つ全部選択してしまった〜みたいなことが起こっていて地味に困っていた。 カーソル操作のUndoをやりたい 自分は主にVSCodeを使…
時代はhttps https://help.github.com/articles/set-up-git/ GitHubではhttps推奨になっているし… httpsのほうがclone速度はやいし… まとめに書くけどhttpsにすると覚えることが1個だけでラク SSHでアカウントを使い分けるときはどうしていたか ~/.ssh/confi…
を書いたんですよ qiita.com DEMO そういうわけでなんとなくこっちにもリンクを貼っている次第です。 余談 モバイルアプリによくある引っ張って更新するPulltoRefreshという文化があるんですが、アレ実装しようとしたらRVの仕様に足元を取られてとにかく厳し…
主にExpress v4でのはなし。 Expressでのエラー処理全然わからなくて困っていたけど、ちょっとわかってきた気がするのでメモついでに書く。 Expressのミドルウェアのだいたいの挙動はわかっている くらいの人向けを想定して書いている。 便利なモジュール bo…
tl;dr 手元で開発中のモジュールをローカルの別のプロジェクトで使いたいときに便利 いまあなたは『my-great-module』というすごい便利なモジュールを作っているとする すごい便利なモジュールなのだけど一部未完成なのでnpmにパブリッシュするのはまだため…
github.com JavaScriptでブラウザのAPIを使ったコードをテストするときはjsdomを使うと思う。大抵のDOMのAPIは揃ってるのでテストできるけどMutationObserverをテストしようとしたところjsdomはMutationObserverを持ってないのでテストできなくて困った。「M…
(当記事は2018-01-20現在の情報です、仕様が変わって情報が古くなっているかもしれません) CSS variablesを触っていて、定義した変数の値をマイナス値(negative value)で扱いたかった。 こんな感じでいけるだろうと思ったが… :root {--block-position-top: 5…
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するに…
tech-1natsu.hatenablog.com ↑前回 前回、とにかく短縮という気持ちでやっていたけど、わかりやすさという面を考慮すると全然わかりにくかったので、可読性も意識してちょっと変えた。 可読性考慮したFizzBuzz // range関数 const range = (start, end) => […
昨日書いたFizzBuzz、今日も書いて改善した。 これは昨日のFizzBuzz。 function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(…
function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(1 + end - start)].map((v, i) => start + i); } const oneHundredArra…