patch libs

ref

• 1. install patch-package

npm i patch-package --save-dev

• 2. modify the source code in third party libs
• 3. generate the .patch

npx patch-package @mantine/core

✔ Created file patches/@mantine+core+7.2.2.patch

remove old source and reinstall

rm -rf node_modules/@mantine/core
bun install 
// npm install

jest

jest can not found canvas

npm i jest-canvas-mock --dev

and add 'canvas' : 'jest-canvas-mock' to moduleNameMapper in jest.config.js.

jest css, svg ...

module.exports = {
    "roots": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    "modulePaths": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    // "moduleDirectories": [
        // "node_modules"
    // ],
    moduleNameMapper: {
        'canvas':'jest-canvas-mock',
        "@mantine/core/styles.css": "<rootDir>/node_modules/@mantine/core/esm/index.css",
        // "@mantine/core/(.*).css": "<rootDir>/node_modules/@mantine/core/esm/$1.css",
    },
    transform: {
        "^.+\\.[t|j]sx?$": "babel-jest",
        "^.+\\App.css$": "jest-transform-css",
        ".+\\.(styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub"
    },
}

jest test throw case

Use a clouse function wrap the test case and check if the result throw an Error.

test('Convert Color to RGBA', ()=>{

    const { toRGBA } = colorConvertor();

    expect( ()=>{ toRGBA("#333444",1000) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#333444",-1) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#331",50) } ).toThrow(Error);

    expect( toRGBA('#ff3366',100) ).toBe('ff3366ff');
})

jest wrong environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

https://jestjs.io/docs/configuration#testenvironment-string

https://jestjs.io/docs/tutorial-react

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Jest test fails with "window is not defined"

add globals window to jest.config.js

module.exports = {
    globals: {
        "window": {}
    }
}

TypeError: Cannot read properties of undefined (reading 'html')

npm install --dev jest-environment-jsdom

jsdom environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined

/**
 * @jest-environment jsdom
 */
import '../jest.mock'
import React from 'react';
import {cleanup, render, screen} from '@testing-library/react';
import App from './App';


afterEach(cleanup);
test('Render App', () => {
    // ...
}

Class constructor Stage cannot be invoked without 'new'

use ts-jest instead of jest

TypeError: window.matchMedia is not a function

https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

src/jest.mock.js

Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
    })),
});

xx.test.tsx

import '../jest.mock'

daisyUI

https://daisyui.com daisyUI — Tailwind CSS Components WebdaisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file. Install daisyUI as a dev dependency and use the class names just like any …

Chakra UI

https://chakra-ui.com Chakra UI - A simple, modular and accessible component … WebCreate accessible React apps. with speed. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

mantine (UI)

https://mantine.dev/

Global web icon

react-icons.github.io https://react-icons.github.io/react-icons React Icons - GitHub Pages WebReact Icons. Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. …

tabler-icons

https://tabler-icons.io/

Over 4850 pixel-perfect icons for web design Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.

Introduction to Immer

GitHub Pages https://immerjs.github.io › immer Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. ‎React & Immer · ‎Using produce · ‎Supporting immer · ‎Installation

hooks

immer

https://zhuanlan.zhihu.com/p/639089491

3. use-immer库的高级用法 下面我们将介绍use-immer库的高级用法，包括：

3.1 使用produce函数 produce函数是use-immer库中最重要的函数之一。它可以帮助我们更加方便地管理和更新JavaScript对象和数组。下面是一个简单的例子：

import { produce } from 'immer';
const state = {
  todos: [
    { id: 1, text: 'Learn React', completed: true },
    { id: 2, text: 'Learn use-immer', completed: false },
  ],
};
const nextState = produce(state, draftState => {
  draftState.todos.push({ id: 3, text: 'Learn Redux', completed: false });
});
console.log(nextState.todos);

在上面的例子中，我们使用了produce函数来更新state中的todos数组。我们可以看到，使用produce函数可以帮助我们更加方便地更新JavaScript对象和数组。

react snippets

a quick way to create a code template for a component or etc...

rcc

refs

ref is a reference to a element but ref maybe null

react-hook-form

transform several properties

const obj = {
    className: "none",
    size: 14,
    color: "red"
}

<Comp
    { ... obj }
/>

equals

<Comp
    className={obj.className}
    size={obj.size}
    color={obj.color}
/>

... means    loop the obj and set each key to the value

zod , joi , ... validation libs

import { z } from 'zod';

// create the limites
const schema = z.object({
    name: z.string().min(3, {"message":"at least 3 characters."}),
    age: z.number({invalid_type_error:"required"}).min(18) // the api shoud be mobile and ...
})

// create the  interface for data
type FormData = Formz.infer<typeof schema>;

@hookform/resolvers

const {
    register,
    handleSubmit,
    formState: {errors,isValid}
} = 
useForm<FormData>( { resolver: zodResolver(schema) } );

