字体渲染
1 commentsfhz 2014-07-29
说到web性能，前端工程师很自然地反应是yahoo的30+条优化规则。这些规则可以将网页加载从原来的几秒甚至十几秒较少到3s甚至1s以内。当一个完整界面展现在用户眼前时，内容就通过不同的字体、图片以及多媒体传达给用户。使用户在1s内看到网页和使用户留在网页上几分钟甚至几十分钟同样重要。字体作为内容承载信息的重要部分，若使用不“适当”的字体或者字体由于渲染等缘故对用户不友好，则会（有可能）造成不必要的用户流失。本文介绍浏览器的字体渲染，希望还未接触字体渲染的同事能通过本文对字体渲染有所了解。
首先看下不同浏览器下的截图，来自携程-攻略社区。
玩转git之webhook应用初探
1 commentsl, jian 2014-07-23
在百度搜索了一下 git webhook 这个关键字，没有看到有相关的详细的应用教程。
所以决定把 自己这段时间以来的摸索 写成文字 分享给大家 。
最近碰到这样的一个需求，就是 本地提交代码 到 git仓库以后 需要 网站 远程自动同步代码 。
git 的 webhook 正好能 满足 这个需求。
具体步骤：
服务器端：
1. 服务器端 生成 apache 的 deploy key
sudo -u apache ssh-keygen -t rsa -C “[email protected]”
2.给apache 操作目录的权限
第一种方法 直接给 目录 777 权限 简单粗暴
第二种方法 建立用户组 把 ftp用户 和 apache 添加到该组别里面 ， 给予该组权限
groupadd gitwriters adduser [yourusername] gitwritersadduser apache gitwriterschgrp -R gitwriters /path/to/your/repochmod -R g+rw /path/to/your/repo
3.在需要自动同步的仓库打开hook
cd /项目/.git/ cp hooks/post-receive.sample hooks/post-receive vim hooks/post-receive #加入下面代码 GIT_WORK_TREE=/home/www git checkout -f
4.加入接收 webhook的 脚本， 在项目 创建 update.php
$www_folder = "/2T/ftp/utools/uilib" ; //git仓库地址 $git_repo = "[email protected]/.......abc.git" ; //执行指令 echo shell_exec(" cd $www_folder && git pull $git_repo 2>&1 ");
gitlab 端的设置：
找到项目的设置 ， deploy key项 添加 直接 apache用户 生成的 ssh key webhook 项 添加 网站地址/update.php （正常能够访问的链接） ， 勾选 Push events 保存
完全以上配置 。服务器端自动同步代码的功能就能够实现了。
网页字体设置你了解吗？
6 comments破男孩 2014-07-15
以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体，然而当更多的设备和系统出现后，以前这样的设置已不能满足网页在各设备上的显示需求。
就拿最简单的宋体(simsun)来说吧，在Windows系统下显示是一个比较容易阅读的字体，然而在Mac上简直无法直视，如下图给出一个优化前后页面的对比效果：
因此，出于种种原因，促使我不得不去对字体做一个相应的了解。
对于网站字体设置，本文给出以下意见：
移动端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
pc端(含Mac)项目：
font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
移动和pc端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;
图片优化的那些工具
Get first晓辉 2014-06-23
图片作为页面的一个主要因素，它的大小直接影响了页面的加载速度，这一点在移动端尤显突出。
怎么让图片的大小更小？除了选择合适的格式（jpeg、gif、png），我们还可以利用网上的应用（如smushit、tinypng、imagemin、imageOptim）对图片进行压缩。在这里我想给大家介绍一下上述应用主要使用到了哪些命令行工具以及它们的使用方法。 Read more »