ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

2023/04/06 119 users ICS MEDIA HTML ユーザーインタラクション 紹介

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、... 続きを読む

パフォーマンス観点でみる Next.js の getLayout

2022/05/20 68 users レンダリング手法 利点 パフォーマンス 最低限 ファイルサイズ

Next.js は、ページ単位でデータ取得・レンダリング手法を選べる事が利点です。そして、ページ単位でチャンクファイルが生成される事が、パフォーマンスに貢献します。 これはあるページに来訪した際、必要最低限のファイルロードで済むということです。このロード時間（ファイルサイズ）が、ユーザー操作が開始できるま... 続きを読む

Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは | アンドエンジニア

2020/06/16 515 users インタラクション アンドエンジニア デザイナー えん 分業体制

Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。 優れたアニメーションやインタラクション（ユーザー操作へのフィードバック）をデザインし、自ら実装するエン... 続きを読む

この DOM がすごい2018: worker-dom - mizchi's blog

2018/10/18 238 users メインスレッド DOM 殆ど mizchi's blog 処理

おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、と... 続きを読む

UIテストの自動化に！ユーザー操作を記録・再現できるブラウザ拡張Selenium IDEを活用しよう - ICS MEDIA

2018/04/05 403 users アドオン IDE 出社 Firefox Chrome

Selenium IDE （セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は 会社の打刻操作（社内サイトへアクセス→ログイン→打刻ページへ遷移→打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他... 続きを読む

レンダリングを意識したパフォーマンスチューニング

2013/06/24 316 users パフォーマンスチューニング レンダリング スクロール 感触

レンダリングを意識したパフォーマンスチューニング Presentation Transcript TalkNote × Frontrendレンダリングを意識したパフォーマンスチューニング @pocotan001Hayato Mizuno なぜ最適化が必要か Webの閲覧時はあらかたレンダリングにコストをかけている（スクロール、他ユーザー操作など） ユーザーはOSとの感触が大きく違うものに違... 続きを読む