把帽子扔过篱笆

把帽子扔过篱笆

上个月收到苹果的开发者账号续费邮件,我注册已经这么久了么?

那我买design+code,sketch3也超过一年了?

还没有发布过一个,额,还没有做过一个自己的APP

去年买的跑鞋,一次没穿

elance月费,就让他扣吧

我丢过去就走,不爬过去

有意义的一天

linode 和 dnspod 已经连续一星期给我发邮件提示博客有问题了。
cpu 超出200%,博客访问段时间中断。

最后发现是 php5-fpm 同时运行多个实例,占用cpu超过100%

查看最占资源的程序:

# top //找出CPU使用率高的进程PID
# strace -p PID //跟踪进程
# ll /proc/PID/fd //查看该进程在处理哪些文件

top 命令可以看到 多个 php5-fpm 实例在运行,每个都占用20%的cpu, 10个就是200%!
strace -p PID 跟踪进程,可以看到是正常的wordpress访问流程。不是文件被修改。

配置 php5-fpm:

https://github.com/rtCamp/easyengine/issues/184

/etc/php5/fpm/pool.d/www.conf
on your config it is set to
‘pm = dynamic’ change it to ‘pm = ondemand’
and uncomment ‘pm.process_idle_timeout = 10s;’.
Then restart php5-fpm

查看log文件:

tail -n filename > newfile
其中 -n 的 n 为文件最后的几行,
结果重新定向到一个新文件newfile去。

tail -f 可以保持显示新加入到log中的数据

看到有一个ip访问频繁,平均一秒几次,不是人。

nginx block ip:

nginx block 以后,这个ip还在继续访问,log还在快速增加

ufw block ip:

sudo ufw insert 1 deny from 1.1.1.1

从防火墙屏蔽该ip,access_log增长速度骤降。

成效显著:

cpu usage

RETINA时代的前端优化

RETINA时代的前端优化

原文链接:http://www.haipi8.com/css/477

一,什么是Retina?

“Retina”“视网膜屏”是苹果为最新的双密度的屏幕起得名字,其他厂商也有类似的屏幕,只是不叫这个名字。最新的iPhone,iPad,MacBook Pro等设备用的就是这类屏幕。

二,Retina屏幕带来了什么问题?

以MacBook Pro with Retina Display[3]为例,工作时显卡渲染出2880×1800个像素,其中每四个像素一组,输出原来屏幕的一个像素显示的大小区域内的图像。这样一来,用户所看到的图标与文字的大小与原来的1440×900分辨率显示屏相同,但精细度是原来的4倍…由四个像素代替原来一个像素。

wikipedia

这样就会造成普通图片在Retina屏幕上显示模糊

Non-Retina display and retina display

三,这个问题会影响哪些地方?

1,Favicon

2,Web Clip

3,图片

4,图标

四,怎样解决这个问题?

将原来的文件增大为原来的4倍(宽高都X2) 继续阅读

CSS 长度单位

CSS 长度单位
原文: https://hacks.mozilla.org/2013/09/css-length-explained/
中文:http://www.haipi8.com/news/469 

大家都知道 CSS中的 英寸(in)在屏幕上并不是真正的英寸, 1像素(px)也不是真的1像素,你知道这些CSS单位是怎样在屏幕中展示的吗?

工业上的1英寸 = 2.54 厘米 = 0.0254 米

设备像素
电脑屏幕上显示东西,以像素为单位。显示屏上可以显示全部颜色的一个物理“光点”,在本文中称为“设备像素”(区别与CSS中的“像素”)

DPI,每英寸点数(dots per inch);PPI,每英寸像素(pixels per inch)
一个设备上的“设备像素”来自于制造商给出的像素密度(单位是 DPI 或者 PPI),DPI 最常用,但是 PPI 更准确。大多数液晶显示器上显示一像素的所有颜色,需要红绿蓝三个点,有些显示器为了节省空间或者增加有效像素密度,像素之间还会共享点。

CSS像素(px)
一个CSS像素的尺寸是一个肉眼可以比较舒适的看出来的点,没有小到需要眯眼睛,也不会大到可以看清像素内结构。(眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。 )W3C CSS 规范根据视角定义了“参考像素”

1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) )

w3c css pixel
w3c css pixel

上图中,左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;
而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。

96dpi是参考20世纪的标准,21世纪的常用设备上有不同参考建议

reference pixel
reference pixel

综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。

