程序猿最爱
前端技术乐园

最新发布

前端技术

微软雅黑的黑与密

作者( 赵岩 )原文(/post/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%E7%9A%84%E9%BB%91%E4%B8%8E%E5%AF%86.html)

缘起,“现在微软雅黑这么普遍了,为啥很多门户还是坚持使用宋体字?”

这句话越想就发现问题越多,比如: 1.雅黑真的很普遍了吗 2.为啥这提到的是门户网站呢 3.雅黑普及了之后就能代替宋体吗

就上面想到的三个问题说一下我的理解

微软雅黑是 Windows 从 Vista 开始自带的系统字体,而且 Office 2007 中也包含了这款字体,虽然没有权威的统计过它的份额,但据CNZZ的对操作系统的统计(vista和win7没有超过30%),雅黑应该还没有达到普及。

阅读全文 »

前端技术

input搜索框心得

作者( 司晨 )原文(/post/input%E6%90%9C%E7%B4%A2%E6%A1%86%E5%BF%83%E5%BE%97.html)

我们需要制作这样一个搜索框:

首先我先抛出制作这个搜索框的细节:

1)文本输入框要有内阴影。

2)文本框与按钮要对齐。

阅读全文 »

前端技术

从javascript闭包函数的undefined形参说起

作者( 非主流童话 )原文(/post/%E4%BB%8Ejavascript%E9%97%AD%E5%8C%85%E5%87%BD%E6%95%B0%E7%9A%84undefined%E5%BD%A2%E5%8F%82%E8%AF%B4%E8%B5%B7.html)

今日读一源码,偶见如下写法:

(function(win, doc, undefined) {
    //some code
})(this , document);

这个undefined的作用是什么呢?主要如下:

阅读全文 »

前端技术

从本质认识JavaScript的原型继承和类继承

