soul

100 posts published

几行代码 基于SVG+CSS clip-path 快速实现星级评分

前言 虽然星级评分的前端实现已经有很多种方案了,但是对于快速(1h内,从0-1)去了解实现此效果,那些案例涉及的知识点就比较多。于是只能在有限的时间内 利用空间换时间,用额外的div来实现星级评分效果。 太长不看版:codepen 效果 要实现上述的效果需要先做基本的拆解 星星有填充的 也有空心的 星星有填充一半的,也有填充10%的,此渲染应为动态 了解clip-path MDN clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。 通俗来理解就是一个白色的长方形的div 通过设置clip-path可以变成星型的不规则的div 找个svg图标 明白了clip-path属性后,下一步就找个svg图标。 https://icons.getbootstrap.com/ 这里有三个icon,我们选择Star fill 原因下面来讲 懒得去翻页的可以直接看下述的SVG代码 <svg xmlns="http://www.w3.org/2000/

开发利器 华硕灵耀x双屏pro 2022

开发利器 华硕灵耀x双屏pro 2022

前言 用了那么多台笔记本很少会夸一个笔记本,这几天把macbook pro换成华硕灵耀x双屏pro 2022后 给我的感觉完全不一样,某些方面是macbook比不上的。 利益相关:node/前端工程师、macbook pro 2019款 16寸 i9cpu 16g 1t 5500m、华硕灵耀x双屏pro 2022 19-12900h,32g,1t ssd,3050ti on win 11 你想要的是什么? 每次在换设备之前都会问自己,你想要的是什么,是一时冲动还是真有需求又或者只是想图一个新鲜感?选中这款设备时我横向参加了好几款设备 Apple MacBook Pro 14英寸 M1 Max 32g 幻16 2022 i7-12700H 16G LG gram 12代酷睿i7 32G 1TBSSD ThinkPad

私有服务器WINDOWS+HYPER-V+利用开源NAS+EMBY+ARIA2打造家庭影院及内网server

前言 已经时隔很久没有写文章了,正好今天4T硬盘也到了,NAS组建也算完成一部分了,趁这个时间来完善一下搭建之路,当然,服务器还是老面孔了E5V3+32G 可以看我之前写的文章写给想要捡垃圾组装服务器的新(zi)手(ji) 闲置服务器当然是要利用起来啦,就像做人呢,最重要的是开心啦(好像并没有什么关系) 整体网络布局 整体都是比较简单的,(家用设备没那么多) 小米ax6000的路由器个人感觉已经很能打了。 小米的物联网设备配合app真的挺好用,开空调不用遥控器(缺点是没网的时候又找不到遥控器你就等着被蒸吧) 楼上还布置了一套电竞设备风 楼下客厅则是正常的电视+游戏机+游戏pc3 为什么要选择NAS? 这个问题一直在问自己,在目前网盘、在线资源盛行的时代 还需要自己去折腾一套NAS吗?我觉得可以列出下面的几个场景 我需要不同的设备直接分享同步文件 比如pc下好小说 同步到手机,手机的视频资源同步到电脑 当然这个场景可以用微信传输助手、网盘进行解决,不过要考虑一下网速的问题(上传速度500kb)尤其是拍好的视频资源想快速剪辑的情况下,这个绝对会折磨死你,并且外网的上次速度会影响其他的设备正常上网冲浪 拍好的视频、照片、文件持续化保存、并且能快速分享来到家里的朋友 持续化保存这个场景好解决,自己的电脑硬盘够大就好了,

Windows 迁移至Mac Book 小记

Windows 迁移至Mac Book 小记

前言 时隔了三年...最终还是换上了mac book,可能是这代mac真的很香。。 16年开始购入第一台macbook air 那个时候就开始体验macos的生态、交互等等,哪怕是最低配的(macbook air 13.3 i5 256G)当时也玩的很开心,甚至当时还用这货跟朋友打了几把L4D2,到了17年10月的时候, 想打打使命召唤系列,于是DIY了一台台式机,爽是挺爽的 就是放在家里平时都没怎么玩..感觉有点浪费吃灰,于是在18年3月份的时候购入了一台XPS 15,从此开始了笔记本折腾之路。 用过的笔记本和电子产品也不算很多,但是每一个产品都有过折腾。 16年 -> 17年 macbook air 13.3 17年10月 -> 18年3月 AMD R5 1400, GTX 1060,8G,1T机械 18年3月 -&