useEffect()

useEffect is similar to a "OnRendered" Callback when JSX modules is rendered then react call this function

finally()

the finally method will be called both succeed or failed when fetch on axios

?. optional link

seemly to swift syntax

obj?.type means obj && obj.type

Abort Signal

Mozilla Developer https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal AbortSignal - Web APIs | MDN WebAug 4, 2023 · English (US) AbortSignal. The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it …

const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Array.reduce()

Mozilla Developer https://developer.mozilla.org/.../Array/Reduce Array.prototype.reduce() - JavaScript | MDN - MDN Web … WebSep 14, 2023 · Array.prototype.reduce () Try it. The reducer walks through the array element-by-element, at each step adding the current array value to the... Syntax.

JavaScript Array filter()

WebThe filter () method creates a new array filled with elements that pass a test provided by a function. The filter () method does not execute the function for empty elements.

ZangoDB是一个indexedDB的类MongoDB轻量级接口库，主要是为了更轻松快速的编写indexedDB相关的操作。

关于indexedDB: IndexedDB - MDN

Github: ZangoDB

在MDN的推荐中介绍了几款不同的轻量级类库 来简化indexdb的使用，其中dexie.js也是不错的，但是在多条件筛选上并没有支持，所以介绍一下ZangoDB。

对于熟悉MongoDB这类NoSQL的开发者来说，应该简单看一下文档就能够快速上手。这里我将会对熟悉关系型数据库的来做一下说明。

ZangoDB主要将indexedDB简化为3个对象

Db - 数据库

Collection - 集合(表)

Cursor - 游标 查询( SQL )

不同于关系型数据库的初始化时数据库,表,所有字段名称和类型,索引结构都要确定。

NoSQL数据库通常只需要建立数据库的名称，表名称以及需要索引的字段。 其他的数据可以任意存储。

ZangoDB的主要特性集中在运算符的部分，类似于SQL中的( GROUP BY, ORDER BY 等 ) 包括以下几类

文末会给出更详细的介绍

Filter Operators 筛选查询运算符

Expression Operators 表达式运算符

Update Operators 更新运算符

Group Operators 组运算符

- 阅读剩余部分 -

最近在基于chrome开发一个用于收集和整理 信息（知识）的插件，名称叫Memoreasy。 一贯以来我都是用自己写的AppSiteJS框架在写web前台的功能，很少去涉及到异步编程，一般来说也就只是在XMLRequest( Ajax )的时候会用。

而在开发chrome插件的时候，几乎所有的api都是异步API，在第一时间的时候还是让我有些不适应。

但是很多时候理解一个技术或者说模式，最重要的并不是强迫自己去理解很多别人的说明、解释或者说代码。最关键的是需要以一个好的思路领会到这个概念的精髓。

我们先说同步编程，大家肯定不陌生，最初学习编程的时候我们都是使用同步编程，同步编程就好比工厂的流水线。

我们在进行同步编程的时候 每一个后续的步骤都依赖于前一步的计算或结果（返回值），如果其中一个过程出现问题，那后续的工作也无法继续了。 换言之，我进行后续工作的时候肯定已经获得了前一步的结果了。 从我们的思维习惯上来讲，这个过程的可控性是很好的。

// 一个简单同步编程的代码说明
var a = "hello", b = 10;
var u = getUseid();
if( u ){
    var obj = { text: a, number: b, user: u };
    console.log(obj);
}else{
    console.log( 'user not found' );
}
function getUserid(){
    return localStorage.getItem('userid');
}

在这段程序中，无论是否找到userid 控制流程实际上还是在当前这段代码中的。 这相当于开发者是公司的老板，让员工去完成一些任务，且无论完成的如何，都需要向老板汇报，然后老板再向员工发布下一步的任务。 这就是我们常识中的“集权"。 我们喜欢同步编程，也就是喜欢他的掌控度。

但是同步也会遇到问题。譬如说，从网络中请求数据(Ajax)时我们无法掌控对方的后续结果。 这就相当于我们在网上下单购物，快递走哪里，什么时间到什么位置，会不会被堵车，会不会在仓库里被堆积，被哪个快递员投递等等。 这种情况我称之为不可控编程，在这个时候，我们不可能一直在手机前面全程跟踪一直到收到商品，我们一般放下手机该吃吃该喝喝，等待快递员的电话。 其实我们也早已习惯了“放权”，只是在编程中，我们需要对那些习惯做一些适应。 来看一段示例代码：

// 购物异步编程 仅供参考 完全不严谨！

function 购物( 订单 ){
    return Promise( 付款之后, 没给钱 ){
        给钱( 订单.价格 ).then( function(){ 
            付款之后( 订单 ) 
        }).catch(function(){
            没给钱()
        })
    }
}

