[译]视觉差,走起!

译自:https://www.html5rocks.com/en/tutorials/speed/parallax/

简介

现在满大街都是视觉差(parallax)网站了,我们随便看几个:

也许你对这玩意儿还不太熟,视觉差其实就是它的视觉结构会随着页面的滚动而变化。通常情况下页面里的元素会根据页面的滚动位置而缩放、旋转或移动。

一个视觉差页面的demo
我们的视觉差demo的完整效果

不管你喜不喜欢视觉差网站,有一件事毫无疑问,它是一个性能的黑洞。因为当页面滚动时,浏览器的优化都倾向于新内容随滚动而出现于屏幕的最上方或最下方的情况。一般来说,内容改变得越少浏览器性能越高。而对于一个视觉差网站来说,在页面滚动时,好多元素都在发生改变,大多数情况下整个页面的大块可视元素都在发生变化,所以浏览器不得不重绘整个页面。

我们有理由这样归纳一个视觉差的网站:

  • 背景元素会在你向上或向下滚动页面时改变位置、旋转或缩放。
  • 页面内容,如文字或小的图片,在页面滚动时会按照传统的方式进行上下移动。

建议大家先阅读我们之前介绍过的滚动性能来改进你的app的响应速度。本篇文章是基于那篇文章所写的。

所以文字是如果你在建立一个视觉差网站,那么你是否受困于高昂的重绘开销?有没有别的改进建议使得性能最大化?让我们看看这几个方案:

阅读剩余部分...

[译]Chrome开发者工具中评估性能的五大新特性

摘自:Chrome DevTools Revolutions 2013

本次开发者工具的改进中有几项新特性是针对性能的:

  • 持续绘制模式
  • 显示绘制矩形及其层的边框
  • 每秒帧数的测量仪
  • 找到强制同步布局(layout thrashing)
  • 对象分配跟踪

阅读剩余部分...

精气神儿

“国足打出了精气神儿”

相关新闻:东亚杯-王永珀2球孙可建功 中国两球落后3-3日本

当我再一次看到这样的标题的时候,我就知道,言外之意是国足的状况一定非常糟糕。

精气神儿是个什么东西?我觉得是一种最基本的态度,它只是个精神层面的很虚的过程。我举个例子,当你一无所有的时候,你只能说:哦,至少我还有节操。——这就是拿精气神儿说事儿的节奏。

国足说我们努力了,大家说其实人家从上到下还是很努力的,这一点我们还是要认可的……好吧你们确实真的很努力,但为时已晚。而且国足真的很差,现在才知道努力有个屁用?未雨绸缪的事情怎么从来没见足协做过?

以前国足被叫作头球队,叫热身赛之王,如今头球也没了,热身赛也能输个精光,连博彩公司的小伙伴们都惊呆了。
以前几年赢不了韩国就说恐韩,如今15年不胜日本了,也没人造出个什么恐日了,因为觉得跟人家比不自量力,丢不起那人。
以前国足98年,当时还叫东亚四强赛,国足在日本的主场2比0羞辱对手,范志毅还踢飞丢了一个点球,不然就是3比0的大胜(对,两边都是成人队,而且都是男足)。如今在一片铺天盖地的唾骂声中,国足才开始努力,开始打出精气神儿,勉强在最后时刻,逼平了日本二线队。

国足的努力掩盖不了一个事实,那就是战绩糟糕,排名持续下滑,多年无缘各项国际大赛。
这有什么可高兴的?

所以请别扯淡!拿成绩说话!!

看看今天的国足,还剩下什么?答:“只剩下两滴冰冷的泪水:一滴化斗酒添一份麻醉;一滴沉落于岁月的潮水。”

好。我这里对国足的吐槽完毕。

其实我没想太多聊国足。

接下来,请把“国足”二字换成你看到“其实很努力”之后首先联想到的事物,然后把上面全文的“国足”二字换掉重读一遍。相信你会很有乐趣和感悟。

细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202

吐在前面的槽……

今年,在老罗锤子手机一路跳票、累不死手机活蹦乱跳、魅族手机版本号即将输给小米、iOS被拍扁、Windows Phone在卖萌、安卓在卖身等诸多鸟事相继雷到众生之后,人们无不感叹,手机这个行业还有救吗?站在智能和愚蠢的十字路口,我们该何去何从?囧rz

就在大家迷茫之时,Nokia发布了它的又一力作——1050!整个业界犹如刮来了一股春风,无不感到清新舒畅。大家纷纷感叹,那个曾经的科技巨人就要王者归来鸟!这个夏天,This summer,最受瞩目的大事件,big event!就是:

Nokia 1050 的发布!!!

作为一个反智能化手机操作系统的支持者,我很自豪的宣布,经历了前两轮的预定失败之后,我终于在上周成功订到了这款神机——要不要卖得这么好啊 - -

我之前用的手机是Nokia 1202,2008年的神机,其实也不算太老,要不是1050发布,它也其实已经是一个非常现代化、非常新款的愚蠢手机了,无奈在这个1050的时代趋势下也不得不接受停产的命运。

1050基本上继承了1202所有的成员函数和成员变量,小巧大方,简单易用,低碳环保,超长待机,便宜实惠,这已经足以吊起广大消费者的胃口了。然而真正的1050到底表现如何?它能否在1202的光环之下更进一步再创辉煌?带着这些疑问,记者走访了不少xxx,挖掘出了很多珍贵的xxxx,也听到了各种xxxxxxxx……

OK 马上开始

