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: サブドメイ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
WebサイトがどのCMSと技術で作られているかが分かるGoogleChrome拡張機能「Wappalyzer」 – ワードプレステーマTCD
「このサイトはどのCMSや技術でつくられているのか」 それが一目で分かるGoogleChromeエクステンション「Wappalyzer」をご紹介します。「Wappalyzer」を使えば、ブラウザにこのように表示されます。 「Wappalyzer」をインストールする GoogleChromeブラウザを開き、下記ページから「Chromeに追加」をクリックします。Firefoxをお使いの方は右側のボタンからどうぞ。 Chrome版 Firefox版 以上でインストール完了し、ブラウザの右上に表示されるようになります。WordPressを使っているサイトであれば、ブラウザからひと目で分かるようになりますね。また、アイコンをクリックすると、インストールされているWordPressのPHPバージョンや使っているアクセス解析ツールなども見れるようになります。 WordPressを使っているかどうかもひと
クローズド 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要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
先だって「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日にメールで申請をしまし
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にアカウントを作成して
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
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
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
なぜディズニーはミッキーの著作権を延長しなかったのか…知的財産に厳しい態度を取るのをやめたワケ ｢著作権の過度な主張｣は業界を衰退させると気付いた
2024年から、初代ミッキーマウスの著作権が切れ、誰でも自由に利用できるようになった。なぜディズニーは延長を申請しなかったのか。コロンビア大学のマイケル・ヘラー教授とカリフォルニア大学のジェームズ・ザルツマン教授は「高級ブランドがいかがわしい偽物を一掃しないのと同じだ。ディズニーは法的保護がさほど重要ではないことに気付いたのだろう」という――。 ※本稿は、マイケル・ヘラー、ジェームズ・ザルツマン『Mine！ 私たちを支配する「所有」のルール』（早川書房）の一部を再編集したものです。 誰のものでもないウィキペディア 所有者のいないオンライン・リソースでおそらく最も知られているのは、Wikipedia（ウィキペディア）だろう。ウィキペディアはボランティアの書き手と寄付によって成り立っている。ウィキペディアは百科事典という分野を駆逐してしまうほどの成功を収めた。いまどきの学生は百科事典がどんなも
メールソフト「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
Intel MacからM1 Macの移行を想定。実際にはIntel MacからM1 Pro Macへ移行をしたのでその忘備録です。出来る限りというのは手動作業が存在するため。移行セットアップを利用せずにクリーンインストールを行う。 なぜクリーンインストールなのか CPUアーキテクチャがarm64に変わるからです。TimeMachineやThunderboltケーブル経由での移行を行ったとしてもM1に最適化されたアプリケーションやミドルウェアではなく、Intel環境下のファイルとarmアプリケーションが入り混じってグチャグチャになった環境を直すよりもクリーンインストールで綺麗な状態でセットアップをしたほうが利点が大きいと考えている。 逆に言えばアーキテクチャが同じであれば良いので、見ている方がいるかわからないがM1 MacからM1 Pro・Maxへの移行はThunderboltケーブル経由で
「ブラウザ拡張」が1位！ 「まだ誰もブックマークしていないページ」のブックマーク方法ランキング - はてなブックマーク開発ブログ
はてなブックマークは、毎日さまざまなページがブックマークされ、ブックマークの集まった記事が新着エントリーや人気エントリーなどに掲載されることで、今注目の話題が分かる仕組みになっています。 結果的に 1000 users 集めるような記事も、最初はまだ誰もブックマークしていなかった 0 users の記事です。そんな、まだ誰もブックマークしていないページを最初にブックマークする 1 user 目の皆さんは、どのような方法でブックマークしているのでしょうか？ そこで今回は、まだ誰もブックマークしていないページのブックマーク方法のデータを集計*1した「ブックマーク方法ランキング」を出してみました。（集計期間：2021年4月〜2021年12月） ブックマーク方法ランキング 順位 ブックマーク方法 割合 1位 ブラウザ拡張（Chrome/Firefox） 38.2% 2位 ブックマーク追加フォーム/
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
朗報！ 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()疑似クラスとは、指定した要素がある場合にのみ
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
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などの違い、従来の手法のデメリットをデモを交え
「雑に立てられるissue」で疲弊しないためにOSS開発者ができること - 2021-12-04 - ククログ
要約：OSS開発プロジェクト運営者の側でとれる対策はいくつかあるよ。issueは基準を設けてどんどん閉じてしまおう。GitHubならActionsで自動化も簡単だよ。自動テストを整備するように、必要なコストだと思って割り切るといいよ。 結城です。 GitHub Actionsに関することならなんでもありらしいアドベントカレンダーとのことでしたので、ほんのちょっとかすっているだけではありますが、4日目にエントリーさせて頂きます。 「軽率に寄せられる報告や要望がOSS開発者を疲弊させる」という問題について語るOSS開発者は少なくないです。私の観測範囲内では最近も、イシュートラッカーにissueを立てようとすること自体に待ったをかける記事1や、「要望には初手で『なぜ自分で実装しない？』と訊ね、次に『継続的にメンテナンスしてくれるの？』と訊ねるドライな対応がおすすめ」という趣旨に受け取れる発言など
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発 WebブラウザにはJavaScriptを実行するためのJavaScriptエンジンが搭載されています。それはChromeであれば「V8」、Firefoxであれば「SpiderMonkey」と呼ばれ、それぞれのWebブラウザベンダがECMAScriptの標準に準拠したうえで独自に実装しています。 そしてJavaScriptは以前から正規表現の機能を備えているため、正規表現を解釈し展開するための正規表現エンジンもそれぞれのWebブラウザベンダが実装を行っていました。 その正規表現エンジンについてMozillaは今後、V8の正規表現エンジンのコードをそのままFirefoxのSpiderMonkeyに取り込むようにすると表明しました。 Mozillaはこれを実現するため、V8用の正規表
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
無料でMP3変換・動画変換・動画から音声抽出・動画と音声を結合・複数動画を1本に結合・最大音量調節・動画の解像度変更・動画回転・音ずれ修正・動画カットができるFirefoxアドオン「Media Converter and Muxer - Audio Tools」
動画や音声ファイルを無料のツールだけで編集しようとすると、目的に応じてたくさんのツールをインストールしなければならない場合がありますが、Firefoxの拡張機能「Media Converter and Muxer - Audio Tools」をインストールすれば動画や音声ファイルのフォーマットや、解像度の変更、音ずれ修正、動画ファイルのカット編集など10種類の機能を無料で使うことができます。 Media Converter and Muxer - Audio Tools – ? Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/media-conversion-tool/ 目次： ◆インストール手順 ◆MP3 Converter：MP3変換 ◆Custom Converter：動画の変換 ◆Audio Ex
はじめに 対象とする読者について 本記事の対象者としては以下のような人を想定しています。 C#でこれからWin32APIを使ってみたい。 C言語のことがあまりよく分かっていない。 今までは適当に使っていたので一度きちんと理解したい。 自分が同じような状況であったため、一から調べて整理してみました。自分が理解した順番や内容で記載することで、また、具体的な使用例によってできることの広さや動作を感じ取ってもらうことで、理解の助けになればと思っています。 但し、分かっている人からすると冗長な説明になっている部分や好ましくない内容、正確性に欠ける内容などもあると思います。実際に使用する場合はその点にご留意願います。 Win32APIについて Windows API - Wikipedia Microsoft Windowsのシステムコール用APIのこと。特に32ビットプロセッサで動作するWindow
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
Internet Explorer 11サポート終了ならびにMicrosoft Edge更新についてのお知らせ - はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき、ありがとうございます。 このたび2020年8月13日を持ちまして、Internet Explorer 11（以下IE11）のサポートを終了しました。対象のブラウザをお使いの場合は、今後は正常に動作しない可能性があります。お手数ですがはてなブックマークの推奨ブラウザからのご利用を検討くださいますようお願いいたします。 サポート終了対象のブラウザをご利用の皆様へ IE11ならびに旧バージョンのMicrosoft Edge（以下Edgeレガシ）をご利用の皆様には、恐れ入りますが新しいMicrosoft EdgeやGoogle Chrome、Mozilla Firefoxなど、はてなブックマークの推奨ブラウザでのご利用をお願いいたします。新しいMicrosoft Edgeは、以下の公式サイトからダウンロードすることができます。 www.microsoft.
ここからできる → https://donate.mozilla.org/ja/ Chromium 系使っててもいいから Mozilla に寄付をするといいと思う。Web Developer なら MDN にもお世話になっているはずで、もちろん Firefox の存在は Web の健全性に多大な寄与をしている。Web 標準とかを追っている人なら分かるはず。 とにかく寄付をしよう。月額 230 円からできる。俺は月 560 円
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ
ほぼVPNなしにテレワークに移行した話｜南治 一徳
ついにビサイドでも先週の政府の緊急事態宣言を受け、原則テレワークに移行しました。もちろん、その前の段階、東京都からの自粛要請がでた段階から徐々に移行していたのですが、先週から原則として全員がテレワークに移行したことになります。 テレワーク時にVPNなどを活用している会社さんも多いと思いますが、ビサイドでは一部のどうしても社内からのアクセスが必要となる業務を除き、ほぼVPNが必要ない状態でテレワークに移行しています。というのもこの数年間、ビサイドでは社内サーバへの依存を下げ、積極的に外部サービスの利用を進めてきました。というのは、ゲーム制作以外の管理コストを削減し、社内スタッフのリソースをゲーム制作により集中するためです。そのおかげで、今回のテレワークへの技術面での移行はかなりスムーズに進めることができたと言えると思います。どちらかというと準備で必要だったのは、どういうルールでテレワークを行
とほほのRust入門 - とほほのWWW入門
「ラスト」と読みます。 Mozilla に従事するグレイドン・ホアレが個人的に開発していましたが、のちに Mozilla の公式プロジェクトとなりました。 2021年には、AWS, Google, Huawei, Microsoft, Mozilla がメンバーとなる Rust Foundation に権利が委譲されました。 Rust は「錆(さび)」を意味します。開発チームに自転車乗りが多く、ロゴも自転車のさび付きチェーリングを元にしています。 C言語やC++に変わる言語として開発されました。 Stack Overflow で2016～2019年の間「最も愛されているプログラミング言語」として1位を獲得しています。 Firefox の Servo(HTMLレンダリングエンジン)も Rust で開発されています。 if ... や while ... なども式として評価することができます。
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など
WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマット「WebAssembly」は、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザでサポートされ、2019年12月にはW3Cの勧告にも到達しました。 参考：WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ このWebAssemblyをWebブラウザだけでなく、デスクトップPCやサーバ、IoTデバイスなどのあらゆる環境でセキュアに実行できるように、エコシステムの実現を推進しているのが、Mozilla
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
Netscapeと米司法省は、Microsoftの「Windows」と「Internet Explorer（IE）」が独占禁止法に違反していると訴えた裁判では勝利したが、Netscapeは結局救われなかった。かつては最も人気のあるブラウザーであったNetscapeの運命は尽きた。同社の初期の従業員だったJamie Zawinski氏は当時、コードの公開に関して、「瀕死のプロジェクトに『オープンソース』という魔法の粉をかけたところで、魔法のようにうまくいくようなことはない」と語っている。 それでもNetscapeのコードが公開されたことは事実であり、Mozilla Projectは、そのソースコードを元に、インターネットのさまざまなアプリケーションに利用できる汎用クライアントを作った。また2002年には、そのクライアントが純粋なウェブブラウザーである「Firefox」に生まれ変わった。この年
CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019年、2020年のJavaScript - 別にしんどくないブログ
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
noteのIPアドレス流出騒動で流出したIPが本当は何なのかよく分からない件｜sheva｜note
UAスタイルシートとリセットCSSとは - 2023 - kojika17
IEからEdgeへの転送を開始 | Web品質Blog | ミツエーリンクス
2022年のCSS | gihyo.jp
JavaScriptの上限・限界値 - Qiita
オープンソースのメーラー「Thunderbird」の開発チームが「バグを減らす開発手法」を解説
Intel MacからM1 (Pro・Max) Macへ(出来る限り)滑らかに開発環境を移行する
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
C# Win32API完全入門 - Qiita
Webエンジニアはみんな Mozilla に寄付をしよう
CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
「Firefox」興亡史：一時代を築いたブラウザーの歴史と衰退
CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説