作者( akira_cn )原文(https://www.h5jun.com/post/inherits)

JavaScript发展到今天,和其他语言不一样的一个特点是,有各种各样的“继承方式”,或者稍微准确一点的说法,叫做有各种各样的基于prototype的模拟类继承实现方式。

在ES6之前,JavaScript没有类继承的概念,因此使用者为了代码复用的目的,只能参考其他语言的“继承”,然后用prototype来模拟出对应的实现,于是有了各种继承方式,比如《JavaScript高级程序设计》上说的 原型链,借用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承 等等

那么多继承方式,让第一次接触这一块的小伙伴们内心有点崩溃。然而,之所以有那么多继承方式,其实还是因为“模拟”二字,因为我们在说继承的时候不是在研究prototype本身,而是在用prototype和JS特性来模拟别的语言的类继承

我们现在抛开这些种类繁多的继承方式,来看一下prototype的本质和我们为什么要模拟类继承。

阅读全文 »

前端技术

关于ie8中微软雅黑字体显示的问题

作者( snadn )原文(/post/%E5%85%B3%E4%BA%8Eie8%E4%B8%AD%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%E5%AD%97%E4%BD%93%E6%98%BE%E7%A4%BA%E7%9A%84%E9%97%AE%E9%A2%98.html)

最近在做一个页面的时候,发现在ie8浏览器(也包括ie7)中,字体有显示发虚,甚至大小不一样的问题。

经过追查,发现原来是使用透明滤镜后,对字体的渲染造成了影响。

阅读全文 »

前端技术

[译]CSS在WebKit和Blink下的区域绘制

作者( snow yang )原文(http://blogs.adobe.com/webplatform/2013/10/28/)

由安德烈·布库尔发表于2013年10月28日

CSS 2.1规范定义了一个盒模型用来显示页面文档里面的内容。WebKit和Blink引擎遵守本规范并且予以实现,那么,假设显示文档布局时每个元素都是一个单独的盒子,文档片段越来越多,就会出现一个盒子里还有多个盒子的情况。这意味着,引擎必须做一些判断和处理来正确渲染它们。关于Fragment实现方面在我之前的文章 “CSS Fragmentation In WebKit”中有详细介绍。所以在这篇文章中,我们专注于CSS区域绘制是如何实现的。

图片1

图1

     考虑这样一个文档流RenderFlowThread,它包含3个指定宽高的区域。渲染之初,布局中只有body元素的内容,所以会先计算页面主区域(RenderRegion对象)的大小和位置。然后再展现RenderFlowThread对象中的内容。正如你所看到的,各区域宽度不同,这也将影响线框(line box)的大小。图1可以看到布局后的RenderFlowThread草图,我们以不同的颜色来区分这些片段,之后好方便看该区域将被定位的地方。严格地说,文档流的宽度应为其内容中最宽区域的宽度(在这个例子中是RenderRegion3)。根据存储在RenderBoxRegionInfo类型对象中的宽度值,每个区域block的宽度决定了线框的宽度。各区域间的空白是有分页支柱标识的(在图1中为灰色箭头表示),看起来自然些。因为RenderFlowThread的高度是其所有区域高度的总和,如果内容太多,可能会溢出(见图1中RenderFlowThread的底部)。

图片2

图2

随后,在绘图时候内容片段才真正被渲染。当一个区域将要被绘制时,它会先调整图形上下文的位置,然后在正确的位置上绘制RenderFlowThread层内的该区域盒内容。再次根据RenderBoxRegionInfo对象来调整它的宽度,一切看起来都像在区域内部的一样(例如边框和阴影等)。其他区域的部分并不在预期之内,会被裁剪掉(如图2的灰色部分)。在最后一个区域,你可以看到底部溢出的区域没有被裁剪。这是因为裁剪的是RenderFlowThread的可视化部分,它包括所有的内容,直到再没有自绘制的层为止。就这样,RenderFlowThread的内容(包括溢出)被分散了,每个区域绘制的仅仅是它的一部分。在绘制过程的最后,RenderFlowThread看起来像如下图3,每个区域只包括其一部分,最后一个区域的溢出是可见的。

图片3

图3

目前我们正在研究的以上流程的一个重要改进。就是如何把对RenderFlowThread的绘制委派给区域层自身去处理,而不是目前执行的区域渲染。这能使我们以树形结构更好的绘制RenderFlowThread,并且修复一些bug(例如:相对定位溢出区域的裁剪错误)。

阅读全文 »

前端技术

使用node.js cheerio抓取网页数据

作者( bower )原文(/post/%E4%BD%BF%E7%94%A8node-js-cheerio%E6%8A%93%E5%8F%96%E7%BD%91%E9%A1%B5%E6%95%B0%E6%8D%AE.html)

想要自动从网页抓一些数据或者想把一坨从什么博客上拉来的数据转成一种有结构的数据?

居然没有现成的API可以取数据?!!! !@#$@#$…
没关系 网页抓取可以解决。
什么是网页抓取? 你可能会问。。。
网页抓取是以编程的方式(通常不用浏览器参与)检索网页的内容并从中提取数据的过程。

阅读全文 »

前端技术

【翻译】行高的相关计算——文档节选

作者( snadn )原文(http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height)

翻译原文链接:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height

译者序:

翻译该段文档,是因为自己在写相应的样式时遇到了疑惑,于是找文档看说明,发现很多地方和自己以前的理解还是有很大的差异,阅读后收获颇丰,而且网上目前的中文参考资料中似乎也找不到原滋原味的定义。于是决定自己翻译一下,也算是对自己的锻炼吧。第一次翻译,错误和不足的地方欢迎大家指正。

ps:没想到短短的一段文档翻译居然用了两三周时间才完成。文章仅为翻译,对知识点的整理和总结等以后有时间再考虑吧。

阅读该文档时需注意每个用词,不同用词有不同含义,相似的用词往往指代的是不同的对象。一定要弄清楚文档描述说明的对象是什么。文档中“box”统一翻译成了“盒子”,“elements”统一翻译成了“元素”。

阅读全文 »

前端技术

用Node.js开发微信墙简明教程

作者( akira_cn )原文(http://www.h5jun.com/post/用Node.js开发微信墙简明教程)

https://github.com/akira-cn/wxdev

这是一个简单的用Node.js开发微信墙的教程,在这个教程中,包括以下几部分内容:

  • 验证服务器有效性
  • 接收用户通过微信订阅号发给服务器的消息
  • 解析收到的XML文本消息格式为JSON
  • 用模板构造应答用户的XML文本消息
  • 将接收到的消息通过WebSocket服务广播
  • 获取消息发送人的用户基本信息(名字和头像)

阅读全文 »