目录

  1. 开箱/外观
  2. 屏幕
  3. 主界面
  4. 基本功能 (电话/短信/通讯录)
  5. 特色功能
  6. 实用工具
  7. 性能/续航能力
  8. 综述

阅读剩余部分...

秦升拿到红牌之后……

  • 工体上空飘扬着“傻X”的洪亮口号,晚上天津牌照的车又被砸了不少
  • 比赛收视率直线下降——比赛才开始了13分钟,还有80分钟呢
  • 赞助商的脸全都绿了,下次国足的比赛就没有再打广告了,不过无非是又有别的厂商挨宰了
  • 谭晶从此霉运不断
  • 看台上两国外交部长正在谈一个上百亿的项目,荷兰大爷若有所思的说:这个我们回去再考虑考虑…… 对面:恩,下次我们还是改一起看乒乓球吧
  • 刘建宏紧紧攥着双拳:完了完了,今天这场球大Boss都在看啊,这种球我该肿么说比较得体呢?肿么办肿么办……
  • 小区里:还是很安静的,现在大家看球都不是看彩电了,要么是笔记本电脑,不舍得扔下去,要么是大平板电视,扔不动

阅读剩余部分...

用Sass重新整理自己的博客主题样式

Sass

远远关注Sass很久了,今天终于鼓起勇气写了我的第一个Sass文件

Sass简介

一种CSS的预处理程序,基于Ruby运行。安装过程和相关的准备工作非常简单:

  1. 当然首先要安装Ruby
  2. gem install ruby,必要的环境下需要在命令前加上sudo
  3. 进入我的博客主题文件夹,运行sass-convert style.css style.sass,把我的css文件先转换成sass文件
  4. 运行sass --watch style.sass:style.css,使得程序自动把style.sass文件接下来的任何改动自动同步转换到style.css

这时,新的Sass文件就创建完毕了!^_^ 去碎觉……

呵呵,开个玩笑。其实这样的Sass文件虽然格式上没有任何问题,但和直接撰写CSS几乎没区别。而Sass除了可以让我们少写几个花括号和分号之外,其实还有很多实用的特性是我们真正需要的。

无论如何,现在的这个Sass文件是一个整理的基础,接下来,我们就来一步一步整理这个文件,同时也一步一步熟悉Sass的特性。

阅读剩余部分...

Connect中间件使用手册

以下内容大多译自Connect官网 2013-06-02

Connect是基于Node的中间件框架(middleware framework),提供超过18种官方中间件以及更多的第三方中间件。

示例:

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
    res.end('hello world\n');
  })
 .listen(3000);

安装方式:

$ npm install connect

依次介绍官方中间件

阅读剩余部分...

实践

上周末在图灵的技术沙龙分享了自己Node.JS的一些项目实践心得。

Node.JS这东西说起来也是3年前就听说的东西了,最近一段时间才真正拿它做东西。这种感觉既熟悉又陌生,熟悉在听大家谈过无数次,陌生在自己没怎么亲自动过手。这回的一些尝试和项目实践,让我更多的了解了这门技术,也更好的了解了我自己。

分享的在线链接在此:https://t.cn/zHIafSq,这里就不重复其中的内容了。

《程序员》201303期封面

我想更多说的是,我们有幸在HTML5快速发展的时代,这里几乎每天都会有新的规范、新的工具、新的库、新的框架、新的理论。玲琅满目,目不暇接。也许我们每天走马灯似的看它们,都不一定看得过来。我感觉自己就长期处于这种状态。可是当这些东西都只是我们眼前的匆匆过客,来不及细细体验、品味其中的内涵,那和从来都没看过相比,有多少实质上的差别呢?

我觉得这里有两件事情值得考虑:第一,要再多些时间在新技术的关注和尝试上;第二,有选择性的深入其中。

先说第一点,我们不能始终沉醉在对现有技术或业务的娴熟之中,同时要相信技术和产品、设计、市场、商务一样,可以驱动业务的发展和进步。我们唯有带着这样的信念去工作,去和同事交流,去和领导沟通,去在团队里一起探讨问题,才会令自己有这种空间和时间。凡事都有难处,但总要走出这第一步。

第二,前端这个词逐渐由html/css/js三门语言和基本ps技巧的集合,变成一个无限宽泛的概念。我们在鼓励全面发展的同时,也不能一把抓,也需要量力而行,循序渐进,找到属于自己的突破口,找到和自身工作最佳的结合点。最关键的是,要有实践的机会。

人生有时难免会站在命运的十字路口,左右为难。最后发现,真正让自己踏实下来的,往往是这些真材实料的东西。

巧用 RequireJS Optimizer 给传统的前端项目打包

r.js 本是 RequireJS 的一个附属产品,支持在 NodeJS、Rhino 等环境下运行 AMD 程序,并且其包含了一个名为 RequireJS Optimizer 的工具,可以为项目完成合并脚本等优化操作。

r.js 的介绍中明确写道它是 RequireJS 项目的一部分,和 RequireJS 协同工作。但我发现,RequireJS Optimizer 提供了丰富的配置参数,可以让我们完全跳出 AMD 和 RequireJS 程序的束缚,为我们的前端程序服务。

阅读剩余部分...

编辑器小调查结果

我在侧边栏放了一阵子编辑器的小调查,时间过去比较久了,是时候统计一下了,供大家参考:

我一共放了5个默认选项,使用情况排名依次是:

  1. SublimeText 2
  2. Notepad++
  3. Dreamweaver
  4. EditPlus
  5. Vim

默认选项的选择情况

阅读剩余部分...