Cacher is the code snippet organizer for pro developers

/**
 * @param {string} s
 * @return {number}
 */
var minLength = function(s) {
    // Initialize a stack to keep track of characters
    let stack = [];

    // Iterate through each character in the string
    for (let char of s) {
        // Check if the current character and the last character in the stack form "AB" or "CD"
        if (stack.length > 0 && ((stack[stack.length - 1] === 'A' && char === 'B') || (stack[stack.length - 1] === 'C' && char === 'D'))) {
            // If they form "AB"

<IfModule mod_headers.c>
    # --- Apacheのモジュールが有効か確認 ---
    # .htaccessファイルでCSPを設定するには、Apacheのmod_headersモジュールが有効である必要がある。
    
    # --- 指摘と修正点 ---
    # - "Header set" はヘッダーの初期設定に使用する。
    # - "Header append" は既存のヘッダーに新しい値を追加するが、
    #   CSPポリシーは複数回設定されるとカンマ区切りで分割されるため、
    #   意図した効果が得られない可能性があるため推奨されない。
    # - "Header always set" は、常にすべてのリクエストに対して確実にヘッダーを設定する。

    # --- CSP設定例 ---
    # Content-Security-Policyの設定内容：
    # - frame-ancestors 'self'→ 同一オリジン以外でのiframe埋め込みを禁止
    # - script-s

export default function Home() {
  let searchParams = useSearchParams();
  let search = searchParams.get('search') ?? '';
  
  let { data, isPlaceholderData } = useQuery({
    queryKey: ['people', search],
    queryFn: async () => {
      let res = await fetch(`/api/people?search=${search}`);
      let data = await res.json();

      return data as Response;
    },
    placeholderData: (previousData) => previousData,
  });

  return (
    <>
      {/* ... */}
      
    <Input

## Markdown Helper ##

Some helpful reminders about markdown ;)

## Anchor Links
we can create links to other section and also other file(s) in the repo.
  ### Sections:
  Create a heading like `#My Cool Heading`.
  The anchor link is the lower case version with dashes instead of space. Format it as sush:
  `[Go to my cool section](#my-cool-heading)`
  
  [Go to my cool header](#markdown-helper)
  
  ### links:
  Links are created a similar way, with the syntax beeing: `[link text to file in rep

import React, { useEffect, useState } from 'react';

interface FetchComponentProps {
  url: string;
}

interface ApiResponse {
  // Adjust fields based on the expected data structure
  [key: string]: any;
}

const FetchComponent: React.FC<FetchComponentProps> = ({ url }) => {
  const [data, setData] = useState<ApiResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    con

/**
 * @param {string} sentence1
 * @param {string} sentence2
 * @return {boolean}
 */
var areSentencesSimilar = function(sentence1, sentence2) {
    // Split the sentences into arrays of words
    const words1 = sentence1.split(' ');
    const words2 = sentence2.split(' ');

    // Initialize pointers for both sentences
    let i = 0;
    let j = 0;

    // Check for common prefix
    while (i < words1.length && i < words2.length && words1[i] === words2[i]) {
        i++;
    }

    // Check fo

# Extract Photos From mp3 files in m3u file
# Folder where your MP3 files are located
music_folder_path = r'C:\Users\User\Dropbox\Music\Radio Indie רדיו אינדי\tracks\uploaded'
output_folder_path = r'C:\Users\User\Dropbox\Music\Radio Indie רדיו אינדי\tracks\uploaded\7october\photos'
m3u_file_path = r'C:\Users\User\Dropbox\Music\Radio Indie רדיו אינדי\tracks\uploaded\playlist.m3u'  # Path to the M3U file

# Resize the extracted images to this size
imageWidth = 800; # Width of the output ima

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './components/AuthProvider';
import { ProtectedRoute } from './components/ProtectedRoute';
import { Login } from './components/Login';
import { Signup } from './components/Signup';
import { Dashboard } from './components/Dashboard';

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<Login />} />
     

import Realm from 'realm';
import { RealmApp } from './app';

const appConfig = {
  id: 'your-app-id',
  timeout: 10000,
};

const app = new RealmApp(appConfig);

const realmConfig = {
  schema: [
    {
      name: 'User',
      primaryKey: '_id',
      properties: {
        _id: 'objectId',
        email: 'string',
        password: 'string',
      },
    },
  ],
  sync: {
    user: app.currentUser,
    partitionValue: 'your-partition-value',
  },
};

const realm = new Realm(realmConfig);

expo

import React, { useState, useContext } from 'react';
import { AuthContext } from './AuthProvider';
import { useNavigate } from 'react-router-dom';

const Signup = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState(null);
  const { signup } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.

import React, { useContext } from 'react';
import { AuthContext } from './AuthProvider';
import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const { user, loading } = useContext(AuthContext);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  return children;
};

export default ProtectedRoute;

import React, { useState, useContext } from 'react';
import { AuthContext } from './AuthProvider';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const { login } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      await login(email, password);

import React, { createContext, useState, useEffect } from 'react';
import { useRealmApp } from './realm';
import { useNavigate } from 'react-router-dom';

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const app = useRealmApp();
  const navigate = useNavigate();
  const [user, setUser] = useState(app.currentUser);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (app.currentUser) {
      setUser(app.currentUser);
      setLoading(false

document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.querySelector('.progressbar');
    const swiperContainer = document.querySelector('.swiper-container');

    // Function to reset and restart the progress bar
    function resetProgressBar() {
        progressBar.style.transition = 'none';
        progressBar.style.width = '0%';

        // Timeout to allow reset before progress bar starts again
        setTimeout(() => {
            progressBar.style.tra

<!- How to cover a div with an img tag (like background-image does)?--->

<style>
  div {
    border: black solid;
    width: 400px;
    height: 400px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
</style>

<div>
  <img src="//loremflickr.com/100/100" />
</div>

.backlight:after {
    content: ',';
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    background: inherit;
    filter: blur(20px)l;
    transform: scale(2);
    z-index: -1;
}