[Task Master] gulp-lint

初衷 从事前端开发这个职业几年之后,我已经彻底从一个完美主义者变成实用主义者。但是对于代码风格的要求,却越来越强烈。 在一个「用户体验」已经用滥的圈子,也有很多 web 开发者或真心或虚伪得说要一个「有非常好的用户体验」的产品。但是你看看他们的代码,可读性极差都不算什么严重问题,有的甚至像几个不同性格的分身写出来的。在我看来,写代码也是在做「产品」,只不过不同于直接面向用户的产品。但是,如果这点意识都没有,我很难相信他们能做出什么体验良好的产品来。 在我看来,良好的代码风格就像好的木工做壁橱时,放在靠墙那侧的那块好板子。

查看全文

table-cell的手机应用场景

前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒其实可以用到移动端来。 在PC端,应该很少用到 display:table-cell 这个属性,究其原因在于兼容性【IE8+以及现代浏览器才支持】,或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能,这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的,并且 margin 外边距还达不到 table-cell

查看全文

网页字体排印指南

排版者应像手艺人一样遵循一条原则:做好自己的工作并隐于无形. 关于 网页上百分之九十五的信息是「文字」,大多数人浏览网页的状态就是阅读,也就是你目前正在做的事情. 因此作为一名前端工程师,让文字更好地在网页显示,是一件极其重要的工作. 字体排印有两种形式,一种称为 Creative Typography,另一种称为 Technical Typography. 前者倾向于设计,比如选择的字体表达的情绪,字间距的设定带来的视觉影响. 而后者更倾向于技术,以一套有迹可循的规则进行应用,比如实现「齐头尾」如何避免中西文混排造成的字间距拉伸,以及选择什么样的

查看全文

HTTPS, SPDY和 HTTP/2性能的简单对比

中文原文:HTTPS, SPDY和 HTTP/2性能的简单对比 整理自:A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 请尊重版权,转载请注明来源,谢谢! 这几天手机不断被联通劫持,用知乎日报都会被插入联通的垃圾广告,更别说在微信中访问第三方网站了。于是关注了一下防止网站被运营商劫持的技术,这里推荐Fenng之前发的文章,在流氓无下限的运营商的手段下面,我们能做的其实并不多。

查看全文

用Ionic开发hybrid APP

转载自:用Ionic开发hybrid APP 原作者:xiaodao 请尊重版权,转载请注明来源,谢谢~~ 使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源。 Ionic的优势非常显著:

查看全文

前端观察又改版

最近学会了sketch,然后就试着给博客改下版面。 然后等我画完设计稿后,发现竟然和早期的前端观察模板非常像!对比一下: 现在 过去 这说明了我还是从前的样子么? 简单说一下中间的一些想法: 我是字体控,所以这次对字体比较讲究,英文字体使用了Helvetica Neue,中文使用了兰亭黑,字重都是100,嗯,超细体,在Mac下表现很赞,字重使用了400,100太细更适合有设计感的原生,而不适合内容。但这些都不影响windows,windows默认字体会是Tahoma和微软雅黑,字重400。 然后logo却用了华文仿宋和宋体,我觉得像宋体/

查看全文

引入css外部样式表

前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 <link rel="stylesheet" href="style.css" /> 就这么简单,还有什么,so easy,我之前都是这么认为的你肯定比我聪明多了~_^,但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲,因为已经上传的样式表木有改变,IOS还好,可以强制刷新页面。但是安卓端这块一直在用微信的缓存,还没有刷新的按钮,所以觉得css引入问题目测应该没有这么简单。 好了,下面都是一些自己的纯扯蛋瞎扯,

查看全文

css透明度的一些兼容测试

前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里。很显然,婀娜多姿的模特被黑色药膏挡住了,用户完全感觉不到药膏下的她是有多么秀色可餐,因此也没有点击“性趣”去点击这条新闻了。所以必须来修改,让婀娜多姿的图片有种朦胧美。 我们希望起码IE7+的效果都是这样 这只狗有点丑,它在微博上求助各路PS大神,请它玩坏 代码进行时 HTML代码如下: <li> <img

查看全文

利用css3-animation来制作逐帧动画

前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇。今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animation 属性来写了一个菊花打转的loading,然后google了一下知道了有这么一个css动画组件叫做 animation.css 其实还有很多这种动画组件,他们很多都是基于jquery来操作的。今天我们不是来谈他们怎么用的,只是来了解一下执行这些动作后的这个animation属性,到底是怎么起到作用的。 先上最终demo:奔跑的小人物 或者拿出手机手机扫一扫 动态效果如下 假如你想要用非gif做一些css的逐帧动画,那不妨可以看看这篇文章,说不定哪天还真用得着呢 animation介绍 对于这个css3属性,w3c定义其为实验性技术,

查看全文

利用伪元素仿苹果手机官网导航

前言 好久没有上苹果官网了,周三用手机登录 苹果官网 的时候,发现苹果官网的导航用了自适应,并且把所有的导航都浓缩在一个打开关闭的小图标,如下图: 看见左上角这个两杠的东东了嘛,点击弹出导航,再点击然后隐藏,右键审查元素看了一下,用到的是svg标签 <svg x="0px" y="0px" width="100%" viewBox="0 0 96 96"

查看全文