WSL2配置公网链接与固定别名

前言 今天为了测试html,用了nodejs的http-server命令,当然有了WSL那肯定是在WSL2中启动http-server,启动后问题就来了,8080端口是无法在局域网里访问的,但是windows宿主机是可以通过127.0.0.1:8080来访问到 WSL2相关 WSL2用的是hyper-v 相当于一个虚拟机,但是在网络那块就有点奇怪了,wsl2与windows中会有一个专有的ip。 举例 WSL2专用ip为:172.31.58.132,windows的公网ip为:192.168.167.82。 那么问题来了 我wsl2启动了一个http服务 端口为8080,如何在局域网中访问它? 一开始想的办法是让wsl2直接在局域网获取一个新的ip 比如192.168.167.83,试着给wsl2用了固定ip后也是不行的,连wsl2本身的网络都断开了,看了一下wsl2官方的issue发现官方目前是不支持wsl2直接获取ip的,v2ex上有老哥试着用网桥来解决这个问题,但是看最后的评论结果还是没有成功,于是目前的办法就比较hack了,局域网机器访问windows宿主机,windows宿主机转发端口至wsl2,虽然流程很简单,网络上也有老哥给出了解决方案,比较常见的指令就是 netsh interface portproxy

简单记一次nodebb+solr+redis迁移

前言 后空再完善,本篇文章算是一个存档,之前用的国外服务器,国内访问突然变慢,于是打算迁移到阿里云的香港服务器,那么迁移的时候就会遇到一堆的问题- -虽然已经准备填坑了,但是一来一回的操作发现竟然花了两个多小时。 原服务器数据&备份 nodebb用的是redis,先备份redis数据,不过因为不记得redis数据库存放路径了,于是 结合这篇文章redis切换数据存放的文件目录得出redis的存放路径,直接停止redis服务127.0.0.1:6379> SHUTDOWN 打包NodeBB所有文件 zip -r x.zip ./备份为x.zip 备份solr目录所有文件 zip -r solr.zip ./备份为solr.zip 备份nginx的conf文件 至此,原服务器的数据算是备份完毕了,不过这里在download备份文件的时候遇到了一个很大的问题,因为国外的网络下载是在太慢了,一开始打算数据->dropbox->本地,不过因为dropbox需要注册账号balabal之类的也比较麻烦,于是想了一下打算用阿里云的oss来做中间下载点

TS学习笔记

TS入门学习资料 本文大量使用了TS入门学习资料的范例并且加以理解,但是也有省略很多的关键点,如需完整学习请移植上方链接 什么是 TypeScript&为什么选择TS 包容 不会与js冲突,基本上直接引入js即可 类型定义系统 完善js的弱类型,并且因为有类型定于 各大IDE也会有对应的提示 拥抱ES6&最新的草案规划 TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。 巴拉巴拉什么社区完善啊 等等这些可以去看学习文档 这里不单独列出 劣势 学习曲线高 虽然很强大,但是整个市场来说 对团队要求高导致ts目前阶段相比js还不算大范围的流行 编译 需要额外编译,虽然写起来很爽,但是编译火葬场,如果开发团队全部用any类型的 等于没有用ts 源码定义 如果前端团队中有人不了解ts 那么阅读源码就是一个学习成本的事情了 复杂&构建流程 react和AJ可能是对TS支持最好的两个框架了,VUE&NODE.JS这两块还是有待完善 安装 npm install

前端的visionseed 腾讯优图漫游记

