我的目标在远方
在用Vue开发项目时，有时候希望Vue的响应式系统能忽略掉一些特定对象，特别是一些数据量比较大的对象，比如地图实例，如果变成响应式对象会极大地降低地图的性能。经测试发现会降低70%甚至更多。
自己一个人开发还好，只要注意不赋值给响应式变量（data选项中定义的变量）即可，但多人合作时，难免每个人任何时候都不出错，一旦一个地方没注意，整个地图实例都会被改为响应式对象。
以前也查过资料、看过源码，都没有在Vue2中找到比较好的方法来处理这个屏蔽响应式的问题。（Vue3中通过 markRaw 或者 shallowReactive、shallowRef 来处理对象即可。）
最近因为开发一个公共的地图工具，而工具使用方刚好就是用 Vue 开发的项目，于是又研究起了这个问题，我希望工具这边能主动屏蔽响应式，降低使用者的心智负担。
在查源码，有了惊喜发现，Vue2.7 因为回迁了Vue3的一些特性，让Vue2也支持了主动屏蔽响应式，方法很简单，只需要给对象增加一个真值属性 __v_skip 即可，支持[email protected]+。
赶快用起来吧~~
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
iconUrl: require('leaflet/dist/images/marker-icon.png'),
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})来源：https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-269750768
一个老项目中用到了 leaflet 这个地图操作库，最近项目升级，需要使用 supermap，于是安装 @supermap/iclient-leaflet（依赖 leaflet），然后程序报错。
经检查，发现原始安装的 leaflet 版本为 1.5.1，而 iclient-leaflet 依赖 1.7.1，造成程序中同时引用了2个不同版本的 leaflet 导致错误，于是升级 leaflet 至 1.7.1。
一切就绪，run——错误依旧，无语.jpg。
继续排查，发现 npm 居然会重复安装 leaflet 1.7.1：通过 npm list leaflet 查看其依赖树为：
+-- @supermap/[email protected] | `-- [email protected] （此处重复） +-- [email protected] | `-- [email protected] | `-- [email protected] deduped `-- [email protected]
于是通过 npm ddp （或 npm dedupe） 清理重复依赖，问题解决。
基础资料
MDN https://developer.mozilla.org/zh-CN/docs/Web
CSS手册 https://tympanus.net/codrops/css_reference/
前端题目
https://github.com/haizlin/fe-interview
https://q.shanyue.tech/
前端周刊、日报
https://github.com/tnfe/TNT-Weekly
https://github.com/kujian/frontendDaily
https://github.com/tower1229/frontend-weekly
https://github.com/ascoders/weekly
https://github.com/sorrycc/weekly
https://www.yuque.com/mmfe/weekly
算法
https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md
CSS技巧
https://github.com/chokcoco/iCSS
https://chokcoco.github.io/CSS-Inspiration
CSS加载
https://connoratherton.com/loaders
https://projects.lukehaas.me/css-loaders/
https://loading.io/css/
https://365webresources.com/best-pure-css-loading-spinners/
https://icons8.com/cssload
https://loading.io/spinner/
https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l
https://joebell.co.uk/sketches/loading-disco
JavaScrit
现代 JavaScript 教程 https://zh.javascript.info
33个JS概念：https://github.com/stephentian/33-js-concepts
ajax
http://louiszhai.github.io/2016/11/02/ajax/
Promise 资料
https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/Promises%E8%AF%AD%E6%B3%95
https://es6.ruanyifeng.com/#docs/promise
https://github.com/ljianshu/Blog/issues/81
https://segmentfault.com/a/1190000014938839
Vue
路径 https://segmentfault.com/a/1190000016120011#articleHeader6
Vue3
https://juejin.cn/post/6940454764421316644
https://juejin.cn/post/6914862150872170509
Vue Hooks
VueUse https://vueuse.org
vue-use-web https://github.com/Tarektouati/vue-use-web
vue-use-gesture https://github.com/koca/vue-use-gesture
OpenLayers 学习资料
https://iclient.supermap.io/web/books/modern-web-gis-in-action/kai-fa-zhi-nan/for-openlayers/zhun-bei.html
http://linwei.xyz/ol3-primer/ch01/index.html
https://www.zhihu.com/column/c_1098918318844612608
动画
PAG https://pag.io
https://svga.io
https://animejs.com https://www.animejs.cn
https://github.com/Tencent/vap
Raphael.js
svg.js https://github.com/svgdotjs/svg.js
TweenMax
Animater https://github.com/cutting-mat/animater
Nginx
https://xuexb.github.io/learn-nginx/
https://nginx-playground.wizardzines.com
https://ssl-config.mozilla.org
飞线
https://github.com/jsplumb/jsplumb
https://github.com/Molunerfinn/markline.js
https://github.com/anseki/leader-line
https://github.com/stonerao/flyLine
新用户/新功能引导
shepherd.js https://github.com/shipshapecode/shepherd
落地页模板
https://github.com/nordicgiant2/awesome-landing-page
效果集合
https://github.com/lindelof/awesome-web-effect
粒子：https://github.com/lindelof/particles-bg
下雨：https://github.com/codrops/RainEffect
GIS
坐标转换 https://github.com/hujiulong/gcoord ，https://github.com/wandergis/coordtransform ，https://github.com/CntChen/tile-lnglat-transform
360全景
https://ourcodeworld.com/articles/read/843/top-7-best-360-degrees-equirectangular-image-viewer-javascript-plugins
Three.js https://threejs.org/
360-image-viewer https://github.com/Jam3/360-image-viewer
Kaleidoscope https://github.com/thiagopnts/kaleidoscope
Panolens.js https://github.com/pchen66/panolens.js
Panellum https://github.com/mpetroff/pannellum
Photo Sphere Viewer https://github.com/mistic100/Photo-Sphere-Viewer
Marzipano https://github.com/google/marzipano
小程序
mpx https://github.com/didi/mpx
Taro https://github.com/NervJS/taro
Wepy https://juejin.cn/post/6844903478184148999
Vite2 已经发布，尝试将一个基于 Vue CLI 创建的 Vue2 项目迁移到 Vite 上来，多个地方需要调整，在此记录。
npm i -D vite
npm i -D vite-plugin-vue2
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
plugins: [
createVuePlugin()
]
最近用到 video.js 来播放 HLS 视频，因为视频为实时监控画面，所以不需要单击暂停功能，以免用户误操作。
网上大多数解决办法都是通过CSS来屏蔽鼠标事件：
.vjs-tech {
pointer-events: none;
}
继续阅读“video.js 7 禁用单击暂停，保留双击全屏” 我一直以为在 production 模式下打包发布的 Vue 应用没法使用 Vue Devtools，原来我错了。
Vue Devtools 的开启条件是由 Vue 基类的 config.devtools 属性控制的，只要其值为 Truthy 即可开启。
继续阅读“production 模式下开启 Vue Devtools”现在有些网站出于安全或者利益考虑，已经不允许用户直接发布二维码图片了，比如淘宝、知乎等等，上传的二维码图片会被自动屏蔽或者替换为文本信息。
当然，非要发布还是有办法的。
首先我们要知道网站屏蔽二维码的技术原理，以及你的目标用户对二维码的使用方式（长按识别/摄像头扫描）。
一般原理应该是，用户上传图片后，服务器上的二维码识别程序会对图片进行扫描，如果发现二维码就进行对应的操作。
应对的核心思想就是对二维码动手脚，让服务器上的程序检测不到二维码，但是又要能让摄像头扫描或者微信识别。
应对方法有多种，适用于不同的场景。
1、编辑 /etc/default/grub
GRUB_DEFAULT=saved
2、查看所有启动菜单入口
grep "submenu\|^\smenuentry" /boot/grub/grub.cfg | cut -d "'" -f2,4
输出格式为：标题’ID （中间以 ‘ 号间隔）
结果中含“Advanced options”的一行是 submenu ，底下紧跟的行是 menuentry。
3、设置默认启动菜单（内核），使用步骤2中的 ID 而非标题
#grub-set-default "(submenu ID)>(menuentry ID)"
4、重新生成 /boot/grub/grub.cfg
#grub-mkconfig -o /boot/grub/grub.cfg
更改名字和邮箱（作者和提交者）：
git filter-branch -f --commit-filter 'if [ "$GIT_AUTHOR_NAME" = "xxxxxxxx" ];then GIT_AUTHOR_NAME="yyyyyy";GIT_AUTHOR_EMAIL="[email protected]";GIT_COMMITTER_NAME="yyyyyy";GIT_COMMITTER_EMAIL="[email protected]";git commit-tree "$@";else git commit-tree "$@";fi' HEAD
git filter-branch 会生成备份，可以删除：
删除某个分支备份：
git update-ref -d refs/original/refs/heads/分支
或者（删除所有备份）：
git for-each-ref --format="%(refname)" refs/original/ | xargs -n 1 git update-ref -d