Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
Google、PDF論文を劇的に読みやすくするChrome拡張「Google Scholar PDF Reader」
Google、PDF論文を劇的に読みやすくするChrome拡張「Google Scholar PDF Reader」 米Googleが「Google Scholar PDF Reader」というPDF形式の論文を読みやすくするChromeブラウザ拡張機能の提供を開始した。 プラットフォームやOSに依存せず、クリーンで、文章の構造が一貫しているPDFは、学術文書の標準的なフォーマットとして広く利用されている。しかし、一方で、引用されている他の文献にジャンプするのが難しかったり、あるいは特定のセクションを閲覧したくても、PDFの構造上、簡単に移動できないなど、閲覧性に関して不便と感じる面もある。Googleは「Google Scholar」という学術論文の検索エンジンを提供している。シンプルで分かりやすい画面構成で、良質な学術文書を効率的に見つけられるサービスである。Scholar PDF R
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
Webを構成する重要な要素の1つであるHTTPは、その最新仕様で2層構造となり、バージョンに関係なく使えるSemanticsと、特徴の異なる通信仕様を定めたHTTP/1.1、2、3に分割されました。 さらに現在では、HTTPの上にあらためてUDPやIP、イーサネットなどのプロトコルを実装する提案が行われており、まさにHTTPは通信の全てを飲み込む勢いで進化しつつあります。 こうしたHTTPの最新動向の解説が、大手CDNベンダでエッジクラウドなども展開するFastlyが2023年11月8日開催したイベント「Yamagoya 2023」で同社シニアプリンシパルエンジニアの奥一穂氏が行ったセッション「HTTPが全てを飲み込む」にて行われました。 本記事ではこのセッションをダイジェストで紹介していきます。記事は以下の3つに分かれています。 HTTPが全てを飲み込む（前編）～HTTPの2層構造と、H
エンジニアに読んで欲しい技術書90選 - Qiita
はじめに タイトル通り、読んで欲しい（圧）技術書をたくさん集めてみました。自身の担当から外れる領域に関しては、会社の人に協力を仰ぎ、編集しました。「何を読めばいいかわからない」、「次の読む本を探したい」などのように考えている方の参考になればと思います。 また、大きく、 ・新米エンジニア ・脱新米エンジニア と分けてまとめたので、参考にしてみてください。 技術書のススメ 技術書の紹介の前に、技術書で得られるものについて説明したいと思います。全然読み飛ばしてもらって大丈夫です。この章から本の紹介を行なっていきます。 技術書は体系的な構成となっているため、技術書を読むことで、 ・論理的な思考力が身に付く ・技術の歴史・背景を知れる ・技術の知識、手法を学べる これらを学ぶことができます。論理的な思考力、知識はわかるけど、技術の歴史・背景を知ってどうするんだと思う方もいるかもしれません。しかし、歴
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
セキュリティ本部 セキュリティ情報統括室に所属 システム開発者。2000年問題で「2038年問題は定年で対応しなくていい！」とフラグを...。 cats_dogs開発者のヒラマツです。 HTTPキャッシュをうまく使う技術、HTTPキャッシュ制御を解説します。 HTTPキャッシュは、WebアプリなどのWebサービスの通信を最適化する技術です。 HTTPのCache-Controlヘッダーの使い方の話でもあります。 HTTPキャッシュ制御と言っても、Cache-Controlヘッダーの設定だけなので、簡単そうに思えます。 しかし、正しく設定しようとすると、案外、複雑で苦労します。 また、理解なしに使うと、情報漏えいの問題を起こす可能性もあり、適当に設定するのは危険です。 ぜひ、この文章を読んで、理解した上で、Catch-Controlを設定してください。 cats_dogsの仕様を書くときに、
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
新幹線でもQUICで快適にSSHする - Qiita
はじめに 今日は、劣悪な通信環境でも快適にSSHができるquicssh-rsをご紹介します。そして、実際に改善されるかを試してみます。 長くなったので最初に結論 quicssh-rsを使うと、 パケットロスに対して明らかに強くなった こちらのIPアドレスが変わっても通信が継続できた 遅延(pingのRTTが大きいこと)は改善されない模様 30%パケットロス環境での比較 IPアドレスを変更しても切れない SSHは新幹線(劣悪通信環境)に弱い 鉄道での移動時間が長いと、パソコンを開いて各種開発の続きをしたくなります。 …なりませんか？ 時には、別のサーバーにSSHでログインして何かコマンドを打ったり。 在来線1であれば概ね問題ありませんが、新幹線になると通信品質が大きく悪くなるため、SSHでの操作は大きなストレスが溜まりがちです。なんとかならないかとずっと思っていました。 新幹線の通信環境 通
HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ 新しい通信プロトコルとして普及が進んでいるHTTP/3については、エンジニアHubでも過去に概論的な記事を掲載しています。今回はアプリケーション開発者が自社サービスでHTTP/3を採用することを想定して、仕様上の留意点や、どのように使い始めるか、そしてサイトを制作する際に注意しておきたいポイントまでを藤吾郎（gfx）さんに解説していただきました。 本記事ではHTTP/3およびその通信プロトコルであるQUICを、アプリケーション開発者として活用する立場で入門します。HTTP/3は、HTTP/1.1とHTTP/2に続く新しいメジャーバージョンのHTTPプロトコルです。HTTP/3はHTTP/1.1およびHTTP/2を置き換えるポテンシャルを持っています。将来的にほとんどのインターネットトラフィ
マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行
マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。 具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
パスワードを使わないパスワードレス認証であるパスキーを推進するFIDO Allianceは会見を開き、既に70億を超えるオンラインアカウントがパスキー利用可能な状態になって、利用が拡大していることをアピールした。国内でも利用が拡大しており、新たにメルカリがボードメンバーに加盟し、住信SBIネット銀行がアライアンスに加盟した。 FIDO Allianceの1年の取り組みが紹介された。写真左からメルカリ執行役員CISO市原尚久氏、LINEヤフーLY会員サービス統括本部ID本部本部長伊藤雄哉氏、FIDO Japan WG座長でNTTドコモのチーフ・セキュリティ・アーキテクト森山光一氏、FIDO Allianceエグゼクティブディレクター兼最高マーケティング責任者のアンドリュー・シキア氏、FIDO Alliance FIDO2技術作業部会共同座長でGoogle ID&セキュリティプロダクトマネージ
TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 → CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers
22年前からFirefoxブラウザに存在したバグ、23歳の初心者プログラマーが修正 | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 デスクトップ版のFirefoxブラウザーに20年以上存在していたバグが先月、23歳のプログラミング初心者によって修正されました。 2002年、MacでMozilla browser（Firefoxの当時の名称）を使用していたアダム・プライス氏は、ツールチップの表示の問題に悩まされていました。このバグは、Mozillaツールバーのアイコンにマウスカーソルをポイントして表示されるツールチップ（説明書き）が、Commandキー(WindowsではAltキー)+Tabキーでウィンドウのフォーカスをほかのアプリに移したあとも表示され続けてしまうというもの。 この状態になってしまった場合、ツールチップを消すには再びFir
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
Intro 以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。 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/ ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。 筆者が公開情報を読んで解釈したものなので、内容は保証しない。 前提 iOS/iPadOS に入れられるブラウザには、 WebKit を用いる必要が
Chromeのクッキー廃止へ。ブラウザをチェックしてみよう2024.01.13 21:00163,119 Thomas Germain - Gizmodo US ［原文］ （ 岩田リョウコ ） グッバイ、クッキー！ Googleが長年にわたって進めてきたクッキーの廃止計画が1月4日､実行に移されました。Chromeウェブブラウザを利用しているユーザーのうち1％、約3000万人に対してクッキーを無効化。そして今年の年末までに、すべてのChromeユーザーのクッキーがなくなるとのことです。すべてのクッキーではなく、廃止されるのは追跡をするサードパーティークッキーです。 クッキーの役目って？プライバシーを守りたい人たちにとって、インターネットの元凶とみなされているクッキー。ほとんどのウェブでクッキーは、テック企業がオンライン上での私たちの行動を追跡する方法となっていました。ターゲット広告や他の多
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
逆向きに接続する Reverse HTTP Transport の仕様 - ASnoKaze blog
『Reverse HTTP Transport』という提案仕様がIETFに提出されています。著者はMetaとNokiaの方々らです。また、HAProxyの方も同様の機能を検討しているそうです(参考URL)。 普通のProxyサーバでは、Proxyサーバからオリジンサーバにコネクション確立するのが一般的です。そのためにオリジンサーバが外部から接続を受けられるようにする必要があります。 Reverse HTTP Transportでは、逆にオリジンサーバからProxyサーバにコネクションを確立し、HTTPリクエストを受け付けるという構成になります。コネクションの確立/TLSハンドシェイクだけが逆向きで、コネクション確立された接続上で、ProxyからHTTPリクエストが送られます。 これによりオリジンサーバをインターネットに公開する必要がなくなります。 プロトコルについて この Reverse
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。 CSSでif～else文を実現するには...記事の続きを読む
こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
米Adobeは9月28日、β版として提供していた「Adobe Photoshop Web」の正式版をリリースした。インストール不要でブラウザからPhotoshopの機能にアクセスでき、同社の生成AI「Firefly」などの機能も利用可能。無料版はないものの、Photoshopを含む全てのCreative Cloudプランで使えるとしている。 Web版はインストールなしに、ブラウザ上でPhotoshopの機能が利用できるもので、ファイルの作成や編集だけでなく、デスクトップ版に移動しての作業もスムーズに行うことができる。デスクトップ版と機能は同一ではないものの、β版のリリース以降、よく使われる機能の大半をWeb版に搭載したとしている。 また、データの共有先がPhotoshopユーザーではない場合でも、共有時に生成したリンクからWeb版Photoshopを立ち上げることができ、ファイルの表示とコ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
私のJavaScriptの情報収集法 2024年版
HTTPが全てを飲み込む（前編）～HTTPの2層構造と、HTTP Semanticsとは何か？
HTTPキャッシュを使いこなして、Webアプリを快適に(1) | IIJ Engineers Blog
WindowsのChromeやEdgeでネットにつながりにくくなる現象、一部の家庭用ルーターが原因かも？ DNSの“TCPクエリ”うまく扱えない機種も存在。ChromeのTCPクエリ送信が引き金に
HTMLメールの最近の実装方法を解説、tableは不要になりました
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
ドコモが「パスキー」を導入してフィッシング被害報告が0件に パスワードレス認証の効果
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
Apple によるブラウザエンジン規制の緩和 | blog.jxck.io
Chromeのクッキー廃止へ。ブラウザをチェックしてみよう
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
新規サービスのバックエンド開発で3ヶ月経ったので、試した技術や取り組みをまとめてみた
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
ブラウザ版「Photoshop」正式リリース インストール不要、非CCユーザーによるデータ確認にも使える