在日常的前端开发中,我们会遇到 LESS/SASS 编译CSS 前缀自动补全CSS 压缩图片压缩JS 合并压缩布署发布 等各种各样的操作。通常,我们都会根据实际情况定制一个 流程 性的工具来实现所有常规的功能,这,就是我理解的 前端工作流

阅读全文 »

今年过得是飞快,很多事情没来得及总结,就又翻篇继续。再不回忆回忆,就真的过去了。
今年就像是回到了刚毕业那年,不断的在学习吸收着新东西,整一年大半时间,感觉都是亢奋的。

阅读全文 »

一直通过一些图片模块来取得图片的相关信息,最近在使用的过程中打开源码看了一下,学习到了不少东西。

首先,一个文件的基本信息都是存在于文件自身,即使压缩工具会去掉一些信息,但基本的文件类型,宽,高等都还会存在,所以,我们需要知道这些信息具体存在于哪个位置上。

通过相关搜索,我们得到了如下的信息:

Alt text

可以看到,几乎所有的文件起始位置存放的都是 文件类型,jpg 有三种 16 进制标记,png 只有一种,也就是说,我只需要如下判断,就可以知道文件是什么文件。

1
2
3
4
5
6
7
function getFileType(buffer){
if(buffer_data[0] == 0x89 && buffer_data[1] == 0x50 && buffer_data[2] == 0x4E && buffer_data[3] == 0x47 && buffer_data[4] == 0x0D && buffer_data[5] == 0x0A && buffer_data[6] == 0x1A && buffer_data[7] == 0x0A){
return 'png';
}else if(){
//...
}
}
阅读全文 »

最近做个小东西涉及到了数据库,因此接触到了 Sequelize 这个关系型数据库(ORM)[^orm]框架。用起来感觉很不错(事实上我也没用过其他),但他的文档非常不友好,搜索功能基本是废的,文档还很冗长,想查点东西非常不方便,故想把我对他的使用记录下来,方便自己以后查阅。

注意:现代文明发展太快,很多时候,隔个半年时间代码就有可能发生了很大变化,导致跟现实不符,这里使用的 Sequelize 版本是 3.9.0

安装

1. 安装 Mysql

1
brew install mysql

这里使用 mysql。

阅读全文 »

先看如下动画效果:
[demo.gif]

如上效果,光线是交叉着动的,按照常规的思路,我们的代码可能如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.page2__light1 {
-webkit-animation: anim-light_1 1s linear alternate infinite;
}

.page2__light2 {
-webkit-animation: anim-light_2 1s linear alternate infinite;
}


@-webkit-keyframes anim-light_1 {
0% {
-webkit-transform: rotate(-20deg);
}

100% {
-webkit-transform: rotate(20deg);
}

}

@-webkit-keyframes anim-light_2 {
0% {
-webkit-transform: rotate(20deg);
}

100% {
-webkit-transform: rotate(-20deg);
}

}

阅读全文 »

最近看了几篇文章都是讲两端对齐,有 justify 的,也有 flexbox 的,觉得都很有用,但由于有些实现起来还是有些限制,如需要特定的结构等,故有必要记录一下。

一、 display: inline-block + text-align: justify

html:

1
2
3
4
5
6
7
8
9
10
11
<div class="list">
<span>box</span>
<span>box</span>
<span>box</span>
<span>box</span>
<span>box</span>
<span>box</span>
<span>box</span>
<span>box</span></div>

<!-- 要么结束 div 与最后一个列表之间不要有间隙,要么结束 div 与最后一个列表之间还有一个空行 -->

阅读全文 »

作为一名刚接触移动端页面的孩子,总会遇到很多问题,如为什么 head 那里要加 viewport meta,为什么背景图片要用 二倍图 等等。我相信也有很多人跟你说,加 viewport 是为了让页面不缩放,让页面在手机上能1:1显示
;用 二倍图 是因为 retina 屏1个像素被分为4个像素,所以模糊了,需要用大一倍的图片,让其显示正常。

或许你哦了一声后也一直这么做,但是你事实上并不明白更细节的原因。我也一直很困惑。因此查阅了不少资料,今天算是懵懵懂懂有点明白。站在巨人的肩膀上记录一下。

阅读全文 »