#js
Next.jsのPreview Mode時はAnalyticsを無効化する
cookieの__next_preview_dataキーで判定
next.jsにtailwindcssを導入する
VSCodeのTailwind CSS IntelliSense拡張が便利
Alexaに気温と二酸化炭素濃度を教えてもらう
「Alexa、気温」でセンサー情報を教えてくれるようになった
ESLintでimport文を自動で並べ替える
eslint-plugin-simple-import-sortを使う
jsでクリップボードにコピーするボタンを実装する
Clipboard.writeText()を使う
RaspberryPi ZeroにNode.jsの最新版をインストールする
vercel/install-nodeを使うと手軽にインストールできた
Next.jsアプリにContent-Security-Policyを設定する
Strict CSPを設定
Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生
一つ前のReact 16.13に下げてみたらエラーが解消された
s3の署名付きURLが有効期限より前に見れなくなってしまう
IAMロールではなくIAMユーザの権限でURLを生成する必要があった
AWS Lambdaでpuppeteerを動かしスクリーンショットをs3に保存する
前から気になっていたHeadless Chromeをjsから操作できるpuppeteerを使って、スクリーンショットをs3に保存するAPIを作ることにした。
Nuxt.jsのservice workerで環境変数を切り替えられるようにする
設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。
CloudFunctionsを使ってFirestoreのサブコレクションを削除する
CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる
Nuxt.jsのserverMiddlewareがGAE上だとエラーになる
ディレクトリ位置の問題でserverMiddlewareが動かない現象が発生した
NuxtアプリにCloud Functionsを追加したらビルドエラーが発生
CIでのビルドログ抑制を無効化して、functionsディレクトリをビルド対象から外す必要があった
markdown-itでリンクを開く際にtarget="_blank" rel="noopener"を自動付与する
markdown-itを利用する際にaタグをカスタマイズする場合、renderer.rulesを書き換える。
Vuetifyのblockquoteをmarkdown-itで利用する方法
Vuetifyで引用を利用する場合classを付与する必要があるが、markdown-itの出力は<blockquote>のみになってしまう
create nuxt-appで作成したアプリでTapable.plugin is deprecatedが出る場合の対処法
yarn add @nuxtjs/pwa@v3.0.0-beta.16でPWA Moduleを更新する
NuxtアプリをGAEにデプロイする(Node.js 10)
GAEへのデプロイの際にいくつかエラーが出てハマったので対応内容をまとめておく
document.queryselectorAllでnotを使う
:not()を指定する
Dockerでnodejsサーバを立てる
docker-composeを使うと手軽に構築できる
Gridsomeで構造化マークアップに対応する
metaInfoにJSON-LD用のscript設定を追加する
queryselectorAllで特定の文字から始まるclassのみを取り出す
[class^="name"]を使う
async/awaitでsleep処理を書く
上から順にコードを読んでいけるので分かりやすくなる
mochaのgrepオプションを使う
特定のtestのみ実行したい場合に便利
開発環境ではSentryのエラー通知を無効化する
開発環境ではdsnを設定しないようにする
gridsome-plugin-pwaの導入
Gridsomeのアップデートと合わせてPWAプラグインを導入した
jsでObjectのkeyに変数を使いたい場合
[変数名]とすればkeyに変数を指定できる
CircleCIでFirebaseHostingに自動デプロイする
workflowsのfiltersを使ってproductionブランチの場合のみbuildとdeployを行う
RaspberryPi上でPuppeteerを動かす
Dockerを使うとすんなり動かせる
webpack + typescriptでpathsのエイリアスがModule not foundになる
tsconfig-paths-webpack-pluginを入れた
Typescript + webpackのNodejsアプリでsource-mapを有効にする
node-source-map-supportを入れる
Full Stack OpenでReactを学ぶ
最新のフロント開発について体系的に学べる
@gridsome/source-contentful利用時にTweetの埋め込みに対応させる
markdown-itのhtmlオプションを有効にする
Github ActionでfirebaseプロジェクトをS3にデプロイする
deploymentブランチにpushしたら自動でs3にデプロイできるようになった
AWS LambdaでSentryを使う
Sentry.flushを使う必要があった
CloudRunで動くexpressサーバにtimeoutを設定する
server.setTimeout OR req.setTimeoutを使う
console.logでオブジェクトの中身を全部確認したい
JSON.stringifyを使ってjsonに変換する
webpackでproductionビルド時にminifyしないようにする
minimize: falseを指定する
Vuetifyのv-checkboxにaタグを設定する
v-on:click.preventでクリックイベントをキャンセルする必要があった
querySelectorAllで取得した要素をfilterでフィルタリングしたい
Array.fromで配列に変換してからfilterを使う