- 博客(90)
- 收藏
- 关注
RSS订阅
原创 手写JSON.stringify
一、JSON.stringify作用将一个对象或值转换成一个JSON字符串。console.log(JSON.stringify({ x: 5, y: 6 }));// "{"x":5,"y":6}"console.log(JSON.stringify(true));// "true"console.log(JSON.stringify(new Date()));// 2020-03...
2020-03-02 09:16:22
790
2
原创 使用nextjs做一个类似productHunt的网站
闲来无事，利用业余时间做了一个类似productHunt的网站vwood，将实现过程整理一下。一、框架技术： nextjs + koa + react + mobx+ antd为了更好的支持SEO，所以需要服务器渲染，框架选择nextjs；同时加入了koa配合使用。前端一直使用自己熟悉的技术react、antd、sass。数据管理使用mobx。二、项目搭建1. 初始化项目使......
2020-02-15 15:10:05
985
2
原创 jquery.i18n.properties的使用讲解与实例
最近在做一个主页时需要用国际化，用HTML+JS，还有jQuery, 于是就选择了jquery.i18n.properties.js。本文介绍的示例还依赖jquery、jquery.json。介绍jquery.i18n.properties是一款轻量级的国际化插件，采用.properties文件来对javascript文件进行国际化，即根据用户指定的语言和国家编码来解析对应的以”.properti...
2018-01-16 00:13:00
20570
10
原创 dependencies、devDependencies和peerDependencies的特点
包时，依赖到底是放在dependencies还是peerDependencies，可以根据实际情况来定；是用来告诉宿主环境哪些包也需要安装，项目才能正常运行。源码中会使用的，那么它可能放到2个地方。包开发过程中，安装依赖时不会自动安装。不会用到，那么就应该放在。，因为主体项目一定会安装。中的依赖，所以还需要将。中作为开发调试使用。
2024-09-13 16:03:51
207
原创 使用Github API获取排名
看到有人使用Github 提供的API做了GitHub rank的网站，由于以前没有使用过Github的API，所以打算自己动手尝试一下。
2024-06-24 11:23:01
449
原创 网站favicon图标获取
文本主要是介绍最近新做的一个工具网站，也不是算是完全新做，毕竟部分功能以前就做好了，这次主要写了一个前端页面；该工具主要用来获取网站的favicon图标。
2024-01-27 15:45:02
535
原创 js提取iconfont项目的图标
iconfont 可以让我们轻松使用字体图标，比如使用 iconfont 提供的 js，就可以愉快的码代码了。通常公司会有提供一套图标供所有系统使用，比如图标库里有 1000 个图标，但某个项目只需要使用 10 个，但 js 文件包含了所有的图标，就有点浪费网络资源了。比如下面只用了第一行的图标，其他的都不需要。另一种场景是组件库，组件库引入了 iconfont 的 js 文件，加在了全部图标，这对于组件库来说是不能接受的；当然可以手动将需要的图标一个一个放到组件库中，这样不止费劲后，还容易出错。
2023-11-30 23:09:46
1044
原创 react动态插入样式
在开发组件过程中，偶尔需要动态的插入css，比如在在iframe中渲染组件后，iframe中是没有样式的，所以需要手动插入样式。
2023-10-29 14:32:58
513
原创 text-decoration 使用
text-decoration 用于设置文本上的装饰性线条的外观。默认值为当前文本的颜色。，或者多个下列的值。
2023-08-14 22:30:51
718
原创 npm install过程中python报错
最近将Mac系统升级到Ventura 13.4.1后发现python的默认版本为python3了，导致以前的旧项目在安装以来时报错，旧项目依赖的是python2。上面是指定python的版本为python2，就不需要改动系统默认的python版本了。
2023-06-29 19:21:04
2623
1
原创 iconfont-extract: 一个将iconfont图标转化为React组件的工具
目前生成的组件是基于渲染的，自定义的渲染组件正在开发中。
2023-05-14 17:05:55
395
原创 Web Notifcation介绍
denied： 用户拒绝显示通知granted： 用户接受显示通知default：用户选择是未知的，因此浏览器的行为类似于值是 denied。
2023-02-08 22:26:22
244
原创 css媒体查询新特性
通常我们根据css的媒体查询来设置特定条件下的样式，比如根据浏览器视口宽度来设置不同的样式；这里的 操作符，允许我们合并语句，即媒体类型是屏幕，宽度大于等于300px时的样式，同时我们也可以对一个范围内的视口做同样额操作。现在 Media Queries Level 4 中引入了一个新的语法，使用常见的 > 、< 和 = 来指定视口的宽度值，在语法上更直观，同时代码量更少。新的操作符如下：下面我们写一个媒体查询，应用在浏览器大于等于300px：下面使用比较操作符编写相同的内容:可以看到新的语法在感
2022-11-02 22:59:07
276
原创 css container 容器查询
inline-size: 为容器的内联轴上的维度查询建立查询容器，就是水平方向建立；size: 为块和内联轴上的维度查询建立查询容器，就是水平和垂直方向都建立；normal：该元素不是块和内联轴上任何维度查询的查询容器，就是水平和垂直方向均bujianli；
2022-10-20 16:30:49
2249
原创 记又拍云接入过程
首先吐槽一下又拍云的文档，需要有亿点改进。由于我是前端上传，官网没有js sdk，所以需要结合后端来生成签名和policy。前端使用的是form api的方式上传。直接上后端代码（golang）：说说遇到的坑，签名和policy中不要设置date数据，不然前端上传时的时间与签名和policy中的时间对不上。调用sign方法时method参数后一个参数在拼接时需要加上/，不然签名不对，比如下面这样。上面的问题是在客服技术人员的耐心指导下调通的。在此感谢技术大佬。前端使用的antd的upload组件，
2022-07-12 14:15:05
227
原创 判断两个矩形相交
如上有两个矩形，中心点分别为O1(x1、y1)、O2(x2、y2)，宽高分别为(w1、h1)和(w2、h2)；要判断两个矩形是否相交，可以判断矩形的两个中心点的水平垂直距离是否小于(w1 + w2)/2、(h1 + h2)/2。
2022-07-03 10:57:24
604
原创 js数组降维
有如下数组const data = ['a', ['b', 'c'], 'd', 'e', 'f', ['g', 'h', 'i', ['j', 'k', 'h']]];把它变为一维数组，把能想到的方法总结如下方法一data.flat(Infinity)方法二使用Generatorfunction *myFlat(arr) { if (Array.isArray(arr)) { for (let item of arr) { yield* m
2021-01-20 22:51:32
112
原创 tsc编译后文件不在指定目录
最近写npm包时执行 tsc ./src/index.ts 后，生成的文件没有到dist目录下去。这是因为tsc ./src/index.ts后会忽略tsconfig.json的配置，所以设置的outDir没有作用，直接使用tsc就可以啦
2020-12-17 22:21:57
1891
原创 npm login报错
今天发布npm包时报错：409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:xxx - [conflict] User xxx already exists这是由于本地使用了国内的淘宝镜像引起的。解决办法：1、不实用淘宝镜像2、登陆时指定官方镜像npm login --registry http://registry.npmjs.orgnpm publish --registry http://r
2020-12-16 23:37:20
1571
原创 npm login登陆报错
今天发布npm包的时候发现登陆npm报错：409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:abelce - [conflict] User abelce already exists网上查找得知这是由于本地npm使用了淘宝镜像，所以解决办法有两种：1、切回npm官方镜像2、登陆时指定为官方镜像解决办法：npm login --registry http://registry.npmjs.org
2020-12-16 23:14:57
1422
原创 使用scroll-snap实现吸附效果
1、 效果:2、代码css:.list { display: flex; flex-direction: row; overflow: auto; white-space: nowrap; scroll-snap-type: x mandatory;}.content { flex-wrap: 0; flex-shrink: 0; height: 100px; width: 300px; scroll-snap-al
2020-12-14 22:41:32
510
原创 css优先级
在学习工作中了解的css优先级汇总如为下面的表哥，以后有新的再补充上去选择器优先级继承或者0,0,0,0标签0,0,0,1class、伪类(:hover)、属性选择器[type=“title”]0,0,1,0id0,1,0,0行内样式1,0,0,0!important∞...
2020-11-01 15:00:12
94
原创 腾讯云服务器barad_agent卸载
腾讯云服务器在没部署服务时内存占用有时很高，结果发现是barad_agent进程。所以决定将其卸载掉，命令如下wget -qO- https://raw.githubusercontent.com/littleplus/TencentAgentRemove/master/remove.sh | bash
2020-06-03 22:00:22
8818
原创 display的contents属性
一、作用display: contents使元素本身不会产生任何的边框，但是子元素和其伪元素正常显示；<!DOCTYPE html><html><head> <style> .item { display: contents; color: red; border: 2px solid blue; background-color:
2020-05-29 11:55:42
5789
原创 css计数器
以前写列表的时候，都是在前面手动添加序号标识是第几个。没想到用 css 计数器可以完成相应的工作了。先来一个实例：ol { counter-reset: section; list-style: none;}li::before { counter-increment: section; content: counter(section) ".";}&...
2020-03-21 10:19:02
202
原创 launchctl定时任务
最近做个一个定时任务的golang程序，需要每10分钟运行一次，使用了launchctl，整理了一篇文章方便记忆。一、plist文件launchctl是根据plist文件的内容来执行任务的。plist又根据存放的目录不同而启动的时机不同，如下：~/Library/LaunchAgents 由用户自己定义的任务项/Library/LaunchAgents 由管理员为用户定义的任务项/Li...
2020-03-08 15:22:53
398
原创 golang判断文件夹是否存在
// 判断文件是否存在func DirExist(path string) (bool, error) { _, err := os.Stat(path) if err == nil { return true, nil } // 判断报错是否是因为文件不存在引起的 if os.IsNotExist(err) { return false, nil } return fal...
2020-03-07 23:00:34
653
原创 归并排序
function mergeSort(arr) { var len = arr.length; if (len < 2) { return arr; } var middle = Math.floor(len / 2); return merge(mergeSort(arr.slice(0, middle)), mergeSort...
2020-03-05 11:05:36
148
原创 快速排序
快速排序就是在数组中选择一个数temp作为基准，每次排完之后比temp大的在其右边，比temp小的在其左边。有如下数组 A = [3, 6, 8, 2, 7, 5];1、 首先从右向左移动2、当右指针移动到2的时候，2比3小，停止移动3、从左往右移动左指针，到6时，6比3大，停止移动4、交换数据，交换6和2的位置5、再次把右指针从右往左移动，到2时，因为2比3小，停止移动，此时...
2020-03-04 22:30:03
142
原创 hyphens换行
使用 hyphens 进行单词换行一般换行使用 word-breakbreak-all：单词会被强行断开，不方便阅读break-word： 当空间不够时，单词会自动换行到下一行通常的英文排版都会合理应用所有空间，可以给没写完的那个单词使用“-”连接起来，hyphens可以实现这种效果。hyphens可选值:none: 单词不会换行，即使字符串中建议换行，只会在空白符处换行m...
2020-03-03 16:19:26
376
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人