Geekwen的博客

一个web前端程序猿的个人小站

hexo管理工具的开发

磨蹭了大半年,上个月终于挤了点时间把我想要的hexo管理工具做了出来。正好是趁着公司年中会,3天都没什么事。找了个僻静的角落猫着身子“偷偷”码代码。整个过程倒也顺畅,借鉴公司项目的经验,依样画葫芦,一点一点的“堆”,慢慢的就出来了。

用libsass+sassc编译sass

sass 是个非常方便的CSS预编译工具。但是随着项目变大,sass工程也可能随着复杂起来。十几个甚至几十个文件的引用会导致编译异常缓慢。尤其是当修改某个被N多文件引用的基础文件(如:_var.scss变量文件)时,会使所有引用了该文件的出口文件都重新编译一次,这个过程会非常漫长,有时可能会要等上几十秒,甚至一分钟左右,实在不能忍。所以就有新的方式运用而生:libsass + wrapper。

LibSass 通俗地说就是sass的编译规则库。sass原生是用的ruby来进行编译的。通过LibSass,能够使其他语言对sass/scss文件进行编译。我选择的是SassC(C语言作为编译语言)。通过替换后,速度真是快得感人。原先几十秒的编译过程现在几乎是秒编译,从此告别了烦恼的等待。其配置也是相当简单,按照Github SassC上的指导,一步步来就ok了。只是需要注意的是:安装完了后,记得将your-path/sassc/bin这个路径添加到PATH(*unix)或者说环境变量(windows)中,这样才能在全局中起到作用。

THE END

用webstorm开发NodeJS项目

webstorm是个很强大的工具,对前端开发中很多工具做了非常棒的集成。通过对nodejs项目开发的介绍,希望让还未接触webstorm的同学对它有所认识;也希望跟已经接触了webstorm的同学交流交流我的使用经验。废话不多说,直接上干粮😎。

theme-image

用requestAnimationFrame实现文字滚动效果

上一周用requestAnimationFrame做了一个文字循环滚动的效果。用这个API的好处是:

  1. 它会通知浏览器,将会有动画执行,进而浏览器可以确定重绘的最佳方式
  2. 会针对动画进行代码优化
  3. 运行间隔精准(The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. – MDN

恰好解决了以往用定时器setTimeout或者setInterval做动画时的一些问题。

瀑布流布局的实现

前段时间工作上的事情不是很多。于是利用一些时间慢慢的试着开发自己的插件。目前有一个瀑布流布局的插件已经完工了(项目地址:@geekwen - waterfall)。瀑布流布局不是个什么新鲜玩意儿。很多网站都可以看到这种布局的身影。但目前纯css的解决方案在PC端的兼容性还不是很理想,所以大多数的瀑布流布局还是通过JS来计算的。下面大致分享一下实现的思路。

theme-image

nodejs fs模块对文件的操作

最近自己实现了国家、省份、城市联动的功能。默认省份和城市是禁止选择的,只有当国家为中国时,才能选省份; 只有省份下有具体的城市时(排除直辖市、特区等),才允许选择城市,并显示对应省份的城市列表。本文章重点不是讲此功能的实现, 而是想分享一下对于国家,省份,城市的数据处理。

第一款机械键盘

早一段时间不知怎的突然对机械键盘上了瘾。于是紧接着就逛起了贴吧、论坛,相关的内容我都胡乱看了一通。经过一段时间的对比、考虑(以及对家里财政大丞的苦苦哀求),最终我选择了 leopold fc 660m。

theme-image

canvas 圆形百分比进度条

由于项目需求,我要在某个地方使用圆形的百分比进度条式样(不是某任务的加载进度,而是显示某个元素占总体的百分比)。最开始借鉴的 http://codepen.io/CreativeJuiz/pen/vFBIh 中,第一排第三个的方法。用两个span分别模拟左右两个半圆,通过控制旋转这两个半圆,显示不同的百分比。但,这样有个问题。因为最终要实现的百分比是通过js计算的,那么意味着我最终是需要用js来控制旋转的角度。所以,既然要用js来控制样式,索性我想干脆就不用css3了。直接用canvas来写更好。正好之前还没实践过canvas。

theme-image

滚动滚轮触发动画

现在很多网站的都有很炫的效果,比如:MacBook、锤子、搜狗浏览器。滚动鼠标滚轮,就会有各种炫酷的动画。乍一看很高深,背后最根本的原理其实并不复杂。本文通过一简单的案例,来分析这种效果的实现。