博客这十年

十年前我还是个“孩子”,十年后我已有了自己的孩子;
十年前我还有足球还尽情的挥洒着汗水,十年后我只剩肚腩;
十年前我还像执行定时器一般的每月向着父母要着生活费,十年后我依然像执行定时器一般的按月还着不同的贷款;
十年前父母已有了皱纹,十年后已如刀刻般更深了;
十年前我还在他乡每逢佳节思念着故乡,十年后他乡已变故乡;
……

基于Webpack/TypeScript/Koa的环境配置

TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。

如何实现一个颜色选择器

在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇文章也在我的博客中以草稿形式(只有标题没有内容,当时是做了一个记录,想着后来有时间了去研究,目前这种草稿还有很多😂)存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念,又去搜索了下这方面的知识,收获还是蛮大的,尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别?这篇提问中,@Forrest近乎大白话的回答,超赞👍。

升级总结:phantomjs在Centos上的安装过程

想着在年前把博客更新升级一下,于是顺手修复了一些已知的BUG,优化了留言模块,升级了nginx,更是为了利于SEO,在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后,一切OK。这便着手在线上Linux主机中配置,nginx, node, mongod 等的升级一切顺利,但就是在项目中 npm install 的时候卡住了,而且这一卡就是一天多!难道是我安装姿势不对,需要起来重睡? 查看npm报错原因,就出现在本文的主角phantomjs上。

关于phantomjs,无论是在之前的项目中写单元测试,录制UIrecorder测试用例时都遇到过,但仅仅也是遇到而已,只以为仅仅是一个依赖模块,照着文档npm install一下,对其甚至连基本的了解都没有,于是问题就出现了。

你不知道的CSS(二)

在上文《你不知道的CSS(一)》中,介绍了兄弟选择器美化表单,font-size:0消除间隙,overflow清除浮动,border绘制三角形等7个实用技巧。由于文章长度限制,还遗留了一些技巧没有介绍,考虑到日后可能会有更多的技巧需要补充进来,便将上文改名为你不知道的CSS(一),名字其实有点浮夸,希望能完善为一个系列,也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明(如果demo无法打开,请自备梯子,原因你懂得🙀)。

不可思议的CSS之clip-path

曾经和某位朋友在聊天中讨论过这样一个话题:综合90%的网站的布局以及页面中的元素不是方的,就是圆的。就像所有的颜色都是由三原色(RGB)构成的一样,所有规则的形状似乎也都是由方和圆组成的;抛开设计效果的好看与否不说,似乎不规则的设计在实现(CSS)成本上也是一个麻烦,毕竟在CSS3之前,我们实现一个圆都要切图,更何况那些复杂的多边形。好在CSS3时代的到来,尤其是CSS3在借鉴并增加了众多SVG属性的今天,使用纯CSS绘制一个多边形已经不再是什么难事。文章中要介绍的clip-path这个属性也是一个借鉴了SVGclipPath的借鉴品(确切的说应该是css clip属性(已被废弃)的替代品,svg clip-path属性的延伸品🙈)。

你不知道的CSS(一)

CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一,CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目,抛开该项目的实用性不说,项目中的众多的DEMO就已经证明了CSS的强大。
当然,这篇文章不是为了介绍这个项目,而是整理了一些实用的CSS技巧,来解决我们在实际项目开发中遇到的的问题。文章也会长期更新,总结更多的技巧。每个技巧将结合demo或者图示来说明(如果demo无法打开,请自备梯子,原因你懂得🙀)。也许你此刻正在发愁的一个bug可以在这里找到答案😆。

HTML5音乐列表播放器SMusic开发总结

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法,如 play() , paused()等。当然,之前的效果只适合诸如博客或者某个单页面(如专题页面)使用。而现在的可以称之为完整版的播放器弥补了之前的不足,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,除了歌词外,基本就是个播放器了(本来就是播放器)。

Vue2.0利用vue-resource上传文件到七牛

关于上传,总是有很多可以说道的。
16年底,公司项目番茄表单的前端部分,开始了从传统的jqueryvue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

从网易与淘宝的font-size思考前端设计稿与工作流

偶然间发现这篇文章,可以说,这是我见到的对移动rem单位做的最详细,最细心的一篇总结性文章,果断转载至本博客,以便有需要的同志们研究。

本文结合作者(流云诸葛)对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值。

利用新浪微博接口生成漂亮的微博卡片

新浪微博开放平台(http://open.weibo.com/)提供了大量的接口API,如粉丝,微博,评论,用户读取等26个接口,共分为微博相关API,公共服务API,地理信息API等三大板块API。开发者只需注册开放平台App Key,即可利用开放平台提供的API测试工具测试各个不同的接口。本站很多地方都用到这些接口,如留言板中的地理位置,博客右侧的新浪用户卡片……

本文主要说的是利用新浪用户读取(https://api.weibo.com/2/users/show.json)接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格,而此接口需要access_token和(uidscreen_name)两个必填参数,其中参数uidscreen_name二者必选其一,且只能选其一;并且接口升级后,对未授权本应用的uid,将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下:https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid,该接口返回一个包含了该用户各种信息的json对象。

为你的博客添加简单的CSS3音乐播放器

有网友@she在留言中询问本站音乐播放器如何实现,博客也好久没更新了,趁着清明放假有点时间,分享一下实现过程。这是一个很简单的播放器效果,界面主要利用CSS3的一些属性,如animationtranslatetransform等,效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能,如需实现诸如酷狗音乐的播放器效果,请深入研究Audio。个人认为,该播放器足以满足博客等非音乐网站的需求。当然,诸如以往,以上包括这句都是废话:)

从这几个月的一点感悟谈改版

一直忙于项目,从3月份到7月份,好房SOFT腾讯二手房(现已改名好房UU),微店,联动....碾转于北京成都,第一次坐了飞机,第一次在腾讯呆了20天...忙忙碌碌的四个月,从差点拿不到毕业证到抱着毕业证喝酒扯淡大骂某老师感谢班主任,从认识才哥到才哥高就百度,从认识超然到超然连续跳槽,阿甘、李哥、廖哥、建军、如同流水线的来了去了的产品经理....很多人,很多事,时间与空间的交集都聚焦在了这家公司,而我,即将离开它!人家都是找好下家再辞职,而我,喜欢裸辞!

没有感情终归是假的,继续呆着又不免矫情,怎么说呢,一切都好,只是不适合我,我还年轻,还有一些想法没有实现,还有很多明知不可为而为之的梦想要去追寻,我可不想把太多的时间浪费在扯淡的IE6、7、8上,呵呵……