CSS英寸(in)
在电脑显示器上,CSS英寸与实际的英寸没有关系, 而是等于 96 CSS像素。这样就造成一个尴尬,不能用 CSS 单位在显示器上画出一个准确的尺子,CSS单位是为了在不同的设备上都让用户感到舒适。

不过真的需要尺子的话,可以打印到纸上,打印机会把CSS英寸映射为正确的物理尺寸(打印机要关闭缩放选项)。

设备像素比,DPPX(Device pixel ratio)

时下许多智能手机都有高密度显示屏。为了确保CSS像素大小一致,需要将多个设备像素映射到一个CSS像素。DPPX 就是 CSS 像素与设备像素的比例。

用 iPhone4 举个例子,它有 326 DPI 显示屏,根据上表,智能手机的典型观看距离大概16.8英寸,基准像素为 160 DPI。所以要显示一个 CSS 像素,苹果选择将像素比设置为2,所以看起来就和 163 DPI 手机中显示的一样了。

看上面的数字,为什么不做的更好,把像素比设置为 326/160 = 2.0375,做一个与参考像素完全相同的尺寸。 事实上,这样的比率将导致更严重的后果,每个 CSS 像素都不是用一个完整的设备像素显示,一些图片,边框都需要完整的像素才能正确显示,不然看起来会发虚。还有,163 DPI 正好是上一代的 iPhone 的像素密度。

CSS point(pt)
点是一种印刷行业中常用的单位,继承自活字印刷中的单位,当这个行业进化到用桌面排版后,pt 被重新定义为 1/72 英寸。 CSS 遵循了相同的约定,映射 1pt = 1/72 * 1in = 96/72 CSS像素

所以 pt 和其他传统单位一样,必须打印出来才和物理单位一致。

CSS PICA(PC),CSS厘米(cm),CSS毫米(mm)
与英寸(in)类似,同时保持相对关系。

viewport meta标签
虽然智能手机可以很方便的在手掌上显示让眼睛舒适的大小,但是固定宽度的网站,不能只显示一部分,也不能不顾 CSS 规则显示成别的样式(貌似很多手机浏览器会重新排版……)

viewport 标签解决了这个问题,可以让开发人员控制在桌面版显示完整版,手机上显示缩放后的页面。

总结
浏览器常上在竞争的同时,也意识到努力保持稳定的Web平台,通过一个标准组织协调功能集。新的特性和 API 在所有场景中都测试后才宣布其作为一个标准。 CSS 像素的定义,从一开始就是这样的。新的特性必须保持向后兼容,而不是改变旧的行为(咳咳,xHTML,呵呵),所以很多特性(设备像素,viewport 标签等)都是作为新的内容加入,旧页面就会忽略这些特性,自动有了“向后兼容”的能力。

参考链接:

A quick PSA on “dots” versus “pixels” in LCDs
http://techcrunch.com/2010/07/21/a-quick-psa-on-dots-versus-pixels-in-lcds/

CSS 长度单位
http://www.w3.org/TR/CSS2/syndata.html#length-units

像素(px)到底是个什么单位
http://hax.iteye.com/blog/374323

1996 W3C CSS 像素定义
http://www.w3.org/TR/REC-CSS1-961217#length-units

为什么你应该把按钮左移三个像素

为什么你应该把按钮左移三个像素

本文链接: http://www.haipi8.com/news/452
原文:Why you should move that button 3px to the left

3px

每次当产品即将发布的时候,我就变成了完美主义者,每个元素的错位或蹩脚的交互都让我芒刺在背。 每次都会有十几个细节实现上的小错误,它们就像在嘲讽我,觉得一切都不对劲。

但对于团队中的其他人来说,我们的产品很好啊,功能正常啊。 他们会问“把这个按钮向左移动三像素,真的能改善我们的产品吗?”然后接着说 “上次我们修复一个很小的设计问题后,没有感觉到有什么区别啊” ,然后团队就扭头转向下一个“big idea”和下一组新功能了。

如果你和我一样是个较真的人,遇到这样的情况,你也会感到很挫败。作为设计师,我们要为用户体验的整体质量负责, 但是我们能设计出来漂亮、复杂、愉悦的细节,却拿团队其他人没有办法,我们没法儿控制队友制作、测试、发布的过程。

到底应该怎样说服我们的工程师和产品同行同样关注设计的整体细节呢,纠结了很长时间后,以下是我的几点体会: 继续阅读