ウェブブラウザ・Braveが非難されまくっているGoogleの「Web Environment Integrity」を無効化してリリースすることを発表
Googleが「健全なインターネット」のために策定を進めている「Web Environment Integrity(WEI)」に対して反対を表明している、ウェブブラウザ・Braveが、WEIを無効化する方針であることを明らかにしました。 Disables WebEnvironmentIntegrity feature and origin trials. by mkarolin · Pull Request #19476 · brave/brave-core · GitHub https://github.com/brave/brave-core/pull/19476 Google’s Plan To DRM The Web Goes Against Everything Google Once Stood For | Techdirt https://www.techdirt.com/2
This December, if there’s one tech New Year’s resolution I’d encourage you to have, it’s switching to the only remaining ethical web browser, Firefox. According to recent posts on social media, Firefox’s market share is slipping. We should not let that happen. There are two main reasons why switching is important. “Red Panda” by Mathias Appel is marked with CC0 1.0. 1. Privacy Firefox is the only
偏りに満ちたWayland時代のLinux Desktopおすすめアプリ 2024 - joker1007’s diary
最近、wayland移行も大分安定して、デスクトップで利用するアプリも多少変化したので、最近利用しているものをまとめておこうと思う。 基本的にGNONEやKDE Plasmaみたいな重厚なデスクトップ環境は使わないタイプなので、そういうラインナップになっている。 開発で必須、みたいなやつはこの記事には余り入れてない。 ウインドウマネージャー Hyprland waylandで動作するタイル型ウインドウマネージャー。ヌルヌル動くのが気持ち良いだけでなく、機能的にもよく出来ている。開発が活発なのも良い。 waylandで画面共有のために利用されるxdg-desktop-portalのために独自実装を持っていてswayでは出来なかったウインドウ単位の画面共有が出来る。 という訳でwaylandのタイル型ウインドウマネージャーといえばswayがメジャーだが、最近はHyprlandを利用している。
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
" class=code-demo loading=lazy style=height:350px>これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。 iOS のスプリングを CSS 数式アニメーションで再現する この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。 数式でアニメーションを表現できることの利点 #数式でアニメーションを表現すると聞いて、ピンとこない人もいると思います。以下の画像はこの記事のはじめのデモで使っている数式をグラフにしたものです。このグラフの形がイージング関数に似ていると気づいた方もいるかもしれません。 このようなグラフを描く数式を作ることができればイージング
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
はてなへのログインがパスキーと多要素認証に対応し、よりセキュアになりました - はてなの告知
2024/3/25 17:37 追記 Firefox と1Password の組み合わせを利用していた場合、パスキーの生成が失敗する不具合が発生しておりました。現在は修正済みです。ご不便おかけし申し訳ございませんでした。 本文 平素よりはてなをご利用いただきありがとうございます。 はてなIDが「パスキー」「多要素認証」を利用した認証に対応しましたことをお知らせいたします。 また、本対応に合わせてアカウント関連の画面デザインをリニューアルいたしました。 パスキーとは パスキーとはお持ちのスマートフォン・PC・タブレット端末等に搭載されているロック機能を使用してウェブサイトやアプリにログインできる仕組みです。パスキーをご利用いただくことにより、パスワード認証時における第三者からの不正ログインやフィッシングなどのリスクの低減が期待できます。 パスキーの設定方法はこちらをご参照ください パスキーの
TwitterのアイコンをXから鳥に戻すchrome拡張機能をつくりました - きつねこの週刊デイリー寿司ニュース
みんなでたのしくツイッター ※本ページの方法はPCブラウザでの利用を想定しています。スマホアプリには対応しません。スマホでXを鳥に戻す方法はこちら※ ki2neko.hateblo.jp ※本拡張にはtwitterやX.com、イーロンを貶めたり敵対する意図はありません。本拡張の紹介は歓迎ですが、RT・引用RTの際、twitterやX.com、イーロンに対する過度なdisや中傷はやめてください。そういうとこやぞ。みんなでたのしくツイッター※ ※Nothing in this extension is intended to discredit or antagonize twitter, X.com, or Elon. You are free to use or introduce this extension, but please do not use excessive dispa
「YouTube、わざと遅くされている？」FirefoxやMicrosoft Edgeで回避する方法 | ライフハッカー・ジャパン
どうやら2023年は、Googleが自分たちの思うとおりにユーザーにYouTubeを使わせようと決めた年だったようです。 その第一弾として同社は、広告ブロッカーを使いながらYouTubeを訪れる視聴者への攻撃を開始しました。 最初に、広告ブロッカーの使用を中止するように警告するポップアップが表示されますが、それを閉じれば先へ進めます。ところが、すぐにポップアップが閉じなくなります。少なくとも、広告ブロッカーの無効化が検知されるまで、消えることはありません。 いまのところ、すべての広告ブロッカーユーザーがこの攻撃の対象になっているわけではありませんが、だからといって、Googleが手をこまねいているわけでもありません。 どうも同社は、今度はFirefoxやEdgeといったChrome以外のブラウザで、YouTubeのスピードを落としているようなのです。 YouTubeでスローダウンが起こる仕
E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog
こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
最近はGoogleではなくKagi Searchをメインの検索エンジンとして使っています。 Kagi Searchは$108/year($10/month)の有料の検索エンジンです。 広告モデルではない検索エンジンなので、有料のサブスクリプションモデルとなっています。 Plan Types | Kagi’s Docs いくつかプランがあり、検索し放題のProfessionalプランが$10/monthです Ultimate Plan ($25/month)だと外部のOpenAIのGPT 4とかClaude 3との連携とかも入ってきます 月に1-2万回ぐらいは検索することを考えると、 (108 / (10000 * 12)) * 150 で大体1検索が0.1円ぐらいのイメージですが、こちらもKagiのLLM機能は利用できるので、実質もう少しコスパは良いと思います。 検索ソースにはGoogle
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
現在、Webアプリの約60％がHTTP/2を採用しているという。 新たな攻撃は、何十万ものリクエストを作成し、すぐにキャンセルすることで機能するとCloudflareは説明した。リクエスト／キャンセルのパターンを大規模に自動化することでWebサイトを停止に追い込む。 3社は、HTTP/2を採用するプロバイダーに対し、可能な限り早くセキュリティパッチを適用するよう呼びかけた。 クライアントによるこの攻撃への最善策は、利用可能なすべてのHTTPフラッド保護ツールを使用し、多面的な緩和策でDDoS耐性を強化することだとしている。 Cloudflareは、8月の攻撃について今報告するのは、「可能な限り多数のセキュリティベンダーに対応の機会を与えるため、情報を制限してきた」と説明した。 HTTP/2 Rapid Reset Attackの詳しい説明などは、以下の「関連リンク」の各社の公式ブログを参照
PublickeyのIT業界予想2024。ハイパースケーラーの優位性高まる、AzureはAWSに追いつくか？ ITエンジニアの給与レベル上昇
PublickeyのIT業界予想2024。ハイパースケーラーの優位性高まる、AzureはAWSに追いつくか？ ITエンジニアの給与レベル上昇 新年明けましておめでとうございます。今年、Pubickeyは15周年を迎えます。長きにわたってこの小さなメディアを続けられているのも読者の皆様のおかげです。今年もPublickeyをどうぞよろしくおねがいします。 さて、2024年最初の記事では今年のIT業界、特にPublickeyが主な守備範囲としているエンタープライズ系のIT業界について、期待を込めた予想をしてみたいと思います。 続くモノやサービスの値上げ、生成AIの爆発的普及など まずは予想の前提となる、世の中全般に関する現状認識について書いておこうと思います。 1年前を振り返ってみると、ロシアによるウクライナ侵攻や長引く新型コロナウイルスの感染拡大の影響などの複合的な要因で、石油や天然ガスを始
数年悩まされているが解決できていない問題。解決に向けて雑なメモ。固まるとGUIからの強制終了も効かずひたすら待つしかないのでかなりのストレス。 症状 MacOSのGoogle Chromeで下記のようなサイトで文字入力を行おうとするとレインボーカーソル状態のまま数秒から数十秒固まりブラウザが操作できなくなる コピペ操作でも起こる レインボーカーソルは表示されない場合もある 動き出すとタイプしていたキーが一気に入力されるような感じ 事象が発生すると別ウィンドウのGoogle Chromeも固まる Google Chrome以外のプロセスには影響してなさそう 常に発生するわけでもなく軽い時もある。ただ毎日は発生している 何をすると一時的にでも解消するのかは不明 Mac再起動直後は発生しない気がする Chrome再起動直後は発生しない気がする 発生するサイトと箇所 どのサイトとかは関係ない気もす
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使い方とシンプルだけどクールな使い方を紹介します。 ↔️ Sideway selection in CSS with :has() by Francesco Vetere 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :has()疑似クラスのシンプルでクールな使い方 実装の解説 :has()疑似クラスのシンプルでクールな使い方 みなさん、こんにちわ！👋 この記事では、最近すべてのブラウザに
はじめに こんにちは。株式会社Flatt Securityの @toyojuni です。自分はもともとWebやUIのデザインを本職としていましたが、大学の同期と共同創業したセキュリティ企業であるFlatt Securityにて経営やDevRelを担っています。 デザインとセキュリティは普段話題が交わることが少ない領域ですが、UI/UXのデザインであればソフトウェア開発と不可分であることは間違いなく、すなわちデザインもセキュリティに無自覚ではいられないでしょう。 そのような観点で、本記事では「パスキー(Passkey)」を取り上げてみようと思います。 本記事は「パスキー」「FIDO」「WebAuthn」といったキーワードに関して以下のような認識を持っている方向けの記事です。 名前も知らない / 聞いたことがない 聞いたことはあるが、ほとんど理解していない はじめに パスキーをなぜ今知るべきか
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ Rust製のWebブラウザエンジンとして開発が進められている「Servo」は、Servoをアプリケーションに組み込み可能なクロスプラットフォーム対応WebVeiwとする方向で開発を進め、それをアプリケーションフレームワークのTauriと協力してTauriがサポートする予定であることを発表しました。 TauriはElectronの代替を目指す、Web技術を用いてアプリケーションを開発するためのフレームワークです。 参考：Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 現在のTauriは、UIのレンダリングエンジンとして、Windo
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
面倒で難しい「私はロボットではありません」をワンクリックで突破できるCAPTCHA自動回答ツール「Buster」レビュー
ウェブサイトにログインしたり問い合わせフォームを送信したりすると、「私はロボットではありません」といった文言のボット排除システム「CAPTCHA」に遭遇しがちです。CAPTCHAでは「バスを含む画像をクリック」などの問題が出題されますが、「バスの画像を正しく選択しているはずなのに人間と認めてもらえない！」という事態が頻繁に発生します。無料のブラウザ拡張機能「Buster」を使えば、ワンクリックでCAPTCHAを突破できるとのことなので、実際に使ってみました。 GitHub - dessant/buster: Captcha solver extension for humans, available for Chrome, Edge and Firefox https://github.com/dessant/buster BusterはChromeやFirefox、Edge、Operaな
How Rust went from a side project to the world's most-loved programming language 世界で最も愛される プログラミング言語 Rust誕生秘話 処理速度が問題になるプログラムや、ハードウェアを直接操作するプログラムを開発するなら、C/C++言語を選ぶのが当たり前だった。C/C++に取って代わる言語は長らく登場しなかったが、最近になってRustが注目を浴びている。 by Clive Thompson2023.06.12 106 27 多くのソフトウェア開発プロジェクトは、思いもよらないところから生まれる。解決しなければならない個人的な問題を抱えたプログラマーが生み出すこともある。 グレイドン・ホアレの身に起きたのも、多かれ少なかれそういう事態だった。2006年、ホアレはオープンソースのWebブラウザー「ファイアーフォ
AppleがiOS 17.4でWebkit以外のブラウザエンジンを許可し、ChromeやFirefox、OperaなどSafari以外のブラウザを完全に動作させることを可能にしたことが明らかになりました。これはEUのデジタル市場法(DMA)施行を受けての対応で、EU圏のユーザーにのみ適用されます。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ Update on apps distributed in the European U
iPhone全モデルと2020年以降のMacからパスワードやメールを盗み出す「iLeakage」が報告される、実際に動作するデモ映像もあり
すべてのiPhoneおよびiPadや2020年以降に登場したApple Silicon搭載Macが対象となる攻撃手法「iLeakage」がジョージア工科大学の研究チームによって発見されました。iLeakageを悪用するウェブサイトにアクセスした場合、ウェブサービスのパスワードやメールなどの情報を盗み出されてしまいます。 iLeakage https://ileakage.com/ iLeakageは必要になる可能性のある処理を事前に行うことでCPU性能の向上を図る技術「投機的実行」を悪用するタイプの攻撃で、iPhoneやiPadに搭載されているAシリーズチップおよびMacや一部のiPadに搭載されてるMシリーズチップに対して有効です。このため、すべてのiPhoneおよびiPadと2020年以降に登場したMacはiLeakageによる攻撃の対象となり得ます。 iLeakageは「ウェブサイト
WebAssemblyを進化させる「WASI Preview 2」が安定版に到達。OSや言語に依存しないコンポーネントモデルを実現
WebAssemblyを進化させる「WASI Preview 2」が安定版に到達。OSや言語に依存しないコンポーネントモデルを実現 WebAssembly関連仕様の標準化を行っているW3C WebAssembly Community GroupのWASI Subgroupミーティングにおいて、2024年1月25日に行われた投票で「WASI Preview 2」（もしくはWASI 0.2.0）仕様が承認され、安定版に到達したことが明らかになりました。 WASI Preview 2では、WebAssemblyアプリケーションがOSなどのプラットフォームに依存せず、さまざまなプログラミング言語で開発したWebAssemblyコンポーネントを組み合わせて開発できるように、「コンポーネントモデル」とそのインターフェイスを記述するIDL（Interface Definition Language）であ
fetch の中断と Back/Forward Cache からの復元で発生する奇妙な現象について - mizdra's blog
TL;DR あるリソースの fetch 中にページ遷移すると、一部ブラウザでは fetch が中断される 中断されると、TypeError が throw される ページ遷移時は、ブラウザによって遷移前のページの実行が"停止"され、"捨てられる"ので、通常 throw された後のことは考えなくて良い しかし、そのページが Back/Forward Cache から復元されうるなら、話は別 ブラウザバックすると、エラーが throw された後からページが再開される！！！ そして発生する、奇妙な現象の数々... はじまりは、あるサービスの不具合報告 ある日、「Webサービスから外部サービスにページ遷移した後、ブラウザバックで戻ると、エラー画面が表示される」という不具合が報告された。どうも Webサービスの ErrorBoundary で何かしらのエラーが catch され、それによってエラー画
Back to articlesAnnouncing WinterJSThe most performant JavaScript Service Workers server thanks to Rust and SpiderMonkey Follow up the WinterJS series reading about the recent production-ready WinterJS 1.0 release here. Today we are incredibly excited to announce WinterJS (wasmer/winterjs package). WinterJS is a JavaScript Service Workers server written in Rust, that uses the SpiderMonkey engine t
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの入門として、主に Web アプリケーションを対象にした脆弱性の発見・報告・報酬金の取得について紹介します。 1. 始めに 免責事項 想定読者 筆者のバックグラウンド Start Bug Bounty Bug Bounty JP Podcast 2. バグバウンティとは バグバウンティプラットフォーム Program Type Private Programs VDP (Vulnerability Disclosure Program) Asset Type 3. プログラムの選び方 Scope OoS (Out of Scope) 4. 脆弱性の探し方 (初期調査編) Subdomain Google Dorks Wayback Machine Wappalyzer JS Analyze [Blog] Java
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
Let’s Encryptがクロス署名を廃止すると発表、証明書のデータ量が40％削減される一方でAndroid 7.0以前の端末では対応が必要に
無料でウェブサーバー向けのSSL/TLS証明書を発行している認証局Let's Encryptは、自身を信頼していない端末にも信頼される証明書を発行できるようにIdenTrustからクロス署名を受けていましたが、Let's Encryptを信頼する端末が増加したことを受けて、2024年にIdenTrustからのクロス署名を廃止すると発表しました。 Shortening the Let's Encrypt Chain of Trust - Let's Encrypt https://letsencrypt.org/2023/07/10/cross-sign-expiration.html SSL/TLSを使うと、通信において「通信相手が偽物にすり替わっていないか」「途中でデータが改ざんされていないか」などを確認できたり、通信内容を暗号化することで盗聴されるのを防止できたりするというメリットがあ
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」を発表しました。 Announcing WinterJS: a blazing-fast Javascript Service Workers server written in Rust powered by SpiderMonkey ❄️https://t.co/kX7jjJj6qv — Wasmer (@wasmerio) October 27, 2023 WinterJSはRustで書かれた高速なService Workerサーバであり、オープンソースとして公開さ
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月、私はミラティブの管理シス
romgrk
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization n
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
In 2024, please switch to Firefox
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Mozilla、Firefoxなどサードパーティブラウザが技術的不利を強いられていると指摘
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
Kagi Searchをメインの検索エンジンとして使っている
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
Cookie Store API による document.cookie の改善 | blog.jxck.io
Google、Cloudflare、Amazon、 HTTP/2悪用の史上最大規模DDoS攻撃について説明
MacのChromeで文字入力する際にブラウザが固まる問題 - njo
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
デザイナー/PdMが今知っておきたいパスキーの基礎知識 - #FlattSecurityMagazine
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
あとで読むサービス「Pocket」、Firefoxアカウントへの全面移行を発表。期限は8月15日【やじうまWatch】
世界で最も愛される プログラミング言語 Rust誕生秘話
AppleがついにChromeとFirefoxのフルバージョンをiPhone上で動かすことを許可
Announcing WinterJS · Blog · Wasmer
バグバウンティ入門(始め方) - blog of morioka12
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
ServiceWorkerの落とし穴8選 - Repro Tech Blog
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