博客园 - 织猫
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=46188
2021-03-27T04:04:38Z
织猫
https://www.cnblogs.com/hongrunhui/
feed.cnblogs.com
https://www.cnblogs.com/hongrunhui/p/14561599.html
浏览器的performance API与页面首屏加载分析 - 织猫
前言 现代浏览器提供了performance(性能)这个API来帮助我们分析页面的加载性能,从MDN上可以看到从IE9时代(约2011年)就开始支持了,所以目前来说兼容性还算可以,所以可以研究一下这个API具体有啥功能。 1. window.performance 1.1 整体结构 先看看perfo
2021-03-27T04:05:00Z
2021-03-27T04:05:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】前言 现代浏览器提供了performance(性能)这个API来帮助我们分析页面的加载性能,从MDN上可以看到从IE9时代(约2011年)就开始支持了,所以目前来说兼容性还算可以,所以可以研究一下这个API具体有啥功能。 1. window.performance 1.1 整体结构 先看看perfo <a href="https://www.cnblogs.com/hongrunhui/p/14561599.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/9370954.html
JS字符串补全方法padStart()和padEnd() - 织猫
背景: 解决上述问题的一个思路: 实现的思路: 伪代码: 和padStart参数一样,只是把想加的字符串加到后头。 "兼容性" : 目前来看用于前端需要兼容,请看: "string.polyfill.js" node.js支持到版本8
2018-07-26T03:56:00Z
2018-07-26T03:56:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】背景: 解决上述问题的一个思路: 实现的思路: 伪代码: 和padStart参数一样,只是把想加的字符串加到后头。 "兼容性" : 目前来看用于前端需要兼容,请看: "string.polyfill.js" node.js支持到版本8 <a href="https://www.cnblogs.com/hongrunhui/p/9370954.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/9048842.html
树莓派+花生棒+leanote搭建自己的笔记服务器 - 织猫
背景 对于一个程序猿来说不能没有一个很好的记笔记的应用。因为记笔记可以帮助自己积累学习提升自己。每一次回头看自己记得笔记,你都会有新的理解。 也许有人会说,用有道云啊,有道云就很好啊,你还纠结啥呢? 我是一个对产品需求要求很苛刻的人,也是一个追求性价比的人,所以这里我想说说各个笔记产品的一些缺陷:
2018-05-16T15:46:00Z
2018-05-16T15:46:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】背景 对于一个程序猿来说不能没有一个很好的记笔记的应用。因为记笔记可以帮助自己积累学习提升自己。每一次回头看自己记得笔记,你都会有新的理解。 也许有人会说,用有道云啊,有道云就很好啊,你还纠结啥呢? 我是一个对产品需求要求很苛刻的人,也是一个追求性价比的人,所以这里我想说说各个笔记产品的一些缺陷: <a href="https://www.cnblogs.com/hongrunhui/p/9048842.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/8929001.html
Chrome的First Paint触发的时机探究 - 织猫
前言 First paint 直译过来的意思就是浏览器第一次渲染(paint),在First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容。 所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。 在正题开始之前,先说下浏览器的页面的加载流
2018-04-24T05:14:00Z
2018-04-24T05:14:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】前言 First paint 直译过来的意思就是浏览器第一次渲染(paint),在First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容。 所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。 在正题开始之前,先说下浏览器的页面的加载流 <a href="https://www.cnblogs.com/hongrunhui/p/8929001.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/8376797.html
写了个学习正则的小工具 - 织猫
背景:感觉自己正则学的不是很好,所以想再学习下,于是就去翻各大框架里的正则,想看看他们是怎么使用正则的,但是一个一个看源代码太长又太麻烦了,所以就想把框架里的所有正则都匹配出来,然后再来集中学习。 这里推荐一个学习正则网站:https://regexr.com/ 先看看整个流程: 下面简单讲讲怎么匹
2018-01-29T05:35:00Z
2018-01-29T05:35:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】背景:感觉自己正则学的不是很好,所以想再学习下,于是就去翻各大框架里的正则,想看看他们是怎么使用正则的,但是一个一个看源代码太长又太麻烦了,所以就想把框架里的所有正则都匹配出来,然后再来集中学习。 这里推荐一个学习正则网站:https://regexr.com/ 先看看整个流程: 下面简单讲讲怎么匹 <a href="https://www.cnblogs.com/hongrunhui/p/8376797.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/7856380.html
【被玩坏的博客园】之canvas装饰博客园侧边栏 - 织猫
最近抽空学了学canvas,然后用canvas做了个小球运动的demo,大致的效果如下: 虽然网上已经有很多这样的demo,但是还是想根据自己的思路来写一个,下面先跟大家讲解一下源代码,先看html代码: html很简单,没啥讲的,就是css那块兼容性你们注意下就好(我懒,没写兼容),再看看canv
2017-11-18T04:43:00Z
2017-11-18T04:43:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】最近抽空学了学canvas,然后用canvas做了个小球运动的demo,大致的效果如下: 虽然网上已经有很多这样的demo,但是还是想根据自己的思路来写一个,下面先跟大家讲解一下源代码,先看html代码: html很简单,没啥讲的,就是css那块兼容性你们注意下就好(我懒,没写兼容),再看看canv <a href="https://www.cnblogs.com/hongrunhui/p/7856380.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/7376600.html
label+input实现开关切换效果 - 织猫
Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px); 当然要配合transition来实现 下面是效果 ON OFF ON OFF ON OFF 全
2017-08-16T15:24:00Z
2017-08-16T15:24:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px); 当然要配合transition来实现 下面是效果 ON OFF ON OFF ON OFF 全 <a href="https://www.cnblogs.com/hongrunhui/p/7376600.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/7376564.html
webpack模块机制浅析【一】 - 织猫
webpack模块机制浅析【一】 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制。 下面这段代码是webpack打包后的最基本的形式,可以说是【骨架】 理解这个对于理解别人源码会有帮助,如果你不懒,我觉得你应该会把这段代码执行一下(用node执行)
2017-08-16T15:12:00Z
2017-08-16T15:12:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】webpack模块机制浅析【一】 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制。 下面这段代码是webpack打包后的最基本的形式,可以说是【骨架】 理解这个对于理解别人源码会有帮助,如果你不懒,我觉得你应该会把这段代码执行一下(用node执行) <a href="https://www.cnblogs.com/hongrunhui/p/7376564.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/6284192.html
史上最“脑残”的“抢火车票”程序(node.js版) - 织猫
【背景】 快过年了,我妈一个电话打过来叫我给他买火车票,我到12306一查,硬座和硬卧基本没有了,高铁又太贵. 最后只抢了3张无座票,但是我妈说能不能买有座位的啊,我说没有了啊,我妈:你过两天再帮我看看。我:... 为了帮老妈抢到有座的票,后来用了360抢票插件,还用了网上的一个别人用c#写的客户端
2017-01-13T13:54:00Z
2017-01-13T13:54:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】【背景】 快过年了,我妈一个电话打过来叫我给他买火车票,我到12306一查,硬座和硬卧基本没有了,高铁又太贵. 最后只抢了3张无座票,但是我妈说能不能买有座位的啊,我说没有了啊,我妈:你过两天再帮我看看。我:... 为了帮老妈抢到有座的票,后来用了360抢票插件,还用了网上的一个别人用c#写的客户端 <a href="https://www.cnblogs.com/hongrunhui/p/6284192.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5957549.html
在web浏览器上显示室内温度(nodeJs+arduino+socket.io) - 织猫
上次的nodejs操作arduino入门篇中实现了如何连接arduino。这次我们来实现通过arduino测量室内温度并在浏览器上显示出来。 【所需材料】 硬件:LM35温度传感器,arduino uno板,面包板,若干导线。 软件:socket.io , cylonJs , express等 【准
2016-10-13T10:48:00Z
2016-10-13T10:48:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】上次的nodejs操作arduino入门篇中实现了如何连接arduino。这次我们来实现通过arduino测量室内温度并在浏览器上显示出来。 【所需材料】 硬件:LM35温度传感器,arduino uno板,面包板,若干导线。 软件:socket.io , cylonJs , express等 【准 <a href="https://www.cnblogs.com/hongrunhui/p/5957549.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5928833.html
MAC终端命令行下用sublime、vscode、atom打开文件或目录 - 织猫
要知道,有时候一些小技巧,能极大的加大我们的工作效率。 在MAC下开发,用的最多的还是终端,我的终端环境是iterm2+ohmyzsh;步入正题前先给大家介绍几个小技巧: 第一个: 打开findle,然后找到我的项目目录,然后我用安装好的Go2shell打开当前目录的终端。如下: 说实话,很方便,总
2016-10-03T02:37:00Z
2016-10-03T02:37:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】要知道,有时候一些小技巧,能极大的加大我们的工作效率。 在MAC下开发,用的最多的还是终端,我的终端环境是iterm2+ohmyzsh;步入正题前先给大家介绍几个小技巧: 第一个: 打开findle,然后找到我的项目目录,然后我用安装好的Go2shell打开当前目录的终端。如下: 说实话,很方便,总 <a href="https://www.cnblogs.com/hongrunhui/p/5928833.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5910374.html
博客园主题样式修改教程 - 织猫
先看效果图: 那代码高亮简直好看得不行啊有木有?你们是不是也想自己定义一下? 接下来我就告诉你该怎么自定义自己博客的主题样式(估计很多人也会,主要着重介绍一下那个代码高亮的插件,嘿嘿) 第一步:改默认样式; 点击你博客园上面的导航栏中的『管理』,然后再点击「设置」 看到这个没?页面定制css,你把你
2016-09-26T11:31:00Z
2016-09-26T11:31:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】先看效果图: 那代码高亮简直好看得不行啊有木有?你们是不是也想自己定义一下? 接下来我就告诉你该怎么自定义自己博客的主题样式(估计很多人也会,主要着重介绍一下那个代码高亮的插件,嘿嘿) 第一步:改默认样式; 点击你博客园上面的导航栏中的『管理』,然后再点击「设置」 看到这个没?页面定制css,你把你 <a href="https://www.cnblogs.com/hongrunhui/p/5910374.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5904192.html
nodejs操作arduino入门(javascript操作底层硬件) - 织猫
用Javascript来操作硬件早就不是一件稀奇的事情了。 所以作为一名电子专业出身的FE,我也打算尝试一下用js来驱动arduino; 要想操作这些底层硬件,肯定是需要一些工具的,我这里介绍的工具主要是 cylonjs 和 gort cylonjs其实就是一个操作"机器"的js框架,官网的介绍是这
2016-09-24T13:42:00Z
2016-09-24T13:42:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】用Javascript来操作硬件早就不是一件稀奇的事情了。 所以作为一名电子专业出身的FE,我也打算尝试一下用js来驱动arduino; 要想操作这些底层硬件,肯定是需要一些工具的,我这里介绍的工具主要是 cylonjs 和 gort cylonjs其实就是一个操作"机器"的js框架,官网的介绍是这 <a href="https://www.cnblogs.com/hongrunhui/p/5904192.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5871793.html
自己写的一个天气查询应用 - 织猫
俗话说得好:弱,就得多练! 【想法来源】 为了多锻炼自己,我开始写这个小玩意,之前逛聚合数据这个网站的时候,发现他有个天气的API,我就想写个可以用的小应用。所以花了一个晚上东平西凑总算搞出来了。 【技术基础】 我的网站用了riotJs这个框架,所以在展示数据的时候会方便点(不知道什么是riotJS
2016-09-14T05:25:00Z
2016-09-14T05:25:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】俗话说得好:弱,就得多练! 【想法来源】 为了多锻炼自己,我开始写这个小玩意,之前逛聚合数据这个网站的时候,发现他有个天气的API,我就想写个可以用的小应用。所以花了一个晚上东平西凑总算搞出来了。 【技术基础】 我的网站用了riotJs这个框架,所以在展示数据的时候会方便点(不知道什么是riotJS <a href="https://www.cnblogs.com/hongrunhui/p/5871793.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5868011.html
一个解决跨域问题的代理小工具 - 织猫
【问题描述】 之前调用聚合数据的API的时候,前端不能直接请求聚合给的API,提示出现跨域问题,所以一开始就想怎么解决这个问题,一开始想用jsonp来解决,但是搞了半天仍然不行。查了原因发现要想使用jsonp还得后端支持,也就是说后端如果没有使用jsonp,前端是不管怎样都不能用。 【解决】 卧槽那
2016-09-13T04:26:00Z
2016-09-13T04:26:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】【问题描述】 之前调用聚合数据的API的时候,前端不能直接请求聚合给的API,提示出现跨域问题,所以一开始就想怎么解决这个问题,一开始想用jsonp来解决,但是搞了半天仍然不行。查了原因发现要想使用jsonp还得后端支持,也就是说后端如果没有使用jsonp,前端是不管怎样都不能用。 【解决】 卧槽那 <a href="https://www.cnblogs.com/hongrunhui/p/5868011.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5814504.html
vue+sass 下sass不能运行问题 - 织猫
好久没写博文了,今天抽空写一写,最近在用vue.js build 项目,今早想使用sass来编译css,可是安装好依赖包之后仍然显示一下错误: 我vue component 里面是这样用的: 我心想不应该啊,我依赖包都安装了,需要的依赖包是:node-sass ,sass-loader,vue-st
2016-08-28T02:38:00Z
2016-08-28T02:38:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】好久没写博文了,今天抽空写一写,最近在用vue.js build 项目,今早想使用sass来编译css,可是安装好依赖包之后仍然显示一下错误: 我vue component 里面是这样用的: 我心想不应该啊,我依赖包都安装了,需要的依赖包是:node-sass ,sass-loader,vue-st <a href="https://www.cnblogs.com/hongrunhui/p/5814504.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5367149.html
Js运动框架 - 织猫
更新一下 上面那个还是太挫了,看下面这个:
2016-04-08T02:59:00Z
2016-04-08T02:59:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】更新一下 上面那个还是太挫了,看下面这个: <a href="https://www.cnblogs.com/hongrunhui/p/5367149.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5327983.html
单片机DA转换实现正弦波 - 织猫
使用的是查表法: 1.c文件: i2c.c文件 原理图: 效果: 单片机课程设计~
2016-03-28T02:09:00Z
2016-03-28T02:09:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】使用的是查表法: 1.c文件: i2c.c文件 原理图: 效果: 单片机课程设计~ <a href="https://www.cnblogs.com/hongrunhui/p/5327983.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5299746.html
怎样让树莓派接移动硬盘 - 织猫
树莓派的存储空间毕竟小了点,所以想看看怎么连移动硬盘 一开始直接插上去,硬盘咔咔咔的响,树莓派也识别不出来。后来发现树莓派的USB输出电流只有大概只有600mA左右,这么小的电流移动硬盘基本动不了。 后来发现解决方法: 方法1、买一个USB-HUB,相当于给移动硬盘提供一个电流源咯。 方法2、更改树
2016-03-20T13:32:00Z
2016-03-20T13:32:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】树莓派的存储空间毕竟小了点,所以想看看怎么连移动硬盘 一开始直接插上去,硬盘咔咔咔的响,树莓派也识别不出来。后来发现树莓派的USB输出电流只有大概只有600mA左右,这么小的电流移动硬盘基本动不了。 后来发现解决方法: 方法1、买一个USB-HUB,相当于给移动硬盘提供一个电流源咯。 方法2、更改树 <a href="https://www.cnblogs.com/hongrunhui/p/5299746.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hongrunhui/p/5279618.html
树莓派连接二手液晶屏小记 - 织猫
开机发现是乱码,百度了一下发现树莓派其实不带中文字库,需要自己安装,于是输入下面代码安装字库:   顺便可以把中文输入法也安装了: 然后输入下面代码配置: 会出现一个有很多选项的画面,第一项可以扩充树莓派的存储空间(我原来只识别出来了3G,后来经过此项更改变成了16G) 第五项可以配置语言编码,选择
2016-03-15T07:09:00Z
2016-03-15T07:09:00Z
织猫
https://www.cnblogs.com/hongrunhui/
【摘要】开机发现是乱码,百度了一下发现树莓派其实不带中文字库,需要自己安装,于是输入下面代码安装字库:   顺便可以把中文输入法也安装了: 然后输入下面代码配置: 会出现一个有很多选项的画面,第一项可以扩充树莓派的存储空间(我原来只识别出来了3G,后来经过此项更改变成了16G) 第五项可以配置语言编码,选择 <a href="https://www.cnblogs.com/hongrunhui/p/5279618.html" target="_blank">阅读全文</a>