別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
iOSでは「プログレッシブウェブアプリ」(PWA)と呼ばれる技術を用いることでウェブサイトをiPhoneのホーム画面に追加したり通知を受信したりできます。ところが、2024年3月に正式展開される予定のiOS 17.4のベータ版では、EU圏のユーザーを対象にPWAが削除されていることが判明しています。これについてAppleが、EUのデジタル市場法(DMA)に準拠するためPWAを削除したと公式に認めました。 Apple confirms iOS 17.4 removes Home Screen web apps in the EU, here’s why - 9to5Mac https://9to5mac.com/2024/02/15/ios-17-4-web-apps-european-union/ Apple confirms it’s breaking iPhone web apps i
CSSで複数行3点リーダーを実現する「line-clamp」がついにIE以外に対応したよ！ - Qiita
最新のFirefoxが対応した!! これにより、IEさえ無視すれば完全にCSSのみで複数行の3点リーダーが実現可能となりました。 よく使う割に難しい処理だったので、地味に嬉しいです。 最新の対応状況はこちら line-clampとは？ 行数を指定して、テキストが領域をはみ出した時に3点リーダ「…」を表示することができます。 //css p { width: 170px; display: -webkit-box; -webkit-line-clamp: 4; //3点リーダを表示する行数を指定 -webkit-box-orient: vertical; overflow: hidden; } たったこれだけで実現できちゃいます。 詳しくはこちらの記事でわかりやすく書かれています。 現状のベストプラクティス ・IE以外で簡単に実現できるようになったので、基本line-clampを使いましょう
以前、Bunについてざっくり調べたことがある uga-box.hatenablog.com この時からBunについて、特にNode.jsとの違いについて、知る機会があったのでメモ （2022/9/5 追記）ソース元はfurukawaさんがNode学園40限目で話された内容 speakerdeck.com Node.jsの構成要素の一部 Standard Libraries HTTP、File systemとか n-api C++とかCを呼び出すネイティブモジュールの抽象化ライブラリ V8 JavaScript エンジン http-parser HTTP1.1用のパーサー OpenSSL HTTPSとかTLSとかの暗号化周りのライブラリ zlib 圧縮とか解凍とか ng-http2 HTTP2用のライブラリ ng-tcp QUIC用のライブラリ libuv OSによって異なるシステムコールの
この資料は Meguro.css#9 のLT資料です。 メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります 自己紹介 yamanoku.icon @ yamanoku 大山奥人, おおやまみちのく a.k.a やまのく X（旧Twitter） GitHub 株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています 得意領域 マークアップ・フロントエンド・UIデザイン・アクセシビリティ 既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主 Meguro.css復活！！！！！ 株式会社オロ様、Nakayaさんありがとうございます（感謝） Meguro.css#4がエンジニアとしての初登壇イベントでした 今回のテーマ「2020年から2023年までに登場したCSSの変遷を振り返る」 前回のMeguro.cssが2020年1月開
どうも、たつとら(@tatsutora6) です。 はてなブログで記事を書いていて、「箇条書き」や「番号付きリスト」の部分ってデフォルトの設定だったら余り目立たなくないですか？（ボクは「はてなブログ」で記事を書いているので「はてなブログ」の場合で載せています） 特に注目して欲しい時などにそのまま素通りされたら悲しいですよね… そういう時は、枠をつけたりして目立つ書き方にしてみましょう。 デフォルトのデザインは味気ない 「箇条書き」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。 「番号付きリスト」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。 普通に入れると「箇条書き」このように味気がないデザインになります。（ブログのテーマによって変わってくると思いますが） これだとパッと見普通の文章と区別がつかないかもしれません。 そこで、【ダッシュボード】＞【
Playwright for Python: ブラウザ操作を自動化しよう！ - kakakakakku blog
ブラウザ操作を自動化して，E2E (End to End) テストやスクレイピングをするときに使えるライブラリ Playwright を試す．Playwright の特徴としてまず「クロスブラウザ」があり，Chromium / Firefox / WebKit をサポートしている．また「複数言語」という特徴もあり，Node.js / Python / Java / .NET をサポートしている．今回は Playwright for Python を前提にする． playwright.dev Playwright の前に 過去の経験を思い出すと，Capybara + PhantomJS で E2E テストを実装していた（2015-2016年頃でなつかしい！）．また最近だと Puppeteer や Amazon CloudWatch Synthetics を使う機会も増えている．しかし，個人的
2018年6月2日、PhantomJSのリポジトリがついにアーカイブ化されました。PhantomJSのメインメンテナーは、「より高速かつ安定して動作するヘッドレスChromeが登場したことで、PhantomJSの開発を続ける必要がなくなった」と述べています。 PhantomJSは、TwitterやNetflixでも単体テストやパフォーマンステストで使用されていた、ヘッドレスブラウザのデファクトスタンダードでした。ヘッドレスブラウザとは、GUI（Graphical UserInterface）を必要としないブラウザです。 これまでPhantomJSを使ってきた人たちは、徐々にヘッドレスChromeに切り替え始めています。一方で、「切り替えにどのような作業が必要になるのか」や「いったい何が変わるのか」がわからないといった声を耳にすることもよくあります。 そこで本特集では、ヘッドレスChro
id:kikuchy です。 先日、いよいよバクラク申請・経費精算のiOS/Androidアプリがリリースされました！ bakuraku.jp bakuraku.jp こちらの２つのアプリ、現在のところ専任のエンジニアはkikuchy一人だけで開発しています。 そのためか、技術スタックは何なのか、クロスプラットフォームフレームワークの技術を使っているのか、といった質問をたくさんいただきました。 また、LayerXのモバイルアプリ第一号でもあるため、リリースまでにいろいろな準備が必要でした。 当記事では、どんな準備をしてきたのか、使用技術スタックとその選定、開発の苦労話の一部をお伝えできればと思います。 （社内で）初めてのアプリ開発 会社はすでにプロダクトを展開していて、しかしスマホアプリ開発にはまだ手を出していない。 そんな環境でアプリ開発を初めるというのはなかなか珍しい経験だと思います。
Windows10 / Microsoft Edge での自動テスト(Selenium WebDriver)を Azure DevTest Labs 上で実行して高速化したお話 | メルカリエンジニアリング
Windows10 / Microsoft Edge での自動テスト(Selenium WebDriver)を Azure DevTest Labs 上で実行して高速化したお話 この記事は、Mercari Bold Challenge Month の 2日目の記事です。 メルカリで QA Automation Engineer をしている 根本 征 です。 私は現在、メルカリWeb版のUIテスト自動化に取り組んでいます。 今回は、Microsoft Edge ブラウザでの UIテスト自動化 (Selenium WebDriver) とその環境構築についてお話します。 マルチブラウザ時代のUIテスト戦略 Windows10 / Microsoft Edge で Selenium WebDriver のテストを動かす Windows 10 / Microsoft Edge のテスト環境への課題
2020 年 8 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。 1. enterkeyhint属性 スマホキーボードのエンターキ表示を最適化でき、フォームが送信されたときの動作をあらかじめ伝えられます。 <input enterkeyhint="enter"> <input enterkeyhint="go"> <input enterkeyhint="done"> <input enterkeyhint="next"> <input enterkeyhint="previous"> <input enterkeyhint="search"> <input enterkeyhint="send"> 各属性値を指定したときの表示は以下のようになります。 2
次期iOS 13.3のSafariではU2FやFIDO2/WebAuthn準拠のUSB/Lightning/NFCセキュリティキーがサポートされるもよう。
次期iOS 13.3のSafariではU2FやFIDO2/WebAuthn準拠のUSB/Lightning/NFCセキュリティキーがサポートされるようです。詳細は以下から。 Appleは2019年06月に開催したWWDC 2019のセッション516「What’s New in Authentication」で、macOS 10.15 Catalinaのデフォルトブラウザとなる「Safari v13」で、FIDO2準拠のセキュリティキーをサポートすると発表し、デスクトップ版Safari v13では初期リリースからYubikeyやFeitian KeyなどのUSBセキュリティーキーがサポートされていますが、 AppleのConsulting Engineeringチームで働くPepijn Bruienneさんによると、現在Appleが開発者向けに公開しているiOS 13.3のモバイル版Safa
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
Apple、iOS 17.4ではSafari初回起動時に他社製ブラウザ選択肢を提示。App Store以外の配布経路も許容、ただしEU圏内に限る | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 アップルは、EU圏内のユーザーを対象に、iOS と Safari ブラウザ、App Storeの挙動を変更することを発表しました。 25日にベータ版の提供が始まったiOS 17.4より、最初にSafariを起動した際、サードパーティ製のブラウザアプリにデフォルトブラウザを切り替えられることを案内するようになります。 サードパーティ製のブラウザアプリと言えば、ChromeやFirefox、Edgeが知られていますが、他にもBrave、Opera、DuckDuckGoなどがこれに該当します。 これらサードパーティ製のブラウザをデフォルトとして設定すれば、メッセージ、電子メール、メモなどに含まれるURLリンクをタッ
I recently received a tantalizing email from a reader I’ve never met: Sam Henri-Gold. Sam showed me how you can key in a couple write commands in the macOS terminal: defaults write NSGlobalDomain WebKitDeveloperExtras -bool true defaults write -g WebKitDeveloperExtras -bool YES Which will enable a context menu in a system web view: Which lets you trigger the Safari Web Inspector and inspect elemen
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
rabble.md fiatjafはブログ記事を投稿しましたが、これがblueskyに関していくつかの議論を巻き起こしました：https://fiatjaf.com/ab1127fb.html これは、bluesky開発者のPaul Frazeeから長いskeetストリームの返信が来たことを引き金にしました：https://staging.bsky.app/profile/pfrazee.com/post/3jv72j3fp6g2r そして、私はいくつかの考えをまとめました： 分散型プロトコルの世界は勢いを増しており、NostrやBlueskyのようなプロジェクトが先頭に立っているのは興味深いことです。私たちの多くは、これらのプロトコルの開発に何年もの時間を費やしており、今では世界中で関心を集めています。私は長い間、さまざまな分散型ソーシャルメディアプロトコルを追跡しており、興味がある方は
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
Structured Field Values による Header Field の構造化 | blog.jxck.io
Token が文字列とは別に定義されているため、実装する言語によっては設計に悩む(JS 実装では Symbol を使っている)。 Parameter Parameter は Item に付与できるメタデータだ。 例えば以下は String の "abc" に対してパラメータを 2 つ付与している。 // "abc";a=1;b=2 { "value": "abc", "params": { "a": 1, "b": 2 } } データ表現には基本的に Key/Value/Metadata の 3 つがあることが望ましい。 例えば XML/HTML のようなフォーマットは Attribute がメタデータを担うが、これを再現可能になる。 <p id="foo" class="bar">hello</p> // p="hello world";id="foo";class="bar" { "p
ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトをご存知でしょうか。 さまざまなCSSプロパティをカテゴライズし、どのくらいのユーザーがそのプロパティを知っているか、使ったことがあるかがまとめられています。 私は、当社のPodcastでもこのState of CSSについてお話ししたのですが、今回は、実際にコードベースで2021年に活躍していくであろう3つのCSSプロパティについてご紹介します。 ※対応ブラウザ状況について、最新の情報については適宜Can I useなどでご確認ください。 backdrop-filter まず1つ目はbackdrop-filterです。State of CSSでは知らないと答えた人が49.9%と全体の半数いました。 このプロパティは、すりガラスのように後ろにあるものが見えづらくなるようなぼ
Platform Tilt - Mozilla
This dashboard tracks technical issues in major software platforms which disadvantage Firefox relative to the first-party browser. We consider aspects like security, stability, performance, and functionality, and propose changes to create a more level playing field. Further discussion on the live issues can be found in our platform-tilt issue tracker. Rule 2.5.6 of the Apple App Store Review Guide
Tracking Prevention Policy
ContentsTracking DefinitionsTypes of TrackingTracking We Will PreventPolicy CircumventionNo ExceptionsUnintended ImpactAcknowledgements This document describes the web tracking practices that WebKit believes, as a matter of policy, should be prevented by default by web browsers. These practices are harmful to users because they infringe on a user’s privacy without giving users the ability to ident
背景を透過する Web カメラをデスクトップ最前面に出す mac アプリを作った | Basicinc Enjoy Hacking!
オンラインミーティングや勉強会が盛んになってきた昨今、自分が映っているカメラ映像の背景を透過させて、他のアプリケーションと良い感じに一緒に配信したいな〜と思ったので mewcam ( ミュウカム ) という mac アプリを作ってみました。 こんな感じです。 良いですね（表情が固い）。 ダウンロード GitHub にソースコードとアプリを公開しています。是非ダウンロードして使ってみてください。 https://github.com/zaru/mewcam Download : mewcam v1.1.0 for mac 今は mac のみの対応ですが、Windows 版もリリースする予定です。もしフィードバックがあれば @zaru までお願いします。 Windows 版もリリースしました！ 最新版のダウンロードは GitHub からお願いします。 どうやって作るのか ここからは作り方です。
ウェブの変更の追っかけ方
✍️ 仮メモ。需要があったらちゃんと書く 基本方針 RSSは購読数を気にせずに購読していく Watchを長く続けていくと、更新の方が止まるので、増やしても購読数は一定になる 情報の更新は一箇所に集まるようにする 自分の場合はRSS メールマガジンなどもRSSにまとめる メールの受信トレイを空にするInbox Zeroを始めた | Web Scratch 後で読む も自動でRSSにまとまるようにする 一箇所に集約することで色々と楽になる 追っていて、新しい追い方を見つけたら増やす まとめている場所とかがグルーピングできたら、それをグループ化して機械的に扱えるようにRSSなどに変換する おそらく、量を扱う場合はpushではなくpullにすることでスケールする。 一方で、質を扱う場合は逆のアプローチをとる。 コメントで追い方が増える GitHubのリリースノートの追い方 GitHubでリリースが
Testing | Next.js
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
This blog post covers several enhancements to Intelligent Tracking Prevention (ITP) in Safari 14 on macOS Big Sur, Catalina, and Mojave, iOS 14, and iPadOS 14 to address our latest discoveries in the industry around tracking. CNAME Cloaking Defense ITP now caps the expiry of cookies set in so-called third-party CNAME-cloaked HTTP responses to 7 days. On macOS, this enhancement is specific to Big S
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
差分指向テスト（DOT: Difference Oriented Testing）という考え方 - MNTSQ Techブログ
はじめに MNTSQ(モンテスキュー)株式会社 フロントエンド担当の安積です。 入社して4ヶ月とちょっと。 コードに取り組もうと入社して、まさに日々格闘しております。 私の後ろの席にはこんなバズ記事書く人や、こんなイカつい記事書く人が座ってまして、そんなプレッシャー期待の中からお送りいたします。 tech.mntsq.co.jp tech.mntsq.co.jp 昨日はこんな記事も公開されています。 tech.mntsq.co.jp はじめに 現在のステータス またはMNTSQ考古学 リファクタリングやるぜっっ！ 仕様書大事だよね 差分指向テストとは テスト環境の概要 テストデータ ブラウザ操作自動化 スクリーンショット比較 Playwriteの操作 ちょっとコードのサンプル 最後に この記事を書いた人 現在のステータス またはMNTSQ考古学 コードベースから見たMNTSQのフロントエン
気分転換で下調べも何もせずに雑に書いた記事です。個別のライブラリについては間違ったことを言っている部分が多いと思うので、参考にしないでください。 こんなツイートを見かけました。 YouTube、yogaが使われてるんだ👀 pic.twitter.com/A9GVR7ByPb— Naturalclar(Jesse K.) #StopAsianHate (@natural_clar) 2021年11月17日 Yogaといえば、FacebookMeta社が作ったAndroid / iOS向けのレイアウトエンジンです。 yogalayout.com React Nativeのレイアウトエンジンでもありますが、まあ今回はReact Nativeの話はしません。YogaはAndroid向けのLithoやiOS向けのComponentKitといった形でも提供されており、ネイティブアプリのUI実装にも活
Appleがデフォルトブラウザである「Safari」をMicrosoft Edgeと同じChromiumベースに移行するという噂が流れ、WebKitチームがこれを否定。
Appleがデフォルトブラウザである「Safari」をMicrosoft Edgeと同じChromiumベースに移行するという噂が流れ、WebKitチームがこれを否定しています。詳細は以下から。 Microsoftは昨年(2018)12月、Windowsのデフォルトブラウザである「Microsoft Edge」のベースにChromiumオープンソース・プロジェクトを採用し、macOSなどのクロスプラットフォームに対応させると発表。来年(2020)年01月15日の正式リリースを目指していますが、 Chrome Unboxedによると、ロシアのiphones.ruというブログが、「AppleがデフォルトブラウザであるSafariをWebKitベースからEdgeと同じChromiumベースに移行する」という記事を公開し、その記事が欧米のメディアに飛び火して、WebKitチームがこれは完全なフェイ
Intro IETF が策定する HTTP の仕様が更新されようとしている。 ここには、 Cache の仕様も含まれており、そのなかで must-understand という Cache-Control のディレクティブが追加されている。 このディレクティブが追加された経緯と仕様について解説する。 Cache と Status Code RFC7234 では、新しいステータスコードを策定する際に、キャッシュに関して以下のように書かれている。 The definition of a new status code ought to specify whether or not it is cacheable. Note that all status codes can be cached if the response they occur in has explicit freshnes
CSSのテキストマスクで映えるメインビジュアルを実現
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示
CORB から ORB へ | blog.jxck.io
Intro CORB (Cross Origin Read Blocking) が Fetch の仕様から消え、後継の ORB (Opaque Response Blocking) が策定作業中である。 ここでどのような変更が起こっているのかを調査し、記録する。 CORB CORB はもともと、 Spectre に端を発する Site Isolation の走りとして始まった。 Spectre のサイドチャネル対策のためには、本来アクセスできてはならない Cross Origin のリソースが、同一のプロセスに展開されることを防ぐ必要がある。 CORS で行われるなら良いが、 no-cors な読み込みが可能なリソースでは、その読み込みが安全かどうかは別途確認する必要がある。 そこで、リソースをメモリ上に展開するためだけの、攻撃用途くらいしかあり得ないようなリソース読み込みをブロックする対
こんにちは、はやたろうです。 本日は、CSSやHTMLの知識にうとい人でも簡単にできる吹き出し自動生成ツールサイトのご紹介です。 こんな方にオススメ ・サイトに吹き出しを入れたい ・位置を自分で調整したい ・色やフォントを自由に変えたい ・直観的に操作したい それでは早速いってみよー！ 1.吹き出し・タグ自動生成ツール 2.操作方法 まずは吹き出しの「スタイル」 次に「吹き出しの設定」 最後は「トークン設定」 注意点 3.オススメ サイト 4.あとがき 1.吹き出し・タグ自動生成ツール 「吹き出し | タグ自動作成ツール」サイトのご紹介 早速紹介するサイトがこちら。 吹き出し・タグ自動生成ツールサイト 出典：吹き出し | タグ自動作成ツール 吹き出しのデザインや文字を任意で定め、生成されたタグをコピーしてブログに貼り付けるだけで、簡単に吹き出しができてしまうという便利ツールです。 それでは
オープンメタバースの必要性｜前半
はじめにどの大手テック企業のCEOが注目しているトピックがある、それは「メタバース」。次世代インターネットと言われているメタバースに関わることは、未来の経済に参加することに等しい。特に最近では、フォートナイトがゲーム領域以外でも人気になり、Robloxの上場によって「メタバース」という単語が飛び交うようになった。下記のグラフは、Pulsarによる2020年1月〜11月までに「メタバース」についての言及数。 引用：Packy McCormick最初に訂正しておくと、バズワードになり始めている「メタバース」は使われ方が間違っているケースが多くなっている。説明しづらいものだからこそ、フワッと使われるケースが多く、「〇〇がメタバースだ」みたいな発言も多く見る。実際はほとんどの「メタバース」の単語が使われる時はメタバースではなく、ビデオゲームやオンラインの体験の話にしか過ぎない。それはFaceboo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近は意図的にGitHub Copilotを無効にすることがある
CSSとSVGでチェックボックスを装飾しよう！
UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
AppleがiOSからPWAのサポートを削除したことを認める、デジタル市場法への対応で影響はEU圏のユーザーに限定
【Bun】BunとNode.jsの違いのメモ - UGA Boxxx
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
はてなブログで使える、箇条書き部分をオシャレにデザインしてみよう！ | ワーキングノート
第1章 Puppeteerの魅力は何か ～ヘッドレスChromeを自由自在に操る | gihyo.jp
バクラク申請・経費精算 モバイルアプリ開発の裏側 - LayerX エンジニアブログ
#1 2020年8月にツイートしたHTML/CSS/JavaScriptのTipsまとめ
Chrome is deploying HTTP/3 and IETF QUIC
Inspecting Web Views in macOS
Nostrのrabble氏の投稿の日本語訳
<button>とかのスタイルを消して書き直すときに考えることの備忘録
2021年に伸びるCSSプロパティ3選 | フロントエンドBlog | ミツエーリンクス
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
CNAME Cloaking and Bounce Tracking Defense
iOS版YouTubeアプリのOSSライセンスページが魔窟 - ナカザンドットネット
Cache-Control: must-understand ディレクティブとは何か | blog.jxck.io
【初心者ブロガー】吹き出しタグ自動生成サイトのご紹介♪ - 花太郎BLOG