前言 某天某时刻从某位PLMM那里收到了一份礼物,拆开后发现是visionseed... 简单搜索了一下 发现是一个自带人脸检测/识别等一系列算法的摄像头.比较小巧 so...盒子背后还有个开发文档的二维码 visionseed官网 在开发者中心也能看到一些文档 简单看了一下后,发现...完全不懂啊 竟然是C++的..作为鄙视链最低端的前端,并且没有学过C++的渣渣来说 完全是天书啊,本打算辜负妹子的好意,准备收起设备的时候不料在gayhub上发现了新的天地 nodejs版本的sdk 竟然有位大大已经封装了一个js版的sdk,难道那句话就要应验了吗?能用js写的最终都会用js写 通信? 本着好奇的态度想看看底层如何与js通信,简单看了一下源文件发现引入了三个库 serialport: 读取串口信息 visionseed设备的baudRate为115200 google-protobuf: 端口通信机制? 这个库没太搞懂 类似于GRPC这样的? serialport正好之前玩过一点点 大致上明白是一个发送&接收的库,google-protobuf理解为对底层sdk通信的一个机制? windows下的玩法 简单了解了一下后再去看看sdk文档..嗯...很简单嘛 window下打开cam就可以看到视频了,并且也绘制了人脸识别框balabala的 ..嗯嗯嗯嗯...嗯? 调用sdk竟然是ubuntu版本的.

vue-element-admin中的多个表单共享验证rule

前因 有个业务需求为 表单中有两个字段 一个是 最小长度input输入框 一个是最大长度input输入框 因为要联动判断两个输入框的值,最小不能大于最大 最大不能小于最小,去官方翻例子发现只有一个自定义验证并且案例写的比较模糊 el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password"

letsencrypt的ACME规范开发折腾记

前言 https是一种互联网趋势,说到https就离不开ssl证书的申请,那么国外有个组织为了解决ssl证书申请的问题开放了互联网申请api接口,而且是全免费的,这就是letsencrypt,那么有了这个api接口接下来做的就是要去看方法调用对吧。然而你找到的只能是一份超级长的规范定义,当然这份规范定义基本上大家都是太长不看的。所以基本上大家都会去找现成的库。那么实现了amce协议的库很多ACME协议客户端,各种各样的,比如最常见的Certbot,网上的教程大多也是针对Certbot的,不过有个缺点就是,如果走的是dns认证,尤其是通配符证书申请,基本上国内比如阿里云的dns还需要自己手动去设置,不过网上已经有相关的插件可以支持阿里云dns了。不过我个人并不喜欢Certbot,尤其是需要传递一堆的参数,当配置的域名一多的时候就很难管理,那么出于以上的考虑就开始写了一个符合自己业务需求的小教本 基于node-acme-client的脚本实现 node-acme-client 本来打算自己去实现一个符合acme规范的客户端,不过时间不允许,而且不太想重复造轮子,所以翻了一下nodejs的库,发现还是有一个完全实现了acme规范的。于是打算基于上述去开发。虽然说是基于轮子去造车,但是有一些概念还是需要了解的。下文会简单说一下所遇到的概念。 账户 letsencrypt是有账户概念的,而且创建账户的接口速率限制比较严格10个ip/3小时内。所以基本上建议要搞证书都用一个公用的账户,那么他的账户申请概念是什么样的呢? 本地生成私钥(pem编码)->调用创建账户接口(/acme/new-acct)->返回创建用户信息-&

记一次Blog迁移到Ghost
js

记一次Blog迁移到Ghost

之前的用了Hexo搭建了Blog,不过由于某次的操作失误导致Hexo本地的source源文件全部丢失.留下的只有网页的Html文件,众所周知,Hexo是一个本地编译部署类型的Blog系统,个人感觉这种类型的Blog特别不稳定,如果本地出了一些问题那么线上就GG了,当然,使用git是可以管理源文件,但是源文件里又包含很多图片的情况下,download和upload一次的时间也会比较长,虽然说这几年都流行这种类型的Blog,但个人看来还是WEB比较实在。

InterceptorCompontent-组件注入概念

