> 浏览器内的书签汇总,惊喜不断....



# 前端基础书签

[菜鸟教程](https://www.runoob.com/html/html-tutorial.html) 
[w3cschool教程](https://www.w3cschool.cn/html/) 
[Web前端HTML5&CSS3](https://www.yuque.com/u21195183/hfcamg) 
> 语雀-尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版学习笔记 

[Canvas: Draw on the web](https://www.yuque.com/airing/canvas) 
> 语雀-HTML5 Canvas 教程 

[渐变色网站-uigradients.com](https://uigradients.com/#JShine) 
> 高效选择更加恰当的渐变色 

[字体](https://www.dafont.com/search.php?q=PingFangSC-Medium%2C+PingFang+SC)

# 进阶

[vue](https://staging-cn.vuejs.org/) 
[React](https://react.docschina.org/) 
[Angular](https://www.angular.cn/) 
[Fes.js](https://webank.gitee.io/fes.js/) 
[sveltejs](https://www.sveltejs.cn/) 
[animista](https://animista.net/play/basic/slide/slide-left) 
[NGINX 配置](https://nginx.p2hp.com/config/?global.app.lang=zhCN)

## 插件库
[FeHelper ( 浏览器插件 )](https://www.baidufe.com/fehelper/index/index.html) 
> 本插件支持Chrome、Firefox、MS-Edge浏览器，内部工具集持续增加，目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具，甚至在目前新版本的FeHelper中，还集成了FH开发者工具


## UI库

[Ant Design of Vue](https://www.antdv.com/docs/vue/introduce-cn/) 
[Element-UI 组件库](https://element.eleme.cn/#/zh-CN/component/installation) 
[Element Plus](https://element-plus.gitee.io/zh-CN/) 
[iView-UI 组件库](https://www.iviewui.com/docs/guide/i18n) 
[layui-UI 组件库-----停止维护](http://www.layui.com/) 
[vue-beauty2](https://fe-driver.github.io/vue-beauty/#/components/start) 
[mint-UI 组件库](http://mint-ui.github.io/docs/#/zh-cn2) 
[Vant 移动端Vue组件库](https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/) 
[FrozenUI](https://frozenui.github.io/) 
> FrozenUI 是一套基于移动端的UI库轻量、精美、遵从手机 QQ 设计规范 

[LuLu UI](https://l-ui.com/) 
> Edge主题使用原生JavaScript编写，使用了JavaScript和CSS前沿的新语法和新特性，React和Vue项目均适用。 

[mpvue-UI 组件库](http://mpvue.com/) 
> mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 

[AT UI](https://at-ui.github.io/at-ui/#/zh) 
> AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品 

[cube-ui移动端UI](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction) 
> Cubeui,滴滴出行基于Vue.js的移动端组件库,该技术拥有质量可靠、体验极致、标准规范和强扩展性这四大特点,并拥有独特的后编译技术方案帮助大幅优化性能。 

[graceUI 官网 - 微信小程序 UI 框架 | uni-app UI框架](http://grace.hcoder.net/) 
[Muse-UI 移动端Vue组件库](https://muse-ui.org/#/zh-CN/installation) 
[Shineout UI](https://shine.wiki/1.2.x/en#/components/GetStart) 
[Naive UI - Vue 3 组件库](https://www.naiveui.com/zh-CN/os-theme) 
> Vue 3 组件库比较完整，主题可调，使用 TypeScript 

[Quasar Framework](https://quasar-framework.org/) 
> Vue 3 组件库 

[Headless UI](https://headlessui.dev/) 

[Tailwind CSS 是一个功能类优先的 CSS 框架](https://www.tailwindcss.cn/) 
> Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

## 图表库

[ECharts](http://echarts.baidu.com/) 
[Highcharts](http://www.hcharts.cn/) 
[vCharts](https://v-charts.js.org/#/) 
[F2 - AntV](https://antv.alipay.com/zh-cn/f2/3.x/tutorial/index.html) 
[heatmap](https://www.patrick-wied.at/static/heatmapjs/) 
> Dynamic Heatmaps for the Web 

[Draft](https://draftjs.org/docs/api-reference-character-metadata) 
[Leaflet](https://leafletjs.com/examples.html) 
[maptalks](https://maptalks.org/) 
> An open-source javascript library for integrated 2D/3D maps 


[中国地图 | JShare](https://jshare.com.cn/highmaps/FSSm7A) 

[mars2d](http://leaflet.marsgis.cn/examples.html#baselayer) 

[中国各省市县级 JSON 文件](https://blog.csdn.net/lzhlzz/article/details/41347929) 

[GEOJSON标准格式学习](https://www.jianshu.com/p/852d7ad081b3)

## Lodash 
[Lodash 中文文档](https://www.lodashjs.com/) 

## NextJs
[Next](http://nextjs.frontendx.cn/) 

[Next中文文档](https://www.cnblogs.com/mybilibili/p/11722302.html) 

## NuxtJs
[Nuxt.js](https://zh.nuxtjs.org/) 

## Vite
[Vite中文网](https://vitejs.cn/guide/why.html) 

## Node
[Egg](https://eggjs.org/zh-cn/intro/) 

## css-doodle
[css-doodle](https://css-doodle.com/) 

## 混合开发
[UniApp](https://uniapp.dcloud.io/quickstart) 
[Taro UI | O2Team](https://taro-ui.aotu.io/#/) 
[Flutter中文网](https://flutterchina.club/) 
[hippyjs](https://hippyjs.org/?from=thosefree.com#/guide/integration) 

## 离线存储
[localForage 中文文档](https://localforage.docschina.org/) 
[vuex持久化 vuex-persistedstate](https://www.jianshu.com/p/c22861ec5f21)

## 滚动相关
[Vuescroll.js](https://vuescrolljs.yvescoding.org/) 
[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) 
[iScroll5 API 中文版](http://caibaojian.com/iscroll-5/config.html) 
> iScroll的版本 
> 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 
> 目前我们有以下版本： 
- iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
- iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
- iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
- iscroll-zoom.js，在标准滚动功能上增加缩放功能。
- iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。


# 微前端
[qiankun](https://qiankun.umijs.org/zh/guide) 
[微前端框架调研](https://www.cnblogs.com/givingwu/p/15899672.html) 
[webpackjs](https://www.webpackjs.com/plugins/) 
[qiankun + vue3 实现子应用 vuex 数据共享](https://juejin.cn/post/6971672840122990623) 
[qiankun 微前端实践总结](https://juejin.cn/post/6856569463950639117#heading-1) 
[微前端模块共享分析](https://juejin.cn/post/6984682096291741704) 
[基于 qiankun 的微前端最佳实践](https://www.jianshu.com/p/ec7d2d0a6e56) 
[如何快速开启前端团队的微前端架构](https://zhuanlan.zhihu.com/p/124068996) 
[无界极致的微前端框架](https://wujicode.cn/xy/app/prod/official/index) 

# 低代码
[react-flow](https://github.com/wbkd/react-flow) 
> 高度可定制的库，用于构建基于节点的交互式UI，编辑器，流程图和图表

[基于 Low-Code Engine 快速打造高生产力的低代码研发平台](https://lowcode-engine.cn/) 
[页面可视化搭建工具技术要点](http://www.alloyteam.com/2019/07/h5-build-tool-pipeline/#prettyPhoto) 
[sparrow-js](https://zhuanlan.zhihu.com/p/268675617) 
[luban-h5](https://www.cnblogs.com/yehuisir/p/13533234.html) 
[f-render表单设计器](https://dream2023.gitee.io/f-render/) 
[组件自定义交互实现](https://zhuanlan.zhihu.com/p/285272849) 
[Dooring可视化之从零实现动态表单设计器](https://zhuanlan.zhihu.com/p/221983171) 
[H5页面制作平台](http://h5.dooring.cn/)

# 游戏框架
[Babylon](https://www.babylonjs.com/) 
[Cocos](https://docs.cocos.com/creator/manual/zh/) 
[LayaAir 2.0](https://www.layabox.com/) 
[Aotu.io](https://aotu.io/notes/2017/12/27/h5-game-engine-recommend/) 
[Pixi.js](https://pixijs.huashengweilai.com/guide/start/1.introduction.html) 
[Hilo](http://hiloteam.github.io/index.html) 
[Unity中文手册](https://docs.unity.cn/cn/current/Manual/index.html) 
> 使用 Unity Editor 可创建 2D 和 3D 游戏、应用程序和体验。

# web埋点监控
[Webfunny前端监控系统](https://www.webfunny.cn/des.html#quickstart-clone) 
[7 天打造前端性能监控系统 - FEX](http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/)

# 爬虫
[js爬虫框架](https://www.spiderflow.org/) 

# 设计网站

[Lugia](http://lugia.tech/#/) 
[Pexels 素材图片](https://www.pexels.com/zh-cn/search/%E5%A4%A9%E7%A9%BA/) 
[FECS Plugins](http://fecs.baidu.com/plugins) 

# 安卓/iOS
[Android 开发者](https://developer.android.google.cn/docs) 
[iOS与JS交互的4种方法](https://blog.csdn.net/dolacmeng/article/details/79623708) 
[IOS应用测试及发布（Hbuilder版）](http://www.jianshu.com/p/b61a39b199ff) 
[Android 读取、接收、发送 手机短信](https://blog.csdn.net/lyshark_lyshark/article/details/125848613)

# 实用网站
[七牛云](https://sso.qiniu.com/) 
> 资源OSS处理 


[WindTerm](https://kingtoolbox.github.io/) 
[getpostman](https://web.postman.co/) 
[think-api](https://docs.topthink.com/think-api/1888715) 
[chrome扩展开发中文教程](http://chrome.cenchy.com/) 
[写给中高级前端关于性能优化的9大策略和6大指标](https://juejin.cn/post/6981673766178783262) 
[前端API层架构](https://juejin.im/post/5de7169451882512454b18d8) 
[你不知道的 Chrome 调试技巧](https://juejin.cn/book/6844733783166418958/section/6844733783187390477) 
[https证书制作/申请](https://www.jianshu.com/p/1163d1ae8029) 
[lilishop商城](https://gitee.com/beijing_hongye_huicheng/lilishop) 
[SQL 开发入门教程](https://www.yuque.com/fcant/sql/op54ut) 
[LNMP一键安装包 配置 Linux+Nginx+Mysql+PHP](https://blog.csdn.net/u014472643/article/details/79150781) 
[Maven安装与配置](https://www.cnblogs.com/eagle6688/p/7838224.html) 
[前端: 如何快速将应用封装成js-sdk](https://zhuanlan.zhihu.com/p/324556175) 
[Vue 3.0 企业级项目实战 ](https://juejin.cn/book/6933939264455442444) 
[文件上传8种场景](https://juejin.cn/post/6980142557066067982) 
[热图推荐](https://www.meiye.art/canvas) 
> 大量免费大厂素材，合集较多，不建议放过

前端程序员的书签集合-开发库相关

[现代 JavaScript 教程](https://zh.javascript.info/)


![image.png](https://seek.wiki/static/img/1a38c5553e190618eb825f790c8ab078.image.png)

![image.png](https://seek.wiki/static/img/73bdbedf622c25b9ae46b574c739cb61.image.png)


![image.png](https://seek.wiki/static/img/3cbe5be6c2fbd9beec63c4ee03b6683b.image.png)


![image.png](https://seek.wiki/static/img/3dd57ebcb1319700b8f32b86f767c3bc.image.png)

强推高级web相关电子书

# 前置

 服务器为Centos7.4版本;服务器端口要注意打开使用的端口才可访问。
 


## 公共安装

### 常用命令

- 设置777权限给web
```
chmod -R 777 /web
```
- 常用重启方法
```
systemctl restart mysqld
systemctl restart nginx
systemctl restart php74-php-fpm
```
- docker查询
```
docker ps -a
```
- 重启docker（15533ecf9c16 为dockerId）
```
docker restart 15533ecf9c16
```
- 查看通过pm2启动的node项目
```
pm2 list
pm2 log id(填list > id)
```
- 磁盘空间占用
```
df -h
```
- 磁盘空间Inodes占用率（碎片文件索引）
```
df -i
```
 

### 安装pip

- 查询pip版本
```
pip -V
```
- 升级pip版本
```
pip install --upgrade pip
yum -y install epel-release
yum -y install python-pip
pip3 install --upgrade pip
```
- 镜像源改国内
```
pip3 install cryptography==3.4.8
```

# 安装nginx

- 远程下载安装包
```
cd /
```
```
wget http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm
rpm -ivh nginx-release-centos-6-0.el6.ngx.noarch.rpm
```
```
yum install nginx
```
```
systemctl start nginx
```
- nginx具体代理配置

[nginx中文网](http://nginx.p2hp.com/)
 
- 异常启动无效
```
systemctl status nginx
ps -aux|grep nginx
kill -9 4787
systemctl status nginx
systemctl start nginx
```
 
# 安装docker

- 远程下载安装包
```
cd /
```
```
curl -sSL https://get.daocloud.io/docker | sh
``` 
- 开机自启动
```
systemctl enable --now docker
```
- 安装docker-compose
```
pip3 install docker-compose
```
- 查看版本
```
docker-compose -version
```
- 启动docker
```
docker-compose up -d
```
 
# 安装mysql

- 远程下载安装包或者官网手动下载
```
wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.40-1.el7.x86_64.rpm-bundle.tar
```
- 解压
```
tar xvf mysql-5.7.40-1.el7.x86_64.rpm-bundle.tar 
```
- 手动解压，顺序要注意
```
rpm -ivh mysql-community-common-5.7.40-1.el7.x86_64.rpm 
rpm -ivh mysql-community-libs-5.7.40-1.el7.x86_64.rpm --force --nodeps
rpm -ivh mysql-community-libs-compat-5.7.40-1.el7.x86_64.rpm
rpm -ivh mysql-community-client-5.7.40-1.el7.x86_64.rpm --force --nodeps
rpm -ivh mysql-community-server-5.7.40-1.el7.x86_64.rpm --force --nodeps
```
- 启动mysql
```
systemctl start mysqld
```
- 查看临时密码
```
grep password /var/log/mysqld.log
```
- 登录mysql
```
mysql -u root -p
```
- 登录临时密码要修改密码才可进行下一步
```
musql> use mysql;
mysql> set password=password("youpassword");
mysql> exit;
```
- 安装完后外网想要访问，需要将root的访问权限改为%,然后操作刷新数据库
```
mysql> update user set host='%' where user='root';
mysql> flush privileges;
mysql> exit;
```
 
# 安装php

- 远程下载安装包
```
yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
```
- 全局安装
```
yum install -y php74-php-fpm php74-php-cli php74-php-bcmath php74-php-gd php74-php-json php74-php-mbstring php74-php-mcrypt php74-php-mysqlnd php74-php-opcache php74-php-pdo php74-php-pecl-crypto php74-php-pecl-mcrypt php74-php-pecl-geoip php74-php-recode php74-php-snmp php74-php-soap php74-php-xml php74-php-imagick php74-php-pecl-zip php74-php-redis php74-php-swoole
```
```
systemctl start php74-php-fpm
```
- 开机自启动
```
systemctl enable php74-php-fpm
```
```
cp /usr/bin/php74 /usr/bin/php
chmod +x /usr/bin/php
```
```
systemctl restart php74-php-fpm
```
 
# 安装node

- 远程下载安装包或者官网手动下载
```
wget https://cdn.npm.taobao.org/dist/node/v12.13.1/node-v12.13.1-linux-x64.tar.xz
```
```
xz -d node-v12.13.1-linux-x64.tar.xz
```
```
tar -xvf node-v12.13.1-linux-x64.tar
mv node-v12.13.1-linux-x64 /usr/local/
mv /usr/local/node-v12.13.1-linux-x64/ /usr/local/node
```
- 全局变量设置

```
vim /etc/profile

# 文件末尾增加内容：
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH
```
- 执行更新
```
source /etc/profile
```
- 安装校验
```
node -v
npm -v
```
- 可选安装全局yarn
```
npm install yarn -g
```
 
# 安装pm2

- 全局pm2
```
npm install pm2 -g
```
- 安装校验
```
pm2 -V
pm2 list
```
```
// 启动项目(例子)
cd /web/egg/seek-egg/
pm2 start npm --name egg -- run start
cd /web/mock_engineering/public/mock_server/
pm2 start npm --name 'mock_server' -- run start
```

# 后续扩展

[独角数卡安装redis+supervisor](https://seek.wiki/post/35)

原创：关于Centos7.4部署分步集成docker+nginx+php+mysql+node

加密信息

## 创建光标
可以使用CSS的@keyframes规则来创建光标闪烁动画。



### code

```html
<div class="custom-cursor"></div>
```

```css
.custom-cursor {
 position: fixed;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
 background-color: #000;
 border-radius: 50%;
 animation: blink 0.5s infinite alternate;
 z-index: 9999;
}

@keyframes blink {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
```

在这个例子中，我们创建了一个名为“custom-cursor”的div元素，并将其定位在屏幕的左上角。我们给它一个黑色的背景和圆形边框，并使用border-radius属性将其圆形化。

我们然后使用animation属性将“blink”动画应用于该元素。在“blink”动画中，我们使用@keyframes规则定义了光标的闪烁效果。在0％时，光标完全不透明；在100％时，光标完全透明。

最后，我们将z-index属性设置为9999，以确保光标始终显示在其他元素的顶部。

请注意，此代码将创建一个简单的光标，但您可以根据需要进行更改和自定义。

## 当然手写光标需要注意

1. 当没有实际值，只有placeholder值，需要光标在前
2. 当有实际值，光标需要在值后2px左右