理解 Grid 布局中的长度单位 fr

CSS 中有很多的长度单位fr 也是其中之一。

fr 单位专用于 grid 布局,意为 fraction,额,好像也不是很好理解~

对比 px(像素)、em(文字)、vw(窗口),fr 好像缺了一个中文名字,来帮助大家理解。

所以我自告奋勇,凭借对 grid 布局还自觉得比较理解的基础上,给 fr 起了一个中文名字:份(儿),代表占剩余空间份数,这个剩余空间是指除去已知的宽度(包括px、%、grid 间隔等)之后的剩余空间。

读音相近,意思也差不多,我个人对这个名字还是比较满意的~

grid-template-columns: 150px 1fr;

//grid 容器分为了2列,第一列宽度150px,第二列占剩余空间1份儿,因为剩余空间只分成了1份儿,所以第二列也就是全部剩余空间。这种情况下,第二列写 100fr 也是相同的效果。
grid-template-columns: 150px 2fr 3fr;

//grid 容器分为了3列,第一列宽度150px,第二列占剩余空间(100% - 150px)的2份儿,第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿,第二列占2份儿,第三列占3份儿。

怎么样,是不是觉得 fr 很好理解了。

玩游戏

经常有人玩着英雄联盟、王者荣耀问我平时玩不玩游戏,我说不玩。

仔细想想,其实也不是完全不玩,只是很少玩,而且玩的都是些小游戏,毕业之后玩得最多的应该是电商活动小游戏,比如淘宝、京东、支付宝APP里的小游戏。

当然偶尔也会玩一下其他的游戏。比如前年,我偶然在一个网站上看到一个游戏介绍(链接)。跟其他游戏相比,这界面——神秘无比,啥都没有~,你甚至会怀疑这到底是不是游戏。我试着玩了一下,发现还挺有意思~~,接下来花了一个星期,每天玩一会儿,把游戏通关了。

继续阅读“玩游戏”

突破技术封锁发布二维码的方法

现在有些网站出于安全或者利益考虑,已经不允许用户直接发布二维码图片了,比如淘宝、知乎等等,上传的二维码图片会被自动屏蔽或者替换为文本信息。

当然,非要发布还是有办法的。

首先我们要知道网站屏蔽二维码的技术原理,以及你的目标用户对二维码的使用方式(长按识别/摄像头扫描)。

屏蔽二维码的原理:

一般原理应该是,用户上传图片后,服务器上的二维码识别程序会对图片进行扫描,如果发现二维码就进行对应的操作。

应对方法:

应对的核心思想就是对二维码动手脚,让服务器上的程序检测不到二维码,但是又要能让摄像头扫描或者微信识别。

应对方法有多种,适用于不同的场景。

继续阅读“突破技术封锁发布二维码的方法”

Debian 8 GRUB2 自定义默认启动内核

参考链接:http://www.linuxquestions.org/questions/slackware-14/grub2-change-default-to-custom-kernel-4175547962/#post5391277

总结:

1、编辑 /etc/default/grub

GRUB_DEFAULT=saved

2、查看所有启动菜单入口

grep "submenu\|^\smenuentry" /boot/grub/grub.cfg | cut -d "'" -f2,4

输出格式为:标题’ID (中间以 ‘ 号间隔)

结果中含“Advanced options”的一行是 submenu ,底下紧跟的行是 menuentry。

3、设置默认启动菜单(内核),使用步骤2中的 ID 而非标题

#grub-set-default  "(submenu ID)>(menuentry ID)"

4、重新生成 /boot/grub/grub.cfg

#grub-mkconfig -o /boot/grub/grub.cfg

继续阅读“Debian 8 GRUB2 自定义默认启动内核”

更改 git 提交记录里的名字和邮箱

更改名字和邮箱(作者和提交者):

git filter-branch -f --commit-filter 'if [ "$GIT_AUTHOR_NAME" = "xxxxxxxx" ];then GIT_AUTHOR_NAME="yyyyyy";GIT_AUTHOR_EMAIL="yyyyy@yyy.com";GIT_COMMITTER_NAME="yyyyyy";GIT_COMMITTER_EMAIL="yyyyy@yyy.com";git commit-tree "$@";else git commit-tree "$@";fi' HEAD

git filter-branch 会生成备份,可以删除:
删除某个分支备份:

git update-ref -d refs/original/refs/heads/分支

或者(删除所有备份):

git for-each-ref --format="%(refname)" refs/original/ | xargs -n 1 git update-ref -d

 

让视频始终居中的四种简单方法

前段时间看到一个有意思的视频展示效果,简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 JS 同时改变每个视频的视窗宽度和视频的位置来实现,属于底层操作,我觉得应该可以更简单一些,只要让视频始终处于容器中间就不用对视频进行位移了。本来想看看文章中提到的 beoplay 页面里是如何做的,结果已经打不开了。。没关系,反正我也做出来了,而且找到了4种方法,CSS 和 JS 均只控制 width,居中则由浏览器自动完成,请看效果

当时看到这个效果的时候,首先就想到了 flex 布局,因为常规布局下当图片以及视频内容宽度超过容器宽度时,常用的 text-aglin:center 和 margin:0 auto 已经无法让内容处于容器的中间,不行不行,给容器加上 overflow:hidden 也不行,但 flex 布局的居中却可以轻松实现此需求。

然后又在学习过程中,想到了另外3种办法:

继续阅读“让视频始终居中的四种简单方法”