Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 なお、この記事では各項目の解説はあまり入れていません。2024年7月10日のClassmethod Odysseyで少し詳しく話そうと思っているので、よかったら聞きにきてください。オンラインなので無料です。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみC
Intro Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。 Ladybird https://ladybird.org/ これがいかに価値のある取り組みなのか、 Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。 ブラウザエンジンとは ブラウザは、「ブラウザ UI」と「ブラウザエンジン」と、大きく二つの構成要素に分けて考えることができる。 ブラウザエンジンとは、いわゆる Web 標準の技術を片っ端から実装した、ブラウザの土台となるものだ。 ビルドすれば、入力した URL からネットワーク経由でリソースを取得し、パースしてレンダリングして表示できる。そのための IETF RFC や WHATWG HTML や ECMAScript が実装されている、標準技術の結集だ。 その上に、例えばタブ
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
エッジは誰のもの？ - ゆーすけべー日記
CDNの文脈でいうエッジコンピューティングはフロントエンドのものとされることが多い気がするけど、そうじゃない。フロントエンドの技術を使ったバックエンドである。 フロントエンド？ ユーザーに近いところで実行されるという意味ではフロントエンドかもしれない。あと、VercelのNext.jsのように、フロントエンドフレームワークのファンクションがエッジで動くからフロントエンドでしょというのはある。そしてエッジのファンクションはたいていフロントエンドで使われているJavaScriptもしくはTypeScriptで書く。そうするとツールチェーンも、例えば「Vite」と聞いてそれが何であるか？を答えられる人はフロントエンドやってる人の方が多いだろう。 2つのユースケース エッジには2つのユースケースがある。 CDNの機能を拡張する。オリジンありき。 サーバーレスコンピュート。オリジンそのものになる。
はじめに 個人開発で使っていたのですが Gopher の集いにて Vercel で Go の開発ができることを話したら意外と知られていなかったのでご紹介します。 （貧乏エンジニアリングだと言って似たような記事を以前お見かけしていた場合、それはきっと私の残像が書いたものです。） Vercel とは いわゆる PaaS ( Platform as a Service ) です。 Vercel 社が Next.js を開発していることもあり、静的サイトや SPA ホスティングを簡単にできるサービスの印象が強いですが、 Functions や Postgres などを備えているのでサーバーの構築もできちゃいます。 Next.js のイメージから TypeScript と思われますが Go もデプロイできます。 準備 & version Vercel アカウントを作成します。 無料で使いたいので H
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
Canonicalが「Everything LTS」発表。あらゆるオープンソースを用いたDockerイメージに12年間の長期サポートを提供
Canonicalが「Everything LTS」発表。あらゆるオープンソースを用いたDockerイメージに12年間の長期サポートを提供 Canonicalは、たとえUbuntuのディストリビューションに含まれていないオープンソースであっても、あらゆるオープンソースを用いたDockerイメージに12年間セキュリティパッチなどを提供する長期サポート「Everything LTS」を発表しました。 重要な脆弱性に対しては24時間以内にセキュリティパッチを提供するとしています。 Cannonical offers a 12 year LTS for any open source Docker image! We will build distroless Docker images to customer specifications that include upstream compon
ChatGPT Artifactsができた？ GPT-4oでもClaudeみたいな楽しいプロンプト開発ができるのだ（CloseBox） | テクノエッジ TechnoEdge
この問題を解決するにはどうしたら良いか？ ChatGPTにもGeminiにも毎月お布施をしているし、彼らも同レベルの機能を持っているのだから、Claudeの休眠期間中はそっちを使えばいいのではないか。 そう考えていたところ、良い助け舟が。 ChatGPTにArtifacts機能を追加しますよ、というソフトの開発者からメンションが飛んできました。 このソフトはGitHubで公開されているので、普段使っているM1 iMacにインストールしてみました。git cloneしてNode.jsをインストールしてという、自分にとってはなかなかハードルの高いインストール方法でしたがなんとか動くようになりました。 使うにはOpenAIのAPI Keyが必要です。つまりChatGPT-Artifactsという名前ではありますが、実際はAPIで呼び出しているわけです。ChatGPTっぽいプロンプト操作でGPT-
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
sumirenです。 ヘンリーではオブザーバビリティに投資をし、開発生産性と品質を高める取り組みをしています。 この記事では、ヘンリーが考えるオブザーバビリティ成熟度を解説し、最後にヘンリーの現状と今後について解説します。 オブザーバビリティ成熟度 全体像 筆者は、オブザーバビリティの成熟度について、以下のように考えています。 これはあくまで一般的な概念ではなく、筆者が説明のために考えた便宜上のモデルになります。 なにもない インフラメトリック アプリケーションログ 非構造化ログ 構造化ログ リクエストに紐づくログ アプリケーションメトリック（ログベース） トレース トレース単体 システム固有の共通的な計装 ドメイン/機能カットの計装 トレースの分析と集計 トレースの相関分析 オブザーバビリティ成熟度が低い状態〜中程度の状態 1. なにもない〜 2. インフラメトリック なにもない状態は、
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
Next.jsを使い続けたい好きなトコロ
ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま
Rust+WebAssemblyを使ったWebアプリでの高速画像処理入門 - アダコテック技術ブログ
要約 背景 WebAssembly (WASM) とは？ Rust言語とは？ サンプルアプリ概要 LBP特徴量計算をRustで実装 フロントエンド環境構築 バックエンド環境構築 スキーマ定義 Rust実装 WASMバイナリの生成 TypeScript実装 実行結果 まとめ メンバー募集しています！ おまけ こんにちは！美味しいタコスを食べることを専門としているプロダクト開発部エンジニアの井上です。 要約 WebAssembly（WASM）、Rustは近年注目されている技術であり、これを利用することでWebアプリケーション上で高速な画像処理を実現できるよ。 我々も画像前処理を行っていたWindowsデスクトップアプリケーションを、WebAssembly+Rustを使用してWebアプリケーションに置き換えたよ。 Rust言語で実装した画像処理をWASMにコンパイル、そしてWebアプリケーション
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
Object.groupBy で作られるオブジェクトの prototype は null - Object.create(null)
おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジェクトを作るには Object.create を使う (あるいは new 演算子や __proto__ を使っても良い). const x = {}; x.foo = "foo"; const y = Object.create(x); y.bar = "bar"; const z = Object.create(y); z.baz = "baz"; console.log(z.foo); // => "foo" conso
こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
Google CloudからOracle Cloud（OCI）に移行したらコストが半分以下になった話 - Qiita
みなさん、マルチクラウドやってますか！僕は案件ではAWS、Azure、個人や自社ではGoogle Cloudが多かったのですが、このたびOracle Cloud（OCI）にメインの運営サービスを移管しまして、パフォーマンスよくコストも半分以下になったので記事にまとめました。ただし、万人にお勧めというわけでもないのでそのあたりは記事をご覧ください。 円安しんどい なぜ我々の収入はドル建てじゃないのに支出はドル建てなのか、月980円じゃなく9.8ドルにしてたら今頃は売り上げも1.5倍くらいになってたのに1。そんな気持ちを抱えながら増え続けるクラウドコストに苦しんでいました。また、サービスがおかげさまで成長し、トラフィックの課金もお小遣いと呼べないレベルになってきました。 安いクラウドサービスを探し続け、CDN、VPS、もちろんN大クラウドもチェックし「どうせPHP/MySQLなんだからエックス
スクラムチームをLeSSっぽく2分割したらリリース頻度が2倍になった話 - NTT Communications Engineers' Blog
時系列データ分析ツール「Node-AI」を開発するスクラムチームは、LeSS（Large-Scale Scrum）を参考にした開発プロセスを採用しました。 本記事では、その背景や数か月試した結果について紹介します！ 目次 目次 はじめに Node-AIについて フロントエンドのリプレイスを終えて チーム分割に対する勘所 コンポーネントチームとフィーチャーチーム 実際の運用 チームへの愛着 2チーム体制を続けてきて おわりに はじめに はじめまして、イノベーションセンター Node-AIチームの中野、半澤です。 （中野）Node-AIチームでは2024年4月からスクラムマスターとして活動しております。 過去には研究者やデータサイエンティスト、ソフトウェアエンジニアなど幅広くジョブチェンジして今に至ります。 中野 将尚 | LinkedIn （半澤）Node-AIチームでは開発者としてインフラ
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
オープンソースツール「node-ip」の軽度な脆弱性が「緊急対応を要する重大な脆弱性」として報告され連絡が殺到し開発者がリポジトリを一時アーカイブ
Node.js向けに開発されているIPアドレス管理パッケージ「node-ip」のGitHubリポジトリが一時的にアーカイブ状態になりました。node-ipの開発者であるFedor Indutny氏は、アーカイブの理由について「誇張された脆弱(ぜいじゃく)性報告によって問い合わせが多発したため」と説明しています。 Dev rejects CVE severity, makes his GitHub repo read-only https://www.bleepingcomputer.com/news/security/dev-rejects-cve-severity-makes-his-github-repo-read-only/ node-ipはNode.js向けのIPアドレス管理パッケージです。node-ipのパッケージ情報を確認すると、1週間に1700万回以上ダウンロードされる人気パ
【読売新聞】 出版大手「ＫＡＤＯＫＡＷＡ」グループが身代金要求型ウイルス「ランサムウェア」による攻撃を受けた問題で、ハッカー集団が闇サイト上で、新たに同グループの内部情報とみられるデータを流出させたことがわかった。ＫＡＤＯＫＡＷＡ側
1日午後3時40分ごろ、JR札幌駅で新千歳空港行き快速エアポート（6両編成）が停車中、ホームと反対側のドアが一時開くトラブルがあった。乗客約400人に転落やけがをした人はいなかった。JR北海道は車両に何らかの不具合が発生したとみて原因を調べている。同社が2日発表した。 同社によると、この列車の車掌が札幌駅でホーム側のドアを開いて発車準備中、本来鳴らないはずのドアが開く際のチャイムの音に気づき、すぐにホームと反対側のドアを確認したが、異常は見つからなかった。その後、ホームに設置したカメラの映像を確認したところ、少なくとも先頭車両でホームと反対側のドアが19秒間開いていたことが判明した。 JRは車両の点検をするため、新札幌駅でこの列車の乗客を全て降ろし、この列車を含めて同じ形式の車両の運行をとりやめた。この列車以外の車両には異常がないことを確認し、運転を再開した。この影響で、1日～2日に快速エ
What's coming next for ESLint - ESLint - Pluggable JavaScript Linter
When we released ESLint v9.0.0 in April, it was the first major release in 30 months and formally introduced the new configuration system. ESLint v9.0.0 also made some rule API changes to prepare the core for what’s coming next. After the release, we spent a lot of time creating compatibility utilities, a configuration migration tool, and a rule API transform utility to help the ecosystem move to
一定の規模以上のWebアプリケーションにおいて、JavaScriptを開発時のままの形で配信することは滅多にありません。webpackやRollupなどのバンドラを使用して、ファイルをまとめた上で配信することが一般的です。 ESModulesが普及しバンドル工程なしでも主要ブラウザがJavaScriptのモジュールを直接解釈できるようにはなりましたが、我々は依然としてバンドラを使用してWebアプリケーションを開発しています。一体なぜでしょうか？ いくつか理由はありますが、その内の1つに importのコストが高い ことがあげられます。 これはv8チームが公開しているベンチマーク測定を見ても明らかです。モジュールの読み込みに時間がかかると当然ページの読み込み速度が遅くなり、ユーザー体験が悪化します。 出典： ES Module loading importのコストを削減するためにエコシステム
once.com Writebookについて Writebookは、https://37signals.com/books のようなオンラインブックを構築できるツールです。 これは37signalsのONCEというモダンなパッケージインストール型ソフトウェアを再考したものの一部で、37signalsのポッドキャストでたびたびコンセプトが言及されています*1。ブログ世代としてはMovable Typeを彷彿させます。 Writebookを無料にしている理由は、これをゲートウェイとしてCampfireにも流れていくことを期待しているようです。 セットアップ https://once.com/writebook にアクセスし、登録を行うと、ライセンスキーとインストールコマンドが書かれたメールが送られてきます。 セットアップは、手順に従ってダウンロードしたonceコマンドを使用して行います。このo
正確には「関数型ドメインモデリング ドメイン駆動設計とF#でソフトウェアの複雑さに立ち向かおう の見本誌をいただいたので読んだ」ということになる。 訳者の猪俣さまより見本誌を提供いただきました。ありがとうございます。（発売少し前にいただいたのだけど結局これを書いてるのが発売後になっていて申し訳ない） 関数型ドメインモデリング ドメイン駆動設計とF#でソフトウェアの複雑さに立ち向かおう 作者:Scott WlaschinKADOKAWAAmazon 以下に書評というか感想を書きます。 おまえは誰 まず、どういう立場の人間が読んだのかというのを明らかにしておく。 株式会社はてなというところでWebアプリケーションを書いている。ここ数年はGo + GraphQL + Next.jsみたいな感じのサービスを扱っている。 関数型言語については数年間Scalaを書いていたのでふんわりと認識がある、くら
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
愛媛県今治市の縫製企業で働いていたミャンマー国籍の元技能実習生6人が、実習内容と違う仕事をさせられ、在留資格を無断で変えられたとして、支援する労働組合などが松山市で2日、記者会見を開いた。 中小製造業などの労組でつくる産業別組織JAMなどによると、元実習生は2022年9月に来日した20代の女性6人。実習内容は「子供服製造」だったが、実際は市の特産品で高品質で知られる「今治タオル」の製造に従事させられた。 23年11月、勤務先の監理団体や企業から「あと2年働くには手続きが必要」「このままだと辞めてもらうしかない」などと言われ、在留資格が「特定活動」に変更された。JAMによると、企業側は変更について説明したと主張しているが、資格の内容や理由について本人たちは理解が十分でなかったという。 その後、無断で変更されたとして6人は退職。最後の1カ月分の賃金や残業代が支払われていないことからJAMに相談
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'
急速に進化する「フロントエンド領域」に、エンジニアはどう対応すべきか？『Webフロントエンド版DX Criteria』100項目で目指すもの｜Tech Team Journal
2024年4月24日、一般社団法人 日本CTO協会（以下、日本CTO協会）は「Webフロントエンド版 DX Criteria」を策定した。本ガイドラインは、日本CTO協会が監修・編纂する「DX Criteria」のWebフロントエンド領域特化版だ。近年、Webフロントエンドの技術環境は日々変化しており、組織としての変革やエンジニア個人の技術のキャッチアップなどの対応が困難になりつつあるのが現状だ。そのような中、フロントエンド領域では組織としてどのように課題を棚卸し、組織ひいては企業としてのケイパビリティを高めていくべきだろうか。本ガイドラインを策定した同協会DX Criteria策定ワーキンググループの佐藤歩氏と古川陽介氏に聞いた。 佐藤歩氏（画像左） KINTO テクノロジーズ株式会社 IT/IS部 古川陽介氏（画像右） 株式会社ニジボックス デベロップメント室室長 「フロントエンド領域
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
Google Drive+GAS+スプシによるミニマルなデータパイプライン【東京都知事候補 #安野たかひろ #AIあんの @takahiroanno 】｜banbiossa
AIあんのについてこんにちは、チームあんの技術班の志水です。 安野チームではみなさんのマニフェストに対する疑問に24時間答えれるよう、AIあんのを運用しています。AIあんのとはYoutube Live上で安野の3Dアバターがチャットに来た質問を拾い、回答してくれるサービスです。 ログの集計私がチームに参入したタイミングでは、課題の1つとしてAIあんの Youtube Liveに来ていた質問に答えられていた数を数えてKPIとしたい、というものがありました。 7/6(土)までしか運用しない期間限定のプロジェクトということもあり、なるべく素早くかつ軽量にログを整形・集計・可視化するデータパイプラインを作るモチベーションがありました。 その結果Google Drive へのログの集約、Google Apps Script (以下 GAS) を用いたログの cleaning 、GAS + Googl
【CSS】z-index管理の3指針
要素の重なりを制御する時に使うCSSと言えばz-indexですが、単純にその値が上下関係になるとは限らない、少しクセのあるプロパティです。Webサイト上の重なりにはスタッキングコンテキストと呼ばれる仕組みがあり、その関係性によってz-indexの値が1でも9999の上にくることがあり得ます。 z-indexとスタッキングコンテキストの関係については次の記事にて解説されています。 この記事では自分の考えたz-index管理についての指針を紹介します。 グローバルな重なりとローカルな重なり Webサイトでの重なり表現には大きく分けて2つあります。ページ全体で重なりを管理したいものと、一部の領域で重なりを管理したいものです。この記事では前者をグローバルな重なり、後者をローカルな重なりと呼ぶことにします。 グローバルな重なりに含まれるのは、追従ヘッダーやモーダル、ハンバーガーメニュー、トースト通知
Railsフロントエンド: ViewComponent+Tailwind CSS+Hotwireの便利技8つ（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Quicktips for ViewComponent with Tailwind CSS/Hotwire | Rails Designer 原文公開日: 2024/01/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 フロントエンドのコードは、歴史的に少々軽く見られていました。「HTMLは本物の言語じゃない！」「CSSはサイテー！」「JavaScriptもそうだ！」。嘆かわしい話です。Railsは1個人だけの開発チームに、すべてが完全に揃った製品を構築できる本物のスーパーパワーを与えてくれるのですから。 Railsアプリ作成がさらに楽し
この記事では、ウェブサイトを保護するために使用できる最も重要なセキュリティ ヘッダーについて説明します。ウェブベースのセキュリティ機能について理解し、ウェブサイトへの実装方法を理解するのに役立ちます。また、リマインダーが必要になったときの参考にもなります。 ユーザーの機密情報を扱うウェブサイトに推奨されるセキュリティ ヘッダー: コンテンツ セキュリティ ポリシー（CSP） Trusted Types すべてのウェブサイトで推奨されるセキュリティ ヘッダー: X-Content-Type-Options X-Frame-Options クロスオリジン リソース ポリシー（CORP） クロスオリジン オープナー ポリシー（COOP） HTTP Strict Transport Security（HSTS）高度な機能を持つウェブサイトのセキュリティ ヘッダー: クロスオリジン リソース シェア
はじめに 技術部の桜です。 今回は、application/jsonにおけるAWS WAFのバイパスを試してきました。 この記事ではまず、 RFC 8259(The JavaScript Object Notation (JSON) Data Interchange Format)を読む過程でWAF Bypassに使えそうだなと思った事を検証しています。 次に、上記の検証を経て気になったことを検証しています。 環境 上記のような構成で、セキュリティグループにより自宅IPからのHTTP, SSHアクセスのみを許可しています。 また、EC2上でDockerを使用し、Nginx、Express×Node.js、PostgreSQLを動かしてXSSを意図的に埋め込んだ脆弱なアプリケーションを構築しています。 (Nginxを動かす必要はないとは思いますが、勉強を兼ねて動かしています。) 検証について
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
Vercel に Go サーバーを無料でデプロイできるんです！
性的少数者は周囲にいない？ 研究でわかった思い込み、確率を過小視：朝日新聞デジタル
ヘンリーのオブザーバビリティ成熟度を考える - 株式会社ヘンリー エンジニアブログ
英総選挙、労働党大勝へ 急進左派勢力との決別、「退屈さ」を武器に：朝日新聞デジタル
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
【React】useMediaQuery は最終手段にしよう
2024年｜CANARY Web の技術スタック
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
ハッカー集団、ＫＡＤＯＫＡＷＡ内部情報を公開…闇サイト上に給与明細など
札幌駅でホーム反対側のドア開く 2日間で33本運休 車両不具合か：朝日新聞デジタル
ESModules プラットフォームとエコシステムの狭間で | poteboy
ONCE: Writebookのソースコードを調べた - laiso
関数型ドメインモデリング ドメイン駆動設計とF#でソフトウェアの複雑さに立ち向かおう を読んだ - 平常運転
安倍昭恵氏「恨む気持ちを持ちたくない」 元首相銃撃2年、取材に：朝日新聞デジタル
今治タオル製造の元技能実習生、「無断で在留資格変えられた」と訴え：朝日新聞デジタル
"use server"; でexportした関数が意図せず？公開される
How to use container queries now | Blog | web.dev
食費は週6千円増 英総選挙、積もる保守党への不満 注目選挙区ルポ：朝日新聞デジタル
雪景色のまち、シンガポール母子を襲った悲劇 訪日客遺体搬送の現場：朝日新聞デジタル
セキュリティ ヘッダーのクイック リファレンス | Articles | web.dev
application/json形式のAWS WAF Bypass