前言 本来想定义为拦截器概念的…后来想想好像不对..应该是注入器概念..不过组件名都写好了 就懒得改了. 写这个小功能的原因很简单 目前开发方式都是所有的js放一个文件里了,那么如果我有多个页面,每个页面执行不同的函数 实现方式是不是很简单? function indexCompontent(){ console.log('index') } if($('js-index').length>0){ indexCompontent(); } 用es6的语法写起来就更爽了,可以把每个函数拆开,但是如果我后台想传递一些参数…那是不是很蛋疼了,估计要绑定在html上 然后通过函数主动去获取.. div.js-index(data-user='{"name":"soul","uid":"2333"}') script. function indexCompontent(){ let s=

nodejs微信接入(pc扫码和mobile微信环境下)

前言 本次演示采用nodejs(>7.5)+express+request框架,需要有一定的基础.层级分为四层分别为 路由层 控制层 请求层 视图层 路由层 GET /login # login登录页 GET /login/wechat # mobile微信跳转返回页 GET /login/wechat-pc # pc跳转返回页 控制层 getLogin #对应GET /login 的控制器 wechatLogin #对应GET /login/wechat的控制器 wechatPcLogin #对应GET /login/wechat-pc的控制器 这里为getLogin的控制器,比较简单就渲染一个简单的页面 /** * 用户登录页 * @param req * @param res * @return {Promise.<void>

记一次nginx反向代理内网wordpress

记一次nginx反向代理内网wordpress 参考 nginx反向代理wordpress nginx反向代理wordpress.conf Nginx proxy_set_header 理解 说明 公网ip为 233.233.233.233代理服务器内网ip为 10.10.10.10wordpress内网服务器ip为 10.0.0.1其中nginx代理服务器可以访问内网.需要绑定的域名为abc.com,但是目前域名未备案 所以只能绑定公网ip也就是233.233.233.233 第一种解决方案 不更改wordpress的home_url和site_url 这两个url保持原来的域名不变 在nginx代理服务器那层利用sub_filter 把域名进行替换 第二种解决方案 更改wordpress的home_url和site_url为新域名.并且传递正确的Host. 这里采用的是第二种解决方案.第一种解决方案实际上可以看上述的参考 代理服务器层 conf配置 location /{ proxy_

nodejs微服务设计笔记

前言 豆瓣读书 这本书简单的介绍了如何使用nodejs来搭建微服务,一本实践与理论结合的书籍,如果对于微服务有比较深刻的了解就可以不用看这本书了,但是对于门外汉来说这本书还是有比较大的价值. seneca github 本书大半部分都围绕这个框架来写的. 这个框架就是实现微服务的一个工具罢了.框架使用了匹配模式来触发函数,从而细粒化函数,比如. seneca.add({role:"math",cmd:"sum"},function(msg,res){ var sum=msg.left+msg.right res(null,sum) }) seneca.act({role:"math",cmd:"sum",left:1,right:2},console.

js

js开发总结

基层模块需要封装一层后才对外暴露 这里有个基层的,被封装为promise的基层函数/类 # request.js function request(data){ return new Promise((resolve,reject)=>{ $.ajax({ data, success(res){ resolve(res) }, fail(res){ reject(res) } }) }) } export{ request } 同时我写了个登录函数,依赖于基层类 # login.js import {request} from "request.js" function login(user,pw){ request(user,pw) .then((res)=>{ // get user

js

常用的js(nodejs)库整理

说明 本文为整理自己的github常用star. 免得到时候找个库都不知道找哪个. 本文包含了nodejs和js.可能还含有一些其他语言的库 详情的可以参考我githubStart zdog : 前端的伪3D框架 chart.xkcd : XKCD 手绘风类型的表单 fullPage.js : 全屏单页面的框架 markdown-nice : 支持自定义样式的 Markdown 编辑器 PicGo : 一个用于快速上传图片并获取图片 URL 链接的工具 支持多种图床 Valine : 简单 轻量的评论系统 hoppscotch : api请求工具 类似于postman formily : 阿里巴巴出品的自动化生成表单框架 react系 p5.js : js的在线编辑创意库 qier-progress : 支持彩色或单色的顶部进度条 image-compress-without-backend : 浏览器端图片压缩工具 无后端 panolens.js : 基于three.js的全景查看前端框架 jexcel : js excel表格库 typical : 前端打字机特效

手把手教你如何利用nodejs+es6+co写一个爬虫

注意事项: 这里的爬虫不做太复杂的处理.. 考虑到并发问题.这里的爬虫仅仅是爬完上一个后再爬下一个. 爬完当页后再去爬取下一页,效率虽然低..但是胜在不用同一时间发请大量请求避免被ban 本文以admin5.com为案例来爬取200页的文章title和content 本文涉及到的es6语法这里只会简单的说明一下.如果看不懂…来打我啊(笑) 涉及框架 crawler co cheerio crawler:为一个封装好的nodejs爬虫库,免去你用request框架发请请求然后处理一大堆的返回代码问题.本文只把crawler当做请求工具用.内容的处理将会用cheerio框架来完成 co:能够把异步代码写成跟同步一样,号称es6的async. cheerio:nodejs版的jQuery 分析目标网站url 目标网站的url都是 http://www.admin5.com/browse/19/list_${i}.shtml ${i}<=965 那么这就好办了.生成965个链接然后每次去爬一个链接 分享目标网站DOM结构 目标网站的每篇文字的链接都在一个class为sherry_title的a标签里 <a href="

爽爆天!加速翻墙,优化shadowsocks.让你的梯子飞起来

爽爆天!加速翻墙,优化shadowsocks.让你的梯子飞起来 本文参考了如下的几个教程 在 CentOS 7 下安装配置 shadowsocks kcptunGitHub kcptun_gclient shadowsocks多用户配置 本文的服务器为centos7.0 安装shadowsocks至服务器 首先,关闭防火墙(centos 7.0) systemctl disable firewalld.service systemctl stop firewalld.service centos6.9以下的可以参考 关闭命令: service iptables stop 永久关闭防火墙:chkconfig iptables off 两个命令同时运行,运行完成后查看防火墙关闭状态 service iptables status 1. 安装python 略,一般默认都带Python,如果不带那么谷歌/

SEO

SEO实战密码-入门SEO

SEO常用指令 *通配 比如搜索某些词 李就代表通配符. 李力冰,李五冰 之类的都会出现在搜索词中 inurl inurl用来搜索url中出现的关键词. 比如我的url是 http://baidu.com?a=我是搜索词那么我搜索 inurl:我是搜索词 那么这个条目就会出现在搜索中。不过百度貌似已经不支持此搜索了 inanchor 搜索 inanchor:理财 的时候.比如s网站有个a标签,里面的文字是理财 比如 <a href='http://c.com'>理财</a> 那么这条指令就是搜索的这种.研究c页面中的外链就可以找到很多链接资源,从而分析对方做了哪些SEO优化. tips:百度不支持本条指令 intitle 搜索标题中的关键词.这条很简单就不说了,title一直是SEO很重要的因素,先会检查你title是否匹配然后才会去检查内容 intitle:xxx

个人

记一次服务器迁移记录

记一次服务器迁移记录 最近emufan.com的备案被注销了.而且部署在github上访问和收录都有点不稳定.于是想搬个服务器. 一来是备案不太方便.年初的时候在阿里云备案还不需要邮寄资料.这次还需要邮寄资料.太麻烦了.而且目前并不太在意访问速度..话说目前访问速度很慢么? 挑选服务器 一开始选择了香港的服务器.但是后来想想.香港服务器又贵.性能又不太好.带宽低.而且速度访问有时候还是挺慢的(通常都不错).结合自己的开发和需求最终选择了国外.那么问题来了.选择国外如何选择最优质的服务器?这里去网上查询了一下 发现大家都首推linode..不过不支持PayPal付款..这点就蛋疼了..后来再三挑选下终究选择了digitalocean 点我送$10 因为是点击朋友的注册.所以送了$10.再加上自己购买的是服务器,加上备份快照服务费一个月才$12.5注册后便可以开始创建服务器了 服务器性能测试 这里创建的是centos7.2. 安装好mongodb,lnmp,nvm(nodejs版本管理工具)后就可以开始服务器性能测试了.因为服务器用的是SSD固态硬盘.所以读写速度可以达到700mb/s(待长期测试).至于带宽的话 我选择的是新加坡机房.