闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

使用 box-shadow 代替 border

2019-07-16 约 1 分钟读完 搬砖秘籍
在前端开发中给一个 div 添加边框,一般是使用border属性。 如下: <div class="box"> </div> CSS .box { background: blue; width: 100px; height: 100px; border: 3px solid red; } 效果图: 使用box-shadow实现 使用box-shadow也可以实现类似效果。 box-shadow: 0 1px 0 0 red; /* Border bottom */ box-shadow: 0 -1px 0 0 red; /* Border top */ box-shadow: -1px 0 0 0 red; /* Border left */ box-shadow: 1px 0 0 0 red; /* Border right */ box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */ 为什么要使用box-shadow 遇到了这样一个需求,当这个box被hover的时候,出现一个边框,这时候就会涉及一个盒模型的问题,当使用border的时候,会修改盒模型,但box-shadow不会。 继续阅读

Momentjs 中无法更改 locale 解决方法

2019-05-09 约 1 分钟读完 搬砖秘籍
Moment.js 是前端中一个非常强大的处理日期时间的库。有多强大?以致于每次引用它的时候都要考虑一下到底是不是需要一个这么重的库引用进来。而最近一个项目中用到了多语言的日期格式,需要将日期格式化成当地的日期显示格式,比如日本的金耀日、月耀日等等。 开始直接使用了Moment.js的locale函数 moment.locale('ja'); 结果不行,还是显示的中文的日期,后面在github上找到一个解决方案 import "moment/locale/ja" moment.locale("ja") PS:目前这个解决方案在我项目是可以work的,但无法保证后续moment更新之后,会不会直接『修复』这个问题。

局域网保留IP网段

2019-04-28 约 1 分钟读完 搬砖秘籍
A类局域网专用网段:10.0.0.1~10.255.255.254 B类局域网专用网段:172.16.0.1~172.31.255.254 C类局域网专用网段:192.168.0.1~192.168.255.254 很多公司网吧都是用这个网段 hoho 几个特殊的IP地址 127.0.0.1 为本地回路测试地址 255.255.255.255 代表广播地址 0.0.0.0代表任何网络 特殊规则 网络号全为0的代表本地网络和本地网段 网络号全为1的代表所有的网络 主机位全为0的代表某个网段的任何主机地址 主机位全为1的代表该网段的所有主机

鸡肋的 Typecho 公众号插件:WeChatHelper for Typecho

2019-04-28 约 1 分钟读完 搬砖秘籍
今天想要介绍一个 Typecho 下的公众号插件:WeChatHelper。 开门见山 先说结论:凑合能用,但不好用,反正我已经不用了。 前言 先说一下这个插件,已经比较有历史了,并且目前来看已经无人维护了。现在能找到的有2处版本: 原作 Github:https://github.com/binjoo/WeChatHelper 改版 Github:https://github.com/holmesian/WeChatHelper 我用的是改版,总感觉改的应该好点,并且相对来说还有更新(截止2019年04月28日,最近的更新是19年初) 安装 不多说,用 Typecho 的应该都会。 设置 登陆Typecho后台,在“控制台”下拉菜单中进入“插件管理”,启用插件。 登陆微信公众平台( https://mp.weixin.qq.com )后台,在“开发”-》“基本配置”里,修改服务器地址为 http(s)://{域名}/wechat,(例如https://yqc.im/wechat ) 。 在插件设置中填写微信的“令牌(Token)”,与微信公众平台中的“令牌(Token)”保持一致。 在微信公众平台启用服务器配置。 在“自定义菜单”下中进入修改微信公众号菜单,并通过“微信接口操作”-》“创建自定义菜单”来发布菜单到公众号。(发布菜单需在插件设置里APP_ID、APP_Secret)(PS:如果你的公众号没过认证,这个功能就不用想太多了,你懂的) 使用 默认支持以下几个命令: n 最新日志 r 随机日志 l 手气不错 s 关键词 搜索日志 基本能用,但目前微信出了一个限制,仅仅支持一条消息返回。对我来说有点鸡肋,遂放弃。 后话 插件本身还是好的,但因为微信的限制,所以鸡肋了,不使用这个插件。如果你能接受只返回一条消息,可以玩玩。