function 发快递( 订单 ){
    var 包裹 = 商家打包( 订单 ); // 打包好了才能发包裹，所以需要同步
    return Promise( 到货, 丢了 ){
        发货().then( function( 包裹 ){
            到货( 包裹 )
        }).catch(function(  ){
            丢了()
        })
    }
}

function 到货( 包裹 ){
    return Promise( 在家, 不在家 ){
        打电话( 包裹.收件人 ).then( function(){
            在家( 包裹 ); // 送货上门
        }).catch(function(){
            放到快递柜( 包裹 )
        })
    }
}

这里我们定义了多个购物相关的异步方法，而我们在调用的时候就很简单了

购物( 订单 ).then( 发快递 ).catch( 弹窗提示 );

是不是感觉打开了新世界，因为发快递之后的事情我都不用管了，放权也是很爽的。

Flex布局 在CSS中是当前最流行的布局方式，并且在移动端以及较新的pc浏览器有着很高的支持度，基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。

flex布局因为是比较新的标准，所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式，对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。

当前的现代浏览器中 flex layout支持度已经超过98%

Flexible box - Can I use

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

Container Style 容器样式:

flex可以提供block和inline两种对外效果。但是并不影响内部元素。因为内部元素会被设定为flex项目。

设置一个flex容器:

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

.flex{
    display:flex;
    display: -webkit-flex; /* Safari */
}
.inline-flex{
    display:inline-flex;
}

- 阅读剩余部分 -

基于最近考虑着手iOS 安卓 双平台的开发，整理了一下现存的一些跨平台开发思路。

为了让自己更直观的感受不同跨平台思路的差异，我简单的做了几个图示。

套壳模式

微信公众号H5(相当于) , jQuery Mobile ?

套壳模式是开发APP可以说是最简单快捷的（对于web开发者来说），基本上只要有一个正常能用的手机端可以UI适应的web就可以通过套一个壳完成APP开发。 套壳的问题主要有2个

1. 体验不好，完全通过套壳的webapp 从性能以及UI交互上来说都会比原生app差，通过对js、css的优化，可以解决一部分，比如说click事件在手机端应当用tap事件(封装tap事件)，另一部分解决不了，比如说iOS端的侧滑返回或侧滑删除功能，这个体验如果要靠js来实现，效果当然是可以写出来的，但是流畅度、细节表现大大不如原生，而且会花费比较多的时间，而且没有什么这一块比较好的库可以用。
2. 没有原生功能支持,在微信公众号h5中，还可以通过微信的JSAPI调用部分微信提供的功能，譬如说存储图片。但是套壳在app里的时候，就完全没有办法支持了。

Web 框架模式

Dcloud H5 plus (SDK)

除了Dcloud h5 目前没有发现明确的web框架模式，这里的web框架模式主要是指以web形式开发，通过特定的SDK或者插件api访问app原生功能，不需要使用该框架特定的打包流程，支持以sdk嵌入等方式构建app的。

Web框架模式相对来说简单，快速。不用深入学习原生的内容即可快速使用原生平台的能力，通过插件的扩展也能提高一定程度上的体验效果。

- 阅读剩余部分 -

在无意间漫游网上的文章时，看到一个指出对JavaScript误解的部分提到了这个关于JavaScript私有对象的问题。

Private Members in JavaScript

在该文章中指出，在对象内部使用 var 创建的变量属于私有变量、这个是外部无法访问的。 在这里var的变量我们换一种说法就是局部变量。事实上不能算是真正的私有属性。

我们知道在面向对象编程中，一个类的属性、方法如果能够被其他类访问调用，那么这个是public 公开属性、方法。 但是他有一个隐式条件就是，他也能被类自身其他的方法访问。类的private 私有属性、方法虽然不能被外部属性访问，但是他是需要满足被同一个父类下的其他方法访问的。

而局部变量是方法内部创建的，他只能在当前方法的生命周期内被调用，如果一个JavaScript对象中包含了多个方法，在方法内部var创建的属性和方法，是不能被其他任何方法、包括同一个类的其他子方法调用。

- 阅读剩余部分 -

在多数现代浏览器中我们都可能会遇到图片跨域被阻止的问题，一般来说跨域问题主要出现在前后端分离，云架构的web系统中。 在两年前的时候通过网上的搜索勉强应付了问题，但是每次使用或多或少还会有需要解决的小问题。这次弄清楚了之后发现之前网上大多数也都是一知半解，并没有解决核心问题，所以导致了瞎试，碰运气的方式来处理。

首先html2canvas跨域问题的原因 我们希望将html渲染为canvas 进而渲染为图像，这就需要将html中的资源加载到临时的canvas中,而这个时候，如果资源和当前页面不同源，就会被canvas认为有污染拒绝加载。这是出于浏览器出于安全的角度做的一个设定。

