主要なJavaScriptランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、自身のブログで「Dear Oracle, Please Release the JavaScript Trademark」（親愛なるオラクル殿、どうかJavaScriptの商標を手放して）と呼びかけています。 JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクルが所有しています。 ライアン・ダール氏はそのオラクルが唯一「Oracle JavaScript Extension Toolkit」以外にはJavaScript関連製品を持っておらず、V8やSpidermokeyといった主要なJavaScrip
もう YouTube の英語セッションも怖くない！日本語 & 英語の字幕を同時表示できる Chrome 拡張機能 『Language Learning with Youtube BETA』 が便利 | DevelopersIO
コンバンハ、千葉（幸）です。 YouTube で英語の動画を見る際には、字幕機能と文字起こし機能が大変便利です。標準で備わっているこれらの機能を活用することで、概ね問題なく英語のセッションを視聴することができます。 とはいえ、さらに便利なものが世の中には用意されていました。 Chrome 拡張機能の LLY ( Language Learning with Youtube ) BETA です。 どんな感触なのかご紹介していきます。 目次 目次 YouTube の字幕機能と文字起こし機能 LLY を使うと何が嬉しいのか 字幕がリッチになる 文字起こしがリッチになる 他にもいろいろ嬉しい 終わりに YouTube の字幕機能と文字起こし機能 ツールの確認の前に、まずは標準機能でどういったことができるかを押さえておきましょう。 以下のイメージです。 字幕と文字起こし、これだけでもだいぶ助かります
無料＆簡単にウェブサイトの文章をメモ帳感覚でどんどん保存可能、HTML変換もできて便利なChrome拡張機能「Quotebacks」を使ってみた
ウェブサイトのテキストをブログやホームページに埋め込める形式で簡単にコピーできる「Quotebacks」は無料で使えるGoogle Chromeの拡張機能です。HTMLやマークダウン形式に対応した引用形式でもテキストをコピーできるというQuotebacksの使い心地を実際に使って確かめてみました。 Quotebacks - quote the web - Chrome ウェブストア https://chrome.google.com/webstore/detail/quotebacks-quote-the-web/makakhdegdcmmbbhepafcghpdkbemach Google Chromeに「Quotebacks」を追加するには、上記のURLにアクセスし「Chromeに追加」をクリック。 「拡張機能を追加」をクリック。 アドレスバーの右側に「→」のマークが追加されていれば、
CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS
紙書籍をお届けします（PDFがついてきます） PDFのみ必要な場合は、こちらからPDF単体をご購入ください 紙書籍は通常、ご注文から2～3営業日で発送します 年末年始や大型連休など、1週間から10日程度、配送のお休みをいただく場合があります。詳しくはお知らせをご覧ください ブラウザの視点で学ぶセキュリティ 米内貴志 著 224ページ A5判 ISBN：978-4-908686-10-8 2021年1月5日 第1版第1刷 2022年8月16日 第1版第3刷 発行 正誤情報 サンプルコードなど 現代のWebブラウザには、ユーザーがWebというプラットフォームを安全に利用できるように、さまざまなセキュリティ機構が組み込まれています。 リソース間に境界を設定し、アプリケーションに制限を課す機構（Origin、SOP、CORS、CSPなど） Webブラウザの動作をOSのプロセスレベルで考察することで
［速報］AWS CloudShell発表。Webブラウザから利用、無料の1GBホームディレクトリにスクリプトなどを保存可能。AWS re:Invent 2020
Amazon Web Services（AWS）は、開催中のオンラインイベント「AWS re:Invent 2020」で、新サービス「AWS CloudShell」を発表しました。 AWS CloudShellはWebブラウザから利用できるコマンドラインインターフェイスです。Amazon Linux 2ベースのシェルにAWS CLI、コンテナサービスCLIなどAWS関連のツールがあらかじめインストールされており、スクリプトの実行やAPIの呼び出しなどが簡単に行えます。 さらに一般的なコマンドラインツールも含まれていると、Amazon CTO Werner Vogels氏。 「CloudShellは単にAWSのコマンドラインインターフェイスであるだけでなく、Amazon Linux 2ベースのフル機能のシェル環境だ。PythonやNode.jsやbashやgitといった一般的なその他のツール
Image:Koshiro K/Shutterstock.com GoogleのChromium（ChromeのベースとなるオープンソースのWebブラウザ）開発者が、アップルのApp Storeガイドラインに反するiOS向けブラウザに実験的に取り組んでいることが明らかとなった。 現在、iOS向けのウェブブラウザについては、サードパーティであれ、アップル純正のブラウザエンジンWebkitの使用が義務づけられている（App Store Reviewガイドライン2.5.6）。macOSやWindows向けChromeはChromiumベースだが、iOS版はWebkitを使わざるを得ず、アップル製のSafariと似た挙動となっている。 そんな中、もっかChromium開発者が取り組んでいるものは、GoogleのBlinkエンジン（iOS以外のChromeやMicrosoft Edgeに使用）を使っ
何となく「安直な英単語のイメージから来る発想が低レベル(小学生的ダサさ)」「いい加減レッサーパンダだという事を理解しろや」みたいな嘲笑の声がどこからともなく聞こえてきそうでツラくなるから、だろうか。 ドラクエで「ドラゴンフライ」という「背中に薄い羽の生えた飛行形態のドラゴン」のモンスターが出現した際も同様な事を思った。「いや、“ドラゴンフライ”って『トンボ』やん…」と。 誰も鳥山明に突っ込む勇気が無かったのだろうかと思うと涙を禁じ得なかった。 他にもこういう事例があるような気がする。あまり共感は得られないかも知れないけど。
マイクロソフトが開発中の新しいWebブラウザ、いわゆるChromium版Microsoft Edgeが、明日1月15日に予定通り正式版となり、公開される見通しです（おそらく日本時間で15日深夜頃からではないかと予想されます） 同社は2019年11月に行われたイベント「Microsoft Ignite 2019」で、1月15日がChromium版Microsoft Edgeの正式リリース日になると発表していました。 The new Microsoft Edge is coming January 15 -- with improved performance, security, and privacy. Download the Beta to check it out today! https://t.co/juVlca7jk3 pic.twitter.com/WQIz0KIb44 —
Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
ブラウザ & 検索ガイド すべてのプラットフォームでプライバシーを保護。さまざまな拡張機能も使える優れたオプションです。 Web3ガイド 暗号通貨、NFT、ブロックチェーン。Web3の基礎を学びましょう。 プライバシー用語集 一般的なインターネット・コンピューター用語を短く分かりやすい言葉で紹介。 比較データ Braveと他のブラウザの比較はこちらから。 AIガイド ユーザーと開発者双方に向けたLLM、機械学習、AIの基礎。 ブログ Braveブログ プライバシーに関するアップデート Web standards 研究 Brave podcast 検索API
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も
マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も マイクロソフトは、ネイティブアプリケーションに埋め込めるコンポーネント「Microsoft Edge WebView2」（以下、WebView2）の.NET正式対応版がリリースされました。.NET Core、.NET Framework、WinForms、WPFアプリケーションに対応しています。 10月にはWin32 C/C++対応版が先行して登場しており、.NET対応版の登場が待たれていました。 Today, we are excited to announce that Microsoft Edge WebView2 is Generally Available for prod
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
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
Firefoxには、閲覧履歴やCookieといったブラウジングの情報を保存せず、セッションを終了すると追跡されないようにする「プライベートブラウジング」機能が備わっています。Firefox開発元のMozillaが、このプライベートブラウジングがどのような特長を持つのかについて解説しています。 Firefox’s Private Browsing mode upleveled for you https://blog.mozilla.org/en/mozilla/firefoxs-private-browsing-mode-upleveled-for-you/ ◆cookie jarとTotal Cookie Protection 「cookie jar」と呼ばれるCookie管理システムは、ユーザーがウェブサイトにアクセスした際のCookieを個別に管理し、そのCookieを他のウェブサイ
米Mozilla Foundationは2月25日（現地時間）、米国のFirefoxユーザーに対し、「DNS over HTTPS（DoH）」をデフォルトで有効にしたと発表した。向こう数週間をかけてロールアウトする。主要WebブラウザとしてはFirefoxが初だ。 DoHは、平文で行われているDNSへの問い合わせと応答を、HTTPSを用いることで暗号化するプロトコル。現在IETFで標準化を進めている。Mozillaは、DoHを有効にすれば、ISPなどがユーザーのブラウジング履歴を営利目的で使うことができなくなると説明する。 DoHを有効にすると、DNSルックアップは暗号化されるが、Webブラウザが接続するDNSサーバにはWebサイトが表示される。そこでMozillaは、信頼できるDNSプロバイダーとしてCloudflareとNetDNSを選んだ。 DoHを米国以外でもデフォルト有効にするか
HTTP ヘッダインジェクションは、データを適切にチェックせずに HTTP レスポンスヘッダに反映させてしまうことで発生する脆弱性・攻撃手法です。本記事では HTTP ヘッダインジェクションの概要・対策方法について解説します。
Avast Softwareは6月2日(米国時間)、「Malicious extensions: Avast detects new threats on the Chrome Web Store」において、Google Web Storeで悪意のある拡張機能が配布されているとして、注意を呼び掛けた。合計インストール数が7500万回数にも及ぶ32の悪意のある拡張機能が特定されている。 Malicious extensions: Avast detects new threats on the Chrome Web Store Google Web Storeに、ブラウザハイジャッカーが組み込まれた悪質なWebブラウザ拡張機能が多数存在することがわかった。同社は、潜在的に世界中の数百万人に影響を及ぼす可能性のある重大な脅威と述べている。調査のきっかけは、サイバーセキュリティ・コミュニティに参
「畏怖すら感じました」AIを搭載した新しいMicrosoft Edgeは要約という方法で論文の読み方を根本的に変えうるかもしれない
リンク 窓の杜 Microsoft、AI搭載の新しい「Bing」を発表 ～検索エンジンは新時代へ／「Microsoft Edge」にも組み込まれ、メール作成やブログ投稿を「秘書」のように手助け 米Microsoftは2月7日（現地時間）、AIを搭載した新しい「Bing」検索エンジンを発表した。デスクトップでの限定プレビュー提供が同日から開始されており、今後数週間のうちに数百万人に拡大される予定。モバイル版のプレビューもまもなく開始される。 121 users 23 小猫遊りょう（たかにゃし・りょう） @jaguring1 ChatGPTよりも強力で高速なAIを用いた、検索エンジン「Bing」をマイクロソフトが正式に発表！ 検索用にカスタマイズされたOpenAIの大規模言語モデルを利用。ChatGPTとGPT-3.5から重要な学習と進歩を取り入れ、さらに速く、より正確で、より有能になっている
Google・Mozilla・Apple・Microsoftが協力して「ブラウザ拡張機能の標準化」を図ることを発表、ChromeやFirefoxなどの「拡張機能の共通仕様」実現に向け
2021年6月4日、Google・Microsoft・Mozilla・Appleが、ブラウザ拡張機能の標準化とパフォーマンスの向上などを図るコミュニティグループ「WebExtensions Community Group (WECG)」を立ち上げたことを発表しました。 Forming the WebExtensions Community Group | WebExtensions Community Group https://www.w3.org/community/webextensions/2021/06/04/forming-the-wecg/ Google, Microsoft, and Mozilla work together on better browser extensions https://www.bleepingcomputer.com/news/securit
1月のKyoto.JSの休憩時間にMIDIコントローラとWeb MIDI APIでVJできるとよさそうって話になったので買ってみて、ちょっとずつ触ってみた。過去に作ったツールをMIDI対応する、とか、MIDIの入力に応じて絵を出す、という使いみちに加えて、既存のページにコードを差し込んでエフェクトをかけるのを作ってみた。 Scrapboxにエフェクトをかける Scrapboxのプロジェクトのトップページには四角いカードが並んでいるので、これをパーティクルとみなして毎フレーム見た目を書き換えると愉快なビジュアルを出せると考えた。 MIDIコントローラで操作するために、動きのパターンを座標、大きさ、色、背景、ページ全体の変形、などチャンネルがいくつかに整理して、縦フェーダーでエフェクトの種類がかわり、各チャンネルに対応するつまみでエフェクトの掛かり具合が変わるようにした。 こういう構造があって
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
概要 GitHub上で動作するChrome拡張についてざっくばらんに紹介 検証をChromeで行っただけで、他ブラウザでも使えるものも含む ご注意 紹介してるもの同士の互換性は考慮していません。組み合わせによって動作しなくなる拡張もあります 拡張機能は本家GitHubの変更を強く受けるため、突如使えなくなるリスクがあることをご認識ください プライベートリポジトリでは使用できない、あるいはAPIトークンを渡したり認可する必要があるものを含みます 本記事で紹介している拡張はいずれも2020/05/03時点の最新版をChrome81系で動作確認済み Refined GitHub 説明不要なレベルで、これを入れておけばまず外れないので迷ったらコレ 詳細は別途紹介記事を書いてます GitHubを圧倒的に便利にするRefined GitHub のTips集 Octotree サイドバーにディレクトリツ
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。 （現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！ →更新していただきました。ありがとうございます！） Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。 基本的な使い方 よくあるgroupByです。配列（Iterable）とキーを抽出する関数の二つを指定すると、キーで配列をグループ化します。 const ret = Object.groupBy([ { name: '山田太郎', address: '東京' }, { name: '山田次郎', address: '愛知' }, { name: '山田三郎', addre
Firefoxに搭載されている実行時コンパイラ(JIT)が、11月にリリース予定のバージョン83から大幅に高速化されることがわかりました。バージョン83は記事作成時点ではNightly版で提供されています。 Dogfooding Warp https://groups.google.com/g/mozilla.dev.platform/c/1PHhxBxSehQ Firefox's JIT is getting significantly faster | Hacker News https://news.ycombinator.com/item?id=24590174 JITとは、頻繁に実行するコードをあらかじめコンパイルしておくことで、コードの実行速度を向上させる技術のこと。ウェブブラウザはJITを備えることでJavaScriptを高速に実行し、快適なウェブブラウジングを実現しています
1つのメールアドレスで複数のウェブサービスに登録していると、どこかで個人情報が漏えいした時のリスクが高まります。しかし、利用するウェブサービスの分だけメールアドレスを用意するというのは非現実的。Mozillaの提供する「Firefox Relay」は、登録済みのメールアドレスをリンクさせた捨てメールアドレスをランダムで生成して管理してくれる機能で、無料で簡単にセキュリティを高めることが可能です。 Firefox Relay https://relay.firefox.com/ Firefox Relayを利用するには、公式サイトにアクセスして「Sign In」をクリック。 Firefoxアカウントでログインします。なお、Firefoxアカウントを持っていない場合は自動的に登録画面に移行します。 ログインに成功すると以下の画面に遷移します。Firefox上でFirefox Relayを使うた
Android版FirefoxはPC版Firefoxと同様にアドオンをサポートしていますが、通常の手順でインストール可能なアドオンはMozillaが推奨する一部のアドオンに限られています。しかし、正式版に導入前の機能を使用できる「Firefox Beta」のバージョン107.0 b1ではMozilla推奨アドオン以外のアドオンもインストール可能になっているとのこと。そこで、実際にFirefox Betaにアドオンを追加する手順をまとめてみました。 Firefox Beta for Testers - Google Play のアプリ https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta Android 版 Firefox で使用できるアドオンを拡張する | Android 版 Firefox ヘルプ h
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
Mercari Advent Calendar 2019も、この記事を入れてあと３個となりました。最後まで読んでくださいね。 23日目はAutomation&QAグループで、Webのテスト自動化を行っている@AHA_oretamaがお送りします。 今回はWebの自動テストについて、この１年やってきたことを振り返ってみようかと思います。 Webのリアーキテクチャ 現在、Webではリアーキテクチャを進めています。 進め方としては既存のモノリシックなWebアプリケーションを残したまま、パス（例えばトップ /jp/ や検索ページ /jp/search/ ）ごとに新しいWebアプリケーションにマイグレーションする方法をとっています。 影響範囲を小さくしつつその範囲の中でチャレンジが行えることがこの方法の利点です。 詳しくは去年のMercari Tech Confの資料をご覧ください。 speaker
ウェブブラウザで音楽制作！ 手持ちの音源からステム作成できる「音源分離」も――Soundmain Studioレビュー
ウェブブラウザで音楽制作！ 手持ちの音源からステム作成できる「音源分離」も――Soundmain Studioレビュー DTM コラム 最新テック 機材 Soundmainはソニーミュージックによる、【サウンドパック（音源素材）】【ウェブブラウザで動くDAW】【ブロックチェーンを用いた著作権処理の仕組み】を一括して提供することを目指し開発中のプラットフォームです。このうち【ウェブブラウザで動くDAW】が先日ついに「Soundmain Studio」としてローンチしました。現在も改良を重ねている最中ですが、「ウェブブラウザでDAWの基本的な機能が使える」「ソニーの目玉技術である“音源分離”が使える」というコアの部分については体験いただけるようになりました。 【PR】AIの進化を作曲しながら体験できるSoundmain Studio。ブラウザで手軽に使える音楽制作ツールが、今ならお得に試せるキ
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ピクセル パーフェクトとは 2010年頃のWeb制作 ルックアンドフィール コード化された結果がパーフェクトかどうかの判断 バリエーションとコンテキスト 現在の状況 モダンCSS CSSフレームワークの影響 好き嫌いではなく、期待通りに デザイナーに役立つアドバイス デベロッパーに役立つアドバイス 終わりに はじめに 「ピクセル パーフェクト」という言葉を最
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Denoのライアン・ダール氏「親愛なるオラクル殿、どうかJavaScriptの商標を手放して」と呼びかけ
CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
Webブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する
Google、アップル規約違反のiOSブラウザを開発中 | Gadget Gate
「firefox」→「キツネの尻尾から炎が出てる」みたいなのに共感性(?)羞恥を感じる
Chromium版Microsoft Edge、明日1月15日に予定通り正式公開の見通し
Rust Is The Future of JavaScript Infrastructure
「Google ブックマーク」が9月30日で提供終了／それまでに［ブックマークをエクスポート］機能で保存、「Chrome」へのインポートを
広告ブロッカーで、セキュアで高速なプライベートウェブブラウジング | Brave
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
AppleがついにChromeとFirefoxのフルバージョンをiPhone上で動かすことを許可
「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に／「Safari」は実施済み、「Google Chrome」も追随へ
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
Internet Explorerよ永遠に（眠れ） ～2023年2月の完全無効化を前に「Microsoft Edge」とともに振り返る／【特集・集中企画】
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
Googleの「おすすめ」バッジ付きChrome拡張がマルウェアに、ユーザー情報が外へダダ漏れ【3月8日追記】／問題の拡張機能を「Chrome」がブロックすることを確認、今すぐアンインストールを
Firefoxのプライベートブラウジングは一体どのような仕組みになっているのか？
Firefox、米国では「DNS over HTTPS（DoH）」が初期設定で有効に
改行コードに要注意！ HTTP ヘッダインジェクションの概要と対策 | yamory Blog
数百万人に影響の恐れ、悪意あるGoogle Chromeの拡張機能見つかる - 確認を
ScrapboxでVJするためのChrome拡張を作った - hitode909の日記
GitHubをむっちゃ多機能にするためのChrome拡張を紹介するぜ - Qiita
Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
ついに JavaScript に groupBy が実装されたぞ！！！ - Qiita
FirefoxのJavaScriptエンジンが大幅に高速化される
無料でアカウント作成時に使える捨てメアドを自動生成して本来のメールアドレスを守る「Firefox Relay」レビュー
Android版Firefoxのベータ版でアドオンを自由に導入できる機能が利用可能に
Webブラウザーで動く第4の言語“WebAssembly”はどう凄い？ C++もコンパイル……～IIJがアプリケーション分野の革新を振り返る～【IIJ Technical WEEK 2020】
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
Webの自動テストのこの１年を振り返って | メルカリエンジニアリング
HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状