修改 HTML5 中 video 样式

2019-04-04 约 1 分钟读完 搬砖秘籍
前几天收到一个需求,要实现一个背景视频播放的效果,在网上找了几个解决方案。 video.js 这是一起封装非常好的JS库了,可以实现非常棒的效果,一个效果图: 不过在我发现这个库之前,前人已经用了原生的<video>实现了,所以要在原生的基础上做修改。 显示 shadow DOM 要想自定义样式,需要先把浏览器的 shadow DOM 开启,开启方式如图: 打开之后就可以看到webkit内核对video的默认显示样式了 几个常用的控制样式 video::-webkit-media-controls-panel video::-webkit-media-controls-play-button video::-webkit-media-controls-volume-slider-container video::-webkit-media-controls-volume-slider video::-webkit-media-controls-mute-button video::-webkit-media-controls-timeline video::-webkit-media-controls-current-time-display video::-webkit-full-page-media::-webkit-media-controls-panel video::-webkit-media-controls-timeline-container video::-webkit-media-controls-time-remaining-display video::-webkit-media-controls-seek-back-button video::-webkit-media-controls-seek-forward-button video::-webkit-media-controls-fullscreen-button video::-webkit-media-controls-rewind-button video::-webkit-media-controls-return-to-realtime-button video::-webkit-media-controls-toggle-closed-captions-button 具体看字面意思应该就可以理解了,这是不做赘述了。 一个不算总结的后话 当前的解决方案其实更偏向移动端,在IE上还需要特殊写样式来HACK,要跨浏览器还是推荐使用框架来实现~

使用 VS Code 的 Vim 模式

2019-04-01 约 1 分钟读完 搬砖秘籍
要看一款编辑器的成熟与流行程度,就看其是否支持Vim模式。 ———— 不是我说的。 目前来看,Vim 模式的确是编辑文字高效之选,很早之前 VS Code 流行的时候,其 Vim 模式的插件功能并不完善,所以试用了一下也就放弃了。但到 2019 年的今天来看。 VS Code 对 Vim 模式支持已经非常好了,对我来说,基本到了高效使用的地步了。因此,忍不住写文一篇,来记录这个过程。 安装插件 插件名:Vim 不用犹豫,装就是了。 配置 安装之后基本已经支持原生 Vim 的操作。 但是安装完成之后的操作是默认的,还有一些自定义的操作也要移植过来。自定义方法也很简单,在配置页面搜索 vim 这里面配置的是插件特定的选项,根据自己需要开启。 快捷键配置 自定义的快捷键可以在插件的 setting.json 中配置。 比如我常用的简单配置 "vim.normalModeKeyBindings": [ { "before": ["<leader>", "w"], "commands": [ "workbench.action.files.save" ] }, { "before": ["<leader>", "q"], "commands": [ "workbench.action.closeActiveEditor" ] }, { "before": ["H"], "commands": [ "cursorHome" ] }, { "before": ["L"], "commands": [ "cursorEnd" ] }, { "before": ["U"], "commands": [ "undo" ] }, ], 其他插件 Vim 中用几个杀手级插件,在这里也可以找到。比如:vim-easymotion、 surround. 继续阅读

Spacemacs 中开启拼写检查

2019-03-27 约 1 分钟读完 搬砖秘籍
使用Spacemacs开发已经有一段时间了,目前用的还是比较爽的,特别是我最喜欢的LSP功能。不过最近小伙伴反应我写的代码中的变量命名拼写有问题。我顿时羞红了老脸,之前使用VS Code的时候有拼写检查非常方便,于是想要在Spacemaces中也开启拼写检查。 打开拼写检查layer 要使用Spacemacs 的拼写检查功能,非常简单,只要在Layer中把拼写检查打开即可。如下: spell-checking 使用方法 贴个快捷键吧 SPC S b flyspell whole buffer SPC S c flyspell correct SPC u SPC S c flyspell correct all errors one by one SPC S d change dictionary SPC S n flyspell goto next error SPC t S toggle flyspell 可能遇到的问题 Mac系统需要安装 ispell 或者 aspell,如果2个同时安装,aspell 要高于 ispell 的优先级。 后话 我觉得还是VSCode的拼写更厉害一点。后面还要研究一下,未完待续。