Next.jsのFont Optimizations（Webフォントの最適化）を試してみる
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
日本語GoogleFontsの読み込みを改善したい
Next.jsのv10.0.4からexperimentalで実装されたoptimizeFontsという機能を使うと、GoogleFontsの読み込みが最適化される、という有益情報。このzennで既に使われている。 実際に点数も向上していて喜ばしいが、自分の場合は特に日本語のGoogleFontsのパフォーマンスの悪さをどうにかしたいと思っているので、それについて書き留めていきたい。 そもそも日本語GoogleFontsを使うとどうなるか？ Noto Sans JPのweight400と700の2書体を追加するだけで評価が壊滅的になる。 何が起きているのか？ なぜパフォーマンスが下がるかというとcss（紫色のやつ）を取得している間、レンダリングブロックが発生するから どんなCSS内容か？ CSS自体はフォントの実体ではなく、フォントファイルの在り処を定義するものになっている。 font-fa
アクセシビリティを気にし出したきっかけと、2020年の振り返り
この記事はトレタ Advent Calendar 2020 の19日目の記事です。 はじめに 今年は私にとってアクセシビリティ元年と言える年だったように思います。 この記事では、今年やったことをまとめておきたいと思います。 きっかけ JSConf JP のセッション アクセシビリティへの興味が高まったきっかけは、2019年のJSConfJPで聞いたアクセシビリティのセッションでした。とても熱量のあるセッションで印象に残るものでした。 それ以前から、 "キーボード操作ができた方が良い" とか、 "labelをクリックするとフォームの要素にフォーカスが当たった方が良い" とか、よく知られていることは知っていました。しかし、アクセシビリティに関して体系的に学んだことはありませんでした。 私は、 "ユーザーにより良い体験を提供したい" という思いでフロントエンドエンジニアをやっているのですが、アク
Figma プラグインを作って Pococha の LP 実装をほぼ自動化した | BLOG - DeNA Engineering
この記事は DeNA 21 新卒 Advent Calendar 2020 の 17日目の記事です。 こんにちは。Pococha というライブコミュニケーションサービスの web チームで内定者アルバイトをしている小谷です。今回はサービスを運用していく上で必要不可欠である LP の実装自動化についてお話できればと思います！ Pococha の LP 事情 Pococha ではイベントの特設サイトなどの実装に画像 LP という独自のフォーマットを使用しています。 画像 LP とはなにか、3行で紹介すると デザインにこだわった LP を作りたいけど 月に何本もコーディングするのは大変だから ページ全体を画像で構成しちゃおう というものです。例としてこのような LP を作っています。 Cランク帯向け勉強会！ルーキーライバー編 POCO BASE 募集開始！ ゆるキャン△×Pocochaコラボキャ
デザイナーからPdMになる時に役に立った本と方法まとめ｜kazkobay
はじめにこんにちは、dely開発部のkazkobayです。普段はクラシルというレシピ動画サービスのプロダクトマネージャー件デザイナーをやっています。 この記事は、dely #1 Advent Calendar 2020の21日目の記事です。 昨日はJohn(@johnny__kei)さんの「Xcodeプロジェクト管理ツール「Tuist」を試している」という記事が公開されました！「試してみた」じゃなくて、言い切っているのがカッコいいですね。 今年は人も増え、2つのカレンダーでお送りします。 dely Advent Calender #1dely Advent Calender #2 今回はデザイナー出身の自分が、PdMになるためにやった事や学んだ本などのまとめを書いてみようと思います。他の似たような境遇の方の参考になれば幸いです。 割と書きたいことが膨らんでしまいました。ざっと読んで興味があ
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
【CSS】メンターさんによるコードレビュー（受講生276人分）を全て読んでみた話 - siroemk’s blog
この記事はフィヨルドブートキャンプ Part 2 Advent Calendar 2020 - Adventarの13日目の記事です。 昨日は takopommさんの CSSで図形を描く復習 - takopomm’s diaryでした。 CSSでクリスマスツリーを作るなんて素敵ですね！ フィヨルドブートキャンプ のアドベントカレンダーは、どの記事も名作揃いなので ぜひぜひ読んでみてくださいね〜！ フィヨルドブートキャンプ のアドベントカレンダー Part 1とPart 2 目次 目次 はじめに(コードレビューを読んでみた理由) 今回読んでみたコードレビューは? こういうレビューが多かったよ！ 1. そこにあるべき余白がない 2. 行間がないと詰まっちゃう！ 3. スクロール（overflow）について 4. グローバルナビの文字しかクリックできない 5. グローバルを汚染する！！？ 6.
「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答
こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか？」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事
これからReactを学んでいくためのロードマップ
「Reactをこれから改めて学ぶにはどの記事を参考にしたらいいか？」と聞かれることがあり、勢いで羅列した記事になります🔥 本記事自体にReactを学ぶための中身はなく、学んでいく上で参照すべき記事を独断と偏見でまとめたロードマップです。 すべての記事を読んだ上でマスターできるというよりは、より早くReactについて理解できる一助となれれば幸いって感じの記事です🙏 【@catnose99さんコメントからの追記】 じっくり学びたい方は FreeCodeCampのReactチュートリアルもよさげです！英語ですが扱う内容がステップバイで幅広く初心者にやさしい内容です。無料です🔥 前提 関数、オブジェクト、配列、あるいはクラスといったプログラミングにおける概念について、馴染みがあること🎨(公式チュートリアルより) 手順 Step1. 公式のチュートリアルをやる Reactの公式サイトにあるチ
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
OGP画像を簡単に作れるvercelのRuntimeを作りました！
どうも、 @uzimaru0000 です。 タイトルにもあるように OGP 画像を簡単に作れる vercel の Runtime を作りました。 作ったもの 使い方としては vercel.json に以下のように記述します。 { "version": 2, "functions": { "api/**/*.(html|tsx)": { "runtime": "@uzimaru0000/vercel-og-image@1.4.0", "memory": 1024 } } } functions の api/**/*.(html|tsx) に対応するファイルがこの Runtime で処理されます。 html と tsx に対応しています。 tsx は、React の Component を default で export することでその Component を元にした OGP 画像が生成され
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ
OAuth 2.0 認可コードフロー+PKCE をシーケンス図で理解する
はじめに OAuth 2.0 のフローをシーケンス図で説明したWeb上の記事や書籍を何度か見かけたことがありますが、 フローの概要に加え、クライアントや認可サーバー側でどういったパラメータを元に何を検証しているのかも一連のフローとして理解したかった RFC 7636 Proof Key for Code Exchange (PKCE) も含めた流れを整理したかった というモチベーションがあり、自分でシーケンス図を書きながら流れを整理してみた、という趣旨です。 記事の前提や注意事項 OAuth 2.0 の各種フローのうち、認可コードフローのみ取り上げています 認可コードフローとはなにか、PKCE とはなにかという説明は割愛しています 概要について、個人的にはこちらの動画が非常にわかりやすかったです: OAuth & OIDC 入門編 by #authlete - YouTube 認可コードフ
React Hooksの使い方 - cidermitaina
このあいだチームのバックエンドエンジニア向けにReact Hooks勉強会を開催しました。 チームのみんなでプロダクトのフロントエンドの底上げをしたくて、React Hooks啓蒙活動です！ 改めてReact Hooksについて勉強＆まとめることができたのでReact Hooks勉強会の内容をブログにも書いておこうと思います。 これは何？ Hooksとは何か？ Hooksを使うと何が変わるのか？ Hooksの使い方 Hooksを書くときのルール 👆についてまとめてます。 対象は Reactは書けるけどHooksって何？ Hooksって聞いたことあるけど何がすごいの？ Hooks使いたいけど、よく分からないんだよね… な人向けです。 背景 これから積極的にReact Hooksを使っていきたいなあと思っています。 でもいきなりHooks使おう！ってなっても、 Hooksって何？ 使うといい
2020年振り返り - cidermitaina
2020年を振り返ります。 2020年を月ごとに 1月 チーム異動になった。 フロントエンドは一人で、私で大丈夫なのかなってすごく不安だったけど、チームのみんなは優しくて頑張ろうと思った。 2月 少しずつチームのみんなに慣れてきたし、先輩のPRが丁寧で分かりやすかったり、リリースの共有等のSPチームとの連携もすごく丁寧で真似しようと思った。 チームのみんなは面白くて優しくて素敵な人だった。 何故か遊戯王にはまった。 3月 フロントエンド専任のエンジニアがいないプロダクトだったので、フロントエンドの底上げをしたいなあと思って、将来的にどうしたいのか、どのように改善したいかを考えたりした。 一人では上手くできなくて、技術顧問の方に相談した。 改善ポイントを一緒に考えてくれたり、一緒にコードを読む会をやってくれたり、PRも出してくれたりして頑張ろうと思った。 4月 引き継ぎフロントエンドの底上げ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
markuplintのWAI-ARIA向けルールとこれから
Next.js から Prisma ORM を利用する
キャノンデールのグラベルロードe-bikeが欲しいっ!!