2696. Minimum String Length After Removing Substrings

You are given a string s consisting only of uppercase English letters. You can apply some operations to this string where, in one operation, you can remove any occurrence of one of the substrings "AB" or "CD" from s. Return the minimum possible length of the resulting string that you can obtain. Note that the string concatenates after removing the substring and could produce new "AB" or "CD" substrings.
/**
 * @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"

.htaccessにCSPを書いて外部ソースやフォーム送信先などに制限をかける

<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

How to control a React component with the URL

Use URL to control state of a component. Single source of truth [BuildUi Tutorial](https://buildui.com/posts/how-to-control-a-react-component-with-the-url) [YouTube](https://www.youtube.com/watch?v=fYqMPvPvVAc)
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

## 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

Fetch URL

A fetch component with status error handling
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

1813. Sentence Similarity III

You are given two strings sentence1 and sentence2, each representing a sentence composed of words. A sentence is a list of words that are separated by a single space with no leading or trailing spaces. Each word consists of only uppercase and lowercase English characters. Two sentences s1 and s2 are considered similar if it is possible to insert an arbitrary sentence (possibly empty) inside one of these sentences such that the two sentences become equal. Note that the inserted sentence must be separated from existing words by spaces. For example, s1 = "Hello Jane" and s2 = "Hello my name is Jane" can be made equal by inserting "my name is" between "Hello" and "Jane" in s1. s1 = "Frog cool" and s2 = "Frogs are cool" are not similar, since although there is a sentence "s are" inserted into s1, it is not separated from "Frog" by a space. Given two sentences sentence1 and sentence2, return true if sentence1 and sentence2 are similar. Otherwise, return false.
/**
 * @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

# 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

App=realm-auth

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 />} />
     

Realm/index.js

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

Signup.jsx

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.

ProtectedRoute.jsx

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;

Login-jsx

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);

AuthProvider.tsx

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

Custom Progress bar - Swiper Slider

Use for Swiper Slider, Oxy-Ultimate content slider.
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

use img tag as background image

Saved from https://stackoverflow.com/questions/44091567/how-to-cover-a-div-with-an-img-tag-like-background-image-does/44091584#44091584
<!- 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 Effect

[Tutorial](https://www.youtube.com/watch?v=VlXIPf7dz0I)
.backlight:after {
    content: ',';
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    background: inherit;
    filter: blur(20px)l;
    transform: scale(2);
    z-index: -1;
}