npm run のスクリプトを連続実行・並列実行する (npm-run-all) npm-run-allって<command1> & <command2>や<command1> && <command2>と何が違うんだろうと思ってたけど、WindowsとLinuxで記法が違うからOSに依存したコマンドになってしまうのを防ぐことができるというのと、簡潔にかけるというところが</command2></command1></command2></command1>…

大統一 Node ツールチェイン Rome の野望 現状の実装 なるほど、パースを一回で済ませようというのが根本理念なのか でもどうなんだろう、確かに何回もパースするというのは文字で見たら「無駄」なんだけど、実際それが統一されたところでどれだけ差が出てく…

Node.js における ES Modules を理解する console.log()でtypeof moduleするとCommonJSだとobject、ESModuleだとundefinedになる .cjs = CommonJS, .mjs = ESModule, .jsの場合はpackage.jsonのtypeの値による。デフォルトはcommonjs。 importのとき、基本的…

Web Speed Hackathon Online 出題のねらいと解説 そのほかモジュールのtreeshake化 webpackのproduction mode (optimization config) 画像をwebpにする 画像をデバイスで出しわける キャッシュ 画像のサイズ最適化 brotli使うとか ホストサーバーの場所など …

Angular innerHTMLに設定した値はビルトインのサニタイズが走るので、普通に渡すとidとかが抜け落ちる。それを避けたいときはDomSanitizerのbypassSecurityTrustHtml通してから。もちろん中身の安全が保証できる時のみ。: 参考

WIC Speed Hackathon Online webpack-mergeをinstallするとdev用とprod用などでconfigを分けられる とりあえずmoment -> dayjs jqueryを置き換えたいけど、bodyにどうこうしたい時React的には何が正しいお作法なんだろうか FB.XFBML: parse()を呼んでその場…

Testing JavaScript Static Analysis Testingってなんのこといってるのかと思ったらESLintの話だった。なるほど ignoreファイルとして任意のファイル (gitignore)とかを指定できる

Testing JavaScript 関数のmockの話。一番単純にやるなら、まず自前で特定のメソッドを上書きすることができる。（Monkey Patching) それだと、mockが代わりに実行されるので中身に依存しないテストがしたい場合はまず目標が達成される。でも、同時にそのmoc…

zelda-botw-starter 初Tailwind。チートシートあっても結構覚束ない。慣れたら便利そうだけど、慣れるまでに結構時間がかかるんじゃないのかな、そうでもないのかな。クラス名が多くなってしまった時に見にくくならないかがきになるけど、そのレベルまでいっ…

Async Clipboard APIはChromeのBackgroundScriptでは動かないので拡張開発には使えない

Wev.dev LIVE: Implementing Structure data with JavaScript Google検索した時に一覧ページでも商品の詳細情報とかが綺麗に表示されていることがあるけど、あれを出すために何をしているかと言う話。RichResultだかRichContentだか言ってた。基本的にはJSON…

Web.dev Wrap up 最適なビルドツールを教えてくれるツールができたらしい。思ったらいつもAngularかReactだからビルドツールで悩んだことないな Spectreと言う脆弱性がある。これは、あるタブで悪意のあるスクリプトが走っているとたとえオリジンが違っても…

Testing JavaScript どのテストでエラーが投げられたのかわからないと役に立たないし、エラーが投げられた段階でテストの実行が終わっちゃっても役に立たない。 テスト関数をcallbackとして受け取ってtry catchの中で走らせることでこの問題を解決する。 Asy…

Testing JavaScript expect().toBe()は function expect(){ return { toBe(){ }, toEqual(){ } } } みたいになってるんだなあ、なるほど TikTokやSnapchatが覆す、アプリデザインの「常識」 TikTokやSnapchatなども若者向けモバイルファーストアプリは従来の…

FormGroupの_updateValue()が走ったとき、diabledになっているvalueは無視される -> フォーム全体をdisbleにした後のvalueChangeがあり、valueを保持したい場合はdisable()のemitEventをfalseにする。 OGPタグのnameもpropertyも基本的には同じ。propertyの…

JavaScriptライブラリを読むときのコツ ライブラリ読む時にloggerやdebuggerを入れる発想はなかったので面白いなあと思った。 package.jsonのbinフィールドに対象ファイルの指定するだけで、npx と言うように使うことができるようになる。 Consoleクラスを使…

TypeScript Meetup#4 Async Function and Runtime Error Tracking by lacolaco-san async/awaitをES2015にcompileすると、__awaiterという実装に置き換えられる。 これは、各xx.jsファイルごとに作成されるので、最終成果物の中に重複が生じる。 tslibという…

Nodeでメールを送信したいとなるとだいたいnodemailerを使うのが一般的。この時、SMTPサーバーを指定する必要がある。Gmailのサーバーを使うことが多い模様。 SendGridというサービスを使うとAPI経由でメールの送信ができる。

Gatsbyはmd以外のyamlなどもデータソースとして扱うことができる そもそも、静的サイトジェネレーターがわかってなかったけど、そういうのであれば一般的にはmdがほとんどのデータソースをいい感じにHTML/CSS/JSにしてくれるということなんだろうな Gatsbyは…

NetlifyでSPAをホスティングする時、ルーティングにAngularRouterなどネイティブではないものを使っているとアドレスをリロードした時に404になってしまう。ので、アップロードするフォルダ内に_redirectsというファイルを置いて、index.htmlにリダイレクト…

Firestoreで改行込みの文字列を保存したいときは、普通に改行文字の"\n"を利用すれば良い。が、そのままでは使えない。コード内でstringに改行文字を含んだときはASCII 10に置ける単一の文字として認識するのと異なり、例えばコンソールに手打ちで改行文字を…

GCP consoleのロゴはSVGでicon使っておいてある。interesting。

フロントエンドで使うAPIのAPI KEYは基本的に完全に隠すことは難しいので、アクセス元を制限するなど別の方法でセキュリティを担保するのが一般的

細かい権限管理をしたいmysqlユーザーを作るときは、CloudConsoleからやるんじゃなくてmysqlに接続して行う CloudSQLから返って来る値を確認するとRowなんとかセットみたいな名前がついている不思議なオブジェクトが見えるけど気にせずJSON.stringifyしてフ…

GAEでNodejsを使うときは、npm scriptで明示的にファイル名を指定しないとserver.jsと判定されてしまうので例えばindex.tsなど別のファイル名を使っていると死ぬ Nodeでresponse.setHeader()とres.writeHead()を併用したらデプロイ後送信済みのレスポンスに…

new Date() で使われるタイムゾーンはブラウザの時間に依存する。最初気づかなくてローカルで動くからOKと思っていたけど、Cloud Functionに乗せたあと実行時に違うタイムゾーンが使われるので処理内容がずれてしまった…うっかりミス。