在这个时候，我们需要做的其实比较简单，在所有因为跨域被拒绝的资源从服务端返回一个header

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

诸如网上的一些都是,不需要的：

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

- 阅读剩余部分 -

README.md

后台管理系统结构说明

引入服务端入口(管理后台接口)

• 初始化管理后台 Manager对象

  • 处理登录、鉴权
  • 处理默认访问路径
  • 初始化权限

• 引入页面文件

  • header HTML头文件
  • customHeader (自定义)
  • aside 侧边栏导航菜单
  • customAside (自定义)
  • act ( page | default ) 核心内容输出 优先page路径
  • script 通用脚本
  • customFooter 自定义脚本
  • footer HTML底部 ( act页customJS在这里生效 )

系统用户的默认权限设置

90000 超级管理员 80000 管理员

40000 网站编辑 30000 创作者 10000 普通用户

最近有将AppSite框架进行公开发布(开源)的想法。 不过开源也就意味着更多的一份责任，如果是普通的个人系统还好，我们的系统商业化在很多中大型项目上，安全也是一个隐忧。

暂且先梳理一下

AppSite PHP全栈框架

Appsite的宗旨是用于快速开发网络\云应用\物联网

全栈支持引擎 Full stack Supporting Engine 介于CMS与Framework之间

AppSite 核心特色是极简的语义化编程

如果一个框架、一个语言、甚至一个程序他的可读性不好甚至很差，那么他就是我眼中的垃圾。 我们可以回想一下，高级语言的意义到底是什么？ AppSite追求的就是当我们书写/维护我们的程序时，可以像读一篇文章一样，顺畅的知道别人写了什么，自己写过什么。 先不要跟我说什么设计模式、优雅还是什么安全的，首先，我们应该能阅读我们的代码，因为看明白代码之后，其他的都不耽误。

$validate = USER::mobileValidate('15000000000','123456');
if( $validate->isOk() ){
    print( 'validated' );
}else{
    print( $validate->status );
    print( $validate->message );
}

AppSite 主要思想是面向数据编程

从某个侧面来看计算机信息技术本身就是对于数据的各种处理，而AppSite就是这样的思想，我们的核心引擎着重解决的是提供一个可以自适应处理各种不同结构数据的一套程序开发套件。 基于这些高度自适应的基础功能，我们可以方便的创建各种方法或对象、进而快速实现不同的业务逻辑的新增或调整。

例如，我们对于向数据库添加数据的时候，通用的使用的是：

$DB->add( $data, $table );      // 数据库实例化操作方法
USER::add( $data );                 // 组件静态方法

这里相当于我们告诉程序 “我有这些数据，你添加一下。” 程序则通过设定好的规范自动去完成数据整理以及后续操作。

- 阅读剩余部分 -

总体来说 Typecho做到了简洁实用，有些部分虽然有些简单或是有些不足，但是自行修改是十分便捷的，这非常适合用来维持一个单纯的博客系统。

因为近期实在是感受到了记忆力下滑、接触面过广的时候对于笔记、知识点记忆搜索的需求很强烈，不得不重新拾起曾经一度丢弃的个人博客。 区别在于以前更多的是设计作品展示、图片展示。现在更重要的是做技术博客。

在很久之前我一直以来习惯的就是使用WordPress来搭建博客和网站，曾经在做设计师的时候折腾过蛮多次WordPress来制作个人网站、在线教育网站，包括给别人搭建电子商务网站。 2017年 基本主义在线商城: 基本主义

但是由于一些原因、我不打算再尝试WordPress这个较重、同时风险也比较高的CMS 其中最主要原因还是因为折腾成本太高、想要去自定义的时候需要很了解这个框架的设计、想要深度定制的难度很大、修改别人的主题、模板的时候由于代码的结构化很差、所以想要做修改的时间成本异常的高。

（也正是因为2017年痛的领悟，所以自行开发了AppSite全栈框架） 现在自己再去写一个博客又感觉挺浪费时间的。

简书、lofter这类自由度不够、cnblogs、CSDN等技术博客又太过不能入眼， 所以决定还是找一个极简的cms来做，这时候正好发现了Typecho。

- 阅读剩余部分 -

Android WebView不能加载ajax?加载ajax无效？

!苹果或高版本的安卓webview可能会有跨域被拦截的问题，需要在服务端允许跨域。 另外高版本的webview注意使用HTTPS协议的请求,普通http将会被拦截 php示例代码:

header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*'); // 被允许的访问来源
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

1、WebView的支持js是否打开； webSettings.setJavaScriptEnabled(true);

2、webView拓展的api是否打开： webSettings.setDomStorageEnabled(true);

- 阅读剩余部分 -

公司：都秀网络科技 技能：视觉设计，UI设计，图标绘制，前端开发 时间：2013.06-2014.7 链接：DoshowClient 商用作品(请勿盗用)

- 阅读剩余部分 -