UBUNTU升级GCC到4.8

因为node4.0+升级了v8的版本, 所以需要C++11 以上的compiler支持, 也就是gcc4.8以上.

可能装二进制包的nodejs没有问题, 但是在遇到编译c++模块的时候, node-gyp就会报错了.

cent6自带的gcc版本是4.4.7, 不过可以使用red hat出的devtoolset-3(其实这是一套, 有1,2 现在版本是3, 参照官方教程即可)升级gcc到4.8+, 使用yum可以直接搞定.

ubuntu的话, 我自己使用的12.04.4LTS, 自带gcc4.6, 升级方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.添加PPA源
- add-apt-repository ppa:ubuntu-toolchain-r/test 
2.update
- apt-get update
3.装
- apt-get install g++-4.8
- export CXX="g++-4.8"
4. 查看gcc版本
- gcc -v
5. 如果是4.8+那就ok了, 如果不是, 应该是符号链接没有替换
ll /usr/bin/gcc*
如果看到gcc -> gcc-4.6是符号链接没有替换
rm gcc
ln -s gcc-4.8 gcc
rm g++
ln -s g++-4.8 g++
搞定

Ali面经

cover
其实作为大二学生是本不急着找实习的, 是刚从寒假回学校就感受到了周围春招的氛围. 于是三月初就先在阿里校招的网站上投了简历, 也没学过怎么写简历, 常规的博客, github, 项目, 会用的时髦技术尽量往上写, 内容上也并没有什么亮点. 而后也投了一些小公司, 积累了一些面试经验, 中间也拿到了去豆瓣实习的机会, 不过这都不是重点, 转回正题.

阿里的整个面试流程相对于BT要规范的多, 通过在线笔试后(后来得知全国做完前端笔试题的一共有2K多个人), 系统会把你的状态变成待安排面试, 并给你发短信让你进校招系统预约面试时间, 我选择的是成都站的面试, 支持5月5日一整天和5月6日的早上, 一天内又分好几个时间段, 考虑到从学校到成都需要三个多小时, 我选了5号的下午16:40, 然后顺便也会从后台获得一张通关卡, 将条码打印出来这个会在面试当天用到, 这个条码也是确认你身份的方式.

请了假, 定了当天来回的动车票, 一大早上完一二节的计算机网络, 就直接去面试地点. 到成都的时间差不多是下午两点左右, 早上来的几个学长因为是预约的下午的时间, 被告知下午按时到ali下榻的酒店签到, 我因为没地方可以去就直接进了酒店, 在签到处把通关卡和最新的简历交给工作人员, 就被通知进了候场区等候, 候场区有一个很大的滚动大屏幕(感觉是个全屏的网页), 上面有显示被叫到去面试的人和对应的面试官. 放下包去上个厕所的功夫, 在🚾就收到了一面的通知, 感慨效率之快的同时, 也径直到面试官们所在的大厅去(会有工作人员陪同到对应的面试官面前, 所有面试官面前都是一桌, 一MacBook😢).

一面的面试官看起来挺年轻, 先是比较常规的问题:

  • 自我介绍 – 我也就扯了些大学之前接触互联网, 以及大学之后怎样学习前端的经历, 做了哪些项目, 主要负责什么工作…

  • CSS 和 JS 哪方面强一些 – 直接回答的JS, 因为自己也比较多接触node后台方面的东西, 对逻辑性的东西比较感兴趣, 大概平时学习前端过程中70%是接触的js方面, 至于css也是正在提高中.

  • 给了一道js题, 将”alibaba”字符串去重 – 这个比较简单, 直接转化成数组去重的题

    1
    2
    3
    4
    5
    6
    7
    8
    var merge = function(str){
    	if(typeof str !== 'string') throw new TypeError();
        var _ret = [];
        str.split('').forEach(function(_s){
        	if(_ret.indexOf(_s) !== -1) _ret.push(_s);
        });
        return _ret.join('');
    }

