なんとなくGitHubにアクセスしたところ、HTTPレスポンスヘッダに謎の文字列が含まれていることに気が付きました。 permissions-policy: interest-cohort=() はい、これはFLoCを拒否するという主張です。 FLoCのRFCがGitHub上に存在するという現実がとても味わい深いものがありますね。 Permissions-Policy: interest-cohort=() Header added to all pages sites 非常に簡単にですが、GitHubブログで触れられていました。 github.io以下の全てのページに、Permissions-Policy: interest-cohort=()のHTTPレスポンスヘッダが出力されるようになりました。 カスタムドメインを使っているサイトは、この影響を受けません。 GitHubはMicros

概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ

JavaScriptでIdentifier '<変数名>' has already been declared が発生するJavaScript 現象 シンプルなHTML+JavaScriptの構成にて以下のエラーが発生。 Uncaught SyntaxError: Identifier '<変数名>' has already been declared エラー内容的には、「変数がすでに宣言されているよ！」らしいが、2重で宣言してしまっているような個所は見当たらない。 しかもこのエラーは常に先頭行にある変数に対してのみ発生していて、 先頭行の変数を削除すると、その次にある変数で同じエラーが発生する。 原因 HTMLでJavaScriptファイルを2回読み込んでしまっていた。 <!-- 省略 --> </div> </div> <script src="script.js"></script>

はじめに こんにちは、普段は業務で求人系サービスの開発や社内向けツールの開発を行なっている@taku-0728です。 今回はJavaScriptの数値チェックについてまとめました。 調べると多くの記事がヒットしますが、true/falseを数値として扱ったりする記事を見つけたり色々なメソッドを見つけたりして混乱したので自分用メモとしてまとめます。 忙しい人向け 細かいことはいいから結論が知りたい忙しい人用に数値チェックについてまとめます。 値(val) isNaN(val) Number .isNaN(val) isFinite(val) Number .isFinite(val) Number .isInteger(val)

この記事はPWAアドベントカレンダーの5日目の記事です Webアプリにおけるプッシュ通知 PWAを代表する機能としてプッシュ通知があげられることがよくあると思います（iPhone/Safariだとまだ使えないんですがね） Webアプリにおけるプッシュ通知はPushAPIとNotificationAPIというの2つの仕組みからなっています NotificationAPIはユーザに対して通知を送ることができるAPIです 一連の流れ Webアプリにおけるプッシュ通知送信までの一連の流れは、PushAPIがサーバからの通知を受け取り、NotificationAPIを呼び出してユーザに通知を送ります それぞれの使い方を整理しようと思いましたが思いの外大変だったので今回はNotificationAPIを紹介します NotificationAPIの使い方 NotificationAPIはユーザに通知を送

JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、こちらの記事を見かけたので備忘録として記録する。 「スタイルルールの追加」の概念で制御する 厳密に言うと疑似要素はJSで直接制御できない。 疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。 ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。 JSで .class::before {width:100px} みたいな記述をドキュメントに追加してしまうという考え方になる。 スタイルルールの挿入 //ドキュメントスタイルの取得 var sheets = document.styleSheets var sheet = sheets[sheets.length - 1]; //スタイルルールの追加 sheet.insertRule( '.class:

状況・経緯 Node(express)を使用してAPIを作成。そのAPIを別で立てたローカルサーバーでアクセスしたら以下のようなエラーが出た。 Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. http://127.0.0.1:8

ここのところちょっと時間に余裕があり、暇を見つけてはQiitaの質問に答えるという取り組みをやっています。以前StackOverflowでも同様の取り組みをちょっとだけしてたことがあります。 9日間で35個の質問に回答してみて、正直に思うのは「質問の質が悪すぎるなー」ということです。ただ、どう質が悪いのか上手く言語化できず悶々としていました。 そんな折、今朝googleのおススメ記事に飛び込んできたQuaraのこちらの回答を読んで、「これこれ！こういうことよ！」という気持ちになったため、これから質問する人に向けてこの内容を少し嚙み砕いてまとめてみます。 ベテランはどうデバッグをしてるのか （自分をベテランと言っていいのかはさておき）日頃からコードを書いていると、デバッグには、その時使っている言語やフレームワークによらず、ある程度の行動パターンがあることに気付いてきます。 デバッグには難しい

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco

はじめに 2年半前の私は、IT系の会社に勤めている30代後半の平凡なサラリーマンでした。 その時点では、社外での発表経験なし、社外での勉強会の参加経験なし、技術記事の投稿経験なしでした。 そんな私が発信活動を始めたことで人生が変わりました。 今は凄く楽しいエンジニアライフになり、以下のような事が起きました。 複数のITエンジニア向けコミュニティに所属して楽しく交流 「Serverless LT初心者向け」というコミュニティを立ち上げて運営 Developers Summit 2020 KANSAI でベストスピーカー賞1位を受賞 ITエンジニア向けの月刊誌「Software Design」で連載記事を執筆 すべては発信活動を始めた事がきっかけでした。 発信活動を始めると素敵な事がいっぱいあると知ってもらう事で、発信活動を始めるきっかけになれば幸いです。 (長いので要点を知りたい人は太字のみ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「document.write()は使わない方がいい」は、言われ続けて久しいと思いますが、じゃあどうすればいいか考えてみました。 document.write() は使わない方がいい理由 MDN document.write()説明ページにはどんなことが書かれているかというと、 deferred または asynchronous のスクリプト内では無視 →非同期の使い勝手が悪いですね Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない →そもそも期待通りに処理が動かない可能性がある など動作が特殊で、期待通り動かないことがあるということ強調されています。 さらにW3Cはdocument.writeのHTML5での使用を非推奨としていて、 HTMLパーサーに影響を与えるよーとか、実行しても無視される

var script = document.createElement('script'); script.src = 'http://example.com/hoge.js'; document.body.appendChild(script); 上記のように、src属性を指定してscriptタグをDOMに追加すれば、jsが実行される。 しかし、この方法でDOMに追加した場合、src属性に書かれているURLに非同期的に通信が発生し、読み込みが完了したものから実行されるため、実行の順番を確保しないといけない場合は、ただ追加すればよいわけではない。

はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS

要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま

Original article:https://dev.to/dotnetsafer/rip-copy-and-paste-from-stackoverflow-trojan-source-solution-4p8f その昔コピペできない文章というものがありました。 実際は単にフォントを変えているだけというものですが、人間の目に見える文字と実際の文字が異なることを利用した攻撃の一種と見ることもできます。 さて、最近になって似たような攻撃に関する論文が公開されました。 人間には見えない文字を織り交ぜることによって、一見問題ないコードが実は脆弱になってしまうというものです。 ただ論文は堅苦しいうえに長くて読むのがつらいので、具体的に何がどうなのかよくわかりません。 平易に解説している記事があったので紹介してみます。 以下はDotnetsafer( Twitter / GitHub / Web

長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする

User JavaScript and CSS (Chrome 拡張機能) を使って Redmine をカスタマイズしてみたCSSJavaScriptchrome-extension こちらの記事は free_dev_com Advent Calendar 2019 - Adventar 7 日目の記事です。 User JavaScript and CSS とは Chrome の拡張機能として提供されている，既存のウェブサイトに独自の Javascript や CSS を埋め込むライブラリです． User JavaScript and CSS - Chrome ウェブストア これを利用して，ダークモードがないウェブサイトにダークモードを実装してみたり， Yahoo! のサイトに自分の好きなキャラクターのイラストを表示させたり，いろいろなことができます． 今回は，社内のタスク管理に使用してい

おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？　最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。