解决 npm i 会重复安装依赖

一个老项目中用到了 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/gcoordhttps://github.com/wandergis/coordtransformhttps://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

字体
http://www.lixuejiang.me/2017/01/02/css%E7%9A%84font-family%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E9%9C%80%E8%A6%81%E5%BC%95%E5%8F%B7/

突破技术封锁发布二维码的方法

现在有些网站出于安全或者利益考虑,已经不允许用户直接发布二维码图片了,比如淘宝、知乎等等,上传的二维码图片会被自动屏蔽或者替换为文本信息。

当然,非要发布还是有办法的。

首先我们要知道网站屏蔽二维码的技术原理,以及你的目标用户对二维码的使用方式(长按识别/摄像头扫描)。

屏蔽二维码的原理:

一般原理应该是,用户上传图片后,服务器上的二维码识别程序会对图片进行扫描,如果发现二维码就进行对应的操作。

应对方法:

应对的核心思想就是对二维码动手脚,让服务器上的程序检测不到二维码,但是又要能让摄像头扫描或者微信识别。

应对方法有多种,适用于不同的场景。

继续阅读“突破技术封锁发布二维码的方法”

Debian 8 GRUB2 自定义默认启动内核

参考链接:http://www.linuxquestions.org/questions/slackware-14/grub2-change-default-to-custom-kernel-4175547962/#post5391277

总结:

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

继续阅读“Debian 8 GRUB2 自定义默认启动内核”

更改 git 提交记录里的名字和邮箱

更改名字和邮箱(作者和提交者):

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 "[email protected]";else git commit-tree "[email protected]";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

 

纯CSS让视频始终居中的四种简单方法

前段时间看到一个有意思的视频展示效果,简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 JS 同时改变每个视频的视窗宽度和视频的位置来实现,属于底层操作,我觉得应该可以更简单一些,只要让视频始终处于容器中间就不用对视频进行位移了。本来想看看文章中提到的 beoplay 页面里是如何做的,结果已经打不开了。。没关系,反正我也做出来了,而且找到了4种方法,CSS 和 JS 均只控制 width,居中则由浏览器自动完成,请看效果

当时看到这个效果的时候,首先就想到了 flex 布局,因为常规布局下当图片以及视频内容宽度超过容器宽度时,常用的 text-aglin:center 和 margin:0 auto 已经无法让内容处于容器的中间,不行不行,给容器加上 overflow:hidden 也不行,但 flex 布局的居中却可以轻松实现此需求。

然后又在学习过程中,想到了另外3种办法:

继续阅读“纯CSS让视频始终居中的四种简单方法”