怀念啊我们的青春啊不知从何时开始，脚手架和构建似乎成了前端绕不过去的一个步骤，本来HTML+JS+CSS组合只需一个带文本高亮的简易编辑器就可以直接开始写代码了，现在却要天天和node、python、npm、webpack(vite)、babel、sass(less)等一堆的玩意儿打交道，有点情怀的“老程序员”可能都会怀念那个没有构建、一个Ctrl+S就可以直接保存生效甚至直接去发布的感觉。越来越... 阅读全文
方法首先，找到你想批量添加的图片地址，比如 https://www.iconfont.cn/collections/detail?cid=22664 ： 打开控制台，粘贴如下代码执行，稍等几秒钟，不出意外的话180个图片已经全部添加到购物车了 [...document.querySelectorAll('.block-icon-list li span[title="添加入库"]')].f... 阅读全文
什么是frpfrp是一个使用非常简单的开源内网穿透软件，代码地址：https://github.com/fatedier/frp ，使用条前提你需要有一台公网服务器，大致原理是：公网服务器监听某个端口等待内网服务器连接，内网服务器连接成功后用户访问公网的某一个端口，访问的所有内容都会转发到内网服务器，也就是所有的请求都会经过公网服务器转发一次，还不是真正的完全内网穿透。 准备工作 准备一台公网... 阅读全文
其实整个系统重装和迁移在6月12晚上就完成了（花了好几个小时，一直搞到凌晨），只不过由于mysql换了版本导致时间插入一直有问题，一直没时间解决，今天才把重装过程补上来。 背景现在在用的ECS服务器还是2015年买的，当时为了省空间故意挑选了比较老的centos6.5系统，空间是省下来了，后面暴露的问题越来越多了。时间来到了2022年，连centos官方都已经放弃维护了，我用的却还是上古... 阅读全文
如题Chrome不知道从哪个版本开始，更改了一个非常傻逼的默认设置，默认隐身窗口禁用第三方cookie，这给各大网站带来非常大的不便。 什么是禁用第三方cookie，比如我在www.baidu.com 跨域调用 www.qq.com 的接口，即便我非常信任这个接口，明确这个接口是可信任的，且添加了SameSite=None、credentials: 'include'等设置，任然无法把 www.... 阅读全文
强制下载通过给某个URL设置Content-Disposition头部，可以强制浏览器把它当成一个附件去下载，而不是在浏览器中打开，甚至还可以指定下载保存的文件名，其优先级高于有类似作用的download属性： Content-Disposition: inlineContent-Disposition: attachmentContent-Disposition: attachment; fi... 阅读全文
网上几乎所有文章都是错的网上有2类文章： 一类是toFixed科普文章，像W3CSchool直接说toFixed是按照四舍五入，这属于完全错误的，甚至MDN都完全没有提到如何舍入；还有一类是介绍toFixed的坑的文章，这类文章一般都有部分错误，网上绝大部分文章都指出，toFixed是按照银行家舍入法来执行的，实际测试并非如此。 所谓银行家舍入法：四舍六入五看情况，五后非零直接入，五后为零... 阅读全文
用CSS给图片增加圆角一行border-radius就搞定，PS却一直不会，今天特意学习了下。 打开一张图片，全选： 选择 —> 修改 -> 平滑： 设置圆角大小： Ctrl+Shift+I反选，Delete删除，搞定！（记得右键 -> 取消选择） ... 阅读全文
写在前面无意中发现从百度搜索打开的页面可以通过document.referrer拿到上一个页面的完整URL（地址格式一般类似https://www.baidu.com/link?url=xxxxxxxx），而通过谷歌搜索打开的新页面只能拿到上一个页面的域名、不包括path部分（形如https://www.google.com/），猜测一定是百度做了什么特殊处理，测试了一下： 测试代码： fet... 阅读全文
如上图：已知config是从接口读取的，由于历史原因前端把图片宽度写死了，现在需要替换图片，但是宽度变了，问：如何在不改前端代码只改接口的情况下将图片宽度修改成指定宽度。 答案： 一开始想到的方法绕了一个大弯： var config = { src: 'xxx.png', tip: '这是提示<script>setTimeout(function(){var a ... 阅读全文
测试最大带宽speedtest-cli是一个用Python编写的轻量级Linux命令行工具，在Python2.4至3.4版本下均可运行，安装： yum install python-pip –ypip install speedtest-cli 输入speedtest-cli测试最大下载和上传带宽（下图中的单位Mbit/s需要除以8才是我们一般说的多少M/s）： 显示实时网速也就是类似3... 阅读全文
误区一：是否区分协议和端口受阮一峰某篇博客里面错误描述影响： 网上大把的文章都说Cookie作用域由protocol、domain、和port决定，实际上这是大错特错的，比如下面这位同学，有人在网上问“cookie作用域区分协议和端口吗”，然后他像贴圣旨一样把阮一峰博客的截图贴一下： 这篇博客是它16年写的，尽管评论里面有很多人指出来这个地方写错了，但他时至今日仍没有更正过来。 ... 阅读全文
2行代码生成指定长度字符串/** * 生成长度为len的包含a-z、A-Z、0-9的随机字符串 */function generateStr(len = 18) { // 一行代码生成0-9、A-Z、a-z、总长度为62的字符数组 var arr = [...new Array(62)].map((item, i) => String.fromCharCode(i + (i ... 阅读全文
本以为下面这行代码就可以实现： (new Array(5)).map((item, idx) => idx) 但是： 至于为什么会是这样，我没有仔细追究，如果有知道的朋友欢迎指出。 正确方法： // 第一种方法Array.apply(null, {length: 10}).map((item, idx) => idx)// 第二种方法[...new Array(10)].... 阅读全文
区别： p:first-child的含义：匹配父元素的第一个子元素、并且这个元素必须是P，如果不是则匹配不到；p:first-of-type的含义：匹配父元素的第一个类型是P的子元素； 最大误区：大部分人刚开始接触时会想当然以为first-child是first-of-type的效果，但其实，first-of-type才是大部分人想要的。 示例： <style>p:firs... 阅读全文
问题描述组件A里面引用组件B，组件B同时又引用组件A，就这么简单，但是总是报如下错误： [Vue warn]: Failed to mount component: template or render function not defined最小复现代码index.vue：<style>.test-node { border: solid 1px #aaa; margi... 阅读全文
正文源自组内一个文件上传组件，从某个版本开始，同学A觉得代码里面有太多没被引用的变量就把它全删了，但是他没发布，后来同学B基于这个代码发布了一个新包，结果，bug出现了。 原始代码： function render() { const {className, onChange, ...others} = this.props; return <Uploader classNa... 阅读全文
windows系统windows系统默认自带了这个命令； Mac 系统需要自行安装tree：执行brew install tree安装。 使用： tree 显示当前目录所有文件和目录tree -L 3 只显示到第三层tree -L 3 -C 给目录加上颜色；tree -L 2 -C -a --dirsfirst：-a显示隐藏文件，目录靠前 效果如下： ├── artist│ ├... 阅读全文
如题出于安全考虑，普通页面直接执行window.close()时不会生效，控制台会出现如下警告： Scripts may not close windows that were not opened by script. 只有那些通过<a target="_blank">链接</a>或者window.open()打开的页面才支持关闭，为什么这么规定呢？我猜大概可能是觉得... 阅读全文
先看示例： <html><body> <p>form内任意一个输入框回车都会触发表单提交：</p><form onsubmit="handleSubmit(event)"> <p>姓名: <input type="text" name="name" /></p> <p>性... 阅读全文