手柄危机 起因是还想买一个手柄，毕竟双人游戏的话，joycon其实不是很舒服，当然啦，还是因为动森更新了花火大会，想和自家女票一起看来着，所以需要两个手柄 自身是一个双机党，所以闲了两个ps4手柄在家，所以，就不考虑买一个switch pro了 以下是教程时间 本人配置 switch国行 sxos ps4 手柄 你需要的东西 一台破解的switch ftp client 手柄(ps4/xbox) usb数据连接线 [sys-con](https://github.com/cathery/sys-con/releases 步骤 首先得确认线是否能够链接switch和手柄，基本操作就是，能充电 将sys-con.zip解压，看到里面的config和atmosphere文件夹 如果是大气层玩家，直接拷贝两个文件夹到switchsd卡根目录 如果是sxos玩家，将atmosphhere/contents内的文件夹直接拷贝到sxos/titles下 重启switch 插上手柄再看你的手柄界面应该有个手柄了吧

入手 当时还是过年期间，实在是太无聊了 当时pdd又正好在搞百亿补贴，于是入了一台国行以及一个健身环 不过最开始的时候确实考虑过没有什么dlc需求 主要还是和女票一起玩马里奥和玩玩健身环就够了 人类的欲望总是不断上升的嘛 到七月了，游戏商城还是2000就能买空的状态 换卡带实在是麻烦，切游戏要插拔 猛男捡树枝买不到 diy背景界面 所以乘着tx出了破解，就第一时间去做了硬破 因为是第一批 还是找的做了好多台的js做的，心疼荷包 好在还很顺利 js也送了几个游戏 破解和折腾小记 tips switch的游戏有几种获取方式 百度网盘 外网 闲鱼 同时又分了好几种格式 xci nsp nsz 一开始也是眼花撩乱的，现在总结了一下 xci xci是最好的格式 在安装的情况下 可以在游戏机里直接启动，不安装的情况下，可以当作游戏卡带，适合一些大型游戏，拷贝在移动硬盘里 在tv模式下 直接插在 tv 盒子的usb口玩 nsp 最常见的格式，需要安装 具体在tx破解系统中的install中安装 然后在游戏机中直接打开 nsz 压缩的nsp 需要转换工具转nsp或者brew安装对应的加载器安装 没有用过不好说 如何备份 js备份要钱，其实你需要的只是电源，然后，在开机显示sxos的时候按➕号进入系统菜单 之后选择最右边的option进入设置 进入options菜单之后 选到左边的NAND选项就是备份选项 然后选择DUMP NAND这一项就是备份的意思，如果以后需要恢复nand的话 就选右边的restere nand 选择DUMP NAND的之后 直接选左边的continue就开始备份了，备份好之后的备份文件是放在内存卡里的SXOX\BUCKUP 目录里的。 如果备份界面选 advbanced选项就会出现备份的项目选项 一般来说按照下图的方式来选 备份需要30G的内存卡空间 选择 开始备份了 进度走到100%即备份完成，完成之后可以选 poweroff选项关机，可以将备份好的文件复制到电脑上妥善保管 虚拟系统 还是进入OS系统的 options菜单 制作虚拟系统的话选择emunand这一项 然后有两个选项 左边的是创建虚拟系统 右边的是删除虚拟系统，我们选左边这一项 ...

虽然微软推出的Excel是一个强大的表格工具，但是世界上总有那么些人可以把一些常见的东西玩出花来就像日本老人用Excel画画一样 当然，作为一个程序员，当然还是靠程序自动来画啦 需要了解的知识 canvas html5新增加的一种html元素，平时都是把它当作画布使用，但是正因为有了操纵像素的能力 其也能用在播放视频，截图，压缩图片等操作上，当然啦，这一次，我们主要用到它的像素分析能力 getContext canvas最常用的api，获取一个用来画画的上下文，图片一般都是2d格式，所以我们通常用getContext(2d) drawImage 将图片绘制到canvas上，这样才能获取到每个点的信息 getImageData 获取到canvas的图像信息，不过返回值中的data是个被打平的一位数组 每四个值代表了一组rgba input 这里我们靠input来获取输入值 accept属性 image/*来限定只能选择图片，不过某些浏览器上因为要从国外获取mime的原因，推荐还是写成image/png,image/jpg 获取选中的图片 onchange 如果选择了图片，会触发change这个事件，我们对此监听即可，e.target为触发事件的input，我们取他的files[0]拿到图片对象 注意如果再点击选择同一图片的话，是不会触发事件的，所以每次获取之后推荐e.target.value = “”来清空掉已选择的文件 fileReader 我们获取到的图片仅仅只是个file是没办法直接转换成一个图片元素来获取宽高和放置在canvas内的，所以我们需要借助fileReader的力量 新建一个const fileReader = new FileReader() 然后在fileReader的onload回调中获取e.result作为url 那么如何开始读取？用fileReader.readAsDataURL(file)就行，之后再将这个url生成一个image就可以使用上文提到的drawImage方法了 image 和fileReader有点类似，需要const image = new Image(), image.src = url之后在onload回调中继续 exceljs 本次的导出框架，控制了每个excel格子的背景之后生成Array Buffer 开始工作 既然有了知识储备，就开始规划一下步骤吧 做一个<input type=“file” accept=“image/*”>的按钮 在其change事件中获取file file转image 新建一个canvas元素，将image绘制上去，同时控制canvas宽高和image一致 用getImageData获取每个像素信息 像素信息我们再根据图片宽高转一个二维数组 用二维数组在excel中改变对应格子的背景色 导出excel 具体实现代码在https://github.com/mizuka-wu/image2excel上 可改进的点 图片太大会崩溃 规定最大大小，因为excel只能缩放到10% 自动压缩 图片大小检测 进度条 转移到webworker上做一部分工作 想直接使用？访问我做好的demo吧

起因 还是接手了之前同事的代码，之前他的代码遗留了一个历史问题，一个element-ui的表格高度只有500 当然，在开发用的mac电脑上看还是很正常的，但是在实际的业务场景中，会有一些使用人使用的是一些大号的屏幕，实际效果上表格只占了页面的一小部分，又因为表格的内容很多，所以空了一大块页面，但是浏览数据却需要不停的滚轮 改进过程 分析要做什么 首先分析了一波造成这样现象的原因，发现是element-ui table的高度被钉死了，但是又由于是历史项目，页面被包裹在一个iframe里，同时element-ui不支持使用auto属性 综上所述，为了一个顺溜的滚动条体验，只能让table自动填满剩余高度了，盘算了一下需要做 监听页面大小变化 防抖，省的卡顿 获取剩余高度 设定一个最小高度 做好各类检测，防止报错 开写 监听问题 window.addEventListener(‘resize’, handler) 记得也要在对应时间销毁 防抖 这里直接上debounce 高度 首先获取页面高度window.innerHeight 然后获取table距离顶部的高度el.getBoundingClientRect().top 这里有个小问题，就是定义的高度是body的高度，但是剩余区域是包括head的所以我们获取对应的高度el.querySelector(‘.el-table__header-wrapper’).offsetHeight 空余高度计算Math.max(innerHeight - offsetTop - tableHeaderHeight - OFFSET_BUTTON, MIN_TABLE_MAX_HEIGHT) 这个是考虑了一个最小高度和空余页面底部距离的算式 整合 const TABLE_OFFSET_BOTTOM = 10 const MIN_TABLE_MAX_HEIGHT = 500 window.addEventListener(‘resize’, _.debounce(function() { const innerHeight = window.innerHeight const table = document.getElementById(‘table’) if (!table) { return } const offsetTop = table.getBoundingClientRect().top const tableHeaderHeight = table.querySelector(‘.el-table__header-wrapper’).offsetHeight const maxTableHeight = Math.max(innerHeight - offsetTop - tableHeaderHeight - TABLE_OFFSET_BOTTOM, MIN_TABLE_MAX_HEIGHT) // 改变element的参数即可 },300)) 结果 很完美，哎嘿 ...

很早以前，个人博客站点用的是hexo构建的，当时因为好玩给自己的站点加了一个live2d挂件，现在倒是将博客迁移到了vuepress上，可是找了半天没有一个vuepress的插件可以让我使用自定义的live2d模型，没办法只能自己封装了一个 如何使用 基于pixi-live2d-display我封装了一个vuepress插件，叫vuepress-plugin-pixi-live2d-display,可以自定义传入model的地址 不过只支持model3之后的模型版本 安装 npm i vuepress-plugin-pixi-live2d-display or yarn add vuepress-plugin-pixi-live2d-display 上传模型 可以上传到第三方平台比如oss, 或者在vuepress的.vuepress/public文件夹下 拿到对应的model3.json文件地址 添加配置 在.vuepress.config.js中添加 module.exports = { plugins: [ ['vuepress-plugin-pixi-live2d-display', { model: "你的模型地址" }] ] } 就可以使用啦 当然，因为底层依赖包是通过script引入的，本身存在时间差，所以live2d加载一开始会比较慢，也有可能会因为依赖库未加载完成报错 其他还有一些配置参数可以参考组件配置https://www.npmjs.com/package/vuepress-plugin-pixi-live2d-display

在开发需求中，经常会遇到需要和excel相关的需求，毕竟不是所有人都是程序员，很多的业务都是通过excel去进行数据的整理归类计算的，excel中提供的一系列快捷功能，统计功能也非常的实用，但是这也就造成了除了和接口打交道，前端也需要和excel打一下交道 excel 是什么 excel是微软出的一款电子表格软件，wps是国内知名的免费办公软件，以及苹果的Numbers同样都支持编辑和生成excel文件 excel 的格式 这里说的不是单纯的excel而是平时前端开发的时候所使用到的**excel类型**的文件格式，主要有 csv csv 是一种纯文本的格式，非常的简单，每一行代表一行，没一列通过,进行分割，我们只需要通过split函数就能直接分割成对应的二维数组结构 xsls/xls 区别在于 xls类型的文件我们可以通过存储网页的形式存储下来，xsls就是一个纯的二进制文件了，这一类更倾向于使用类库进行操作 读取 如果是csv，最简单的情况下，就直接使用<input type="file">,只有用fileReader读取为纯文本就行了 nodejs和browser唯一的区别就在于，node还支持直接通过steam等概念进行输入，而browser只有arrayBuffer这一种手段 在一般情况下，直接fileReader读取excel都会是二进制流，不过根据其编码规范是可以进行还原的，其中的对应关系比较负责 常用的库 库的左右就在于，他们能将excel的文件专为对应的js对象供我们操作 sheet.js 社区开源版本的xlsx.js就可以完成读取和写入的工作了， 以下是 sheet.js 的对应数据结构. 读取也狠方便 XLSX.read(buffer, { type: "buffer" }); 不过官方的文档相对还是比较难以理解的，一般日常我用另外一个库 exceljs js-xlsx 的 思想构成也是通过将二进制流转为js对象的方式方便我们操作，不过 api 方面设计的更加友好一点 最主要的两点。 中文文档 demo 易懂 读取也很容易，通过fileReader.readAsArrayBuffer 就能直接读取，如果是在node环境下，更能直接通过steam和file接口直接获取数据 // load from buffer var workbook = new Excel.Workbook(); workbook.xlsx.load(data) .then(function() { // use workbook }); 写入 原生 js 这个只适用于 js xls 2013 之前的xls模式是可以将一个html文件导出成一个.xls文件的所以我们首先定义一个html <table id="tblData"> <tr> <th>Name</th> <th>Email</th> <th>Country</th> </tr> <tr> <td>John Doe</td> <td>john@gmail.com</td> <td>USA</td> </tr> <tr> <td>Michael Addison</td> <td>michael@gmail.com</td> <td>UK</td> </tr> <tr> <td>Sam Farmer</td> <td>sam@gmail.com</td> <td>France</td> </tr> </table> 接着获取html之后导出 ...

带权重的搜索引擎 双十一背后的技术 参考此文 对其进行改进和自定义 毫秒级的为该文章 具体实施流程 分词(英文基本无需分词) zhparser 安装 SCWS. wget -q -O - http://www.xunsearch.com/scws/down/scws-1.2.3.tar.bz2 | tar xf - cd scws-1.2.3 ; ./configure ; make install 注意:在FreeBSD release 10及以上版本上运行configure时，需要增加--with-pic选项。 如果是从github上下载的scws源码需要先运行以下命令生成configure文件： touch README;aclocal;autoconf;autoheader;libtoolize;automake --add-missing git clone https://github.com/amutu/zhparser.git cd zhparser make && make install CREATE EXTENSION zhparser; CREATE TEXT SEARCH CONFIGURATION zhcfg (PARSER = zhparser); ALTER TEXT SEARCH CONFIGURATION zhcfg ADD MAPPING FOR n,v,a,i,e,l,j,m WITH simple; 增加类型 select ts_debug('zhcfg','三一') ; ts_debug 可以查看到分词的token类型 如果不在之前的mapping内的话是不会被分词的 解决方案是 ALTER TEXT SEARCH CONFIGURATION zhcfg ADD MAPPING FOR [没有的类型] WITH simple; 设置分词参数 ...

文字超过 x 行后补上省略号的几种办法 原文 简单来说，在 pc 端，文字过长溢出的话，溢出的部分会被替换成...,然而在显示情况中，更多的是在超过 x 行之后才启用这个特性，例如 <div class="module"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> </div> 最终希望三行之后到这种效果: 为了演示，我们先定义基础的 css，剩下的方法都在这个 css 的基础之上 .module { width: 250px; overflow: hidden; } Weird WebKit Flexbox Way 使用 webkit 内置的方案 ...

自动给表格空单元格补上字符串 背景 ui 设计中，如果单元格内部为空的话，需要填充一个默认字符串标明是个空格子，本身计划使用 js 来做的，但是考虑到要需要遍历，判断等等一系列操作，而且 js 里 0 做 boolean 判断也是返回 false，无形中增加了判断的步骤，所以这个时候还是求助于万能的 css 吧 以下为 less 代码 td:empty { &::after { content: "-"; } }

原文章https://css-tricks.com/position-sticky-and-table-headers/. 本身产品有个需求需要表格自动吸顶，本身用了 antd design 的 scroll 实现的，现在使用 css 实现，效果更好 thead和tr上无法设置 styleposition: sticky;, 到那时在th上却可以，这也意味着，其实你可以在一个传统的table上实现吸顶 header 效果，如果你不清楚吸顶实现的原理，大概实现起来会很棘手吧，使用 css 总比原先用 js 去监听事件然后改变position好得多 兼容性 查看兼容性 只要不是 ie 这种活化石，基本都已经支持了 使用 保证 table 的 position 为 relative 给每个 th 加上 sticky 例子 .stickyTable { :global(table) { position: relative; :global(th) { position: sticky; top: 0; z-index: 9999; } } }