概要 みなさんは、パララックス(parallax)と聞いたことがあるでしょうか? 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 このようなアニメーションを実装するのは大変です。 そのため、多くのライブラリーが公開され、簡単に実装できるようになっています。 ただ今回は、そんなライブラリーを使わずにパララックスのアニメーションを作成し、 リッチに見えるサイトを作成しました。 ↓作ったサイトはこちらです。ご覧ください。 ※ Qiita Engeer Festa 2022にご参加もお願いします。 パララックス(parallax)についてとは? まずパララックス(parallax)にて解説します。 パララックス(parallax)とは? パララックスとは、視差効果のことで、 Webサイトにおいては、パララックスはス
stateを初期化した際と、stateが更新された際にこのuseEffectのcallBackが動くので2回APIを呼んでしまいます。更新時のみfetchAPIするように修正するなどの対応が必要です。 これもまたlintなどを乗り越えてしまうので動かしてみることが大切です。 動かしているときに見るもの 動かしている際に見ているものとしては主に以下の内容が挙げられます。 レイアウト ブラウザのNetworkタブ レイアウトはそのままで、適切に画面描画ができているかを見ています。 ブラウザのNetworkタブはリクエスト・レスポンスが適切かを見ています。ここを見ながら操作していると先のように更新を待たずリクエストしたり、不要に2回リクエストしているコードに出くわします。 Networkタブではこんな感じで通信しているものが記録されます。 また、クリックするとパラメータやレスポンスなど詳細を見る
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル(1ファイルにまとめる)していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod
Lambdaについて AWS Lambda(以下Lambda)はサーバレスコンピューティングサービスです。 オペレーティングシステム(以下OS)などのインフラストラクチャの管理が不要で、利用者はプログラムコードを準備し、Lambdaにアップロードするだけで実行できます。 トリガーとは トリガーはLambdaを実行するきっかけです、もちろん手動で実行できますが自動で実行も出来ます、それは色々の方法あります。 これは普通の作成したlambdaです、画面で左側は「トリガーを追加」オプションがあります、それをクリックすると色々選べます。選べるオプションの中にちょっと説明します。 s3 S3にファイルが置かれた時に自動でLambdaを実行できます。 設定画面はこちら: まずはどこのバケットのトリガーを設定します、アカウントの全体アクションは出来ませんので各バケットに設定が必要です。 次はどこのアクシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く