简单设置Video标签的播放倍速

B 站 看视频教学的时候,发现最快只有 2 倍速,

我觉得太慢了,在百度之后发现有 video 标签有 playbackRate 属性可以设置倍速。

阅读全文

Electron:Electron-builder+Electron-updater 完成Electron应用的自升级

2019/07/19 开坑。

万能的 :checked + label

Meathill:纯 CSS 组件顾名思义,只改变外观,不改变行为。所以它的功能不会因为浏览器变化而变化,即使浏览器支持不完善,即使因为加载速度或者网络关系,导致 CSS、JS 加载失败,它最多样式回归到原始样式,功能是完全一致的。在非标准浏览器环境下,如读屏器,也是如此

前年看肉大直播的时候听到:万能的 :checked + label 当时没有体会到有啥万能,不就是自定义 input 样式吗,直到前段时间看到一个 Demo 虽然不是使用的这种方法,但是我突然就明白了,这个就可以用 :checked + label 来实现。

原来很多需要 Js 配合的一些效果点击效果只需要 :checked + label 就可以完成。

阅读全文

BetterScrol 2.x Mouse-whell 没效果

安装

yarn add @better-scroll/mouse-wheel@next

使用

import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
BScroll.use(MouseWheel)

new BScroll('.bs-wrap', {
  //...
  mouseWheel: {
    speed: 20,
    invert: false,
    easeTime: 300
  }
})

但是为什么在原有的基础上这样写没有用呢。官方 Demo

查看 Demo 源码在 scroll-wrapper 外多了一层 core-mouse-wheel 加上就可以了。

😂 没仔细看 Demo 源码

Hexo 主题开发制作

前置

Hexo 的安装就不讲了,直接开始我在制作 Hexo 主题遇到的一些问题。

首先
在使用 Hexo cli 脚手架创建完 Hexo 项目后会有一个默认官方主题 landscapethemes 目录中复制一份出来重命名成自己的名称,例如我的就是改成了 yogwang,并且在根目录中的 _config.yml 中修改主题为自己的主题

阅读全文

纯CSS实现瀑布流布局

原理:

  1. column-count: n 将元素中的文本分为 n 列
  2. break-inside: avoid 避免元素内部断行并产生新列
    • 可以不加,但可能会影响布局效果

Demo:

👉 在 CodePen 中打开

阅读全文

Hello Hexo

Hello Hexo,Hello Github Pages

2019.7.9 11:59:16

Git 撤销上一次提交 并将暂存区文件重新提交

把刚刚提交到的版本库的操作撤销掉,并将正确的版本提交 这时我们就需要用到 git commit –-amend 命令

我们把文件修改为正确的,然后 git add 到暂存区 再使用 git commit -–amend 命令
这时 Bash 会提示

$ git commit --amend
hint: Waiting for your editor to close the file...
阅读全文

Git 编辑历史提交的 Commit

做一个功能,可能提交了 10 多次,会不会有一些崩溃?单纯这么多次的 commit 就可能出现有无用,或者可以合并的 commit,就很让人不舒服。

基于上面所说问题,不难想到:每一次功能开发, 对多个 commit 进行合并或者删除处理,这时候就需要用到 git rebase 修改提交的历史 Commit

Eg:

修改最近的 4 次提交纪录

git rebase -i HEAD~4
  • -i--interactive 的缩写 - 交互的意思;
  • HEAD~4 修改最近的 4 次提交记录;
阅读全文

Chrome下垂直居中容器内区块改变高度使外层容器被移动

问题

在 Chrome 中,使用 transform 或者 flex 垂直居中内容块,当视窗滚动到容器一半时再经过第一个内容块(之后的都正常),整个容器块都会被移动

  • 内容块高度已经大于文本块高度
  • 内容块垂直居中
  • 视窗滚动到容器一半时
  • 改变文本块高度
  • Firefox 同样遇到该问题
  • Edge 正常
  • IE11 正常

问题Gif

阅读全文