useLocalStorage

import { useEffect, useState } from "react"

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const localValue = localStorage.getItem(key)
    if (localValue == null) {
      if (typeof initialValue === "function") {
        return initialValue()
      } else {
        return initialValue
      }
    } else {
      return JSON.parse(localValue)
    }
  })

  useEffect(() => {
    if (value === undefined) {
      localStorage.

useArray custom hook

import { useState, useCallback } from "react"

export function useArray(initialValue) {
  const [array, setArray] = useState(initialValue)

  const push = useCallback(element => {
    setArray(a => [...a, element])
  }, [])

  const replace = useCallback((index, newElement) => {
    setArray(a => {
      return [...a.slice(0, index), newElement, ...a.slice(index + 1)]
    })
  }, [])

  const filter = useCallback(callback => {
    setArray(a => {
      return a.filter(callback)

868. Binary Gap

Given a positive integer n, find and return the longest distance between any two adjacent 1's in the binary representation of n. If there are no two adjacent 1's, return 0. Two 1's are adjacent if there are only 0's separating them (possibly no 0's). The distance between two 1's is the absolute difference between their bit positions. For example, the two 1's in "1001" have a distance of 3.
/**
 * @param {number} n
 * @return {number}
 */
var binaryGap = function(n) {
    // Convert the number to its binary string representation.
    // Example: 22 -> "10110"
    const binary = n.toString(2);

    // This will store the index of the *previous* '1' we saw.
    // We start with null because we haven't seen any '1' yet.
    let prevOneIndex = null;

    // This will track the maximum distance found so far.
    let maxDistance = 0;

    // Loop through each character in the binary stri

finncial dashboard

'use client';

import { useState } from 'react';
import { Target, Edit2, Check, X } from 'lucide-react';
import { Budget } from '../lib/types';
import { formatCurrency } from '../lib/utils';

interface BudgetOverviewProps {
  budgets: Budget[];
  onUpdateBudget: (category: string, newLimit: number) => void;
}

export default function BudgetOverview({ budgets, onUpdateBudget }: BudgetOverviewProps) {
  const [editingCategory, setEditingCategory] = useState<string | null>(null);
  co

mastra rag agent

a rag agent using mastra.ai and mongodb with workspaces setup with agent skills as well with a knowlege base that is stored in the browser for now , we need to be able to supply a url and then the site witll be crawled and all the documentation and code examples will be added to the knowlegebase, we needs to beablel to upload pdf,markdown, html, css, js, jsx,ts,tsx,python,mp3,mp4,jpeg,jpg,png,webp,codesnippetts,notes,and bookmaarks as well, agent memory needs to be persisted in sqlite.

画面内に入ったら一度だけ発火するアニメーションをCSSのみで実現する

<div class="box"></div>

アイフォンios26Safariのバー透過防止

(参考サイト) https://qiita.com/kskwtnk/items/df4d6b15f6df7026cfeb
<div class="for_status_bars"></div>
<div class="for_tab_bars"></div>

stylus-editor-solarized-light-theme

Saved from https://userstyles.world/style/24913/stylus-editor-solarized-light-theme
/* ==UserStyle==
@name           Stylus Editor - Solarized Light Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A Solarized Light theme for the Stylus extension editor.
@author         Gemini 2.5 Pro
==/UserStyle== */
@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/edit.html") {

    /* Solarized Light Palette */
    :root {
        --base03: #002b36;
        --base02: #073642;
        --base01: #586e75;
        --base00: #

Git commands quick ref.

# Switch to main branch
git checkout main

# Get latest changes from remote
git pull origin main

# Create new feature branch
git checkout -b feature/<issue-number>-short-description

# Stage specific file (recommended)
git add filename.cs

# OR stage all changes (use carefully)
git add .

#  Check what will be committed
git status

#  Commit with clear message
git commit -m "feat: short clear description"

#  Push branch (first time)
git push -u origin feature/<issue-number>-short-description

Lambdaの関数は処理ごとに分離しない方がコストが安い

# Lambda Nano-functions アンチパターン

## 概要

1処理1Lambdaに細分化する設計パターン。通称 "Lambda per method" / "Nano-functions"。
通常のプログラミングにおける関数分割をそのままLambda分割に持ち上げる構成。

## 問題点

### 1. レイテンシの劣化

- Lambda間呼び出しでは、コールドスタート(実行環境が未起動の状態からランタイムの初期化・コードのロードを行う時間。Java: 数百ms〜数s、Python/Node: 100〜500ms程度)が各Lambdaで発生しうる
- プロセス内関数呼び出しのオーバーヘッドはμs単位。Lambda間呼び出しはネットワークホップ(Lambda AがLambda Bを呼ぶ際に経由するネットワーク通信の1区間)を含むためms〜s単位
- 3段チェーン(Lambda A → Lambda B → Lambda Cのように3つのLambdaが直列に呼び出し合う構成)の場合、最悪ケースでコールドスタートが3回直列に発生し、合計レイテンシが数秒に達する

###

Lambdaの関数は処理ごとに分離しない方がコストが安い

# Lambda Nano-functions アンチパターン

## 概要

1処理1Lambdaに細分化する設計パターン。通称 "Lambda per method" / "Nano-functions"。
通常のプログラミングにおける関数分割をそのままLambda分割に持ち上げる構成。

## 問題点

### 1. レイテンシの劣化

- Lambda間呼び出しでは、コールドスタート(実行環境が未起動の状態からランタイムの初期化・コードのロードを行う時間。Java: 数百ms〜数s、Python/Node: 100〜500ms程度)が各Lambdaで発生しうる
- プロセス内関数呼び出しのオーバーヘッドはμs単位。Lambda間呼び出しはネットワークホップ(Lambda AがLambda Bを呼ぶ際に経由するネットワーク通信の1区間)を含むためms〜s単位
- 3段チェーン(Lambda A → Lambda B → Lambda Cのように3つのLambdaが直列に呼び出し合う構成)の場合、最悪ケースでコールドスタートが3回直列に発生し、合計レイテンシが数秒に達する

###

HTTPOnlyCookieの注意点

# httpOnly Cookie の誤解 ― 「読めない」は「悪用できない」ではない

## よくある誤解

> 「Cookie を httpOnly にすれば JavaScript から読めないので安全」

半分正しく、半分間違い。httpOnly 属性は `document.cookie` 経由での読み取りを防ぐが、**Cookie を読めなくても悪用できる**という点が見落とされがち。

---

## 何が起きるのか ― CSRF(Cross-Site Request Forgery)

ブラウザには「リクエスト送信時に、対象ドメインの Cookie を自動的に付与する」という仕様がある。`credentials: "include"` を指定した fetch API も例外ではない。

攻撃者はこの仕様を利用して、**Cookie の中身を一切知らないまま**、被害者のブラウザに正規リクエストを送信させることができる。

### 攻撃の流れ

```
1. 被害者が target-site.com にログイン済み
   → セッション Cookie がブラウザに保存されてい

不審なアクセスがスクレイピングかどうかの判断基準と対応方法

# スクレイピング検知のためのログ分析手法と対策

## 1. 分析対象のログ種別

| ログ種別 | 主な記録内容 | 取得元の例 |
|---|---|---|
| Webサーバーアクセスログ | IP、タイムスタンプ、リクエストURI、ステータスコード、User-Agent、Referer | Apache `access.log`、Nginx `access.log` |
| WAF / CDNログ | リクエストヘッダ全体、レート情報、ブロック履歴 | Cloudflare、AWS WAF、Akamai |
| アプリケーションログ | セッションID、認証状態、API呼び出し回数 | 各アプリケーションフレームワーク |

---

## 2. スクレイピングを示唆するログパターン

### 2.1 リクエスト頻度の異常

**確認方法:** 同一IPアドレスからの単位時間あたりのリクエスト数を集計する。

```bash
# 1分間あたりのIPごとのリクエスト数を集計(Apacheの combined 形式)
awk '{print $1, substr($4,2,17)

ログアウト処理をGETで実装してはいけない

# ログアウト処理を GET で構築してはいけない理由(PHP)

## 結論

ログアウトは `session_destroy()` によるセッション破棄、すなわちサーバー側の状態変更操作である。HTTP の仕様上、状態変更操作には **POST**(または DELETE)を使用する。GET で実装した場合、以下の具体的な問題が発生する。

---

## 1. CSRF(クロスサイトリクエストフォージェリ)攻撃が成立する

GET リクエストは `<img>` タグの `src` 属性に URL を指定するだけで発火する。

```html
<!-- 攻撃者のサイトに設置されたコード -->
<img src="https://example.com/logout.php" style="display:none" />
```

ブラウザはこの `<img>` タグを解釈した時点で `https://example.com/logout.php` に GET リクエストを送信し、`PHPSESSID` を含む Cookie も自動的に付与する。結果として `session_des

gpt oss 120b nividia responses

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: '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',
  baseURL: 'https://integrate.api.nvidia.com/v1',
});

async function main() {
  const response = await openai.responses.create({
    model: "openai/gpt-oss-120b",
    input: "",
    max_output_tokens: 4096,
    top_p: 1,
    temperature: 1,
    stream: true
  });

  
  let reasoningDone = false;
  for await (const chunk of response) {

gpt oss 120b nvidia

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: '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',
  baseURL: 'https://integrate.api.nvidia.com/v1',
})
 
async function main() {
  const completion = await openai.chat.completions.create({
    model: "openai/gpt-oss-120b",
    messages: [{"role":"user","content":""}],
    temperature: 1,
    top_p: 1,
    max_tokens: 4096,
    stream: true
  })
   
  for await (const chunk of completion)