然后他问我这个函数的时间复杂度是多少, 我回答的是O(n), 他提示道indexOf在调用内部会排序, 才意识到复杂度是O(logn), 他让我改进一下, 我直接写了var _obj = {}, _ret = '';就被示意ok了. 这题开始写的时候确实是不够严谨, 在object和array两种方式之间随便挑了个, 没有注意到indexOf的坑, 平时也该多注意.

  • 然后是一道css布局题, 左右100px固定, 中间内容区自适应 – 拿到这题应该很熟悉, sidebar布局很常见, 不幸的是我当时脑袋有点昏, 想了半天… 第一个说的是flex比较方便(确实方便), 主轴定为横向, 用3个div, 左右两个固定宽, 再设定flex居中就可以中间自适应宽度. 然后普通方法就比较多, 我先讲思路, 左右两个固定宽度的容器应该脱离文档流, float, 绝对定位, fixed都可以, 中间一个容器应该是100%宽度, 左右留出100px的空间来, 用margin, 当时脑抽说了padding, 面试官还提醒我是哪一种盒模型. 如果是border-box(IE6怪异模式)确实可以用padding了…

  • 然后问了我的项目, 有什么比较难的点, 是怎样解决的 – 貌似所有的面试官都会问这个, 我拿前几天给团市委写的实时投票说, https://github.com/wssgcg1213/WsVoter
    这个东西类似于央视星光大道投票, 用户端访问用户端页面投票, 大屏幕端与服务器通过socket.io双工实时将票数信息显示在大屏幕上. 扯了一些技术细节以及我在测试并发的时候遇到的问题, 估计他不是很懂后端这方面也没多问. 然后又问了我一个开源项目https://github.com/wssgcg1213/GhostBot 这是一个基于RSS的前端搜索引擎, 他就优化方面提了很多问题, 比如如何进行的关键字匹配, 我是直接用的正则, 他提出如果用户输入两个关键字, 怎样进行筛选, 我想了想说用类似于sizzle引擎的方法, 先把关键字分组, 按第一个关键词选出一个种子集, 再在种子集里选择第二个关键词的内容. 面试官说这样可能时间复杂度比较高, 有没有更好的. 我想了一会说还是直接用正则, 他让我手写正则因为忘得比较多当时写的比较龊也不献丑了…

  • 然后还问了有没有读过jq的源码, 我说了解过一些jq原型链的实现, 将jQuery.fn = jQuery.prototype等等, 问链式调用如何实现->return this, jQ的选择器原理 -> 从右到左, 选择器分组, 种子集.巴拉巴拉…, zepto怎么实现? -> querySelectorAll.

然后就让我先回去等消息了, 回到等候区看了下时间差不多40分钟左右, 喝了口水短信也发来了, 说是让我等待一会预祝面试成功什么什么的, 在校招官网后台查询到结果即将在xx点xx分揭晓. 也是没过几分钟就接到了二面通知, 得继续面~

这个面试官看起来沉着多了, 大概三十几岁的样子, 从他的MacBook Pro 15’ 差不多可以看出等级要比刚才的一面官(Macbook Air 13’)要高一截😂..

未完待续…

字体, Web设计中一个最关键的元素

cover-image

看了很多网站, 个人觉得字体的设计对于一个网站整体面貌的影响, 是巨大的.

但是字体设计, 这个东西应该属于贯穿网页设计到前端开发者的一个难题. 好的字体排版, 可以让人耐心的看完长段的文字内容, 而糟糕的设计, 甚至会影响到阅读者的心情.

废话不多说, 直接上干货.

##字体分类

  • 衬线体(serif)

宋体就是一种典型的衬线体

宋体

  • 非衬线体(sans-serif)

非衬线体中最典型的就是微软雅黑

雅黑

不要问我到底这两个有什么区别! 我个人认为非衬线体更适合在电子屏幕上显示, 感觉也更舒服.

##字体的选择

如何在网页中选用最合适的字体呢? 也许这个是UI设计师需要考虑的问题, 但是我从前端的角度来说说.

首先是不应该使用华而不实的字体. 文字是人类用来表达某种含义的工具, 如果一个文字不能被正确的识别, 那它的意义也没有了. 但是其实浏览器对于字体的选择, 不是仅仅一条CSS font-family就万事大吉了的, 第一就是用户的系统中需要有那个字体, 如果没有需要的字体, 那就只能使用默认的字体, 额外需要注意的一点是, 不同的系统比如xp, win8, OS X, android, 它们的自带系统字体并不是完全相同的, 这更给页面适配带来了难点. 这点, 设计师应该尤其注意, 少量的非系统自带字体比如Logo, 可以用图片代替, 但是大量的图片使用会带来大量额外的 HTTP 传输开销, 这应该是被避免的.

###使用多个字体属性来兼容

font-family 属性可以指定多个字体值, 如果前面的字体找不到, 则依次往后查找. 但是这个字体也不是随便写的, 也要按照一定的规范来, 顺序是 最想用的字体 >> 可以代替的相近字体 >> 相近通用字体, 中文字体 >> 英文字体.

1
2
font-family: Arial, "Hiragino Sans GB", "Microsoft YaHei",
             "WenQuanYi Micro Hei", sans-serif;

上面的意思就是, 英文字体使用Arial, 中文优先使用冬青黑, 其次雅黑, 然后是文泉驿微黑, 如果都没有就选择默认的非衬线字体.

