ご無沙汰しております。11月6日に、CNAMEレコードを使って付与された1st-party cookieの規制機能を搭載したiOS14.2がリリースされましたので、その内容をまとめます。いつものことですがマーケティングよりブラウザの細かい話です。正式発表前なので誤りの可能性がありますがご了承またはご指摘ください。 規制の仕組みまず規制されるのは、AppleのWebKitエンジニアJohn Wilanderさん（ITPの発明家）が「Third-party CNAME cloaking」として定義するものです。 Third-party CNAME cloaking means a first-party subdomain resolves to a third-party domain which does not match the resolution for the top frame
2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 デスクトップChrome限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコンピ
Webアプリケーションの堅牢化に欠かせない知識を凝縮！ セキュリティ学習のスタートに最適の一冊！ 本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」というイメージの強い領域でした。しかし、アプリケーションの安全性を高めるためには、フロントエンドエンジニアにも、セキュリティの基礎知識や具体的な対策の実践が求められます。 本書では、Webセキュリティの必須知識である「HTTP」「オリジン」などの基礎トピックや、「XSS」「CSRF」といったフロントエンドを狙ったサイバー攻撃の仕組みを、サンプルアプリケーションを舞台にしたハンズオンで学びます。 もちろん、攻撃からユーザーを守る防御の手法もしっかりおさえます。個々の攻撃手法に応じた対策のほか、
実は大量にあるWindowsのファイルパス記述方法まとめ
macOSやLinuxではファイルパスの記述方法が非常にシンプルですが、Windowsには幾通りものファイルパス記述方法が存在しています。そんなWindowsのファイルパスについて調査した結果を、ファイル管理アプリ「Fileside」を開発するErik Jälevik氏がまとめています。 The weird world of Windows file paths | Fileside https://www.fileside.app/blog/2023-03-17_windows-file-paths/ Windows システムのファイル パス形式 | Microsoft Learn https://learn.microsoft.com/ja-jp/dotnet/standard/io/file-path-formats ファイルパスには、各ファイルまでの道筋をすべて記述する「絶対パス」
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
前回記事（nano系の広告ブロックは速やかに削除しましょう | 280blocker）の続報です。 前回記事では、Chrome機能拡張のNano DefenderとNano Adblockerがトルコの謎の組織に売却された事を書きました。 その後、2020/10/15にChrome機能拡張のNano Defenderが更新され、githubで公開されているソースコードには存在しない、非公開のコードが挿入されました。 gorhill(uBlock Originの作者）が検証を行った結果、その挙動はマルウエアであるとの結論になりました。 Chrome機能拡張のNano Defenderは、まず外部サイトから検索条件を取得してその条件に合ったブラウザのデータを、外部サイトへ送信するようです。 ユーザーのデータを外部に送信するマルウエア（スパイウエア）と考えられます。 もしも、いまだに使用している
「ブックマーク専用の新しいChrome・Firefoxブラウザ拡張機能」告知にいただいたフィードバックにつきまして - はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チームのid:yone-yamaです。 先日は新しいブラウザ拡張機能のリリース告知にたくさんのコメントをお寄せいただき、ありがとうございました。 bookmark.hatenastaff.com また、仕様変更によりご不便をおかけしていることをお詫びいたします。 いただいたご意見をしっかりと受け止め、今後の開発に生かしていきたいと思います。 今後は告知記事などにお寄せいただいたご意見に対しての回答やご説明を、このブログで発信していく予定です。 今回はその第1弾として、ブラウザ拡張機能の告知に関するご意見をもとに、前回ご説明しきれなかった経緯や今後の対応についてご説明いたします。 この記事でお伝えしたいこと 拡張機能における「コメント簡易閲覧機能」は、各ブラウザのWebストアのポリシー準拠・相対的な機能の
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
【Power Automateの新しいRPA機能】Power Automate Desktopで出来ること（全33機能の紹介） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに Microsoft Igniteの発表でPower Automateの「per user with attended RPA plan」で「Power Automate Desktop」が使用できるようになりました。2020年9月26日時点でPreview機能です。 この記事ではPower Automate Desktopの自動化機能（アクションと言います）を紹介します。 この紹介を通じPower Automate Desktopがどのような自動化を行えるかの参考になれば幸いです。 2020年9月26日時点のアクションとなり
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
Introducing WebContainers: Run Node.js natively in your browser
Introducing WebContainers: Run Node.js natively in your browser Update: Since the publication of this blog post in May 2021, WebContainers became stable and available on Firefox. Most importantly, we released the WebContainers API for you all to enjoy! You can even self-host the API with StackBlitz Enterprise. Get in touch to learn more. A few years ago we realized that the web was heading towards
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート
Modern web apps without JavaScript bundling or transpiling
August 12, 2021 Modern web apps without JavaScript bundling or transpiling I didn't much care for vanilla JavaScript prior to ES6. Through all of the 2000s, I chased different approaches to avoid writing too much of it. First there was RJS (Ruby-to-JavaScript). Then there was CoffeeScript. Both transpiling approaches that turned more enjoyable-to-write source code into the kind of JavaScript that
先日、徳丸本（正式名称: 安全なWebアプリケーションの作り方 第2版）の実習環境 Docker 対応バージョンが公開されました。 こちら、M1/M2 Mac にも対応したものになっています。 リリース内容を確認してみましたが、解説されている内容は既存の部分からの変更点のみとなっています。 せっかくなので、1から新規で M1 Mac 環境に構築した方法の記録です。 前提条件 初心者向けではありません。 ある程度の知識がある方向けに、簡略化して記載しています。 初心者向けに記事を寄稿しました。 初心者の方は、リンク先の記事をご確認ください。 ウェブ・セキュリティ学習のため徳丸本を読んでみた 第3回 M1/M2 Mac に対応！Docker 環境で実習環境を構築しよう https://www.school.ctc-g.co.jp/columns/mikumo/mikumo03.html Hom
PCとWebカメラだけでVTuberになれる無料システム AIを使った骨格推定で身体や指の動きをリアルタイム反映
3Dキャラクターに体の動きを付けるには専用のトラッキングデバイスを使うことが多いが、PCとWebカメラだけでキャラクターのモーションを付けられるWebサービスが登場した。ユーザーローカルが1月28日に発表した「Webcam VTuber」だ。無償で提供しており、Google ChromeかFirefoxが使えるWindows／macOS（Apple M1以降を推奨）で利用可能。 Webカメラが撮影した映像を基に、顔の動きやまばたき、腕／指の動きをAIアルゴリズムが3Dキャラクターにリアルタイム反映。VRM形式のデータであれば、オリジナルの3Dキャラクターを動かすこともできる。表情変更に対応しており、笑顔、困り顔、怒り顔などを、画面上の表情アイコンもしくは1から5までのショートカットキーで切り替えられる。 Webブラウザベースのため、ソフトウェアのインストールは不要。AIによる顔のトラッキン
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:
クローズド NW だから塩漬け Flash で vSphere Web Client を使おうと思ったらそうはいかない - vHoge
時が流れるのは早く、既に 2020 年も 10 月半ば。 あと 2 ヶ月で 2020 年も終わり、来てしまうのです… そう、Flash の EOL が。 普通にネット見る分にはさすがに Flash コンテンツを見ることはほぼ無くなり大した影響はなさそうですが、VMware 界隈だと vSphere Web Client (Flash版)がメインの GUI である vSphere 6.0 が一応 EOL 前ということで、お世話になる人はまだいそう。 気になる文言 Adobe のページより www.adobe.com 4.2020年末を過ぎても、アドビから旧バージョンのAdobe Flash Playerをダウンロードできますか？ いいえ。アドビは自社サイトからFlash Playerのダウンロードページを削除します。また、Flashベースのコンテンツは、サポート終了日以降、Adobe Fla
ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-
👻 GhostText — Use your text editor in the browser
• Use your text editor in the browser Whenever you’re writing more than a little snippet of code anywhere on the web, activate GhostText to open your preferred text editor and enjoy your own development environment. Installation GhostText is a browser extension that connects to your editor via its own extension. Install both extensions and, if necessary, start the GhostText server in the editor’s
詳細については省きますが先日noteに投稿された記事のページソースコードから「記事投稿者のIPアドレス」が確認できてしまう不具合が発覚しました。 以下公式発表 https://note.jp/n/n3e6451c9b147 私の方でウェブ魚拓などのサービスを利用していくつかの記事のソースコードを確認したところ2020年2月頃には既にこの状態になっていたようです。 ここからが本題なのですが今回noteが発表した漏洩したとされる 「記事投稿者のIPアドレス」 について、note公式からの発表では説明しきれていない状況が確認されています。 まずこちらをご覧ください。 私がIPアドレス流出騒動を確認した日に記録した私自身の記事のIPアドレスです。 1. 2019/11/12投稿記事 （記事の内容はちょっとアレな感じですが） もちろん現在不具合は修正され確認不可能になっていますが、2つとも8/14の
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
GoogleやBingの検索結果にChatGPTを表示させる拡張機能「ChatGPT for Search Engines」
OpenAIのChatGPTは高度な自然言語処理モデルを利用した対話型AIで、文章を入力するとまるで人間が書いたような自然な文章を返してくれます。これまでの検索エンジンでは検索クエリに複数の単語を入力する必要がありましたが、このChatGPTを応用すれば、調べたいことを直接文章で入力することでより適切な検索結果を示す次世代の検索エンジンが可能になると期待されています。そんなChatGPTの回答を実際にGoogleやBingなどの検索結果に表示させる拡張機能「ChatGPT for Search Engines」が、Chrome・Firefox・Edge向けにリリースされています。 ChatGPT for Search Engines https://chatonai.org/ ChatGPT for Search Enginesを利用するには、あらかじめChatGPTにアカウントを作成して
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
Chrome の JavaScript はとても高速なことでも有名ですが、その実行エンジンは V8 と呼ばれます。V8 自体は独立したモジュールであり、Node.js 等にも使われております。 V8 が JavaScript を高速に実行する技術の一つが JIT (Just In Time) コンパイルです（一般的に JIT と呼ばれます）。これは、そのまま実行すると遅い JavaScript を実行中にリアルタイムに直接マシンコードに変換し（これが Just In Time と呼ばれる所以です）、途中からそのコードに入れ替えて実行することで高速化を達成しています。特に何度も実行される関数で効力を発揮します。 JIT という名前は聞いたことがあろうとも、実際に JIT がどのようなコードを実行しているのかを確認する機会は滅多にないでしょう。この記事では、実際に V8 の JIT の出力を確
JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。 テストに使ったスクリプト類は https://github.com/minoki/javascript-limits に置いてあります。 文字列の長さ まずは文字列の長さです。 規格には The String type is the set of all ordered sequences of zero or more 16-bit
先だって「IE」で一部のサイトを開くと「Edge」に転送--脱IEの一環で - ZDNet Japanなどで報道されていたとおり、一部のサイトに関してInternet Explorer（以下「IE」）でアクセスされた際、Microsoft Edge（以下「Edge」）で開くよう転送する処理がスタートしていますが、その対象サイトに当サイト（mitsue.co.jpドメイン）が追加されました。 IEとEdgeの両方がインストールされた環境において、上述の転送が有効であることを既に確認しています。これは当社からの申請に基づくもので、必要な手続きの詳細はMoving users to Microsoft Edge from Internet Explorer - Microsoft Edge Development | Microsoft Docsにある通りです。11月23日にメールで申請をしまし
なぜディズニーはミッキーの著作権を延長しなかったのか…知的財産に厳しい態度を取るのをやめたワケ ｢著作権の過度な主張｣は業界を衰退させると気付いた
2024年から、初代ミッキーマウスの著作権が切れ、誰でも自由に利用できるようになった。なぜディズニーは延長を申請しなかったのか。コロンビア大学のマイケル・ヘラー教授とカリフォルニア大学のジェームズ・ザルツマン教授は「高級ブランドがいかがわしい偽物を一掃しないのと同じだ。ディズニーは法的保護がさほど重要ではないことに気付いたのだろう」という――。 ※本稿は、マイケル・ヘラー、ジェームズ・ザルツマン『Mine！ 私たちを支配する「所有」のルール』（早川書房）の一部を再編集したものです。 誰のものでもないウィキペディア 所有者のいないオンライン・リソースでおそらく最も知られているのは、Wikipedia（ウィキペディア）だろう。ウィキペディアはボランティアの書き手と寄付によって成り立っている。ウィキペディアは百科事典という分野を駆逐してしまうほどの成功を収めた。いまどきの学生は百科事典がどんなも
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
RegEx Crossword
It's a crossword puzzle where you need to fill in the hexes with character sequences, so that they match the regular expressions listed around the edges. The individual clues will turn bold purplebold green when satisfied, orangered when not, and underlined when active. Note that the regex must be a full match, and empty cells are treated as spaces. Double click a rule to edit it. When finished, p
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
「ブラウザ拡張」が1位！ 「まだ誰もブックマークしていないページ」のブックマーク方法ランキング - はてなブックマーク開発ブログ
はてなブックマークは、毎日さまざまなページがブックマークされ、ブックマークの集まった記事が新着エントリーや人気エントリーなどに掲載されることで、今注目の話題が分かる仕組みになっています。 結果的に 1000 users 集めるような記事も、最初はまだ誰もブックマークしていなかった 0 users の記事です。そんな、まだ誰もブックマークしていないページを最初にブックマークする 1 user 目の皆さんは、どのような方法でブックマークしているのでしょうか？ そこで今回は、まだ誰もブックマークしていないページのブックマーク方法のデータを集計*1した「ブックマーク方法ランキング」を出してみました。（集計期間：2021年4月〜2021年12月） ブックマーク方法ランキング 順位 ブックマーク方法 割合 1位 ブラウザ拡張（Chrome/Firefox） 38.2% 2位 ブックマーク追加フォーム/
読者の自宅に使っていない古いPCはないだろうか。「Windows 11」をサポートしない「Windows 10」搭載PCを使用しているが、新しいマシンを購入することに興味はない、という人もいるかもしれない。そういう人はどうすればいいのだろうか。 軽量の「Linux」ディストリビューションを導入するといいだろう。このタイプのOSは通常、システム要件が非常に低く、古いマシンを新品のように生まれ変わらせることができる。軽量をうたうディストリビューションはいくつかあるが、本記事では、1GHz以下のCPU、2GB以下のRAM、10GB以下のストレージがシステム要件となっているものだけを紹介する。これらのディストリビューションはすべて、機能を犠牲にすることなく高速性を実現している。 それでは、どのディストリビューションを選択すればいいのだろうか。本記事では、適切なディストリビューションの選定に役立つ情
Intel MacからM1 Macの移行を想定。実際にはIntel MacからM1 Pro Macへ移行をしたのでその忘備録です。出来る限りというのは手動作業が存在するため。移行セットアップを利用せずにクリーンインストールを行う。 なぜクリーンインストールなのか CPUアーキテクチャがarm64に変わるからです。TimeMachineやThunderboltケーブル経由での移行を行ったとしてもM1に最適化されたアプリケーションやミドルウェアではなく、Intel環境下のファイルとarmアプリケーションが入り混じってグチャグチャになった環境を直すよりもクリーンインストールで綺麗な状態でセットアップをしたほうが利点が大きいと考えている。 逆に言えばアーキテクチャが同じであれば良いので、見ている方がいるかわからないがM1 MacからM1 Pro・Maxへの移行はThunderboltケーブル経由で
メールソフト「Thunderbird」では、ソフトウェアの品質向上のために開発チーム内で日常的に自動テストが実行されています。その理由や手法についてThunderbirdの開発チームが解説しています。 Automated Testing: How We Catch Thunderbird Bugs Before You Do https://blog.thunderbird.net/2024/04/automated-testing-how-we-catch-thunderbird-bugs-before-you-do/ ◆自動テストの目的とメリット Thunderbird開発プロジェクトではコードの変更によるバグの発生を最小限に抑えるために「自動テスト」が重視されています。開発チームによると、、Thunderbirdのコードや機能に変更が加えられるたびに、Windows、macOS、Li
朗報！ 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のsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ITPのCNAMEクッキー規制について｜AD EBiS マーテック研究会
WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 | 翔泳社
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
Nano Defenderがマルウェアになっちゃいました | 280blocker
素のJavaScriptだけでアニメーションを実装するWeb Animations API
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
徳丸本の Docker 実習環境を M1/M2 Mac で１から構築した - Qiita
aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
noteのIPアドレス流出騒動で流出したIPが本当は何なのかよく分からない件｜sheva｜note
UAスタイルシートとリセットCSSとは - 2023 - kojika17
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
JavaScript 実行エンジン V8 の JIT 出力コードを読んでみよう
JavaScriptの上限・限界値 - Qiita
IEからEdgeへの転送を開始 | Web品質Blog | ミツエーリンクス
2022年のCSS | gihyo.jp
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
古くなったPCでも快適に動作する軽量「Linux」ディストリビューション5選
Intel MacからM1 (Pro・Max) Macへ(出来る限り)滑らかに開発環境を移行する
オープンソースのメーラー「Thunderbird」の開発チームが「バグを減らす開発手法」を解説
Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA