Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
Windows 11ではスタートメニューの検索バーで、Windows 10ではスタートアイコン横の検索ボックスか検索アイコンで、PC内を検索して一致する結果を呼び出すことができます。しかしこの時、同時に入力したキーワードでBingのWeb検索候補も表示されるため、検索結果が表示されるまで数秒待つ必要があります。テクノロジー系メディアのTom's Hardwareの編集長であるアブラム・ピルチ氏が、WindowsのWeb検索機能を無効にするための操作について解説しています。 How to Disable Windows Web Search and Speed Up Your PC | Tom's Hardware https://www.tomshardware.com/how-to/disable-windows-web-search Windows 11でWindowsキーを押して「g
Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body> </html> Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記
#はじめに いろんな局面で使われるようになってきたMicrosoft Teamsについて、単純な利用面ではなく、よく聞かれること、利用上注意したいこと、あのことはどんなだったっけ？的なこと等をメモしてみました。情報は2020/04/18時点のものです。 また、使い方等については、多分に個人的な一意見を記したものです。記載以外の他のやり方や意見が多数あるものと考えています。 2020/4/22にOffice 365はMicrosoft 365に改称される。以下の記載では、M365と省略することもあり。 内容を解説するYouTube動画があります! 本、Qiitaの内容が長くなったので、Teamsのレコーデイングで解説を録画し、YouTubeに載せました~ 適時ご参照を。 分割動画のリストはこちら PCのTeamsアプリで、あちこち画面を行き来する 左上の[<] [>]を、ブラウザの戻る、進む
MacOS ユーザが WSL では無い Windows のコンソール環境を整える - 2nd life (移転しました)
先日、メインの開発環境を MacOS から Windows 10 Professional へと移しました。理由としては主に2点で、現在仕事を自宅の固定席で行っており PC を持ち運びする必要がなくなったため Mac より高速で安価な Windows デスクトップ機を使いたいこと(Ryzen 9使いたい!)、WSL2 が正式版となり使ってみた感じ問題なく WSL2 で仕事の開発ができそうだったことが挙げられます。 WSL2 はふつうに Linux なので問題なく開発環境の構築が行なえ、Windows からも VSCode Remote のおかげでで違和感なくWSL2上のコードを編集、実行ができ快適な開発が行えています。(なお、WSL2 についての記事は山程溢れているので、ここでは殆ど触れません。) しかしながら、WSL2 ではないふつうの Windows 上で開発する機会が出てきたので、M
KNNポール神田です。 まさにChatGPTやPerplexity AIとの出会いで、インターネット黎明期のような感動の日々である。 『英語は10000時間でモノになる』の著者であり、デジタルハリウッド大学の教授である橋本大也氏のFaceBookで気になる『プロンプト』が紹介されていた。 出典：デジタルハリウッド大学 無料で学べるすごい英会話AIのつくりかた １ Voice Control for ChatGPT（ https://chrome.google.com/webstore/detail/voice-control-for-chatgpt/eollffkcakegifhacjnlnegohfdlidhn）の拡張をChromeブラウザーにインストールする。これでChatGPTと音声で対話することができる。GPTがしゃべりだす。 ２ ChatGPTに下記のプロンプトを入れてから英語で
BGPを通してインターネットが何なのか理解しよう リンク ・Macのオススメな初期設定15選(メールアプリ設定編) ・Macのオススメな初期設定30選 (システム環境設定編) ・Macのオススメな初期設定20選(Finder設定編) ・Chromeのオススメな初期設定10選(Mac) ・Macのオススメなアプリ40選 インターネットってそもそも何？ インターネットの仕組みを知らない人に インターネットってどんな仕組みなの？って言われたらなんて答えますか？ この答えをここで示したいなと思って書きました。 本記事では以下のような 「インターネットは世界中の誰とでも繋がることができるんだよ」 みたいな話はしません。 なるべく専門用語を少なくして、インターネットの仕組みを理解することを目的とします。 書籍では氷山の一角しか書かれないため非常に全体像が分かりにくくなっています。 そして専門用語が多す
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
私のセキュリティ情報収集法を整理してみた（2022年版） - Fox on Security
新年あけましておめでとうございます。毎年年頭に更新している「私の情報収集法」を今年も公開します。何かの参考になれば幸いです。 インプットで参照している情報源（海外） 海外からの攻撃が主流となる中、海外情報をいち早く把握する事の重要性が増しています。去年に引き続き、今年も絶対外したくない海外サイトからご紹介します。 サイト キタきつね寸評 1位 morningstar SECURITY 不動の1位です。ジャンルの広さ、情報の更新頻度、関連ソースの網羅性など、英語系のセキュリティニュースとしては群を抜いた、最良のまとめサイトです。 私は「Daily Security News（最も人気のあるセキュリティニュース）」（一番上）と「Security Blogs（セキュリティブログ）」（下から3つ目）を主にチェックしていますが、人によって興味が違うかと思いますので、「Malware/APT」「Exp
無料でAmazon.co.jpの価格推移を表示＆値下がり通知も可能なブラウザ拡張機能「Amazon Price Tracker」を使ってみた
2020年の春にはNintendo Switchの需要が高まり、定価の約1.5倍で転売されたり、2020年11月に登場したPlayStation 5が高値で転売されたりと、人気の品物が通常より高い価格で転売される事例が多発してします。そこで「欲しい商品を適正な価格で入手したい！」と考え、Amazon.co.jpで販売されている商品の価格推移を表示し、値下がり通知もしてくれるブラウザ向け拡張機能「Amazon Price Tracker」を使ってみました。 Keepa - Amazon Price Tracker https://keepa.com/ Amazon Price Tracker - Keepa.com – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/keepa/ Amazon Price
はてなブックマークのすべてのページで HTTPS が使われるようになりました - はてなブックマーク開発ブログ
本日、2019年5月28日から、はてなブックマークのすべてのページの通信に HTTPS が使われるようになりましたのでお知らせいたします。 これは「常時SSL化 (AOSSL: Always On SSL) 」と呼ばれるもので、SSL接続による通信の暗号化を、明確に秘匿すべき情報があるログインページや決済関係のページだけでなく、サイト全体に適用するものです。常時SSL化の実施により、はてなブックマークをこれまでより安全にご利用いただけるようになりました。 以下、本件について想定される質問にQ&A形式でお答えします。 Q. これまでブックマークコメントについたはてなスターはどうなりますか？ A. ブックマークコメントなどにつくはてなスターは、HTTP および HTTPS の URLについたものを合算して表示します。 また、各記事の人気コメントのスコアリングも、合算したものが正しく扱われます。
はてなブックマークで便利なWebサービスが話題になっていました。 https://anond.hatelabo.jp/20200525021541 anond.hatelabo.jp 記事のトラックバックやブックマークのコメントが参考になりました。 https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200525021541 b.hatena.ne.jp 知らないツールやWebサービスもあったので、良さそうなのをメモ。 情報収集 ウェブ魚拓 RSSリーダー hckr news ノイズレスサーチ 情報整理 start.me 検索デスク Myfaves IFTTT RAINDROP.io Zotero tagtory 情報交換 IRCCloud Trickle Discord タスク管理 Zenkit Habitify 作業の自動化 Zapie
こんにちは、One Capital の三好（@saas_penguin）です。 Product hunt で話題になったため、すでに知っている方も多いかと思いますが、今回は超高速ブラウザ「Sidekick」について紹介します。ずっと使いたいと思っていたものの、なかなかM1 Macで安定稼働してくれず・・・ようやく安定してきたので、使ってみた感想や気になるポイントを書いていきます。 昨今のブラウザ事情について 本題へ移る前にブラウザを取り巻く環境について簡単に触れておきます。デスクトップブラウザのシェア推移を見ると、10年前は Internet Explorer（以下、IE）が約50％、Firefox が30％のシェアを握るという2強状態でした。しかし、2008年に誕生した Google Chrome が Android 端末の普及とともにシェアを急拡大させます。2011年には Firefo
「ChatGPTって何？」と聞かれたら、取りあえずこの資料を渡せば良い──2022年11月末に登場してすぐに世間を驚かせたAI「ChatGPT」。自民党もAIには注目しており、「AIの進化と実装に関するプロジェクトチーム」を開催しているのだが、そこで東京大学の松尾豊教授が提出した資料が「分かりやすい」と話題だ。 資料が提出されたのは2月17日開催の第2回会議。「AIの進化と日本の戦略」というタイトルで、大規模言語モデルの仕組みやChatGPT、今後の日本の戦略について説明するものだ。同資料は塩崎彰久衆議院議員が投稿したnote記事からダウンロードできる。 ChatGPTについては、その学習方法から、高度な会話を実現できた理由、ChatGPTでできること、利用場面や受け取られ方まで網羅的にまとめられている。 例えば、高度な会話後実現できた理由のパートでは、従来のモデルには「生成分が人間の好み
FLoCとはなにか - ぼちぼち日記
1. はじめに Google がChrome/89よりトライアルを開始しているFLoC (Federated Learning of Cohorts)技術に対して、現在多くの批判が集まっています。 批判の内容は様々な観点からのものが多いですが、以前より Privacy Sandbox に対して否定的な見解を示してきたEFFの批判「Google Is Testing Its Controversial New Ad Targeting Tech in Millions of Browsers. Here’s What We Know.」が一番まとまっているものだと思います。 これまで Privacy Sandbox 技術に関わってきた身としては、各種提案の中でFLoCは特にユーザへの注意が最も必要なものだと思っていました。しかし、これまでのド直球なGoogleの進め方によって、FLoCのトラ
1. Chrome でEV証明書の組織名表示がなくなる ついにGoogleからChromeのURLバーからEV表示を削除する正式なアナウンスが出ました。 Upcoming Change to Chrome's Identity Indicators EV UI Moving to Page Info 現在(2019年8月) StableのChrome76では、以下の様にURLバー左側にEV証明書を利用していることを示す「組織名+国名」表示が付いています。 Chrome76のEV表示 2019年9月10日Stableリリース予定のChrome77からはEV表示がURLバーから削除され、鍵アイコンをクリックして表示されるPage Infoに「組織名＋国名」が表示されるようになります。 Googleのアナウンスでは、 "on certain websites" と書いてあることから一気にではなく
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
世の中には無料で良質な macOS のアプリケーションがたくさんある。中でも自分が便利に使わせてもらっているものを紹介していく。 Velja — Powerful browser pickerMeet であれば Chrome、Twitter であれば Firefox、Notion であれば Notion.app のように任意の URL を任意のブラウザで開くといったコントロールを実現する macOS のアプリケーション。
なぜChromeはURLを殺そうとするのか？ (Chrome Dev Summit 2019) - ぼちぼち日記
今年もChrome開発者の集まりChrome Dev Summit 2019 (CDS) がサンフランシスコで開催されました。 今回、私が Chrome Customer Advisory Board (CAB) に選出していただいたこともあり、CDSに初めて参加しました。 これは、CDS終了後のCAB meetingで頂いたChrome Dinosaurフィギュアです。ちなみにゲームはできません。 タイトルの「なぜChromeはURLを殺そうとするのか？」は、2日目Chrome Leadsのパネルセッションで司会のGooglerが、Chrome UX担当のProduct Managerに対して一番最初に投げかけた問いです。 PMは直ちに「そんなことはしない」と即答しました。しかしChromeは、URLの表示領域からHTTPSの緑色表示の廃止・EV表示場所の移動・wwwサブドメイン表示の削
Sourcetrailは、開発者が他人の書いたソースコードを理解し、生産的にコーディングを行えるよう支援する。開発者は既存のソースコードを理解することに多大な時間を費やすが、一般的なコードエディタは、こういった作業にはほとんど役に立たない。 Sourcetrailの主要開発者であるEberhard Gräther氏は、「Google Chrome」のグラフィックスチームにインターンシップとして参加した2012年時点の経験を次のように語っている。 「割り当てられた単純に見えるタスクに着手し、具体的なコードの改善に取り組み始めるとすぐに、Chromiumの巨大なアーキテクチャを理解する機会が全くないことに気付いた。ドキュメントはあまり役に立たず、開発チームのメンバーは非常に友好的だったが、コードベースについて質問するインターンに邪魔されることを好まないことも分かった。そこで、ソースコードを読ん
PDF編集ツールは、アドビシステムズが開発した文書フォーマットPDF（ポータブルドキュメントフォーマット）を編集できるツールだ。PDF形式ファイルは、テキストファイルやMicrosoft Wordなどの文書ファイルとは異なり、異なる環境においても同じように文書を閲覧したり印刷したりすることを目的としている。そのため、いったん作成されたPDFファイルの再編集はできないことが多い。 PDF編集ツールはPDFファイルのテキストや（画像や図版などの）オブジェクトの編集を可能にするものだ。複数のPDFファイルを1つに結合したり、逆に1つのPDFファイルを複数に分割したりできる。また、不特定多数が閲覧できないようにパスワードロックを設定したり、文書の信頼性確保のための電子署名を追加したりできる。 では、ユーザー満足度の高いPDF編集ツールはいったいどれだろうか？ IT製品レビューサイト「ITrevie
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
何がすごいってM1チップとも呼ばれているApple SiliconのCPU。今までのIntel CPUモデルに比べて圧倒的なハイパフォーマンス。そしてバッテリーの持ち。キッティングはもちろんゼロタッチデプロイ。サイボウズの社長も大絶賛しています。 高速M1搭載 Macbook Pro が早くもサイボウズ情シス公認の標準端末に。これでZoomつないでパワポでプレゼンしながらChromeのタブを開きまくってもサクサク動作。サイボウズに勤めててよかったよ！ しかも情シスの手を煩わすことなく完全リモートセットアップが可能に。採用が増えても出社不要で安心！ https://t.co/Dlg1qQ4kLS — 青野慶久/aono@cybozu (@aono) March 5, 2021 今年の秋にハイスペックの新モデル M1 Pro / M1 Max MacBook Proも発売されましたが、一般的な
ここのところちょっと時間に余裕があり、暇を見つけてはQiitaの質問に答えるという取り組みをやっています。以前StackOverflowでも同様の取り組みをちょっとだけしてたことがあります。 9日間で35個の質問に回答してみて、正直に思うのは「質問の質が悪すぎるなー」ということです。ただ、どう質が悪いのか上手く言語化できず悶々としていました。 そんな折、今朝googleのおススメ記事に飛び込んできたQuaraのこちらの回答を読んで、「これこれ！こういうことよ！」という気持ちになったため、これから質問する人に向けてこの内容を少し嚙み砕いてまとめてみます。 ベテランはどうデバッグをしてるのか （自分をベテランと言っていいのかはさておき）日頃からコードを書いていると、デバッグには、その時使っている言語やフレームワークによらず、ある程度の行動パターンがあることに気付いてきます。 デバッグには難しい
パスワードレスな認証方式である「パスキー」が急速に普及しています。OS、ブラウザ、パスワード管理ツール、サービス提供者のどれもが整いつつあり、ついに本当にパスワードが必要ない世界がやってきたことを感じます。この記事では、本腰を入れてパスキーを使い始めて快適になるまでの様子をまとめます。技術的な厳密さ・網羅性には踏み込まず、いちユーザーとしての入門記事という位置付けです。 パスキーとは パスキー - Wikipedia 認証、セキュリティに関しては門外漢なので、Wikipediaのリンクを置いておきます。私よりはWikipediaのほうが信用に足るでしょう。 そこから辿れるホワイトペーパー：マルチデバイス対応FIDO認証資格情報を読むと、多少ストーリーもわかります。FIDO2というデバイスに格納された秘密鍵に依存したパスワードレス認証の仕様に、暗号鍵（と訳されていますが秘密鍵のことで良い……
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
スプレッドシートをWeb開発の万能ツールに変えるおすすめサービス厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。 スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください！ ■スプレッドシートのデータを即座にAPIで提供する！ 【 SwiftSheet 】 SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。 CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。 たとえば、お店のリストをスプレッドシートで管理しているとします。 こ
以下はVitor Paladini ( Twitter / GitHub / dev.to ) によるVS Code shortcuts that I would teach myself if I had a time machine with limited fuelの日本語訳です。 VS Code shortcuts that I would teach myself if I had a time machine with limited fuel 「やあ俺だ。黙って聞いてくれ。時間がないんだ。」 「待って待って、お前誰だ。どうやって部屋に入ってきた。あとどうして俺そっくりなんだ。」 「俺は未来のお前だ。ここまで来たのは、特別にVSCodeのショートカットを教えるためだ。さあいくぞ」 「正気か？ロト6の番号でも株式情報でもなく、わざわざVSCodeのショートカットを教えにやってきた
こんにちは。ソウゾウの Software Engineer (CTO) の @suguru です。連載：「メルカリShops」プレオープンまでの開発の裏側の1日目を担当させていただきます。 7月末にメルカリShopsという新しいサービスが公開されました。メルカリShops は、2021年1月にメルカリのグループ会社として設立したソウゾウが新たに立ち上げたサービスです。 この記事では、メルカリShops を作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 monorepo まず最初にプロジェクトをスタートしたときに、サービスのリポジトリを作るのですが、迷わず monorepo による構成を選択しました。monorepo は、システムを構成する複数のコンポーネントの独立性を保ちつつ、全ての構成を1つのリポジトリで管理する手法です。今
ブックマーク専用の新しいChrome・Firefoxブラウザ拡張機能を公開しました。 - はてなブックマーク開発ブログ
2022/3/16 10:30 追記 拡張機能について追加のお知らせを公開しました。よろしければ当記事とあわせてご覧ください。 bookmark.hatenastaff.com はてなブックマークの新しいChrome拡張、ならびにFirefoxアドオンを公開しました。Webの気になった記事をブラウザから素早くブックマークできる公式の拡張機能です。 下記のリンクよりブラウザにインストールして、ぜひご利用くださいませ。 インストールはこちらから Chromeウェブストア chrome.google.com はてなブックマークの既存のChrome拡張とは異なるバージョンです。別の新たな拡張機能として追加されます。 Firefoxアドオンページ addons.mozilla.org 昨年の8月より旧来のFirefoxアドオンをインストールできない状況が続いたことにより、お待ちいただいた皆様にはご不
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
パスワードはおしまい！ 認証はパスキーでやろう
はじめに パスワードは古来より認証に良く使われる方法ですが、その運用の難しさからセキュリティの懸念とその対策としての運用の複雑さ（複雑で長い文字列、90日でパスワード変更など）が要求される大きく問題をもった仕組みです。 その根本的な解決策としてFIDO Allianceを中心に推進されている 「パスワードレス」 が注目されています。これはPINや生体認証とデバイス認証を使ったMFAからなっており、フィッシングやパスワード流出に強い上に、ユーザも複雑なパスワードを覚えなくて良い、という大きなメリットがあります。最近はこの流れでPassKeyというものが登場し、Apple/MS/Googleのプラットフォーマが対応したことで、本格運用に乗せれるフェーズになってきました。というわけで以下に解説動画を作ったのですが、動画中で時間の都合で触れきれなかったところや、JavaScriptによる実装のサン
Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう モバイル向けアプリケーションのフレームワーク・Flutterを使って簡単なアプリケーションを作成する基本的な開発について、FlutterのGoogle Developers Expertである上田哲広さんに解説していただきました。 こんにちは。上田哲広（@najeira）です。FlutterのGoogle Developers Expertとして活動しています。 Flutterは、Googleが中心となってGitHub上でオープンソースなプロジェクトとして開発されている、モバイル向けアプリケーションのフレームワークです。AndroidとiOSのアプリを単一のコードベースで開発できます。 GitHub - flutter/flutter: Flutter makes it easy and
Second Breakfastより。☹️ Googleがオペレーティング・システムを作っているという噂があった時、私は「やっぱり」と思いました。 その後、当時のサンダー・ピチャイPMがChrome OSを発表するのを見て、心臓は高鳴りました。それは完璧でした。 Gmailでメールを受け取り、Docsでドキュメントを書き、Pandoraを聴いて、TheFacebookで写真を見る。なぜ、Windows Vistaの全てが必要なのでしょうか? 2010年には、2020年までにChrome OSが世界で最も普及しているデスクトップOSになると予測しました。速くて、軽くて、そしてタダ(0ドル)でした。 「すべてのWindowsとOS Xのアプリはブラウザ用に再構築されるだろう!」と思いました。Outlook → Gmail。Excel → Sheets。Finder → Dropbox。Phot
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
0から始めるNode.jsパフォーマンスチューニング
近年の Node.js は API のサーバとしてはもちろん、Nuxt.js や Next.js といった SSR や BFF などフロントエンドのためのバックエンド言語としての人気が高まっています。 フロントエンドエンジニアがコンテキストスイッチ少なくバックエンドの整備ができることは非常に大きな利点です。 ですが、フロントエンド（ブラウザ側）とバックエンド（サーバ側）ではパフォーマンスチューニングで見るべき点が大きく違います。 しかし Node.js アプリケーションのパフォーマンスイシューの見つけ方などがまとまっている資料は少ないです。 そこで、本記事ではフロントエンドエンジニアが Node.js でパフォーマンスイシューを見つけ、改善するため自分が普段パフォーマンスチューニングを依頼されているときにみている基礎的なポイトをまとめていきます。 1. 計測ステップlink Node.js
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
Windows 11と10で動作を遅くしていると指摘されるスタートメニューのWeb検索を無効化する方法は？
とほほのChrome拡張機能開発入門 - とほほのWWW入門
Microsoft Teamsに関するあれこれ（2020/04） - Qiita
ChatGPTで無料で学べる『英会話AI』の作り方（神田敏晶） - エキスパート - Yahoo!ニュース
インターネットの本質から理解できるプロトコル「BGP」についてまとめた！ - Qiita
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
便利なツールやWebサービス - JavaScript勉強会
生産性が爆上がりするブラウザ：Sidekick｜One Capital｜note
AIの権威による「ChatGPT」の説明が分かりやすい！ 東大松尾教授の資料が話題
Google Chrome EV表示の終焉 - ぼちぼち日記
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
無料で便利な macOS のアプリケーション｜1000ch
C++やPython向けのコード可視化ツール「Sourcetrail」がオープンソースに
満足度の高いPDF編集ツール 本家のAcrobatを抑えて1位になった無料ツールは【2022年9月版】
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
サイボウズの情シスが（独断と偏見で）選ぶオススメのIT機材、備品 10選 2021年版｜あおてつ
Qiitaの質問に答えまくって気付いた初心者に足りないバグ解決スキル - Qiita
パスキーが快適すぎる - yigarashiのブログ
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
過去の自分に教えなければならないVSCodeのショートカット - Qiita
メルカリShops の技術スタックと、その選定理由 | メルカリエンジニアリング
KAJI | 梶谷健人 on Twitter: "GlaspっていうChrome拡張機能使うと、YouTube動画からボタン一発でChatGPTにサマリー文章を作ってもらえてとても便利。 DeepLと組み合わせて海外のカンファレンス動画やレクチャー動画も高速で学習できる。 https://t.co/FHSapesC0K"
ヤフー全社横断「Webパフォーマンス改善」の取り組み (Core Web Vitalsスコアの向上)
Googleは、10年のリードを吹き飛ばした