js

- 如何对html源码中的数字加密
- js学习
- 富文本编辑器
  - Quill
- SSG
- 兼容
- 出错时录屏
- 工具
  - doc
  - table
  - calendar
  - 上传
    - FilePond
    - Uppy
  - 图片处理
  - SQL
    - 解析sql、sql2ast
- 网页构建 Web Builder Framework
- 在线
- 视频播放器
- state
  - xstate
  - immer
- test
  - jest
    - jest-when
- doc
  - PDF
    - PDF扫描
    - PDF工具
    - jsPDF
    - pdf.js
    - pdfobject
    - html2pdf
  - excel
- D3.js
- 前端框架
- UI
  - 桌面UI
  - ionic-framework
  - vue3
    - nuxt
    - quasar
    - primevue
  - react
- Gantt
  - 商业
    - dhtmlx
    - GrapeCity
    - webix
    - Syncfusion
    - treegrid
    - bryntum
  - gantt-schedule-timeline-calendar
  - 国产
  - 其它
- 数据分析
  - 网站监控/网站分析/Google Analytics
    - Umaimi
    - Shynet
    - Clarity
    - hotjar

[TOC]

学习
 https://contribute.freecodecamp.org/#/

Lunr.js 轻量级Javascript全文搜索库

Snowpack 打包工具
实现直接在浏览器中运行npm软件包。SnowPack 是基于 ESM 的工具。

如何对html源码中的数字加密

用字体
为了防止别人爬取网页价格，可以把价格加密，用字体显示
参考1：https://i.jzj9999.com/quoteh5/
参考2：https://sz.58.com/chuzu/
python解析字体反爬

from fontTools.ttLib import TTFont
font = TTFont('58.ttf') # 打开本地的ttf文件
font.saveXML('58.xml')  # 转换成xml

如果是爬取的话有更简单的方式，一般数字就是0-9以及小数点，把密文复制出来找到所有的数字和小数点，然后转成unicode（当然如果简单的也可以不用转unicode，直接比对），做一个map映射就好了
https://www.bejson.com/convert/unicode_chinese/

js学习

学习js必须要掌握的++
刷新你对js认识

富文本编辑器

Quill

https://github.com/quilljs/quill

SSG

Static Site Generators (SSG) 技术

生成静态网页：

Next.js 是基于 React 的 SSR/SSG 框架。
Scully 是基于 Angular 的 SSG 框架。
VitePress 是 Vue 官方推出的 SSG 框架。

JAMStack
Ledge
Gatsby

兼容

用来为旧浏览器提供它没有原生支持的较新的功能。
https://github.com/financial-times/polyfill-service

出错时录屏

前端录屏+定位源码，帮你快速定位线上bug Github源码

基于H5的录屏工具开发

工具

上传

FilePond

https://github.com/pqina/filepond

Uppy

https://github.com/transloadit/uppy

图片处理

https://github.com/nhn/tui.image-editor

去除背景
https://github.com/imgly/background-removal-js

SQL

解析sql、sql2ast

https://github.com/DTStack/dt-sql-parser
https://github.com/JavaScriptor/js-sql-parser
https://github.com/godmodelabs/flora-sql-parser

网页构建 Web Builder Framework

appsmith

https://github.com/appsmithorg/appsmith 8.1k

grapesjs

https://github.com/artf/grapesjs 12k

VvvebJs

https://github.com/givanz/VvvebJs 3.5k
可视化构建库拖拽生成网页
1、组件和块/片段拖放。
2、撤销/重做操作。
3、一个或两个面板界面。
4、文件管理器和组件层次结构导航添加新页面。
5、实时代码编辑器。
6、包含示例php脚本的图像上传。
7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本。
8、组件/块列表搜索。
9、Bootstrap 4组件等组件

h5-Dooring

https://github.com/MrXujiang/h5-Dooring 870

sparrow-js

https://github.com/sparrow-js/sparrow 349

其它相似

ContentTools

用于为HTML内容构建所见即所得编辑器的JS库。
https://github.com/GetmeUK/ContentTools
https://github.com/GetmeUK

H5 页面设计器
https://github.com/ymm-tech/gods-pen

表单设计器

https://github.com/JakHuang/form-generator

AI自动生成前端代码

Sketch2Code

https://github.com/Microsoft/ailab/tree/master/Sketch2Code
https://sketch2code.azurewebsites.net/

teleportHQ

https://github.com/teleporthq

在线

可视化在线绘图引擎 Topology（类似draw.io）

https://github.com/le5le-com/topology/
A diagram (topology, UML) framework uses canvas and typescript. 一个轻量（100k左右）、功能丰富的绘图工具（微服务架构图、拓扑图、流程图、类图等UML图、脑图，动画、视频支持）。【在线使用】：

topology.le5le.com/

drawio
draw.io

https://github.com/jgraph/drawio-desktop

Excalidraw: 虚拟白板，用于素描手绘图
https://github.com/excalidraw
https://github.com/excalidraw/excalidraw
https://excalidraw.com/
wireflow.co
https://github.com/vanila-io/wireflow
https://app.wireflow.co/

-zwibbler
https://zwibbler.com/

poster-design/在线图片编辑器/在线海报设计器
https://github.com/palxiao/poster-design
Gitmind 在线思维导图 https://gitmind.cn/

10款最佳HTML5绘图工具

流程图

https://github.com/antvis/G6
https://github.com/antvis/X6
https://github.com/didi/LogicFlow

终端应用程序Xterm.js

https://github.com/xtermjs/xterm.js

在线运行Android

https://github.com/openstf/stf

在线数学公式

http://mathquill.com/
https://github.com/mathquill/mathquill

视频播放器

video.js

https://videojs.com/
https://github.com/videojs/video.js 36.6k

Plyr

https://github.com/sampotts/plyr 24.8k

xgplayer(西瓜播放器)

https://v2.h5player.bytedance.com/
https://github.com/bytedance/xgplayer 7.1k

DPlayer

https://dplayer.diygod.dev/zh/guide.html
https://github.com/DIYgod/DPlayer 14.7k

Android/iOS video player 手机端播放器

https://github.com/bilibili/ijkplayer

state

xstate

https://github.com/davidkpiano/xstate
它是个简单的 JavaScript 和 TypeScript 框架，可以创建有限状态机并可视化为状态图。
它可以跟最流行的响应式 JavaScript 框架（Vue.js，Ember.js，React.js 以及 RxJS）集成，并基于 W3C 标准来创建有限状态机。

immer

https://github.com/immerjs/immer

test

jest

https://github.com/facebook/jest

jest-when

https://github.com/timkindberg/jest-when

doc

提取文档,然后进行灰度化, 就是一个扫描件了: https://github.com/danielgatis/docscan
图片扫描

PDF

PDF扫描

https://github.com/rwv/lookscanned.io

PDF工具

https://github.com/Frooodle/Stirling-PDF

jsPDF

生成PDF
https://github.com/MrRio/jsPDF 20.3k

pdf.js

https://github.com/mozilla/pdf.js 32.7k
在web端打开pdf格式文件bai

pdfobject

在web端打开pdf格式文件bai
https://github.com/pipwerks/PDFObject 1.7k

html2pdf

https://github.com/eKoopmans/html2pdf.js

excel

https://github.com/mengshukeji/Luckysheet

其它

D3.js

https://github.com/d3/d3 95k
D3的全称是（Data-Driven Documents），顾名思义可以知道是一个关于数据驱动的文档的javascript类库。说得简单一点，D3.js主要是用于操作数据的，它通过使用HTML、SVG、CSS来给你的数据注入生命，即转换为各种简单易懂的绚丽的图形。

D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。