解决 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].2.4
| `-- [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

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

落地页模板
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/

理解 grid 布局中的长度单位 fr

CSS 中有很多的长度单位fr 也是其中之一。

fr 单位专用于 grid 布局,意为 fraction(分数),额,好像也不是很好理解~

对比 px(像素)、em(文字)、vw(窗口),fr 好像缺了一个中文名字,来帮助大家理解。

所以我自告奋勇,凭借对 grid 布局还自觉得比较理解的基础上,给 fr 起了一个中文名字:份(儿),代表占剩余空间份数,这个剩余空间是指除去已知的宽度(包括px、%、grid 间隔等)之后的剩余空间。

读音相近,意思也差不多,我个人对这个名字还是比较满意的~

grid-template-columns: 150px 1fr;

//grid 容器分为了2列,第一列宽度150px,第二列占剩余空间1份儿,因为剩余空间只分成了1份儿,所以第二列也就是全部剩余空间。这种情况下,第二列写 100fr 也是相同的效果。
grid-template-columns: 150px 2fr 3fr;

//grid 容器分为了3列,第一列宽度150px,第二列占剩余空间(100% - 150px)的2份儿,第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿,第二列占2份儿,第三列占3份儿。

怎么样,是不是觉得 fr 很好理解了。

玩游戏

经常有人玩着英雄联盟、王者荣耀问我平时玩不玩游戏,我说不玩。

仔细想想,其实也不是完全不玩,只是很少玩,而且玩的都是些小游戏,毕业之后玩得最多的应该是电商活动小游戏,比如淘宝、京东、支付宝APP里的小游戏。

当然偶尔也会玩一下其他的游戏。比如前年,我偶然在一个网站上看到一个游戏介绍(链接)。跟其他游戏相比,这界面——神秘无比,啥都没有~,你甚至会怀疑这到底是不是游戏。我试着玩了一下,发现还挺有意思~~,接下来花了一个星期,每天玩一会儿,把游戏通关了。

继续阅读“玩游戏”

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

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

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

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

屏蔽二维码的原理:

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

应对方法:

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

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

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