レンダリングを探訪する
※ 当記事は、さくらじまハウス 2024 のLT「レンダリングを探訪する」 の書き起こしとして作成しました。 LT資料: はじめに この記事では、ブラウザのレンダリングについて掘り下げていきます。Web アプリケーション開発において、パフォーマンスの最適化や複雑なバグの解決は日常的な課題です。ブラウザのレンダリングフローを理解することで、それらの原因をより深く突き止めることができるようになります。 ブラウザと一口に言っても数多く存在しますが、今回は多くのブラウザで採用されている Chromium を題材に、そのレンダリングの仕組みを詳しく見ていきます。Chromium は Google Chrome、Microsoft Edge、Opera などで採用されているため、その仕組みを理解することは Web アプリケーション開発者にとって大きなヒントとなるでしょう。 ※ シェア列は、資料作成時点
Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。 srcset attribute まず以下のようなコードを考える。 <style> body { margin: 0; } </style> <body> <img id=hero_image src=320x240.png srcset=" 320x240.png 320w, 640x480.png 640w, 800x600.png 800w, 1024x768.png 1024w, 1280x960.png 1280w
れこです。この記事はNode.js Advent Calendar 2020の 12 日目の記事です。今回は年の瀬ということで酒の肴になりそうな記事を書きたいと思います。 本記事では 2020 年に GitHub のトレンドに上がったリポジトリをいくつかの切り口で集計して、独断と偏見で感想を付け加えます。 この記事を酒の肴に 2020 年の JS/TS について懐かしんでもらえたら幸いです。 集計方法 GitHub のトレンドは過去の履歴が残っていないので非公式に集計されたデータを利用しています。 集計期間は 2020/01/01 から 2020/12/05 までの 341 日間 対象言語はJavaScriptとTypeScriptのみ トレンドの過去データのソースはxiaobaiha/github-trending-historyを参照 日ごとにまとめた markdown になっており、
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? EDIT: DOjS はp5.jsサブセットを実行できる MuJS ベースのJavaScript環境だ。DOM-less。 https://github.com/SuperIlu/DOjS EDIT: SerenityOSを忘れてた: http://serenityos.org/happy/1st/ 自作OSに自前ブラウザというかなりヤバいプロジェクト。ブラウザ部分は最近Qtなクロスプラットフォーム版が出来た https://awesomekling.github.io/Ladybird-a-new-cross-platform-bro
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
CSSでテキストに下線を引く場合、皆さんはどのプロパティを使いますか？ text-decorationかborder-bottomか、はたまたbackground-imageプロパティか…。いろいろな方法で下線を引けるために、どれを使えばよいのか迷った経験がある方もいるでしょう。 この記事ではテキストの下線を引く方法を場面別に紹介します。 たくさんの下線を引く方法があってどれが良いのかわからない方。シンプルな単語の装飾でも、3点リーダーがある場合でも、アニメーションさせる時でも、どんな時でも下線を引く方法を探している方。装飾に使えるCSSを広くサラッと知りたい方。王道の内容をおさらいしたい方。本記事は、そんな皆さんに向けた内容となっています。 場面別に下線を引く方法まとめ ▲場面別に下線を引く方法まとめ。クリックで拡大してご覧ください。 いきなりですが、場面別に最適だと考えられる下線の引
「Operaは変わり果てたのでもう使うな」と有識者が語る
ノルウェー発のウェブブラウザのOperaは、「Opera最強伝説」で知られるなど、ニッチながら根強い人気に支持されているブラウザです。テクノロジージャーナリストのコービン・ダベンポート氏が、「素晴らしいウェブブラウザだったが見る影もなくなった」としてOperaや派生ブラウザのOpera GXを使うのをやめることを宣言し、その理由をブログを説明しました。 Stop using Opera Browser and Opera GX https://www.spacebar.news/stop-using-opera-browser/ ◆これまでのOperaの足取り Operaは1995年にリリースされたウェブブラウザで、当初は有料ソフトウェアだったということもあり、当時主流だったInternet ExplorerやNetscape Navigatorに比べてユーザーは少なく、全盛期でさえニッチ
URL バーの表示の変遷 | blog.jxck.io
Intro ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。 思えば、URL バーの見た目も、だいぶ変わってきたように思う。 URL バーの表示の変遷を一度まとめておく。 URL バーの再現 本当なら古いブラウザのスクショを集めたいところだったが、これは非常に難しい。ネットで色々落ちてるものをかき集めても、ライセンスや解像度や表示されている URL などを考えると、使い勝手は決して良くない。 試しに古い Chromium をビルドしてみたが、一定より古いものはうまく開くことすらできなかった。開くことができたバージョンもあったが、どうやらそれだけでは当時の URL バーの UI までは再現されないようだ。 そこで、実物のスクショはあきらめ「一般的な URL バーのイメージ」を書いた図で、おおまかな変遷を辿る。あくまで架空の図であることに注
iOS Safari の <select> 要素は密かに変わっているのをご存知ですか - マンガ〜ノ伊藤ノ〜ト
私事ですが先日引っ越した． それはよくて，引っ越しすると住所変更が面倒で 外部キーでマスターからカスケードですべて変わってくれないかと思う． それもよくて，大事な書類が届かないと大変だと 銀行口座やクレジットカードの住所変更をしていた． 起 生活に必要なものを大抵スマホのアプリで入れている． クレジットカードアプリも生体認証でログインできたりして， いまや 2段階認証なりが必要な PC よりも楽な気がする． (なんか本末転倒でダメなことをしているような気もする) なので，住所変更もキーボードのほうがやりやすいのは脳裏によぎりつつも 簡単な操作はスマホアプリからやっている． 前置きが長いけど，問題はドロップダウンで住所を選ぶ箇所で， iOS だと選択のドラムがグルグル回るやつが 住所が長いと途切れるということに気づいた: 住所の文字数が多いと選択が厳しい世の中になっていることに気づいた。 p
Cookie の SameSite 属性について - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 フロントエンドエキスパートチームでは、日々の業務としてブラウザやライブラリの更新情報をキャッチアップして社内で共有しています。 例えば先日、CSSのプロパティである image-orientation のデフォルト値が none から from-image に変わったため、画像の Exif 情報の扱いが変更されました。 https://www.fxsitecompat.dev/ja/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/ 注： Firefox では COVID-19 の影響により、この変更は延期されました。（Chrome は予定通り 81 で リリースしています） https://blog.chromium.o
Rust+Webフロントの最前線！tauriを試してみた
@Pctg_x8です。 Deno 1.0の登場でRustとWeb関連技術の繋がりがより高まっていく中で、Electronライクな新しいアプリケーションフレームワークである「tauri」を見つけましたのでちょっと触ってみようと思います。 tauriについて 公式サイト: https://tauri.studio/ ※この記事ではv0.9.2をベースに解説しています。 tauriはまだメジャーバージョンが1になっていないため、頻繁にAPIの変更が起こる可能性があります。 概要 フロントはElectronと同じくWebViewですが、ベースの起動プログラム（Main Process）をRustで書くことができるものです。 ElectronではMain ProcessもJavaScript（Node.js）なので、例えば大量のデータを並行してバッと読むとか解析するとかの処理をさせようとすると マル
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
こちらは JavaScript Advent Calendar 2024の 25 日目の記事です。 はじめに YouTubeは全画面表示中でもスクロールできて便利ですね[1]。 動画を全画面表示中でもスクロールできる しかし Fullscreen API を用いて動画を全画面にした場合、通常はスクロール不可能なはずです。 YouTube ではどのようにスクロール可能な全画面を実現しているのでしょうか？ 本記事では、その実装方法を解説します（Fullscreen APIとは）。 調査 そもそも Fullscreen API を使っているのか まず YouTube で実際に Fullscreen API を使っているのか調べてみます（擬似的に実現している可能性も無くはないため）。 そのためには、動画を全画面化した後、コンソールにdocument.fullscreenElementと入力します。
URLシェアを支える技術 lz-string
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。 コンテンツ目次 1. 小技テクニック系（15個） 2. 面白、ユニーク系（16個） 3. ホバーエフェクト系（6個） 4. テキストエフェクト系（10個） 5. ページレイアウト系（10個） 6. イメージスライダー系（9個） 7. ナビゲーションメニュー系（2個） 8. ローディングアニメーション系（4個） 9. ボタンエフェクト系（13個） 10. CSSマジック（10個） 11.
3rd-party cookieもIDFAもないアドテックに向けた動きまとめ 各機能紹介編｜AD EBiS マーテック研究会
Privacy Sandbox等のクッキーレスアドテックに関する前回の記事から１年が経とうとしています。１年間様々なベンダーから提案が公開され、議論も進化のペースが激しく、しばらくまとめを断念していました。今年に入ってからもGoogle (ChromeとAds）やAppleからクッキーレス、IDレスアドテックについて発表が相次ぎましたが、主要提案の開発とリリーススケジュールが明らかになり、発散から収束フェーズに入ったと思われるので、一度状況まとめておきます。 振り返り Privacy SandboxはGoogle Chromeの開発チームが提案する、3rd-party cookieとフィンガープリンティングの代替技術（サイトを跨いだ計測とターゲティング機能、アドフラウド防止機能）およびサイトを跨いだユーザ単位のトラッキング防止機能の総称です。3rd-party cookieの段階的な廃止自
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
January 2016 boasted a Powerball jackpot of 1.5 billion dollars. This generated a lot of interest in the lottery and the Los Angeles Times released a simulator where you start with 100 dollars and play until that is gone. I had seen previous work for predicting Java’s Math.random() and thought it would be a fun project to replicate for the browser. The first step is to find the algorithm used in t
Bun is an all-in-one toolkitWe love JavaScript. It's mature, it moves fast, and its developer community is vibrant and passionate. It's awesome. However, since Node.js debuted 14 years ago, layers and layers of tooling have accumulated on top of each other. And like any system that grows and evolves without centralized planning, JavaScript tooling has become slow and complex. Why Bun existsBun's g
StorybookとVitestではじめるフロントエンドのかんたん自動テスト - Mirrativ Tech Blog
こんにちは フロントエンドエンジニアの どじねこ です。 今回は Storybook 8.3 から追加された Vitest 統合機能を活用して、フロントエンドアプリの自動テストを強化した事例をご紹介します。 Storybook とは storybook.js.org Storybook は OSS として開発される UI コンポーネントワークショップです。 具体的には、フロントエンドアプリケーションの UI コンポーネントを開発する際の作業環境、ドキュメンテーションツール、テスティングフレームワークとして活用できる開発環境が提供されます。 React や Vue、Angular、Svelte、Web Component など幅広い環境に対応しており、うまく活用するとフロントエンドアプリケーションの開発をより柔軟に行えるようになります。 Storybook と Vitest の統合機能とは
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previewの内部構成 ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにする ウィンドウを表示する ウィンドウのリサイズに対応する ダイアログを自動で閉じない できなかったこと アプリ
Appleの新セキュリティ機能が「ウェブの中央集権化を進める」「Appleはウェブのがんだ」とネットで大激論、その理由とは？
Appleは2020年3月24日(火)にウェブブラウザ「Safari」のアップデートを実施し、セキュリティ機能のひとつである「Intelligent Tracking Prevention(ITP)を強化しましたが、ITPに追加された「ウェブサイトが書き込んだデータを、そのウェブサイトが7日間操作されなかった場合はすべて消去する」機能が、ウェブの中央集権化を進めるとしてネット上で議論が巻き起こっています。 Private client-side-only PWAs are hard, but now Apple made them impossible. https://andregarzia.com/2020/03/private-client-side-only-pwas-are-hard-but-now-apple-made-them-impossible.html Private
はじめに こんにちは。SRE部BtoBチームの田村です。BtoBチームにてECサイトの購入テストや会員登録等のテストを行う際には、これまでSeleniumを利用して毎日LinuxのChrome環境にて実行しておりました。しかしながらフロントエンドが変更された場合に、ソースコードの調整をしたりサーバー保守対応も必要で、運用コストを割かれることもしばしばありました。テストにおける自動化やテスト品質の向上及び運用コストの削減を目的として、今回AutifyというE2E自動テストツールを導入しました。 BtoBチームのE2Eテスト BtoBチームのE2Eテストは、Seleniumを用いて会員登録や購入テストを毎日実行しており、Slackにテスト結果を通知しています。エラー時には、サーバーに入ってログ閲覧し問題ないかを確認していました。そして、新しいテストパターン追加の要望があった場合にはソースコード
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode
![[Playwright]VScodeの拡張機能でらくらくブラウザ操作](https://cdn-ak-scissors.b.st-hatena.com/image/square/aeab1ee552bc8ea8fc414d63e3cd992eb142f720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V4XD7bFE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BPlaywright%25255DVScode%2525E3%252581%2525AE%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A7%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adumbled0re%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1NTA1NzM5OGYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B9%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%25259E%2525E3%252583%2525BC%2525E3%252582%2525B1%2525E3%252583%252583%2525E3%252583%252588%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1MTY4OGExZGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Tauri 2.0 Stable Release
import CommandTabs from '@components/CommandTabs.astro'; import TableCompatibility from '@components/plugins/TableCompatibility.astro'; import Cta from '@fragments/cta.mdx'; import FeaturesList from '@components/list/Features.astro'; We are very proud to finally announce the stable release for the new major version of Tauri. Welcome to Tauri 2.0! What is Tauri? :::note[Definition] Tauri is a frame
今年の 2 月から WebKit の JavaScript 処理系である JavaScriptCore に Pull Request を投げ続けています。 JavaScriptCore のソースコードは WebKit のリポジトリ https://github.com/webkit/webkit に完全に含まれています。なので、僕が Pull Request を投げる先も WebKit のリポジトリということになります。そして先日、WebKit リポジトリにマージされた自分の Pull Request の数が 100 に達しました。 Pull Request を作るという活動をやめなければ当然いつかは 100 個に達するので別に偉業ということはないんですが、どちらかというと大して意味のないことをやめられなかったというネガティブな気持ちの方が強くあります。[1] とはいえ、JavaScrip
Custom Scrollbars In CSS
Custom scrollbars are getting more popular nowadays, and I’m very keen to dig into them. There are different reasons why to customize a scrollbar. For example, the default scrollbar can make an app UI look inconsistent across multiple operating systems, and here we can get the benefit of having a unified style. I have always been interested in learning about how to customize a scrollbar in CSS but
ITP更新: IntelligentではなくなったIntelligent Tracking Prevention｜AD EBiS マーテック研究会
iOS13.4やSafari13.1と一緒に新しいITPがリリースされました。主な変更点は二つ。 * 全ての3rd party cookieをブロック * Local Storage等、クッキー以外のストレージを最後のインタラクションから7日後に削除 インタラクションとは、クリック・タップ・入力のことで、ドメイン毎に監視され、7日以内にインタラクションがないドメインのLocal Storageは削除されます。 その他に、JavaScriptからdocument.referrerで取得する全てのクロスサイトリファラーのダウングレード（"https://store.example/baby/strollers/deluxe-stroller-navy-blue.html"の場合、"https://store.example/"しか取得できなくなる）、および5秒以内の自動ページ遷移の検知も追加さ
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web. Native mobile emulation of Google C
ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感
HPKE とは何か | blog.jxck.io
Intro HPKE (Hybrid Public Key Encryption) が RFC 9180 として公開された。 RFC 9180: Hybrid Public Key Encryption https://www.rfc-editor.org/rfc/rfc9180.html HPKE は、公開鍵暗号方式と共通鍵暗号方式を組み合わせて(ハイブリッド)任意の平文を暗号化するための、汎用的な枠組みとして標準化されている。 この仕様は、多くのユースケースが想定されており、RFC になる前から ECH (Encrypted Client Hello), MLS (Message Layer Security), OHTTP (Oblivious HTTP) など、さまざまな仕様から採用を検討されている。 本サイトで書く予定の他の記事でも HPKE は頻出する予定であり、今後より多くの
The New CSS Reset
Skip to the content. The New CSS Reset This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘unset’ and ‘revert’ keywords. The new property of ‘all’ which can reset all properties combined. The :where() pseudo-class to remove specificity. The :not() pseudo-class with multi arguments. What the-new-css-reset is resetting? This CSS reset is built from the understanding we
Check out this video of bfcache in action to understand the speed up it can bring to navigations: Using bfcache makes pages load much more quickly during back and forward navigation. In the video, the example with bfcache is quite a bit faster than the example without it. bfcache not only speeds up navigation, it also reduces data usage, since resources don't have to be downloaded again. Chrome us
以下では、それぞれのプログラム実装について詳細を説明していきます。 1. JavaScript simple implementation（js-simple） ソースコード / 実行結果 このプログラムは、JavaScript で BF の文字を 1 文字ずつパースし実行していく、一番シンプルな実装です。対応する括弧のジャンプも、そのたびに愚直に計算して求めています。 一切最適化を施していないため、実行結果はその他のプログラムに比べて一番遅くなっており、各プラットフォームで最も速い結果に比べて 30 倍〜50 倍ほど遅くなっています。 2. JavaScript dynamic-code-creation implementation: single function (js-dcc) ソースコード / 実行結果 このプログラムは、BF の各記号に対応する JavaScript を直接文
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
img の srcset 指定時に選択される画像 | blog.jxck.io
GitHubのトレンドで振り返る2020年のJavaScript
めくるめく粗挽きWebブラウザエンジンの世界 - Qiita
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA
New WebKit Features in Safari 15.4
News from WWDC22: WebKit Features in Safari 16 Beta
なぜYouTubeでは動画を全画面表示しながらスクロールが可能なのか？
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
サイトの質が向上！コピペできるHTML/CSS便利スニペット100個まとめ
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
ServiceWorkerの落とし穴8選 - Repro Tech Blog
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
Hacking the JavaScript Lottery
Bun 1.0 | Bun Blog
Playwrightでライブプレビューツールを実装する - ベースマキナ エンジニアブログ
Autifyを導入してE2E自動テストを最適化した話 - ZOZO TECH BLOG
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
WebKit(JavaScriptCore)に100個のPull Requestがマージされた
Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう
Back/forward cache | Articles | web.dev
WebAssembly を動的生成した場合のパフォーマンスについて