请叫我一米

Nextjs client 使用 useRouter push 或者 replace 时，显示一个 loading 状态给用户。可以通过使用 useTransition 来实现。
代码如下：

import { useRouter } from 'next/navigation'
import { useTransition } from 'react'

'use client'

export function MyComponent() {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  function navigate() {
    startTransition(() => {
      router.push('/sometwhere')
    })
  }

  return (
    <div>
      <button type="button" onClick={navigate}>Click</button>
      {isPending && <p>Navigating...</p>}
    </div>
  )
}

开发过程中，如果需要连接一个可用的本地 PostgreSQL 数据库，那么通过 Docker Compose 在本地运行数据库 PostgreSQL 就很有必要了。

肯定是需要安装 Docker 的。

创建一个放置数据库以及数据的目录。
mkdir postgres-docker
cd postgres-docker

创建 docker-compose.yml 文件
在项目目录中，创建一个名为docker-compose.yml的文件并添加以下配置：

services:
  db:
    image: postgres:latest
    container_name: local-postgres
    environment:
      POSTGRES_USER: &lt;postgres_user&gt;
      POSTGRES_PASSWORD: &lt;postgres_password&gt;
      POSTGRES_DB: &lt;postgres_db&gt;
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data 或 /postgres-docker/postgresql/data
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql  # Optional: initialize with SQL script

volumes:
  postgres_data:

请将
<postgres_user> <postgres_password> <postgres_db> 替换为自己真实的配置信息。

/var/lib/postgresql/data 为 Linux 下路径。
/postgres-docker/postgresql/data 为 Windows 下路径，第一个 / 表示当前盘的根目录

5432:5432 映射允许通过端口 5432 本地访问数据库。

postgres_data：即使在停止容器后也保留 PostgreSQL 数据。
init.sql：可选的 SQL 脚本，在容器启动时自动运行（也可以自定义此文件以进行初始配置）。

使用

docker-compose up -d

即可启动服务了。当然了，通过 docker desktop 也可以管理。

使用命令行

psql -h localhost -p 5432 -U postgres_user -d postgres_db

即可连接数据库了，或者通过 GUI 工具也可以。

CloudFlare 支持部署 Angular 17，但是需要稍微做一点调整。

使用 CloudFlare 命令行创建 Angular 17 工程后，需要将 package.json 中的命令

"start": "npm run pages:build && wrangler pages dev dist/cloudflare

改为：

"start": "npm run pages:build && wrangler pages dev dist/browser

angular.json 中需要将 outputPath 从：

"outputPath": "dist/(项目名称)",

修改为：

"outputPath": "dist",

cloudflare 新建 pages 项目，build 命令处设置为：

Build output directory:/dist/browser

这个 /dist/browser 请几个地方保持一致，就可以正常的访问了。

这么一设置之后，部署之后 functions 也可以正常访问，前端页面也可以正常访问，本地开发的 functions 也可以正常访问，只是还不能启动 ng serve 然后 wrangler pages dev 来开发。需要 ng build 之后，wrangler pages dev 来开发，但是不需要重新跑 wrangler pages dev。

来源：https://twitter.com/wesbos/status/1694081235729928529

主要可能是新版本系统(或者软件)对于获取设备的返回数据格式作了修改
所以这里在 cordova build ios 获取可用设备列表的时候，会报 Cannot read property ‘toLowerCase’ of undefined。

解决方法很简单
打开这个文件：platforms/ios/cordova/lib/list-emulator-build-targets，
大概 54 行左右

device.availability.toLowerCase().indexOf('unavailable') < 0

改成：

device.isAvailable

所以改完之后完整的代码是：

availableDevicesInCategory.forEach(function (device) {
    // console.log(device);
    if (device.name === deviceType.name.replace(/\-inch/g, ' inch') && device.isAvailable) {
        availAcc.push(device);
    }
});

如果还不对，看一看这个 console.log(device); 输出是什么，我这里输出的是：

{ state: 'Booted',
  isAvailable: true,
  name: 'iPhone 11 Pro',
  udid: 'A4E72C68-XXXX-XXXX-XXXX-DFB57EB137B7' 
}

所以看看这个输出的内容就知道怎么改了。

var x = [1,2,3,4,5,6,7,8,9,10];
// var x = (Array(101).join(0).split('')).map((a,i)=>{return i+1;});
var findIndex =  (target, x, lowIndex, highIndex) => {
	var low = lowIndex || 0;
	var high = highIndex === undefined ? (x.length - 1) : highIndex;
	var mid = Math.ceil((low + high) / 2);
    // var mid = Math.floor((low + high) / 2);
	// console.log('Mid : ', mid);
	if(target === x[mid]){
		return mid;
	} else {
		if(target < x[mid]){
			// console.log('Low : ', x.slice(low, mid));
			return findIndex(target, x, low, mid - 1);
		} else {
			// console.log('High : ', x.slice(mid, high));
			return findIndex(target, x, mid + 1, high);
		}
	}
};
x.forEach((z)=>{
	console.log(findIndex(z, x));
});

永远有多远，或许只有一米的距离.

Nextjs router.push 时显示进度条

如何使用 Docker Compose 设置本地 PostgreSQL

CloudFlare 部署 Angular 17

JavaScript 标签加载图示

解决 cordova build ios toLowerCase of undefined

JavaScript 二分法查找