十一长途骑行回家的尝试

长途骑行回家的想法,我很早之前就有了,直到九月十几号我才知道今年国庆竟然有8天假。于是我就退掉了回家的车票,准备尝试一下骑行回家。我老家河南周口市,距离上海700km,计划的是四天骑完,不过因为天气原因只骑了两天,后半程乘的高铁。 骑的还是死飞车,这辆车是两个月前新装好的,整车只有7kg。 我之前的骑行经历也算丰富,各种装备也都有,这次我买了一个更香的装备————水袋。我去年买的一个骑行背包正好……

sync-player:使用websocket实现异地同步看视频

前段时间我有这样一个需求,想和一个异地的人一起看电影,先后在网上找了一些方案,不过那几个方案都有一些缺点 coplay 一个浏览器插件,只能播放各大视频网站的视频,视频资源有限,我想要看的视频没有,比如一些经典电影和美剧之类 微光APP 还是上面的问题,而且只有手机端 向日葵等远程桌面 受限于网络问题,卡顿很严重,体验不好 除了这几个方案之外我也尝试了直播的方案: 通过B站等直播平台进……

使用粘性定位(position:sticky)实现固定表头、固定列的表格组件(Vue、React)

最近重构的项目中有这样一个页面,一个固定表头和列的表格,表格列数较多,大概有60多列,200多条数据,而且表格需要实现拖拽滚动功能。原页面的表格是用的一个比较老旧的表格插件实现,拖拽滚动是用iScroll.js实现的,性能很差,即使每页只有二、三十条数据,拖拽起来也严重卡顿。我首先使用了element-ui自带的的table组件实现了拖拽滚动的功能,性能稍微比老页面强了一点,每页50条数据时卡顿不……

DIY一台三屏移动工作站

首先展示下最终效果图,就是这么个玩意,一台联想笔记本+两台便携显示器,笔记本屏幕为15.6,右边那台稍大的显示器尺寸为17.3。左边的显示器的通过铰链和机身连接,可以不用拆下来与机身一起携带,右边那台配合显示器底座使用,不过也能拆卸下单独携带,拧下几个螺丝即可,也不是很麻烦。 做这个玩意能干啥?作为前端er来说,用单屏开发是一件比较蛋疼的事情,前端在日常开发时,需要同时打开IDE、设计图、浏览……

小米手机刷MIUI国际版折腾记录

本人现在使用的是一部红米NOTE5,配置是高通骁龙636+6G+64G,之前用的系统都是MIUI9,一直都没更新过,最近更新了MIUI11,就准备升级一下,更新了国行的系统之后发现广告太多实在受不了。就刷了个MIUI国际版,记录一下折腾的过程。 MIUI国际版优点:广告较少,带有谷歌服务框架。 解锁bootloader具体教程可参官网文章:小米手机解锁 Bootloader 教程和常见问题,新手机……

一个js数组分类求和算法

需求详情:一个数组内有N个元素,元素有类型、名称、数量1、数量2等属性,计算出各类型元素的数量、数量1、数量2的和。 实际需求就是做出下图这样一个表格,各类型的合计信息用红色字体显示: 原始数据格式如下: const rawData = [ { type: '类型A', name: '名称1', count1: 13, count2: 24,……

使用js-xlsx插件导出多级表头excel

最近项目里有这么一个需求,把一个多级表头的table导出为excel格式。然后在网上找到一篇文章:js-xlsx导出自定义合并列头实现思路,我按照他的教程操作之后发现比较繁琐,这篇文章的思路就是就是新建一个excel,然后用js来读取它的多级表头数据,再把json格式的表头数据复制到项目中使用。核心就是这个json格式的多级表头数据,这样一个多级表头导出来是这个样子的: { &……

vue项目watch内的函数重复触发问题

问题描述:有两个页面A和B,每个页面里都有一个getList()方法。这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦。为了避免在切换A、B两个界面重复选择参数C的问题,我将参数C存入vuex中,然后在两个页面里都使用watch监听参数C来执行getList()方法。然后发现一个问题,从A页面进入B页面后,在B页面重新选择参数C,A页面的getList()方法竟然也会被执行,反之亦……

使用Travis-CI部署hexo博客到腾讯cos&github-pages

前言以前我的博客静态文件是放在一个带宽1Mbps的腾讯云主机上,文章里的图片也是放在云主机上的,当有些文章图片较多的时候,加载就会变得很慢。后来我将静态文件和图片全部迁移到腾讯对象存储(cos)里,并配置了CDN加速,从此加载速度不再是瓶颈,可以做到基本秒开。 具体方案是将静态文件和图片文件分别放到两个存储桶里,放静态文件的存储桶CDN设置博客主域名,放图片的存储桶CDN设置二级域名,比如我设置了……

使用FLEX实现一种上下高度不固定的自适应布局

此布局的需求是:头部高度不固定,由子元素撑高,中间内容高度不固定,自动填满父容器剩余高度,底部高度固定。 这种布局是下面这种布局的变种: 头部和中间内容都变成了不固定的,一般用于后台管理系统,上部分是一些查询条件和操作按钮,查询条件个数不固定,中间部分是表格内容,底部一般用于分页,固定高度。 此种布局用flex可以很容易的实现:父容器设置高度为100%,flex-direction设置为colu……