shgtkshruch / shgtkshruch.com Goto Github PK

• A Complete Guide to Dark Mode on the Web _ CSS-Tricks
• The Perfect Dark Mode — Sreetam Das
• How to add dark mode to a Gatsby site

ref: https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/

# netlify.toml
[[plugins]]
  package = "@netlify/plugin-nextjs"

All of the products that Lighthouse powers are updated to reflect the latest version, including Lighthouse CI which enables you to easily measure your Core Web Vitals on pull requests before they're merged and deployed.
https://web.dev/vitals-tools/

Lighthouse CI is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible.
https://github.com/GoogleChrome/lighthouse-ci

現状は bower で依存ライブラリを管理して、gulp でビルドをしている。
この方法だと、ES6 の import 構文が使えないので、
ライブラリ管理を npm に移行する。

背景が白でシンプルなので、パーティクルアニメーションなど付けても良さそう。
（コンテンツを邪魔しない範囲で）

https://micin.jp/

https://web.dev/building-a-sidenav-component/

ロード時間に占める JavaScript の割合が多いので、jQuery 依存をなくしてロード時間を短くする。

https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics

Google Analytics does not support reporting metric distributions in any of its built-in reports; however, if you set a unique dimension value (in this case, the metric id) on every metric instance that you send to Google Analytics, including that dimension in a custom report will allow you to construct a distribution manually.

Using the Google Analytics Reporting API and a tool like Data Studio (or your own visualization library), you can create dashboards with histograms reporting quantile data (the 75th percentile is recommended) for all of the Web Vitals metrics.

The following code examples show how to send your metrics to Google Analytics in order to enable reporting quantile data:

Add type definition to microCMS data

Worksセクションのサイトのスクリーンショットにそのサイトへのリンクをつける。

JavaScript が評価されてからコンテンツが表示される仕組みになっているが、画像等の他のリソースが増えるにつれて、コンテンツが表示されるのが遅くなる。

Above the fold には画像は不要なので、これを遅延ロードにする。

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update actions/cache action to v4
• Update github/codeql-action action to v3
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @lhci/cli to v0.13.0
• Update dependency node to v18.20.2 (node, @types/node)
• Update dependency react-intersection-observer to v9.10.2
• Update dependency typescript to v4.9.5
• Update emotion monorepo (@emotion/css, @emotion/react, @emotion/styled)
• Update react monorepo (@types/react, react, react-dom)
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency node to v20 (node, @types/node)
• Update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

1. Pug / Sass / jQuery (2017?)
2. create-react-app (2019)
3. Next.js & TypeScript (2020)