「Microsoft Edge」のUIが劇的に高速化 ～内部プロジェクト「WebUI 2.0」の秘密／とくにSSDなし、メモリ8GB未満などのローエンドデバイスでは効果覿面
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
世界で話題のブラウザ「Arc」が便利すぎたので魅力を解説する - Qiita
はじめに 社員の皆さんはこんな奴が最近エンジニアになって頑張ってるんだなと暖かい目で読んでいただければと思います。 社外の方やエンジニアを目指している方は少しでも学習の参考や、コネクター・ジャパンに興味を持っていただければと思います。 自己紹介 建築の営業→未経験から独学でプログラミング学習し5ヶ月でLaravelでポートフォリオを作成しました。そして現在は自社開発企業に入社し、WEBエンジニアとしてプロダクト開発に携わっています。 概要 あなたは普段どんなブラウザを利用していますか？ ほとんどの方がGoogleChromeで、fireFox、Vivaldiなど色々ブラウザがありますね。 私は最近世界で話題になっている新しいブラウザ「Arc」を使っており、Chromeから移行のしやすさや、利便性の良さからすっかり虜(ファン)になってしまいました笑 そんな「Arc」を3ヶ月使ってみての使用感
Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild
Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild2024.05.22 07:0060,278 三浦一紀 音声で聞けるの、ありがたいね。 Microsoft（マイクロソフト）は、開催中の開発者向けカンファレンス｢Microsoft Build 2024｣で、同社開発のウェブブラウザ｢Microsoft Edge｣に、多言語リアルタイム翻訳機能を追加すると発表しました。 どういう機能かというと、YouTubeやLinkedIn、ロイター、CNBC、ブルームバーグなどのサイトにある動画を指定した言語でリアルタイム翻訳してくれるというもの。音声にも字幕にも対応するようです。 短いですけど、デモ動画があるのでご覧ください。 Video: Microsoft Edge/YouTubeちょっとわかりにくいかもしれませんが、LinkdInの英語の動画をスペイン語にリアルタイム翻訳
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
Appleがサードパーティ製ブラウザエンジンのテストを「EU内に物理的に存在するデバイス」に制限していると報じられる
Appleは欧州連合(EU)のデジタル市場法(DMA)に従うため、2024年3月にリリースしたiOS 17.4で、EU圏のユーザーに限りWebkit以外のブラウザエンジンを許可しました。ところが、Appleはサードパーティ製ブラウザエンジンのテストを、EU内に物理的に存在するデバイスのみに限定していると海外メディアのThe Registerが報じました。 Apple limits third-party browser engine work to EU devices • The Register https://www.theregister.com/2024/05/17/apple_browser_eu/ Testing of iOS Browsers With Third-Party Engines Geofenced to EU - MacRumors https://www.m
次期Safari 17.5の新機能をAppleが紹介 ー CSSにtext-wrap: balance、light-dark()など追加
5月15日、AppleはSafariの次期バージョン17.5に関するブログを公開した。 これは2024年における3度目の大規模アップデートであり、7つの新機能と22のバグ修正が含まれている。 以下に要点をまとめて紹介する。 新機能 CSS テキストラップのバランス機能 テキストの折り返しを調整するための新しいtext-wrap: balanceプロパティが追加された。この機能により、テキスト行が均等に配置される。 text-wrap: balance; このプロパティは、特定のブラウザでのアルゴリズムの違いによるテキスト折り返しの違いを考慮する必要がある。また、Safariでは無制限の行数をバランスするが、Chromiumブラウザは6行以下、Firefoxは10行以下をバランスする。 テキストラップのショートハンドとロングハンド text-wrapプロパティは実際にはtext-wrap-s
「Firefox 126」正式版リリース、URLコピー時に追跡パラメーターを削除する機能が追加される
ウェブブラウザ「Firefox 126」の正式版が公開されました。URLのコピー時に追跡パラメーターを削除することが可能になったり、Zstandard圧縮がサポートされたりするなど機能面がアップデートされたほか、検索機能改善のためのデータ収集を行うようになっています。 Firefox 126.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/126.0/releasenotes/ ◆URLをコピーする際に追跡パラメーターを削除することが可能に URLを選択し、右クリックメニューの「サイト追跡を除いてコピー」をクリックすることでURLの追跡パラメーターを削除しつつコピーを行う事が可能になりました。 例えばFirefoxのリリースノートのページの場合、そのままコピーすると下記のURL
GoogleがAndroid端末でChrome OSを仮想的に動かすテストを実施中、AndroidでChromebookアプリが使用できるようになる可能性
Googleはスマートフォンやタブレット向けのOSとして「Android」を開発する一方で、PC向けには「Chrome OS」を開発しています。双方は相乗効果を狙って開発されていますが、Chrome OSはAndroidのランタイムが付属するため、Chrome OSを搭載したChromebookでAndroidアプリを使うことができる一方、Android端末ではChrome OS向けアプリを使うことはできません。しかし新たに、GoogleがAndroid端末でChrome OSを動かすテストを行っていることが明らかになりました。 Exclusive: Google is experimenting with running Chrome OS on Android https://www.androidauthority.com/chrome-os-running-on-pixel-344
インストール不要でLlama 3やMistralなどオープンソースLLMをブラウザで動かせるチャットボット「Secret Llama」が登場
Llama 3やMistral-7Bといったオープンソースの大規模言語モデル(LLM)をサポートし、WebGPUを使ってブラウザ上で完全に動作するチャットボット「Secret Llama」が公開されています。 Secret Llama https://secretllama.com/ GitHub - abi/secret-llama: Fully private LLM chatbot that runs entirely with a browser with no server needed. Supports Mistral and LLama 3. https://github.com/abi/secret-llama 実際にSecret LlamaのデモサイトでLlama 3を動作させて会話してみたところが以下のムービー。 大規模言語モデルを完全にブラウザで動作できる「Secr
Safariで開いているWebページのURLをキーボードショートカットで素早くコピーできる機能拡張「Supercopy for Safari」がリリース。
Safariで現在開いているWebページのURLをキーボードショートカットでコピーできる機能拡張「Supercopy for Safari」がリリースされています。詳細は以下から。 MacやiPadに接続したHDMIキャプチャカードの映像をWi-Fi経由でVision Proにストリーミングできるアプリ「Castaway」などを開発するFinn Voorheesさんは現地時間2024年05月03日、現在Safariで開いているWebページのURLをキーボードショートカットやワンクリックでコピーできる機能拡張「Supercopy for Safari」を新たにリリースしたと発表しています。 Supercopy is a simple Safari extension that adds a keyboard shortcut for copying the current tab’s URL
Windows版「Arc」がついに登場、ChromiumベースのSwiftで開発されたブラウザの使い心地を確かめてみた
The Browser Companyが開発するChromiumベースでありながらAppleのプログラミング言語・Swiftで開発されているウェブブラウザ「Arc」が、ついにWindowsに対応しました。近年のウェブブラウザでは主流のタブベースのUIとは異なる操作感が特徴で、ChromiumベースであるためChromeの拡張機能を利用可能、さらにSwiftをWindowsに持ち込むことに成功しているという点でも注目を集めるArcを、実際に使ってみました。 Arc for Windows – Arc Help Center https://resources.arc.net/hc/en-us/articles/19400082392215-Arc-for-Windows Arc on Windows is finally here. No more waitlists, no more be
WebKit公式ブログにてタイル状にアイテムを配置するメイソンリーレイアウトのデザイン例が掲載される
Safariのレンダリングエンジン「WebKit」の公式ブログにて、CSSグリッドレイアウトLevel 3で実装される予定のメイソンリーレイアウトの使用例が掲載されました。 Help us invent CSS Grid Level 3, aka “Masonry” layout | WebKit https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ メイソンリーレイアウトは下図のように、コンテンツがレンガや石の壁のように積み上げられているレイアウトです。コンテンツがページ上を滝のように流れていくためウォーターフォールレイアウトとも呼ばれています。 メイソンリーレイアウトを使用することでさまざまなアスペクト比のコンテンツをきれいに配置したり、ページをスクロールするときの自然な読み
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
CSSをより深く理解する、プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説
CSSで無効な値、たとえばcolor: 20px;のようにcolorプロパティにカラー値以外を設定したり、background-colorにカラー値以外をカスタムプロパティで設定したりすると当然その値は反映されません。 CSSにおいて値の処理がどのように実行されているのかを紹介します。無効な値だけでなく、値の上書き、値の継承、キーワードから変換した値など、いろいろな処理がされています。 CSS Foundations: What is IACVT? by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおける無効な宣言（Invalid Declarations）とは CSSにおける値の処理 カスタムプロパティの場合 IACVT: 無効な値を含む有効な宣言 IACVTの結果 終わりに はじめに 先
「Firefox 125」正式版リリース、Firefox Viewのタブ一覧の見やすさと操作性が向上
ウェブブラウザ「Firefox 125」の正式版が公開されました。Firefox Viewの「開いているタブ」画面の表示や操作性が改善されたほか、クリップボードのURLを素早く開いたりPDFビューアでテキストを強調表示したりするなどの機能が追加されています。 Firefox 125.0.1, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/125.0.1/releasenotes/ ◆PDFビューアがテキストの強調表示をサポート PDFビューアにおいて、テキストの強調表示に対応しました。この機能は「progressive roll out(段階的ロールアウト)」の対象で、一部のユーザーから順番に機能が追加されていくとのこと。 ◆Firefox Viewのインジケーターが改善される F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zstd圧縮に対応した「Firefox 126」、追跡コードを除いてURLをコピーする機能も強化／セキュリティ関連の修正は16件
Google Releases New Security Fixes For Desktop Chrome Users