上面这个排序来自于这里, 如何保证网页的字体在各平台都尽量显示为最高质量的黑体？, 这里还给出了不同的操作系统中显示效果最好的字体:

  • 对于 Windows：在中易宋体和微软雅黑之间二选一。粗体和较大字号的文本用微软雅黑。没有微软雅黑的系统会回退到中易宋体。
  • 对于 OS X：尽量使用冬青黑体简体中文。没有冬青黑体简体中文的系统会回退到华文黑体。
  • 对于 iOS：系统会自动使用华文黑体。
  • 对于 Linux：尽量使用文泉驿微米黑。没有文泉驿微米黑的系统会回退到别的字体。
  • 对于 Android：系统会自动使用 Droid Sans。

###使用webfont
CSS3 新增的 @font-face 属性，可以用来调用服务器上的字体，然后来渲染网页.

但是这个东西暂时只建议用在英文上, 因为一个中文字体动辄10+MB的大小, 使得打开一个网页比看一个视频还慢, 更得照顾那些手机用户, 你一个页面打开我一天的流量就超标了.

Google 提供了在线的 webfont 服务, 被墙了好一阵子, 但是听说最近几天fonts.googleapis.com这个域名已经指向北京的IP了. 国内有一个替代方案就是360公司前端的useso, 使用方式不赘述可以自行百度/谷歌.

当然中文也不是不行, 我们中国人就想出了一个相对比较完美的解决方案font-spider 字蛛, 它基于 Nodejs 通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。这个方案就对前端自动化的要求比较高, 适合比较 Geek 的团队或者个人尝试, 个人使用过一次, 效果还是很棒的.

##与字体有关的 CSS 属性
经常遇到美工的同学过来吐槽, 这个字体要细一点, 这个字要立体一点, 怎样把美工的术语转化成CSS属性呢, 来看看常用的字体属性.

  • font-family：用于定义字体
  • font-style: normal 正常、italic 斜体、oblique 倾斜。 关于后两者在FF和其他现代浏览器的区别请自行百度.
  • font-weight: 文字的粗细
  • font-size: 文字大小
  • line-height: 行间距
  • letter-spacing: 字间距
  • word-spacing：单词间距
  • text-align: 文本对齐方式
  • text-decoration: 通常用来操作文字下划线
  • -webkit-font-smoothing: antialiased: 抗锯齿, 这个属性的前缀表明了它是一个私有属性, 但是它可以改变浏览器的渲染方式, 使得字体看起来更加的平滑, 更加的细一些.

更多请参阅 CSS 参考

##字体的渲染

在不同的环境中, 字体的渲染效果是不同的.

在 OS X 下把黑色字体放大, 可以看到字体的边缘出现了彩色.

OSX字体

为什么相同的字体，在Mac OS上的显示效果「看起来」要比Windows上好看？

原因就是本段最开头那句话, 不同操作系统, 甚至不同的浏览器具有不同的渲染策略.

###黑白渲染

黑白渲染

###灰度渲染

灰度渲染

###次像素渲染

次像素渲染

看过 Zealer 王自如视频的同学都知道, LCD的单个像素通常是由 RGB 三个次像素组成的, LCD 能够单独的控制这些次像素. 所谓的次像素渲染, 就是利用了这些像素点中的某一个或几个次像素来达到平滑字体的效果.

次像素

###Windows
在 Windows 下, 次像素渲染使用的是自家的 ClearType 技术, 由于兼容性需要, windows 同时保留了 GDI 和 DirectWrite 两套图形文字渲染接口, 这两个接口同时支持 ClearType.
XP 下 ClearType 是默认被关闭的, 我记得是在桌面右击 - 属性, 字体, 选择一个下拉菜单为清晰的选项即可打开, 直到 Vista, ClearType 才被设为缺省打开.

字体渲染策略与浏览器和字体格式的关系：

字体渲染策略与浏览器和字体格式的关系

###OS X
OS X 很早就使用了字体平滑的技术, 但是 OS X 下的字体平滑在低 PPI 的显示器中会有发虚的倾向, 因为同样是次像素渲染来使字体平滑的技术, WIN/APPLE的理念是完全不同的.

苹果认为，（字体渲染）算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。

微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。

###手机

拿起你手边的手机, 用原生浏览器找一个网页打开截屏，再把图片不断放大后，你会发现手机上的字体渲染并没有使用亚像素渲染，这是为什么?

这是因为自从 Apple 推出 retina 屏的概念之后, 手机的 ppi 越来越高, 这个时候使用次像素渲染技术已经是没有必要了. 而且, 次像素渲染是要花费额外的 CPU 时间的, 带来的发热以及续航缩减问题也是厂商需要考虑的, 所以通常手机上都是使用的传统的字体渲染模式.

##参考和推荐文献

本文部分参考并引用了以下网络资料，同时也推荐以下资料：

引用部分，版权归原作者所有。